@sberbusiness/triplex-next-mcp-server 1.41.0-beta → 1.42.0-beta

package/bundle/components/Body.md

@@ -1,11 +1,9 @@
 ---
 component: Body
 category: Layout
-figma-node: ""
-figma-file: ""
-related: [Page, Header, Footer]
+related: [BodyPage]
 tokens: []
-stories: ""
+stories: stories/Body/Body.stories.tsx
 version: "1.0"
 ---
 
@@ -13,155 +11,149 @@ version: "1.0"
 
 ## Назначение
 
-Минимальный layout-контейнер для содержимого страницы. Создаёт двухуровневую
-структуру `<div>` (root + inner) с `display: flex` и `flex-grow: 1` на inner,
-что позволяет контенту растягиваться на всю доступную высоту.
+Контейнер основного контента. Корневой элемент — flex-контейнер, внутренняя обёртка
+(`flex-grow: 1; width: 100%`) растягивает контент на всю доступную ширину. Собственных
+отступов, фона и рамок не задаёт.
 
-В текущей архитектуре `Body` — примитив, используемый внутри `BodyPage`
-(экспортируется как `Page.Body` в stories). Как самостоятельный публичный
-компонент применяется редко — чаще через `Page.Body` с дополнительными
-props (`type`, `verticalMargin`).
-
-Используй когда: собираешь кастомный layout страницы и хочешь переиспользовать
-flex-обёртку без привязки к Page.
-Не используй когда: строишь страницу по стандартному паттерну — бери `Page.Body`,
-там уже есть Island, verticalMargin и поддержка типов.
-
----
-
-## Файловая структура
-
-```text
-src/components/Body/
-├── Body.tsx                      # React.forwardRef, thin wrapper
-├── index.ts                      # Barrel
-├── styles/Body.module.less       # .body (flex) + .bodyInner (flex-grow: 1)
-└── __tests__/Body.test.tsx
-```
-
-Особенности:
-- Нет LESS-токенов — компонент чисто структурный.
-- **Нет собственных stories** — документируется косвенно через `Page.Body`
-  (stories/Page/BodyPage.stories.tsx).
-- **Импорт через публичный путь, а не через `../Body`**: в `BodyPage.tsx` путь
-  `@sberbusiness/triplex-next/components/Body/Body` — это сохранено намеренно,
-  paths-alias для работы в монорепозитории потребителей.
+Используй когда: нужен нейтральный блок-контейнер контента, растягивающийся по ширине
+родителя, — в первую очередь как внутренняя часть тела страницы.
+Не используй когда: нужно тело страницы `Page` с карточкой (`Island`) и вертикальными
+отступами — для этого есть `BodyPage` (`Page.Body`), который сам оборачивает `Body`.
 
 ---
 
 ## Варианты и props
 
-### `IBodyProps extends React.HTMLAttributes<HTMLDivElement>`
-
-Интерфейс пустой — используется наследование от HTMLAttributes как есть.
-
-| Prop | Тип | Описание |
-|---|---|---|
-| `children` | `React.ReactNode` | Контент, рендерится внутри inner-div. |
-| `className` | `string` | Объединяется с `.body` через `clsx`. |
-| `...HTMLDivAttributes` | — | Всё стандартное для `<div>`. |
+Своих props у компонента нет. `IBodyProps` расширяет `React.HTMLAttributes<HTMLDivElement>`:
+все стандартные атрибуты `div` (включая `className`, `style`, `id`, `aria-*`, обработчики
+событий) уходят через `...rest` на корневой элемент.
 
----
+### Опциональные props
 
-## Ключевые особенности реализации
+| Prop       | Тип               | По умолчанию | Описание                                                                           |
+| ---------- | ----------------- | ------------ | ---------------------------------------------------------------------------------- |
+| `children` | `React.ReactNode` | —            | Контент тела. Рендерится во внутренней обёртке, а не напрямую в корневом элементе. |
 
-### Двухуровневая обёртка
+Поскольку настраиваемых props нет, у компонента нет story `Playground`.
 
-```tsx
-<div className={clsx(styles.body, className)} {...rest} data-tx={...} ref={ref}>
-    <div className={styles.bodyInner}>{children}</div>
-</div>
-```
+---
 
