feat(schemas): templates

packages/app/src/components/page/editor/aside/graph/schemas/AsideGraphSchemaFolder.vue

@@ -20,7 +20,7 @@
         :class="[value ? 'transform rotate-90' : '']"
         @click.prevent.stop="toggle()"
       >
-        <IconArrowRight class="wb-aside-icon" />
+        <IconArrowRight class="wb-aside-toggle-icon" />
       </div>
     </div>
   </div>

packages/app/src/components/page/editor/aside/graph/schemas/AsideGraphSchemaListFiles.vue

@@ -17,7 +17,7 @@
         >
           {{ element.fileName }}
         </div>
-        <div class="flex">
+        <div class="flex items-center">
           <div
           @click.prevent.stop="
           schemas.onFileDelete({ file: element, folder })
@@ -28,7 +28,7 @@
         <IconArrowRight
           v-if="element.extra?.id"
             :class="[element.extra.configuration ? 'transform rotate-90' : '']"
-            class="wb-aside-icon"
+            class="wb-aside-toggle-icon"
             @click.prevent.stop="element.extra.configuration = !element.extra.configuration"
           />
         </div>
@@ -59,6 +59,10 @@
               <p>{{ t('editor.characters.item.important') }}</p>
               <InputBoolean v-model="element.extra.important" />
             </AsideGraphSchemaCharactersItem>
+            <AsideGraphSchemaCharactersItem>
+              <p>{{ t('editor.characters.item.disabled') }}</p>
+              <InputBoolean v-model="element.extra.disabled" />
+            </AsideGraphSchemaCharactersItem>
           </div>
         </div>
       </div>

packages/app/src/components/page/editor/aside/graph/schemas/characters/AsideGraphSchemaCharactersItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex gap-2 p-1 items-center bg-theme-background-2 wb-text text-sm justify-around shadow-lg rounded-lg"
+    class="flex gap-2 p-1 items-center bg-theme-background-2 wb-text text-sm justify-between shadow-lg rounded-lg"
   >
     <slot />
   </div>

packages/app/src/components/page/editor/header/items/EditorBaseHeaderProject.vue

@@ -25,13 +25,6 @@
         @action="ABSOLUTE.project.new = true"
       />
       <EditorHeaderItemDiv v-if="PROJECT.name !== env.projectEmpty()" />
-      <EditorHeaderItem
-        v-if="AUTH.account.user"
-        :divider="true"
-        :text="t('editor.bar.supabase.load')"
-        @action="router.push('/dashboard')"
-      />
-      <EditorHeaderItemDiv v-if="PROJECT.name !== env.projectEmpty()" />
       <EditorHeaderItem
         v-if="PROJECT.name !== env.projectEmpty()"
         :text="t('editor.bar.project.save')"
@@ -84,7 +77,6 @@
   import { useLocalStorage } from '@/use/storage/local'
   import { useSupabase } from '@/use/storage/supabase'
   import { useAuthStore } from '@/store/auth'
-  import { useRouter } from 'vue-router'
 
   const ABSOLUTE = useAbsoluteStore()
   const PROJECT = useProjectStore()
@@ -95,7 +87,6 @@
   const env = useEnv()
   const local = useLocalStorage()
   const { t } = useI18n()
