@dxtmisha/scripts 0.4.7 → 0.5.1

package/src/media/templates/componentPrompt.ru.txt

@@ -1,539 +0,0 @@
-Нужно подготовить документацию для компонента на языке [wikiLanguage].
-Следуй строго формату и требованиям ниже.
-Не добавляй ничего лишнего вне описанного.
-Стек: Storybook 9.x, TypeScript, MDX, Vue 3 Composition API.
-
-Canvas компонент импортируется из '@storybook/addon-docs/blocks'
-
-====================================
-1) Изучи текущий код компонента
-====================================
-```
-[code]
-```
-
-Проанализируй:
-- Структуру компонента (props, computed, methods)
-- События (emit) и их параметры
-- Слоты (slots) и их параметры
-- Типы данных (interfaces, types)
-- Expose методы и свойства
-- Внутреннюю логику и поведение
-- Зависимости от других компонентов
-
-====================================
-2) Добавь недостающие комментарии к типам
-====================================
-Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и их свойствам.
-
-Код для исправления:
-```ts
-// types.ts
-[types]
-```
-
-Требования к комментариям:
-- Однострочные для простых полей (/** Описание */)
-- Многострочные для сложных типов или блоков логики
-- Без дублирования очевидного (не комментируй "id" как "id компонента")
-- Адаптированы для отображения в Storybook
-- Используй технические термины правильно
-- Для union типов опиши каждое значение отдельно в коде
-
-Пример (строго следуй формату):
-```ts
-/**
- * Basic properties for image components.
- */
-export interface IconPropsBasic<
-  Image extends ImagePropsBasic = ImagePropsBasic
-> extends SkeletonPropsInclude {
-  // Status
-  /** Active state of the icon */
-  active?: boolean
-
-  // Icon
-  /** Значение основной иконки */
-  icon?: ImageValue<Image>
-  /** Значение активной иконки */
-  iconActive?: ImageValue<Image>
-
-  // Design
-  /**
-   * Размер иконки
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large'
-}
-```
-
-====================================
-3) Истории (stories) для Storybook
-====================================
-Создай минимально необходимые примеры. Каждая история демонстрирует конкретный сценарий использования.
-
-Код для исправления:
-```ts
-// ComponentDoc.stories.ts
-[stories]
-```
-
-Правила:
-- СТРОГО ЗАПРЕЩЕНО трогать const meta. НИЧЕГО НЕ МЕНЯТЬ В META.
-- Не трогать существующие константы и истории
-- Не переименовывать существующие константы
-- Не добавлять истории ради заполнения
-- Каждая история должна иметь цель и демонстрировать конкретную функциональность
-- Если компонент имеет разные режимы, покажи по одному чёткому примеру для каждого
-- Имена историй в стиле PascalCase без лишних слов (например: `Basic`, `WithIcon`, `Disabled`)
-- Минимизируй импорты: только необходимое
-- Не используй лишние обёртки (div, section) без необходимости
-- Простой, читаемый код
-
-Пример:
-```ts
-export const Basic: Story = {
-  args: {
-    label: 'Click me'
-  }
-}
-
-export const WithIcon: Story = {
-  args: {
-    label: 'Click me',
-    icon: 'check'
-  }
-}
-```
-
-====================================
-4) MDX-документация (описание компонента)
-====================================
-Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов, только необходимая информация.
-
-Код для исправления:
-```md
-// ComponentName.mdx
-[md]
-```
-
-Структура документа (строго):
-
-**1. Краткое описание (description):**
-- Одно предложение, максимально кратко передающее суть компонента
-- Не используй фразы типа "Этот компонент", начинай сразу с назначения
-
-**2. Основной текст документации (doc):**
-- Начинается БЕЗ заголовка
-- Детальное описание функциональности (2-4 абзаца)
-- Блок "**Основные возможности:**" (список ключевых фич)
-- Блок "**Типичные сценарии использования:**" (список примеров применения)
-- Можно дорабатывать существующий текст, но НЕ удалять актуальную информацию
-- Удаляй только устаревшее или избыточное
-
-**3. Специальные разделы (если есть):**
-
-Вместо простого перечисления Props, описывай **конкретные возможности компонента**.
-
-Каждый раздел должен:
-- Иметь заголовок второго уровня (`##`), описывающий возможность, а не просто название prop
-- Кратко объяснять назначение и поведение функциональности
-- Перечислять связанные свойства (если их несколько)
-- Описывать взаимодействие свойств между собой и их влияние на компонент
-- Включать примеры использования с кодом
-
-**Формат описания возможности:**
-
-```md
-## Название возможности
-
-Краткое описание возможности и её назначения (1-2 абзаца).
-
-**Свойства:** (если несколько связанных свойств)
-
-- `propName` — описание свойства
-- `propName2` — описание свойства
-
-**Возможные значения:** (для enum/union типов)
-
-- `'value1'` — описание значения и его поведения
-- `'value2'` — описание значения и его поведения
-
-Дополнительное описание поведения, взаимодействия свойств, особенностей и ограничений.
-
-[примеры кода]
-```
-
-**Примеры правильного описания возможностей:**
-
-```md
-## Анимация позиции заголовка
-
-Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
-
-**Возможные значения:**
-
-- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
-- `'toBottom'` — анимирует Head вниз вместе с контентом
-
-Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов.
-
-[код примера]
-```
-
-```md
-## Навигация и стрелки
-
-Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
-
-**Свойства:**
-
-- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
-- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
-- `disabledPrevious` — отключает левую кнопку (назад/минус)
-- `disabledNext` — отключает правую кнопку (вперёд/плюс)
-- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
-
-Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот.
-
-[код примера]
-```
-
-```md
-## Контурные кнопки (outline)
-
-Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
-
-- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
-- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
-- **Обратная связь при наведении** - фон появляется при наведении
-
-Outline режим особенно полезен для создания третичных действий и второстепенных опций.
-
-[код примера]
-```
-
-**Когда НЕ нужно описывать Props отдельными разделами:**
-
-- Простые boolean/string/number свойства без сложной логики — достаточно JSDoc комментариев в типах
-- Свойства с очевидным поведением (например, `disabled`, `label`, `placeholder`)
-- Единичные независимые свойства без взаимодействия с другими
-
-**Когда НУЖНО описывать возможности отдельными разделами:**
-
-- Свойства со сложной логикой взаимодействия (например, `cancel` и `cancelShow`)
-- Группы связанных свойств, работающих вместе (например, стрелки навигации)
-- Свойства с несколькими режимами работы (например, `adaptive` с разными значениями)
-- Свойства, влияющие на другие части компонента или имеющие приоритет над другими
-- Режимы отображения компонента (например, `primary`, `secondary`, `outline`)
-- CSS классы для управления поведением
-
-**4. Обязательные секции (если присутствуют в компоненте):**
-
-**Expose методы/свойства:**
-```md
-## Expose методы
-### `methodName`
-
-Описание метода.
-
-**Тип:** `(param: Type) => ReturnType`
-
-**Параметры:**
-- `param: Type` — описание параметра
-
-**Возвращает:** описание возвращаемого значения
-
-[пример кода]
-```
-
-**Слоты:**
-```md
-## Слоты
-### `slotName`
-
-Описание слота.
-
-**Параметры:**
-- `param: Type` — описание параметра слота
-
-[пример кода]
-```
-
-**События:**
-```md
-## События
-### `eventName`
-
-Описание события.
-
-**Параметры:**
-- `param: Type` — описание параметра события
-
-**Структура Type:** (если параметр сложный)
-- `field: string` — описание поля
-- `field2: number` — описание поля
-
-[пример кода]
-```
-
-**5. Примеры использования:**
-- Добавляй Canvas для демонстрации конкретных сценариев
-- НЕ добавляй базовый `<Canvas of={Component.Component}/>` — он уже есть в начале
-- Формат: `<Canvas of={Component.StoryName}/>`
-
-**Строгие правила форматирования:**
-
-- Заголовки уровней:
-  - `##` — основные разделы (Props, Expose методы, Слоты, События)
-  - `###` — конкретные элементы (названия методов, слотов, событий)
-  - `####` — подразделы внутри описания (Поведение, Примеры)
-
-- Код:
-  - Типы и интерфейсы: ` ```ts `
-  - Разметка компонентов: ` ```html ` (НЕ ` ```vue `)
-  - Inline код: обёртка в обратные кавычки `` `код` ``
-
-- Meta и StorybookMain:
-  - СТРОГО ЗАПРЕЩЕНО трогать блоки Meta и StorybookMain
-  - Они должны остаться как есть в начале файла
-  - Не добавлять, не удалять, не изменять их
-
-- Структурные элементы:
-  - Используй `**Жирный текст:**` для подзаголовков внутри описаний
-  - Используй `>` для важных замечаний и предупреждений
-  - Списки только там, где они улучшают читаемость
-
-**Пример полной структуры документа:**
-
-```md
-import { Meta, Canvas } from '@storybook/addon-docs/blocks'
-import * as Component from './Component.stories'
-
-<Meta of={Component} />
-
-Компонент для создания модальных окон, диалогов и всплывающих элементов с гибким позиционированием и адаптивным поведением.
-
-Window управляет отображением контента поверх основного интерфейса, поддерживает различные типы позиционирования (модальные окна, выпадающие меню, action sheets), анимации открытия/закрытия и интеграцию с системой событий. Компонент автоматически обрабатывает клики вне области, управление фокусом и адаптацию под различные размеры экранов.
-
-**Основные возможности:**
-
-- Гибкое позиционирование (центр, края, углы экрана)
-- Адаптивные режимы (modal, menu, actionSheet, static)
-- Анимации открытия/закрытия с настройкой origin
-- Управление состоянием через v-model или expose методы
-- Интеграция со Scrollbar для прокручиваемого контента
-- Блокировка взаимодействия с фоном (persistent режим)
-- События жизненного цикла окна
-
-**Типичные сценарии использования:**
-
-- Модальные окна для форм и подтверждений
-- Выпадающие меню и контекстные меню
-- Боковые панели и drawer компоненты
-- Action sheets для мобильных интерфейсов
-- Всплывающие подсказки и диалоги
-
-## CSS классы для управления поведением
-
-Компонент использует специальные CSS классы для управления поведением:
-
-- `*--block` — предотвращает закрытие окна при клике вне его границ
-- `*--blockChildren` — предотвращает закрытие текущего окна
-- `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
-- `*--close` — применяется к элементам для закрытия окна
-- `*--controlOpenOnly` — применяется к элементам управления, которые только открывают окно
-- `*--controlStatic` — применяется к элементам управления в статическом режиме
-- `*--static` — применяется к элементам внутри окна, отменяя все действия
-
-Где `*` — название класса компонента (например, `d1-window`, `m3-window`).
-
-## Анимация позиции заголовка
-
-Свойство `animationHeadPosition` определяет поведение области Head во время анимаций показа/скрытия.
-
-**Возможные значения:**
-
-- `'top'` — сохраняет Head вверху во время перехода (по умолчанию)
-- `'toBottom'` — анимирует Head вниз вместе с контентом
-
-Синхронизирует движение заголовка с анимацией контента, используя CSS-трансформации для плавных переходов.
-
-```html
-<Window
-  v-slot:default="{ animationHeadPosition }"
-  :style="{ '--head-animation': animationHeadPosition }"
->
-  <Header>Заголовок</Header>
-  <Content>Содержимое</Content>
-</Window>
-```
-
-## Навигация и стрелки
-
-Свойства `arrowCarousel`, `arrowStepper`, `disabledPrevious`, `disabledNext` и `align` предназначены для управления встроенными элементами навигации и выравнивания содержимого.
-
-**Свойства:**
-
-- `arrowCarousel` — включает стрелки навигации (влево/вправо) для переключения элементов
-- `arrowStepper` — включает числовые шаговые кнопки (минус/плюс)
-- `disabledPrevious` — отключает левую кнопку (назад/минус)
-- `disabledNext` — отключает правую кнопку (вперёд/плюс)
-- `align` — горизонтальное выравнивание содержимого (`left`, `center`, `right`)
-
-Свойства работают совместно: активен только один режим стрелок — если `arrowCarousel = true`, режим `arrowStepper` игнорируется и наоборот.
-
-```html
-<Window
-  v-slot:default="{ arrowCarousel, arrowStepper }"
-  :arrow-carousel="arrowCarousel"
-  :arrow-stepper="arrowStepper"
->
-  <Content>Содержимое</Content>
-</Window>
-```
-
-## Контурные кнопки (outline)
-
-Компонент Button поддерживает контурный режим через свойство `outline`. В этом режиме кнопки имеют минималистичный визуальный стиль с прозрачным фоном и цветной границей:
-
-- **Минималистичный дизайн** - подходит для интерфейсов, требующих сниженной визуальной нагрузки
-- **Прозрачный фон** - поддерживает чистый внешний вид, оставаясь интерактивными
-- **Обратная связь при наведении** - фон появляется при наведении
-
-Outline режим особенно полезен для создания третичных действий и второстепенных опций.
-
-```html
-<Button outline>Контурная кнопка</Button>
-```
-
-## Expose методы
-### `id`
-
-Уникальный идентификатор окна.
-
-**Тип:** `string`
-
-```html
-<script setup>
-const windowRef = ref()
-
-onMounted(() => {
-  console.log(windowRef.value.id) // "window-123"
-})
-</script>
-
-<template>
-  <Window ref="windowRef" />
-</template>
-```
-
-## Слоты
-### `control`
-
-Слот для размещения элементов управления окном (кнопки закрытия, минимизации и т.д.).
-
-**Параметры:**
-- `props: WindowControlItem` — объект с данными управления окном
-
-```html
-<Window>
-  <template #control="{ onclick, open }">
-    <button @click="onclick">
-      {{ open ? 'Закрыть' : 'Открыть' }}
-    </button>
-  </template>
-</Window>
-```
-
-## События
-### `window`
-
-Событие срабатывает при изменении состояния окна (открытие/закрытие).
-
-**Параметры:**
-- `options: WindowEmitOptions` — объект с данными окна
-
-**Структура WindowEmitOptions:**
-- `id: string` — уникальный идентификатор окна
-- `element: HTMLDivElement` — DOM элемент окна
-- `control: HTMLElement` — DOM элемент управления
-- `open: boolean` — состояние открытия окна (`true` - открыто, `false` - закрыто)
-
-```html
-<script setup>
-const handleWindow = (options) => {
-  console.log('ID окна:', options.id)
-  console.log('Окно открыто:', options.open)
-  console.log('Элемент окна:', options.element)
-  console.log('Элемент управления:', options.control)
-}
-</script>
-
-<template>
-  <Window @window="handleWindow">
-    <template #default>
-      <p>Содержимое окна</p>
-    </template>
-  </Window>
-</template>
-```
-
-## Примеры использования
-### Базовое модальное окно
-
-<Canvas of={Component.BasicModal}/>
-
-### Выпадающее меню
-
-<Canvas of={Component.DropdownMenu}/>
-```
-
-====================================
-5) Итоговый возврат
-====================================
-Верни результат СТРОГО в формате (ничего лишнего до или после):
-
-[types.ts]
-#########
-[ComponentDoc.stories.ts]
-#########
-[ComponentName.mdx]
-
-**Требования к формату вывода:**
-- НЕ добавляй метки файлов типа `// filepath: ...`
-- НЕ оборачивай в блоки кода (` ```ts `, ` ```md `)
-- НЕ добавляй комментарии с названиями файлов
-- НЕ включай в сам результат текст `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
-- Только чистый код, разделённый строкой из девяти символов решётки: `#########`
-- Порядок строго: типы → истории → документация
-- Каждый блок начинается с первой строки кода, без пробелов и переносов перед
-
-**Структура каждого блока:**
-- `[types.ts]` — итоговый файл типов с JSDoc комментариями (только содержимое файла)
-- `[ComponentDoc.stories.ts]` — итоговый файл историй (только содержимое файла)
-- `[ComponentName.mdx]` — итоговая MDX-документация (только содержимое файла)
-
-====================================
-Ограничения и стилистика
-====================================
-
-**Запрещено:**
-- Таблицы в любом виде
-- Произвольные дополнительные разделы вне указанных
-- Раздел "Props" для простых свойств без сложной логики
-- Дублирование описаний одного и того же
-- Placeholder'ы вне указанных в промпте (`[code]`, `[types]`, `[stories]`, `[md]`)
-- Использование ` ```vue ` для примеров кода (только ` ```html `)
-- Изменение Meta блока в MDX
-- Добавление базового Canvas (`<Canvas of={Component.Component}/>`)
-
-**Обязательно:**
-- Язык документации соответствует [wikiLanguage]
-- Если [wikiLanguage] = "en", используй английский для ВСЕЙ документации
-- Если [wikiLanguage] = "ru", используй русский для ВСЕЙ документации
-- Кодовые блоки: типы и события — ` ```ts `, разметка — ` ```html `
-- Истории: только необходимые сценарии, без визуальных украшений
-- Краткость и информативность без "воды"
-- Технически корректные термины
-- Примеры кода работоспособны и актуальны