dxd-style-code 0.1.7 → 0.1.8

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

@@ -0,0 +1,243 @@
+import DXTooltip from './DXTooltip.vue';
+
+export default {
+  title: 'Atoms/DXTooltip',
+  component: DXTooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    position: { control: { type: 'select' }, options: ['top', 'bottom', 'left', 'right'] },
+    color: { control: { type: 'select' }, options: ['dark', 'light', 'primary', 'success', 'danger', 'warning', 'info'] },
+    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    animation: { control: { type: 'select' }, options: ['fade', 'fade-scale', 'slide-up', 'slide-down', 'slide-left', 'slide-right', 'tooltip-custom'] },
+  },
+};
+
+export const Default = {
+  args: { content: 'This is a tooltip' },
+  render: (args) => ({
+    components: { DXTooltip },
+    setup() { return { args }; },
+    template: '<DXTooltip v-bind="args"><button class="px-4 py-2 bg-slate-100 rounded">Hover me</button></DXTooltip>',
+  }),
+};
+
+export const Positions = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-8 justify-center py-12">
+        <DXTooltip content="Top tooltip" position="top">
+          <button class="px-4 py-2 bg-slate-100 rounded">Top</button>
+        </DXTooltip>
+        <DXTooltip content="Bottom tooltip" position="bottom">
+          <button class="px-4 py-2 bg-slate-100 rounded">Bottom</button>
+        </DXTooltip>
+        <DXTooltip content="Left tooltip" position="left">
+          <button class="px-4 py-2 bg-slate-100 rounded">Left</button>
+        </DXTooltip>
+        <DXTooltip content="Right tooltip" position="right">
+          <button class="px-4 py-2 bg-slate-100 rounded">Right</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Colors = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-4 justify-center py-12 flex-wrap">
+        <DXTooltip content="Dark tooltip" color="dark">
+          <button class="px-4 py-2 bg-slate-100 rounded">Dark</button>
+        </DXTooltip>
+        <DXTooltip content="Light tooltip" color="light">
+          <button class="px-4 py-2 bg-slate-800 text-white rounded">Light</button>
+        </DXTooltip>
+        <DXTooltip content="Primary tooltip" color="primary">
+          <button class="px-4 py-2 bg-slate-100 rounded">Primary</button>
+        </DXTooltip>
+        <DXTooltip content="Info tooltip" color="info">
+          <button class="px-4 py-2 bg-slate-100 rounded">Info</button>
+        </DXTooltip>
+        <DXTooltip content="Success tooltip" color="success">
+          <button class="px-4 py-2 bg-slate-100 rounded">Success</button>
+        </DXTooltip>
+        <DXTooltip content="Warning tooltip" color="warning">
+          <button class="px-4 py-2 bg-slate-100 rounded">Warning</button>
+        </DXTooltip>
+        <DXTooltip content="Danger tooltip" color="danger">
+          <button class="px-4 py-2 bg-slate-100 rounded">Danger</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-4 justify-center py-12 items-center">
+        <DXTooltip content="Extra small tooltip" size="xs">
+          <button class="px-4 py-2 bg-slate-100 rounded">XS</button>
+        </DXTooltip>
+        <DXTooltip content="Small tooltip" size="sm">
+          <button class="px-4 py-2 bg-slate-100 rounded">SM</button>
+        </DXTooltip>
+        <DXTooltip content="Medium tooltip" size="md">
+          <button class="px-4 py-2 bg-slate-100 rounded">MD</button>
+        </DXTooltip>
+        <DXTooltip content="Large tooltip" size="lg">
+          <button class="px-4 py-2 bg-slate-100 rounded">LG</button>
+        </DXTooltip>
+        <DXTooltip content="Extra large tooltip" size="xl">
+          <button class="px-4 py-2 bg-slate-100 rounded">XL</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Animations = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-4 justify-center py-12 flex-wrap">
+        <DXTooltip content="Fade animation" animation="fade">
+          <button class="px-4 py-2 bg-slate-100 rounded">Fade</button>
+        </DXTooltip>
+        <DXTooltip content="Fade scale animation" animation="fade-scale">
+          <button class="px-4 py-2 bg-slate-100 rounded">Fade Scale</button>
+        </DXTooltip>
+        <DXTooltip content="Slide up animation" animation="slide-up">
+          <button class="px-4 py-2 bg-slate-100 rounded">Slide Up</button>
+        </DXTooltip>
+        <DXTooltip content="Slide down animation" animation="slide-down">
+          <button class="px-4 py-2 bg-slate-100 rounded">Slide Down</button>
+        </DXTooltip>
+        <DXTooltip content="Slide left animation" animation="slide-left">
+          <button class="px-4 py-2 bg-slate-100 rounded">Slide Left</button>
+        </DXTooltip>
+        <DXTooltip content="Slide right animation" animation="slide-right">
+          <button class="px-4 py-2 bg-slate-100 rounded">Slide Right</button>
+        </DXTooltip>
+        <DXTooltip content="Custom tooltip animation" animation="tooltip-custom">
+          <button class="px-4 py-2 bg-slate-100 rounded">Custom</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const WithSlotContent = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-4 justify-center py-12 flex-wrap">
+        <DXTooltip>
+          <template #content>
+            <div class="flex items-center gap-2">
+              <span>Custom content with</span>
+              <span class="font-semibold">bold text</span>
+            </div>
+          </template>
+          <button class="px-4 py-2 bg-slate-100 rounded">Slot Content</button>
+        </DXTooltip>
+        <DXTooltip color="info">
+          <template #content>
+            <div>
+              <div class="font-semibold mb-1">Rich Content</div>
+              <div class="text-xs opacity-90">With multiple lines and formatting</div>
+            </div>
+          </template>
+          <button class="px-4 py-2 bg-slate-100 rounded">Rich Slot</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const MaxWidth = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="flex gap-4 justify-center py-12 flex-wrap items-center">
+        <DXTooltip content="Narrow tooltip with limited width" maxWidth="120px">
+          <button class="px-4 py-2 bg-slate-100 rounded">120px</button>
+        </DXTooltip>
+        <DXTooltip content="Medium width tooltip with more space for content" maxWidth="200px">
+          <button class="px-4 py-2 bg-slate-100 rounded">200px</button>
+        </DXTooltip>
+        <DXTooltip content="Wide tooltip with even more space for longer text content that might wrap to multiple lines" maxWidth="300px">
+          <button class="px-4 py-2 bg-slate-100 rounded">300px</button>
+        </DXTooltip>
+      </div>
+    `,
+  }),
+};
+
+export const Combinations = {
+  render: () => ({
+    components: { DXTooltip },
+    template: `
+      <div class="space-y-8 py-12">
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-4">Color + Size Combinations</h3>
+          <div class="flex gap-4 justify-center flex-wrap">
+            <DXTooltip content="Success large" color="success" size="lg">
+              <button class="px-4 py-2 bg-slate-100 rounded">Success LG</button>
+            </DXTooltip>
+            <DXTooltip content="Warning small" color="warning" size="sm">
+              <button class="px-4 py-2 bg-slate-100 rounded">Warning SM</button>
+            </DXTooltip>
+            <DXTooltip content="Danger extra small" color="danger" size="xs">
+              <button class="px-4 py-2 bg-slate-100 rounded">Danger XS</button>
+            </DXTooltip>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-4">Position + Color Combinations</h3>
+          <div class="flex gap-4 justify-center flex-wrap">
+            <DXTooltip content="Info top" position="top" color="info">
+              <button class="px-4 py-2 bg-slate-100 rounded">Top Info</button>
+            </DXTooltip>
+            <DXTooltip content="Success bottom" position="bottom" color="success">
+              <button class="px-4 py-2 bg-slate-100 rounded">Bottom Success</button>
+            </DXTooltip>
+            <DXTooltip content="Warning left" position="left" color="warning">
+              <button class="px-4 py-2 bg-slate-100 rounded">Left Warning</button>
+            </DXTooltip>
+            <DXTooltip content="Danger right" position="right" color="danger">
+              <button class="px-4 py-2 bg-slate-100 rounded">Right Danger</button>
+            </DXTooltip>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-sm font-semibold text-slate-900 mb-4">Full Featured Example</h3>
+          <div class="flex justify-center">
+            <DXTooltip 
+              content="This is a fully customized tooltip with all features combined: large size, success color, and custom animation" 
+              size="lg" 
+              color="success" 
+              animation="fade-scale"
+              maxWidth="250px"
+            >
+              <button class="px-4 py-2 bg-slate-100 rounded">Full Featured</button>
+            </DXTooltip>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const LightTheme = {
+  args: { content: 'Light theme tooltip', color: 'light' },
+  render: (args) => ({
+    components: { DXTooltip },
+    setup() { return { args }; },
+    template: '<DXTooltip v-bind="args"><button class="px-4 py-2 bg-slate-800 text-white rounded">Hover me</button></DXTooltip>',
+  }),
+};
+

