@dxtmisha/scripts 0.4.4 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxtmisha/scripts",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Development scripts and CLI tools for DXT UI projects - automated component generation, library building and project management tools",
|
|
7
7
|
"keywords": [
|
package/src/config.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
You need to prepare documentation for a component in the [wikiLanguage] language. Follow the format and requirements strictly. Do not add anything beyond what is described.
|
|
2
|
-
Stack: Storybook 9.x, TypeScript, MDX.
|
|
2
|
+
Stack: Storybook 9.x, TypeScript, MDX, Vue 3 Composition API.
|
|
3
3
|
|
|
4
4
|
Canvas component is imported from '@storybook/addon-docs/blocks'
|
|
5
5
|
|
|
@@ -9,12 +9,21 @@ Canvas component is imported from '@storybook/addon-docs/blocks'
|
|
|
9
9
|
```
|
|
10
10
|
[code]
|
|
11
11
|
```
|
|
12
|
-
|
|
12
|
+
|
|
13
|
+
Analyze:
|
|
14
|
+
- Component structure (props, computed, methods)
|
|
15
|
+
- Events (emit) and their parameters
|
|
16
|
+
- Slots and their parameters
|
|
17
|
+
- Data types (interfaces, types)
|
|
18
|
+
- Expose methods and properties
|
|
19
|
+
- Internal logic and behavior
|
|
20
|
+
- Dependencies on other components
|
|
13
21
|
|
|
14
22
|
====================================
|
|
15
23
|
2) Add missing type comments
|
|
16
24
|
====================================
|
|
17
25
|
Add brief single-language (in [wikiLanguage]) JSDoc comments to missing types and their properties.
|
|
26
|
+
|
|
18
27
|
Code to fix:
|
|
19
28
|
```ts
|
|
20
29
|
// types.ts
|
|
@@ -22,12 +31,14 @@ Code to fix:
|
|
|
22
31
|
```
|
|
23
32
|
|
|
24
33
|
Comment requirements:
|
|
25
|
-
- Single-line for simple fields
|
|
26
|
-
- Multi-line for logic blocks
|
|
27
|
-
- No duplication of the obvious
|
|
28
|
-
- Adapted for
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
- Single-line for simple fields (/** Description */)
|
|
35
|
+
- Multi-line for complex types or logic blocks
|
|
36
|
+
- No duplication of the obvious (don't comment "id" as "component id")
|
|
37
|
+
- Adapted for display in Storybook
|
|
38
|
+
- Use technical terms correctly
|
|
39
|
+
- For union types, describe each value separately in code
|
|
40
|
+
|
|
41
|
+
Example (strictly follow the format):
|
|
31
42
|
```ts
|
|
32
43
|
/**
|
|
33
44
|
* Basic properties for image components.
|
|
@@ -44,52 +55,189 @@ export interface IconPropsBasic<
|
|
|
44
55
|
icon?: ImageValue<Image>
|
|
45
56
|
/** Active icon value */
|
|
46
57
|
iconActive?: ImageValue<Image>
|
|
58
|
+
|
|
59
|
+
// Design
|
|
60
|
+
/**
|
|
61
|
+
* Icon size
|
|
62
|
+
* @default 'medium'
|
|
63
|
+
*/
|
|
64
|
+
size?: 'small' | 'medium' | 'large'
|
|
47
65
|
}
|
|
48
66
|
```
|
|
49
67
|
|
|
50
68
|
====================================
|
|
51
69
|
3) Stories for Storybook
|
|
52
70
|
====================================
|
|
53
|
-
Create
|
|
71
|
+
Create minimum necessary examples. Each story demonstrates a specific usage scenario.
|
|
72
|
+
|
|
54
73
|
Code to fix:
|
|
55
74
|
```ts
|
|
56
75
|
// ComponentDoc.stories.ts
|
|
57
76
|
[stories]
|
|
58
77
|
```
|
|
78
|
+
|
|
59
79
|
Rules:
|
|
60
|
-
-
|
|
61
|
-
- Don't touch
|
|
62
|
-
- Don't
|
|
63
|
-
- Don't
|
|
64
|
-
-
|
|
65
|
-
- If
|
|
66
|
-
- Story names in PascalCase style without extra words.
|
|
67
|
-
- Minimize imports: only
|
|
80
|
+
- STRICTLY FORBIDDEN to touch const meta. DO NOT CHANGE ANYTHING IN META.
|
|
81
|
+
- Don't touch existing constants and stories
|
|
82
|
+
- Don't rename existing constants
|
|
83
|
+
- Don't add stories just for filling
|
|
84
|
+
- Each story must have a purpose and demonstrate specific functionality
|
|
85
|
+
- If component has different modes, show one clear example for each
|
|
86
|
+
- Story names in PascalCase style without extra words (e.g.: `Basic`, `WithIcon`, `Disabled`)
|
|
87
|
+
- Minimize imports: only necessary
|
|
88
|
+
- Don't use extra wrappers (div, section) without necessity
|
|
89
|
+
- Simple, readable code
|
|
90
|
+
|
|
91
|
+
Example:
|
|
92
|
+
```ts
|
|
93
|
+
export const Basic: Story = {
|
|
94
|
+
args: {
|
|
95
|
+
label: 'Click me'
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export const WithIcon: Story = {
|
|
100
|
+
args: {
|
|
101
|
+
label: 'Click me',
|
|
102
|
+
icon: 'check'
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
```
|
|
68
106
|
|
|
69
107
|
====================================
|
|
70
108
|
4) MDX documentation (component description)
|
|
71
109
|
====================================
|
|
72
|
-
Prepare
|
|
110
|
+
Prepare complete component description in MDX format. Strict style: no tables, no extra sections, only necessary information.
|
|
111
|
+
|
|
73
112
|
Code to fix:
|
|
74
113
|
```md
|
|
75
|
-
//
|
|
114
|
+
// ComponentName.mdx
|
|
76
115
|
[md]
|
|
77
116
|
```
|
|
78
117
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
118
|
+
Document structure (strict):
|
|
119
|
+
|
|
120
|
+
**1. Brief description:**
|
|
121
|
+
- One sentence, conveying the essence of the component as briefly as possible
|
|
122
|
+
- Don't use phrases like "This component", start immediately with the purpose
|
|
123
|
+
|
|
124
|
+
**2. Main documentation text:**
|
|
125
|
+
- Starts WITHOUT a heading
|
|
126
|
+
- Detailed functionality description (2-4 paragraphs)
|
|
127
|
+
- Block "**Key Features:**" (list of key features)
|
|
128
|
+
- Block "**Typical Use Cases:**" (list of usage examples)
|
|
129
|
+
- Can refine existing text, but DO NOT delete relevant information
|
|
130
|
+
- Delete only outdated or redundant content
|
|
131
|
+
|
|
132
|
+
**3. Special sections (if present):**
|
|
133
|
+
|
|
134
|
+
**Props (only for complex cases):**
|
|
135
|
+
- Describe Props only if they have complex interaction logic, dependencies, or composite types
|
|
136
|
+
- DO NOT describe simple boolean/string props in a list - JSDoc comments in types are enough for them
|
|
137
|
+
- Format: `## Props`, then `### PropName` for each complex prop
|
|
138
|
+
|
|
139
|
+
Example of complex prop description:
|
|
140
|
+
```md
|
|
141
|
+
## Props
|
|
142
|
+
### `adaptive`
|
|
143
|
+
|
|
144
|
+
Window adaptive behavior mode.
|
|
145
|
+
|
|
146
|
+
**Type:** `'modal' | 'menu' | 'actionSheet' | 'static'`
|
|
147
|
+
|
|
148
|
+
**Default:** `'modal'`
|
|
149
|
+
|
|
150
|
+
**Possible values:**
|
|
151
|
+
- `'modal'` — modal window in screen center with overlay
|
|
152
|
+
- `'menu'` — dropdown menu attached to control element
|
|
153
|
+
- `'actionSheet'` — bottom panel for mobile interfaces
|
|
154
|
+
- `'static'` — static mode without overlay and positioning
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**4. Mandatory sections (if present in component):**
|
|
158
|
+
|
|
159
|
+
**Expose methods/properties:**
|
|
160
|
+
```md
|
|
161
|
+
## Expose Methods
|
|
162
|
+
### `methodName`
|
|
163
|
+
|
|
164
|
+
Method description.
|
|
165
|
+
|
|
166
|
+
**Type:** `(param: Type) => ReturnType`
|
|
167
|
+
|
|
168
|
+
**Parameters:**
|
|
169
|
+
- `param: Type` — parameter description
|
|
170
|
+
|
|
171
|
+
**Returns:** return value description
|
|
172
|
+
|
|
173
|
+
[code example]
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
**Slots:**
|
|
177
|
+
```md
|
|
178
|
+
## Slots
|
|
179
|
+
### `slotName`
|
|
180
|
+
|
|
181
|
+
Slot description.
|
|
182
|
+
|
|
183
|
+
**Parameters:**
|
|
184
|
+
- `param: Type` — slot parameter description
|
|
185
|
+
|
|
186
|
+
[code example]
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
**Events:**
|
|
190
|
+
```md
|
|
191
|
+
## Events
|
|
192
|
+
### `eventName`
|
|
193
|
+
|
|
194
|
+
Event description.
|
|
195
|
+
|
|
196
|
+
**Parameters:**
|
|
197
|
+
- `param: Type` — event parameter description
|
|
198
|
+
|
|
199
|
+
**Type structure:** (if parameter is complex)
|
|
200
|
+
- `field: string` — field description
|
|
201
|
+
- `field2: number` — field description
|
|
202
|
+
|
|
203
|
+
[code example]
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**5. Usage examples:**
|
|
207
|
+
- Add Canvas to demonstrate specific scenarios
|
|
208
|
+
- DO NOT add base `<Canvas of={Component.Component}/>` — it's already at the beginning
|
|
209
|
+
- Format: `<Canvas of={Component.StoryName}/>`
|
|
210
|
+
|
|
211
|
+
**Strict formatting rules:**
|
|
212
|
+
|
|
213
|
+
- Heading levels:
|
|
214
|
+
- `##` — main sections (Props, Expose Methods, Slots, Events)
|
|
215
|
+
- `###` — specific elements (method, slot, event names)
|
|
216
|
+
- `####` — subsections within description (Behavior, Examples)
|
|
217
|
+
|
|
218
|
+
- Code:
|
|
219
|
+
- Types and interfaces: ` ```ts `
|
|
220
|
+
- Component markup: ` ```html ` (NOT ` ```vue `)
|
|
221
|
+
- Inline code: wrap in backticks `` `code` ``
|
|
222
|
+
|
|
223
|
+
- Meta and StorybookMain:
|
|
224
|
+
- STRICTLY FORBIDDEN to touch Meta and StorybookMain blocks
|
|
225
|
+
- They must remain as is at the beginning of the file
|
|
226
|
+
- Don't add, don't delete, don't modify them
|
|
227
|
+
|
|
228
|
+
- Structural elements:
|
|
229
|
+
- Use `**Bold text:**` for subheadings within descriptions
|
|
230
|
+
- Use `>` for important notes and warnings
|
|
231
|
+
- Lists only where they improve readability
|
|
232
|
+
|
|
233
|
+
**Example of full document structure:**
|
|
234
|
+
|
|
235
|
+
```md
|
|
236
|
+
import { Meta, Canvas } from '@storybook/addon-docs/blocks'
|
|
237
|
+
import * as Component from './Component.stories'
|
|
238
|
+
|
|
239
|
+
<Meta of={Component} />
|
|
240
|
+
|
|
93
241
|
Component for creating modal windows, dialogs, and popup elements with flexible positioning and adaptive behavior.
|
|
94
242
|
|
|
95
243
|
Window manages content display over the main interface, supports various positioning types (modal windows, dropdown menus, action sheets), open/close animations, and event system integration. The component automatically handles clicks outside the area, focus management, and adaptation to different screen sizes.
|
|
@@ -114,6 +262,8 @@ Window manages content display over the main interface, supports various positio
|
|
|
114
262
|
|
|
115
263
|
## CSS Classes for Behavior Control
|
|
116
264
|
|
|
265
|
+
Component uses special CSS classes for behavior control:
|
|
266
|
+
|
|
117
267
|
- `*--block` — prevents window from closing when clicking outside its boundaries
|
|
118
268
|
- `*--blockChildren` — prevents current window from closing
|
|
119
269
|
- `*--blockOther` — prevents other windows from closing until current one is closed
|
|
@@ -124,34 +274,20 @@ Window manages content display over the main interface, supports various positio
|
|
|
124
274
|
|
|
125
275
|
Where `*` is the component class name (e.g., `d1-window`, `m3-window`).
|
|
126
276
|
|
|
127
|
-
##
|
|
128
|
-
|
|
129
|
-
The Window component supports static mode operation through the `staticMode` property. In this mode, the window works as an embedded component without modal behavior:
|
|
130
|
-
|
|
131
|
-
- **Content displays immediately** — window doesn't hide and doesn't require activation
|
|
132
|
-
- **Animations disabled** — no appearance/disappearance effects
|
|
133
|
-
- **Positioning disabled** — window is embedded in document flow
|
|
134
|
-
- **Works with adaptive** — when the `adaptive` property has one of the static modes (e.g., `static`), static mode is enabled
|
|
277
|
+
## Props
|
|
278
|
+
### `adaptive`
|
|
135
279
|
|
|
136
|
-
|
|
280
|
+
Window adaptive behavior mode.
|
|
137
281
|
|
|
138
|
-
|
|
282
|
+
**Type:** `'modal' | 'menu' | 'actionSheet' | 'static'`
|
|
139
283
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
> Applies only in menu mode (`adaptive="menu"` or `adaptive="menuWindow"`).
|
|
284
|
+
**Default:** `'modal'`
|
|
143
285
|
|
|
144
286
|
**Possible values:**
|
|
145
|
-
- `'
|
|
146
|
-
- `'
|
|
147
|
-
- `'
|
|
148
|
-
|
|
149
|
-
### Behavior
|
|
150
|
-
|
|
151
|
-
- Component automatically selects the placement side with the most available space
|
|
152
|
-
- When using context menu (`contextmenu`), positioning occurs from cursor coordinates
|
|
153
|
-
- Window always stays within visible screen area (viewport)
|
|
154
|
-
- Indent from anchor is set via `indent` property (default 4px)
|
|
287
|
+
- `'modal'` — modal window in screen center
|
|
288
|
+
- `'menu'` — dropdown menu attached to element
|
|
289
|
+
- `'actionSheet'` — bottom panel for mobile devices
|
|
290
|
+
- `'static'` — static mode without overlay
|
|
155
291
|
|
|
156
292
|
## State Management via v-model
|
|
157
293
|
|
|
@@ -251,36 +387,61 @@ const handleWindow = (options) => {
|
|
|
251
387
|
</template>
|
|
252
388
|
```
|
|
253
389
|
|
|
254
|
-
|
|
255
|
-
|
|
390
|
+
## Usage Examples
|
|
391
|
+
### Basic Modal Window
|
|
392
|
+
|
|
393
|
+
<Canvas of={Component.BasicModal}/>
|
|
394
|
+
|
|
395
|
+
### Dropdown Menu
|
|
396
|
+
|
|
397
|
+
<Canvas of={Component.DropdownMenu}/>
|
|
398
|
+
```
|
|
256
399
|
|
|
257
400
|
====================================
|
|
258
401
|
5) Final return
|
|
259
402
|
====================================
|
|
260
|
-
Return the result
|
|
403
|
+
Return the result STRICTLY in the format (nothing extra before or after):
|
|
404
|
+
|
|
261
405
|
[types.ts]
|
|
262
406
|
#########
|
|
263
407
|
[ComponentDoc.stories.ts]
|
|
264
408
|
#########
|
|
265
|
-
[
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
-
|
|
269
|
-
-
|
|
270
|
-
-
|
|
271
|
-
-
|
|
272
|
-
-
|
|
273
|
-
-
|
|
274
|
-
-
|
|
409
|
+
[ComponentName.mdx]
|
|
410
|
+
|
|
411
|
+
**Output format requirements:**
|
|
412
|
+
- DO NOT add file labels like `// filepath: ...`
|
|
413
|
+
- DO NOT wrap in code blocks (` ```ts `, ` ```md `)
|
|
414
|
+
- DO NOT add comments with file names
|
|
415
|
+
- DO NOT include in the result text `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
|
|
416
|
+
- Only clean code, separated by a line of nine hash symbols: `#########`
|
|
417
|
+
- Order strictly: types → stories → documentation
|
|
418
|
+
- Each block starts with the first line of code, without spaces and line breaks before
|
|
419
|
+
|
|
420
|
+
**Structure of each block:**
|
|
421
|
+
- `[types.ts]` — final types file with JSDoc comments (only file content)
|
|
422
|
+
- `[ComponentDoc.stories.ts]` — final stories file (only file content)
|
|
423
|
+
- `[ComponentName.mdx]` — final MDX documentation (only file content)
|
|
275
424
|
|
|
276
425
|
====================================
|
|
277
426
|
Constraints and style
|
|
278
427
|
====================================
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
-
|
|
282
|
-
-
|
|
283
|
-
-
|
|
284
|
-
-
|
|
285
|
-
-
|
|
286
|
-
-
|
|
428
|
+
|
|
429
|
+
**Forbidden:**
|
|
430
|
+
- Tables in any form
|
|
431
|
+
- Arbitrary additional sections outside specified ones
|
|
432
|
+
- "Props" section for simple properties without complex logic
|
|
433
|
+
- Duplication of descriptions of the same thing
|
|
434
|
+
- Placeholders outside those specified in prompt (`[code]`, `[types]`, `[stories]`, `[md]`)
|
|
435
|
+
- Using ` ```vue ` for code examples (only ` ```html `)
|
|
436
|
+
- Changing Meta block in MDX
|
|
437
|
+
- Adding base Canvas (`<Canvas of={Component.Component}/>`)
|
|
438
|
+
|
|
439
|
+
**Required:**
|
|
440
|
+
- Documentation language corresponds to [wikiLanguage]
|
|
441
|
+
- If [wikiLanguage] = "en", use English for ALL documentation
|
|
442
|
+
- If [wikiLanguage] = "ru", use Russian for ALL documentation
|
|
443
|
+
- Code blocks: types and events — ` ```ts `, markup — ` ```html `
|
|
444
|
+
- Stories: only necessary scenarios, without visual decorations
|
|
445
|
+
- Brevity and informativeness without "fluff"
|
|
446
|
+
- Technically correct terms
|
|
447
|
+
- Code examples are functional and up-to-date
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
Нужно подготовить документацию для компонента на языке [wikiLanguage].
|
|
2
|
-
|
|
1
|
+
Нужно подготовить документацию для компонента на языке [wikiLanguage].
|
|
2
|
+
Следуй строго формату и требованиям ниже.
|
|
3
|
+
Не добавляй ничего лишнего вне описанного.
|
|
4
|
+
Стек: Storybook 9.x, TypeScript, MDX, Vue 3 Composition API.
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
Canvas компонент импортируется из '@storybook/addon-docs/blocks'
|
|
5
7
|
|
|
6
8
|
====================================
|
|
7
9
|
1) Изучи текущий код компонента
|
|
@@ -9,12 +11,21 @@
|
|
|
9
11
|
```
|
|
10
12
|
[code]
|
|
11
13
|
```
|
|
12
|
-
|
|
14
|
+
|
|
15
|
+
Проанализируй:
|
|
16
|
+
- Структуру компонента (props, computed, methods)
|
|
17
|
+
- События (emit) и их параметры
|
|
18
|
+
- Слоты (slots) и их параметры
|
|
19
|
+
- Типы данных (interfaces, types)
|
|
20
|
+
- Expose методы и свойства
|
|
21
|
+
- Внутреннюю логику и поведение
|
|
22
|
+
- Зависимости от других компонентов
|
|
13
23
|
|
|
14
24
|
====================================
|
|
15
25
|
2) Добавь недостающие комментарии к типам
|
|
16
26
|
====================================
|
|
17
27
|
Добавь краткие одноязычные (на [wikiLanguage]) JSDoc-комментарии к отсутствующим типам и их свойствам.
|
|
28
|
+
|
|
18
29
|
Код для исправления:
|
|
19
30
|
```ts
|
|
20
31
|
// types.ts
|
|
@@ -22,12 +33,14 @@
|
|
|
22
33
|
```
|
|
23
34
|
|
|
24
35
|
Требования к комментариям:
|
|
25
|
-
- Однострочные для простых
|
|
26
|
-
- Многострочные для блоков
|
|
27
|
-
- Без дублирования
|
|
28
|
-
- Адаптированы
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
- Однострочные для простых полей (/** Описание */)
|
|
37
|
+
- Многострочные для сложных типов или блоков логики
|
|
38
|
+
- Без дублирования очевидного (не комментируй "id" как "id компонента")
|
|
39
|
+
- Адаптированы для отображения в Storybook
|
|
40
|
+
- Используй технические термины правильно
|
|
41
|
+
- Для union типов опиши каждое значение отдельно в коде
|
|
42
|
+
|
|
43
|
+
Пример (строго следуй формату):
|
|
31
44
|
```ts
|
|
32
45
|
/**
|
|
33
46
|
* Basic properties for image components.
|
|
@@ -44,53 +57,189 @@ export interface IconPropsBasic<
|
|
|
44
57
|
icon?: ImageValue<Image>
|
|
45
58
|
/** Значение активной иконки */
|
|
46
59
|
iconActive?: ImageValue<Image>
|
|
60
|
+
|
|
61
|
+
// Design
|
|
62
|
+
/**
|
|
63
|
+
* Размер иконки
|
|
64
|
+
* @default 'medium'
|
|
65
|
+
*/
|
|
66
|
+
size?: 'small' | 'medium' | 'large'
|
|
47
67
|
}
|
|
48
68
|
```
|
|
49
69
|
|
|
50
70
|
====================================
|
|
51
71
|
3) Истории (stories) для Storybook
|
|
52
72
|
====================================
|
|
53
|
-
Создай
|
|
73
|
+
Создай минимально необходимые примеры. Каждая история демонстрирует конкретный сценарий использования.
|
|
74
|
+
|
|
54
75
|
Код для исправления:
|
|
55
76
|
```ts
|
|
56
77
|
// ComponentDoc.stories.ts
|
|
57
78
|
[stories]
|
|
58
79
|
```
|
|
80
|
+
|
|
59
81
|
Правила:
|
|
60
|
-
-
|
|
61
|
-
- Не трогать
|
|
62
|
-
- Не
|
|
63
|
-
- Не
|
|
64
|
-
-
|
|
65
|
-
- Если компонент имеет разные
|
|
66
|
-
- Имена историй
|
|
67
|
-
- Минимизируй импорты: только
|
|
82
|
+
- СТРОГО ЗАПРЕЩЕНО трогать const meta. НИЧЕГО НЕ МЕНЯТЬ В META.
|
|
83
|
+
- Не трогать существующие константы и истории
|
|
84
|
+
- Не переименовывать существующие константы
|
|
85
|
+
- Не добавлять истории ради заполнения
|
|
86
|
+
- Каждая история должна иметь цель и демонстрировать конкретную функциональность
|
|
87
|
+
- Если компонент имеет разные режимы, покажи по одному чёткому примеру для каждого
|
|
88
|
+
- Имена историй в стиле PascalCase без лишних слов (например: `Basic`, `WithIcon`, `Disabled`)
|
|
89
|
+
- Минимизируй импорты: только необходимое
|
|
90
|
+
- Не используй лишние обёртки (div, section) без необходимости
|
|
91
|
+
- Простой, читаемый код
|
|
92
|
+
|
|
93
|
+
Пример:
|
|
94
|
+
```ts
|
|
95
|
+
export const Basic: Story = {
|
|
96
|
+
args: {
|
|
97
|
+
label: 'Click me'
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export const WithIcon: Story = {
|
|
102
|
+
args: {
|
|
103
|
+
label: 'Click me',
|
|
104
|
+
icon: 'check'
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
```
|
|
68
108
|
|
|
69
109
|
====================================
|
|
70
110
|
4) MDX-документация (описание компонента)
|
|
71
111
|
====================================
|
|
72
|
-
Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних
|
|
112
|
+
Подготовь полное описание компонента в формате MDX. Строгая стилистика: никаких таблиц, никаких лишних разделов, только необходимая информация.
|
|
113
|
+
|
|
73
114
|
Код для исправления:
|
|
74
115
|
```md
|
|
75
|
-
//
|
|
116
|
+
// ComponentName.mdx
|
|
76
117
|
[md]
|
|
77
118
|
```
|
|
78
119
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
-
|
|
120
|
+
Структура документа (строго):
|
|
121
|
+
|
|
122
|
+
**1. Краткое описание (description):**
|
|
123
|
+
- Одно предложение, максимально кратко передающее суть компонента
|
|
124
|
+
- Не используй фразы типа "Этот компонент", начинай сразу с назначения
|
|
125
|
+
|
|
126
|
+
**2. Основной текст документации (doc):**
|
|
127
|
+
- Начинается БЕЗ заголовка
|
|
128
|
+
- Детальное описание функциональности (2-4 абзаца)
|
|
129
|
+
- Блок "**Основные возможности:**" (список ключевых фич)
|
|
130
|
+
- Блок "**Типичные сценарии использования:**" (список примеров применения)
|
|
131
|
+
- Можно дорабатывать существующий текст, но НЕ удалять актуальную информацию
|
|
132
|
+
- Удаляй только устаревшее или избыточное
|
|
133
|
+
|
|
134
|
+
**3. Специальные разделы (если есть):**
|
|
135
|
+
|
|
136
|
+
**Props (только для сложных случаев):**
|
|
137
|
+
- Описывай Props только если они имеют сложную логику взаимодействия, зависимости или составные типы
|
|
138
|
+
- НЕ описывай простые boolean/string props списком - для них достаточно JSDoc комментариев в типах
|
|
139
|
+
- Формат: `## Props`, затем `### НазваниеProp` для каждого сложного prop
|
|
140
|
+
|
|
141
|
+
Пример описания сложного prop:
|
|
142
|
+
```md
|
|
143
|
+
## Props
|
|
144
|
+
### `adaptive`
|
|
145
|
+
|
|
146
|
+
Режим адаптивного поведения окна.
|
|
147
|
+
|
|
148
|
+
**Тип:** `'modal' | 'menu' | 'actionSheet' | 'static'`
|
|
149
|
+
|
|
150
|
+
**По умолчанию:** `'modal'`
|
|
151
|
+
|
|
152
|
+
**Возможные значения:**
|
|
153
|
+
- `'modal'` — модальное окно по центру экрана с оверлеем
|
|
154
|
+
- `'menu'` — выпадающее меню, привязанное к элементу управления
|
|
155
|
+
- `'actionSheet'` — нижняя панель для мобильных интерфейсов
|
|
156
|
+
- `'static'` — статичный режим без оверлея и позиционирования
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
**4. Обязательные секции (если присутствуют в компоненте):**
|
|
160
|
+
|
|
161
|
+
**Expose методы/свойства:**
|
|
162
|
+
```md
|
|
163
|
+
## Expose методы
|
|
164
|
+
### `methodName`
|
|
165
|
+
|
|
166
|
+
Описание метода.
|
|
167
|
+
|
|
168
|
+
**Тип:** `(param: Type) => ReturnType`
|
|
169
|
+
|
|
170
|
+
**Параметры:**
|
|
171
|
+
- `param: Type` — описание параметра
|
|
172
|
+
|
|
173
|
+
**Возвращает:** описание возвращаемого значения
|
|
174
|
+
|
|
175
|
+
[пример кода]
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
**Слоты:**
|
|
179
|
+
```md
|
|
180
|
+
## Слоты
|
|
181
|
+
### `slotName`
|
|
182
|
+
|
|
183
|
+
Описание слота.
|
|
184
|
+
|
|
185
|
+
**Параметры:**
|
|
186
|
+
- `param: Type` — описание параметра слота
|
|
187
|
+
|
|
188
|
+
[пример кода]
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
**События:**
|
|
192
|
+
```md
|
|
193
|
+
## События
|
|
194
|
+
### `eventName`
|
|
195
|
+
|
|
196
|
+
Описание события.
|
|
197
|
+
|
|
198
|
+
**Параметры:**
|
|
199
|
+
- `param: Type` — описание параметра события
|
|
200
|
+
|
|
201
|
+
**Структура Type:** (если параметр сложный)
|
|
202
|
+
- `field: string` — описание поля
|
|
203
|
+
- `field2: number` — описание поля
|
|
204
|
+
|
|
205
|
+
[пример кода]
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
**5. Примеры использования:**
|
|
209
|
+
- Добавляй Canvas для демонстрации конкретных сценариев
|
|
210
|
+
- НЕ добавляй базовый `<Canvas of={Component.Component}/>` — он уже есть в начале
|
|
211
|
+
- Формат: `<Canvas of={Component.StoryName}/>`
|
|
212
|
+
|
|
213
|
+
**Строгие правила форматирования:**
|
|
214
|
+
|
|
215
|
+
- Заголовки уровней:
|
|
216
|
+
- `##` — основные разделы (Props, Expose методы, Слоты, События)
|
|
217
|
+
- `###` — конкретные элементы (названия методов, слотов, событий)
|
|
218
|
+
- `####` — подразделы внутри описания (Поведение, Примеры)
|
|
219
|
+
|
|
220
|
+
- Код:
|
|
221
|
+
- Типы и интерфейсы: ` ```ts `
|
|
222
|
+
- Разметка компонентов: ` ```html ` (НЕ ` ```vue `)
|
|
223
|
+
- Inline код: обёртка в обратные кавычки `` `код` ``
|
|
224
|
+
|
|
225
|
+
- Meta и StorybookMain:
|
|
226
|
+
- СТРОГО ЗАПРЕЩЕНО трогать блоки Meta и StorybookMain
|
|
227
|
+
- Они должны остаться как есть в начале файла
|
|
228
|
+
- Не добавлять, не удалять, не изменять их
|
|
229
|
+
|
|
230
|
+
- Структурные элементы:
|
|
231
|
+
- Используй `**Жирный текст:**` для подзаголовков внутри описаний
|
|
232
|
+
- Используй `>` для важных замечаний и предупреждений
|
|
233
|
+
- Списки только там, где они улучшают читаемость
|
|
234
|
+
|
|
235
|
+
**Пример полной структуры документа:**
|
|
236
|
+
|
|
237
|
+
```md
|
|
238
|
+
import { Meta, Canvas } from '@storybook/addon-docs/blocks'
|
|
239
|
+
import * as Component from './Component.stories'
|
|
240
|
+
|
|
241
|
+
<Meta of={Component} />
|
|
89
242
|
|
|
90
|
-
====================================
|
|
91
|
-
Пример MDX-документация (не включать в ответ, только как ориентир стиля)
|
|
92
|
-
Обязательно соблюдай стиль и форматирование как в примере
|
|
93
|
-
====================================
|
|
94
243
|
Компонент для создания модальных окон, диалогов и всплывающих элементов с гибким позиционированием и адаптивным поведением.
|
|
95
244
|
|
|
96
245
|
Window управляет отображением контента поверх основного интерфейса, поддерживает различные типы позиционирования (модальные окна, выпадающие меню, action sheets), анимации открытия/закрытия и интеграцию с системой событий. Компонент автоматически обрабатывает клики вне области, управление фокусом и адаптацию под различные размеры экранов.
|
|
@@ -115,6 +264,8 @@ Window управляет отображением контента поверх
|
|
|
115
264
|
|
|
116
265
|
## CSS классы для управления поведением
|
|
117
266
|
|
|
267
|
+
Компонент использует специальные CSS классы для управления поведением:
|
|
268
|
+
|
|
118
269
|
- `*--block` — предотвращает закрытие окна при клике вне его границ
|
|
119
270
|
- `*--blockChildren` — предотвращает закрытие текущего окна
|
|
120
271
|
- `*--blockOther` — предотвращает закрытие других окон до закрытия текущего
|
|
@@ -125,34 +276,20 @@ Window управляет отображением контента поверх
|
|
|
125
276
|
|
|
126
277
|
Где `*` — название класса компонента (например, `d1-window`, `m3-window`).
|
|
127
278
|
|
|
128
|
-
##
|
|
129
|
-
|
|
130
|
-
Компонент Window поддерживает статический режим работы через свойство `staticMode`. В этом режиме окно работает как встроенный компонент без модального поведения:
|
|
131
|
-
|
|
132
|
-
- **Содержимое отображается сразу** — окно не скрывается и не требует активации
|
|
133
|
-
- **Отключены анимации** — нет эффектов появления/исчезновения
|
|
134
|
-
- **Отключено позиционирование** — окно встраивается в поток документа
|
|
135
|
-
- **Работает с adaptive** — когда свойство `adaptive` имеет один из статичных режимов (например, `static`), включается статичный режим
|
|
279
|
+
## Props
|
|
280
|
+
### `adaptive`
|
|
136
281
|
|
|
137
|
-
|
|
282
|
+
Режим адаптивного поведения окна.
|
|
138
283
|
|
|
139
|
-
|
|
284
|
+
**Тип:** `'modal' | 'menu' | 'actionSheet' | 'static'`
|
|
140
285
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
> Применяется только в режиме меню (`adaptive="menu"` или `adaptive="menuWindow"`).
|
|
286
|
+
**По умолчанию:** `'modal'`
|
|
144
287
|
|
|
145
288
|
**Возможные значения:**
|
|
146
|
-
- `'
|
|
147
|
-
- `'
|
|
148
|
-
- `'
|
|
149
|
-
|
|
150
|
-
### Поведение
|
|
151
|
-
|
|
152
|
-
- Компонент автоматически выбирает сторону размещения с наибольшим доступным пространством
|
|
153
|
-
- При использовании контекстного меню (`contextmenu`) позиционирование происходит от координат курсора
|
|
154
|
-
- Окно всегда остается в пределах видимой области экрана (viewport)
|
|
155
|
-
- Отступ от якоря задается через свойство `indent` (по умолчанию 4px)
|
|
289
|
+
- `'modal'` — модальное окно по центру экрана
|
|
290
|
+
- `'menu'` — выпадающее меню, привязанное к элементу
|
|
291
|
+
- `'actionSheet'` — нижняя панель для мобильных устройств
|
|
292
|
+
- `'static'` — статичный режим без оверлея
|
|
156
293
|
|
|
157
294
|
## Управление состоянием через v-model
|
|
158
295
|
|
|
@@ -252,36 +389,61 @@ const handleWindow = (options) => {
|
|
|
252
389
|
</template>
|
|
253
390
|
```
|
|
254
391
|
|
|
255
|
-
|
|
256
|
-
|
|
392
|
+
## Примеры использования
|
|
393
|
+
### Базовое модальное окно
|
|
394
|
+
|
|
395
|
+
<Canvas of={Component.BasicModal}/>
|
|
396
|
+
|
|
397
|
+
### Выпадающее меню
|
|
398
|
+
|
|
399
|
+
<Canvas of={Component.DropdownMenu}/>
|
|
400
|
+
```
|
|
257
401
|
|
|
258
402
|
====================================
|
|
259
403
|
5) Итоговый возврат
|
|
260
404
|
====================================
|
|
261
|
-
Верни результат
|
|
405
|
+
Верни результат СТРОГО в формате (ничего лишнего до или после):
|
|
406
|
+
|
|
262
407
|
[types.ts]
|
|
263
408
|
#########
|
|
264
409
|
[ComponentDoc.stories.ts]
|
|
265
410
|
#########
|
|
266
|
-
[
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
-
|
|
270
|
-
-
|
|
271
|
-
-
|
|
272
|
-
-
|
|
273
|
-
-
|
|
274
|
-
-
|
|
275
|
-
-
|
|
411
|
+
[ComponentName.mdx]
|
|
412
|
+
|
|
413
|
+
**Требования к формату вывода:**
|
|
414
|
+
- НЕ добавляй метки файлов типа `// filepath: ...`
|
|
415
|
+
- НЕ оборачивай в блоки кода (` ```ts `, ` ```md `)
|
|
416
|
+
- НЕ добавляй комментарии с названиями файлов
|
|
417
|
+
- НЕ включай в сам результат текст `[types.ts]`, `[ComponentDoc.stories.ts]`, `[ComponentName.mdx]`
|
|
418
|
+
- Только чистый код, разделённый строкой из девяти символов решётки: `#########`
|
|
419
|
+
- Порядок строго: типы → истории → документация
|
|
420
|
+
- Каждый блок начинается с первой строки кода, без пробелов и переносов перед
|
|
421
|
+
|
|
422
|
+
**Структура каждого блока:**
|
|
423
|
+
- `[types.ts]` — итоговый файл типов с JSDoc комментариями (только содержимое файла)
|
|
424
|
+
- `[ComponentDoc.stories.ts]` — итоговый файл историй (только содержимое файла)
|
|
425
|
+
- `[ComponentName.mdx]` — итоговая MDX-документация (только содержимое файла)
|
|
276
426
|
|
|
277
427
|
====================================
|
|
278
428
|
Ограничения и стилистика
|
|
279
429
|
====================================
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
-
|
|
283
|
-
-
|
|
284
|
-
-
|
|
285
|
-
-
|
|
286
|
-
-
|
|
287
|
-
-
|
|
430
|
+
|
|
431
|
+
**Запрещено:**
|
|
432
|
+
- Таблицы в любом виде
|
|
433
|
+
- Произвольные дополнительные разделы вне указанных
|
|
434
|
+
- Раздел "Props" для простых свойств без сложной логики
|
|
435
|
+
- Дублирование описаний одного и того же
|
|
436
|
+
- Placeholder'ы вне указанных в промпте (`[code]`, `[types]`, `[stories]`, `[md]`)
|
|
437
|
+
- Использование ` ```vue ` для примеров кода (только ` ```html `)
|
|
438
|
+
- Изменение Meta блока в MDX
|
|
439
|
+
- Добавление базового Canvas (`<Canvas of={Component.Component}/>`)
|
|
440
|
+
|
|
441
|
+
**Обязательно:**
|
|
442
|
+
- Язык документации соответствует [wikiLanguage]
|
|
443
|
+
- Если [wikiLanguage] = "en", используй английский для ВСЕЙ документации
|
|
444
|
+
- Если [wikiLanguage] = "ru", используй русский для ВСЕЙ документации
|
|
445
|
+
- Кодовые блоки: типы и события — ` ```ts `, разметка — ` ```html `
|
|
446
|
+
- Истории: только необходимые сценарии, без визуальных украшений
|
|
447
|
+
- Краткость и информативность без "воды"
|
|
448
|
+
- Технически корректные термины
|
|
449
|
+
- Примеры кода работоспособны и актуальны
|