@dxtmisha/scripts 0.6.3 → 0.7.6

package/src/classes/Design/DesignFlags.ts

@@ -0,0 +1,215 @@
+// 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'
+
+/**
+ * Class for generating a sprite image and CSS mapping from a directory of flag icons.
+ * It automates the creation of a combined webp image and a CSS file with specific background-position utility classes.
+ *
+ * Класс для генерации спрайта и CSS-маппинга из директории иконок флагов.
+ * Автоматизирует создание комбинированного изображения webp и CSS-файла с утилитарными классами для позиционирования фона.
+ */
+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 for DesignFlags.
+   *
+   * Конструктор для DesignFlags.
+   * @param dir path to the directory containing SVG icons / путь к директории с SVG-иконками
+   * @param width width of a single flag in the sprite / ширина одного флага в спрайте
+   * @param height height of a single flag in the sprite / высота одного флага в спрайте
+   * @param columns number of columns in the sprite grid / количество колонок в сетке спрайта
+   */
+  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

@@ -15,19 +15,23 @@ import { UI_KEY_CUSTOM } from '../../config'
 import { PropertiesConfig } from '../Properties/PropertiesConfig'
 
 /**
- * Class with basic replacement for templates.
+ * Engine for systematic text replacement within file templates based on component structure.
+ * It manages the transformation of labels (marks) into actual code segments, including property types, default values, and CSS class mappings.
  *
- * Класс с базовой заменой для шаблонов.
+ * Движок для систематической замены текста в шаблонах файлов на основе структуры компонента.
+ * Управляет преобразованием меток (marks) в реальные сегменты кода, включая типы свойств, значения по умолчанию и маппинг CSS-классов.
  */
 export class DesignReplace {
   protected readonly component: string
   protected readonly mark: string
 
   /**
-   * Constructor
-   * @param structure object for working with components/ объект для работы с компонентами
-   * @param mark метка для замена на имя
-   * @param sample property template/ шаблон свойства
+   * Constructor for DesignReplace.
+   *
+   * Конструктор для DesignReplace.
+   * @param structure object containing component metadata and design logic / объект, содержащий метаданные компонента и логику дизайна
+   * @param mark the identifier used in templates for replacement (e.g., 'button') / идентификатор, используемый в шаблонах для замены
+   * @param sample the raw template content to be processed / необработанное содержимое шаблона для обработки
    */
   constructor(
     protected structure: DesignStructure,
@@ -116,7 +120,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/DesignStructure.ts

@@ -19,9 +19,11 @@ import {
 } from '../../config'
 
 /**
- * Class for processing structured components.
+ * Class for managing and resolving the data structure of a design system component.
+ * It serves as a central hub for reading component metadata, generating class mappings, and resolving style tokens.
  *
- * Класс для обработки структурированных компонентов.
+ * Класс для управления и разрешения структуры данных компонента дизайн-системы.
+ * Служит центральным узлом для чтения метаданных компонента, генерации маппингов классов и разрешения стилевых токенов.
  */
 export class DesignStructure {
   protected readonly component: string
@@ -30,11 +32,11 @@ export class DesignStructure {
   protected itemsClasses?: DesignStructureClassesList
   protected itemsStyles?: string[]
 
-  constructor(path: string)
-  constructor(design: string, component: string)
   /**
-   * Constructor
-   * @param component component name/ название компонента
+   * Constructor for DesignStructure.
+   *
+   * Конструктор для DesignStructure.
+   * @param component component name or identifier / название или идентификатор компонента
    */
   constructor(
     component?: string

package/src/classes/Design/DesignStructureClasses.ts

@@ -14,16 +14,20 @@ import {
 } from '../../types/designTypes'
 
 /**
- * A class for getting a list of classes of components.
+ * Class for resolving and generating a hierarchical list of CSS classes for a component.
+ * It recursively parses component properties to identify subclasses and build BEM-compliant class names.
  *
- * Класс для получения списка классов компонентов.
+ * Класс для разрешения и генерации иерархического списка CSS-классов для компонента.
+ * Рекурсивно анализирует свойства компонента для идентификации подклассов и построения имен классов, соответствующих BEM.
  */
 export class DesignStructureClasses extends DesignStructureItemAbstract<DesignStructureClassesList> {
   protected data: DesignStructureClassesList = []
 
   /**
-   * Constructor
-   * @param component component name/ название компонента
+   * Constructor for DesignStructureClasses.
+   *
+   * Конструктор для DesignStructureClasses.
+   * @param component component name used as the base for class generation / имя компонента, используемое в качестве базы для генерации классов
    */
   constructor(
     component: string

package/src/classes/Design/DesignStructureItemAbstract.ts

@@ -5,6 +5,13 @@ import { PropertiesConfig } from '../Properties/PropertiesConfig'
 
 import type { PropertyItemsItem } from '../../types/propertyTypes'
 
+/**
+ * Base abstract class for structural component items.
+ * It provides the foundation for resolving component properties and metadata from the design system's central storage.
+ *
+ * Базовый абстрактный класс для структурных элементов компонента.
+ * Предоставляет основу для разрешения свойств и метаданных компонента из центрального хранилища дизайн-системы.
+ */
 export abstract class DesignStructureItemAbstract<D> {
   protected properties: Properties
   protected items?: PropertyItemsItem
@@ -12,8 +19,10 @@ export abstract class DesignStructureItemAbstract<D> {
   protected abstract data: D
 
   /**
-   * Constructor
-   * @param component component name/ название компонента
+   * Constructor for DesignStructureItemAbstract.
+   *
+   * Конструктор для DesignStructureItemAbstract.
+   * @param component component name for which the structure is being resolved / имя компонента, для которого разрешается структура
    */
   protected constructor(
     protected readonly component: string

package/src/classes/Design/DesignStructureRead.ts

@@ -19,9 +19,11 @@ import type {
 import { UI_PROPERTY_FOR_PROPS } from '../../config'
 
 /**
- * Class for processing dependency properties of the component.
+ * Engine for parsing and resolving component property dependencies and states.
+ * It processes the raw property metadata to identify interactive states, link classes, and compile all possible values for code generation.
  *
- * Класс для обработки зависимости свойств у компонента.
+ * Движок для парсинга и разрешения зависимостей свойств и состояний компонента.
+ * Обрабатывает сырые метаданные свойств для идентификации интерактивных состояний, связанных классов и компиляции всех возможных значений для генерации кода.
  */
 export class DesignStructureRead extends DesignStructureItemAbstract<DesignStructureList> {
   protected states: DesignStructureStateList
@@ -29,8 +31,10 @@ export class DesignStructureRead extends DesignStructureItemAbstract<DesignStruc
   protected data: DesignStructureList = {}
 
   /**
-   * Constructor
-   * @param component component name/ название компонента
+   * Constructor for DesignStructureRead.
+   *
+   * Конструктор для DesignStructureRead.
+   * @param component component name whose properties are being resolved / имя компонента, свойства которого разрешаются
    */
   constructor(
     component: string

package/src/classes/Design/DesignStructureStyles.ts

@@ -4,16 +4,20 @@ import { StylesProperties } from '../Styles/StylesProperties'
 import { DesignStructureItemAbstract } from './DesignStructureItemAbstract'
 
 /**
- * Class for processing styles from tokens for the component.
+ * Engine for compiling component-specific styles from design system tokens.
+ * It coordinates the transformation of structural metadata into CSS-in-JS style rules using the global theme environment.
  *
- * Класс для обработки стилей из токенов для компонента.
+ * Движок для компиляции специфичных для компонента стилей из токенов дизайн-системы.
+ * Координирует преобразование структурных метаданных в правила стилей CSS-in-JS с использованием глобального тематического окружения.
  */
 export class DesignStructureStyles extends DesignStructureItemAbstract<string[]> {
   protected data: string[]
 
   /**
-   * Constructor
-   * @param component component name/ название компонента
+   * Constructor for DesignStructureStyles.
+   *
+   * Конструктор для DesignStructureStyles.
+   * @param component component name for which styles are being compiled / имя компонента, для которого компилируются стили
    */
   constructor(
     component: string

package/src/classes/Design/DesignTypes.ts

@@ -1,16 +1,19 @@
 import { forEach } from '@dxtmisha/functional-basic'
+import { getPackageJson } from '../../functions/getPackageJson'
 import { useAi } from '../../composables/useAi'
 
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
 import type { DesignTypesList } from '../../types/designTypes'
 
-import { UI_FILE_AI_TYPES } from '../../config'
+import { UI_DIR_CONSTRUCTOR, UI_FILE_AI_TYPES } from '../../config'
 
 /**
- * Class for generating AI-optimized type definitions.
+ * Engine for generating compressed and AI-optimized TypeScript type definitions.
+ * It scans the build output for declaration files, sanitizes them, and uses AI to produce a minimal, context-rich type library for use in automated coding assistants.
  *
- * Класс для генерации оптимизированных ИИ определений типов.
+ * Движок для генерации сжатых и оптимизированных для ИИ определений типов TypeScript.
+ * Сканирует выходные данные сборки на наличие файлов деклараций, очищает их и использует ИИ для создания минимальной, насыщенной контекстом библиотеки типов для использования в автоматизированных помощниках по кодированию.
  */
 export class DesignTypes {
   /**
@@ -21,8 +24,10 @@ export class DesignTypes {
   protected readonly dirArray: string[]
 
   /**
-   * Constructor
-   * @param dir directory path / путь к директории
+   * Constructor for DesignTypes.
+   *
+   * Конструктор для DesignTypes.
+   * @param dir input directory path containing declaration files / входной путь к директории, содержащей файлы деклараций
    */
   constructor(
     protected readonly dir: string = 'dist'
@@ -58,12 +63,14 @@ export class DesignTypes {
    */
   protected isFile(file: string): boolean {
     return file.endsWith('.d.ts')
+      && !file.endsWith('.vue.d.ts')
+      && !file.endsWith('wiki.d.ts')
+      && !file.endsWith('wikiData.d.ts')
       && (
-        !file.includes('constructors/')
-        || (
-          !file.endsWith('/props.d.ts')
-          && !file.endsWith('/types.d.ts')
-        )
+        !file.includes(`${UI_DIR_CONSTRUCTOR}/`)
+        || file.endsWith('/basicTypes.d.ts')
+        || file.endsWith('/types.d.ts')
+        || file.endsWith('/props.d.ts')
       )
   }
 
@@ -75,11 +82,9 @@ export class DesignTypes {
    */
   protected isContent(content?: string): content is string {
     return Boolean(
-      content && (
-        content.includes('export interface')
-        || content.includes('export type')
-        || content.includes('export enum')
-      ))
+      content
+      && content.includes('export')
+    )
   }
 
   /**
@@ -143,10 +148,23 @@ export class DesignTypes {
    * @param content content to save / контент для сохранения
    */
   protected save(content: string) {
-    PropertiesFile.writeByPath(
-      UI_FILE_AI_TYPES,
-      content
-    )
+    const packageJson = getPackageJson()
+
+    if (packageJson) {
+      PropertiesFile.writeByPath(
+        UI_FILE_AI_TYPES,
+        [
+          `1) All these methods are in the ${packageJson.name} library.`,
+          '2) Everything that is exported can be used.',
+          '3) Use what is in this library if it exists; do not use other libraries if there is an analogue here. Do not create new ones if an analogue already exists here.',
+          '',
+          'The following is the content of "exports" from package.json:',
+          JSON.stringify(packageJson.exports, null, 2),
+          '',
+          content
+        ].join('\n')
+      )
+    }
   }
 
   /**
@@ -173,18 +191,25 @@ export class DesignTypes {
     const ai = useAi()
 
     if (ai) {
-      ai.addPrompt(`File Content: ${content}`)
-
-      const generate = await ai.generate(
+      ai.addPrompt(
         'Remove all Russian comments from this code. '
-        + 'Remove comments if the property name makes its purpose obvious. '
+        + 'Simplify and shorten all English comments for AI readability while maintaining a clear balance between brevity and context. Do not delete them even if the code seems obvious. '
+        + 'Always keep All JSDoc "@example", "@remarks", "@note", and any other notes or warnings. '
         + 'Remove all imports. '
-        + 'Remove empty lines. '
-        + 'Remove the "export" keyword if possible. '
-        + 'Keep only "type", "interface" and "enum" definitions, remove everything else. '
-        + 'Minimize the content as much as possible without losing any data or logic. '
-        + 'Return only the corrected code without any additional text or explanations.'
+        + 'Remove all non-public content: delete all private and protected class methods and properties, and any non-exported elements. The final output must contain only the members and entities that are accessible from outside. '
+        + 'Remove any code segments or data that do not provide useful information for an AI assistant. '
+        + 'You may remove abstract classes or other structures that provide no practical value for code generation, but do so with extreme caution. Maintain a strict balance: if there is even a 5% chance the item might be relevant for understanding the API or generating code, keep it. Think carefully before every deletion. '
+        + 'Remove any large Enums that add excessive length without providing critical context. '
+        + 'Your goal is to create a compact, context-rich file that enables any AI coding assistant to generate high-quality code for a developer. '
+        + 'Ensure that no public API surface, essential data types, or required logic is lost. '
+        + 'Do not delete any "type" definitions; they are strictly required. '
+        + 'Do not delete file paths (labels starting with "// File:"). '
+        + 'All instructions are mandatory and must be executed perfectly. '
+        + 'Return ONLY the resulting code. No markdown code blocks, no tags, no explanations, and no additional comments from the AI. NOTHING but the pure code.'
       )
+      ai.addPrompt(`File Content: ${content}`)
+
+      const generate = await ai.generate('go!')
 
       if (generate) {
         return generate

package/src/classes/Design/DesignTypescript.ts

@@ -9,9 +9,11 @@ import type {
 } from '../../types/designTypes'
 
 /**
- * Class for working with TypeScript types
+ * Utility for interacting with the TypeScript Compiler API to analyze and extract type metadata from source files.
+ * It parses interfaces and type aliases to retrieve property details, including types, literal unions, and documentation comments.
  *
- * Класс для работы с типами TypeScript
+ * Утилита для взаимодействия с TypeScript Compiler API для анализа и извлечения метаданных типов из исходных файлов.
+ * Анализирует интерфейсы и псевдонимы типов для получения сведений о свойствах, включая типы, литеральные объединения и комментарии к документации.
  */
 export class DesignTypescript {
   protected readonly program: ts.Program
@@ -19,6 +21,13 @@ export class DesignTypescript {
   protected readonly sourceFile?: ts.SourceFile
   protected types?: DesignTypescriptList
 
+  /**
+   * Constructor for DesignTypescript.
+   *
+   * Конструктор для DesignTypescript.
+   * @param path path to the TypeScript source file to analyze / путь к исходному файлу TypeScript для анализа
+   * @param options compiler options for the TypeScript program / опции компилятора для программы TypeScript
+   */
   constructor(
     path: string = '',
     options: ts.CompilerOptions = {}

package/src/classes/Design/DesignUi.ts

@@ -1,22 +1,40 @@
 // 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, UI_FILE_STYLE_PROPERTIES } from '../../config'
 
+/**
+ * Orchestrator class for managing and initializing the Design System UI.
+ * It coordinates the generation of styles, documentation, component structures, and library-level exports (media, plugins, types).
+ *
+ * Класс-оркестратор для управления и инициализации пользовательского интерфейса дизайн-системы.
+ * Координирует генерацию стилей, документации, структур компонентов и экспортов на уровне библиотеки (медиа, плагины, типы).
+ */
 export class DesignUi {
   protected readonly components: LibraryItems
 
   /**
-   * Constructor
-   * @param name component name/ названия компонента
+   * Constructor for DesignUi.
+   *
+   * Конструктор для DesignUi.
+   * @param name specific component name to initialize, or empty for all / название конкретного компонента для инициализации или пусто для всех
    */
   constructor(
     protected readonly name: string = ''
@@ -45,8 +63,14 @@ export class DesignUi {
     new DesignWiki().make()
 
     this.makeConstructorComponent()
+      .makePackage()
+      .makeUiProperties()
 
     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 +94,50 @@ 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(): this {
+    const packageJson = getPackageJson()
+    const projectName = toCamelCaseFirst(PropertiesConfig.getProjectName())
+
+    if (packageJson?.exports) {
+      packageJson.exports['.'] = {
+        types: './dist/library/types.d.ts',
+        default: './dist/types.js'
+      }
+      packageJson.exports['./plugin'] = {
+        types: './dist/library/plugin.d.ts',
+        default: './dist/plugin.js'
+      }
+      packageJson.exports['./media'] = {
+        types: './dist/library/media.d.ts',
+        default: './dist/media.js'
+      }
+      packageJson.exports['./style.css'] = './dist/style.css'
+      packageJson.exports['./style/ui.scss'] = `./src/styles/${projectName}/main.scss`
+      packageJson.exports['./ui-properties'] = {
+        sass: './ui-properties.scss',
+        default: './ui-properties.scss'
+      }
+      packageJson.exports['./types.d.ts'] = './dist/library/types.d.ts'
+      packageJson['web-types'] = './dist/web-types.json'
+
+      PropertiesFile.writeByPath(UI_FILE_PACKAGE, packageJson)
+    }
+
+    return this
+  }
+
+  protected makeUiProperties(): this {
+    PropertiesFile.writeByPath(
+      UI_FILE_STYLE_PROPERTIES,
+      '@forward "./src/styles/Ui/style.scss";'
+    )
+
+    return this
+  }
 }