package/src/components/atoms/DXTooltip/DXTooltip.vue

@@ -0,0 +1,151 @@
+<template>
+  <div
+    class="relative inline-block"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    data-component="DXTooltip"
+  >
+    <slot />
+    <Transition v-bind="transitionProps">
+      <div
+        v-if="isVisible && hasContent"
+        :class="tooltipClasses"
+        :style="tooltipStyles"
+        role="tooltip"
+      >
+        <slot name="content">{{ content }}</slot>
+        <div :class="arrowClasses" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted, useSlots } from "vue";
+import { useSize } from "@/composables/useSize";
+import { useVariantTooltip, useTooltipArrow, useTooltipPosition } from "@/composables/useVariant";
+import { useAnimationTransition, useTooltipCustomTransition } from "@/composables/useAnimation";
+
+const props = defineProps({
+  /** Текст подсказки */
+  content: { type: String, default: "" },
+  /** Позиция: top | bottom | left | right */
+  position: { type: String, default: "top" },
+  /** Цвет: dark | light | primary | success | danger | warning | info */
+  color: { type: String, default: "dark" },
+  /** Размер: xs | sm | md | lg | xl */
+  size: { type: String, default: "md" },
+  /** Анимация: fade | fade-scale | slide-up | slide-down | slide-left | slide-right | tooltip-custom */
+  animation: { type: String, default: "tooltip-custom" },
+  /** Максимальная ширина */
+  maxWidth: { type: String, default: "200px" },
+  /** Задержка перед показом (мс) */
+  delay: { type: Number, default: 100 },
+});
+
+const slots = useSlots();
+const isVisible = ref(false);
+const showTimeout = ref(null);
+const hideTimeout = ref(null);
+
+/**
+ * Проверка наличия контента для отображения
+ */
+const hasContent = computed(() => {
+  return Boolean(props.content || slots.content);
+});
+
+/**
+ * Обработчик входа мыши
+ */
+const handleMouseEnter = () => {
+  // Очищаем таймер скрытия, если он был установлен
+  if (hideTimeout.value) {
+    clearTimeout(hideTimeout.value);
+    hideTimeout.value = null;
+  }
+
+  // Устанавливаем задержку перед показом
+  showTimeout.value = setTimeout(() => {
+    isVisible.value = true;
+  }, props.delay);
+};
+
+/**
+ * Обработчик выхода мыши
+ */
+const handleMouseLeave = () => {
+  // Очищаем таймер показа
+  if (showTimeout.value) {
+    clearTimeout(showTimeout.value);
+    showTimeout.value = null;
+  }
+
+  // Скрываем сразу без задержки
+  isVisible.value = false;
+};
+
+/**
+ * Обработчик фокуса
+ */
+const handleFocus = () => {
+  handleMouseEnter();
+};
+
+/**
+ * Обработчик потери фокуса
+ */
+const handleBlur = () => {
+  handleMouseLeave();
+};
+
+/**
+ * Конфигурация transition для анимации
+ * Для tooltip-custom использует адаптивную анимацию в зависимости от позиции
+ */
+const transitionProps = computed(() => {
+  if (props.animation === 'tooltip-custom') {
+    return useTooltipCustomTransition(props.position);
+  }
+  return useAnimationTransition(props.animation);
+});
+
+/**
+ * Классы для tooltip
+ */
+const tooltipClasses = computed(() => [
+  "absolute z-50 rounded-lg whitespace-normal",
+  useSize(props.size, "tooltip"),
+  useTooltipPosition(props.position),
+  useVariantTooltip(props.color),
+]);
+
+/**
+ * Стили для tooltip
+ */
+const tooltipStyles = computed(() => ({
+  maxWidth: props.maxWidth,
+}));
+
+/**
+ * Классы для стрелки tooltip
+ */
+const arrowClasses = computed(() => {
+  return useTooltipArrow(props.position, props.color);
+});
+
+/**
+ * Очистка таймеров при размонтировании компонента
+ */
+onUnmounted(() => {
+  if (showTimeout.value) {
+    clearTimeout(showTimeout.value);
+  }
+  if (hideTimeout.value) {
+    clearTimeout(hideTimeout.value);
+  }
+});
+</script>
+

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

