@dxtmisha/scripts 0.6.3 → 0.7.2

package/src/classes/Design/DesignFlags.ts

@@ -0,0 +1,199 @@
+// export:none
+
+import { Canvas, createCanvas, loadImage, type SKRSContext2D } from '@napi-rs/canvas'
+import { PropertiesFile } from '../Properties/PropertiesFile'
+
+import type { DesignFlagsItem, DesignFlagsList } from '../../types/designTypes'
+
+import { UI_DIR_IN } from '../../config'
+
+const DESIGN_FLAGS_FACTOR = 2
+const DESIGN_FLAGS_MIME = 'image/webp'
+const DESIGN_FLAGS_FILE_NAME_ITEM = 'flags.webp'
+const DESIGN_FLAGS_FILE_NAME = [UI_DIR_IN, 'assets', DESIGN_FLAGS_FILE_NAME_ITEM]
+const DESIGN_FLAGS_FILE_PATH = ['.', '..', 'assets', DESIGN_FLAGS_FILE_NAME_ITEM]
+const DESIGN_FLAGS_FILE_STYLE_NAME = [UI_DIR_IN, 'styles', 'flags.css']
+const DESIGN_FLAGS_CLASS_NAME = '.ui-sys-flags'
+
+export class DesignFlags {
+  protected list: string[]
+  protected data: DesignFlagsList = []
+
+  protected x: number = 0
+  protected y: number = 0
+
+  protected square: number
+  protected top: number
+  protected left: number
+
+  protected readonly canvas: Canvas
+  protected readonly context: SKRSContext2D
+
+  constructor(
+    protected readonly dir: string = 'src/assets/flags',
+    protected readonly width: number = 96,
+    protected readonly height: number = 72,
+    protected readonly columns: number = 12
+  ) {
+    this.list = this.initList()
+    this.square = this.initSquare()
+    this.top = this.initTop()
+    this.left = this.initLeft()
+
+    this.canvas = this.initCanvas()
+    this.context = this.initContext()
+  }
+
+  async make() {
+    for (const file of this.list) {
+      await this.addImage(file)
+
+      this.data.push(this.addData(file))
+      this.next()
+    }
+
+    this.save()
+    this.saveStyle()
+  }
+
+  getLines(): number {
+    return Math.ceil(this.list.length / this.columns)
+  }
+
+  /**
+   * Returns the maximum width of the canvas.
+   *
+   * Возвращает максимальную ширину холста.
+   */
+  protected getCanvasWidth(): number {
+    return this.columns * this.square
+  }
+
+  /**
+   * Returns the maximum height of the canvas.
+   *
+   * Возвращает максимальную высоту холста.
+   */
+  protected getCanvasHeight(): number {
+    return this.getLines() * this.square
+  }
+
+  protected getDx() {
+    return (this.x * this.square) + this.left
+  }
+
+  protected getDy() {
+    return (this.y * this.square) + this.top
+  }
+
+  protected getStyle(): string {
+    const backgroundSizeColumns = this.columns * (this.square / this.width)
+    const backgroundSizeLines = this.getLines() * (this.square / this.height)
+
+    let style: string = `
+${DESIGN_FLAGS_CLASS_NAME} {
+  --sys-flags-width: ${this.width}px;
+  --sys-flags-height: ${this.height}px;
+  --sys-flags-top: ${this.top}px;
+  --sys-flags-left: ${this.left}px;
+  --sys-flags-lines: ${this.getLines()};
+
+  background-image: url("${DESIGN_FLAGS_FILE_PATH.join('/')}");
+  background-size: calc(100% * ${backgroundSizeColumns}) calc(100% * ${backgroundSizeLines});
+}
+`.trim()
+
+    const x = 100 / (this.getCanvasWidth() - this.width)
+    const y = 100 / (this.getCanvasHeight() - this.height)
+
+    this.data.forEach((item) => {
+      style += `
+${DESIGN_FLAGS_CLASS_NAME}--${item.name} {
+  background-position: ${item.x * x}% ${item.y * y}%;
+}`
+    })
+
+    return style
+  }
+
+  protected async addImage(file: string): Promise<void> {
+    const path = PropertiesFile.joinPath([this.dir, file])
+    const image = await loadImage(path)
+
+    this.context.drawImage(
+      image,
+      this.getDx(),
+      this.getDy(),
+      this.width,
+      this.height
+    )
+  }
+
+  protected addData(file: string): DesignFlagsItem {
+    return {
+      name: file.replace(/\.[^.]+$/, ''),
+      x: this.getDx(),
+      y: this.getDy()
+    }
+  }
+
+  protected next(): void {
+    this.x++
+
+    if (this.x >= this.columns) {
+      this.x = 0
+      this.y++
+    }
+  }
+
+  protected save(): void {
+    const buffer = this.canvas.toBuffer(DESIGN_FLAGS_MIME, 64)
+
+    if (buffer) {
+      PropertiesFile.writeByPath(
+        DESIGN_FLAGS_FILE_NAME,
+        buffer,
+        false
+      )
+    }
+  }
+
+  protected saveStyle(): void {
+    PropertiesFile.writeByPath(
+      DESIGN_FLAGS_FILE_STYLE_NAME,
+      this.getStyle()
+    )
+  }
+
+  protected initCanvas(): Canvas {
+    return createCanvas(
+      this.getCanvasWidth(),
+      this.getCanvasHeight()
+    )
+  }
+
+  protected initContext(): SKRSContext2D {
+    return this.canvas.getContext('2d', { alpha: true })
+  }
+
+  protected initLeft(): number {
+    return (this.square / 2) - (this.width / 2)
+  }
+
+  protected initList(): string[] {
+    return PropertiesFile.readDir(this.dir)
+      .filter(dir => dir.endsWith('.svg'))
+  }
+
+  protected initSquare(): number {
+    if (this.width >= this.height) {
+      return this.width * DESIGN_FLAGS_FACTOR
+    }
+
+    return this.height * DESIGN_FLAGS_FACTOR
+  }
+
+  protected initTop(): number {
+    return (this.square / 2) - (this.height / 2)
+  }
+}

