@dxtmisha/wiki 0.39.2 → 0.39.4

package/src/media/functional/ui/properties/flag-fullValue/flag-fullValue.en.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Full Value (fullValue)'/>
+
+# Full Value (fullValue)
+
+The `_fullValue: true` flag disables any value parsing by the compiler. The value is passed to SCSS exactly "as-is" without adding units (`px`) or resolving references `{}`.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "width": {
+      "value": "calc(100% - 20px)",
+      "_fullValue": true
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button {
+  width: calc(100% - 20px);
+}
+```

package/src/media/functional/ui/properties/flag-fullValue/flag-fullValue.ru.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Полное значение (fullValue)'/>
+
+# Полное значение (fullValue)
+
+Флаг `_fullValue: true` отключает любой парсинг значения компилятором. Значение передается в SCSS «как есть», без добавления единиц измерения (`px`) и без поиска ссылок `{}`.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "width": {
+      "value": "calc(100% - 20px)",
+      "_fullValue": true
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button {
+  width: calc(100% - 20px);
+}
+```

package/src/media/functional/ui/properties/flag-fullValue/flag-fullValue.vi.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Giá trị đầy đủ (fullValue)'/>
+
+# Giá trị đầy đủ (fullValue)
+
+Cờ `_fullValue: true` vô hiệu hóa bất kỳ việc phân tích cú pháp giá trị nào bởi trình biên dịch. Giá trị được chuyển đến SCSS chính xác "như hiện tại" mà không thêm đơn vị (`px`) hoặc giải quyết các tham chiếu `{}`.
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "width": {
+      "value": "calc(100% - 20px)",
+      "_fullValue": true
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.button {
+  width: calc(100% - 20px);
+}
+```

package/src/media/functional/ui/properties/flag-prop/flag-prop.en.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Component Prop (prop)'/>
+
+# Component Prop (prop)
+
+The `_prop` flag instructs the generator that the given property should become part of the component's public interface (Props) and be available in TypeScript. This allows for controlling component styles via external parameters.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "~size": {
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_prop": true,
+      "_default": "md"
+    }
+  }
+}
+```
+
+**Output Result (TypeScript):**
+```typescript
+type PropsToken = {
+  size?: 'sm' | 'md'
+}
+```

package/src/media/functional/ui/properties/flag-prop/flag-prop.ru.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Свойство компонента (prop)'/>
+
+# Свойство компонента (prop)
+
+Флаг `_prop` указывает генератору, что данное свойство должно стать частью публичного интерфейса компонента (Props) и быть доступным в TypeScript. Это позволяет управлять стилями компонента через внешние параметры.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "~size": {
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_prop": true,
+      "_default": "md"
+    }
+  }
+}
+```
+
+**Результат (TypeScript):**
+```typescript
+type PropsToken = {
+  size?: 'sm' | 'md'
+}
+```

package/src/media/functional/ui/properties/flag-prop/flag-prop.vi.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Thuộc tính thành phần (prop)'/>
+
+# Thuộc tính thành phần (prop)
+
+Cờ `_prop` hướng dẫn trình tạo rằng thuộc tính đã cho sẽ trở thành một phần của giao diện công khai của thành phần (Props) và có sẵn trong TypeScript. Điều này cho phép điều khiển các kiểu thành phần thông qua các tham số bên ngoài.
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "~size": {
+      "sm": { "height": "32px" },
+      "md": { "height": "40px" },
+      "_prop": true,
+      "_default": "md"
+    }
+  }
+}
+```
+
+**Kết quả (TypeScript):**
+```typescript
+type PropsToken = {
+  size?: 'sm' | 'md'
+}
+```

