@dxtmisha/wiki 0.39.6 → 0.39.8

package/src/media/functional/ui/component/component.vi.mdx

@@ -0,0 +1,104 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/# Tạo và quản lý thành phần'/>
+
+# Tạo và quản lý thành phần
+
+Quy trình phát triển trong hệ thống **DXT UI** được tự động hóa tối đa bằng các mã lệnh tạo mã. Ý tưởng cốt lõi là nhà phát triển mô tả siêu dữ liệu của thành phần, và hệ thống sẽ tự động tạo và cập nhật các tệp cần thiết (props, styles, templates).
+
+```bash
+npm run ui
+npm run ui [ComponentName]
+```
+
+Lệnh `npm run ui` là công cụ chính để làm việc với các thành phần. Nó tự động quét các thư mục, tìm các thư mục mới hoặc bị thay đổi và đồng bộ hóa tất cả các tệp liên quan (`props.ts`, `styleToken.scss`, `.vue`) dựa trên dữ liệu trong `properties.json`.
+
+- Để tạo hoặc cập nhật một thành phần cụ thể, chỉ cần chạy lệnh sau khi thực hiện thay đổi đối với thư mục của nó.
+- Để xây dựng lại hoàn toàn thư viện và cập nhật tất cả các xuất bản (exports), hãy chạy lệnh mà không có tham số.
+
+## Tạo một thành phần mới
+
+Để tạo một thành phần mới từ đầu, hãy làm theo các bước sau:
+
+1. **Tạo thư mục**: Trong thư mục `src/components/Ui/` (hoặc trong dự án của bạn), hãy tạo một thư mục mới với tên của thành phần (ví dụ: `MyButton`).
+2. **Khởi tạo thành phần**: Thực thi lệnh `ui` (hoặc `npm run ui`). Mã lệnh sẽ tự động phát hiện thư mục mới và tạo các tệp cần thiết bên trong đó.
+
+```bash
+npm run ui
+```
+
+Hệ thống sẽ tạo tệp `properties.json` với cấu trúc cơ bản, cùng với tất cả các tệp hỗ trợ (props, styles, vue).
+
+3. **Điền các thuộc tính**: Chỉnh sửa tệp `properties.json` đã tạo bằng cách thêm các bộ sửa đổi và token.
+4. **Đồng bộ hóa các thay đổi**: Chạy lại lệnh `ui` để cập nhật tất cả các tệp liên quan dựa trên các thay đổi của bạn.
+
+```bash
+npm run ui
+```
+
+### Kết quả tạo mã
+Hệ thống sẽ tự động tạo các tệp sau dựa trên siêu dữ liệu của bạn và constructor đã chọn:
+- `props.ts` — các thuộc tính được định kiểu mở rộng từ constructor và xác định các giá trị mặc định.
+- `styleToken.scss` — các SCSS token và mixin.
+- `DesignComponent.vue` — thành phần Vue chính với logic khởi tạo.
+- `index.ts`, `wiki.ts`, `stories.ts` — các tệp xuất bản, tài liệu và câu chuyện (stories).
+
+
+Trong tệp `.vue` được tạo, khi khởi tạo lớp `Design` (ví dụ: `BarsDesign`), bạn có thể truyền một đối tượng `components`. Điều này cho phép bạn kết nối các thành phần con cần thiết để thành phần hiện tại hoạt động (ví dụ: các biểu tượng hoặc chỉ báo tiến trình).
+
+> Chỉ kết nối các thành phần thực sự được sử dụng. Nếu một thành phần phụ thuộc (ví dụ: `ripple`) không cần thiết trong việc triển khai của bạn, nó có thể được bỏ qua khỏi đối tượng.
+
+Để quản lý các thuộc tính của thành phần con, hãy sử dụng tham số `compMod`. Điều này cho phép bạn truyền các giá trị mặc định cho các pro của các phần tử bên trong (ví dụ: đặt kích thước hoặc kiểu nút bên trong một bảng điều khiển điều hướng).
+
+```typescript
+const design = new BarsDesign('my.bars', props, {
+  emits,
+  classes: classesToken,
+  components: {
+    button: MyButton
+  },
+  compMod: {
+    button: {
+      text: true,
+      size: 'xs',
+      inverse: true
+    }
+  }
+})
+
+### Làm việc với Props và các giá trị mặc định
+
+Tệp `props.ts` chứa một đối tượng `defaults` kết hợp các giá trị tiêu chuẩn từ constructor với các cài đặt cụ thể cho thành phần của bạn.
+
+Ví dụ trong tệp `props.ts`:
+```typescript
+export const defaults: object = {
+  ...defaultsBars,
+  iconBack: 'arrow_back',
+  paddingByIndent: true
+}
+```
+
+
+## Cập nhật một thành phần
+
+Nếu bạn cần thay đổi các thuộc tính của thành phần (thêm một bộ sửa đổi, thay đổi một token hoặc giá trị CSS), hãy tuân theo quy tắc **"Nguồn dữ liệu duy nhất" (Source of Truth)**:
+
+1. Chỉnh sửa tệp `properties.json`.
+2. Chạy lại lệnh:
+   ```bash
+   npm run ui MyButton
+   ```
+
+Mã lệnh sẽ tự động cập nhật `props.ts` (thêm các kiểu mới), `styleToken.scss` (cập nhật biến) và các bản mẫu trong khi vẫn duy trì tính toàn vẹn của kiến trúc.
+
+## Xây dựng lại toàn bộ thư viện
+
+Khi làm việc đồng thời trên nhiều thành phần hoặc nếu bạn muốn cập nhật các xuất bản thư viện toàn cầu (media, plugin, type), hãy sử dụng lệnh `ui` mà không cần đối số:
+
+```bash
+npm run ui
+```
+
+
+

package/src/media/functional/ui/setup/setup.en.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/# Project Setup'/>
+
+# Project Setup
+
+Before you start designing components, you need to prepare the work environment and configure the project files. The system requires key ecosystem packages and specific builder settings.
+
+## 1. Installing Dependencies
+
+Install the full set of necessary `@dxtmisha` packages using your package manager:
+
+```bash
+npm install @dxtmisha/configuration @dxtmisha/constructor @dxtmisha/functional @dxtmisha/functional-basic @dxtmisha/media @dxtmisha/styles @dxtmisha/scripts @dxtmisha/test @dxtmisha/wiki
+```
+
+## 2. Project Configuration (design.config.json)
+
+Create a `design.config.json` file in the root directory of your project. This file defines global parameters for your design system, such as project name and documentation language.
+
+```json
+{
+  "project": "Ui",
+  "name": "my-design",
+  "wikiLanguage": "en"
+}
+```
+
+*Note: You can use the `"extends"` property to inherit configuration from other packages.*
+
+## 3. Configuring Vite (vite.config.ts)
+
+For correct building, it is recommended to use the pre-defined `viteComponents` object from the `@dxtmisha/configuration` package. It contains all necessary plugins and settings for working with components and documentation.
+
+```typescript
+import { viteComponents } from '@dxtmisha/configuration/viteComponents'
+
+// https://vite.dev/config/
+export default viteComponents
+```
+
+## 4. Configuring TypeScript (tsconfig.app.json)
+
+Add MDX file support to your TypeScript configuration. To do this, add `@types/mdx` to the `types` array in the `compilerOptions` section.
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@types/mdx"
+    ]
+  }
+}
+```
+
+## 5. Adding Run Commands (package.json)
+
+Add the following scripts to your `package.json` to automate code generation, documentation, and typing processes:
+
+```json
+{
+  "scripts": {
+    "ui": "dxt-ui",
+    "wiki-storm": "dxt-wiki-storm",
+    "types": "dxt-types"
+  }
+}
+```
+
+- **ui**: Launches the main UI component generation cycle.
+- **wiki-storm**: Generates and updates files for Wiki/Storybook.
+- **types**: Updates data types based on the current configuration.

