dxd-style-code 0.1.11 → 0.1.13

package/src/components/{molecules → organisms}/DXBaseTable/DXBaseTable.stories.js

@@ -3,9 +3,86 @@ import DXBaseTable from './DXBaseTable.vue';
 import DXBadge from '../../atoms/DXBadge/DXBadge.vue';
 
 export default {
-  title: 'Molecules/DXBaseTable',
+  title: 'Organisms/DXBaseTable',
   component: DXBaseTable,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXBaseTable
+
+Базовая таблица данных с поддержкой сортировки, кастомных ячеек и различных вариантов оформления.
+
+## Назначение
+
+DXBaseTable предоставляет базовую функциональность таблицы данных без расширенных функций
+(фильтрация, пагинация, выбор). Используется как основа для DXTable или для простых таблиц,
+требующих только сортировку и кастомное отображение ячеек.
+
+## Архитектура
+
+### Использует
+- Нативные HTML таблицы (\`<table>\`, \`<thead>\`, \`<tbody>\`, \`<tr>\`, \`<td>\`, \`<th>\`)
+- \`useClassComposition\` composable - для стилей
+
+### Используется в
+- \`DXTable\` - как базовая таблица
+- Простые таблицы данных
+- Таблицы без расширенных функций
+
+## Внутренняя логика
+
+### Структура колонок
+Колонки определяются через массив объектов:
+\`\`\`
+[{
+  key: 'id',
+  label: 'ID',
+  sortable?: true,
+  width?: '80px',
+  align?: 'left' | 'center' | 'right'
+}]
+\`\`\`
+
+### Сортировка
+При \`sortable={true}\` в колонке:
+- Отображается иконка сортировки в заголовке
+- При клике эмитится событие \`sort\` с информацией о колонке и направлении
+- Сортировка должна обрабатываться родительским компонентом
+
+### Кастомные ячейки
+Можно использовать named slots для кастомного отображения ячеек:
+- \`cell-{key}\` - кастомная ячейка для колонки (например, \`cell-status\`)
+- \`header-{key}\` - кастомный заголовок для колонки
+
+### Выравнивание
+Каждая колонка может иметь свое выравнивание:
+- **left** (по умолчанию) - по левому краю
+- **center** - по центру
+- **right** - по правому краю
+
+### Ширина колонок
+Можно указать фиксированную ширину колонки через \`width\` prop.
+
+## Особенности
+
+### События
+- \`@sort\` - эмитится при клике на сортируемую колонку, передает \`{ column, direction }\`
+
+### Варианты оформления
+Поддерживает различные варианты оформления:
+- **default** - стандартное оформление
+- **bordered** - с рамками
+- **striped** - с чередующимися строками
+
+### Слоты
+- **cell-{key}** - кастомная ячейка для колонки
+- **header-{key}** - кастомный заголовок для колонки
+        `,
+      },
+    },
+  },
 };
 
 // Sample data

package/src/components/{molecules → organisms}/DXBaseTable/DXBaseTable.vue

@@ -254,9 +254,9 @@ import {
 // Components
 import DXIcon from '../../atoms/DXIcon/DXIcon.vue';
 import DXCheckbox from '../../atoms/DXCheckbox/DXCheckbox.vue';
-import DXDropdown from '../../organisms/DXDropdown/DXDropdown.vue';
+import DXDropdown from '../DXDropdown/DXDropdown.vue';
 import DXDropdownItem from '../../atoms/DXDropdownItem/DXDropdownItem.vue';
-import DXDropdownDivider from '../DXDropdownDivider/DXDropdownDivider.vue';
+import DXDropdownDivider from '../../molecules/DXDropdownDivider/DXDropdownDivider.vue';
 import DXLoader from '../../atoms/DXLoader/DXLoader.vue';
 import DXSearchSelect from '../../molecules/DXSearchSelect/DXSearchSelect.vue';
 

package/src/components/organisms/DXChartContainer/DXChartContainer.stories.js

@@ -6,7 +6,7 @@ import DXSelect from '../../molecules/DXSelect/DXSelect.vue';
 export default {
   title: 'Organisms/DXChartContainer',
   component: DXChartContainer,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXChartContainer/DXChartContainer.vue

@@ -9,9 +9,9 @@
     <!-- Заголовок -->
     <div v-if="title || $slots.header" :class="headerClasses">
       <slot name="header">
-        <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+        <DXHeading v-if="title" level="3" size="lg" weight="semibold" color="default">
           {{ title }}
-        </h3>
+        </DXHeading>
       </slot>
     </div>
 
@@ -34,7 +34,7 @@
     <div :class="chartClasses" :style="chartStyles">
       <slot name="chart">
         <div class="flex items-center justify-center h-full text-slate-400">
-          <p class="text-sm">Используйте slot "chart" для вашей библиотеки графиков</p>
+          <DXText tag="p" size="sm">Используйте slot "chart" для вашей библиотеки графиков</DXText>
         </div>
       </slot>
     </div>
@@ -56,14 +56,16 @@
                 { 'opacity-50': !item.visible },
               ]"
             ></div>
-            <span
+            <DXText
+              tag="span"
+              size="sm"
+              color="default"
               :class="[
-                'text-sm text-slate-700',
                 { 'line-through opacity-50': !item.visible },
               ]"
             >
               {{ item.label }}
