dxd-style-code 0.1.11 → 0.1.13

package/src/components/molecules/DXButtonGroup/DXButtonGroup.stories.js

@@ -1,24 +1,211 @@
 import DXButtonGroup from './DXButtonGroup.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
+import DXFlex from '../../atoms/DXFlex/DXFlex.vue';
+import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
 import { ref } from 'vue';
+import { Squares2X2Icon, ListBulletIcon, TableCellsIcon, SquaresPlusIcon } from '@heroicons/vue/24/outline';
 
 export default {
   title: 'Molecules/DXButtonGroup',
   component: DXButtonGroup,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+
+Группа связанных кнопок для выбора одного или нескольких значений с поддержкой v-model.
+
+## Назначение
+
+DXButtonGroup предоставляет способ группировки кнопок для создания интерфейсов выбора,
+аналогичных segmented controls или toggle groups. Компонент автоматически управляет
+состоянием выбора, визуальным оформлением и синхронизацией размеров кнопок.
+
+## Архитектура
+
+### Использует
+- \`DXButton\` - кнопки в группе (автоматически адаптируются при использовании внутри группы)
+- \`provide/inject\` - для передачи контекста группы к дочерним компонентам
+- Система регистрации компонентов - для отслеживания позиции кнопок и правильного применения стилей
+
+### Используется в
+- Фильтры и сортировка
+- Переключение режимов отображения
+- Выбор опций форматирования
+- Навигационные элементы
+- Настройки с переключателями
+
+## Внутренняя логика
+
+### Режимы выбора
+- **single** (по умолчанию): Выбор одного значения, \`modelValue\` - String или Number
+- **multiple**: Множественный выбор, \`modelValue\` - Array
+
+### Система регистрации компонентов
+Компонент отслеживает порядок регистрации дочерних \`DXButton\` компонентов для:
+- Правильного применения border-radius (первая/последняя/средние кнопки)
+- Корректного отображения разделителей между кнопками
+- Синхронизации размеров всех кнопок в группе
+
+### Интеграция с DXButton
+При использовании \`DXButton\` внутри группы:
+- Кнопка автоматически регистрируется в группе
+- Размер кнопки синхронизируется с размером группы
+- Состояние disabled синхронизируется с группой
+- Применяется правильный border-radius в зависимости от позиции
+- Автоматически применяется состояние selected (bg-slate-900 text-white)
+- Убираются индивидуальные границы (группа обрабатывает их через divide-x)
+
+## Особенности
+
+### Размеры
+Поддерживает три размера: \`sm\` (h-8), \`md\` (h-10), \`lg\` (h-12).
+Размер применяется ко всем кнопкам в группе автоматически.
+
+### Label
+Label отображается над группой кнопок, аналогично другим компонентам форм (DXInputGroup).
+
+### Состояния
+- **disabled**: Отключает всю группу и все кнопки внутри
+- **selected**: Визуально выделяет выбранные кнопки темным фоном
+
+### Разделители
+Между кнопками автоматически отображаются вертикальные разделители (border-left),
+кроме первой кнопки.
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\`:
+- Для single mode: значение - String или Number
+- Для multiple mode: значение - Array
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {
   render: () => ({
-    components: { DXButtonGroup },
+    components: { DXButtonGroup, DXButton },
+    setup() {
+      const selected = ref('left');
+      return { selected };
+    },
+    template: `
+      <DXButtonGroup v-model="selected" label="Select alignment">
+        <DXButton value="left">Left</DXButton>
+        <DXButton value="center">Center</DXButton>
+        <DXButton value="right">Right</DXButton>
+      </DXButtonGroup>
+    `,
+  }),
+};
+
+export const Multiple = {
+  render: () => ({
+    components: { DXButtonGroup, DXButton },
+    setup() {
+      const selected = ref(['bold', 'italic']);
+      return { selected };
+    },
+    template: `
+      <DXButtonGroup v-model="selected" multiple label="Text formatting">
+        <DXButton value="bold">Bold</DXButton>
+        <DXButton value="italic">Italic</DXButton>
+        <DXButton value="underline">Underline</DXButton>
+      </DXButtonGroup>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXButtonGroup, DXButton, DXFlex },
+    setup() {
+      const small = ref('left');
+      const medium = ref('left');
+      const large = ref('left');
+      return { small, medium, large };
+    },
+    template: `
+      <DXFlex direction="col" gap="md" align="start">
+        <DXButtonGroup v-model="small" size="sm" label="Small">
+          <DXButton value="left">Left</DXButton>
+          <DXButton value="center">Center</DXButton>
+          <DXButton value="right">Right</DXButton>
+        </DXButtonGroup>
+        
+        <DXButtonGroup v-model="medium" size="md" label="Medium (default)">
+          <DXButton value="left">Left</DXButton>
+          <DXButton value="center">Center</DXButton>
+          <DXButton value="right">Right</DXButton>
+        </DXButtonGroup>
+        
+        <DXButtonGroup v-model="large" size="lg" label="Large">
+          <DXButton value="left">Left</DXButton>
+          <DXButton value="center">Center</DXButton>
+          <DXButton value="right">Right</DXButton>
+        </DXButtonGroup>
+      </DXFlex>
+    `,
+  }),
+};
+
+export const Disabled = {
+  render: () => ({
+    components: { DXButtonGroup, DXButton },
     setup() {
       const selected = ref('left');
       return { selected };
     },
     template: `
-      <DXButtonGroup v-model="selected">
-        <button value="left" class="px-4 py-2 text-sm border border-slate-200 rounded-l-xl" :class="selected === 'left' ? 'bg-slate-900 text-white' : 'bg-white'">Left</button>
-        <button value="center" class="px-4 py-2 text-sm border-y border-slate-200" :class="selected === 'center' ? 'bg-slate-900 text-white' : 'bg-white'">Center</button>
-        <button value="right" class="px-4 py-2 text-sm border border-slate-200 rounded-r-xl" :class="selected === 'right' ? 'bg-slate-900 text-white' : 'bg-white'">Right</button>
+      <DXButtonGroup v-model="selected" disabled label="Disabled group">
+        <DXButton value="left">Left</DXButton>
+        <DXButton value="center">Center</DXButton>
+        <DXButton value="right">Right</DXButton>
+      </DXButtonGroup>
+    `,
+  }),
+};
+
+export const WithIcons = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Пример группы кнопок с иконками. Иконки размещаются внутри DXButton компонентов и автоматически адаптируются к стилю группы.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXButtonGroup, DXButton, DXIcon },
+    setup() {
+      const selected = ref('grid');
+      return { 
+        selected,
+        Squares2X2Icon,
+        ListBulletIcon,
+        TableCellsIcon,
+        SquaresPlusIcon,
+      };
+    },
+    template: `
+      <DXButtonGroup v-model="selected" label="View mode">
+        <DXButton value="grid">
+          <DXIcon :icon="Squares2X2Icon" size="sm" />
+          Grid
+        </DXButton>
+        <DXButton value="list">
+          <DXIcon :icon="ListBulletIcon" size="sm" />
+          List
+        </DXButton>
+        <DXButton value="table">
+          <DXIcon :icon="TableCellsIcon" size="sm" />
+          Table
+        </DXButton>
+        <DXButton value="cards">
+          <DXIcon :icon="SquaresPlusIcon" size="sm" />
+          Cards
+        </DXButton>
       </DXButtonGroup>
     `,
   }),