package/src/media/functional/ui/setup/setup.ru.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/# Подготовка проекта'/>
+
+# Подготовка проекта
+
+Перед началом проектирования компонентов необходимо подготовить рабочую среду и настроить конфигурационные файлы. Система требует наличия ключевых пакетов экосистемы и специфических настроек сборщика.
+
+## 1. Установка зависимостей
+
+Установите полный набор необходимых пакетов `@dxtmisha` с помощью пакетного менеджера:
+
+```bash
+npm install @dxtmisha/configuration @dxtmisha/constructor @dxtmisha/functional @dxtmisha/functional-basic @dxtmisha/media @dxtmisha/styles @dxtmisha/scripts @dxtmisha/test @dxtmisha/wiki
+```
+
+## 2. Конфигурация проекта (design.config.json)
+
+Создайте файл `design.config.json` в корневом каталоге проекта. Этот файл определяет глобальные параметры вашей дизайн-системы, такие как название проекта и язык документации.
+
+```json
+{
+  "project": "Ui",
+  "name": "my-design",
+  "wikiLanguage": "ru"
+}
+```
+
+*Примечание: Вы можете использовать свойство `"extends"` для наследования конфигурации от других пакетов.*
+
+## 3. Настройка Vite (vite.config.ts)
+
+Для корректной сборки рекомендуется использовать предустановленный объект `viteComponents` из пакета `@dxtmisha/configuration`. Он содержит все необходимые плагины и настройки для работы с компонентами и документацией.
+
+```typescript
+import { viteComponents } from '@dxtmisha/configuration/viteComponents'
+
+// https://vite.dev/config/
+export default viteComponents
+```
+
+## 4. Настройка TypeScript (tsconfig.app.json)
+
+Добавьте поддержку MDX-файлов в конфигурацию TypeScript. Для этого необходимо добавить `@types/mdx` в массив `types` секции `compilerOptions`.
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@types/mdx"
+    ]
+  }
+}
+```
+
+## 5. Добавление команд запуска (package.json)
+
+Добавьте следующие скрипты в ваш `package.json` для автоматизации процессов генерации кода, документации и типизации:
+
+```json
+{
+  "scripts": {
+    "ui": "dxt-ui",
+    "wiki-storm": "dxt-wiki-storm",
+    "types": "dxt-types"
+  }
+}
+```
+
+- **ui**: Запускает основной цикл генерации UI-компонентов.
+- **wiki-storm**: Генерирует и обновляет файлы для Wiki/Storybook.
+- **types**: Обновляет типы данных на основе текущей конфигурации.

package/src/media/functional/ui/setup/setup.vi.mdx

@@ -0,0 +1,72 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/# Chuẩn bị dự án'/>
+
+# Chuẩn bị dự án
+
+Trước khi bạn bắt đầu thiết kế các thành phần, bạn cần chuẩn bị môi trường làm việc và cấu hình các tệp tin dự án. Hệ thống yêu cầu các gói cốt lõi trong hệ sinh thái và các cài đặt trình biên dịch cụ thể.
+
+## 1. Cài đặt các thành phần phụ thuộc
+
+Cài đặt đầy đủ các gói `@dxtmisha` cần thiết bằng cách sử dụng trình quản lý gói của bạn:
+
+```bash
+npm install @dxtmisha/configuration @dxtmisha/constructor @dxtmisha/functional @dxtmisha/functional-basic @dxtmisha/media @dxtmisha/styles @dxtmisha/scripts @dxtmisha/test @dxtmisha/wiki
+```
+
+## 2. Cấu hình dự án (design.config.json)
+
+Tạo một tệp `design.config.json` trong thư mục gốc của dự án. Tệp này xác định các tham số toàn cầu cho hệ thống thiết kế của bạn, như tên dự án và ngôn ngữ tài liệu.
+
+```json
+{
+  "project": "Ui",
+  "name": "my-design",
+  "wikiLanguage": "vi"
+}
+```
+
+*Lưu ý: Bạn có thể sử dụng thuộc tính `"extends"` để kế thừa cấu hình từ các gói khác.*
+
+## 3. Cấu hình Vite (vite.config.ts)
+
+Để xây dựng đúng cách, khuyến nghị sử dụng đối tượng `viteComponents` đã được định nghĩa sẵn từ gói `@dxtmisha/configuration`. Nó chứa tất cả các plugin và cài đặt cần thiết để làm việc với các thành phần và tài liệu.
+
+```typescript
+import { viteComponents } from '@dxtmisha/configuration/viteComponents'
+
+// https://vite.dev/config/
+export default viteComponents
+```
+
+## 4. Cấu hình TypeScript (tsconfig.app.json)
+
+Thêm hỗ trợ loại tệp MDX vào cấu hình TypeScript của bạn. Để thực hiện việc này, hãy thêm `@types/mdx` vào mảng `types` trong phần `compilerOptions`.
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@types/mdx"
+    ]
+  }
+}
+```
+
+## 5. Thêm các lệnh thực thi (package.json)
+
+Thêm các mã lệnh sau vào tệp `package.json` của bạn để tự động hóa quá trình tạo mã, tài liệu và định kiểu:
+
+```json
+{
+  "scripts": {
+    "ui": "dxt-ui",
+    "wiki-storm": "dxt-wiki-storm",
+    "types": "dxt-types"
+  }
+}
+```
+
+- **ui**: Khởi chạy chu kỳ tạo thành phần giao diện người dùng (UI) chính.
+- **wiki-storm**: Tạo và cập nhật các tệp cho Wiki/Storybook.
+- **types**: Cập nhật các kiểu dữ liệu dựa trên cấu hình hiện tại.