@@ -0,0 +1,2 @@
+export { default } from './DXTooltip.vue';
+

package/src/components/atoms/index.js

@@ -0,0 +1,24 @@
+// Atom components - basic building blocks
+export { default as DXAvatar } from './DXAvatar';
+export { default as DXBackdrop } from './DXBackdrop';
+export { default as DXBadge } from './DXBadge';
+export { default as DXButton } from './DXButton';
+export { default as DXCard } from './DXCard';
+export { default as DXCheckbox } from './DXCheckbox';
+export { default as DXDivider } from './DXDivider';
+export { default as DXDropdownItem } from './DXDropdownItem';
+export { default as DXFormLabel } from './DXFormLabel';
+export { default as DXIcon } from './DXIcon';
+export { default as DXIconWrapper } from './DXIconWrapper';
+export { default as DXInputAddon } from './DXInputAddon';
+export { default as DXLoader } from './DXLoader';
+export { default as DXLink } from './DXLink';
+export { default as DXProgress } from './DXProgress';
+export { default as DXRadio } from './DXRadio';
+export { default as DXSkeleton } from './DXSkeleton';
+export { default as DXSlider } from './DXSlider';
+export { default as DXTags } from './DXTags';
+export { default as DXToast } from './DXToast';
+export { default as DXToggle } from './DXToggle';
+export { default as DXToggleButton } from './DXToggleButton';
+export { default as DXTooltip } from './DXTooltip';

