@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsPage.ts

@@ -0,0 +1,155 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Page component properties
+ *
+ * Описания свойств компонента Page
+ */
+export const wikiDescriptionsPage: StorybookComponentsDescriptionItem = {
+  name: 'Page',
+  description: {
+    en: 'A top-level semantic container component representing the main content of a document. It uses the <main> tag by default and supports high-level headers and descriptions.',
+    ru: 'Семантический компонент-контейнер верхнего уровня, представляющий основное содержимое документа. По умолчанию использует тег <main> и поддерживает заголовки высокого уровня.'
+  },
+  possibilities: {
+    en: [
+      'semantic wrapper for main content using <main> tag',
+      'support for main titles (h1 by default), labels, descriptions, and captions',
+      'customizable layout and spacing',
+      'support for icons',
+      'flexible content organization'
+    ],
+    ru: [
+      'семантическая обертка для основного контента с использованием тега <main>',
+      'поддержка главных заголовков (h1 по умолчанию), меток, описаний и подписей',
+      'настраиваемый макет и отступы',
+      'поддержка иконок',
+      'гибкая организация контента'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args">
+        <p>
+          The Page component is designed to wrap the unique content of a document.
+          It defaults to using the <code>&lt;main&gt;</code> HTML tag, ensuring that the primary content is correctly identified by assistive technologies and search engines.
+        </p>
+        <p>
+          It provides a comprehensive set of features for page-level content presentation, including headlines, labels, descriptions, and icons.
+          The default tag for the headline is set to <code>&lt;h1&gt;</code>, establishing the top-level heading for the page.
+        </p>
+        <p>
+          Use Page to encapsulate the core content of your view, separating it from repeated elements like navigation bars or footers.
+        </p>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'PageBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            <p>Simple page content wrapper.</p>
+          </DesignComponent>
+          <DesignComponent label="Documentation" description="Learn how to use the library">
+            <p>Welcome to the documentation page.</p>
+          </DesignComponent>
+          <DesignComponent headline="Dashboard Overview" label="Analytics">
+            <div style="height: 100px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
+              Chart Placeholder
+            </div>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'PageSlots',
+      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={'Page'} type={'block'}/>
+<Canvas of={Component.PageBasic}/>
+`,
+    slots: `
+<Canvas of={Component.PageSlots}/>
+<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">
+  <Page v-bind="args">
+      Main page content.
+  </Page>
+</div>
+    `,
+    description: `
+Page is a top-level structural component designed to wrap the main content of a view or document.
+It acts as a semantic container (typically rendering a \`<main>\` tag) and provides a standardized header structure.
+It inherits all functionality from the \`Block\` component.
+
+**Key Features:**
+1. **Semantic Structure:**
+   - Represents the main content area of the application.
+   - Provides a consistent layout for page headers.
+
+2. **Header Layout:**
+   - **Headline:** High-level category or breadcrumb-like text.
+   - **Label:** The primary page title.
+   - **Description:** Subtitle or page summary.
+   - **Icon:** Page icon.
+   - **Trailing:** Area for page-level actions (e.g., "Save", "Edit").
+
+3. **Customization:**
+   - Supports all \`Block\` props.
+   - Flexible content slot (\`#default\`).
+
+**When to use:**
+- As the root container for a route or view.
+- To provide a consistent title and action bar for a page.
+
+**Usage Examples:**
+
+- **Standard Page:**
+  \`<Page label="Home" description="Welcome back">
+     <DashboardWidgets />
+   </Page>\`
+
+- **Page with Actions:**
+  \`<Page headline="Settings" label="Profile">
+     <template #trailing>
+       <button>Save Changes</button>
+     </template>
+     <ProfileForm />
+   </Page>\`
+    `
+  }
+}

package/src/media/descriptions/wikiDescriptionsProgress.ts

@@ -196,5 +196,44 @@ export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Progress'} type={'delays'}/>
 <Canvas of={Component.ProgressDelays}/>
     `
+  },
+  ai: {
+    render: `
+<div
+  :class="classDemo.item"
+  style="position: relative; width: 64px; height: 40px;"
+>
+  <Progress v-bind="args"/>
+</div>
+    `,
+    description: `
+Progress is a component for indicating the status of a process.
+It supports both linear and circular styles and can represent determinate (known percentage) or indeterminate (loading) states.
+
+**Key Features:**
+1. **Type:**
+   - \`linear\`: A horizontal bar. Standard for page loading, file uploads, or headers.
+   - \`circular\`: A spinner ring. Standard for button actions, block loading, or overlays.
+
+2. **State:**
+   - **Determinate:** Set \`value\` (number) and optionally \`max\`. Used when the progress percentage is known.
+   - **Indeterminate:** Set \`indeterminate\` ('type1', 'type2', 'type3'). Used when the wait time is unknown.
+
+3. **Positioning (\`position\`):**
+   - \`static\` (default): Renders in the normal document flow.
+   - \`top\`: Absolutely positioned at the top of the parent container.
+   - \`bottom\`: Absolutely positioned at the bottom of the parent container.
+
+4. **Styling:**
+   - \`dense\`: Reduces the height/size of the indicator.
+   - \`inverse\`: Adjusts colors for dark backgrounds.
+   - \`point\`: Adds a pulsing dot at the end of the bar (linear only).
+
+**Usage Examples:**
+
+- **Linear Indeterminate (Page Load):** \`<Progress linear indeterminate="type1" position="top" visible />\`
+- **Circular Determinate (Upload):** \`<Progress circular :value="45" visible />\`
+- **Button Loading:** \`<Progress circular dense indeterminate="type2" visible />\` (inside a button)
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsRipple.ts

@@ -3,16 +3,16 @@ import type { StorybookComponentsDescriptionItem } from '../../types/storybookTy
 export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
   name: 'Ripple',
   description: {
-    en: 'Component for creating ripple wave effect on click interactions',
+    en: 'Component for creating a ripple wave effect on click interactions',
     ru: 'Компонент для создания эффекта волны при взаимодействии с элементом'
   },
   possibilities: {
     en: [
-      'creates ripple wave effect on click',
+      'it creates a ripple wave effect on click',
       'automatic positioning based on click coordinates',
       'disabling effect with `disabled` property',
       'Material Design inspired animation',
-      'works with any interactive elements'
+      'it works with any interactive elements'
     ],
     ru: [
       'создает эффект волны при клике',
@@ -33,5 +33,44 @@ export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Ripple'} type={'ripple'}/>
     `
+  },
+  ai: {
+    render: `
+<div
+  :class="classDemo.item"
+  style="position: relative; width: 64px; height: 48px;"
+>
+  <Ripple v-bind="args"/>
+</div>
+    `,
+    description: `
+**Note:** This is a low-level decorative component. You should not use it directly.
+          It is automatically integrated into interactive components like \`Button\`, \`ListItem\`,
+          and \`Card\` to provide feedback. This documentation is for informational purposes.
+
+Ripple is a decorative component that adds a Material Design-style wave effect to provide
+visual feedback on user interaction (clicks, taps). It should be placed inside an interactive container.
+
+**Key Features:**
+1.  **Placement:** It is designed to be placed as the last child inside a host element
+                   (like a button, card, or list item). The host element MUST have \`position:
+                   relative\` and \`overflow: hidden\` for the effect to work correctly.
+
+2.  **Automatic Effect:** The ripple animation starts automatically from the point of a \`pointerdown\`
+                          event (click or tap) on its parent container.
+
+3.  **Self-Managing:** The component handles the creation, animation (expansion and fade-out),
+                       and removal of ripple elements from the DOM automatically.
+
+4.  **Styling:** The ripple's color is determined by the CSS \`color\` property of its host element
+                 (\`currentColor\`). It can be styled by changing the text color of the parent.
+
+5.  **Control:** The effect can be completely disabled by passing the \`disabled: true\` prop.
+
+**When to Use:**
+- Use inside buttons, cards, list items, or any other clickable surface to provide clear,
+  tangible feedback that the user's action was registered.
+- It is purely a visual enhancement and adds no functionality on its own.
+`
   }
 }

