@dxtmisha/scripts 0.6.3 → 0.7.6

package/src/classes/Design/DesignComponent.ts

@@ -1,6 +1,12 @@
 // export:none
 
-import { forEach, isObjectNotArray, toArray, toKebabCase } from '@dxtmisha/functional-basic'
+import {
+  forEach,
+  isObjectNotArray,
+  replaceComponentName,
+  toArray,
+  toCamelCase
+} from '@dxtmisha/functional-basic'
 import { wikiDescriptions } from '@dxtmisha/wiki/media'
 import type { StorybookComponentsDescriptionItem } from '@dxtmisha/wiki'
 
@@ -14,8 +20,10 @@ import type { DesignReplace } from './DesignReplace'
 import {
   UI_DIR_COMPONENTS,
   UI_DIR_CONSTRUCTOR,
+  UI_DIR_DIST,
   UI_DIR_IN,
   UI_DIRS_COMPONENTS,
+  UI_DIRS_LIBRARY,
   UI_PROJECT_CONSTRUCTOR_FULL_NAME,
   UI_PROJECT_CONSTRUCTOR_NAME
 } from '../../config'
@@ -25,26 +33,34 @@ const FILE_PROPERTIES = 'properties.json'
 const FILE_PROPS = 'props.ts'
 const FILE_STYLE = 'styleToken.scss'
 const FILE_CLASS = 'DesignComponent.vue'
-const FILE_CLASS_AI = 'DesignComponentWikiAi.vue'
+const FILE_CLASS_AI = 'DesignComponentAiWiki.vue'
 const FILE_INDEX = 'index.ts'
+const FILE_INDEX_DTS = 'index.d.ts'
 const FILE_WIKI = 'wiki.ts'