-Root — `display: flex; position: relative`. Inner — `flex-grow: 1; width: 100%;
-position: relative`. Двойной уровень нужен, чтобы:
-- Root мог получать `className` и event handler'ы от потребителя без поломки
-  flex-layout.
-- Inner гарантированно занимал всю ширину/высоту, что критично для корректного
-  позиционирования абсолютных потомков (position: relative на обоих уровнях).
+## Дизайн-токены
 
-### ref идёт на root
+Собственных CSS-переменных нет. В `styles/Body.module.less` заданы только layout-свойства
+(`position`, `display: flex`, `flex-grow`, `width`) — ни цветов, ни отступов.
 
-`forwardRef` прокидывает ref на **внешний div**, не на inner. Это сохраняет
-стабильный контракт (ref → тот же DOM-элемент, что получает className и spread
-props).
+---
 
-### `data-tx` только на root
+## Инварианты
 
-Версия пакета ставится только на внешний div — второй раз на inner не нужен.
+- `forwardRef<HTMLDivElement>` — не убирать. Ref указывает на **корневой** элемент
+  (тот же, что получает `className`, `...rest` и `data-tx`), а не на внутреннюю обёртку.
+- Двухуровневая разметка (корневой `div` > внутренний `div`) — часть наблюдаемого контракта:
+  `children` всегда попадают во внутреннюю обёртку. Уровень вложенности виден потребителям
+  в DOM, поэтому его изменение может сломать их CSS-селекторы и DOM-запросы и требует записи
+  в release notes.
+- `className` мерджится только в корневой элемент; внутренняя обёртка кастомных классов не получает.
+- Компонент не задаёт собственных отступов — вертикальные отступы тела страницы добавляет
+  `BodyPage`. Добавление padding сюда изменит вёрстку всех потребителей.
+- `displayName = "Body"` — не менять.
+- Экспорты `Body` и `IBodyProps` идут в barrel `src/components/Body/index.ts` и далее в корневой
+  `src/components/index.ts` — сохранять.
 
-### Пустой интерфейс `IBodyProps`
+---
 
-```tsx
-export interface IBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
-```
+## Accessibility
 
-ESLint может предлагать заменить на type-alias `type IBodyProps = React.HTMLAttributes<HTMLDivElement>`,
-но `interface` сохранён для возможности расширения в будущем (например, если
-потребуется добавить `verticalMargin` на уровень Body, а не BodyPage). Не
-переписывать на type.
+Собственного a11y-поведения нет — это структурный контейнер без роли и без интерактивности.
+Семантику (`role`, `aria-*`, заголовки) задаёт потребитель через проброшенные HTML-атрибуты.
 
 ---
 
-## Инварианты
+## Связанные компоненты
 
-- **`forwardRef`** — обязателен. Ref идёт на root div.
-- **`data-tx={process.env.npm_package_version}`** — не удалять (версия для
-  отладки).
-- **Двухуровневая структура (`.body` → `.bodyInner`)** — не схлопывать в один
-  div. От этого зависит lafyut-контракт потребителей, особенно `BodyPage`
-  (он оборачивает Body в Island для типа FIRST).
-- **`position: relative` на обоих уровнях** — не убирать. Потребители могут
-  полагаться на то, что абсолютно спозиционированные элементы привязаны к
-  этим контейнерам.
-- **`flex-grow: 1` на inner** — не убирать. Обеспечивает поведение "body
-  занимает всё доступное место по высоте".
-- **`IBodyProps` как interface (не type)** — сохранить для будущего расширения.
-- **Нет своих дизайн-токенов** — не добавлять без согласования (компонент
-  намеренно стилистически нейтрален, цвет/шрифт/отступы задаёт потребитель
-  или родитель).
+- `BodyPage` — тело страницы (`Page.Body`); рендерит `Body` внутри себя, добавляя карточку
+  `Island` (для `type=FIRST`) и вертикальные отступы. Его props расширяют `IBodyProps`.
+  Типичная точка путаницы: в продуктовом коде страницы почти всегда нужен `Page.Body`, а не голый `Body`.
+- `Page` — страница целиком; `Body` попадает в неё опосредованно, через `Page.Body`.
 
 ---
 