-            </span>
+            </DXText>
           </div>
         </div>
       </slot>
@@ -77,6 +79,8 @@ import { useClassComposition } from "../../../composables/useClassComposition";
 import { useSpacing } from "../../../composables/useSpacing";
 import DXCard from "../../atoms/DXCard/DXCard.vue";
 import DXSelect from "../../molecules/DXSelect/DXSelect.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 
 const props = defineProps({
   /**

package/src/components/organisms/DXChatInterface/DXChatInterface.stories.js

@@ -4,7 +4,7 @@ import DXChatInterface from './DXChatInterface.vue';
 export default {
   title: 'Organisms/DXChatInterface',
   component: DXChatInterface,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXChatInterface/DXChatInterface.vue

@@ -16,12 +16,12 @@
               size="md"
             />
             <div>
-              <h3 class="font-semibold text-slate-900">
+              <DXHeading level="3" weight="semibold" color="default">
                 {{ chatInfo?.name || "Чат" }}
-              </h3>
-              <p v-if="chatInfo?.status" class="text-xs text-slate-500">
+              </DXHeading>
+              <DXText v-if="chatInfo?.status" tag="p" size="xs" color="muted">
                 {{ chatInfo.status }}
-              </p>
+              </DXText>
             </div>
           </div>
           <slot name="header-actions" />
@@ -160,6 +160,8 @@ import { useSpacing } from "../../../composables/useSpacing";
 import DXAvatar from "../../atoms/DXAvatar/DXAvatar.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import DXTextarea from "../../molecules/DXTextarea/DXTextarea.vue";
 import {
   PaperClipIcon,

package/src/components/organisms/DXCommentSection/DXCommentSection.stories.js

@@ -4,7 +4,7 @@ import DXCommentSection from './DXCommentSection.vue';
 export default {
   title: 'Organisms/DXCommentSection',
   component: DXCommentSection,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXCommentSection/DXCommentSection.vue

@@ -42,16 +42,16 @@
             />
             <div class="flex-1">
               <div class="flex items-center gap-2 mb-1">
-                <span class="font-semibold text-slate-900">
+                <DXText tag="span" weight="semibold" color="default">
                   {{ comment.author?.name || "Аноним" }}
-                </span>
-                <span class="text-xs text-slate-500">
+                </DXText>
+                <DXText tag="span" size="xs" color="muted">
                   {{ formatDate(comment.date) }}
-                </span>
+                </DXText>
               </div>
-              <div class="text-sm text-slate-700 mb-2">
+              <DXText tag="div" size="sm" color="default" class="mb-2">
                 {{ comment.text }}
-              </div>
+              </DXText>
               <div class="flex items-center gap-4">
                 <DXButton
                   v-if="showReactions"
@@ -128,6 +128,7 @@ import { useSpacing } from "../../../composables/useSpacing";
 import DXTextarea from "../../molecules/DXTextarea/DXTextarea.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXAvatar from "../../atoms/DXAvatar/DXAvatar.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import DXPagination from "../../molecules/DXPagination/DXPagination.vue";
 
 const props = defineProps({

package/src/components/organisms/DXDashboardGrid/DXDashboardGrid.stories.js

@@ -8,7 +8,7 @@ import { UserGroupIcon, ChartBarIcon, CurrencyDollarIcon } from '@heroicons/vue/
 export default {
   title: 'Organisms/DXDashboardGrid',
   component: DXDashboardGrid,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXDashboardGrid/DXDashboardGrid.vue

@@ -31,8 +31,8 @@
           </div>
           <slot name="widget" :widget="widget">
             <div class="p-4 bg-white border border-slate-200 rounded-lg h-full">
-              <h3 class="font-semibold mb-2">{{ widget.title || `Виджет ${widget.id}` }}</h3>
-              <p class="text-sm text-slate-600">Используйте slot widget для кастомного контента</p>
+              <DXHeading level="3" weight="semibold" class="mb-2">{{ widget.title || `Виджет ${widget.id}` }}</DXHeading>
+              <DXText tag="p" size="sm" color="muted">Используйте slot widget для кастомного контента</DXText>
             </div>
           </slot>
         </div>
@@ -47,6 +47,8 @@ import { useClassComposition } from "../../../composables/useClassComposition";
 import { useSpacing } from "../../../composables/useSpacing";
 import { VueDraggableNext as vuedraggable } from "vue-draggable-next";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
+import DXText from "../../atoms/DXText/DXText.vue";
 import { Bars3Icon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({

package/src/components/organisms/DXDashboardWidget/DXDashboardWidget.stories.js

@@ -5,7 +5,7 @@ import { ChartBarIcon, CurrencyDollarIcon } from '@heroicons/vue/24/solid';
 export default {
   title: 'Organisms/DXDashboardWidget',
   component: DXDashboardWidget,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXDashboardWidget/DXDashboardWidget.vue

@@ -11,9 +11,9 @@
     <div v-if="title || $slots.header || editable" :class="headerClasses">
       <slot name="header">
         <div class="flex items-center justify-between">
-          <h3 v-if="title" class="text-lg font-semibold text-slate-900">
+          <DXHeading v-if="title" level="3" size="lg" weight="semibold" color="default">
             {{ title }}
-          </h3>
+          </DXHeading>
           <div v-if="editable" class="flex items-center gap-2">
             <DXButton
               v-if="refreshable"
@@ -112,6 +112,7 @@ import { useSize } from "../../../composables/useSize";
 import DXCard from "../../atoms/DXCard/DXCard.vue";
 import DXButton from "../../atoms/DXButton/DXButton.vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXHeading from "../../atoms/DXHeading/DXHeading.vue";
 import DXStatCard from "../../molecules/DXStatCard/DXStatCard.vue";
 import DXChartContainer from "../DXChartContainer/DXChartContainer.vue";
 import DXTable from "../DXTable/DXTable.vue";

package/src/components/organisms/DXDataTable/DXDataTable.stories.js

@@ -4,7 +4,7 @@ import DXDataTable from './DXDataTable.vue';
 export default {
   title: 'Organisms/DXDataTable',
   component: DXDataTable,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:data-display'],
   parameters: {
     docs: {
       description: {

package/src/components/organisms/DXDropdown/DXDropdown.stories.js

@@ -35,7 +35,90 @@ import { ref } from 'vue';
 export default {
   title: 'Organisms/DXDropdown',
   component: DXDropdown,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXDropdown
+
+Компонент выпадающего меню с поддержкой различных позиций, размеров и клавиатурной навигации.
+
+## Назначение
+
+DXDropdown предоставляет стандартизированный способ создания выпадающих меню с поддержкой
+различных позиций, размеров, вариантов оформления и полной клавиатурной навигации. Компонент
+автоматически управляет открытием/закрытием и позиционированием меню.
+
+## Архитектура
+
+### Использует
+- \`DXIcon\` - для иконки chevron
+- \`DXDropdownItem\` - для элементов меню (через slot)
+- \`DXDropdownDivider\` - для разделителей (через slot)
+- \`Transition\` - для анимации появления/исчезновения
+
+### Используется в
+- Меню действий
+- Контекстные меню
+- Выбор опций
+- Навигационные меню
+- Любые места, требующие выпадающего меню
+
+## Внутренняя логика
+
+### Позиционирование
+Поддерживает 3 позиции:
+- **left** - меню выравнивается по левому краю trigger
+- **right** (по умолчанию) - меню выравнивается по правому краю trigger
+- **center** - меню центрируется относительно trigger
+
+### Ширина меню
+Поддерживает 5 вариантов ширины:
+- **sm** - маленькая ширина
+- **md** - средняя ширина (по умолчанию)
+- **lg** - большая ширина
+- **xl** - очень большая ширина
+- **auto** - автоматическая ширина по содержимому
+
+### Варианты оформления
+- **default** (по умолчанию): Стандартное оформление с рамкой и тенью
+- **minimal**: Минималистичное оформление без рамки
+
+### Управление состоянием
+- Управляется внутренним состоянием \`open\`
+- Автоматически закрывается при клике вне меню
+- Поддерживает клавиатурную навигацию
+
+### Клавиатурная навигация
+- **ArrowDown/ArrowUp** - навигация по элементам меню
+- **Escape** - закрытие меню
+- **Enter** - выбор элемента (если поддерживается)
+
+## Особенности
+
+### Слоты
+- **trigger** - элемент, при клике на который открывается меню (обязательно)
+- **default** - содержимое меню (DXDropdownItem, DXDropdownDivider и т.д.)
+
+### Chevron
+При \`showChevron={true}\` (по умолчанию):
+- Отображается иконка ChevronDownIcon справа от trigger
+- Иконка поворачивается на 180° при открытии меню
+
+### Отступ
+Настраиваемый отступ от trigger через \`offset\` prop (по умолчанию 8px).
+
+### Состояния
+- **disabled** - отключает dropdown
+- **open** - открытое состояние меню
+
+### Анимация
+Использует fade transition для плавного появления/исчезновения меню.
+        `,
+      },
+    },
+  },
   argTypes: {
     position: {
       control: 'select',

package/src/components/organisms/DXEmptyState/DXEmptyState.stories.js

@@ -4,6 +4,70 @@ export default {
   title: 'Organisms/DXEmptyState',
   component: DXEmptyState,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXEmptyState
+
+Компонент пустого состояния для отображения, когда нет данных или контента.
+
+## Назначение
+
+DXEmptyState предоставляет стандартизированный способ отображения пустого состояния
+в интерфейсе. Компонент используется для информирования пользователя об отсутствии данных
+и предоставления действий для заполнения контента.
+
+## Архитектура
+
+### Использует
+- \`DXText\` - для заголовка и описания
+- Динамический рендеринг иконки - для отображения иконки состояния
+
+### Используется в
+- Пустые списки и таблицы
+- Пустые результаты поиска
+- Пустые состояния после фильтрации
+- Начальные состояния (когда пользователь еще ничего не создал)
+- Любые места, требующие информирования об отсутствии данных
+
+## Внутренняя логика
+
+### Структура
+Компонент состоит из:
+1. **Иконка** - визуальный индикатор состояния (обязательно)
+2. **Заголовок** - краткое описание состояния (обязательно)
+3. **Описание** - подробное объяснение (опционально)
+4. **Действие** - кнопка или ссылка для заполнения (через слот \`action\`)
+
+### Анимация иконки
+При \`animated={true}\`:
+- Иконка получает медленную bounce анимацию
+- Анимация длится 3.2 секунды и повторяется бесконечно
+- Создает живой эффект для привлечения внимания
+
+## Особенности
+
+### Визуальное оформление
+- Белый фон с рамкой и тенью
+- Скругление \`rounded-3xl\`
+- Padding \`p-8\` для пространства
+- Центрирование контента
+
+### Слоты
+- **action** - кастомное действие (кнопка, ссылка и т.д.)
+
+### Иконка
+Иконка передается через \`icon\` prop (Heroicon компонент) и отображается размером 40×40px.
+
+### Типичные сценарии использования
+- "Нет элементов" - когда список пуст
+- "Нет результатов" - когда поиск не дал результатов
+- "Создайте первый элемент" - для начального состояния
+        `,
+      },
+    },
+  },
 };
 
 export const Default = {

package/src/components/organisms/DXEmptyState/DXEmptyState.vue

@@ -8,13 +8,15 @@
       class="w-10 h-10 text-slate-500 mx-auto"
       :class="animated && 'animate-bounce-slow'"
     />
-    <p class="text-base font-semibold text-slate-900">{{ title }}</p>
-    <p v-if="description" class="text-sm text-slate-600">{{ description }}</p>
+    <DXText tag="p" size="md" weight="semibold" color="default">{{ title }}</DXText>
+    <DXText v-if="description" tag="p" size="sm" color="muted">{{ description }}</DXText>
     <slot name="action" />
   </div>
 </template>
 
 <script setup>
+import DXText from "../../atoms/DXText/DXText.vue";
+
 defineProps({
   /** Иконка (компонент) */
   icon: { type: [Object, Function], required: true },