dxd-style-code 0.1.11 → 0.1.13

package/src/components/atoms/DXProgress/DXProgress.stories.js

@@ -3,7 +3,82 @@ import DXProgress from './DXProgress.vue';
 export default {
   title: 'Atoms/DXProgress',
   component: DXProgress,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXProgress
+
+Компонент прогресс-бара для отображения прогресса выполнения задачи с поддержкой различных размеров, цветов и режимов отображения.
+
+## Назначение
+
+DXProgress предоставляет стандартизированный способ отображения прогресса выполнения задачи.
+Компонент поддерживает различные размеры, цвета, анимации, полосатый фон и различные варианты
+отображения значения.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg)
+- \`useVariantProgress\` composable - для цветовых вариантов
+- \`useAnimation\` composable - для анимаций
+
+### Используется в
+- Загрузка файлов
+- Процесс выполнения задач
+- Индикаторы прогресса
+- Любые места, требующие отображения прогресса
+
+## Внутренняя логика
+
+### Расчет прогресса
+Прогресс рассчитывается как процент от диапазона:
+\`\`\`
+percentage = ((value - min) / (max - min)) * 100
+\`\`\`
+
+### Размеры
+Поддерживает 4 размера:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+
+### Цвета
+Поддерживает 5 цветовых вариантов:
+- **default** - стандартный цвет (по умолчанию)
+- **success** - зеленый цвет
+- **warning** - желтый цвет
+- **danger** - красный цвет
+- **info** - синий цвет
+
+### Режимы отображения значения
+- **showLabel** - показывать лейбл слева (через slot или prop)
+- **showValue** - показывать значение справа (в процентах)
+- **showInnerValue** - показывать значение внутри бара (только если процент > 10)
+
+### Анимации
+- **animated** - анимация заполнения бара
+- **striped** - полосатый фон для визуального эффекта
+
+## Особенности
+
+### Минимальные и максимальные значения
+Поддерживает настраиваемые \`min\` и \`max\` значения (по умолчанию 0 и 100).
+
+### Доступность
+- Использует \`role="progressbar"\`
+- Правильные ARIA атрибуты (\`aria-valuenow\`, \`aria-valuemin\`, \`aria-valuemax\`)
+
+### Слоты
+- **label** - кастомный лейбл (если нужно)
+- **default** - основной контент (если нужно)
+        `,
+      },
+    },
+  },
   argTypes: {
     value: {
       control: { type: 'range', min: 0, max: 100 },

package/src/components/atoms/DXRadio/DXRadio.stories.js

@@ -4,7 +4,91 @@ import { ref } from 'vue';
 export default {
   title: 'Atoms/DXRadio',
   component: DXRadio,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXRadio
+
+Компонент радиокнопки с поддержкой двух вариантов (нативный и кастомный), различных размеров и цветов.
+
+## Назначение
+
+DXRadio предоставляет стандартизированную радиокнопку для выбора одного значения из группы.
+Компонент поддерживает два варианта оформления (нативный и кастомный), различные размеры, цвета
+и работу в группах радиокнопок.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`useVariantRadio\` composable - для вариантов оформления кастомной радиокнопки
+- \`Transition\` - для анимации точки в кастомном варианте
+
+### Используется в
+- \`DXRadioGroup\` - группы радиокнопок
+- Формы с выбором одного варианта из нескольких
+- Настройки и конфигурация
+- Фильтры с одним выбором
+- Любые места, требующие выбора одного значения из группы
+
+## Внутренняя логика
+
+### Варианты
+- **default** (по умолчанию): Нативный HTML radio с кастомной стилизацией
+- **custom**: Кастомная радиокнопка с точкой и настраиваемыми цветами
+
+### Работа в группах
+Радиокнопки работают в группах через общий \`v-model\`:
+- Все радиокнопки в группе имеют одинаковый \`v-model\`
+- Каждая радиокнопка имеет уникальный \`value\`
+- При выборе одной радиокнопки, остальные автоматически снимаются
+
+### Кастомный вариант
+При \`variant="custom"\`:
+- Поддерживает различные цвета: \`slate\`, \`primary\`, \`success\`, \`danger\`, \`warning\`, \`info\`
+- Отображает точку в центре при выборе
+- Анимация появления точки через Transition
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- \`v-model="selected"\` где selected - String, Number или Boolean
+- Каждая радиокнопка имеет свой \`value\` prop
+- При выборе, \`v-model\` получает значение выбранной радиокнопки
+
+### Лейбл
+- Текст лейбла через \`label\` prop
+- Лейбл кликабелен и выбирает радиокнопку
+
+### Состояния
+- **disabled** - отключает радиокнопку
+- **checked** - выбранное состояние (когда \`modelValue === value\`)
+- **unchecked** - невыбранное состояние
+
+### Доступность
+- Нативный radio: полная поддержка нативной доступности
+- Кастомный radio: использует \`role="radio"\`, \`aria-checked\`, \`aria-disabled\`
+- Поддержка клавиатурной навигации (Space для выбора)
+- Автоматическая группировка через name атрибут (для нативного варианта)
+
+### Отличие от Checkbox
+- Radio: выбор одного значения из группы (взаимоисключающий)
+- Checkbox: выбор нескольких значений или boolean переключатель
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: {
       control: 'select',

package/src/components/atoms/DXSkeleton/DXSkeleton.stories.js

@@ -3,7 +3,65 @@ import DXSkeleton from './DXSkeleton.vue';
 export default {
   title: 'Atoms/DXSkeleton',
   component: DXSkeleton,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSkeleton
+
+Компонент скелетона для отображения placeholder контента во время загрузки.
+
+## Назначение
+
+DXSkeleton предоставляет стандартизированный способ отображения placeholder контента
+во время загрузки данных. Компонент использует анимацию пульсации для визуального
+указания на загрузку.
+
+## Архитектура
+
+### Использует
+- CSS анимация \`animate-pulse\` - для эффекта пульсации
+
+### Используется в
+- Карточки товаров при загрузке
+- Списки элементов при загрузке
+- Профили пользователей при загрузке
+- Любые места, требующие placeholder во время загрузки
+
+## Внутренняя логика
+
+### Визуальное оформление
+- Серый фон (\`bg-slate-200\`)
+- Анимация пульсации (\`animate-pulse\`)
+- Настраиваемые размеры через \`width\` и \`height\` props
+- Настраиваемое скругление через \`rounded\` prop
+
+### Размеры
+Размеры настраиваются через props:
+- \`width\` - ширина (по умолчанию "100%")
+- \`height\` - высота (по умолчанию "1rem")
+- \`rounded\` - скругление (по умолчанию "rounded-md")
+
+## Особенности
+
+### Гибкость
+Компонент полностью настраивается через props и CSS классы:
+- Можно задать любые размеры
+- Можно задать любую форму (круг, квадрат, прямоугольник)
+- Можно комбинировать несколько скелетонов для создания сложных placeholder
+
+### Примеры использования
+- **Текст**: \`<DXSkeleton class="h-4 w-48" />\`
+- **Круг**: \`<DXSkeleton class="h-12 w-12 rounded-full" />\`
+- **Карточка**: Комбинация нескольких скелетонов
+
+### Кастомные классы
+Поддерживает \`class\` prop для добавления дополнительных CSS классов.
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/atoms/DXSlider/DXSlider.stories.js

@@ -17,6 +17,95 @@ export default {
   title: 'Atoms/DXSlider',
   component: DXSlider,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXSlider
+
+Компонент слайдера для выбора числового значения в диапазоне с поддержкой засечек, иконок и различных вариантов оформления.
+
+## Назначение
+
+DXSlider предоставляет интерактивный способ выбора числового значения в заданном диапазоне.
+Компонент поддерживает засечки (ticks), иконки, подписи, различные размеры и цвета для
+создания интуитивных интерфейсов настройки.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок на засечках
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`useVariantSlider\` composable - для цветовых вариантов
+- \`useSpacing\` composable - для отступов
+
+### Используется в
+- Настройки громкости, яркости
+- Фильтры и диапазоны значений
+- Настройки параметров
+- Любые места, требующие выбора числового значения
+
+## Внутренняя логика
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+### Цвета
+Поддерживает 6 цветовых вариантов:
+- **slate** - нейтральный серый (по умолчанию)
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **danger** - красный цвет
+- **warning** - желтый цвет
+- **info** - синий цвет
+
+### Засечки (Ticks)
+При \`ticks={true}\`:
+- Отображаются визуальные засечки на линии слайдера
+- Количество засечек настраивается через \`tickCount\` (по умолчанию 5)
+- Можно добавить подписи через \`showTickLabels={true}\`
+- Можно добавить иконки через массив \`tickIcons\`
+
+### Иконки на засечках
+Можно указать массив иконок для засечек:
+- Каждая иконка соответствует позиции засечки
+- Активная иконка (ближайшая к текущему значению) может анимироваться
+- Анимация настраивается через \`tickIconAnimation\`
+
+### Отображение значения
+- \`showValue={true}\` - показывает текущее значение справа от лейбла
+- Значение форматируется с единицей измерения (если указан \`unit\`)
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для Number значений.
+
+### Диапазон значений
+- \`min\` - минимальное значение (по умолчанию 0)
+- \`max\` - максимальное значение (по умолчанию 100)
+- \`step\` - шаг изменения (по умолчанию 1)
+
+### Единица измерения
+Можно указать единицу измерения через \`unit\` prop (например, "%", "px", "°C").
+
+### Состояния
+- **disabled** - отключает слайдер
+- **active** - активное состояние (для иконок на засечках)
+
+### Доступность
+- Использует нативный \`<input type="range">\` для полной доступности
+- Поддержка клавиатурной навигации
+- Правильные ARIA атрибуты
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: 'select',

package/src/components/atoms/DXSpacer/DXSpacer.stories.js

@@ -3,7 +3,7 @@ import DXSpacer from './DXSpacer.vue';
 export default {
   title: 'Atoms/DXSpacer',
   component: DXSpacer,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:layout'],
   parameters: {
     docs: {
       description: {

package/src/components/atoms/DXStack/DXStack.stories.js

@@ -3,7 +3,7 @@ import DXStack from './DXStack.vue';
 export default {
   title: 'Atoms/DXStack',
   component: DXStack,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:layout'],
   parameters: {
     docs: {
       description: {

package/src/components/atoms/DXStack/DXStack.vue

@@ -1,5 +1,6 @@
 <template>
-  <div 
+  <component
+    :is="tag"
     :class="stackClasses" 
     data-component="DXStack" 
     :data-direction="direction"
@@ -8,7 +9,7 @@
     :data-justify="justify"
   >
     <slot />
-  </div>
+  </component>
 </template>
 
 <script setup>
@@ -17,6 +18,8 @@ import { useSize } from "../../../composables/useSize";
 import { useClassComposition } from "../../../composables/useClassComposition";
 
 const props = defineProps({
+  /** HTML тег */
+  tag: { type: String, default: "div" },
   /** Направление: vertical | horizontal */
   direction: { type: String, default: "vertical" },
   /** Отступ между элементами: none | xs | sm | md | lg | xl | 2xl */

package/src/components/atoms/DXTags/DXTags.stories.js

@@ -17,6 +17,83 @@ export default {
   title: "Atoms/DXTags",
   component: DXTags,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTags
+
+Компонент для отображения группы тегов с поддержкой иконок, цветов и возможности удаления.
+
+## Назначение
+
+DXTags предоставляет стандартизированный способ отображения группы тегов (меток, категорий).
+Компонент поддерживает иконки, различные цвета, анимации и возможность удаления отдельных тегов.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок в тегах и кнопки удаления
+- \`useSize\` composable - для размеров
+- \`useVariantTag\` composable - для цветовых вариантов
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Категории и метки
+- Фильтры
+- Теги в формах
+- Любые места, требующие отображения группы тегов
+
+## Внутренняя логика
+
+### Структура тегов
+Теги могут быть переданы как:
+- **Строки**: \`["Vue.js", "React"]\` - простые теги
+- **Объекты**: \`[{ label: "Vue.js", icon: Icon, color: "primary" }]\` - теги с дополнительными свойствами
+
+### Варианты размера
+- **default** (по умолчанию): Стандартный размер
+- **large**: Увеличенный размер
+
+### Цвета
+Поддерживает 6 цветовых вариантов:
+- **default** (по умолчанию) - нейтральный серый
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **warning** - желтый цвет
+- **danger** - красный цвет
+- **info** - синий цвет
+
+Цвет можно задать глобально через \`color\` prop или индивидуально для каждого тега.
+
+### Иконки
+- Можно добавить иконку слева от текста через \`icon\` в объекте тега
+- Размер иконки автоматически адаптируется к размеру тега
+- Поддерживает анимации иконок через \`iconAnimation\`
+
+### Удаление тегов
+- При \`closable={true}\` все теги становятся удаляемыми
+- Можно задать индивидуально для каждого тега через \`closable\` в объекте
+- При удалении эмитится событие \`remove\` с данными тега
+
+## Особенности
+
+### События
+- \`@remove\` - эмитится при удалении тега, передает данные тега и индекс
+
+### Анимации иконок
+Поддерживает те же анимации, что и DXIcon:
+- **none** - без анимации
+- **wiggle** - тряска
+- **scale** - масштабирование
+- **rotate** - вращение
+
+### Групповое удаление
+При \`closable={true}\` все теги получают кнопку удаления с иконкой XMarkIcon.
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/atoms/DXText/DXText.stories.js

@@ -3,7 +3,89 @@ import DXText from './DXText.vue';
 export default {
   title: 'Atoms/DXText',
   component: DXText,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:typography'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXText
+
+Компонент текста с поддержкой различных размеров, весов, цветов и выравнивания.
+
+## Назначение
+
+DXText предоставляет стандартизированный способ отображения текста с настраиваемыми параметрами
+типографики. Компонент поддерживает различные размеры, веса шрифта, цвета и выравнивание текста.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров текста (xs, sm, md, lg, xl)
+- Динамический рендеринг HTML тегов - для семантической правильности
+
+### Используется в
+- Параграфы и описания
+- Текстовые блоки в карточках
+- Вспомогательный текст
+- Любые места, требующие отображения текста
+
+## Внутренняя логика
+
+### HTML теги
+Компонент может рендериться как различные HTML теги через \`tag\` prop:
+- \`p\` (по умолчанию) - параграф
+- \`span\` - инлайн текст
+- \`div\` - блочный контейнер
+- Другие текстовые теги
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький текст
+- **sm** - маленький текст
+- **md** - средний текст (по умолчанию)
+- **lg** - большой текст
+- **xl** - очень большой текст
+
+### Веса шрифта
+Поддерживает 4 веса:
+- **normal** - обычный вес
+- **medium** - средний вес
+- **semibold** - полужирный
+- **bold** - жирный
+
+### Цвета
+Поддерживает 6 цветовых вариантов:
+- **default** - цвет по умолчанию (text-slate-900)
+- **muted** - приглушенный цвет (text-slate-600)
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **warning** - желтый цвет
+- **danger** - красный цвет
+
+### Выравнивание
+Поддерживает 4 варианта выравнивания:
+- **left** (по умолчанию) - по левому краю
+- **center** - по центру
+- **right** - по правому краю
+- **justify** - по ширине
+
+## Особенности
+
+### Обрезка текста
+При \`truncate={true}\`:
+- Текст обрезается с многоточием при переполнении
+- Используется \`text-overflow: ellipsis\`
+- Требует \`overflow: hidden\` и \`white-space: nowrap\`
+
+### Семантика
+Компонент использует семантически правильные HTML теги для лучшей доступности и SEO.
+
+### Кастомные классы
+Поддерживает \`class\` prop для добавления дополнительных CSS классов.
+        `,
+      },
+    },
+  },
   argTypes: {
     size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     weight: { control: { type: 'select' }, options: ['normal', 'medium', 'semibold', 'bold'] },

package/src/components/atoms/DXToast/DXToast.stories.js

@@ -3,7 +3,70 @@ import DXToast from "./DXToast.vue";
 export default {
   title: "Atoms/DXToast",
   component: DXToast,
-  tags: ["autodocs"],
+  tags: ["autodocs", "category:feedback"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXToast
+
+Компонент уведомления (toast) с поддержкой различных вариантов и иконок.
+
+## Назначение
+
+DXToast предоставляет стандартизированный способ отображения временных уведомлений.
+Компонент поддерживает различные варианты (info, success, warning, danger) и автоматически
+отображает соответствующие иконки.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок вариантов
+- \`useVariantConfig\` composable - для конфигурации вариантов
+
+### Используется в
+- Уведомления об успешных операциях
+- Сообщения об ошибках
+- Предупреждения
+- Информационные сообщения
+- Любые места, требующие временных уведомлений
+
+## Внутренняя логика
+
+### Варианты
+Поддерживает 4 варианта:
+- **info** (по умолчанию) - информационное сообщение (синий цвет)
+- **success** - успешная операция (зеленый цвет)
+- **warning** - предупреждение (желтый цвет)
+- **danger** - ошибка (красный цвет)
+
+### Иконки
+Каждый вариант автоматически получает соответствующую иконку:
+- info → InformationCircleIcon
+- success → CheckCircleIcon
+- warning → ExclamationTriangleIcon
+- danger → XCircleIcon
+
+Иконки можно скрыть через \`showIcon={false}\`.
+
+### Визуальное оформление
+- Скругленные углы (\`rounded-2xl\`)
+- Рамка для визуального выделения
+- Padding для контента
+- Иконка слева, текст справа
+
+## Особенности
+
+### Слоты
+- **default** - основной контент (текст сообщения)
+
+### Использование
+Обычно используется в составе toast-менеджера для отображения уведомлений в определенной
+области экрана (обычно сверху или снизу).
+        `,
+      },
+    },
+  },
 };
 
 export const Success = {