@dxtmisha/wiki 0.39.2 → 0.39.3

package/src/media/descriptions/wikiDescriptionsBadge.ts

@@ -1,150 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Badge component properties
- *
- * Описания свойств компонента Badge
- */
-export const wikiDescriptionsBadge: StorybookComponentsDescriptionItem = {
-  name: 'Badge',
-  description: {
-    en: 'Small visual indicator for displaying status, count, or notifications on interface elements',
-    ru: 'Небольшой визуальный индикатор для отображения статуса, количества или уведомлений на элементах интерфейса'
-  },
-  possibilities: {
-    en: [
-      'multiple color variants for different status types',
-      'content customization with text or numbers',
-      'positioning relative to parent elements',
-      'maximum value display with overflow handling',
-      'visibility control and animation support'
-    ],
-    ru: [
-      'множественные цветовые варианты для разных типов статуса',
-      'настройка содержимого с текстом или числами',
-      'позиционирование относительно родительских элементов',
-      'отображение максимального значения с обработкой переполнения',
-      'управление видимостью и поддержка анимации'
-    ]
-  },
-  import: [],
-  render: `
-      <div class="wiki-storybook-group">
-        <div class="wiki-storybook-item wiki-storybook-item--compact wiki-storybook-item--squared--md wiki-storybook-item--overflowVisible">
-          <DesignComponent v-bind="args"/>
-        </div>
-      </div>
-    `,
-  stories: [
-    {
-      id: 'BadgeBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent overlap="static">Badge</DesignComponent>
-          <DesignComponent overlap="static" icon="home">Badge</DesignComponent>
-          <DesignComponent overlap="static">99</DesignComponent>
-          <DesignComponent overlap="static" label="999" label-max="99"/>
-        </div>
-      `
-    },
-    {
-      id: 'BadgeDot',
-      name: {
-        en: 'Dot',
-        ru: 'Точечные (dot)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent dot overlap="static"/>
-        </div>
-      `
-    },
-    {
-      id: 'BadgePrimary',
-      name: {
-        en: 'Primary',
-        ru: 'Основные (primary)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent primary overlap="static" icon="home"/>
-          <DesignComponent primary overlap="static">Badge</DesignComponent>
-        </div>
-      `,
-      propsName: 'primary'
-    },
-    {
-      id: 'BadgeSecondary',
-      name: {
-        en: 'Secondary',
-        ru: 'Второстепенные (secondary)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent secondary overlap="static" icon="home"/>
-          <DesignComponent secondary overlap="static">Badge</DesignComponent>
-        </div>
-      `,
-      propsName: 'secondary'
-    },
-    {
-      id: 'BadgeOutline',
-      name: {
-        en: 'Outline',
-        ru: 'Контурные (outline)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent outline overlap="static" icon="home"/>
-          <DesignComponent outline overlap="static">Badge</DesignComponent>
-        </div>
-      `,
-      propsName: 'outline'
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Badge'} type={'badge'}/>
-<Canvas of={Component.BadgeBasic}/>
-
-<StorybookDescriptions componentName={'Badge'} type={'dot'}/>
-<Canvas of={Component.BadgeDot}/>
-
-<template prop="primary">
-<StorybookDescriptions componentName={'Badge'} type={'primary'}/>
-<Canvas of={Component.BadgePrimary}/>
-</template>
-
-<template prop="secondary">
-<StorybookDescriptions componentName={'Badge'} type={'secondary'}/>
-<Canvas of={Component.BadgeSecondary}/>
-</template>
-
-<template prop="outline">
-<StorybookDescriptions componentName={'Badge'} type={'outline'}/>
-<Canvas of={Component.BadgeOutline}/>
-</template>
-
-<StorybookDescriptions componentName={'Value'} type={'labelNumber'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item" style="min-width: 48px; min-height: 48px;">
-  <Badge overlap="static" v-bind="args"/>
-</div>
-    `,
-    description: `
-Small visual indicator used to display status, counts, notifications, or short labels (tags). Typically positioned over the corner of another element (like an icon or avatar) or used inline.
-Features numeric handling with label-max cap (e.g., "99+"), dot-only mode for status indication, and support for icons. Includes flexible positioning (overlap: rectangular or circular) and various color variants.
-Controlled primarily through the label, icon, and dot props. Use for unread counts, online status indicators, or marking items as "New" or "Sale" in e-commerce contexts.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsBars.ts

@@ -1,177 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Bars component properties
- *
- * Описания свойств компонента Bars
- */
-export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
-  name: 'Bars',
-  description: {
-    en: 'A versatile bar component for headers, toolbars, or action bars, displaying titles, descriptions, and interactive buttons.',
-    ru: 'Универсальный компонент-панель для заголовков, панелей инструментов или панелей действий, отображающий заголовки, описания и интерактивные кнопки.'
-  },
-  possibilities: {
-    en: [
-      'Displays a primary label and a secondary description.',
-      'Includes an optional back button for navigation.',
-      'Supports a primary set of interactive buttons.',
-      'Features an "action mode" with a separate set of buttons, label, and description.',
-      'Allows full customization of button appearance and behavior.'
-    ],
-    ru: [
-      'Отображает основной заголовок и дополнительное описание.',
-      'Включает опциональную кнопку "назад" для навигации.',
-      'Поддерживает основной набор интерактивных кнопок.',
-      'Имеет "режим действия" с отдельным набором кнопок, заголовком и описанием.',
-      'Позволяет полностью настраивать внешний вид и поведение кнопок.'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  stories: [
-    {
-      id: 'BarsBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            label="Page Title"
-            description="A concise description for this page"
-            :bars="[
-              { icon: 'search' },
-              { icon: 'refresh' },
-              { icon: 'more_vert' }
-            ]"
-          />
-
-          <DesignComponent
-            action
-            action-label="2 selected"
-            action-description="Choose an action to apply"
-            :action-bars="[
-              { icon: 'share' },
-              { icon: 'edit' },
-              { icon: 'delete' }
-            ]"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'BarsVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      return {
-        isAction: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="isAction = !isAction">Toggle action ({{ isAction ? 'on' : 'off' }})</button>
-          </div>
-          <DesignComponent
-            v-model:action="isAction"
-            label="Page Title"
-            description="A concise description for this example"
-            :bars="[
-              { icon: 'search' },
-              { icon: 'refresh' },
-              { icon: 'more_vert' }
-            ]"
-            action-label="2 selected"
-            action-description="Choose an action to apply"
-            :action-bars="[
-              { icon: 'share' },
-              { icon: 'edit' },
-              { icon: 'delete' }
-            ]"
-            style="margin-top: 8px;"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'BarsSkeleton',
-      name: {
-        en: 'Skeleton loading',
-        ru: 'Загрузка скелетона'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true">
-          <DesignComponent
-            :isSkeleton="true"
-            label="Page Title"
-            description="A concise description for this header"
-            :bars="[
-              { icon: 'search' },
-              { icon: 'refresh' },
-              { icon: 'more_vert' }
-            ]"
-          />
-        </DesignSkeleton>
-      `
-    },
-    {
-      id: 'BarsSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      setup: `
-      return {
-        isAction: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="isAction = !isAction">Toggle action ({{ isAction ? 'on' : 'off' }})</button>
-          </div>
-          <DesignComponent v-model:action="isAction">
-            <template #default>Custom Label slot</template>
-            <template #description>Custom Description slot</template>
-            <template #bars>Custom Bars Slot</template>
-            <template #actionBars>Custom ActionBars Slot</template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Bars'} type={'bars'}/>
-<StorybookDescriptions componentName={'Bars'} type={'action'}/>
-<Canvas of={Component.BarsBasic}/>
-<StorybookDescriptions componentName={'Bars'} type={'v-model'}/>
-<Canvas of={Component.BarsVModel}/>
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.BarsSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    slots: `
-<Canvas of={Component.BarsSlots}/>
-<StorybookDescriptions componentName={'Bars'} type={'slots'}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-    `
-  },
-  ai: {
-    description: `
-Structural header or toolbar component for pages, cards, and windows. Provides a consistent layout for titles, descriptions, and interactive action buttons.
-Features a built-in back navigation button, primary action button list (bars), and a specialized "action mode" for contextual states (e.g., selection). Supports skeleton loading and full button customization.
-Controlled via label/description props and action boolean for state switching. Use for top-level page headers, modal toolbars, or dynamic action bars that appear after item selection.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsBlock.ts

@@ -1,115 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Block component properties
- *
- * Описания свойств компонента Block
- */
-export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
-  name: 'Block',
-  description: {
-    en: 'A versatile structural component that serves as a container with support for labels, descriptions, captions, icons, and headlines',
-    ru: 'Универсальный структурный компонент, служащий контейнером с поддержкой меток, описаний, подписей, иконок и заголовков'
-  },
-  possibilities: {
-    en: [
-      'displaying a headline, label, description, and caption',
-      'support for icons',
-      'customizable HTML tag',
-      'flexible layout for content organization'
-    ],
-    ru: [
-      'отображение заголовка, метки, описания и подписи',
-      'поддержка иконок',
-      'настраиваемый HTML-тег',
-      'гибкая компоновка для организации контента'
-    ]
-  },
-  import: [],
-  render: `
-      <DesignComponent v-bind="args">
-        <p>
-          The Block component serves as a fundamental building unit for constructing complex user interfaces.
-          It provides a flexible container that can host various content elements such as labels, descriptions, and icons.
-        </p>
-        <p>
-          With its versatile design, the Block component adapts seamlessly to different layout requirements.
-          Whether you need a simple content wrapper or a detailed card with a headline and caption, this component handles it all.
-        </p>
-        <p>
-          Developers can easily customize the appearance and behavior of the Block using properties and slots.
-          This ensures that the component fits perfectly into any design system while maintaining consistency across the application.
-        </p>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'BlockBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <DesignComponent
-          headline="Account Settings"
-          label="Profile Information"
-          description="Manage your personal details and public profile presence."
-        >
-          <p>Welcome to your profile overview. Here you can update your name, bio, and contact information.</p>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'BlockSlots',
-      name: {
-        en: 'Slots usage',
-        ru: 'Использование слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #default>Default slot</template>
-          <template #headline>Headline slot</template>
-          <template #label>Label slot</template>
-          <template #description>Description slot</template>
-          <template #caption>Caption slot</template>
-          <template #trailing>Trailing slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Block'} type={'block'}/>
-<Canvas of={Component.BlockBasic}/>
-
-<StorybookDescriptions componentName={'Block'} type={'differences'}/>
-`,
-    slots: `
-<Canvas of={Component.BlockSlots}/>
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-<StorybookDescriptions componentName={'Slot'} type={'headline'}/>
-<StorybookDescriptions componentName={'Slot'} type={'label'}/>
-<StorybookDescriptions componentName={'Slot'} type={'description'}/>
-<StorybookDescriptions componentName={'Slot'} type={'caption'}/>
-<StorybookDescriptions componentName={'Slot'} type={'trailing'}/>
-`,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
-<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
-`
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Block v-bind="args">
-      Main content goes here.
-  </Block>
-</div>
-    `,
-    description: `
-Versatile structural container for organizing content with a standardized layout. Automatically arranges headlines, icons, labels, captions, and body content within a unified block element.
-Features support for custom HTML tags (e.g., section, article) and flexible slot-based content organization. Includes a dedicated headline area for section titles and a trailing slot for actions.
-Controlled primarily through content props (label, headline, description) or various slots (#default, #headline, #trailing). Use for card headers, complex list items, or clearly defined page sections.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsButton.ts

@@ -1,200 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Button component properties
- *
- * Описания свойств компонента Button
- */
-export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
-  name: 'Button',
-  description: {
-    en: 'Interactive button component for user actions',
-    ru: 'Интерактивный компонент кнопки для действий пользователя'
-  },
-  possibilities: {
-    en: [
-      'multiple visual variants for different use cases',
-      'different sizes from extra small to extra large',
-      'built-in accessibility support',
-      'focus, hover, and active states',
-      'disabled and loading states support',
-      'customizable styling through design tokens'
-    ],
-    ru: [
-      'множественные визуальные варианты для разных случаев использования',
-      'различные размеры от очень маленького до очень большого',
-      'встроенная поддержка доступности',
-      'состояния focus, hover и active',
-      'поддержка отключенного состояния и состояния загрузки',
-      'настраиваемая стилизация через токены дизайна'
-    ]
-  },
-  import: [],
-  stories: [
-    {
-      id: 'ButtonBasic',
-      name: {
-        en: 'Basic',
-        ru: 'Базовые'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent>Button</DesignComponent>
-          <DesignComponent icon="home">Button</DesignComponent>
-          <DesignComponent icon-trailing="arrow_forward">Button</DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'ButtonPrimary',
-      name: {
-        en: 'Primary',
-        ru: 'Основные (primary)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent primary>Button</DesignComponent>
-          <DesignComponent primary icon="home">Button</DesignComponent>
-          <DesignComponent primary selected>Button</DesignComponent>
-          <DesignComponent primary disabled>Button</DesignComponent>
-        </div>
-      `,
-      propsName: 'primary'
-    },
-    {
-      id: 'ButtonSecondary',
-      name: {
-        en: 'Secondary',
-        ru: 'Второстепенные (secondary)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent secondary>Button</DesignComponent>
-          <DesignComponent secondary icon="home">Button</DesignComponent>
-          <DesignComponent secondary selected>Button</DesignComponent>
-          <DesignComponent secondary disabled>Button</DesignComponent>
-        </div>
-      `,
-      propsName: 'secondary'
-    },
-    {
-      id: 'ButtonOutline',
-      name: {
-        en: 'Outline',
-        ru: 'Контурные (outline)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent outline>Button</DesignComponent>
-          <DesignComponent outline icon="home">Button</DesignComponent>
-          <DesignComponent outline selected>Button</DesignComponent>
-          <DesignComponent outline disabled>Button</DesignComponent>
-        </div>
-      `,
-      propsName: 'outline'
-    },
-    {
-      id: 'ButtonText',
-      name: {
-        en: 'Text',
-        ru: 'Текстовые (text)'
-      },
-      template: `
-        <div class="wiki-storybook-flex">
-          <DesignComponent text>Button</DesignComponent>
-          <DesignComponent text icon="home">Button</DesignComponent>
-          <DesignComponent text selected>Button</DesignComponent>
-          <DesignComponent text disabled>Button</DesignComponent>
-        </div>
-      `,
-      propsName: 'text'
-    },
-    {
-      id: 'ButtonAdaptive',
-      name: {
-        en: 'Adaptive',
-        ru: 'Адаптивные'
-      },
-      template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Default</div>
-            <DesignComponent icon="home" label="Button"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Adaptive</div>
-            <DesignComponent adaptive="fullSm" icon="home" label="Button"/>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--sm wiki-storybook-item--center wiki-storybook-container">
-            <div class="wiki-storybook-item__label">Container</div>
-            <DesignComponent container="fullSm" icon="home" label="Button"/>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'ButtonSkeleton',
-      name: {
-        en: 'Skeleton',
-        ru: 'Скелетон'
-      },
-      components: ['Skeleton'],
-      template: `
-        <DesignSkeleton :active="true">
-          <DesignComponent isSkeleton>Button</DesignComponent>
-        </DesignSkeleton>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Button'} type={'button'}/>
-<Canvas of={Component.ButtonBasic}/>
-
-<template prop="primary">
-<StorybookDescriptions componentName={'Button'} type={'primary'}/>
-<Canvas of={Component.ButtonPrimary}/>
-</template>
-
-<template prop="secondary">
-<StorybookDescriptions componentName={'Button'} type={'secondary'}/>
-<Canvas of={Component.ButtonSecondary}/>
-</template>
-
-<template prop="outline">
-<StorybookDescriptions componentName={'Button'} type={'outline'}/>
-<Canvas of={Component.ButtonOutline}/>
-</template>
-
-<template prop="text">
-<StorybookDescriptions componentName={'Button'} type={'text'}/>
-<Canvas of={Component.ButtonText}/>
-</template>
-
-<StorybookDescriptions componentName={'Value'} type={'value'}/>
-
-<StorybookDescriptions componentName={'Style'} type={'adaptive'}/>
-<Canvas of={Component.ButtonAdaptive}/>
-
-<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
-<Canvas of={Component.ButtonSkeleton}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Event'} type={'click'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Expose'} type={'value'}/>
-<StorybookDescriptions componentName={'Expose'} type={'detail'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'Slot'} type={'default'}/>
-    `
-  },
-  ai: {
-    description: `
-Fundamental interactive component for user actions, navigation, and form submission. Supports various visual styles (primary, secondary, outline, text), states, and content configurations.
-Features built-in support for icons (Material Symbols), loading spinners, and disabled/selected states. Includes native-like navigation via "to" (Vue Router) or "href" (external) props and supports skeleton loading.
-Highly customizable through design tokens and adaptive layout options. Controlled primarily via click events and various styling props. Use for call-to-actions, navigation links, or icon-only toggle buttons.
-    `
-  }
-}