package/src/media/functional/ui/properties/flag-rename/flag-rename.en.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Renaming (rename)'/>
+
+# Renaming (rename)
+
+The `_rename` flag overrides the property name (in CSS) or a portion of the class name (in SCSS) in the final output. This is useful for creating aliases or shorthand names.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "backgroundItem": {
+      "value": "#FFF",
+      "_rename": "bg"
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button__bg {
+  background-color: #FFF;
+}
+```

package/src/media/functional/ui/properties/flag-rename/flag-rename.ru.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Переименование (rename)'/>
+
+# Переименование (rename)
+
+Флаг `_rename` переопределяет название свойства (в CSS) или части имени класса (в SCSS) в конечном коде. Это полезно для создания алиасов или сокращений.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "backgroundItem": {
+      "value": "#FFF",
+      "_rename": "bg"
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button__bg {
+  background-color: #FFF;
+}
+```

package/src/media/functional/ui/properties/flag-rename/flag-rename.vi.mdx

@@ -0,0 +1,26 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Đổi tên (rename)'/>
+
+# Đổi tên (rename)
+
+Cờ `_rename` ghi đè tên thuộc tính (trong CSS) hoặc một phần của tên lớp (trong SCSS) trong kết quả cuối cùng. Điều này hữu ích để tạo các bí danh hoặc tên viết tắt.
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "backgroundItem": {
+      "value": "#FFF",
+      "_rename": "bg"
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.button__bg {
+  background-color: #FFF;
+}
+```

package/src/media/functional/ui/properties/flag-replace/flag-replace.en.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Replacement (replace)'/>
+
+# Replacement (replace)
+
+The `_replace` flag enables modification of the final value or name using regular expressions. It expects an object with `pattern`, `flags`, and `replace` fields.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": {
+      "value": "12px",
+      "_replace": {
+        "pattern": "px",
+        "replace": "rem",
+        "flags": "g"
+      }
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button {
+  padding: 12rem;
+}
+```

package/src/media/functional/ui/properties/flag-replace/flag-replace.ru.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Замена (replace)'/>
+
+# Замена (replace)
+
+Флаг `_replace` позволяет изменять финальное значение или имя через регулярные выражения. Параметр принимает объект с полями `pattern`, `flags` и `replace`.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": {
+      "value": "12px",
+      "_replace": {
+        "pattern": "px",
+        "replace": "rem",
+        "flags": "g"
+      }
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button {
+  padding: 12rem;
+}
+```

package/src/media/functional/ui/properties/flag-replace/flag-replace.vi.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Thay thế (replace)'/>
+
+# Thay thế (replace)
+
+Cờ `_replace` cho phép sửa đổi giá trị hoặc tên cuối cùng bằng biểu thức chính quy. Nó yêu cầu một đối tượng với các trường `pattern`, `flags` và `replace`.
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": {
+      "value": "12px",
+      "_replace": {
+        "pattern": "px",
+        "replace": "rem",
+        "flags": "g"
+      }
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.button {
+  padding: 12rem;
+}
+```

package/src/media/functional/ui/properties/flag-state/flag-state.en.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/State (state)'/>
+
+# State (state)
+
+The `_state: true` flag allows for explicit tagging of a node as a state (pseudo-class). This is necessary if the node name is not automatically recognized by the parser. Properties will be automatically wrapped in a state selector (`&:name { ... }`).
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-state": {
+      "_state": true,
+      "opacity": "0.5"
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button {
+  &:my-custom-state {
+    opacity: 0.5;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-state/flag-state.ru.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Состояние (state)'/>
+
+# Состояние (state)
+
+Флаг `_state: true` позволяет явно пометить узел как состояние (псевдокласс). Это требуется, если имя узла не распознается автоматическим парсером. Свойства будут автоматически обернуты в селектор состояния (`&:name { ... }`).
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-state": {
+      "_state": true,
+      "opacity": "0.5"
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button {
+  &:my-custom-state {
+    opacity: 0.5;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-state/flag-state.vi.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Trạng thái (state)'/>
+
+# Trạng thái (state)
+
+Cờ `_state: true` cho phép gắn nhãn rõ ràng một nút là một trạng thái (pseudo-class). Điều này là cần thiết nếu tên nút không được trình phân tích cú pháp tự động nhận dạng. Các thuộc tính sẽ được tự động bọc trong một bộ chọn trạng thái (`&:name { ... }`).
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-state": {
+      "_state": true,
+      "opacity": "0.5"
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.button {
+  &:my-custom-state {
+    opacity: 0.5;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-subclass/flag-subclass.en.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Subclass (subclass)'/>
+
+# Subclass (subclass)
+
+The `_subclass: true` flag allows for explicit tagging of a node as a subclass (BEM-element). This is necessary if the node name is not automatically recognized by the parser. Properties will be automatically wrapped in a subclass selector (`&__name { ... }`).
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-element": {
+      "_subclass": true,
+      "display": "block"
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button {
+  &__my-custom-element {
+    display: block;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-subclass/flag-subclass.ru.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Подкласс (subclass)'/>
+
+# Подкласс (subclass)
+
+Флаг `_subclass: true` позволяет явно пометить узел как подкласс (BEM-элемент). Это требуется, если имя узла не распознается автоматическим парсером. Свойства будут автоматически обернуты в селектор подкласса (`&__name { ... }`).
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-element": {
+      "_subclass": true,
+      "display": "block"
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button {
+  &__my-custom-element {
+    display: block;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-subclass/flag-subclass.vi.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Lớp con (subclass)'/>
+
+# Lớp con (subclass)
+
+Cờ `_subclass: true` cho phép gắn nhãn rõ ràng một nút là một lớp con (BEM-element). Điều này là cần thiết nếu tên nút không được trình phân tích cú pháp tự động nhận dạng. Các thuộc tính sẽ được tự động bọc trong một bộ chọn lớp con (`&__name { ... }`).
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "my-custom-element": {
+      "_subclass": true,
+      "display": "block"
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.button {
+  &__my-custom-element {
+    display: block;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-theme/flag-theme.en.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Theme (theme)'/>
+
+# Theme (theme)
+
+The `_theme` flag enables scoping of styles to a specific color theme. Styles will be generated only within the selector of the corresponding theme.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "value": "#000",
+      "_theme": "dark"
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.theme--dark {
+  .button {
+    background-color: #000;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-theme/flag-theme.ru.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Тема (theme)'/>
+
+# Тема (theme)
+
+Флаг `_theme` позволяет ограничить область действия стилей конкретной цветовой темой. Стили будут сгенерированы только внутри селектора соответствующей темы.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "value": "#000",
+      "_theme": "dark"
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.theme--dark {
+  .button {
+    background-color: #000;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-theme/flag-theme.vi.mdx

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/properties/flags/Chủ đề (theme)'/>
+
+# Chủ đề (theme)
+
+Cờ `_theme` cho phép giới hạn phạm vi của các kiểu cho một chủ đề màu cụ thể. Các kiểu sẽ chỉ được tạo bên trong bộ chọn của chủ đề tương ứng.
+
+**Cấu hình đầu vào (`properties.json`):**
+```json
+{
+  "button": {
+    "background": {
+      "value": "#000",
+      "_theme": "dark"
+    }
+  }
+}
+```
+
+**Kết quả (SCSS):**
+```scss
+.theme--dark {
+  .button {
+    background-color: #000;
+  }
+}
+```

package/src/media/functional/ui/properties/flag-var/flag-var.en.mdx

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/properties/flags/Variable (var)'/>
+
+# Variable (var)
+
+The `_var: true` flag forces the compiler to generate a separate CSS variable for the node, even if it is already a standard property. This is useful for dynamic overrides via JS or facilitating inheritance.
+
+**Input Configuration (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": {
+      "value": "16px",
+      "_var": true
+    }
+  }
+}
+```
+
+**Output Result (SCSS):**
+```scss
+.button {
+  --button-padding: 16px;
+  padding: var(--button-padding);
+}
+```

package/src/media/functional/ui/properties/flag-var/flag-var.ru.mdx

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/properties/flags/Переменная (var)'/>
+
+# Переменная (var)
+
+Флаг `_var: true` заставляет компилятор генерировать для данного узла отдельную CSS-переменную, даже если он уже является стандартным свойством. Это полезно для создания динамических переопределений через JS или наследования.
+
+**Входная конфигурация (`properties.json`):**
+```json
+{
+  "button": {
+    "padding": {
+      "value": "16px",
+      "_var": true
+    }
+  }
+}
+```
+
+**Результат (SCSS):**
+```scss
+.button {
+  --button-padding: 16px;
+  padding: var(--button-padding);
+}
+```