-## Accessibility
+## Stories
+
+Основные истории: `stories/Body/Body.stories.tsx`
+Файлы примеров: `stories/Body/examples/`
 
-- **Нет собственной ARIA-роли** — `<div>` семантически нейтрален. Если нужна
-  semantic main-область — потребитель передаёт `role="main"` через `...rest`
-  или использует `<main>` как обёртку снаружи.
-- **Не перехватывает фокус, не манипулирует tabindex** — полностью прозрачен
-  для навигации.
+| Story         | Example file      | Что демонстрирует                                                         |
+| ------------- | ----------------- | ------------------------------------------------------------------------- |
+| `Default`     | `Default.tsx`     | Минимальный пример с текстовым контентом                                  |
+| `Example`     | `Example.tsx`     | Production-like композиция: `Body` как контейнер контента внутри `Island` |
+| `VisualTests` | `VisualTests.tsx` | Несколько детей, длинный неразрывный контент, `Body` рядом с сиблингом    |
 
 ---
 
-## Дизайн-токены
+## История изменений
 
-Нет — компонент структурный, без визуального оформления.
+| Дата       | Изменение                                                                                                                                               |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 2026-08-13 | Создан документ. AI-рефакторинг (уточнён JSDoc компонента, `children` задокументирован явно), расширены unit-тесты, добавлены stories в modern pattern. |
 
 ---
 
-## Связанные компоненты
+## Примеры использования
 
-- `Page` (`src/components/Page`) — страничный layout. Содержит Header / Body /
-  Footer как compound-пропсы.
-- `BodyPage` / `Page.Body` (`src/components/Page/components/BodyPage.tsx`) —
-  расширенный Body с поддержкой `type` (FIRST/SECOND), `verticalMargin`,
-  опциональной обёрткой в Island. В большинстве сценариев потребитель использует
-  Page.Body, а не Body напрямую.
-- `Header` / `Page.Header`, `Footer` / `Page.Footer` — соседние компоненты страницы.
-- `Island` (`src/components/Island`) — используется внутри `Page.Body` типа FIRST,
-  даёт body карточное оформление.
+### Default
 
----
+`stories/Body/examples/Default.tsx`
 
-## Stories
+```tsx
+import React from "react";
+import { Body, Text, ETextSize, EFontType } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <Body>
+        <Text tag="div" size={ETextSize.B2} type={EFontType.PRIMARY}>
+            Body — контейнер основного контента. Собственных отступов не задаёт.
+        </Text>
+    </Body>
+);
+```
 
-Отдельных stories нет. Поведение Body показано через `Page.Body` в
-`stories/Page/BodyPage.stories.tsx` с вариациями `type` и `verticalMargin`.
+### Example
 
----
+`stories/Body/examples/Example.tsx`
 
-## История изменений
+```tsx
+import React from "react";
+import { Body, Island, Text, ETextSize, EFontType, Caption, ECaptionSize } from "@sberbusiness/triplex-next";
+
+export const Example = () => (
+    <div style={{ maxWidth: "480px" }}>
+        <Island>
+            <Body>
+                <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+                    <Text tag="div" size={ETextSize.B1} type={EFontType.PRIMARY}>
+                        Реквизиты счёта
+                    </Text>
+                    <div style={{ display: "flex", justifyContent: "space-between", gap: "16px" }}>
+                        <Caption size={ECaptionSize.C1} type={EFontType.SECONDARY}>
+                            Номер счёта
+                        </Caption>
+                        <Text tag="span" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                            40702810400000012345
+                        </Text>
+                    </div>
+                    <div style={{ display: "flex", justifyContent: "space-between", gap: "16px" }}>
+                        <Caption size={ECaptionSize.C1} type={EFontType.SECONDARY}>
+                            БИК
+                        </Caption>
+                        <Text tag="span" size={ETextSize.B2} type={EFontType.PRIMARY}>
+                            044525225
+                        </Text>
+                    </div>
+                </div>
+            </Body>
+        </Island>
+    </div>
+);
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |