@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/mdx/Page/page.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A top-level semantic container component designed to wrap the main content of a page. It uses the `<main>` tag by default.
+
+Page provides capabilities for displaying main headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate the unique part of the document's content, which is critical for accessibility and SEO. The headline is rendered as `<h1>` by default.
+
+**Key Features:**
+
+- Semantic wrapper for main content (`<main>` tag)
+- Support for main headlines (default `<h1>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Wrapper for unique page content
+- Main application screen
+- Article or documentation page
+- Root element for routed components (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Main Page Title"
+    label="Category"
+    description="Brief description of the page content"
+  >
+    <p>Unique page content...</p>
+  </Page>
+</template>
+```
+
+> Page should be used once per page (or per active view) and should not include repeated navigation elements.

package/src/media/mdx/Page/page.ru.mdx

@@ -0,0 +1,38 @@
+## Описание
+
+Семантический компонент-контейнер верхнего уровня, предназначенный для обертки основного содержимого страницы. По умолчанию использует тег `<main>`.
+
+Page предоставляет возможности для отображения главных заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение уникальной части содержимого документа, что критически важно для доступности (accessibility) и SEO. Заголовок по умолчанию рендерится как `<h1>`.
+
+**Основные возможности:**
+
+- Семантическая обертка основного контента (тег `<main>`)
+- Поддержка главных заголовков (по умолчанию `<h1>`), меток, описаний и подписей
+- Поддержка иконок
+- Настраиваемый макет и отступы
+- Полная поддержка слотов для кастомизации контента
+
+**Типичные сценарии использования:**
+
+- Обертка для уникального контента страницы
+- Главный экран приложения
+- Страница статьи или документации
+- Корневой элемент для маршрутизируемых компонентов (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Главный заголовок страницы"
+    label="Категория"
+    description="Краткое описание содержимого страницы"
+  >
+    <p>Уникальный контент страницы...</p>
+  </Page>
+</template>
+```
+
+> Page должен использоваться один раз на странице (или в активном view) и не должен включать повторяющиеся элементы навигации.

package/src/media/mdx/Page/wikiMdxPage.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import pageEn from './page.en.mdx'
+import pageRu from './page.ru.mdx'
+
+/**
+ * MDX files for Page component
+ *
+ * MDX файлы для компонента Page
+ */
+export const wikiMdxPage: StorybookComponentsMdxItem = {
+  name: 'Page',
+  descriptions: {
+    block: {
+      en: pageEn,
+      ru: pageRu
+    }
+  }
+}

package/src/media/mdx/Section/section.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A semantic container component designed for grouping related content. It uses the `<section>` tag by default.
+
+Section provides capabilities for displaying headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate thematic sections of a document, which improves the semantics and accessibility of the page. The headline is rendered as `<h2>` by default.
+
+**Key Features:**
+
+- Semantic content grouping (`<section>` tag)
+- Support for headlines (default `<h2>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Thematic page sections
+- Content grouping in articles
+- Information blocks with second-level headings
+- Landing page sections
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Section
+    headline="Section Headline"
+    label="Label"
+    description="Description of this section's content"
+  >
+    <p>Main section content...</p>
+  </Section>
+</template>
+```
+
+> Section is the semantically correct choice for dividing a page into large logical blocks.

package/src/media/mdx/Section/section.ru.mdx

@@ -0,0 +1,38 @@
+## Описание
+
+Семантический компонент-контейнер, предназначенный для группировки связанного контента. По умолчанию использует тег `<section>`.
+
+Section предоставляет возможности для отображения заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение тематических разделов документа, что улучшает семантику и доступность страницы. Заголовок по умолчанию рендерится как `<h2>`.
+
+**Основные возможности:**
+
+- Семантическая группировка контента (тег `<section>`)
+- Поддержка заголовков (по умолчанию `<h2>`), меток, описаний и подписей
+- Поддержка иконок
+- Настраиваемый макет и отступы
+- Полная поддержка слотов для кастомизации контента
+
+**Типичные сценарии использования:**
+
+- Тематические разделы страницы
+- Группировка контента в статьях
+- Информационные блоки с заголовками второго уровня
+- Секции лэндингов
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Section
+    headline="Заголовок секции"
+    label="Метка"
+    description="Описание содержимого данной секции"
+  >
+    <p>Основной контент секции...</p>
+  </Section>
+</template>
+```
+
+> Section — это семантически верный выбор для разделения страницы на крупные логические блоки.

package/src/media/mdx/Section/wikiMdxSection.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import sectionEn from './section.en.mdx'
+import sectionRu from './section.ru.mdx'
+
+/**
+ * MDX files for Section component
+ *
+ * MDX файлы для компонента Section
+ */
+export const wikiMdxSection: StorybookComponentsMdxItem = {
+  name: 'Section',
+  descriptions: {
+    section: {
+      en: sectionEn,
+      ru: sectionRu
+    }
+  }
+}

package/src/media/mdx/Skeleton/expose.isActive.en.mdx

@@ -1,24 +1 @@
-### `isActive`
-
-Computed property that provides access to the current activation state of the skeleton.
-
-**Type:** `ComputedRef<boolean>`
-
-**Purpose:** Reflects the current state of the component's `active` property. Useful for synchronizing state with parent components and programmatically controlling behavior of other elements.
-
-```html
-<template>
-  <Skeleton ref="skeletonRef" :active="isLoading">
-    <div class="skeleton__text">Loading content</div>
-  </Skeleton>
-
-  <p v-if="skeletonRef?.isActive">Loading...</p>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const skeletonRef = ref()
-const isLoading = ref(true)
-</script>
-```
+- `isActive: ComputedRef<boolean>` — Computed state indicating whether the skeleton background animation is active.

package/src/media/mdx/Skeleton/expose.isActive.ru.mdx

@@ -1,24 +1 @@
-### `isActive`
-
-Вычисляемое свойство, которое предоставляет доступ к текущему состоянию активности скелетона.
-
-**Тип:** `ComputedRef<boolean>`
-
-**Назначение:** Отражает текущее состояние свойства `active` компонента. Полезно для синхронизации состояния с родительскими компонентами и программного управления поведением других элементов.
-
-```html
-<template>
-  <Skeleton ref="skeletonRef" :active="isLoading">
-    <div class="skeleton__text">Загрузка контента</div>
-  </Skeleton>
-
-  <p v-if="skeletonRef?.isActive">Загрузка...</p>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const skeletonRef = ref()
-const isLoading = ref(true)
-</script>
-```
+- `isActive: ComputedRef<boolean>` — Вычисляемое состояние, указывающее активна ли фоновая анимация скелетона.

package/src/media/mdx/Snackbar/adaptation.en.mdx

@@ -0,0 +1,10 @@
+## Adaptation and Behavior
+
+The `all`, `full`, and `limit` property group allows for fine-tuning notification behavior for different device types and data volumes.
+
+**Features:**
+- `all` — displays all active notifications without automatically hiding them in a stack.
+- `full` — enables full-screen or full-width display, which is a standard pattern for mobile devices.
+- `limit` — limits the maximum number of simultaneously visible notifications, preventing screen clutter.
+
+> These properties are intended solely for configuring behavior and adaptation for different screen sizes. It is recommended to define these values in the `properties.json` configuration file.

package/src/media/mdx/Snackbar/adaptation.ru.mdx

@@ -0,0 +1,10 @@
+## Адаптация и поведение
+
+Группа свойств `all`, `full` и `limit` позволяет тонко настроить поведение уведомлений для различных типов устройств и объемов данных.
+
+**Особенности:**
+- `all` — отображает все активные уведомления без автоматического скрытия их в стек.
+- `full` — включает полноэкранное или полноширинное отображение, что является стандартным паттерном для мобильных устройств.
+- `limit` — ограничивает максимальное количество одновременно видимых уведомлений, предотвращая загромождение экрана.
+
+> Данные свойства предназначены исключительно для настройки поведения и адаптации под различные экраны. Рекомендуется задавать эти значения в конфигурационном файле `properties.json`.

package/src/media/mdx/Snackbar/add.en.mdx

@@ -0,0 +1,44 @@
+## Adding Notifications
+
+The primary interaction with the `Snackbar` component occurs through the `add` method, which is used to dynamically push new messages into the queue.
+
+### Method add()
+
+The component instance (via `ref`) provides a `data` object containing the `add(item: SnackbarValue)` method. The `item` parameter determines the configuration and behavior of the new notification.
+
+```typescript
+snackbar.value?.data.add({
+  data: {
+    label: 'Notification Title',
+    description: 'Description of the occurring event'
+  }
+})
+```
+
+### SnackbarValue Structure
+
+The configuration object includes the following properties:
+
+- **`data`** (`SnackbarItemProps`) — Properties for the rendered component (by default `SnackbarItem`). This is where you pass information like `label`, `description`, `icon`, action buttons, and other visual data.
+- **`component`** (`any`) — Allows for passing a custom Vue component to be rendered instead of the standard `SnackbarItem`.
+- **`highPriority`** (`boolean`) — If `true`, the notification is displayed in a separate priority container (usually pinned to the top or the start of the list).
+- **`delay`** (`number`) — Individual lifespan of the notification in milliseconds. If omitted, the global `delay` value from the `Snackbar` settings is used.
+- **`value`** (`string`) — A unique key for the notification. If omitted, it is generated automatically. Used for manual removal of the message via the `remove(value)` method.
+
+### Custom Components
+
+For notifications with non-standard layouts, you can pass your own component via the `component` property. All properties specified in the `data` object will be passed to your component as `props`.
+
+```typescript
+import MyAlert from './MyAlert.vue'
+
+snackbar.value?.data.add({
+  component: MyAlert,
+  data: {
+    title: 'Warning!',
+    message: 'This is a message with custom styling'
+  }
+})
+```
+
+The `highPriority` property is recommended for critical system notifications or authorization errors, ensuring they reliably catch the user's attention and are displayed separately from the general message flow.

package/src/media/mdx/Snackbar/add.ru.mdx

@@ -0,0 +1,44 @@
+## Добавление уведомлений
+
+Основной метод взаимодействия с компонентом `Snackbar` — добавление новых сообщений в очередь.
+
+### Метод add()
+
+Через инстанс компонента (`ref`) доступен объект `data`, предоставляющий метод `add(item: SnackbarValue)`. Параметр `item` определяет конфигурацию и поведение добавляемого уведомления.
+
+```typescript
+snackbar.value?.data.add({
+  data: {
+    label: 'Заголовок уведомления',
+    description: 'Описание происходящего события'
+  }
+})
+```
+
+### Структура SnackbarValue
+
+Объект конфигурации включает следующие свойства:
+
+- **`data`** (`SnackbarItemProps`) — параметры для отображаемого компонента (по умолчанию `SnackbarItem`). Здесь передаются заголовок (`label`), описание (`description`), иконка (`icon`), кнопки действий и прочие визуальные данные.
+- **`component`** (`any`) — позволяет передать пользовательский Vue-компонент для рендеринга вместо стандартного `SnackbarItem`.
+- **`highPriority`** (`boolean`) — при значении `true` уведомление отображается в отдельном приоритетном контейнере (обычно закрепленном сверху или в начале списка).
+- **`delay`** (`number`) — индивидуальное время жизни уведомления в миллисекундах. Если не указано, используется глобальное значение `delay` из настроек `Snackbar`.
+- **`value`** (`string`) — уникальный ключ уведомления. Если не передан, генерируется автоматически. Необходим для ручного удаления сообщения через метод `remove(value)`.
+
+### Использование кастомных компонентов
+
+Для вывода уведомлений с нестандартной версткой можно передать свой компонент через свойство `component`. При этом все свойства, указанные в объекте `data`, будут переданы в ваш компонент как `props`.
+
+```typescript
+import MyAlert from './MyAlert.vue'
+
+snackbar.value?.data.add({
+  component: MyAlert,
+  data: {
+    title: 'Внимание!',
+    message: 'Это сообщение в кастомном стиле'
+  }
+})
+```
+
+Свойство `highPriority` рекомендуется использовать для критических системных уведомлений или ошибок авторизации, чтобы они гарантированно привлекали внимание пользователя и отображались отдельно от общего потока сообщений.

package/src/media/mdx/Snackbar/event.hide.en.mdx

@@ -0,0 +1,12 @@
+### `hide`
+
+The event fires when a notification is hidden from the list.
+
+**When triggered:**
+- The notification display time has expired (automatic hiding)
+- The user or program initiated the removal of the notification
+- The notification list has been cleared
+
+**Arguments:**
+- `value`: `string` — Unique identifier of the notification
+- `item`: `SnackbarValue` — Notification data object

package/src/media/mdx/Snackbar/event.hide.ru.mdx

@@ -0,0 +1,12 @@
+### `hide`
+
+Событие срабатывает при скрытии уведомления из списка.
+
+**Когда срабатывает:**
+- Время отображения уведомления истекло (автоматическое скрытие)
+- Пользователь или программа инициировали удаление уведомления
+- Список уведомлений был очищен
+
+**Параметры:**
+- `value`: `string` — Уникальный идентификатор уведомления
+- `item`: `SnackbarValue` — Объект данных уведомления

package/src/media/mdx/Snackbar/event.show.en.mdx

@@ -0,0 +1,11 @@
+### `show`
+
+The event fires when a notification is displayed in the list.
+
+**When triggered:**
+- A new notification has been successfully added to the list
+- The notification has become visible to the user
+
+**Arguments:**
+- `value`: `string` — Unique identifier of the notification
+- `item`: `SnackbarValue` — Notification data object

package/src/media/mdx/Snackbar/event.show.ru.mdx

@@ -0,0 +1,11 @@
+### `show`
+
+Событие срабатывает при отображении уведомления в списке.
+
+**Когда срабатывает:**
+- Новое уведомление успешно добавлено в список
+- Уведомление стало видимым пользователю
+
+**Параметры:**
+- `value`: `string` — Уникальный идентификатор уведомления
+- `item`: `SnackbarValue` — Объект данных уведомления

package/src/media/mdx/Snackbar/expose.add.en.mdx

@@ -0,0 +1 @@
+- `add(item: SnackbarValue): void` — Method for adding a new notification to the queue.

package/src/media/mdx/Snackbar/expose.add.ru.mdx

@@ -0,0 +1 @@
+- `add(item: SnackbarValue): void` — Метод для добавления нового уведомления в очередь.

package/src/media/mdx/Snackbar/expose.clear.en.mdx

@@ -0,0 +1 @@
+- `clear(): void` — Method for completely clearing the notification queue.

package/src/media/mdx/Snackbar/expose.clear.ru.mdx

@@ -0,0 +1 @@
+- `clear(): void` — Метод для полной очистки очереди уведомлений.

package/src/media/mdx/Snackbar/expose.isItem.en.mdx

@@ -0,0 +1 @@
+- `isItem: ComputedRef<boolean>` — Computed state indicating whether there are messages in the queue to be displayed.

package/src/media/mdx/Snackbar/expose.isItem.ru.mdx

@@ -0,0 +1 @@
+- `isItem: ComputedRef<boolean>` — Вычисляемое состояние, указывающее, есть ли в очереди сообщения для отображения.

package/src/media/mdx/Snackbar/expose.remove.en.mdx

@@ -0,0 +1 @@
+- `remove(value: string): void` — Method for removing a notification by its identifier.

package/src/media/mdx/Snackbar/expose.remove.ru.mdx

@@ -0,0 +1 @@
+- `remove(value: string): void` — Метод для удаления уведомления по его идентификатору.

package/src/media/mdx/Snackbar/position.en.mdx

@@ -0,0 +1,10 @@
+## Positioning
+
+The `vertical`, `horizontal` and `origin` property group allows for determining the exact position of notifications on the screen and their entrance direction.
+
+**Features:**
+- `vertical` — defines the position along the vertical axis (`top`, `bottom`).
+- `horizontal` — manages the horizontal position of notifications and their width (`right`, `left`, `block`).
+- `origin` — sets the direction from which the notification will slide in (`topToBottom`, `bottomToTop`, `rightToLeft`, `leftToRight`).
+
+> These properties are intended solely for configuring behavior and adaptation for different screen sizes. It is recommended to define these values in the `properties.json` configuration file.

package/src/media/mdx/Snackbar/position.ru.mdx

@@ -0,0 +1,10 @@
+## Позиционирование
+
+Группа свойств `vertical`, `horizontal` и `origin` позволяет определить точное местоположение уведомлений на экране и направление их появления.
+
+**Особенности:**
+- `vertical` — определяет положение по вертикали (`top`, `bottom`).
+- `horizontal` — определяет положение по горизонтали (`right`, `left`, `block`).
+- `origin` — задает направление анимации появления (`topToBottom`, `bottomToTop`, `rightToLeft`, `leftToRight`).
+
+> Данные свойства предназначены исключительно для настройки поведения и адаптации под различные экраны. Рекомендуется задавать эти значения в конфигурационном файле `properties.json`.

package/src/media/mdx/Snackbar/snackbar.en.mdx

@@ -0,0 +1,46 @@
+## Description
+
+A component used to display temporary notifications (snackbars) in various parts of the screen. Snackbars provide brief messages about app processes at the bottom or top of the screen.
+
+Snackbar manages a message queue, automatically hiding notifications after a specified time or upon user interaction.
+
+**Key Features:**
+
+- Flexible positioning (top/bottom, left/right/block)
+- Configurable auto-hide delay (default 8 seconds)
+- Supports different entrance animations based on position
+- Active notification list management
+
+**Typical Usage Scenarios:**
+
+- Confirming user actions (e.g., "File saved erfolgreich")
+- Informing about errors or warnings
+- Real-time system notifications
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const snackbar = ref(null)
+
+const addMessage = () => {
+  snackbar.value?.data.add({
+    label: 'Notification Title',
+    description: 'Description of the event that occurred in the app.',
+    button: 'Ok'
+  })
+}
+</script>
+
+<template>
+  <Button label="Show Notification" @click="addMessage" />
+
+  <Snackbar
+    ref="snackbar"
+    vertical="bottom"
+    horizontal="right"
+  />
+</template>
+```
+
+> It is recommended to use Snackbar for non-critical information that does not require immediate user action.

package/src/media/mdx/Snackbar/snackbar.ru.mdx

@@ -0,0 +1,46 @@
+## Описание
+
+Компонент для отображения временных уведомлений (снекбаров) в различных частях экрана. Снекбары используются для предоставления кратких сообщений о процессах приложения в нижней или верхней части экрана.
+
+Snackbar управляет очередью сообщений, автоматически скрывая их по истечении заданного времени или при взаимодействии пользователя.
+
+**Основные возможности:**
+
+- Гибкое позиционирование (сверху/снизу, слева/справа/по центру)
+- Настраиваемая задержка автоматического скрытия (по умолчанию 8 секунд)
+- Поддержка различных анимаций появления в зависимости от позиции
+- Управление списком активных уведомлений
+
+**Типичные сценарии использования:**
+
+- Подтверждение действий пользователя (например, "Файл успешно сохранен")
+- Информирование об ошибках или предупреждениях
+- Системные уведомления в реальном времени
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const snackbar = ref(null)
+
+const addMessage = () => {
+  snackbar.value?.data.add({
+    label: 'Заголовок уведомления',
+    description: 'Описание события, которое произошло в приложении.',
+    button: 'Ок'
+  })
+}
+</script>
+
+<template>
+  <Button label="Показать уведомление" @click="addMessage" />
+
+  <Snackbar
+    ref="snackbar"
+    vertical="bottom"
+    horizontal="right"
+  />
+</template>
+```
+
+> Рекомендуется использовать Snackbar для второстепенной информации, которая не требует немедленного обязательного действия со стороны пользователя.

package/src/media/mdx/Snackbar/wikiMdxSnackbar.ts

@@ -0,0 +1,73 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import adaptationEn from './adaptation.en.mdx'
+import adaptationRu from './adaptation.ru.mdx'
+import addEn from './add.en.mdx'
+import addRu from './add.ru.mdx'
+import positionEn from './position.en.mdx'
+import positionRu from './position.ru.mdx'
+import snackbarEn from './snackbar.en.mdx'
+import snackbarRu from './snackbar.ru.mdx'
+import eventShowEn from './event.show.en.mdx'
+import eventShowRu from './event.show.ru.mdx'
+import eventHideEn from './event.hide.en.mdx'
+import eventHideRu from './event.hide.ru.mdx'
+import exposeIsItemEn from './expose.isItem.en.mdx'
+import exposeIsItemRu from './expose.isItem.ru.mdx'
+import exposeAddEn from './expose.add.en.mdx'
+import exposeAddRu from './expose.add.ru.mdx'
+import exposeRemoveEn from './expose.remove.en.mdx'
+import exposeRemoveRu from './expose.remove.ru.mdx'
+import exposeClearEn from './expose.clear.en.mdx'
+import exposeClearRu from './expose.clear.ru.mdx'
+
+/**
+ * MDX files for Snackbar component
+ *
+ * MDX файлы для компонента Snackbar
+ */
+export const wikiMdxSnackbar: StorybookComponentsMdxItem = {
+  name: 'Snackbar',
+  descriptions: {
+    'snackbar': {
+      en: snackbarEn,
+      ru: snackbarRu
+    },
+    'adaptation': {
+      en: adaptationEn,
+      ru: adaptationRu
+    },
+    'add': {
+      en: addEn,
+      ru: addRu
+    },
+    'position': {
+      en: positionEn,
+      ru: positionRu
+    },
+    'event.show': {
+      en: eventShowEn,
+      ru: eventShowRu
+    },
+    'event.hide': {
+      en: eventHideEn,
+      ru: eventHideRu
+    },
+    'expose.isItem': {
+      en: exposeIsItemEn,
+      ru: exposeIsItemRu
+    },
+    'expose.add': {
+      en: exposeAddEn,
+      ru: exposeAddRu
+    },
+    'expose.remove': {
+      en: exposeRemoveEn,
+      ru: exposeRemoveRu
+    },
+    'expose.clear': {
+      en: exposeClearEn,
+      ru: exposeClearRu
+    }
+  }
+}

package/src/media/mdx/SnackbarItem/component.en.mdx

@@ -0,0 +1,9 @@
+## Custom Component
+
+The `component` and `componentProps` properties allow you to insert a custom Vue component inside the SnackbarItem. This is useful when the standard fields (label, description) are not enough to display complex content.
+
+**Features:**
+- `component` — accepts a component object or its name.
+- `componentProps` — an object with props that will be passed to the component.
+
+The component is rendered inside a special container with the main content area class, ensuring proper padding and styling.