package/src/media/functional/ui/wiki-data.en.mdx

@@ -0,0 +1,114 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/# UI/# Wiki Data Configuration'/>
+
+# Wiki Data Configuration
+
+To manage demo data and Storybook arguments within a specific project (e.g., `d1`), the `src/wiki/wiki.ts` file is used. This file allows you to supplement or override global Wiki settings defined in the main `@dxtmisha/wiki` package.
+
+### Why is this needed?
+The `wiki.ts` file serves as the central configuration point for:
+- Overriding global default values for Storybook arguments (e.g., button text or icons).
+- Configuring selection lists (options) for project-specific resources.
+- Adding unique demo data not included in the base library.
+
+### How to work with the file
+In each component package (e.g., `@dxtmisha/d1`), the `src/wiki/wiki.ts` file exports an object of type `StorybookArgsToList`. This object imports the base `wiki` data items and modifies them as needed.
+
+```typescript
+import { StorybookControl, StorybookCategory, type StorybookArgsToList } from '@dxtmisha/wiki'
+import { wiki } from '@dxtmisha/wiki/media'
+
+export const wikiD1: StorybookArgsToList = {
+  // 1. Inheritance: Overriding existing argument 'image.value'
+  'image.value': {
+    ...wiki['image.value'],
+    options: {
+      ...wiki['image.value']?.options,
+      value: 'mail-01'
+    }
+  },
+
+  // 2. New Parameter: Creating a completely new property
+  'my.new.parameter': {
+    type: StorybookControl.text,
+    options: {
+      category: StorybookCategory.technical,
+      description: 'Description of a completely new parameter not in the base',
+      value: 'Default Value'
+    }
+  }
+}
+```
+
+
+
+## Naming Conventions
+
+The choice of key name in the `wiki` object determines the scope of the settings:
+
+#### Global Properties
+If the key consists only of the property name (e.g., `value`, `size`, `text`), the settings are considered **global**. They are automatically applied to all components in the system that have that property. This is useful for defining uniform descriptions or control types for the entire library.
+
+#### Specific Properties
+If the key contains a dot, it is interpreted as `[ComponentName].[PropertyName]` (e.g., `button.size`, `input.value`).
+- Settings are applied **only to the specified component**.
+- These values take precedence over global settings.
+- Allows defining unique behavior or default values for a specific element without affecting others.
+
+## Data Type Structure
+
+To correctly configure the `wiki.ts` file, it is important to understand the structure of the types used. Below is a detailed description of the main `StorybookArgsToList` type and its components.
+
+### `StorybookArgsToList`
+
+This is a record type (`Record`) used for argument configuration.
+
+- **Key**: Argument name (string).
+- **Value**: An object of type `StorybookArgsToItem`.
+
+---
+
+### `StorybookArgsToItem`
+
+Describes the configuration of a specific Storybook control.
+
+- `type: StorybookControl` — defines the interface type for value control (text field, checkbox, etc.).
+- `options: StorybookArgsToOptionsByType` — an object for advanced behavior and display settings.
+- `isDemo?: boolean` — indicates that the parameter is for demonstration purposes only.
+- `demo?: any` — demonstration data that will be substituted in examples.
+- `hide?: boolean` — allows hiding the parameter from the argument table if it is purely technical.
+
+---
+
+### `StorybookArgsToOptionsByType`
+
+An object for configuring argument metadata and constraints.
+
+- `category?: StorybookCategory` — the category name for grouping in the table (use values from the `StorybookCategory` enum).
+- `value?: any` — the current value of the argument.
+- `defaultValue?: string | number | boolean` — the value that will be displayed as "default" in the documentation.
+- `description?: string | Record<string, string>` — description of the property. Can be a string or an object for different languages.
+- `options?: string[] | Record<string, string>` — a list of available options for selection (relevant for `select` or `radio` types).
+- `min?: number` / `max?: number` — minimum and maximum values for numeric controls.
+- `order?: number` — numeric index for sorting arguments in the list.
+
+---
+
+### Enums
+
+#### `StorybookControl`
+Defines the visual type of the control:
+- `text` — text field.
+- `boolean` — checkbox (true/false).
+- `number` — numeric input.
+- `select` — dropdown list (requires `options` to be filled).
+- `object` — editor for JSON objects.
+
+#### `StorybookCategory`
+Used for grouping properties into logical blocks:
+- `Values` — primary values.
+- `Styles` — appearance parameters.
+- `Technical` — technical and internal settings.
+- `Adaptive` — responsiveness parameters.
+- `Status` — component states.

package/src/media/functional/ui/wiki-data.ru.mdx

@@ -0,0 +1,114 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/# UI/# Настройка данных Wiki'/>
+
+# Настройка данных Wiki
+
+Для управления демонстрационными данными и аргументами Storybook в рамках конкретного проекта (например, `d1`) используется файл `src/wiki/wiki.ts`. Этот файл позволяет дополнять или переопределять глобальные настройки Wiki, заданные в основном пакете `@dxtmisha/wiki`.
+
+### Зачем это нужно?
+Файл `wiki.ts` служит центральной точкой конфигурации для:
+- Переопределения значений по умолчанию для аргументов Storybook (например, текста кнопок или иконок).
+- Настройки списков выбора (options) для специфичных для проекта ресурсов.
+- Добавления уникальных демонстрационных данных, которые не входят в базовую библиотеку.
+
+### Как работать с файлом
+В каждом пакете компонентов (например, в `@dxtmisha/d1`) файл `src/wiki/wiki.ts` экспортирует объект типа `StorybookArgsToList`. Этот объект импортирует базовые данные `wiki` и модифицирует их по необходимости.
+
+```typescript
+import { StorybookControl, StorybookCategory, type StorybookArgsToList } from '@dxtmisha/wiki'
+import { wiki } from '@dxtmisha/wiki/media'
+
+export const wikiD1: StorybookArgsToList = {
+  // 1. Наследование: Переопределяем существующий аргумент 'image.value'
+  'image.value': {
+    ...wiki['image.value'],
+    options: {
+      ...wiki['image.value']?.options,
+      value: 'mail-01'
+    }
+  },
+
+  // 2. Новый параметр: Создаем полностью новое свойство
+  'my.new.parameter': {
+    type: StorybookControl.text,
+    options: {
+      category: StorybookCategory.technical,
+      description: 'Описание полностью нового параметра, которого нет в базе',
+      value: 'Default Value'
+    }
+  }
+}
+```
+
+
+
+## Принципы именования ключей
+
+Выбор названия ключа в объекте `wiki` определяет область применения настроек:
+
+#### Глобальные свойства
+Если ключ состоит только из названия свойства (например, `value`, `size`, `text`), настройки считаются **глобальными**. Они автоматически применяются ко всем компонентам, в которых присутствует данное свойство. Это удобно для задания единых описаний или типов контролов для всей библиотеки.
+
+#### Специфичные свойства
+Если ключ содержит точку, он интерпретируется как `[ComponentName].[PropertyName]` (например, `button.size`, `input.value`).
+- Настройки применяются **только к указанному компоненту**.
+- Эти значения имеют приоритет перед глобальными настройками.
+- Позволяет задать уникальное поведение или значения по умолчанию для конкретного элемента, не затрагивая остальные.
+
+## Структура типов данных
+
+Для корректной настройки файла `wiki.ts` важно понимать структуру используемых типов. Ниже приведено детальное описание основного типа `StorybookArgsToList` и его составляющих.
+
+### `StorybookArgsToList`
+
+Это объектный тип (`Record`), используемый для конфигурации аргументов.
+
+- **Ключ (Key)**: Название аргумента (строка).
+- **Значение (Value)**: Объект типа `StorybookArgsToItem`.
+
+---
+
+### `StorybookArgsToItem`
+
+Описывает конфигурацию конкретного элемента управления в Storybook.
+
+- `type: StorybookControl` — определяет тип интерфейса для управления значением (текстовое поле, переключатель и т.д.).
+- `options: StorybookArgsToOptionsByType` — объект расширенных настроек поведения и отображения.
+- `isDemo?: boolean` — указывает, что параметр предназначен только для демонстрации.
+- `demo?: any` — демонстрационные данные, которые будут подставлены в примеры.
+- `hide?: boolean` — позволяет скрыть параметр из таблицы аргументов, если он является чисто техническим.
+
+---
+
+### `StorybookArgsToOptionsByType`
+
+Объект для настройки метаданных и ограничений аргумента.
+
+- `category?: StorybookCategory` — название категории для группировки в таблице (используйте значения из перечисления `StorybookCategory`).
+- `value?: any` — текущее значение аргумента.
+- `defaultValue?: string | number | boolean` — значение, которое будет отображаться как "по умолчанию" в документации.
+- `description?: string | Record<string, string>` — описание свойства. Может быть строкой или объектом для разных языков.
+- `options?: string[] | Record<string, string>` — список доступных вариантов для выбора (актуально для типов `select` или `radio`).
+- `min?: number` / `max?: number` — минимальное и максимальное значение для числовых контролов.
+- `order?: number` — числовой индекс для сортировки аргументов в списке.
+
+---
+
+### Перечисления (Enums)
+
+#### `StorybookControl`
+Определяет визуальный тип контрола:
+- `text` — текстовое поле.
+- `boolean` — переключатель (true/false).
+- `number` — ввод числа.
+- `select` — выпадающий список (требует заполнения `options`).
+- `object` — редактор JSON-объектов.
+
+#### `StorybookCategory`
+Используется для группировки свойств в логические блоки:
+- `Values` — основные значения.
+- `Styles` — параметры внешнего вида.
+- `Technical` — технические и внутренние настройки.
+- `Adaptive` — параметры адаптивности.
+- `Status` — состояния компонента.

