dxd-style-code 0.1.11 → 0.1.13

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

@@ -1,11 +1,103 @@
 import DXAlert from './DXAlert.vue';
+import DXButton from '../../atoms/DXButton/DXButton.vue';
 
 export default {
   title: 'Molecules/DXAlert',
   component: DXAlert,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:feedback'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXAlert
+
+Компонент уведомления с поддержкой различных вариантов, иконок, возможности закрытия и действий.
+
+## Назначение
+
+DXAlert предоставляет стандартизированный способ отображения уведомлений, предупреждений и сообщений
+пользователю. Компонент поддерживает различные семантические варианты (info, success, warning, danger),
+иконки, возможность закрытия и слот для кнопок действий.
+
+## Архитектура
+
+### Использует
+- \`DX\` - базовый polymorphic компонент
+- \`DXIcon\` - иконка уведомления
+- \`DXText\` - текст заголовка
+- \`DXBox\` - контейнеры для контента
+- \`DXFlex\` - layout для элементов
+- \`DXCloseButton\` - кнопка закрытия
+
+### Используется в
+- Уведомления об успешных операциях
+- Предупреждения перед действиями
+- Сообщения об ошибках
+- Информационные сообщения
+- Любые места, требующие обратной связи с пользователем
+
+## Внутренняя логика
+
+### Варианты
+- **info** (по умолчанию): Информационное сообщение (синий цвет)
+- **success**: Успешная операция (зеленый цвет)
+- **warning**: Предупреждение (желтый цвет)
+- **danger**: Ошибка или критическое сообщение (красный цвет)
+
+### Иконки
+- По умолчанию для каждого варианта используется соответствующая иконка:
+  - info → InformationCircleIcon
+  - success → CheckCircleIcon
+  - warning → ExclamationTriangleIcon
+  - danger → XCircleIcon
+- Можно переопределить через \`icon\` prop
+- Можно скрыть через \`showIcon={false}\`
+
+### Закрытие
+- При \`dismissible={true}\` отображается кнопка закрытия справа
+- При закрытии компонент скрывается (управляется внутренним состоянием)
+- Событие \`dismiss\` при закрытии
+
+### Действия
+- Слот \`actions\` для размещения кнопок действий
+- Выравнивание действий через \`actionsAlign\`: \`left\` (по умолчанию), \`center\`, \`right\`
+
+## Особенности
+
+### Структура
+Алерт состоит из:
+1. **Иконка** (слева) - визуальный индикатор типа сообщения
+2. **Заголовок** (опционально) - через \`title\` prop
+3. **Контент** - основной текст через default slot
+4. **Кнопка закрытия** (справа, опционально) - при \`dismissible={true}\`
+5. **Действия** (внизу, опционально) - через слот \`actions\`
+
+### Цветовая схема
+Каждый вариант имеет свою цветовую схему:
+- Фон: светлый оттенок цвета варианта (например, bg-blue-50)
+- Рамка: средний оттенок (например, border-blue-200)
+- Иконка: основной цвет (например, text-blue-500)
+- Заголовок: темный оттенок (например, text-blue-900)
+- Контент: средний оттенок (например, text-blue-800)
+
+### Доступность
+- Использует \`role="alert"\` для семантики
+- Автоматически скрывается при закрытии
+- Поддержка клавиатурной навигации
+
+### Использование
+Алерты обычно используются для:
+- Временных уведомлений (успех, ошибка)
+- Предупреждений перед действиями
+- Информационных сообщений
+- Сообщений о состоянии системы
+        `,
+      },
+    },
+  },
   argTypes: {
     variant: { control: { type: 'select' }, options: ['info', 'success', 'warning', 'danger'] },
+    actionsAlign: { control: { type: 'select' }, options: ['left', 'center', 'right'] },
   },
 };
 
@@ -68,3 +160,109 @@ export const AllVariants = {
   }),
 };
 
