dxd-style-code 0.1.11 → 0.1.13

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

@@ -4,7 +4,90 @@ import { ref } from "vue";
 export default {
   title: "Atoms/DXToggle",
   component: DXToggle,
-  tags: ["autodocs"],
+  tags: ["autodocs", "category:form"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXToggle
+
+Компонент переключателя (toggle switch) с поддержкой различных размеров, цветов и анимаций.
+
+## Назначение
+
+DXToggle предоставляет стандартизированный переключатель для boolean значений (включено/выключено).
+Компонент поддерживает различные размеры, цвета, анимации и может использоваться с лейблом или без.
+
+## Архитектура
+
+### Использует
+- \`useSize\` composable - для унификации размеров (xs, sm, md, lg, xl)
+- \`Transition\` - для анимации переключения
+
+### Используется в
+- Настройки приложения
+- Включение/выключение функций
+- Переключатели уведомлений
+- Фильтры и опции
+- Любые места, требующие boolean переключателя
+
+## Внутренняя логика
+
+### Работа
+- Переключатель работает как boolean: \`true\` (включено) или \`false\` (выключено)
+- При клике значение инвертируется
+- Визуально: слева - выключено, справа - включено
+
+### Цвета
+Поддерживает различные цвета для активного состояния:
+- **slate** - нейтральный серый
+- **primary** - основной цвет
+- **success** - зеленый
+- **danger** - красный
+- **warning** - желтый
+- **info** - синий
+
+### Размеры
+Поддерживает 5 размеров:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+### Анимации
+- **none** - без анимации
+- **smooth** - плавная анимация переключения
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для Boolean значений:
+- \`v-model="enabled"\` где enabled - Boolean
+
+### Лейбл
+- Текст лейбла через \`label\` prop
+- Лейбл отображается справа от переключателя
+- Лейбл кликабелен и переключает состояние
+
+### Состояния
+- **disabled** - отключает переключатель
+- **enabled** - включенное состояние (\`modelValue === true\`)
+- **disabled** - выключенное состояние (\`modelValue === false\`)
+
+### Доступность
+- Использует нативный checkbox под капотом для доступности
+- Поддержка клавиатурной навигации
+- Правильные ARIA атрибуты
+
+### Визуальное оформление
+- Переключатель имеет форму "ползунка" с круглой кнопкой
+- Активное состояние: кнопка справа, цветной фон
+- Неактивное состояние: кнопка слева, серый фон
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: { type: "select" },

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

@@ -27,7 +27,84 @@ import {
 export default {
   title: "Atoms/DXToggleButton",
   component: DXToggleButton,
-  tags: ["autodocs"],
+  tags: ["autodocs", "category:form"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXToggleButton
+
+Компонент кнопки-переключателя с двумя состояниями и различными иконками/вариантами для каждого состояния.
+
+## Назначение
+
+DXToggleButton предоставляет кнопку, которая переключается между двумя состояниями (активным и неактивным)
+с возможностью задать различные иконки, текст и варианты оформления для каждого состояния.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконок
+- \`DXButton\` - как базовая кнопка (через стили)
+- \`useSize\` composable - для размеров
+- \`useVariantButton\` composable - для вариантов оформления
+
+### Используется в
+- Избранное (лайки)
+- Закладки
+- Включение/выключение функций
+- Переключатели режимов
+- Любые места, требующие переключатель с двумя состояниями
+
+## Внутренняя логика
+
+### Состояния
+- **active** (\`modelValue === true\`): Использует \`activeIcon\`, \`activeLabel\`, \`activeVariant\`
+- **inactive** (\`modelValue === false\`): Использует \`inactiveIcon\`, \`inactiveLabel\`, \`inactiveVariant\`
+
+### Иконки
+- \`activeIcon\` - иконка для активного состояния (обязательно)
+- \`inactiveIcon\` - иконка для неактивного состояния (обязательно)
+- Обычно используются outline/solid варианты одной иконки
+
+### Текст
+- \`activeLabel\` - текст для активного состояния (опционально)
+- \`inactiveLabel\` - текст для неактивного состояния (опционально)
+
+### Варианты оформления
+- \`activeVariant\` - вариант для активного состояния (по умолчанию "primary")
+- \`inactiveVariant\` - вариант для неактивного состояния (по умолчанию "ghost")
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для Boolean значений.
+
+### Размеры
+Поддерживает 3 размера:
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+
+Размер иконки автоматически адаптируется к размеру кнопки.
+
+### Анимации иконок
+Поддерживает те же анимации, что и DXIcon:
+- **none** - без анимации
+- **wiggle** - тряска (по умолчанию)
+- **scale** - масштабирование
+- **rotate** - вращение
+
+### События
+- \`@change\` - эмитится при переключении, передает новое значение
+
+### Доступность
+- Использует \`aria-pressed\` для указания состояния
+- Поддерживает \`aria-label\` для описания действия
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: "select",

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

@@ -3,7 +3,104 @@ import DXTooltip from './DXTooltip.vue';
 export default {
   title: 'Atoms/DXTooltip',
   component: DXTooltip,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXTooltip
+
+Компонент подсказки, появляющейся при наведении или фокусе на элементе.
+
+## Назначение
+
+DXTooltip предоставляет стандартизированный способ отображения дополнительной информации
+при наведении или фокусе на элементе. Компонент поддерживает различные позиции, цвета, размеры
+и анимации появления.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок (если нужно)
+- \`useSize\` composable - для размеров текста
+- \`useVariantTooltip\` composable - для цветовых вариантов
+- \`useTooltipPosition\` composable - для позиционирования
+- \`useAnimationTransition\` composable - для анимаций
+
+### Используется в
+- Подсказки для кнопок и ссылок
+- Дополнительная информация об элементах
+- Пояснения к иконкам
+- Любые места, требующие контекстной помощи
+
+## Внутренняя логика
+
+### Позиции
+Поддерживает 4 позиции:
+- **top** (по умолчанию) - сверху
+- **bottom** - снизу
+- **left** - слева
+- **right** - справа
+
+### Цвета
+Поддерживает 7 цветовых вариантов:
+- **dark** (по умолчанию) - темный фон
+- **light** - светлый фон
+- **primary** - основной цвет
+- **success** - зеленый цвет
+- **danger** - красный цвет
+- **warning** - желтый цвет
+- **info** - синий цвет
+
+### Размеры
+Поддерживает 5 размеров текста:
+- **xs** - очень маленький
+- **sm** - маленький
+- **md** - средний (по умолчанию)
+- **lg** - большой
+- **xl** - очень большой
+
+### Анимации
+Поддерживает 7 типов анимаций:
+- **fade** - плавное появление
+- **fade-scale** - появление с масштабированием
+- **slide-up** - выезд снизу
+- **slide-down** - выезд сверху
+- **slide-left** - выезд справа
+- **slide-right** - выезд слева
+- **tooltip-custom** (по умолчанию) - кастомная анимация
+
+### Задержка
+Поддерживает настраиваемую задержку перед показом (по умолчанию 100ms).
+
+## Особенности
+
+### Триггеры
+Tooltip появляется при:
+- Наведении мыши (\`mouseenter\`)
+- Фокусе на элементе (\`focus\`)
+
+Исчезает при:
+- Уходе мыши (\`mouseleave\`)
+- Потере фокуса (\`blur\`)
+
+### Стрелка
+Автоматически добавляется стрелка, указывающая на элемент, в зависимости от позиции.
+
+### Максимальная ширина
+Поддерживает настраиваемую максимальную ширину (по умолчанию 200px).
+
+### Слоты
+- **default** - элемент, на который наводится курсор
+- **content** - кастомный контент tooltip (если нужно)
+
+### Доступность
+- Использует \`role="tooltip"\`
+- Правильные ARIA атрибуты
+        `,
+      },
+    },
+  },
   argTypes: {
     position: { control: { type: 'select' }, options: ['top', 'bottom', 'left', 'right'] },
     color: { control: { type: 'select' }, options: ['dark', 'light', 'primary', 'success', 'danger', 'warning', 'info'] },

package/src/components/atoms/index.js

@@ -1,4 +1,5 @@
 // Atom components - basic building blocks
+export { default as DX } from './DX';
 export { default as DXAvatar } from './DXAvatar';
 export { default as DXBackdrop } from './DXBackdrop';
 export { default as DXBadge } from './DXBadge';
@@ -17,11 +18,13 @@ export { default as DXGrid } from './DXGrid';
 export { default as DXHeading } from './DXHeading';
 export { default as DXIcon } from './DXIcon';
 export { default as DXIconWrapper } from './DXIconWrapper';
+export { default as DXImage } from './DXImage';
 export { default as DXInputAddon } from './DXInputAddon';
 export { default as DXLabel } from './DXLabel';
 export { default as DXLink } from './DXLink';
 export { default as DXList } from './DXList';
 export { default as DXLoader } from './DXLoader';
+export { default as DXNav } from './DXNav';
 export { default as DXProgress } from './DXProgress';
 export { default as DXRadio } from './DXRadio';
 export { default as DXSkeleton } from './DXSkeleton';