-  const router = useRouter()
 
   const onSaveProject = () => {
     if (!confirm(t('editor.window.saveLocal'))) return

packages/app/src/components/page/editor/project/schemas/EditorSchemasTemplate.vue

@@ -0,0 +1,76 @@
+<template>
+  <Modal @close="onClose">
+    <div
+      ref="main"
+      :style="style"
+      :class="[!mobile ? 'fixed' : '']"
+      class="flex z-20 p-10 flex-col w-full bg-rgba-blur lg:w-1/2 h-full lg:h-3/4 bg-theme-background-1 wb-text overflow-x-hidden overflow-y-auto rounded shadow-2xl wb-scroll"
+    >
+      <EditorAbsoluteHeader :title="t('editor.schemas.create.templates.title')" @close="onClose" />
+      <p class="mb-10 font-raleway text-lg">{{ t('editor.schemas.create.templates.description')}}</p>
+      <form class="flex flex-col gap-10 w-full" @submit.prevent.stop="">
+        <div class="flex flex-col gap-2">
+          <label class="text-lg font-bold font-poppins">{{ t('editor.schemas.create.type')}}</label>
+          <p class="text-md mb-5 font-raleway">{{ t('editor.schemas.create.typeDescription')}}</p>
+          <div class="flex items-center gap-2">
+            <InputSelect v-model="type" class="w-36" :arr="defines.schemas().templatesType()" />
+            <p v-if="setter === 'simple'" class="font-bold">{{ t('editor.schemas.create.templates.simple.description')}}</p>
+            <p v-else-if="setter === 'enthusiast'" class="font-bold">{{ t('editor.schemas.create.templates.enthusiast.description')}}</p>
+          </div>
+        </div>
+        <Button @click.prevent.stop="onCreate">{{ t('editor.schemas.create.templates.button')}}</Button>
+      </form>
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
+  import { useDefines } from '@/use/defines'
+  import { useTransformer } from '@/use/generator/transformer'
+  import { onClickOutside, useDraggable } from '@vueuse/core'
+  import { computed, ref } from 'vue'
+  import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+  import { useI18n } from 'vue-i18n'
+  import { useProjectStore } from '@/store/project'
+
+  const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
+
+  const { t } = useI18n()
+  const transformer = useTransformer()
+  const defines = useDefines()
+
+  const type = ref<string>(transformer.schemas().template('simple', 'getter'))
+
+  const setter = computed(() => transformer.schemas().template(type.value, 'setter'))
+
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const mobile = breakpoints.isSmaller('lg')
+
+  const main = ref<HTMLElement | null>(null)
+  const isHoveredHeader = ref(false)
+
+  const { style } = useDraggable(main, {
+    initialValue: { x: window.innerWidth / 4, y: window.innerHeight / 6 },
+    onStart: () => {
+      if (!isHoveredHeader.value) return false
+    },
+  })
+
+  onClickOutside(main, () => {
+    onClose()
+  })
+
+  const onClose = () => {
+    ABSOLUTE.schemas.template = false
+  }
+
+  const onCreate = () => {
+    const template = transformer.schemas().template(type.value, 'setter') as any
+
+    const target = defines.schemas().template(template)
+
+    PROJECT.schemas.unshift(...target)
+  }
+</script>

packages/app/src/components/page/editor/provider/ProviderEditor.vue

@@ -32,12 +32,17 @@
     <EditorSchemasCreate
       v-else-if="ABSOLUTE.schemas.create"
     />
+    <EditorSchemasTemplate
+      v-else-if="ABSOLUTE.schemas.template && PROJECT.schemas.length === 0"
+    />
     <EditorAbsoluteLoader v-else-if="ABSOLUTE.spinner" />
   </teleport>
 </template>
 
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
+  import { useProjectStore } from '@/store/project'
 
   const ABSOLUTE = useAbsoluteStore()
+  const PROJECT = useProjectStore()
 </script>

packages/app/src/store/absolute.ts

@@ -56,6 +56,7 @@ export const useAbsoluteStore = defineStore('absolute', {
       spinner: false,
       schemas: {
         create: false,
+        template: false,
       },
     }
   },

packages/app/src/store/project.ts

@@ -173,40 +173,7 @@ export const useProjectStore = defineStore('project', {
             },
           ],
         },
