@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsAnchor.ts

@@ -0,0 +1,78 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Anchor component properties
+ *
+ * Описания свойств компонента Anchor
+ */
+export const wikiDescriptionsAnchor: StorybookComponentsDescriptionItem = {
+  name: 'Anchor',
+  description: {
+    en: 'Component for creating hyperlinks or anchor points for navigation',
+    ru: 'Компонент для создания гиперссылок или якорных точек для навигации'
+  },
+  possibilities: {
+    en: [
+      'creating links to other pages or resources',
+      'creating anchor points for internal page navigation',
+      'support for icons and text',
+      'customizable appearance'
+    ],
+    ru: [
+      'создание ссылок на другие страницы или ресурсы',
+      'создание якорных точек для внутренней навигации по странице',
+      'поддержка иконок и текста',
+      'настраиваемый внешний вид'
+    ]
+  },
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Anchor'} type={'anchor'}/>
+<StorybookDescriptions componentName={'Anchor'} type={'isCopy'}/>
+<StorybookDescriptions componentName={'Anchor'} type={'hide'}/>
+<StorybookDescriptions componentName={'Anchor'} type={'scroll'}/>
+`,
+    expose: `
+<StorybookDescriptions componentName={'Anchor'} type={'expose.go'}/>
+`,
+    slots: `
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+`
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Anchor href="#" v-bind="args"/>
+</div>
+    `,
+    description: `
+Anchor is a fundamental navigation component used to create hyperlinks and anchor points.
+It wraps the standard HTML \`<a>\` tag functionality with additional utilities for smooth scrolling and clipboard interactions.
+
+**Key Features:**
+1. **Navigation:**
+   - Handles standard navigation via \`href\`.
+   - Can be used for both internal (router) and external links.
+
+2. **Smooth Scrolling:**
+   - The \`scroll\` prop enables smooth scrolling animation when navigating to an element ID (e.g., \`href="#section"\`).
+
+3. **Clipboard Interaction:**
+   - The \`isCopy\` prop turns the component into a trigger that copies the link or value to the clipboard.
+
+4. **Slots:**
+   - \`#default\`: The content of the link (text, icons, or other elements).
+
+**Usage Examples:**
+
+- **Basic Link:**
+  \`<Anchor href="/about">About Us</Anchor>\`
+
+- **Scroll to Anchor:**
+  \`<Anchor href="#contact" scroll>Contact</Anchor>\`
+
+- **Copy Link:**
+  \`<Anchor href="https://example.com" is-copy>Copy URL</Anchor>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsArrow.ts

@@ -0,0 +1,214 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Arrow component properties
+ *
+ * Описания свойств компонента Arrow
+ */
+export const wikiDescriptionsArrow: StorybookComponentsDescriptionItem = {
+  name: 'Arrow',
+  description: {
+    en: 'Component for displaying an arrow or directional indicator',
+    ru: 'Компонент для отображения стрелки или индикатора направления'
+  },
+  possibilities: {
+    en: [
+      'displaying directional arrows',
+      'customizable size and color',
+      'rotation support'
+    ],
+    ru: [
+      'отображение направляющих стрелок',
+      'настраиваемый размер и цвет',
+      'поддержка вращения'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  render: `
+      <div class="wiki-storybook-item wiki-storybook-item--rectangle wiki-storybook-item--center">
+        <div>
+          <div
+            style="
+              width: 256px;
+              margin-bottom: 32px;
+              margin-left: 32px;
+            "
+          >
+            <div
+              id="id-arrow-target"
+              style="
+                padding: 8px;
+                width: min-content;
+                border-radius: 8px;
+                background-color: oklch(90.2% 0.063 306.703);
+              "
+            >
+              Target
+            </div>
+          </div>
+          <div
+            style="
+              position: relative;
+              width: 256px;
+              height: 128px;
+              border-radius: 16px;
+              background-color: oklch(93.2% 0.032 255.585);
+              border: 2px solid oklch(80.9% 0.105 251.813);
+              box-shadow: 0 0 8px oklch(0.281 0.092 268.132 / 0.32);
+            "
+          >
+            <DesignComponent v-bind="args"/>
+          </div>
+        </div>
+      </div>
+    `,
+  stories: [
+    {
+      id: 'ArrowBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      setup: `
+      const elementBasic = ref()
+      const elementTarget = ref()
+      const elementArray = ref()
+
+      const x = ref('0px')
+      const y = ref('0px')
+
+      const onClick = (event: PointerEvent) => {
+        if (elementBasic.value) {
+          const rect = elementBasic.value.getBoundingClientRect()
+          let offsetX = 0
+          let offsetY = 0
+
+          if (elementTarget.value) {
+            const targetRect = elementTarget.value.getBoundingClientRect()
+            offsetX = targetRect.width / 2
+            offsetY = targetRect.height / 2
+          }
+
+          x.value = (event.clientX - rect.left - offsetX) + 'px'
+          y.value = (event.clientY - rect.top - offsetY) + 'px'
+
+          requestAnimationFrame(() => elementArray.value?.update())
+        }
+      }
+
+      return {
+        elementBasic,
+        elementTarget,
+        elementArray,
+        x,
+        y,
+        onClick
+      }
+      `,
+      template: `
+        <div
+          class="wiki-storybook-item wiki-storybook-item--rectangle wiki-storybook-item--center"
+          style="cursor: crosshair;"
+          @click="onClick"
+        >
+          <div>
+            <div
+              style="
+              opacity: 0.5;
+              font-size: 14px;
+              margin-bottom: 8px;
+              text-align: center;
+            "
+            >
+              Click to move target
+            </div>
+            <div
+              ref="elementBasic"
+              style="
+              position: relative;
+              margin-bottom: 96px;
+              margin-left: 32px;
+              z-index: 32;
+            "
+            >
+              <div
+                ref="elementTarget"
+                id="id-arrow-target-2"
+                style="
+                position: absolute;
+                padding: 8px;
+                width: min-content;
+                border-radius: 8px;
+                background-color: oklch(90.2% 0.063 306.703);
+                text-wrap: nowrap;
+                pointer-events: none;
+              "
+                :style="{left: x, top: y}"
+              >
+                Target Element Example
+              </div>
+            </div>
+            <div
+              style="
+              position: relative;
+              width: 256px;
+              height: 128px;
+              border-radius: 16px;
+              background-color: oklch(93.2% 0.032 255.585);
+              border: 2px solid oklch(80.9% 0.105 251.813);
+              box-shadow: 0 0 8px oklch(0.281 0.092 268.132 / 0.32);
+            "
+            >
+              <DesignComponent
+                ref="elementArray"
+                position="auto"
+                element-target="#id-arrow-target-2"
+              />
+            </div>
+          </div>
+        </div>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Arrow'} type={'arrow'}/>
+<Canvas of={Component.ArrowBasic}/>
+`
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item" style="position: relative; width: 48px; height: 48px; background-color: oklch(93.2% 0.032 255.585);">
+    <Arrow position="top" v-bind="args"/>
+</div>
+    `,
+    description: `
+Arrow is a functional component that renders a triangular pointer connecting a container (like a tooltip, popover, or dropdown) to a target element.
+It is designed to automatically blend with the parent container's styles (background, border) to create a seamless speech-bubble effect.
+
+**Key Features:**
+1. **Target Linking:** Points to a specific DOM element defined by \`elementTarget\` (selector or HTMLElement).
+2. **Auto-Positioning:** Automatically calculates the correct placement (top, bottom, left, right) relative to the container and the target.
+3. **Style Inheritance:** Inherits \`background-color\`, \`border-color\`, and \`border-width\` from the parent element to match the container's visual style perfectly.
+4. **Reactive Updates:** Updates its position when the target or container moves (often used within \`Window\` or floating UI components).
+
+**When to use:**
+- Inside **Tooltips** to point to the hovered element.
+- Inside **Popovers** or **Dropdowns** to indicate the trigger source.
+- For any floating UI that needs a directional indicator.
+
+**Usage Examples:**
+
+- **Basic Tooltip Arrow:**
+  \`<div class="tooltip">
+     Message
+     <Arrow element-target="#button-id" />
+   </div>\`
+
+- **With Auto Positioning:**
+  \`<Arrow position="auto" element-target=".target-element" />\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsBadge.ts

@@ -134,5 +134,48 @@ export const wikiDescriptionsBadge: StorybookComponentsDescriptionItem = {
     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: `
+Badge is a small visual indicator used to display status, counts, or short labels (tags).
+It is typically positioned over the corner of another element (like an icon or avatar) or used inline.
+
+**Key Features:**
+1. **Content Handling:**
+   - **Numeric:** Displays numbers via \`label\`. Use \`labelMax\` to cap the value (e.g., "99+").
+   - **Text:** Displays short text strings.
+   - **Icon:** Can display an icon via the \`icon\` prop.
+   - **Dot:** If \`dot\` is true, renders as a small circle without text (status indicator).
+
+2. **Positioning (\`overlap\`):**
+   - \`static\`: Renders inline (default flow).
+   - \`rectangular\`: Positioned absolutely over a rectangular parent.
+   - \`circular\`: Positioned absolutely over a circular parent (adjusts coordinates).
+   - **Alignment:** Controlled by \`vertical\` (top/bottom) and \`horizontal\` (right/left).
+
+3. **Styling:**
+   - Supports variants: \`primary\`, \`secondary\`, \`outline\`.
+   - \`hide\`: Toggles visibility.
+   - \`dot\`: Switches to dot mode.
+
+**Usage Examples:**
+
+- **Notification Count:**
+  \`<div class="relative-container">
+     <Icon name="notifications" />
+     <Badge label="5" overlap="circular" vertical="top" horizontal="right" />
+   </div>\`
+
+- **Status Dot:**
+  \`<Badge dot primary />\`
+
+- **Inline Tag:**
+  \`<Badge label="New" overlap="static" />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsBars.ts

@@ -136,5 +136,38 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
     `
+  },
+  ai: {
+    description: `
+Bars is a structural component used as a header, toolbar, or action bar.
+It typically sits at the top of a page, card, or window to provide context (title) and actions.
+
+**Key Features:**
+1. **Content Structure:**
+   - \`label\`: The main title (e.g., page name).
+   - \`description\`: Subtitle or additional context.
+   - \`backButton\`: Configuration for the navigation button on the left (e.g., arrow back, menu).
+
+2. **Action Buttons (\`bars\`):**
+   - Accepts an array of button configurations (props for \`Button\` component).
+   - Rendered on the right side.
+   - Useful for primary page actions (Search, Filter, Settings).
+
+3. **Action Mode (Contextual State):**
+   - Activated via \`action\` prop (boolean).
+   - Switches the UI to a specific state (e.g., when items are selected in a list).
+   - **Overrides:**
+     - \`label\` -> \`actionLabel\`
+     - \`description\` -> \`actionDescription\`
+     - \`bars\` -> \`actionBars\`
+   - The back button usually transforms into a "Close" or "Cancel" action in this mode.
+
+**Usage Examples:**
+
+- **Standard Header:** \`<Bars label="Dashboard" :bars="[{ icon: 'notifications' }]" />\`
+- **With Back Button:** \`<Bars label="Settings" :back-button="{ icon: 'arrow_back' }" />\`
+- **Contextual Action Bar:**
+  \`<Bars :action="selectedCount > 0" :action-label="\`\${selectedCount} selected\`" :action-bars="[{ icon: 'delete' }]" />\`
+      `
   }
 }