package/src/components/layout/DXBox/DXBox.stories.js

@@ -0,0 +1,238 @@
+import DXBox from './DXBox.vue';
+
+export default {
+  title: 'Layout/DXBox',
+  component: DXBox,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# DXBox
+
+Универсальный контейнер с настраиваемыми отступами, фоном, тенью и скруглением.
+
+## Назначение
+
+DXBox - базовый layout компонент для создания контейнеров с гибкой системой стилизации.
+Предоставляет единообразный API для управления отступами, фоном, тенями, скруглением и границами.
+
+## Архитектура
+
+### Использует
+- \`useSpacing\` composable - для унификации отступов (padding, margin)
+- \`useClassComposition\` composable - для объединения классов
+
+### Используется в
+- Все layout компоненты как базовый строительный блок
+- Карточки и контейнеры контента
+- Модальные окна и панели
+- Любые компоненты, требующие стилизованный контейнер
+
+## Внутренняя логика
+
+### Система отступов
+Компонент поддерживает гибкую систему отступов:
+- **Общие отступы**: \`p\` (padding), \`m\` (margin)
+- **Односторонние отступы**: \`px\`, \`py\` (padding), \`mx\`, \`my\` (margin)
+- **Специальное значение**: \`m="auto"\` для центрирования через margin
+
+### Динамический HTML тег
+Компонент использует \`<component :is="tag">\` для поддержки различных HTML тегов:
+- По умолчанию: \`div\`
+- Можно использовать: \`section\`, \`article\`, \`aside\`, \`header\`, \`footer\`, и т.д.
+
+### Условное применение классов
+Все стили применяются условно - классы добавляются только если соответствующие props указаны.
+Это позволяет создавать минималистичные контейнеры без лишних классов.
+
+## Особенности
+
+### Гибкая система отступов
+\`\`\`vue
+<DXBox p="md" px="lg" py="sm">Content</DXBox>
+<DXBox m="auto" mx="lg">Centered</DXBox>
+\`\`\`
+
+### Семантические теги
+\`\`\`vue
+<DXBox tag="section" p="lg" bg="white">Section content</DXBox>
+<DXBox tag="article" p="md" rounded="lg">Article content</DXBox>
+\`\`\`
+
+### Комбинирование стилей
+\`\`\`vue
+<DXBox p="lg" bg="white" rounded="xl" shadow="lg" border>
+  Styled container
+</DXBox>
+\`\`\`
+
+## Ограничения
+
+- Отступы используют предопределенные значения из \`useSpacing\` (none, xs, sm, md, lg, xl)
+- Для кастомных отступов используйте CSS классы через \`class\` prop
+- \`m="auto"\` работает только для горизонтального центрирования
+        `,
+      },
+    },
+  },
+  argTypes: {
+    tag: {
+      control: 'text',
+      description: 'HTML тег для рендеринга компонента. По умолчанию используется div, но можно использовать любой семантический тег (section, article, aside, header, footer и т.д.).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '"div"' },
+        category: 'Layout',
+      },
+    },
+    p: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Общий padding (отступ внутри) для всех сторон. Использует систему spacing из useSpacing composable.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    px: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Горизонтальный padding (отступ слева и справа). Имеет приоритет над общим p для горизонтальных отступов.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    py: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Вертикальный padding (отступ сверху и снизу). Имеет приоритет над общим p для вертикальных отступов.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    m: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Общий margin (отступ снаружи) для всех сторон. Поддерживает специальное значение "auto" для центрирования.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    mx: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Горизонтальный margin (отступ слева и справа). Поддерживает значение "auto" для горизонтального центрирования.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    my: {
+      control: 'select',
+      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
+      description: 'Вертикальный margin (отступ сверху и снизу). Поддерживает значение "auto" для вертикального центрирования.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Spacing',
+      },
+    },
+    rounded: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
+      description: 'Скругление углов контейнера. Определяет border-radius через Tailwind классы.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Appearance',
+      },
+    },
+    bg: {
+      control: 'select',
+      options: ['white', 'slate', 'transparent'],
+      description: 'Цвет фона контейнера. Предопределенные варианты: white (белый), slate (светло-серый), transparent (прозрачный).',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Appearance',
+      },
+    },
+    shadow: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl'],
+      description: 'Тень контейнера. Определяет box-shadow через Tailwind классы. Используется для создания глубины и визуального разделения.',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+        category: 'Appearance',
+      },
+    },
+    border: {
+      control: 'boolean',
+      description: 'Добавляет рамку вокруг контейнера. Применяет класс border border-slate-200 для тонкой серой рамки.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Appearance',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: { p: 'md', bg: 'slate', rounded: 'lg' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример использования DXBox с padding, фоном и скруглением. Это стандартная конфигурация для создания стилизованного контейнера.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXBox },
+    setup() { return { args }; },
+    template: '<DXBox v-bind="args">Content inside box</DXBox>',
+  }),
+};
+
+export const WithBorder = {
+  args: { p: 'lg', bg: 'white', rounded: 'xl', border: true },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DXBox с рамкой. Используется для визуального разделения контента. Рамка имеет тонкий серый цвет (border-slate-200).',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXBox },
+    setup() { return { args }; },
+    template: '<DXBox v-bind="args">Box with border</DXBox>',
+  }),
+};
+
+export const WithShadow = {
+  args: { p: 'lg', bg: 'white', rounded: 'xl', shadow: 'lg' },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DXBox с тенью. Тень создает эффект глубины и поднятия элемента над фоном. Используется для карточек, модальных окон и выделения важного контента.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: { DXBox },
+    setup() { return { args }; },
+    template: '<DXBox v-bind="args">Box with shadow</DXBox>',
+  }),
+};
+