-        schemas: options.schemas || [
-          {
-            id: useUtils().id().nano({ prefix: 'schema' }),
-            type: 'default',
-            name: 'Lore',
-            prefix: '#',
-            customIcon: '📖',
-            folders: [],
-          },
-          {
-            id: useUtils().id().nano({ prefix: 'schema' }),
-            type: 'characters',
-            name: 'Personagem',
-            prefix: '@',
-            customIcon: '🐉',
-            folders: [],
-          },
-          {
-            id: useUtils().id().nano({ prefix: 'schema' }),
-            type: 'default',
-            name: 'Fio da História',
-            prefix: '/',
-            customIcon: '⛰️',
-            folders: [],
-          },
-          {
-            id: useUtils().id().nano({ prefix: 'schema' }),
-            type: 'default',
-            name: 'Anotações',
-            prefix: '*',
-            customIcon: '📂',
-            folders: [],
-          },
-        ],
+        schemas: options.schemas || [],
       }
 
       if (this.chapters[0].entities.length === 0) {

packages/app/src/use/defines.ts

@@ -2,11 +2,14 @@ import {
   ProjectStateTemplatesSubstitutionsText,
   ProjectStateTemplatesSubstitutionsItalic,
   ProjectStateTemplatesSubstitutionsBold,
+  ProjectStateSchema,
 } from 'better-write-types'
 import i18n from '@/lang'
+import { useUtils } from './utils'
 
 export const useDefines = () => {
   const { t } = i18n.global
+  const utils = useUtils()
 
   const docx = () => {
     const flowItemTypes = (): string[] => {
@@ -327,12 +330,111 @@ export const useDefines = () => {
     return { clientStorage }
   }
 
+  const schemas = () => {
+    const templatesType = () => {
+      return [
+        t('editor.schemas.create.templates.simple.title'),
+        t('editor.schemas.create.templates.enthusiast.title'),
+      ]
+    }
+
+    const template = (
+      target: 'simple' | 'enthusiast'
+    ): ProjectStateSchema[] => {
+      switch (target) {
+        case 'simple':
+          return [
+            {
+              id: utils.id().nano({ prefix: 'schema' }),
+              type: 'default',
+              name: t('editor.schemas.defines.annotations'),
+              prefix: '*',
+              customIcon: '📂',
+              folders: [],
+            },
+          ]
+        case 'enthusiast': {
+          const charactersSchemaId = utils.id().nano({ prefix: 'schema' })
+          const charactersFolderId = utils.id().nano({ prefix: 'folder' })
+          const charactersFileId = utils.id().nano({ prefix: 'file' })
+          const genNameArr = characters().names()
+          const genName =
+            genNameArr[Math.floor(Math.random() * genNameArr.length)]
+
+          return [
+            {
+              id: utils.id().nano({ prefix: 'schema' }),
+              type: 'default',
+              name: t('editor.schemas.defines.lore'),
+              prefix: '#',
+              customIcon: '📖',
+              folders: [],
+            },
+            {
+              id: charactersSchemaId,
+              type: 'characters',
+              name: t('editor.schemas.defines.characters'),
+              prefix: '@',
+              customIcon: '🐉',
+              folders: [
+                {
+                  id: charactersFolderId,
+                  parentId: charactersSchemaId,
+                  folderName: t('editor.schemas.items.folder'),
+                  files: [
+                    {
+                      id: charactersFileId,
+                      parentId: charactersSchemaId,
+                      fileName: genName,
+                      milkdownData: {},
+                      extra: {
+                        id: utils.id().nano({ prefix: 'character' }),
+                        name: genName,
+                        nameCase: 'default',
+                        color: utils.text().randomColor(),
+                        colorAlpha: 0.2,
+                        important: false,
+                        configuration: false,
+                        disabled: false,
+                      },
+                      customIcon: undefined,
+                    },
+                  ],
+                  customIcon: undefined,
+                },
+              ],
+            },
+            {
+              id: utils.id().nano({ prefix: 'schema' }),
+              type: 'default',
+              name: t('editor.schemas.defines.timeline'),
+              prefix: '/',
+              customIcon: '⛰️',
+              folders: [],
+            },
+            {
+              id: utils.id().nano({ prefix: 'schema' }),
+              type: 'default',
+              name: t('editor.schemas.defines.annotations'),
+              prefix: '*',
+              customIcon: '📂',
+              folders: [],
+            },
+          ]
+        }
+      }
+    }
+
+    return { templatesType, template }
+  }
+
   return {
     docx,
     pdf,
     generator,
     characters,
     presence,
     configuration,
+    schemas,
   }
 }

packages/app/src/use/generator/transformer.ts

@@ -234,7 +234,42 @@ export const useTransformer = () => {
       return value || 'default'
     }
 
-    return { type }
+    const template = (target: string, focus: 'setter' | 'getter'): string => {
+      let value: Maybe<'simple' | 'enthusiast'> = null
+      let __STOP__: boolean = false
+
+      if (focus === 'getter') {
+        switch (target) {
+          case 'simple':
+            return t('editor.schemas.create.templates.simple.title')
+          case 'enthusiast':
+            return t('editor.schemas.create.templates.enthusiast.title')
+        }
+      }
+
+      availableLocales.forEach((locale: string) => {
+        if (__STOP__) return
+
+        const { editor } = getLocaleMessage(locale) as any
+
+        switch (target) {
+          case editor.schemas.create.templates.simple.title:
+            __STOP__ = true
+            value = 'simple'
+            break
+          case editor.schemas.create.templates.enthusiast.title:
+            __STOP__ = true
+            value = 'enthusiast'
+            break
+          default:
+            __STOP__ = false
+        }
+      })
+
+      return value || 'simple'
+    }
+
+    return { type, template }
   }
 
   return { docx, characters, presence, schemas }