+const FILE_WIKI_DATA = 'wikiData.ts'
 const FILE_STORIES = 'DesignComponent.stories.ts'
 const FILE_STORIES_DOCUMENTATION = 'DesignComponent.mdx'
 
 /**
- * Class for creating a component or updating data.
+ * Class for generating and updating all files and configurations associated with a design system component.
+ * It manages the lifecycle of properties, styles, Vue components, stories, and wiki documentation.
  *
- * Класс для создания компонента или обновления данных.
+ * Класс для генерации и обновления всех файлов и конфигураций, связанных с компонентом дизайн-системы.
+ * Управляет жизненным циклом свойств, стилей, компонентов Vue, историй и вики-документации.
  */
 export class DesignComponent extends DesignCommand {
   protected DIR_SAMPLE: string = 'component'
   protected dir: string[]
   protected propsType: DesignTypescriptProp[] | undefined
+  protected slotsType: DesignTypescriptProp[] | undefined
+  protected eventsType: DesignTypescriptProp[] | undefined
 
   /**
-   * Constructor
-   * @param command component name/ названия компонента
-   * @param options additional parameters/ дополнительные параметры
+   * Constructor for DesignComponent.
+   *
+   * Конструктор для DesignComponent.
+   * @param command component name or command identifier / название компонента или идентификатор команды
+   * @param options additional key-value parameters / дополнительные параметры ключ-значение
    */
   constructor(
     command: string,
@@ -76,8 +92,11 @@ export class DesignComponent extends DesignCommand {
       .makeMainAi()
       .makeIndex()
       .makeWiki()
+      .makeWikiData()
       .makeStories()
       .makeStoriesDocumentation()
+      .makeFilePackage()
+      .makeLibrary()
   }
 
   /**
@@ -163,24 +182,35 @@ export class DesignComponent extends DesignCommand {
     if (
       item?.ai
     ) {
+      const imports: string[] = []
+
       if (item.ai.render) {
-        const render = item.ai.render
-          .replace(`<${componentName}`, `<${fullComponentName}`)
-          .trim()
-
-        sample.replaceMark('component-render', [
-          '<template #render="{ args, classDemo }">',
-          render,
-          '</template>'
-        ])
+        let render = replaceComponentName(
+          item.ai.render,
+          componentName,
+          fullComponentName
+        )
+
+        if (item.ai.render.includes('<button')) {
+          imports.push(`import { DxtTestButton } from '@dxtmisha/test'`)
+          render = replaceComponentName(render, 'button', 'DxtTestButton')
+        }
+
+        if (render) {
+          sample.replaceMark('component-render', [
+            '<template #render="{ args, classDemo }">',
+            render,
+            '</template>'
+          ])
+        }
       }
 
       if (item.ai.import) {
-        sample.replaceMark('component-import', [
-          '<template #render="{ args, classDemo }">',
-          ...item.ai.import,
-          '</template>'
-        ])
+        imports.push(...item.ai.import)
+      }
+
+      if (imports.length > 0) {
+        sample.replaceMark('component-import', imports)
       }
     }
 
@@ -213,11 +243,27 @@ export class DesignComponent extends DesignCommand {
    */
   protected makeWiki(): this {
     const file = FILE_WIKI
+    const sample = this.readDefinable(file)
+
+    this.write(file, sample.get())
+    return this
+  }
+
+  /**
+   * This code generates the wikiData.ts.
+   *
+   * Генерация файла wikiData.ts.
+   */
+  protected makeWikiData(): this {
+    const file = FILE_WIKI_DATA
     const typeInfo = this.getPropsList()
+    const slotsInfo = this.getSlotsList()
+    const eventsInfo = this.getEventsList()
     const sample = this.readDefinable(file)
-    const props: string[] = []
 
     if (typeInfo) {
+      const props: string[] = []
+
       typeInfo
         .sort((a, b) => a.name.localeCompare(b.name))
         .forEach((prop) => {
@@ -240,6 +286,70 @@ export class DesignComponent extends DesignCommand {
       sample.replaceMark('propsList', props, ',')
     }
 
+    if (slotsInfo) {
+      const slots: string[] = []
+
+      slotsInfo
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .forEach((slot) => {
+          const description = slot.description
+          const type = slot.type
+            .replace(/\(props: ([^)]+)\) => any/i, '$1')
+            .trim()
+
+          let item: string = ''
+
+          item += `{ name: '${slot.name}'`
+
+          if (description) {
+            item += `, description: \`${description}\``
+          }
+
+          if (
+            type
+            && type !== 'any'
+          ) {
+            item += `, properties: [{ name: 'props', type: '${type}' }]`
+          }
+
+          item += ` }`
+          slots.push(item)
+        })
+
+      sample.replaceMark('slotsList', slots, ',')
+    }
+
+    if (eventsInfo) {
+      const events: string[] = []
+
+      eventsInfo
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .forEach((event) => {
+          const description = event.description
+          const type = event.type
+
+          let item: string = ''
+
+          item += `{ name: '${event.name}'`
+
+          if (description) {
+            item += `, description: \`${description}\``
+          }
+
+          if (
+            type
+            && type !== '[]'
+          ) {
+            item += `, properties: ${type}`
+          }
+
+          item += ` }`
+          events.push(item)
+        })
+
+      sample.replaceMark('eventsList', events, ',')
+    }
+
     this.write(file, sample.get())
     return this
   }
@@ -300,6 +410,65 @@ export class DesignComponent extends DesignCommand {
     return constructor ?? ''
   }
 
+  /**
+   * Getting the paths for the typescript compiler.
+   *
+   * Получение путей для компилятора typescript.
+   * @returns paths for the typescript compiler/ пути для компилятора typescript
+   */
+  private getTypescriptPaths(): string[] | undefined {
+    const root = PropertiesFile.getRootProject()
+    const componentName = this.getStructure().getComponentNameFirst()
+
+    if (root) {
+      return [
+        root,
+        UI_PROJECT_CONSTRUCTOR_NAME,
+        UI_DIR_DIST,
+        UI_DIR_CONSTRUCTOR,
+        componentName
+      ]
+    }
+
+    return undefined
+  }
+
+  /**
+   * Getting the path to the index file.
+   *
+   * Получение пути к файлу index.
+   */
+  private getTypescriptPathsIndex(): string | undefined {
+    const paths = this.getTypescriptPaths()
+
+    if (paths) {
+      return PropertiesFile.joinPath([
+        ...paths,
+        FILE_INDEX_DTS
+      ])
+    }
+
+    return undefined
+  }
+
+  /**
+   * Getting the path to the type file.
+   *
+   * Получение пути к файлу type.
+   */
+  private getTypescriptPathsType(): string | undefined {
+    const paths = this.getTypescriptPaths()
+
+    if (paths) {
+      return PropertiesFile.joinPath([
+        ...paths,
+        'types.d.ts'
+      ])
+    }
+
+    return undefined
+  }
+
   /**
    * Getting a list of all properties of a component.
    *
@@ -307,11 +476,11 @@ export class DesignComponent extends DesignCommand {
    */
   private getPropsList(): DesignTypescriptProp[] | undefined {
     if (!this.propsType) {
-      const root = PropertiesFile.getRootProject()
+      const paths = this.getTypescriptPathsIndex()
       const componentName = this.getStructure().getComponentNameFirst()
 
-      if (root) {
-        const ts = new DesignTypescript(
+      if (paths) {
+        const tsRead = new DesignTypescript(
           PropertiesFile.joinPath([
             PropertiesFile.getRoot(),
             UI_DIR_IN,
@@ -322,27 +491,63 @@ export class DesignComponent extends DesignCommand {
           ]),
           {
             paths: {
-              [`${UI_PROJECT_CONSTRUCTOR_FULL_NAME}/${componentName}`]: [
-                PropertiesFile.joinPath([
-                  root,
-                  UI_PROJECT_CONSTRUCTOR_NAME,
-                  UI_DIR_IN,
-                  UI_DIR_CONSTRUCTOR,
-                  componentName,
-                  FILE_INDEX
-                ])
-              ]
+              [`${UI_PROJECT_CONSTRUCTOR_FULL_NAME}/${componentName}`]: [paths]
             }
           }
         )
 
-        this.propsType = ts.getType(`${componentName}Props`)?.props
+        this.propsType = tsRead.getType(`${componentName}Props`)?.props
       }
     }
 
     return this.propsType
   }
 
+  /**
+   * Getting a list of all slots of a component.
+   *
+   * Получение списка всех слотов компонента.
+   */
+  private getSlotsList(): DesignTypescriptProp[] | undefined {
+    if (!this.slotsType) {
+      const types = this.getTypesFromConstructor('Slots')
+
+      if (types) {
+        this.slotsType = types
+      }
+    }
+
+    return this.slotsType
+  }
+
+  /**
+   * Getting a list of all events of a component.
+   *
+   * Получение списка всех событий компонента.
+   */
+  private getEventsList(): DesignTypescriptProp[] | undefined {
+    if (!this.eventsType) {
+      const types = this.getTypesFromConstructor('Emits')
+
+      if (types) {
+        this.eventsType = forEach(
+          types,
+          (item) => {
+            return {
+              name: item.name,
+              type: String(item.type)
+                .replace(/([^:,[\] ]+): ([^:,[\]]+)/gi, `{ name: '$1', type: '$2' }`)
+                .replace(/,{/gi, ', {'),
+              description: item.description
+            }
+          }
+        )
+      }
+    }
+
+    return this.eventsType
+  }
+
   /**
    * Returns the description of the component from the wiki
    *
@@ -377,6 +582,24 @@ export class DesignComponent extends DesignCommand {
     return []
   }
 
+  /**
+   * Getting the types from the constructor.
+   *
+   * Получение типов из конструктора.
+   * @param name name of the type/ имя типа
+   */
+  private getTypesFromConstructor(name: string): DesignTypescriptProp[] | undefined {
+    const paths = this.getTypescriptPathsType()
+    const componentName = this.getStructure().getComponentNameFirst()
+
+    if (paths) {
+      const tsRead = new DesignTypescript(paths)
+      return tsRead.getType(`${componentName}${name}`)?.props
+    }
+
+    return undefined
+  }
+
   /**
    * Converts the code to the component name.
    *
@@ -385,11 +608,12 @@ export class DesignComponent extends DesignCommand {
    */
   private toComponentName(code: string): string {
     const design = this.getStructure().getDesignFirst()
-    const name = this.getStructure().getFullComponentName()
+    const name = this.getStructure().getComponentName()
+    const fullName = this.getStructure().getFullComponentName()
 
     return code
-      .replace(/DesignComponent/g, name).trim()
-      .replace(/design-component/g, toKebabCase(name)).trim()
+      .replace(/DesignComponent/g, fullName).trim()
+      .replace(/design-component/g, `${toCamelCase(design)}-${toCamelCase(name)}`).trim()
       .replace(/<(\/?)Design/g, `<$1${design}`)
   }
 
@@ -557,4 +781,44 @@ export class DesignComponent extends DesignCommand {
 
     return this
   }
+
+  /**
+   * Updates the package.json file.
+   *
+   * Обновляет файл package.json.
+   */
+  protected makeFilePackage(): this {
+    const name = `./${this.getFullName()}`
+
+    this.updatePackage(
+      `exports|${name}`,
+      {
+        types: `./dist/library/${this.getFullName()}.d.ts`,
+        default: `./dist/${this.getFullName()}.js`
+      }
+    )
+
+    return this
+  }
+
+  /**
+   * Generates a library file.
+   *
+   * Генерирует файл библиотеки.
+   */
+  protected makeLibrary(): this {
+    const dir: string = `../${UI_DIR_COMPONENTS}/${this.getProjectName()}/${this.getName()}/`
+    const name = this.getFullName()
+
+    PropertiesFile.writeByPath(
+      [...UI_DIRS_LIBRARY, `${name}.ts`],
+      `// This file is generated by a script, do not edit.
+// Этот файл генерируется скриптом, не редактировать.
+
+export * from '${dir}index.js'
+`
+    )
+
+    return this
+  }
 }

package/src/classes/Design/DesignConstructor.ts

@@ -1,12 +1,12 @@
 // export:none
 
-import { toCamelCaseFirst } from '@dxtmisha/functional-basic'
+import { toCamelCase, toCamelCaseFirst } from '@dxtmisha/functional-basic'
 
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
 import { DesignCommand } from './DesignCommand'
 
-import { UI_FILE_PACKAGE, UI_DIR_IN, UI_DIR_CONSTRUCTOR } from '../../config'
+import { UI_DIR_IN, UI_DIR_CONSTRUCTOR, UI_DIRS_LIBRARY } from '../../config'
 
 const FILE_PROPERTIES = 'properties.json'
 const FILE_PROPS = 'props.ts'
@@ -18,18 +18,22 @@ const FILE_CLASS = 'ConstructorsDesign.tsx'
 const FILE_INDEX = 'index.ts'
 
 /**
- * Class for generating files based on a constructor.
+ * Class for generating files and configurations based on a component's constructor.
+ * It automates the creation of property definitions, type files, styles, and integration logic for constructors.
  *
- * Класс для генерации файлов по конструктору.
+ * Класс для генерации файлов и конфигураций на основе конструктора компонента.
+ * Автоматизирует создание определений свойств, файлов типов, стилей и логики интеграции для конструкторов.
  */
 export class DesignConstructor extends DesignCommand {
   protected DIR_SAMPLE: string = UI_DIR_CONSTRUCTOR
   protected dir: string[]
 
   /**
-   * Constructor
-   * @param command component name/ названия компонента
-   * @param options additional parameters/ дополнительные параметры
+   * Constructor for DesignConstructor.
+   *
+   * Конструктор для DesignConstructor.
+   * @param command component name or command identifier / название компонента или идентификатор команды
+   * @param options additional key-value parameters / дополнительные параметры ключ-значение
    */
   constructor(
     command: string,
@@ -61,6 +65,7 @@ export class DesignConstructor extends DesignCommand {
       .makeMain()
       .makeIndex()
       .makeFilePackage()
+      .makeLibrary()
   }
 
   /**
@@ -112,9 +117,9 @@ export class DesignConstructor extends DesignCommand {
   }
 
   /**
-   * This code generates the properties.json.
+   * This code generates the basicTypes.ts.
    *
-   * Генерация файла properties.json.
+   * Генерация файла basicTypes.ts.
    */
   protected makeTypesBasic(): this {
     return this.makeFileStandard(FILE_TYPES_BASIC)
@@ -163,6 +168,12 @@ export class DesignConstructor extends DesignCommand {
     return this.makeFileStandard(FILE_INDEX)
   }
 
+  /**
+   * Generates a standard file based on a template.
+   *
+   * Генерирует стандартный файл на основе шаблона.
+   * @param file file name/ имя файла
+   */
   protected makeFileStandard(file: string): this {
     const sample = this.readDefinable(file)
 
@@ -172,21 +183,39 @@ export class DesignConstructor extends DesignCommand {
     return this
   }
 
+  /**
+   * Updates the package.json file.
+   *
+   * Обновляет файл package.json.
+   */
   protected makeFilePackage(): this {
-    const packageFile = PropertiesFile.readFile<Record<string, any>>(UI_FILE_PACKAGE)
-    const command = toCamelCaseFirst(this.getCommand())
+    const command = this.getName()
     const name = `./${command}`
 
-    if (
-      packageFile
-      && packageFile.exports
-      && !(name in packageFile.exports)
-    ) {
-      packageFile.exports[name] = `./src/constructors/${command}/index.ts`
-      packageFile.exports[`${name}/style`] = `./src/constructors/${command}/style.scss`
+    this.updatePackage(
+      `exports|${name}`,
+      {
+        types: `./dist/constructors/${command}/index.d.ts`,
+        default: `./dist/${this.getNameMin()}.js`
+      }
+    )
 
-      PropertiesFile.writeByPath(UI_FILE_PACKAGE, packageFile)
-    }
+    return this
+  }
+
+  /**
+   * Generates a library file.
+   *
+   * Генерирует файл библиотеки.
+   */
+  protected makeLibrary(): this {
+    const name = toCamelCase(this.getCommand())
+
+    PropertiesFile.writeByPath(
+      [...UI_DIRS_LIBRARY, `${name}.ts`],
+      `export * from '../${UI_DIR_CONSTRUCTOR}/${toCamelCaseFirst(this.getCommand())}/index'
+`
+    )
 
     return this
   }

package/src/classes/Design/DesignConstructors.ts

@@ -1,19 +1,37 @@
 // export:none
 
-import { isFilled } from '@dxtmisha/functional-basic'
+import { isFilled, toCamelCaseFirst } from '@dxtmisha/functional-basic'
 
 import { PropertiesFile } from '../Properties/PropertiesFile'
 import { PropertiesCache } from '../Properties/PropertiesCache'
 import { DesignConstructor } from './DesignConstructor'
 
-import { UI_DIR_CONSTRUCTOR, UI_DIR_IN } from '../../config'
+import { UI_DIR_CONSTRUCTOR, UI_DIR_IN, UI_DIRS_LIBRARY, UI_FILE_STYLE_SCSS } from '../../config'
 
+/**
+ * Class for orchestrating the generation and update of multiple design constructors.
+ * It manages the collective lifecycle of component constructors, including bulk updates and shared style generation.
+ *
+ * Класс для управления генерацией и обновлением нескольких конструкторов дизайна.
+ * Управляет коллективным жизненным циклом конструкторов компонентов, включая массовые обновления и генерацию общих стилей.
+ */
 export class DesignConstructors {
+  /**
+   * Constructor for DesignConstructors.
+   *
+   * Конструктор для DesignConstructors.
+   * @param name optional specific component name to process / необязательное имя конкретного компонента для обработки
+   */
   constructor(
     protected readonly name?: string
   ) {
   }
 
+  /**
+   * Starts the process of creating or updating constructors.
+   *
+   * Запускает процесс создания или обновления конструкторов.
+   */
   make(): void {
     PropertiesCache.clear()
 
@@ -26,12 +44,41 @@ export class DesignConstructors {
           new DesignConstructor(component).make()
         })
     }
+
+    this.makeStyle()
   }
 
+  /**
+   * Returns a list of components.
+   *
+   * Возвращает список компонентов.
+   */
   getComponents(): string[] {
     return PropertiesFile.readDir(this.getDir())
   }
 
+  /**
+   * Returns a list of component styles.
+   *
+   * Возвращает список стилей компонентов.
+   */
+  getComponentsStyle(): string[] {
+    const list: string[] = []
+
+    this.getComponents()
+      .forEach((component) => {
+        const name = toCamelCaseFirst(component)
+        list.push(`@forward "../constructors/${name}/style";`)
+      })
+
+    return list
+  }
+
+  /**
+   * Returns the directory path for constructors.
+   *
+   * Возвращает путь к директории конструкторов.
+   */
   protected getDir(): string[] {
     return [
       PropertiesFile.getRoot(),
@@ -39,4 +86,16 @@ export class DesignConstructors {
       UI_DIR_CONSTRUCTOR
     ]
   }
+
+  /**
+   * Generates a common style file.
+   *
+   * Генерирует общий файл стилей.
+   */
+  protected makeStyle(): void {
+    const path: string[] = [...UI_DIRS_LIBRARY, UI_FILE_STYLE_SCSS]
+    const styles = this.getComponentsStyle()
+
+    PropertiesFile.writeByPath(path, styles.join('\r\n'))
+  }
 }