@sberbusiness/triplex-next-mcp-server 1.44.0-beta → 1.46.0-beta
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/README.md +7 -6
- package/bundle/components/AlertContext.md +11 -8
- package/bundle/components/AlertProcess.md +13 -10
- package/bundle/components/Badge.md +6 -3
- package/bundle/components/Button.md +46 -43
- package/bundle/components/ButtonDropdownExtended.md +3 -2
- package/bundle/components/ButtonIcon.md +7 -4
- package/bundle/components/Calendar.md +62 -59
- package/bundle/components/Caption.md +26 -23
- package/bundle/components/CardAction.md +615 -0
- package/bundle/components/Checkbox.md +32 -29
- package/bundle/components/CheckboxTreeExtended.md +9 -5
- package/bundle/components/Chip.md +51 -47
- package/bundle/components/ChipMonthYearPicker.md +344 -0
- package/bundle/components/ChipMultiselect.md +1251 -0
- package/bundle/components/ChipOptions.md +329 -0
- package/bundle/components/ChipSort.md +333 -0
- package/bundle/components/ChipSuggest.md +587 -0
- package/bundle/components/CodeText.md +26 -23
- package/bundle/components/Col.md +1 -2
- package/bundle/components/CollapsibleTree.md +8 -5
- package/bundle/components/DateField.md +222 -303
- package/bundle/components/DatePickerExtended.md +3 -1
- package/bundle/components/Dropdown.md +33 -28
- package/bundle/components/EmptyView.md +12 -5
- package/bundle/components/FooterPage.md +6 -2
- package/bundle/components/FormField.md +47 -42
- package/bundle/components/FormGroup.md +192 -52
- package/bundle/components/Header.md +491 -211
- package/bundle/components/HeaderPage.md +6 -2
- package/bundle/components/HelpBox.md +7 -1
- package/bundle/components/ImageGallery.md +33 -34
- package/bundle/components/ImageGalleryExtended.md +33 -34
- package/bundle/components/Island.md +16 -13
- package/bundle/components/IslandAccordion.md +443 -152
- package/bundle/components/IslandWidget.md +622 -157
- package/bundle/components/LightBox.md +14 -12
- package/bundle/components/Link.md +211 -96
- package/bundle/components/ListActionItem.md +7 -4
- package/bundle/components/ListItem.md +11 -8
- package/bundle/components/ListItemControlsButton.md +16 -13
- package/bundle/components/ListItemControlsButtonDropdown.md +9 -6
- package/bundle/components/ListItemSelectable.md +7 -4
- package/bundle/components/ListMasterFooter.md +8 -5
- package/bundle/components/ListMasterHeader.md +8 -5
- package/bundle/components/ListSortableItem.md +11 -8
- package/bundle/components/ListTableItem.md +7 -4
- package/bundle/components/LoaderMiddle.md +7 -4
- package/bundle/components/LoaderScreen.md +11 -8
- package/bundle/components/LoaderSmall.md +7 -4
- package/bundle/components/Marker.md +184 -69
- package/bundle/components/MarkerStatus.md +206 -88
- package/bundle/components/MaskedField.md +4 -5
- package/bundle/components/MasterTable.md +602 -0
- package/bundle/components/ModalWindow.md +7 -4
- package/bundle/components/MonthYearField.md +3 -1
- package/bundle/components/MultiselectField.md +2183 -132
- package/bundle/components/Notification.md +12 -9
- package/bundle/components/Overlay.md +9 -4
- package/bundle/components/Page.md +2 -2
- package/bundle/components/Pagination.md +15 -8
- package/bundle/components/Row.md +1 -1
- package/bundle/components/SelectExtendedField.md +3 -3
- package/bundle/components/SelectField.md +466 -148
- package/bundle/components/SliderExtended.md +39 -36
- package/bundle/components/SmallInput.md +194 -51
- package/bundle/components/Suggest.md +535 -99
- package/bundle/components/SwipeableArea.md +428 -79
- package/bundle/components/TableBasic.md +19 -11
- package/bundle/components/TabsExtended.md +24 -21
- package/bundle/components/Tag.md +6 -2
- package/bundle/components/Text.md +28 -25
- package/bundle/components/TextField.md +3 -4
- package/bundle/components/ThemeProvider.md +50 -1
- package/bundle/components/Title.md +26 -23
- package/bundle/components/Tooltip.md +24 -21
- package/bundle/components/TopOverlay.md +7 -4
- package/bundle/guides/codestyle.md +3 -0
- package/bundle/guides/context.md +84 -12
- package/bundle/guides/guidelines.md +321 -0
- package/bundle/guides/template.md +22 -12
- package/bundle/manifest.json +75 -17
- package/bundle/release-notes/1.45.0.mdx +117 -0
- package/bundle/release-notes/1.46.0.mdx +66 -0
- package/bundle/release-notes/1.47.0.mdx +7 -0
- package/bundle/tokens.json +6362 -0
- package/dist/index.js +177 -28
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
# Guidelines кодогенерации на Triplex
|
|
2
|
+
|
|
3
|
+
Правила для ИИ-агентов, генерирующих React-код на дизайн-системе Triplex по
|
|
4
|
+
макетам. Документ отдаётся инструментом `get_guidelines` MCP-сервера
|
|
5
|
+
[`@sberbusiness/triplex-next-mcp-server`](https://github.com/SberBusiness/triplex-next-mcp-server)
|
|
6
|
+
и попадает туда через `mcp-data.json` (см. `scripts/generateMcpData.ts`).
|
|
7
|
+
|
|
8
|
+
Аудитория — потребители дизайн-системы (агенты и разработчики, пишущие код
|
|
9
|
+
*на* Triplex), а не контрибьюторы пакета: гайды для контрибьюторов живут в
|
|
10
|
+
`docs/ai/`.
|
|
11
|
+
|
|
12
|
+
Формат: каждое правило — секция со стабильным id `TPX-G-NN`. Id не
|
|
13
|
+
переиспользуются и не меняются; на них можно ссылаться в коде, ревью и
|
|
14
|
+
инструментах. Устаревшее правило помечается словом «отменено» с причиной,
|
|
15
|
+
но секция остаётся.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## TPX-G-01 — Тексты: только компоненты Typography
|
|
20
|
+
|
|
21
|
+
Для текстов из макета подбирается подходящий компонент Typography: `Title`
|
|
22
|
+
(H1 28px / H2 24px / H3 20px) или `Text` (B1 18px / B2 16px / B3 14px /
|
|
23
|
+
B4 12px); начертание `SEMIBOLD` — по шрифту в макете. Голые `span`/`div`
|
|
24
|
+
с текстом — дефект.
|
|
25
|
+
|
|
26
|
+
## TPX-G-02 — Сетка: компоненты Row и Col
|
|
27
|
+
|
|
28
|
+
Горизонтальная раскладка контейнеров реализуется 12-колоночной сеткой
|
|
29
|
+
`Row`/`Col` (`size` из пропорций ширин), а не произвольными flex-обёртками.
|
|
30
|
+
|
|
31
|
+
## TPX-G-03 — Скрытые слои не попадают в кодогенерацию
|
|
32
|
+
|
|
33
|
+
Узлы макета с `visible=false` и их поддеревья исключаются из дерева для
|
|
34
|
+
генерации кода.
|
|
35
|
+
|
|
36
|
+
## TPX-G-04 — Иконки: только из @sberbusiness/icons-next
|
|
37
|
+
|
|
38
|
+
Имена иконок не угадываются — они подбираются через инструмент `list_icons`
|
|
39
|
+
MCP-сервера. Иконки импортируются ТОЛЬКО из пакета
|
|
40
|
+
`@sberbusiness/icons-next`, не из `@sberbusiness/triplex-next`.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import {CrossStrokeSrvIcon24, PlusStrokeSrvIcon16} from "@sberbusiness/icons-next";
|
|
44
|
+
// НЕВЕРНО: import {CrossStrokeSrvIcon24} from "@sberbusiness/triplex-next";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## TPX-G-05 — Хардкод цвета — дефект
|
|
48
|
+
|
|
49
|
+
Литералы цветов и значения, скопированные из стилей макета, в
|
|
50
|
+
сгенерированном коде недопустимы — цвета элементам дают сами компоненты
|
|
51
|
+
дизайн-системы и их темы.
|
|
52
|
+
|
|
53
|
+
Как устроены токены: они заводятся в TS-объекте пакета
|
|
54
|
+
(`src/components/DesignTokens/`), из него генерируются css-переменные,
|
|
55
|
+
которыми пользуются стили самой дизайн-системы — в исходниках less это
|
|
56
|
+
`color: var(--triplex-next-Link-Text_Color_Default)`, а при сборке
|
|
57
|
+
npm-пакета к имени дописывается версия
|
|
58
|
+
(`--triplex-next-Link-Text_Color_Default-1-44-0`).
|
|
59
|
+
|
|
60
|
+
Из-за версионного суффикса в сгенерированном коде приложения на эти
|
|
61
|
+
css-переменные не ссылаются — имя меняется каждый релиз (см.
|
|
62
|
+
`ThemeProvider-ai.md`). Вместо этого:
|
|
63
|
+
|
|
64
|
+
- значение токена в JS — хук `useToken` из `@sberbusiness/triplex-next`;
|
|
65
|
+
- переопределение оформления — prop `tokens` у `ThemeProvider` с путём
|
|
66
|
+
`Группа.Токен`; объект `tokens` выносить из рендера или мемоизировать,
|
|
67
|
+
иначе стили пересобираются на каждый рендер;
|
|
68
|
+
- список существующих токенов — `get_tokens` MCP-сервера.
|
|
69
|
+
|
|
70
|
+
## TPX-G-06 — Перед использованием компонента — сверяться с документацией
|
|
71
|
+
|
|
72
|
+
Использовать компонент, для которого не смотрел документацию, ЗАПРЕЩЕНО:
|
|
73
|
+
перед КАЖДЫМ компонентом вызови `get_component` MCP-сервера и возьми оттуда
|
|
74
|
+
обязательные props и инварианты структуры — они не выводятся из имён.
|
|
75
|
+
Сгенерированный код обязан компилироваться: обязательные props без значения
|
|
76
|
+
заполняй заглушками из документации.
|
|
77
|
+
|
|
78
|
+
## TPX-G-07 — Каркас содержимого страницы — Page
|
|
79
|
+
|
|
80
|
+
Внутри `LightBox.Content` (и вообще как каркас страницы) используется
|
|
81
|
+
`Page`, а в нём — только `Page.Header`, `Page.Body` и `Page.Footer`
|
|
82
|
+
(типы `FIRST`/`SECOND` задают наличие обёртки-Island).
|
|
83
|
+
|
|
84
|
+
## TPX-G-08 — Обязательная обвязка приложения на Triplex
|
|
85
|
+
|
|
86
|
+
Приложение на Triplex подключает три обязательных куска; без любого из них
|
|
87
|
+
рендер тихо деградирует:
|
|
88
|
+
|
|
89
|
+
1. стили дизайн-системы `@sberbusiness/triplex-next/styles/triplex-next.css`;
|
|
90
|
+
2. стили иконок `@sberbusiness/icons-next/styles/icons.css` (fill-цвета и
|
|
91
|
+
состояния hoverable/active/disabled);
|
|
92
|
+
3. `@font-face` для шрифтов SBSans* из
|
|
93
|
+
`@sberbusiness/triplex-next/assets/fonts` — пакет поставляет woff2,
|
|
94
|
+
но face объявляет потребитель (с `font-weight`/`font-style` по
|
|
95
|
+
инструкции).
|
|
96
|
+
|
|
97
|
+
Контент оборачивается в `ThemeProvider` со `scopeRef` на элемент-контейнер.
|
|
98
|
+
Базовый шрифт приложения задаётся явно:
|
|
99
|
+
`body { font-family: SBSansText, Arial, sans-serif; }` — текст вне
|
|
100
|
+
компонентов Typography не должен падать на системный шрифт.
|
|
101
|
+
|
|
102
|
+
Официальная инструкция подключения:
|
|
103
|
+
https://triplex-design.ru/storybook/main/?path=/docs/introduction--docs
|
|
104
|
+
(там же соответствие версий: 0.x — React 17, 1.x — React 18).
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import {Button, Island, Page} from "@sberbusiness/triplex-next"; // компоненты и enum'ы — отсюда
|
|
108
|
+
import {CrossStrokeSrvIcon24} from "@sberbusiness/icons-next"; // иконки — только отсюда
|
|
109
|
+
import "@sberbusiness/triplex-next/styles/triplex-next.css";
|
|
110
|
+
import "@sberbusiness/icons-next/styles/icons.css";
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## TPX-G-09 — Вертикальные внешние отступы — компонент Gap
|
|
114
|
+
|
|
115
|
+
Вертикальные отступы между блоками (айлендами, панелями, секциями) задаются
|
|
116
|
+
компонентом `Gap` с размером из шкалы, а не `margin` или пустыми
|
|
117
|
+
контейнерами.
|
|
118
|
+
|
|
119
|
+
## TPX-G-10 — Конвенция имён слоёв макета
|
|
120
|
+
|
|
121
|
+
Имена слоёв несут семантику для чтения макета: префикс `_` — служебный
|
|
122
|
+
слой, игнорируется вместе с поддеревом (мишени прототипных переходов,
|
|
123
|
+
черновики); префикс `#` — слот шаблона (контейнер контента); префикс `@` —
|
|
124
|
+
иконка, подменяется иконкой из `@sberbusiness/icons-next`; суффиксы
|
|
125
|
+
`_text`/`_label`/`_placeholder` указывают, какому текстовому prop
|
|
126
|
+
компонента принадлежит текст ноды. Остальные имена — осмысленные; мусорные
|
|
127
|
+
имена (`Frame 427`, `Rectangle 12`) деградируют именной фолбэк маппинга.
|
|
128
|
+
|
|
129
|
+
## TPX-G-11 — TableBasic: ячейка рендерится только при наличии fieldKey в rowData
|
|
130
|
+
|
|
131
|
+
Каждая колонка `TableBasic` обязана иметь соответствующий ключ в `rowData`
|
|
132
|
+
КАЖДОЙ строки — ячейку без ключа компонент молча пропускает. Колонкам, чей
|
|
133
|
+
контент даёт `renderCell` (кнопки, статусы, чекбоксы), в `rowData` кладётся
|
|
134
|
+
значение-заглушка. Таким колонкам также обязателен
|
|
135
|
+
`cellType: ECellType.COMPONENTS` (чекбоксам — `CHECKBOX`): при дефолтном
|
|
136
|
+
`TEXT` контент оборачивается в `Text B3`, ломая отступы и семантику.
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
// колонка: {fieldKey: "sign", cellType: ECellType.COMPONENTS, renderCell: () => <Button …>Подписать</Button>}
|
|
140
|
+
// строка: rowData: {…, sign: true} // без ключа sign ячейка не отрендерится
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## TPX-G-12 — отменено
|
|
144
|
+
|
|
145
|
+
Id зарезервирован и отменён до публикации (конвенция оформления импортов —
|
|
146
|
+
стиль потребителя, на кодогенерацию из макета не влияет). Id не
|
|
147
|
+
переиспользуется.
|
|
148
|
+
|
|
149
|
+
## TPX-G-13 — Вес Typography — из суффикса текст-стиля макета
|
|
150
|
+
|
|
151
|
+
Суффикс имени текст-стиля макета задаёт начертание. Для `Title`
|
|
152
|
+
(`EFontWeightTitle`: REGULAR / MEDIUM / SEMIBOLD / BOLD, дефолт —
|
|
153
|
+
semibold): `-M` (`Header/H3-M`) → `weight={EFontWeightTitle.MEDIUM}` —
|
|
154
|
+
без явного `weight` текст будет жирнее макета; `-S` (`Header/H1-S`) →
|
|
155
|
+
semibold, `weight` не пишется (дефолт). Для `Text` (`EFontWeightText`)
|
|
156
|
+
доступны только REGULAR (дефолт) и SEMIBOLD — веса MEDIUM у `Text` нет:
|
|
157
|
+
стили с суффиксом полужирного начертания (`-S`/`-Sb`) →
|
|
158
|
+
`weight={EFontWeightText.SEMIBOLD}`, прочие — дефолт REGULAR, `weight`
|
|
159
|
+
не пишется. Проверять текст-стиль узла макета, а не полагаться на
|
|
160
|
+
визуальную оценку.
|
|
161
|
+
|
|
162
|
+
```tsx
|
|
163
|
+
<Title size={ETitleSize.H3} weight={EFontWeightTitle.MEDIUM}>…</Title> // стиль макета Header/H3-M
|
|
164
|
+
<Title tag="h1" size={ETitleSize.H1}>…</Title> // стиль Header/H1-S: semibold — дефолт
|
|
165
|
+
<Text size={ETextSize.B3} weight={EFontWeightText.SEMIBOLD}>…</Text> // полужирный Body-стиль
|
|
166
|
+
<Text size={ETextSize.B3}>…</Text> // обычный Body-стиль: REGULAR — дефолт
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
## TPX-G-14 — HelpBox и тултипы — без preferPlace
|
|
170
|
+
|
|
171
|
+
У `HelpBox` (и тултипов) `preferPlace`, как правило, не указывается — логики
|
|
172
|
+
компонента хватает, чтобы позиционировать тултип правильно; явный prop
|
|
173
|
+
ничего не ломает, но избыточен. Вариант `Position=Top/Left/…` из макета в
|
|
174
|
+
prop не переносится.
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
<HelpBox tooltipSize={ETooltipSize.SM}>Текст подсказки</HelpBox>
|
|
178
|
+
// НЕВЕРНО: <HelpBox tooltipSize={ETooltipSize.SM} preferPlace={ETooltipPreferPlace.ABOVE}>…</HelpBox>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## TPX-G-15 — Инлайн-стили в коде на компонентах ДС запрещены
|
|
182
|
+
|
|
183
|
+
В коде приложений на компонентах Triplex НИКОГДА не писать `style={{…}}`
|
|
184
|
+
для раскладки, отступов и выравнивания — их дают сами компоненты (`Gap`,
|
|
185
|
+
`Row`/`Col`, штатные подкомпоненты). Если базовый компонент не умеет
|
|
186
|
+
раскладку, которую рисует макет (пример: право-выровненный футер есть у
|
|
187
|
+
`IslandWidget`/`IslandAccordion`, у базового `Island` — нет), это ошибка
|
|
188
|
+
макета: контент кладётся в компонент как есть, расхождение фиксируется
|
|
189
|
+
диагностикой. Исключение — фреймы без компонентов ДС (absolute-витрины),
|
|
190
|
+
где штатной раскладки не существует.
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
// НЕВЕРНО: <Island.Footer style={{display: "flex", justifyContent: "flex-end", gap: 16}}>
|
|
194
|
+
<Island.Footer><Button …>Отмена</Button><Button …>Сохранить</Button></Island.Footer>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## TPX-G-16 — Описание и постфикс полевых компонентов — через targetProps
|
|
198
|
+
|
|
199
|
+
У полевых компонентов, чей `targetProps` наследует TextFieldBase
|
|
200
|
+
(`DateField` через MaskedField и т.п.), описание под полем и постфикс
|
|
201
|
+
(в т.ч. `HelpBox`) передаются через `targetProps.description` /
|
|
202
|
+
`targetProps.postfix` — постфикс НЕ перетирает встроенные иконки (календарь
|
|
203
|
+
`DateField`). У `SelectField` prop `description` отсутствует — там описание
|
|
204
|
+
строится паттерном `FormGroup` + `SelectField` + `FormFieldDescription`.
|
|
205
|
+
Перед выбором паттерна сверяться с примером `get_component`.
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
<DateField … targetProps={{postfix: <HelpBox tooltipSize={ETooltipSize.SM} />, description: <Text …>…</Text>}} />
|
|
209
|
+
<FormGroup><SelectField … /><FormFieldDescription>…</FormFieldDescription></FormGroup>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
## TPX-G-17 — Композиция MasterTable: ChipPanel и порядок панелей
|
|
213
|
+
|
|
214
|
+
Чипы-фильтры таблицы кладутся в `MasterTable.ChipPanel` (`ChipGroup`
|
|
215
|
+
size SM `oneLine`), правая часть строки чипов — `MasterTable.ChipPanel.Links`
|
|
216
|
+
(туда же — `TableBasicSettings` со ссылкой настроек), а не в `FilterPanel`.
|
|
217
|
+
Порядок панелей: `ChipPanel` → `TableBasic` → `TableFooter` (появляется при
|
|
218
|
+
выборе строк) → `PaginationPanel`. Варианты чипов макета: `Chip/DatePicker` →
|
|
219
|
+
`ChipDatePicker`, `Chip/Select` → `ChipSelect`, `Chip/Multiselect` →
|
|
220
|
+
`ChipMultiselect`, `Chip/Suggest` → `ChipSuggest`; `Chip/MonthYearPicker`
|
|
221
|
+
аналога не имеет → `ChipSelect`.
|
|
222
|
+
|
|
223
|
+
## TPX-G-18 — Кнопка-иконка: Button с icon vs ButtonIcon
|
|
224
|
+
|
|
225
|
+
Варианты кнопок макета `Type=Icon*` (`IconSecondary`, `IconSecondaryLight`,
|
|
226
|
+
…) — это `Button` с prop `icon` и соответствующей темой, БЕЗ children (плюс
|
|
227
|
+
`aria-label`). `ButtonIcon` — только для «голой» иконки-кнопки без подложки;
|
|
228
|
+
это нативный `<button>` без видимого текста, поэтому `aria-label` для него
|
|
229
|
+
обязателен так же, как для icon-`Button`.
|
|
230
|
+
В ячейках таблиц и шапках страниц кнопки с серой/светлой подложкой —
|
|
231
|
+
`Button` с `icon`. Размер иконки — из макета (MD-кнопка → 20, LG → 24).
|
|
232
|
+
|
|
233
|
+
```tsx
|
|
234
|
+
<Button icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />} theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} aria-label="Действие" />
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
## TPX-G-19 — columns TableBasic — стабильная ссылка
|
|
238
|
+
|
|
239
|
+
Массив `columns` для `TableBasic` должен быть стабильным по ссылке между
|
|
240
|
+
рендерами (`useMemo`/константа модуля): `TableBasic` пишет columns в
|
|
241
|
+
`MasterTableContext` через `useEffect` с проверкой `isEqual`, а `isEqual`
|
|
242
|
+
сравнивает функции (`renderCell`) по ссылке — пересоздаваемый каждый рендер
|
|
243
|
+
массив крутит бесконечную петлю записи в контекст. Симптомы: лишние
|
|
244
|
+
ре-рендеры, нестабильный список в `ColumnSettings`.
|
|
245
|
+
|
|
246
|
+
```tsx
|
|
247
|
+
const columns = useMemo<ITableBasicColumn[]>(() => [...], [/* state, от которого зависят renderCell */]);
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
## TPX-G-20 — ColumnSettings.SortableList не строит пункты сам
|
|
251
|
+
|
|
252
|
+
У `ColumnSettings.SortableList` props `columns`/`onColumnsChange` — только
|
|
253
|
+
dnd-обвязка (порядок при перетаскивании); пункты списка рендерит потребитель
|
|
254
|
+
детьми: `ColumnSettings.SortableList.Item` с `id={fieldKey}` и контентом
|
|
255
|
+
(обычно `Checkbox` видимости колонки + label). Без детей меню настроек
|
|
256
|
+
открывается пустым.
|
|
257
|
+
|
|
258
|
+
```tsx
|
|
259
|
+
<ColumnSettings.SortableList columns={cols} onColumnsChange={setCols}>
|
|
260
|
+
{cols.map((c) => (
|
|
261
|
+
<ColumnSettings.SortableList.Item key={c.fieldKey} id={c.fieldKey}>
|
|
262
|
+
<Checkbox checked={!c.hidden} onChange={…}>{c.label}</Checkbox>
|
|
263
|
+
</ColumnSettings.SortableList.Item>
|
|
264
|
+
))}
|
|
265
|
+
</ColumnSettings.SortableList>
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
## TPX-G-21 — Компонент не найден в get_component: искать в типах пакета
|
|
269
|
+
|
|
270
|
+
Ответ `get_component` «Компонент не найден» не означает, что компонента нет
|
|
271
|
+
в пакете: документация MCP отстаёт от `@sberbusiness/triplex-next`, а
|
|
272
|
+
составные компоненты описаны под именем родителя — `MasterTable`,
|
|
273
|
+
`TableFooter`, `PaginationPanel` в `Table`/`TableBasic`; `ChipSelect`,
|
|
274
|
+
`ChipDatePicker`, `ChipMultiselect`, `ChipSuggest` в `Chip`/`ChipGroup`;
|
|
275
|
+
`FormFieldDescription` в `FormField`.
|
|
276
|
+
|
|
277
|
+
Порядок действий:
|
|
278
|
+
|
|
279
|
+
1. вызвать `get_component` для родителя из `list_components` и искать
|
|
280
|
+
под-компонент в его примерах;
|
|
281
|
+
2. если не нашёл — взять API из типов установленного пакета:
|
|
282
|
+
`node_modules/@sberbusiness/triplex-next/index.d.ts` и
|
|
283
|
+
`components/<Родитель>/*.d.ts` (имена экспортов, обязательные props,
|
|
284
|
+
`enum`'ы);
|
|
285
|
+
3. компилировать `tsc` как обычно.
|
|
286
|
+
|
|
287
|
+
Придумывать имя компонента или props по памяти ЗАПРЕЩЕНО, как и заменять
|
|
288
|
+
недокументированный компонент html-тегом «раз документации нет».
|
|
289
|
+
|
|
290
|
+
```tsx
|
|
291
|
+
// get_component('MasterTable') → «не найден» → get_component('Table') → пример MasterTable.TableBasic
|
|
292
|
+
// get_component('ChipSelect') → «не найден» → index.d.ts → components/Chip/ChipSelect.d.ts → props
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
## TPX-G-22 — Растры макета: ссылка по имени файла, байты передаются отдельно
|
|
296
|
+
|
|
297
|
+
Инструменты чтения макета байты изображений, как правило, не отдают: у
|
|
298
|
+
растровой заливки есть только hash содержимого, имя файла вида
|
|
299
|
+
`images/<hash>.png` и режим масштабирования (`FILL`/`FIT`). Правила для
|
|
300
|
+
кода:
|
|
301
|
+
|
|
302
|
+
1. растр вставляется как `<img src="/assets/<hash>.<ext>">` (или в prop
|
|
303
|
+
компонента, принимающего `src`) с `alt` из имени слоя;
|
|
304
|
+
2. режим масштабирования переносится в `object-fit`: `FILL` → `cover`,
|
|
305
|
+
`FIT` → `contain` — prop'ом или классом, не инлайн-стилем (TPX-G-15);
|
|
306
|
+
3. файл с тем же именем кладётся в ассеты приложения отдельным шагом
|
|
307
|
+
передачи — экспортом из дизайн-инструмента или от дизайнера;
|
|
308
|
+
4. выдумывать URL, встраивать base64 или подменять картинку заглушкой из
|
|
309
|
+
интернета ЗАПРЕЩЕНО;
|
|
310
|
+
5. картинки-контент (фото в галерее, аватары, превью документов) — это
|
|
311
|
+
данные, а не UI: в компонент они передаются через props/items с теми же
|
|
312
|
+
`src`, а сам массив помечается как демо-данные.
|
|
313
|
+
|
|
314
|
+
Отсутствующий на диске файл — не ошибка генерации, а пункт передачи
|
|
315
|
+
ассетов: код ссылается на него по имени и остаётся рабочим, когда файл
|
|
316
|
+
положат.
|
|
317
|
+
|
|
318
|
+
```tsx
|
|
319
|
+
<img src="/assets/ca92f04f46fa1c8c91a3d1406bc68b9ceffa7f86.png" alt="raster-fill" />
|
|
320
|
+
// демо-данные: [{src: "/assets/<hash>.png", alt: "…"}, …] — имя файла из макета, не выдуманное
|
|
321
|
+
```
|
|
@@ -17,7 +17,10 @@ version: "1.0"
|
|
|
17
17
|
Описывай намерения и ограничения, которые не видны из кода.
|
|
18
18
|
|
|
19
19
|
Frontmatter:
|
|
20
|
-
- tokens:
|
|
20
|
+
- tokens: пути дизайн-токенов, которые использует компонент, в формате
|
|
21
|
+
`{Группа}.{Токен}` (например `Button.General_Background_Default`).
|
|
22
|
+
Не css-переменные: они внутренние и версионируются на сборке.
|
|
23
|
+
Нормализуется и проверяется скриптом `npm run syncAiMdTokens`.
|
|
21
24
|
- related: индекс переходов для агента. Полное правило: docs/ai/CONTEXT.md → «Как заполнять related в AI.md».
|
|
22
25
|
|
|
23
26
|
Таблица Stories: колонка `Example file` обязательна — её читает сборщик
|
|
@@ -64,19 +67,26 @@ mcp-data.json, чтобы инлайнить код примера. См. раз
|
|
|
64
67
|
|
|
65
68
|
## Дизайн-токены
|
|
66
69
|
|
|
67
|
-
<!--
|
|
70
|
+
<!--
|
|
71
|
+
Только те токены, которые используются в стилях компонента. Путь токена —
|
|
72
|
+
`{Группа}.{Токен}`: ровно в этом виде он передаётся в ThemeProvider.
|
|
73
|
+
CSS-переменные `--triplex-next-*` здесь не пишем — это внутренний слой,
|
|
74
|
+
на сборке к ним дописывается версия пакета. См. docs/ai/CONTEXT.md → «Дизайн-токены».
|
|
75
|
+
-->
|
|
68
76
|
|
|
77
|
+
Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
|
|
78
|
+
«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/ComponentName.ts`.
|
|
79
|
+
|
|
80
|
+
```text
|
|
81
|
+
ComponentName.Variant_Background_Default
|
|
82
|
+
ComponentName.Variant_Color_Hover
|
|
83
|
+
ComponentName.Variant_Shadow_Focus
|
|
69
84
|
```
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
--triplex-next-ComponentName-Variant_Color_Active
|
|
76
|
-
--triplex-next-ComponentName-Variant_Shadow_Focus
|
|
77
|
-
--triplex-next-ComponentName-Variant_Background_Disabled
|
|
78
|
-
--triplex-next-ComponentName-Variant_Color_Disabled
|
|
79
|
-
```
|
|
85
|
+
|
|
86
|
+
<!--
|
|
87
|
+
Пример кода с ThemeProvider здесь не дублируем — он живёт в ThemeProvider-ai.md,
|
|
88
|
+
иначе те же строки расползаются по всем AI.md и устаревают.
|
|
89
|
+
-->
|
|
80
90
|
|
|
81
91
|
---
|
|
82
92
|
|
package/bundle/manifest.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
|
-
"triplexVersion": "1.
|
|
4
|
-
"generatedAt": "2026-
|
|
3
|
+
"triplexVersion": "1.46.0",
|
|
4
|
+
"generatedAt": "2026-09-11T14:38:29.457Z",
|
|
5
5
|
"components": [
|
|
6
6
|
{
|
|
7
7
|
"name": "AbstractTree",
|
|
@@ -111,6 +111,12 @@
|
|
|
111
111
|
"file": "components/Card.md",
|
|
112
112
|
"ai_ready": true
|
|
113
113
|
},
|
|
114
|
+
{
|
|
115
|
+
"name": "CardAction",
|
|
116
|
+
"path": "src/components/Card/CardAction-ai.md",
|
|
117
|
+
"file": "components/CardAction.md",
|
|
118
|
+
"ai_ready": true
|
|
119
|
+
},
|
|
114
120
|
{
|
|
115
121
|
"name": "Carousel",
|
|
116
122
|
"path": "src/components/Carousel",
|
|
@@ -166,6 +172,36 @@
|
|
|
166
172
|
"file": "components/ChipGroup.md",
|
|
167
173
|
"ai_ready": true
|
|
168
174
|
},
|
|
175
|
+
{
|
|
176
|
+
"name": "ChipMonthYearPicker",
|
|
177
|
+
"path": "src/components/Chip/ChipMonthYearPicker-ai.md",
|
|
178
|
+
"file": "components/ChipMonthYearPicker.md",
|
|
179
|
+
"ai_ready": true
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "ChipMultiselect",
|
|
183
|
+
"path": "src/components/Chip/ChipMultiselect-ai.md",
|
|
184
|
+
"file": "components/ChipMultiselect.md",
|
|
185
|
+
"ai_ready": true
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "ChipOptions",
|
|
189
|
+
"path": "src/components/Chip/ChipOptions-ai.md",
|
|
190
|
+
"file": "components/ChipOptions.md",
|
|
191
|
+
"ai_ready": true
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"name": "ChipSort",
|
|
195
|
+
"path": "src/components/Chip/ChipSort-ai.md",
|
|
196
|
+
"file": "components/ChipSort.md",
|
|
197
|
+
"ai_ready": true
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"name": "ChipSuggest",
|
|
201
|
+
"path": "src/components/Chip/ChipSuggest-ai.md",
|
|
202
|
+
"file": "components/ChipSuggest.md",
|
|
203
|
+
"ai_ready": true
|
|
204
|
+
},
|
|
169
205
|
{
|
|
170
206
|
"name": "CodeText",
|
|
171
207
|
"path": "src/components/Typography/CodeText-ai.md",
|
|
@@ -204,7 +240,7 @@
|
|
|
204
240
|
},
|
|
205
241
|
{
|
|
206
242
|
"name": "DateField",
|
|
207
|
-
"path": "src/components/DateField/DateField-
|
|
243
|
+
"path": "src/components/DateField/DateField-ai.md",
|
|
208
244
|
"file": "components/DateField.md",
|
|
209
245
|
"ai_ready": true
|
|
210
246
|
},
|
|
@@ -289,7 +325,7 @@
|
|
|
289
325
|
},
|
|
290
326
|
{
|
|
291
327
|
"name": "FormGroup",
|
|
292
|
-
"path": "src/components/FormGroup/FormGroup-
|
|
328
|
+
"path": "src/components/FormGroup/FormGroup-ai.md",
|
|
293
329
|
"file": "components/FormGroup.md",
|
|
294
330
|
"ai_ready": true
|
|
295
331
|
},
|
|
@@ -301,7 +337,7 @@
|
|
|
301
337
|
},
|
|
302
338
|
{
|
|
303
339
|
"name": "Header",
|
|
304
|
-
"path": "src/components/Header/Header-
|
|
340
|
+
"path": "src/components/Header/Header-ai.md",
|
|
305
341
|
"file": "components/Header.md",
|
|
306
342
|
"ai_ready": true
|
|
307
343
|
},
|
|
@@ -343,13 +379,13 @@
|
|
|
343
379
|
},
|
|
344
380
|
{
|
|
345
381
|
"name": "IslandAccordion",
|
|
346
|
-
"path": "src/components/IslandAccordion/IslandAccordion-
|
|
382
|
+
"path": "src/components/IslandAccordion/IslandAccordion-ai.md",
|
|
347
383
|
"file": "components/IslandAccordion.md",
|
|
348
384
|
"ai_ready": true
|
|
349
385
|
},
|
|
350
386
|
{
|
|
351
387
|
"name": "IslandWidget",
|
|
352
|
-
"path": "src/components/IslandWidget/IslandWidget-
|
|
388
|
+
"path": "src/components/IslandWidget/IslandWidget-ai.md",
|
|
353
389
|
"file": "components/IslandWidget.md",
|
|
354
390
|
"ai_ready": true
|
|
355
391
|
},
|
|
@@ -367,7 +403,7 @@
|
|
|
367
403
|
},
|
|
368
404
|
{
|
|
369
405
|
"name": "Link",
|
|
370
|
-
"path": "src/components/Link/Link-
|
|
406
|
+
"path": "src/components/Link/Link-ai.md",
|
|
371
407
|
"file": "components/Link.md",
|
|
372
408
|
"ai_ready": true
|
|
373
409
|
},
|
|
@@ -469,22 +505,28 @@
|
|
|
469
505
|
},
|
|
470
506
|
{
|
|
471
507
|
"name": "Marker",
|
|
472
|
-
"path": "src/components/Marker/Marker-
|
|
508
|
+
"path": "src/components/Marker/Marker-ai.md",
|
|
473
509
|
"file": "components/Marker.md",
|
|
474
510
|
"ai_ready": true
|
|
475
511
|
},
|
|
476
512
|
{
|
|
477
513
|
"name": "MarkerStatus",
|
|
478
|
-
"path": "src/components/MarkerStatus/MarkerStatus-
|
|
514
|
+
"path": "src/components/MarkerStatus/MarkerStatus-ai.md",
|
|
479
515
|
"file": "components/MarkerStatus.md",
|
|
480
516
|
"ai_ready": true
|
|
481
517
|
},
|
|
482
518
|
{
|
|
483
519
|
"name": "MaskedField",
|
|
484
|
-
"path": "src/components/
|
|
520
|
+
"path": "src/components/MaskedField/MaskedField-ai.md",
|
|
485
521
|
"file": "components/MaskedField.md",
|
|
486
522
|
"ai_ready": true
|
|
487
523
|
},
|
|
524
|
+
{
|
|
525
|
+
"name": "MasterTable",
|
|
526
|
+
"path": "src/components/Table/MasterTable-ai.md",
|
|
527
|
+
"file": "components/MasterTable.md",
|
|
528
|
+
"ai_ready": true
|
|
529
|
+
},
|
|
488
530
|
{
|
|
489
531
|
"name": "MediaWidth",
|
|
490
532
|
"path": "src/components/MediaWidth/MediaWidth-ai.md",
|
|
@@ -518,7 +560,7 @@
|
|
|
518
560
|
},
|
|
519
561
|
{
|
|
520
562
|
"name": "MultiselectField",
|
|
521
|
-
"path": "src/components/MultiselectField/MultiselectField-
|
|
563
|
+
"path": "src/components/MultiselectField/MultiselectField-ai.md",
|
|
522
564
|
"file": "components/MultiselectField.md",
|
|
523
565
|
"ai_ready": true
|
|
524
566
|
},
|
|
@@ -590,7 +632,7 @@
|
|
|
590
632
|
},
|
|
591
633
|
{
|
|
592
634
|
"name": "SelectField",
|
|
593
|
-
"path": "src/components/SelectField/SelectField-
|
|
635
|
+
"path": "src/components/SelectField/SelectField-ai.md",
|
|
594
636
|
"file": "components/SelectField.md",
|
|
595
637
|
"ai_ready": true
|
|
596
638
|
},
|
|
@@ -620,7 +662,7 @@
|
|
|
620
662
|
},
|
|
621
663
|
{
|
|
622
664
|
"name": "SmallInput",
|
|
623
|
-
"path": "src/components/SmallInput/SmallInput-
|
|
665
|
+
"path": "src/components/SmallInput/SmallInput-ai.md",
|
|
624
666
|
"file": "components/SmallInput.md",
|
|
625
667
|
"ai_ready": true
|
|
626
668
|
},
|
|
@@ -656,7 +698,7 @@
|
|
|
656
698
|
},
|
|
657
699
|
{
|
|
658
700
|
"name": "Suggest",
|
|
659
|
-
"path": "src/components/Suggest/Suggest-
|
|
701
|
+
"path": "src/components/Suggest/Suggest-ai.md",
|
|
660
702
|
"file": "components/Suggest.md",
|
|
661
703
|
"ai_ready": true
|
|
662
704
|
},
|
|
@@ -668,7 +710,7 @@
|
|
|
668
710
|
},
|
|
669
711
|
{
|
|
670
712
|
"name": "SwipeableArea",
|
|
671
|
-
"path": "src/components/SwipeableArea/SwipeableArea-
|
|
713
|
+
"path": "src/components/SwipeableArea/SwipeableArea-ai.md",
|
|
672
714
|
"file": "components/SwipeableArea.md",
|
|
673
715
|
"ai_ready": true
|
|
674
716
|
},
|
|
@@ -855,6 +897,11 @@
|
|
|
855
897
|
"topic": "template",
|
|
856
898
|
"file": "guides/template.md",
|
|
857
899
|
"path": "docs/ai/template-ai.md"
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
"topic": "guidelines",
|
|
903
|
+
"file": "guides/guidelines.md",
|
|
904
|
+
"path": "docs/mcp/guidelines.md"
|
|
858
905
|
}
|
|
859
906
|
],
|
|
860
907
|
"releaseNotes": [
|
|
@@ -1078,6 +1125,16 @@
|
|
|
1078
1125
|
"file": "release-notes/1.45.0.mdx",
|
|
1079
1126
|
"path": "stories/release-notes/v1/1.45.0.mdx"
|
|
1080
1127
|
},
|
|
1128
|
+
{
|
|
1129
|
+
"version": "1.46.0",
|
|
1130
|
+
"file": "release-notes/1.46.0.mdx",
|
|
1131
|
+
"path": "stories/release-notes/v1/1.46.0.mdx"
|
|
1132
|
+
},
|
|
1133
|
+
{
|
|
1134
|
+
"version": "1.47.0",
|
|
1135
|
+
"file": "release-notes/1.47.0.mdx",
|
|
1136
|
+
"path": "stories/release-notes/v1/1.47.0.mdx"
|
|
1137
|
+
},
|
|
1081
1138
|
{
|
|
1082
1139
|
"version": "1.5.0",
|
|
1083
1140
|
"file": "release-notes/1.5.0.mdx",
|
|
@@ -1108,5 +1165,6 @@
|
|
|
1108
1165
|
"file": "release-notes/1.9.0.mdx",
|
|
1109
1166
|
"path": "stories/release-notes/v1/1.9.0.mdx"
|
|
1110
1167
|
}
|
|
1111
|
-
]
|
|
1168
|
+
],
|
|
1169
|
+
"tokens": "tokens.json"
|
|
1112
1170
|
}
|