package/src/media/descriptions/wikiDescriptionsBlock.ts

@@ -0,0 +1,159 @@
+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: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            Simple content wrapper
+          </DesignComponent>
+          <DesignComponent label="User Profile" description="Manage your personal information">
+            <button class="wiki-storybook-button">Edit Profile</button>
+          </DesignComponent>
+          <DesignComponent headline="Notifications" label="Settings">
+            <label><input type="checkbox" checked> Email Notifications</label>
+          </DesignComponent>
+          <DesignComponent icon="home" label="Dashboard">
+            <p>Welcome to your dashboard overview.</p>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      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}/>
+`,
+    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: `
+Block is a versatile structural component used to organize content with a standardized layout.
+It acts as a container that automatically arranges headers, labels, descriptions, icons, and body content.
+
+**Key Features:**
+1. **Layout Structure:**
+   - **Headline:** Top-most text area (prop \`headline\` or slot \`#headline\`).
+   - **Header Area:** Contains the icon, label, caption, and trailing actions.
+   - **Description:** Text block below the header.
+   - **Content:** The \`#default\` slot allows placing custom content inside the block.
+
+2. **Content Props:**
+   - \`label\`: Main title.
+   - \`caption\`: Auxiliary text next to or below the label.
+   - \`description\`: Detailed text description.
+   - \`icon\`: Visual indicator (icon name).
+   - \`headline\`: Section heading above the main header.
+
+3. **Customization:**
+   - \`tag\`: Changes the root HTML element (e.g., \`section\`, \`article\`, \`div\`).
+   - \`#trailing\`: Slot for actions or content on the right side of the header.
+
+**When to use:**
+- **Cards:** To structure the header and content of a card.
+- **List Items:** For complex list items with icons and text.
+- **Sections:** To define titled sections within a page or modal.
+
+**Usage Examples:**
+
+- **Simple Card Header:**
+  \`<Block label="Card Title" description="Subtitle text" icon="info" />\`
+
+- **Section with Content:**
+  \`<Block headline="Section 1" label="Details">
+     <p>Custom content...</p>
+   </Block>\`
+
+- **List Item with Action:**
+  \`<Block label="Item Name" caption="Status: Active">
+     <template #trailing>
+       <button>Edit</button>
+     </template>
+   </Block>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsButton.ts

@@ -181,7 +181,6 @@ export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
     `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
@@ -190,5 +189,37 @@ export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Button is a fundamental interactive component used for user actions, navigation, and submitting forms.
+It supports various visual styles, states, and content configurations.
+
+**Key Features:**
+1. **Content:**
+   - \`label\`: The text displayed inside the button.
+   - \`icon\`: Name of the icon to display *before* the label (Material Symbols).
+   - \`iconTrailing\`: Name of the icon to display *after* the label.
+
+2. **States:**
+   - \`disabled\`: Prevents user interaction and visually grays out the button.
+   - \`selected\`: Indicates an active or toggled state.
+   - \`loading\`: Replaces content or adds a spinner to indicate processing.
+
+3. **Navigation:**
+   - \`to\`: Vue Router path. Renders as an \`<a>\` tag or uses router push.
+   - \`href\`: External URL. Renders as an \`<a>\` tag.
+
+4. **Sizing & Layout:**
+   - \`adaptive\`: Makes the button fill the container width or adapt to specific breakpoints.
+
+**Usage Examples:**
+
+- **Main Action:** \`<Button label="Confirm" primary icon="check" />\`
+- **Secondary Action:** \`<Button label="Cancel" secondary />\`
+- **Navigation:** \`<Button label="Read More" to="/details" text iconTrailing="arrow_forward" />\`
+- **Icon Only:** \`<Button icon="menu" text />\` (Ensure aria-label is provided for accessibility)
+- **Loading:** \`<Button label="Saving..." primary loading />\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsCell.ts

@@ -96,11 +96,12 @@ export const wikiDescriptionsCell: StorybookComponentsDescriptionItem = {
 `,
     events: `
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
-<StorybookDescriptions componentName={'Event'} type={'clickLite'}/>
     `,
     expose: `
 <StorybookDescriptions componentName={'Expose'} type={'value'}/>
 <StorybookDescriptions componentName={'Expose'} type={'detail'}/>
+<StorybookDescriptions componentName={'Expose'} type={'labelId'}/>
+<StorybookDescriptions componentName={'Expose'} type={'descriptionId'}/>
     `,
     slots: `
 <Canvas of={Component.CellSlots}/>
@@ -109,5 +110,29 @@ export const wikiDescriptionsCell: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Cell'} type={'slots'}/>
 `
+  },
+  ai: {
+    description: `
+Cell is a universal list item component used for building menus, settings panels, and data lists.
+It provides a structured layout with slots for icons, text content, and actions.
+
+**Structure:**
+1. **Icon (Left):** Defined by \`icon\` prop.
+2. **Context (Center):**
+   - **Label:** Main text/title (prop \`label\`).
+   - **Caption:** Small text above/below the label (prop \`caption\`).
+   - **Description:** Secondary text below the label (prop \`description\`).
+3. **Trailing (Right):** Slot \`#trailing\` for actions (switch, checkbox, button) or meta-info.
+4. **Body:** Slot \`#body\` for additional content below the main row.
+
+**Key Features:**
+- **Interactive:** Supports \`to\`, \`href\`, and click events with Ripple effect.
+- **States:** Handles \`disabled\`, \`selected\`, and \`loading\` (skeleton) states.
+
+**When to use:**
+- **List Items:** For navigation menus or settings.
+- **Data Rows:** To display structured data entities.
+- **Action Items:** Clickable rows with icons and text.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsChip.ts

@@ -217,5 +217,47 @@ export const wikiDescriptionsChip: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
     `
+  },
+  ai: {
+    description: `
+Chip is a compact interactive element used for inputs, attributes, or actions.
+It allows users to enter information, make selections, filter content, or trigger actions.
+
+**Key Features:**
+1. **Variants:**
+   - **Action (Default):** Triggers an action or displays a read-only tag.
+   - **Input (\`input\`):** Represents a complex piece of information, such as an entity (person, place, or thing) or text, often used in input fields.
+   - **Assistive (\`assistive\`):** Provides suggestions or smart replies to the user.
+   - **Filter (via \`selected\`):** Allows users to select multiple options from a set.
+
+2. **Content & Styling:**
+   - **Label:** Main text content (prop \`label\` or default slot).
+   - **Icon:** Leading icon (prop \`icon\`).
+   - **State:** Supports \`selected\` (active/checked) and \`disabled\` states.
+
+3. **Interaction:**
+   - Emits \`click\` events with \`value\` and \`detail\` data.
+   - Can be used as a toggle button.
+
+**When to use:**
+- **Filters:** To allow users to refine search results.
+- **Choice:** To select one or multiple options (like radio buttons or checkboxes but more compact).
+- **Action:** To trigger immediate actions (e.g., "Play", "Save").
+- **Input:** To display tags or contacts in a form.
+
+**Usage Examples:**
+
+- **Basic Action:**
+  \`<Chip icon="settings">Settings</Chip>\`
+
+- **Filter Chip (Selected):**
+  \`<Chip icon="check" selected>Completed</Chip>\`
+
+- **Input Tag:**
+  \`<Chip input>Vue.js</Chip>\`
+
+- **Assistive Suggestion:**
+  \`<Chip assistive icon="lightbulb">Did you mean...?</Chip>\`
+    `
   }
 }