package/src/components/molecules/DXButtonGroup/DXButtonGroup.vue

@@ -1,12 +1,12 @@
 <template>
   <div 
-    class="inline-flex" 
+    class="inline-flex flex-col" 
     data-component="DXButtonGroup"
     :data-size="size"
     :data-multiple="multiple"
     :data-disabled="disabled"
   >
-    <p v-if="label" class="text-sm font-medium text-slate-700 mb-2">{{ label }}</p>
+    <label v-if="label" class="block text-sm font-medium text-slate-700 mb-1">{{ label }}</label>
     <div
       class="inline-flex border border-slate-200 rounded-xl overflow-hidden divide-x divide-slate-200"
       :class="sizeClass"
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { provide, computed } from "vue";
+import { provide, computed, ref } from "vue";
 
 const props = defineProps({
   /** Значение (v-model) */
@@ -42,6 +42,39 @@ const SIZE_CLASSES = {
 
 const sizeClass = computed(() => SIZE_CLASSES[props.size] || SIZE_CLASSES.md);
 
+// Система регистрации компонентов для отслеживания структуры
+const components = ref([]);
+let componentCounter = 0;
+
+const registerComponent = (type, id) => {
+  if (!components.value.find(c => c.id === id)) {
+    // Используем счетчик для гарантии правильного порядка
+    const order = componentCounter++;
+    components.value.push({ type, id, order });
+    // Сортируем по порядку регистрации
+    components.value.sort((a, b) => a.order - b.order);
+  }
+};
+
+const unregisterComponent = (id) => {
+  components.value = components.value.filter(c => c.id !== id);
+};
+
+const getComponentPosition = (id) => {
+  const currentIndex = components.value.findIndex(c => c.id === id);
+  if (currentIndex === -1) {
+    return { isFirst: false, isLast: false, isMiddle: false };
+  }
+  
+  const totalComponents = components.value.length;
+  
+  return {
+    isFirst: currentIndex === 0,
+    isLast: currentIndex === totalComponents - 1,
+    isMiddle: currentIndex > 0 && currentIndex < totalComponents - 1,
+  };
+};
+
 const handleSelect = (value) => {
   if (props.disabled) return;
   if (props.multiple) {
@@ -73,6 +106,9 @@ provide("buttonGroup", {
   disabled: props.disabled,
   handleSelect,
   isSelected,
+  registerComponent,
+  unregisterComponent,
+  getComponentPosition,
 });
 </script>
 

package/src/components/molecules/DXCloseButton/DXCloseButton.stories.js

@@ -3,7 +3,70 @@ import DXCloseButton from './DXCloseButton.vue';
 export default {
   title: 'Molecules/DXCloseButton',
   component: DXCloseButton,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXCloseButton
+
+Компонент кнопки закрытия с поддержкой различных размеров и вариантов оформления.
+
+## Назначение
+
+DXCloseButton предоставляет стандартизированную кнопку закрытия для модальных окон, алертов,
+панелей и других компонентов, требующих возможность закрытия. Компонент поддерживает различные
+размеры и варианты оформления для адаптации под различные контексты использования.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для отображения иконки закрытия (XMarkIcon)
+- \`useSize\` composable - для унификации размеров (sm, md, lg)
+
+### Используется в
+- \`DXModal\` - кнопка закрытия модальных окон
+- \`DXAlert\` - кнопка закрытия уведомлений
+- \`DXSidebar\` - кнопка закрытия боковой панели
+- Панели и панели настроек
+- Любые компоненты, требующие кнопку закрытия
+
+## Внутренняя логика
+
+### Варианты оформления
+- **default** (по умолчанию): Стандартная кнопка для светлого фона
+- **light**: Кнопка для темного фона (светлая иконка)
+- **danger**: Кнопка с красным цветом для критических действий
+
+### Размеры
+Поддерживает три размера:
+- **sm** - маленький размер
+- **md** - средний размер (по умолчанию)
+- **lg** - большой размер
+
+### Иконка
+Всегда использует \`XMarkIcon\` из Heroicons для единообразия.
+
+## Особенности
+
+### События
+- Событие \`click\` при клике на кнопку
+- Обычно обрабатывается родительским компонентом для закрытия
+
+### Доступность
+- Использует \`aria-label\` для описания действия
+- Поддержка клавиатурной навигации
+- Правильные семантические атрибуты
+
+### Визуальное оформление
+- Круглая форма кнопки
+- Иконка по центру
+- Hover эффекты для интерактивности
+- Transition для плавных переходов
+        `,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: 'select',

package/src/components/molecules/DXComboBox/DXComboBox.stories.js

@@ -5,6 +5,72 @@ export default {
   title: 'Molecules/DXComboBox',
   component: DXComboBox,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXComboBox
+
+Компонент комбобокса с поиском и возможностью выбора из списка или ввода кастомного значения.
+
+## Назначение
+
+DXComboBox предоставляет гибридный компонент, объединяющий возможности input и select.
+Компонент поддерживает поиск по опциям, выбор из списка и возможность ввода кастомного значения.
+
+## Архитектура
+
+### Использует
+- Нативный input - для ввода текста
+- Динамический dropdown - для отображения опций
+
+### Используется в
+- Выбор с поиском
+- Ввод с автодополнением
+- Кастомные значения
+- Любые места, требующие гибкий выбор/ввод
+
+## Внутренняя логика
+
+### Поиск
+При \`filterable={true}\` (по умолчанию):
+- Опции фильтруются по введенному тексту
+- Поиск нечувствителен к регистру
+- Фильтрация происходит в реальном времени
+
+### Кастомные значения
+При \`allowCustom={true}\`:
+- Можно ввести значение, которого нет в списке
+- При нажатии Enter создается новое значение
+- Отображается подсказка "Нажмите Enter для ..."
+
+### Клавиатурная навигация
+- **ArrowDown/ArrowUp** - навигация по опциям
+- **Enter** - выбор выделенной опции или создание кастомного значения
+- **Escape** - закрытие dropdown
+
+## Особенности
+
+### v-model
+Полностью поддерживает двустороннее связывание через \`v-model\` для String или Number значений.
+
+### Структура опций
+Опции передаются через массив объектов:
+\`\`\`
+[{ value: 'value', label: 'Label', icon?: Icon }]
+\`\`\`
+
+### Иконки
+Каждая опция может иметь иконку через \`icon\` свойство.
+
+### Визуальная индикация
+- Выбранная опция отмечена галочкой
+- Выделенная опция имеет серый фон
+- Chevron поворачивается при открытии dropdown
+        `,
+      },
+    },
+  },
 };
 
 const countries = [

package/src/components/molecules/DXCopyField/DXCopyField.stories.js

@@ -10,15 +10,99 @@ import {
 export default {
   title: 'Molecules/DXCopyField',
   component: DXCopyField,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:form'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXCopyField
+
+Компонент для отображения значения с возможностью копирования в буфер обмена.
+
+## Назначение
+
+DXCopyField предоставляет удобный способ отображения значений (ссылок, кодов, API ключей и т.д.)
+с одной кнопкой для копирования в буфер обмена. Компонент автоматически показывает состояние успеха
+после копирования и поддерживает различные анимации иконок.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконок копирования и успеха
+- \`useSize\` composable - для унификации размеров с другими компонентами формы
+
+### Используется в
+- Отображение API ключей и токенов
+- Ссылки для шаринга
+- Команды установки и коды
+- Любые значения, которые нужно быстро скопировать
+
+## Внутренняя логика
+
+### Копирование в буфер обмена
+Компонент использует \`navigator.clipboard.writeText()\` для копирования значения.
+После успешного копирования показывается состояние успеха с зеленой рамкой и иконкой галочки.
+
+### Анимации иконок
+Поддерживает четыре типа анимаций:
+- \`none\` - без анимации
+- \`wiggle\` - покачивание
+- \`scale\` - масштабирование (по умолчанию)
+- \`rotate\` - вращение
+
+### Размерная сетка
+Компонент поддерживает три размера, соответствующие другим элементам формы:
+- \`sm\` - компактный (h-8, text-xs, px-3 py-1.5)
+- \`md\` - стандартный (h-10, text-sm, px-4 py-2.5) - по умолчанию
+- \`lg\` - крупный (h-12, text-base, px-5 py-3)
+
+Размеры автоматически синхронизируются:
+- Padding контейнера соответствует размерам input
+- Размер текста соответствует размерам текста
+- Размер кнопки соответствует размерам buttonIcon
+- Размер иконки адаптируется под размер компонента
+
+## Особенности
+
+### Скругления
+- Контейнер: \`rounded-xl\` (12px) - соответствует стандартам дизайн-системы
+- Кнопка: \`rounded-xl\` (12px) - соответствует стандартам дизайн-системы
+
+### Состояния
+- **default**: Обычное состояние с иконкой копирования
+- **copied**: Состояние успеха с зеленой рамкой и иконкой галочки
+- Автоматическое возвращение к default через \`successDuration\` (по умолчанию 2000мс)
+
+### События
+- \`@copied\` - эмитится при успешном копировании, передает скопированное значение
+
+## Ограничения
+
+- Требует поддержки \`navigator.clipboard\` API (современные браузеры)
+- При ошибке копирования выводит сообщение в консоль
+        `,
+      },
+    },
+  },
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Размер компонента',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
+    },
     copyIconAnimation: {
       control: 'select',
       options: ['none', 'wiggle', 'scale', 'rotate'],
+      description: 'Анимация иконки копирования',
     },
     copiedIconAnimation: {
       control: 'select',
       options: ['none', 'wiggle', 'scale', 'rotate'],
+      description: 'Анимация иконки успеха',
     },
   },
 };
@@ -44,6 +128,49 @@ export const ApiKey = {
   },
 };
 
+export const Sizes = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Примеры всех размеров компонента. Размеры синхронизированы с другими элементами формы (DXInput, DXButton).',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXCopyField },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Small (sm)</h3>
+          <DXCopyField
+            value="https://example.com/share/abc123"
+            label="Share Link"
+            size="sm"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Medium (md) - Default</h3>
+          <DXCopyField
+            value="https://example.com/share/abc123"
+            label="Share Link"
+            size="md"
+          />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Large (lg)</h3>
+          <DXCopyField
+            value="https://example.com/share/abc123"
+            label="Share Link"
+            size="lg"
+          />
+        </div>
+      </div>
+    `,
+  }),
+};
+
 // С анимацией wiggle
 export const WiggleAnimation = {
   args: {