dxd-style-code 0.1.10 → 0.1.12

package/src/components/utilities/DXAnimatePresence/DXAnimatePresence.stories.js

@@ -7,7 +7,7 @@ import DXModal from '../../organisms/DXModal/DXModal.vue';
 export default {
   title: 'Utilities/DXAnimatePresence',
   component: DXAnimatePresence,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:animation'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXBreakpointProvider/DXBreakpointProvider.stories.js

@@ -2,12 +2,12 @@ import { ref, inject, computed } from 'vue';
 import DXBreakpointProvider from './DXBreakpointProvider.vue';
 import DXCard from '../../atoms/DXCard/DXCard.vue';
 import DXButton from '../../atoms/DXButton/DXButton.vue';
-import DXGrid from '../../layout/DXGrid/DXGrid.vue';
+import DXGrid from '../../atoms/DXGrid/DXGrid.vue';
 
 export default {
   title: 'Utilities/DXBreakpointProvider',
   component: DXBreakpointProvider,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:provider'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXObserver/DXObserver.stories.js

@@ -6,7 +6,7 @@ import DXButton from '../../atoms/DXButton/DXButton.vue';
 export default {
   title: 'Utilities/DXObserver',
   component: DXObserver,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:utility'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXPortal/DXPortal.stories.js

@@ -8,7 +8,7 @@ import DXCard from '../../atoms/DXCard/DXCard.vue';
 export default {
   title: 'Utilities/DXPortal',
   component: DXPortal,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:overlay'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXStaggeredAnimation/DXStaggeredAnimation.stories.js

@@ -2,12 +2,12 @@ import { ref } from 'vue';
 import DXStaggeredAnimation from './DXStaggeredAnimation.vue';
 import DXCard from '../../atoms/DXCard/DXCard.vue';
 import DXButton from '../../atoms/DXButton/DXButton.vue';
-import DXList from '../../molecules/DXList/DXList.vue';
+import DXList from '../../atoms/DXList/DXList.vue';
 
 export default {
   title: 'Utilities/DXStaggeredAnimation',
   component: DXStaggeredAnimation,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:animation'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXThemeProvider/DXThemeProvider.stories.js

@@ -6,7 +6,7 @@ import DXButton from '../../atoms/DXButton/DXButton.vue';
 export default {
   title: 'Utilities/DXThemeProvider',
   component: DXThemeProvider,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:provider'],
   parameters: {
     docs: {
       description: {

package/src/components/utilities/DXTransitionGroup/DXTransitionGroup.stories.js

@@ -6,7 +6,7 @@ import DXButton from '../../atoms/DXButton/DXButton.vue';
 export default {
   title: 'Utilities/DXTransitionGroup',
   component: DXTransitionGroup,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'category:animation'],
   parameters: {
     docs: {
       description: {

package/src/composables/useSize.js

@@ -1,7 +1,7 @@
 /**
  * Композабл для унификации размеров компонентов
  * @param {string} size - xs | sm | md | lg | xl (для spacing также доступен none)
- * @param {string} type - button | buttonIcon | input | icon | text | checkbox | radio | avatar | spacing | loader | progress | inputAddon | sliderTrack | sliderThumb | tooltip | toggle | badge
+ * @param {string} type - button | buttonIcon | input | icon | text | checkbox | radio | avatar | spacing | loader | progress | inputAddon | sliderTrack | sliderThumb | tooltip | toggle | badge | image
  * @returns {string|Object} Tailwind CSS классы или объект с классами для track и thumb (для toggle)
  */
 export function useSize(size, type = 'input') {
@@ -122,6 +122,13 @@ export function useSize(size, type = 'input') {
       sm: 'px-2 py-1 text-[11px]',
       md: 'px-2.5 py-1.5 text-xs',
     },
+    image: {
+      xs: 'w-8 h-8',
+      sm: 'w-12 h-12',
+      md: 'w-16 h-16',
+      lg: 'w-24 h-24',
+      xl: 'w-32 h-32',
+    },
   };
   
   // Для toggle возвращаем объект, для остальных - строку

package/src/index.js

@@ -1,13 +1,7 @@
 // DX Components - Vue 3 UI Component Library
 // Export all components
 
-// Typography
-export * from './components/typography';
-
-// Layout
-export * from './components/layout';
-
-// Atoms
+// Atoms - basic building blocks (includes typography and layout components)
 export * from './components/atoms';
 
 // Molecules

package/src/components/layout/index.js

@@ -1,8 +0,0 @@
-// Layout components
-export { default as DXContainer } from './DXContainer';
-export { default as DXGrid } from './DXGrid';
-export { default as DXFlex } from './DXFlex';
-export { default as DXStack } from './DXStack';
-export { default as DXSpacer } from './DXSpacer';
-export { default as DXBox } from './DXBox';
-

package/src/components/typography/DXBlockquote/DXBlockquote.stories.js

@@ -1,33 +0,0 @@
-import DXBlockquote from './DXBlockquote.vue';
-
-export default {
-  title: 'Typography/DXBlockquote',
-  component: DXBlockquote,
-  tags: ['autodocs'],
-  argTypes: {
-    variant: { control: { type: 'select' }, options: ['default', 'bordered', 'highlighted'] },
-  },
-};
-
-export const Default = {
-  args: { cite: 'Стив Джобс' },
-  render: (args) => ({
-    components: { DXBlockquote },
-    setup() { return { args }; },
-    template: '<DXBlockquote v-bind="args">Дизайн — это не только то, как что-то выглядит и ощущается. Дизайн — это то, как что-то работает.</DXBlockquote>',
-  }),
-};
-
-export const Variants = {
-  render: () => ({
-    components: { DXBlockquote },
-    template: `
-      <div class="space-y-6">
-        <DXBlockquote variant="default">Default variant without border</DXBlockquote>
-        <DXBlockquote variant="bordered">Bordered variant with left border</DXBlockquote>
-        <DXBlockquote variant="highlighted">Highlighted variant with background</DXBlockquote>
-      </div>
-    `,
-  }),
-};
-

package/src/components/typography/DXCode/DXCode.stories.js

@@ -1,29 +0,0 @@
-import DXCode from './DXCode.vue';
-
-export default {
-  title: 'Typography/DXCode',
-  component: DXCode,
-  tags: ['autodocs'],
-};
-
-export const Inline = {
-  render: () => ({
-    components: { DXCode },
-    template: '<p>Используйте <DXCode>npm install</DXCode> для установки.</p>',
-  }),
-};
-
-export const Block = {
-  args: { block: true },
-  render: (args) => ({
-    components: { DXCode },
-    setup() { return { args }; },
-    template: `<DXCode v-bind="args">const greeting = "Hello World";
-console.log(greeting);
-
-function add(a, b) {
-  return a + b;
-}</DXCode>`,
-  }),
-};
-

package/src/components/typography/DXHeading/DXHeading.stories.js

@@ -1,54 +0,0 @@
-import DXHeading from './DXHeading.vue';
-
-export default {
-  title: 'Typography/DXHeading',
-  component: DXHeading,
-  tags: ['autodocs'],
-  argTypes: {
-    level: { control: { type: 'select' }, options: [1, 2, 3, 4, 5, 6] },
-    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'] },
-    weight: { control: { type: 'select' }, options: ['normal', 'medium', 'semibold', 'bold'] },
-    color: { control: { type: 'select' }, options: ['default', 'muted', 'primary', 'success', 'warning', 'danger'] },
-  },
-};
-
-export const Default = {
-  args: { level: 1 },
-  render: (args) => ({
-    components: { DXHeading },
-    setup() { return { args }; },
-    template: '<DXHeading v-bind="args">Заголовок страницы</DXHeading>',
-  }),
-};
-
-export const AllLevels = {
-  render: () => ({
-    components: { DXHeading },
-    template: `
-      <div class="space-y-4">
-        <DXHeading :level="1">Heading 1</DXHeading>
-        <DXHeading :level="2">Heading 2</DXHeading>
-        <DXHeading :level="3">Heading 3</DXHeading>
-        <DXHeading :level="4">Heading 4</DXHeading>
-        <DXHeading :level="5">Heading 5</DXHeading>
-        <DXHeading :level="6">Heading 6</DXHeading>
-      </div>
-    `,
-  }),
-};
-
-export const Colors = {
-  render: () => ({
-    components: { DXHeading },
-    template: `
-      <div class="space-y-2">
-        <DXHeading :level="3" color="default">Default Color</DXHeading>
-        <DXHeading :level="3" color="muted">Muted Color</DXHeading>
-        <DXHeading :level="3" color="success">Success Color</DXHeading>
-        <DXHeading :level="3" color="warning">Warning Color</DXHeading>
-        <DXHeading :level="3" color="danger">Danger Color</DXHeading>
-      </div>
-    `,
-  }),
-};
-

package/src/components/typography/DXLabel/DXLabel.stories.js

@@ -1,40 +0,0 @@
-import DXLabel from './DXLabel.vue';
-
-export default {
-  title: 'Typography/DXLabel',
-  component: DXLabel,
-  tags: ['autodocs'],
-};
-
-export const Default = {
-  args: {},
-  render: (args) => ({
-    components: { DXLabel },
-    setup() { return { args }; },
-    template: '<DXLabel v-bind="args">Email адрес</DXLabel>',
-  }),
-};
-
-export const Required = {
-  args: { required: true },
-  render: (args) => ({
-    components: { DXLabel },
-    setup() { return { args }; },
-    template: '<DXLabel v-bind="args">Обязательное поле</DXLabel>',
-  }),
-};
-
-export const Sizes = {
-  render: () => ({
-    components: { DXLabel },
-    template: `
-      <div class="space-y-2">
-        <DXLabel size="xs">Extra Small Label</DXLabel>
-        <DXLabel size="sm">Small Label (default)</DXLabel>
-        <DXLabel size="md">Medium Label</DXLabel>
-        <DXLabel size="lg">Large Label</DXLabel>
-      </div>
-    `,
-  }),
-};
-

package/src/components/typography/DXList/DXList.stories.js

@@ -1,50 +0,0 @@
-import DXList from './DXList.vue';
-
-export default {
-  title: 'Typography/DXList',
-  component: DXList,
-  tags: ['autodocs'],
-};
-
-export const Unordered = {
-  render: () => ({
-    components: { DXList },
-    template: `
-      <DXList>
-        <li>Первый элемент</li>
-        <li>Второй элемент</li>
-        <li>Третий элемент</li>
-      </DXList>
-    `,
-  }),
-};
-
-export const Ordered = {
-  args: { ordered: true },
-  render: (args) => ({
-    components: { DXList },
-    setup() { return { args }; },
-    template: `
-      <DXList v-bind="args">
-        <li>Шаг первый</li>
-        <li>Шаг второй</li>
-        <li>Шаг третий</li>
-      </DXList>
-    `,
-  }),
-};
-
-export const NoMarker = {
-  args: { marker: 'none' },
-  render: (args) => ({
-    components: { DXList },
-    setup() { return { args }; },
-    template: `
-      <DXList v-bind="args">
-        <li>Элемент без маркера</li>
-        <li>Ещё один элемент</li>
-      </DXList>
-    `,
-  }),
-};
-

package/src/components/typography/DXText/DXText.stories.js

@@ -1,47 +0,0 @@
-import DXText from './DXText.vue';
-
-export default {
-  title: 'Typography/DXText',
-  component: DXText,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg', 'xl'] },
-    weight: { control: { type: 'select' }, options: ['normal', 'medium', 'semibold', 'bold'] },
-    color: { control: { type: 'select' }, options: ['default', 'muted', 'primary', 'success', 'warning', 'danger'] },
-    align: { control: { type: 'select' }, options: ['left', 'center', 'right', 'justify'] },
-  },
-};
-
-export const Default = {
-  args: {},
-  render: (args) => ({
-    components: { DXText },
-    setup() { return { args }; },
-    template: '<DXText v-bind="args">Это обычный текстовый параграф с настройками по умолчанию.</DXText>',
-  }),
-};
-
-export const Sizes = {
-  render: () => ({
-    components: { DXText },
-    template: `
-      <div class="space-y-2">
-        <DXText size="xs">Extra Small Text</DXText>
-        <DXText size="sm">Small Text</DXText>
-        <DXText size="md">Medium Text (default)</DXText>
-        <DXText size="lg">Large Text</DXText>
-        <DXText size="xl">Extra Large Text</DXText>
-      </div>
-    `,
-  }),
-};
-
-export const Truncated = {
-  args: { truncate: true },
-  render: (args) => ({
-    components: { DXText },
-    setup() { return { args }; },
-    template: '<div class="w-48"><DXText v-bind="args">Это очень длинный текст который будет обрезан с многоточием</DXText></div>',
-  }),
-};
-

package/src/components/typography/index.js

@@ -1,8 +0,0 @@
-// Typography components
-export { default as DXHeading } from './DXHeading';
-export { default as DXText } from './DXText';
-export { default as DXLabel } from './DXLabel';
-export { default as DXCode } from './DXCode';
-export { default as DXBlockquote } from './DXBlockquote';
-export { default as DXList } from './DXList';
-