@sberbusiness/triplex-next-mcp-server 0.24.0-beta1 → 0.36.0-beta0

package/bundle/components/Badge.md

@@ -275,3 +275,206 @@ export const Badge = Object.assign(
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Badge/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Badge, EComponentSize, EFontType, EFontWeightText, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <Badge size={EComponentSize.MD}>
+        <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+            Badge text
+        </Text>
+    </Badge>
+);
+```
+
+### Sizes
+
+`stories/Badge/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    Badge,
+    Caption,
+    ECaptionSize,
+    EComponentSize,
+    EFontType,
+    EFontWeightCaption,
+    EFontWeightText,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "150px" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <Badge size={EComponentSize.SM}>
+                <Caption size={ECaptionSize.C1} weight={EFontWeightCaption.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text SM
+                </Caption>
+            </Badge>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <Badge size={EComponentSize.MD}>
+                <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text MD
+                </Text>
+            </Badge>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <Badge size={EComponentSize.LG}>
+                <Text size={ETextSize.B3} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text LG
+                </Text>
+            </Badge>
+        </div>
+    </div>
+);
+```
+
+### WithPrefixAndPostfix
+
+`stories/Badge/examples/WithPrefixAndPostfixExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    PercentsmallStrokeSrvIcon16,
+    PercentsmallStrokeSrvIcon20,
+    PercentsmallStrokeSrvIcon24,
+} from "@sberbusiness/icons-next";
+import {
+    Badge,
+    Caption,
+    ECaptionSize,
+    EComponentSize,
+    EFontType,
+    EFontWeightCaption,
+    EFontWeightText,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+export const WithPrefixAndPostfixExample = () => (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+        <Badge
+            size={EComponentSize.SM}
+            prefix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
+        >
+            <Caption size={ECaptionSize.C1} weight={EFontWeightCaption.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text SM
+            </Caption>
+        </Badge>
+        <Badge
+            size={EComponentSize.MD}
+            prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
+        >
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text MD
+            </Text>
+        </Badge>
+        <Badge
+            size={EComponentSize.LG}
+            prefix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
+        >
+            <Text size={ETextSize.B3} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text LG
+            </Text>
+        </Badge>
+    </div>
+);
+```
+
+### DotSizes
+
+`stories/Badge/examples/DotSizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Badge, EComponentSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EComponentSize);
+
+export const DotSizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        {SIZES.map((size) => (
+            <div key={size} style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+                <Badge.Dot size={size} />
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Example
+
+`stories/Badge/examples/ProductionExample.tsx`
+
+```tsx
+import React from "react";
+import { NewsmallFilledSrvIcon20, PercentsmallStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+import { Badge, EComponentSize, EFontType, EFontWeightText, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const ProductionExample = () => (
+    <div style={{ display: "flex", gap: "16px" }}>
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />} />
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text
+            </Text>
+        </Badge>
+        <Badge
+            size={EComponentSize.MD}
+            prefix={<NewsmallFilledSrvIcon20 paletteIndex={7} />}
+            style={{ backgroundColor: "#1297FE" }}
+        >
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Новинка
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#E3FFFA" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.BRAND}>
+                Рисков не выявлено
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#FFF0F3" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.ERROR}>
+                Негативные факторы
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#FFF4DB" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.WARNING}>
+                Обратите внимание
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#EEF3FC" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.SYSTEM}>
+                Нет данных
+            </Text>
+        </Badge>
+    </div>
+);
+```
+

package/bundle/components/BodyPage.md

@@ -0,0 +1,186 @@
+---
+component: BodyPage
+category: Page
+related: [Page, HeaderPage, FooterPage, Body, Island, LightBox]
+tokens: []
+stories: stories/Page/BodyPage/BodyPage.stories.tsx
+version: "1.0"
+---
+
+# BodyPage
+
+## Назначение
+
+Тело страницы `Page`. Доступен как статическое свойство `Page.Body`. Контейнер для основного
+контента страницы между `Page.Header` и `Page.Footer`.
+
+Используй когда: нужно разместить основной контент внутри `Page` — как в карточке (Island), так и без неё.
+Не используй когда: нужен заголовок или футер страницы — для этого есть `Page.Header` / `Page.Footer`.
+
+---
+
+## Варианты и props
+
+Публичный API — discriminated union по `type`: `IBodyPageTypeFirstProps | IBodyPageTypeSecondProps`.
+Оба интерфейса расширяют `IBodyProps` (≈ `React.HTMLAttributes<HTMLDivElement>`).
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `type` | `EBodyPageType` | `FIRST` — контент оборачивается в `Island` (карточка с белым фоном и тенью). `SECOND` — контент без карточки. |
+| `children` | `React.ReactNode` | Контент тела страницы. |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `verticalMargin` | `EBodyPageVerticalMargin` | `LARGE` | Вертикальные отступы: `LARGE` = 24px (16px на узких экранах), `SMALL` = 16px (8px на узких). В LightBox используется `SMALL`. |
+| `size` | `EComponentSize` | — | Размер острова (Island). **Доступен только для `type=FIRST`**; для `type=SECOND` типизирован как `never`. |
+
+### Ограничения по типам
+
+- `size` доступен только при `type=FIRST` (в `SECOND` контент не оборачивается в Island, поэтому `size?: never`).
+
+---
+
+## Дизайн-токены
+
+Собственных CSS-переменных нет. Внешний вид карточки наследуется от `Island` (`EIslandType.TYPE_1`).
+Вертикальные отступы заданы фиксированными значениями в `styles/BodyPage.module.less`
+(24/16px и адаптив 16/8px на `@screen-sm-max`).
+
+---
+
+## Инварианты
+
+- `forwardRef<HTMLDivElement>` — не убирать. Ref всегда указывает на корневой элемент
+  (Island для FIRST, Body для SECOND).
+- `displayName = "BodyPage"` — не менять.
+- Discriminated union по `type` и значения `EBodyPageType` / `EBodyPageVerticalMargin` — часть
+  публичного API, менять нельзя.
+- Экспорты `BodyPage`, `IBodyPageTypeFirstProps`, `IBodyPageTypeSecondProps` идут в barrel
+  `src/components/Page/index.ts` — сохранять.
+- `verticalMargin` по умолчанию `LARGE` — менять дефолт нельзя без обсуждения.
+
+---
+
+## Accessibility
+
+Особого a11y-поведения нет — это структурный контейнер. Семантику и aria-атрибуты задаёт
+потребитель через проброшенные HTML-атрибуты (`...rest` уходит в `Body`).
+
+---
+
+## Связанные компоненты
+
+- `Page` — родитель; `BodyPage` доступен как `Page.Body`.
+- `HeaderPage` (`Page.Header`), `FooterPage` (`Page.Footer`) — соседи внутри `Page`.
+- `Body` — внутренний контейнер контента (рендерится в обоих типах).
+- `Island` — карточка-обёртка для `type=FIRST`.
+- `LightBox` — типичное место использования с `verticalMargin=SMALL`.
+
+---
+
+## Stories
+
+Основные истории: `stories/Page/BodyPage/BodyPage.stories.tsx`
+Файлы примеров: `stories/Page/BodyPage/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `type` и `verticalMargin` |
+| `Default` | `Default.tsx` | Минимальный пример (FIRST, контент в карточке) |
+| `Types` | `Types.tsx` | Сравнение типов FIRST и SECOND |
+| `VerticalMargins` | `VerticalMargins.tsx` | Отступы LARGE (24px) и SMALL (16px) |
+| `VisualTests` | `VisualTests.tsx` | Матрица type × verticalMargin для скриншот-регрессии |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-06-18 | Создан документ. AI-рефакторинг (clsx order, JSDoc), unit-тесты, миграция stories на modern pattern. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Page/BodyPage/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { Page, EBodyPageType, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <Page.Body type={EBodyPageType.FIRST}>
+        <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+            BodyPage типа FIRST оборачивает контент в Island (карточку) с белым фоном и тенью.
+        </Text>
+    </Page.Body>
+);
+```
+
+### Types
+
+`stories/Page/BodyPage/examples/Types.tsx`
+
+```tsx
+import React from "react";
+import { Page, EBodyPageType, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const Types = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>FIRST</div>
+            <Page.Body type={EBodyPageType.FIRST}>
+                <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                    Тип FIRST оборачивает контент в Island (карточку) с белым фоном и тенью.
+                </Text>
+            </Page.Body>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>SECOND</div>
+            <Page.Body type={EBodyPageType.SECOND}>
+                <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                    Тип SECOND отображает контент без карточки.
+                </Text>
+            </Page.Body>
+        </div>
+    </div>
+);
+```
+
+### VerticalMargins
+
+`stories/Page/BodyPage/examples/VerticalMargins.tsx`
+
+```tsx
+import React from "react";
+import { Page, EBodyPageType, EBodyPageVerticalMargin, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const VerticalMargins = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>LARGE (24px)</div>
+            <Page.Body type={EBodyPageType.FIRST} verticalMargin={EBodyPageVerticalMargin.LARGE}>
+                <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                    Отступы сверху и снизу 24px (значение по умолчанию).
+                </Text>
+            </Page.Body>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>SMALL (16px)</div>
+            <Page.Body type={EBodyPageType.FIRST} verticalMargin={EBodyPageVerticalMargin.SMALL}>
+                <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                    Уменьшенные отступы сверху и снизу 16px. Используется в LightBox.
+                </Text>
+            </Page.Body>
+        </div>
+    </div>
+);
+```
+