package/src/media/functional/ui/wiki-data.vi.mdx

@@ -0,0 +1,114 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/# UI/# Cấu hình dữ liệu Wiki'/>
+
+# Cấu hình dữ liệu Wiki
+
+Để quản lý dữ liệu demo và các đối số Storybook trong một dự án cụ thể (ví dụ: `d1`), tệp `src/wiki/wiki.ts` được sử dụng. Tệp này cho phép bạn bổ sung hoặc ghi đè các cài đặt Wiki toàn cầu được định nghĩa trong gói chính `@dxtmisha/wiki`.
+
+### Tại sao điều này lại cần thiết?
+Tệp `wiki.ts` phục vụ như một điểm cấu hình trung tâm cho:
+- Ghi đè các giá trị mặc định toàn cầu cho các đối số Storybook (ví dụ: văn bản nút hoặc biểu tượng).
+- Cấu hình danh sách lựa chọn (options) cho các tài nguyên cụ thể của dự án.
+- Thêm dữ liệu demo độc nhất không có trong thư viện cơ sở.
+
+### Cách làm việc với tệp
+Trong mỗi gói thành phần (ví dụ: `@dxtmisha/d1`), tệp `src/wiki/wiki.ts` xuất bản một đối tượng kiểu `StorybookArgsToList`. Đối tượng này nhập dữ liệu `wiki` cơ sở và sửa đổi chúng khi cần thiết.
+
+```typescript
+import { StorybookControl, StorybookCategory, type StorybookArgsToList } from '@dxtmisha/wiki'
+import { wiki } from '@dxtmisha/wiki/media'
+
+export const wikiD1: StorybookArgsToList = {
+  // 1. Kế thừa: Ghi đè đối số hiện có 'image.value'
+  'image.value': {
+    ...wiki['image.value'],
+    options: {
+      ...wiki['image.value']?.options,
+      value: 'mail-01'
+    }
+  },
+
+  // 2. Tham số mới: Tạo một thuộc tính hoàn toàn mới
+  'my.new.parameter': {
+    type: StorybookControl.text,
+    options: {
+      category: StorybookCategory.technical,
+      description: 'Mô tả của một tham số hoàn toàn mới không có trong cơ sở',
+      value: 'Giá trị mặc định'
+    }
+  }
+}
+```
+
+
+
+## Nguyên tắc đặt tên khóa
+
+Việc lựa chọn tên khóa trong đối tượng `wiki` xác định phạm vi áp dụng của các cài đặt:
+
+#### Thuộc tính toàn cầu
+Nếu khóa chỉ bao gồm tên thuộc tính (ví dụ: `value`, `size`, `text`), các cài đặt được coi là **toàn cầu** (global). Chúng được tự động áp dụng cho tất cả các thành phần trong hệ thống có thuộc tính đó. Điều này hữu ích để xác định các mô tả hoặc kiểu điều khiển đồng nhất cho toàn bộ thư viện.
+
+#### Thuộc tính cụ thể
+Nếu khóa chứa dấu chấm, nó được hiểu là `[TênThànhPhần].[TênThuộcTính]` (ví dụ: `button.size`, `input.value`).
+- Các cài đặt **chỉ được áp dụng cho thành phần được chỉ định**.
+- Các giá trị này được ưu tiên hơn các cài đặt toàn cầu.
+- Cho phép xác định hành vi hoặc giá trị mặc định duy nhất cho một phần tử cụ thể mà không ảnh hưởng đến các phần tử khác.
+
+## Cấu trúc kiểu dữ liệu
+
+Để cấu hình chính xác tệp `wiki.ts`, điều quan trọng là phải hiểu cấu trúc của các kiểu dữ liệu được sử dụng. Dưới đây là mô tả chi tiết về kiểu `StorybookArgsToList` chính và các thành phần của nó.
+
+### `StorybookArgsToList`
+
+Đây là một kiểu bản ghi (`Record`) được sử dụng để cấu hình các đối số.
+
+- **Khóa (Key)**: Tên đối số (chuỗi).
+- **Giá trị (Value)**: Một đối tượng kiểu `StorybookArgsToItem`.
+
+---
+
+### `StorybookArgsToItem`
+
+Mô tả cấu hình của một điều khiển Storybook cụ thể.
+
+- `type: StorybookControl` — xác định kiểu giao diện để điều khiển giá trị (trường văn bản, hộp kiểm, v.v.).
+- `options: StorybookArgsToOptionsByType` — một đối tượng cho các cài đặt hành vi và hiển thị nâng cao.
+- `isDemo?: boolean` — chỉ ra rằng tham số này chỉ dành cho mục đích demo.
+- `demo?: any` — dữ liệu demo sẽ được thay thế trong các ví dụ.
+- `hide?: boolean` — cho phép ẩn tham số khỏi bảng đối số nếu nó thuần túy mang tính kỹ thuật.
+
+---
+
+### `StorybookArgsToOptionsByType`
+
+Một đối tượng để cấu hình siêu dữ liệu và các ràng buộc của đối số.
+
+- `category?: StorybookCategory` — tên danh mục để nhóm trong bảng (sử dụng các giá trị từ enum `StorybookCategory`).
+- `value?: any` — giá trị hiện tại của đối số.
+- `defaultValue?: string | number | boolean` — giá trị sẽ được hiển thị là "mặc định" trong tài liệu.
+- `description?: string | Record<string, string>` — mô tả của thuộc tính. Có thể là một chuỗi hoặc một đối tượng cho các ngôn ngữ khác nhau.
+- `options?: string[] | Record<string, string>` — danh sách các tùy chọn có sẵn để lựa chọn (có liên quan đến các kiểu `select` hoặc `radio`).
+- `min?: number` / `max?: number` — giá trị tối thiểu và tối đa cho các điều khiển số.
+- `order?: number` — chỉ số số để sắp xếp các đối số trong danh sách.
+
+---
+
+### Các Enum
+
+#### `StorybookControl`
+Xác định kiểu hiển thị của điều khiển:
+- `text` — trường văn bản.
+- `boolean` — hộp kiểm (true/false).
+- `number` — nhập số.
+- `select` — danh sách thả xuống (yêu cầu điền `options`).
+- `object` — trình chỉnh sửa cho các đối tượng JSON.
+
+#### `StorybookCategory`
+Được sử dụng để nhóm các thuộc tính vào các khối logic:
+- `Values` — các giá trị chính.
+- `Styles` — các tham số ngoại hình.
+- `Technical` — các cài đặt kỹ thuật và nội bộ.
+- `Adaptive` — các tham số về khả năng đáp ứng.
+- `Status` — các trạng thái của thành phần.