package/src/classes/Design/DesignReplace.ts

@@ -116,7 +116,7 @@ export class DesignReplace {
     let space = this.sample.match(new RegExp(`^( *)(${regName})`, 'm'))?.[1]
 
     if (
-      !space
+      typeof space !== 'string'
       && this.sample.match(name)
     ) {
       regName = `<!-- :${name} `

package/src/classes/Design/DesignUi.ts

@@ -1,15 +1,24 @@
 // export:none
 
-import { toKebabCase } from '@dxtmisha/functional-basic'
+import { toCamelCaseFirst, toKebabCase } from '@dxtmisha/functional-basic'
+import { getPackageJson } from '../../functions/getPackageJson'
 
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { PropertiesFile } from '../Properties/PropertiesFile'
+import { PropertiesCache } from '../Properties/PropertiesCache'
 import { DesignComponent } from './DesignComponent'
 import { LibraryItems } from '../Library/LibraryItems'
-import { PropertiesCache } from '../Properties/PropertiesCache'
 import { Styles } from '../Styles/Styles'
 
 import { DesignWiki } from './DesignWiki'
 
+import { LibraryAiWiki } from '../Library/LibraryAiWiki'
 import { LibraryMedia } from '../Library/LibraryMedia'
+import { LibraryList } from '../Library/LibraryList'
+import { LibraryPlugin } from '../Library/LibraryPlugin'
+import { LibraryTypes } from '../Library/LibraryTypes'
+
+import { UI_FILE_PACKAGE } from '../../config'
 
 export class DesignUi {
   protected readonly components: LibraryItems
@@ -45,8 +54,13 @@ export class DesignUi {
     new DesignWiki().make()
 
     this.makeConstructorComponent()
+    this.makePackage()
 
     new LibraryMedia(this.components).make()
+    new LibraryList(this.components).make()
+    new LibraryPlugin(this.components).make()
+    new LibraryAiWiki(this.components).make()
+    new LibraryTypes(this.components).make()
   }
 
   /**
@@ -70,4 +84,29 @@ export class DesignUi {
 
     return this
   }
+
+  /**
+   * Updates the package.json file by adding export paths for UI styles and saves the changes.
+   *
+   * Обновляет файл package.json, добавляя пути экспорта для стилей UI, и сохраняет изменения.
+   */
+  protected makePackage(): void {
+    const packageJson = getPackageJson()
+    const projectName = toCamelCaseFirst(PropertiesConfig.getProjectName())
+
+    if (packageJson?.exports) {
+      packageJson.exports['./plugin'] = {
+        import: './dist/plugin.js',
+        types: './dist/library/plugin.d.ts'
+      }
+      packageJson.exports['./style.css'] = './dist/style.css'
+      packageJson.exports['./style/ui.scss'] = `./src/styles/${projectName}/main.scss`
+      packageJson.exports['./style/ui-properties.scss'] = `./src/styles/${projectName}/style.scss`
+      packageJson.exports['./types.d.ts'] = {
+        types: './dist/library/types.d.ts'
+      }
+
+      PropertiesFile.writeByPath(UI_FILE_PACKAGE, packageJson)
+    }
+  }
 }

package/src/classes/Library/LibraryAiWiki.ts

@@ -0,0 +1,126 @@
+import { PropertiesFile } from '../Properties/PropertiesFile'
+import { LibraryItems } from './LibraryItems'
+import { LibraryAiWikiItem } from './LibraryAiWikiItem'
+
+import { UI_DIRS_COMPONENTS } from '../../config'
+
+/**
+ * Class for creating a list of components for AI Wiki.
+ *
+ * Класс для создания списка компонентов для AI Wiki.
+ */
+export class LibraryAiWiki {
+  /**
+   * Constructor
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+  }
+
+  /**
+   * Creates files for AI Wiki.
+   *
+   * Создает файлы для AI Wiki.
+   */
+  make(): void {
+    this.makeList()
+    this.makeComponent()
+  }
+
+  /**
+   * Returns the file name for the list.
+   *
+   * Возвращает имя файла для списка.
+   */
+  protected getFileList(): string {
+    return 'ai-list'
+  }
+
+  /**
+   * Returns a list of components for AI Wiki.
+   *
+   * Возвращает список компонентов для AI Wiki.
+   */
+  protected getList(): LibraryAiWikiItem[] {
+    const data: LibraryAiWikiItem[] = []
+
+    this.items.getComponentList()
+      .forEach((component) => {
+        const aiWiki = new LibraryAiWikiItem(component)
+
+        if (aiWiki.isAiWiki()) {
+          data.push(aiWiki)
+        }
+      })
+
+    return data
+  }
+
+  /**
+   * Creates a file with a list of components.
+   *
+   * Создает файл со списком компонентов.
+   */
+  protected makeList(): void {
+    const data = this.getList()
+    const imports: string[] = []
+    const list: string[] = []
+
+    console.log('Ai wiki:', data.length, 'components')
+
+    data.forEach((item) => {
+      imports.push(item.getImport())
+      list.push(`  ${item.getCode()}`)
+    })
+
+    this.items.write(
+      this.getFileList(),
+      [
+        ...imports,
+        '',
+        'export const aiList: any[] = [',
+        list.join(',\r\n'),
+        ']'
+      ],
+      'wiki.ts'
+    )
+  }
+
+  /**
+   * Creates a component for displaying the list.
+   *
+   * Создает компонент для отображения списка.
+   */
+  protected makeComponent() {
+    PropertiesFile.writeByPath(
+      [...UI_DIRS_COMPONENTS, 'AiWiki.vue'],
+      `<script setup lang="ts">
+// This file is generated by a script, do not edit.
+
+import { DxtTestPage, DxtTestWikiAnchor } from '@dxtmisha/test'
+import { aiList } from '../library/${this.getFileList()}.wiki'
+
+defineOptions({
+  name: 'AiWiki'
+})
+</script>
+
+<template>
+  <DxtTestPage
+    title="List of available UI components"
+    description="Below is a list of Vue 3 components available in the UI. These components are available immediately and do not need to be imported."
+  >
+    <DxtTestWikiAnchor :list="aiList"/>
+    <component
+      v-for="(item, key) in aiList"
+      :key="key"
+      :is="item"
+    />
+  </DxtTestPage>
+</template>
+`
+    )
+  }
+}

package/src/classes/Library/LibraryAiWikiItem.ts

@@ -0,0 +1,79 @@
+import type { LibraryData } from '../../types/libraryTypes'
+
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { PropertiesFile } from '../Properties/PropertiesFile'
+
+import { UI_DIRS_COMPONENTS } from '../../config'
+
+/**
+ * Class for working with the AI Wiki component.
+ *
+ * Класс для работы с компонентом AI Wiki.
+ */
+export class LibraryAiWikiItem {
+  /**
+   * Constructor
+   * @param item component data / данные компонента
+   */
+  constructor(
+    protected readonly item: LibraryData
+  ) {
+  }
+
+  /**
+   * Checks if the AI Wiki file exists.
+   *
+   * Проверяет, существует ли файл AI Wiki.
+   */
+  isAiWiki(): boolean {
+    return PropertiesFile.is(this.getPath())
+  }
+
+  /**
+   * Returns the component code.
+   *
+   * Возвращает код компонента.
+   */
+  getCode(): string {
+    return this.item.codeFull
+  }
+
+  /**
+   * Returns the file name for the AI Wiki component.
+   *
+   * Возвращает имя файла для компонента AI Wiki.
+   */
+  getComponentFileNameAiWiki(): string {
+    return `${this.item.codeFull}AiWiki.vue`
+  }
+
+  /**
+   * Returns the import string for the component.
+   *
+   * Возвращает строку импорта для компонента.
+   */
+  getImport(): string {
+    const code = this.item.codeFull
+    const path: string[] = [
+      '..',
+      '..',
+      ...this.getPath()
+    ]
+
+    return `import ${code} from '${path.join('/')}'`
+  }
+
+  /**
+   * Returns the path to the file.
+   *
+   * Возвращает путь к файлу.
+   */
+  protected getPath(): string[] {
+    return [
+      ...UI_DIRS_COMPONENTS,
+      PropertiesConfig.getProjectName(),
+      this.item.dir,
+      this.getComponentFileNameAiWiki()
+    ]
+  }
+}

package/src/classes/Library/LibraryExport.ts

@@ -1,5 +1,3 @@
-// export:none
-
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
 import type { LibraryFiles } from '../../types/libraryTypes'

package/src/classes/Library/LibraryItems.ts

@@ -5,7 +5,7 @@ import { toCamelCaseFirst, toKebabCase } from '@dxtmisha/functional-basic'
 import { PropertiesConfig } from '../Properties/PropertiesConfig'
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
-import type { LibraryData, LibraryList } from '../../types/libraryTypes'
+import type { LibraryData, LibraryAll } from '../../types/libraryTypes'
 
 import { UI_DIRS_LIBRARY, UI_DIRS_COMPONENTS } from '../../config'
 
@@ -15,7 +15,7 @@ import { UI_DIRS_LIBRARY, UI_DIRS_COMPONENTS } from '../../config'
  * Класс для работы со списком компонентов.
  */
 export class LibraryItems {
-  protected readonly items: LibraryList
+  protected readonly items: LibraryAll
 
   /**
    * Constructor
@@ -29,7 +29,7 @@ export class LibraryItems {
    *
    * Возвращает список компонентов, разделенных по группам дизайна.
    */
-  get(): LibraryList {
+  get(): LibraryAll {
     return this.items
   }
 
@@ -46,6 +46,15 @@ export class LibraryItems {
     return list
   }
 
+  /**
+   * Returns the number of components.
+   *
+   * Возвращает количество компонентов.
+   */
+  getCount(): number {
+    return this.getComponentList().length
+  }
+
   /**
    * Writes data in the file.
    *
@@ -118,7 +127,7 @@ export class LibraryItems {
    *
    * Инициализирует данные о компоненте.
    */
-  protected initItems(): LibraryList {
+  protected initItems(): LibraryAll {
     return [
       {
         name: PropertiesConfig.getDesignName(),