package/src/media/descriptions/wikiDescriptionsScrollbar.ts

@@ -66,5 +66,53 @@ export const wikiDescriptionsScrollbar: StorybookComponentsDescriptionItem = {
     events: `
 <StorybookDescriptions componentName={'Scrollbar'} type={'emits'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Scrollbar v-bind="args" style="height: 128px">
+    <h3>Modern Web Interfaces and User Experience Design</h3>
+    <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>
+
+    <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>
+
+    <h4>Principles of Effective Design Implementation</h4>
+    <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>
+
+    <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>
+  </Scrollbar>
+</div>
+    `,
+    description: `
+Scrollbar is a structural component that wraps content to provide custom scrolling behavior and visual indicators.
+It is designed to handle overflow content within a fixed-height container, adding dynamic dividers (borders) that indicate scroll position.
+
+**Key Features:**
+1. **Scroll Indicators (Dividers):**
+   - Automatically detects scroll position.
+   - Displays a top divider when scrolled down.
+   - Displays a bottom divider when there is more content below.
+   - Configurable via props (e.g., \`divider\`, \`border\`).
+
+2. **Layout:**
+   - Renders as a block container (default \`div\`).
+   - Must have a defined height or max-height (inherited or set) to enable scrolling.
+
+3. **Usage:**
+   - Essential for **Modals**, **Dropdowns**, and **Sidebars** where content length varies.
+   - Provides visual cues to users that more content is available.
+
+**Usage Examples:**
+
+- **Basic Scroll Area:**
+  \`<Scrollbar style="height: 200px">
+     <p>Long content...</p>
+   </Scrollbar>\`
+
+- **With Custom Tag:**
+  \`<Scrollbar tag="section" class="my-scroll-area">
+     <List :list="items" />
+   </Scrollbar>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsSection.ts

@@ -0,0 +1,152 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Section component properties
+ *
+ * Описания свойств компонента Section
+ */
+export const wikiDescriptionsSection: StorybookComponentsDescriptionItem = {
+  name: 'Section',
+  description: {
+    en: 'A semantic container component designed to group related content with support for headers, descriptions, and flexible layout options. It uses the <section> tag by default.',
+    ru: 'Семантический компонент-контейнер, предназначенный для группировки связанного контента с поддержкой заголовков, описаний и гибких настроек макета. По умолчанию использует тег <section>.'
+  },
+  possibilities: {
+    en: [
+      'semantic grouping of content using <section> tag',
+      'support for titles (h2 by default), labels, descriptions, and captions',
+      'customizable layout and spacing',
+      'support for icons',
+      'flexible content organization'
+    ],
+    ru: [
+      'семантическая группировка контента с использованием тега <section>',
+      'поддержка заголовков (h2 по умолчанию), меток, описаний и подписей',
+      'настраиваемый макет и отступы',
+      'поддержка иконок',
+      'гибкая организация контента'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args">
+        <p>
+          The Section component is a fundamental building block for structuring web pages.
+          It defaults to using the <code>&lt;section&gt;</code> HTML tag, making it semantically appropriate for grouping thematic content.
+        </p>
+        <p>
+          It provides a rich set of features for content presentation, including headlines, labels, descriptions, and icons.
+          The default tag for the headline is set to <code>&lt;h2&gt;</code>, which fits the typical document outline structure.
+        </p>
+        <p>
+          Use Section to divide your page into distinct thematic areas, improving both the visual structure and the accessibility of your application.
+        </p>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'SectionBasic',
+      name: {
+        en: 'Basic',
+        ru: 'Базовые'
+      },
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <DesignComponent>
+            <p>Generic section content without header.</p>
+          </DesignComponent>
+          <DesignComponent label="Contact Information" description="Get in touch with us">
+            <p>Email: support@example.com</p>
+            <p>Phone: +1 234 567 890</p>
+          </DesignComponent>
+          <DesignComponent headline="Our Services" label="What we do">
+            <ul>
+              <li>Web Development</li>
+              <li>Mobile Apps</li>
+              <li>UI/UX Design</li>
+            </ul>
+          </DesignComponent>
+        </div>
+      `
+    },
+    {
+      id: 'SectionSlots',
+      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={'Section'} type={'block'}/>
+<Canvas of={Component.SectionBasic}/>
+`,
+    slots: `
+<Canvas of={Component.SectionSlots}/>
+<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">
+  <Section v-bind="args">
+      Content of the section.
+  </Section>
+</div>
+    `,
+    description: `
+Section is a structural component used to divide a page into distinct thematic areas.
+It is a semantic alias for the \`Block\` component, inheriting all its layout and styling capabilities.
+
+**Key Features:**
+1. **Structure:**
+   - **Headline:** Top-level category text (\`headline\`).
+   - **Header:** Contains Icon, Label (Title), Caption, and Trailing actions.
+   - **Description:** Subtitle or explanatory text.
+   - **Content:** The main body of the section.
+
+2. **Usage:**
+   - Use \`Section\` to group related content within a Page.
+   - It provides a consistent header structure for page blocks.
+
+3. **Props & Slots:**
+   - Inherits all props from \`Block\` (\`label\`, \`icon\`, \`tag\`, etc.).
+   - Supports slots: \`#headline\`, \`#trailing\`, \`#default\`.
+
+**Usage Examples:**
+
+- **Standard Section:**
+  \`<Section headline="Account" label="Profile Settings">
+     <ProfileForm />
+   </Section>\`
+
+- **Section with Actions:**
+  \`<Section label="Recent Activity">
+     <template #trailing>
+       <button>View All</button>
+     </template>
+     <ActivityList />
+   </Section>\`
+    `
+  }
+}