+export const WithActions = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Пример использования слота `actions` для добавления кнопок действий в alert.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXAlert, DXButton },
+    setup() {
+      const handleConfirm = () => alert('Подтверждено!');
+      const handleCancel = () => alert('Отменено');
+      const handleRetry = () => alert('Повторная попытка...');
+      const handleUpdate = () => alert('Обновление...');
+      const handleLater = () => alert('Отложено');
+      
+      return {
+        handleConfirm,
+        handleCancel,
+        handleRetry,
+        handleUpdate,
+        handleLater,
+      };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXAlert variant="warning" title="Подтвердите действие">
+          Вы уверены, что хотите удалить этот элемент? Это действие нельзя отменить.
+          <template #actions>
+            <DXButton variant="outline" size="sm" @click="handleCancel">Отменить</DXButton>
+            <DXButton variant="danger" size="sm" @click="handleConfirm">Удалить</DXButton>
+          </template>
+        </DXAlert>
+
+        <DXAlert variant="danger" title="Ошибка загрузки">
+          Не удалось загрузить данные. Пожалуйста, попробуйте еще раз.
+          <template #actions>
+            <DXButton variant="primary" size="sm" @click="handleRetry">Повторить</DXButton>
+          </template>
+        </DXAlert>
+
+        <DXAlert variant="info" title="Доступно обновление">
+          Доступна новая версия приложения. Рекомендуем обновить для получения новых функций и исправлений.
+          <template #actions>
+            <DXButton variant="primary" size="sm" @click="handleUpdate">Обновить</DXButton>
+            <DXButton variant="ghost" size="sm" @click="handleLater">Позже</DXButton>
+          </template>
+        </DXAlert>
+
+        <DXAlert variant="success" title="Изменения сохранены" dismissible>
+          Все ваши изменения были успешно сохранены.
+          <template #actions>
+            <DXButton variant="outline" size="sm" @click="handleCancel">Закрыть</DXButton>
+          </template>
+        </DXAlert>
+      </div>
+    `,
+  }),
+};
+
+export const ActionsAlignment = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Различные варианты выравнивания кнопок действий через проп `actionsAlign`.',
+      },
+    },
+  },
+  render: () => ({
+    components: { DXAlert, DXButton },
+    setup() {
+      const handleAction = () => alert('Действие выполнено!');
+      
+      return { handleAction };
+    },
+    template: `
+      <div class="space-y-4">
+        <DXAlert variant="info" title="Выравнивание слева (по умолчанию)" actions-align="left">
+          Кнопки действий выровнены по левому краю.
+          <template #actions>
+            <DXButton variant="outline" size="sm" @click="handleAction">Отмена</DXButton>
+            <DXButton variant="primary" size="sm" @click="handleAction">Применить</DXButton>
+          </template>
+        </DXAlert>
+
+        <DXAlert variant="info" title="Выравнивание по центру" actions-align="center">
+          Кнопки действий выровнены по центру.
+          <template #actions>
+            <DXButton variant="outline" size="sm" @click="handleAction">Отмена</DXButton>
+            <DXButton variant="primary" size="sm" @click="handleAction">Применить</DXButton>
+          </template>
+        </DXAlert>
+
+        <DXAlert variant="info" title="Выравнивание справа" actions-align="right">
+          Кнопки действий выровнены по правому краю.
+          <template #actions>
+            <DXButton variant="outline" size="sm" @click="handleAction">Отмена</DXButton>
+            <DXButton variant="primary" size="sm" @click="handleAction">Применить</DXButton>
+          </template>
+        </DXAlert>
+      </div>
+    `,
+  }),
+};
+

package/src/components/molecules/DXAlert/DXAlert.vue

@@ -1,30 +1,30 @@
 <template>
-  <div
+  <DX
     v-if="!dismissed"
     :class="alertClasses"
     role="alert"
     data-component="DXAlert"
     :data-variant="variant"
   >
-    <div class="flex items-start gap-3">
+    <DXFlex align="start" class="gap-3">
       <DXIcon v-if="iconToShow" :icon="iconToShow" size="md" animation="none" :class="iconClasses" />
-      <div class="flex-1 min-w-0">
-        <p v-if="title" class="font-semibold" :class="titleClasses">{{ title }}</p>
-        <div :class="contentClasses">
+      <DXBox class="flex-1 min-w-0">
+        <DXText v-if="title" tag="p" weight="semibold" :color="alertTitleColor">{{ title }}</DXText>
+        <DXBox :class="contentClasses">
           <slot />
-        </div>
-      </div>
+        </DXBox>
+      </DXBox>
       <DXCloseButton
         v-if="dismissible"
         size="sm"
         variant="default"
         @click="dismiss"
       />
-    </div>
-    <div v-if="$slots.actions" class="mt-3 flex gap-2">
+    </DXFlex>
+    <DXFlex v-if="$slots.actions" class="mt-3" gap="sm" :justify="actionsJustify">
       <slot name="actions" />
-    </div>
-  </div>
+    </DXFlex>
+  </DX>
 </template>
 
 <script setup>
@@ -35,7 +35,7 @@ import {
   ExclamationTriangleIcon,
   XCircleIcon,
 } from "@heroicons/vue/24/solid";
-import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import { DX, DXIcon, DXText, DXBox, DXFlex } from "../../atoms";
 import DXCloseButton from "../DXCloseButton/DXCloseButton.vue";
 
 const props = defineProps({
@@ -49,6 +49,8 @@ const props = defineProps({
   showIcon: { type: Boolean, default: true },
   /** Можно закрыть */
   dismissible: { type: Boolean, default: false },
+  /** Выравнивание кнопок действий: left | center | right */
+  actionsAlign: { type: String, default: "left" },
 });
 
 const emit = defineEmits(["dismiss"]);
@@ -109,8 +111,28 @@ const alertClasses = computed(() => [
 ]);
 
 const iconClasses = computed(() => ["w-5 h-5 flex-shrink-0 mt-0.5", styles.value.icon]);
-const titleClasses = computed(() => styles.value.title);
+const alertTitleColor = computed(() => {
+  const colorMap = {
+    info: 'primary',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+  };
+  return colorMap[props.variant] || 'primary';
+});
 const contentClasses = computed(() => ["text-sm", styles.value.content, props.title && "mt-1"]);
 const closeClasses = computed(() => styles.value.close);
+
+/**
+ * Маппинг actionsAlign prop в justify prop для DXFlex
+ */
+const actionsJustify = computed(() => {
+  const alignMap = {
+    left: "start",
+    center: "center",
+    right: "end",
+  };
+  return alignMap[props.actionsAlign] || "start";
+});
 </script>
 

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

@@ -17,10 +17,91 @@ import {
 export default {
   title: 'Molecules/DXBreadcrumb',
   component: DXBreadcrumb,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:navigation'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXBreadcrumb
+
+Навигационные хлебные крошки для отображения иерархии страниц и навигации.
+
+## Назначение
+
+DXBreadcrumb предоставляет стандартизированный способ отображения пути навигации
+в приложении. Компонент автоматически обрабатывает стилизацию, разделители и
+состояние текущей страницы.
+
+## Архитектура
+
+### Использует
+- \`DXLink\` - все элементы breadcrumb являются ссылками (DXLink компонентами)
+- \`DXIcon\` - для иконок элементов и разделителей
+- \`ChevronRightIcon\` - иконка разделителя по умолчанию
+
+### Используется в
+- Навигация в приложениях
+- Файловые системы
+- E-commerce категории
+- Административные панели
+- Многоуровневая навигация
+
+## Внутренняя логика
+
+### Все элементы - DXLink
+Все элементы breadcrumb рендерятся как \`DXLink\` компоненты, что обеспечивает:
+- Единообразие стилей
+- Правильную семантику
+- Поддержку всех возможностей DXLink (router-link, href, варианты)
+
+### Автоматическое неактивное состояние
+Последний элемент (конечная точка) автоматически получает \`inactive={true}\`:
+- Визуально приглушенный вид
+- Остается кликабельным (если указан href/to)
+- Правильная семантика с \`aria-current="page"\`
+
+### Варианты стилизации
+Через prop \`variant\` можно выбрать стиль ссылок:
+- \`link\` (по умолчанию) - обычные текстовые ссылки
+- \`primary\`, \`secondary\`, \`ghost\`, \`outline\` - варианты с padding и border-radius
+
+### Разделители
+Поддерживает два типа разделителей:
+- \`chevron\` (по умолчанию) - иконка ChevronRightIcon
+- \`slash\` - текстовый разделитель "/"
+
+### Анимация иконок
+Поддерживает анимацию иконок элементов:
+- Глобальная анимация для всех иконок
+- Анимация только для текущей страницы (\`animateCurrentOnly={true}\`)
+- Индивидуальная анимация для каждого элемента
+
+## Особенности
+
+### Структура данных
+Элементы передаются через prop \`items\`:
+\`\`\`js
+[
+  { label: 'Home', href: '/' },
+  { label: 'Products', to: '/products' },
+  { label: 'Current Page' } // Без href/to - будет неактивной ссылкой
+]
+\`\`\`
+
+### Размеры
+Поддерживает три размера: \`sm\`, \`md\` (по умолчанию), \`lg\`.
+Размер влияет на размер текста и иконок.
+
+### Кастомизация разделителей
+Можно кастомизировать разделители через slot \`separator\`.
+        `,
+      },
+    },
+  },
   argTypes: {
     separator: { control: { type: 'select' }, options: ['slash', 'chevron'] },
     size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
+    variant: { control: { type: 'select' }, options: ['link', 'primary', 'secondary', 'ghost', 'outline'] },
     iconAnimation: { control: { type: 'select' }, options: ['none', 'wiggle', 'scale', 'rotate'] },
   },
 };
@@ -170,6 +251,49 @@ export const Sizes = {
   }),
 };
 
+export const LinkVariants = {
+  render: () => ({
+    components: { DXBreadcrumb },
+    setup() { 
+      const items = [
+        { label: 'Home', href: '/' },
+        { label: 'Products', href: '/products' },
+        { label: 'Current' },
+      ];
+      
+      return { items };
+    },
+    template: `
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Link (default)</h3>
+          <DXBreadcrumb :items="items" variant="link" />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Ghost</h3>
+          <DXBreadcrumb :items="items" variant="ghost" />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Outline</h3>
+          <DXBreadcrumb :items="items" variant="outline" />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Primary</h3>
+          <DXBreadcrumb :items="items" variant="primary" />
+        </div>
+        
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-3">Secondary</h3>
+          <DXBreadcrumb :items="items" variant="secondary" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
 export const AllVariants = {
   render: () => ({
     components: { DXBreadcrumb },

package/src/components/molecules/DXBreadcrumb/DXBreadcrumb.vue

@@ -1,9 +1,9 @@
 <template>
-  <nav aria-label="Breadcrumb" data-component="DXBreadcrumb">
+  <DXNav type="breadcrumb" data-component="DXBreadcrumb">
     <ol class="flex items-center flex-wrap" :class="sizeClasses">
       <li v-for="(item, index) in items" :key="index" class="flex items-center">
         <!-- Separator -->
-        <span v-if="index > 0" class="mx-2 text-slate-400" aria-hidden="true">
+        <span v-if="index > 0" class="mx-1 text-slate-400" aria-hidden="true">
           <slot name="separator">
             <DXIcon 
               v-if="separator === 'chevron'" 
@@ -16,14 +16,12 @@
         </span>
         
         <!-- Item -->
-        <component
-          :is="getLinkComponent(item)"
+        <DXLink
           :href="item.href"
           :to="item.to"
-          :class="[
-            itemClasses,
-            index === items.length - 1 ? 'text-slate-900 font-medium' : 'text-slate-500 hover:text-slate-700',
-          ]"
+          :size="linkSize"
+          :variant="variant"
+          :inactive="index === items.length - 1"
           :aria-current="index === items.length - 1 ? 'page' : undefined"
         >
           <DXIcon 
@@ -31,18 +29,20 @@
             :icon="item.icon" 
             :size="iconSize"
             :animation="getIconAnimation(item, index)"
-            class="mr-1.5"
+
           />
           {{ item.label }}
-        </component>
+        </DXLink>
       </li>
     </ol>
-  </nav>
+  </DXNav>
 </template>
 
 <script setup>
 import { computed } from "vue";
 import DXIcon from "../../atoms/DXIcon/DXIcon.vue";
+import DXLink from "../../atoms/DXLink/DXLink.vue";
+import DXNav from "../../atoms/DXNav/DXNav.vue";
 import { ChevronRightIcon } from "@heroicons/vue/24/outline";
 
 const props = defineProps({
@@ -52,6 +52,8 @@ const props = defineProps({
   separator: { type: String, default: "chevron" },
   /** Размер: sm | md | lg */
   size: { type: String, default: "md" },
+  /** Вариант стилизации ссылок: link | primary | secondary | ghost | outline */
+  variant: { type: String, default: "ghost" },
   /** Анимация иконок: none | wiggle | scale | rotate */
   iconAnimation: { type: String, default: "none" },
   /** Анимировать только иконку текущей страницы */
@@ -72,13 +74,15 @@ const iconSize = computed(() => {
   return "xs";
 });
 
-const itemClasses = "inline-flex items-center transition-colors";
-
-const getLinkComponent = (item) => {
-  if (item.to) return "router-link";
-  if (item.href) return "a";
-  return "span";
-};
+// Маппинг размера breadcrumb на размер DXLink
+const linkSize = computed(() => {
+  const sizeMap = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+  return sizeMap[props.size] || "sm";
+});
 
 const getIconAnimation = (item, index) => {
   // Если у элемента своя анимация