@sberbusiness/triplex-next-mcp-server 0.36.0-beta0 → 1.41.0-beta

package/bundle/components/CodeText.md

@@ -0,0 +1,197 @@
+---
+component: CodeText
+category: Typography
+related: [Text, Title, Caption]
+tokens:
+  - --triplex-next-Typography-Primary_Color
+  - --triplex-next-Typography-PrimaryInvert_Color
+  - --triplex-next-Typography-Complementary_Color
+  - --triplex-next-Typography-ComplementaryInvert_Color
+  - --triplex-next-Typography-Secondary_Color
+  - --triplex-next-Typography-SecondaryInvert_Color
+  - --triplex-next-Typography-Tertiary_Color
+  - --triplex-next-Typography-TertiaryInvert_Color
+  - --triplex-next-Typography-Disabled_Color
+  - --triplex-next-Typography-DisabledInvert_Color
+  - --triplex-next-Typography-Brand_Color
+  - --triplex-next-Typography-BrandInvert_Color
+  - --triplex-next-Typography-Info_Color
+  - --triplex-next-Typography-InfoInvert_Color
+  - --triplex-next-Typography-Success_Color
+  - --triplex-next-Typography-SuccessInvert_Color
+  - --triplex-next-Typography-Warning_Color
+  - --triplex-next-Typography-WarningInvert_Color
+  - --triplex-next-Typography-Error_Color
+  - --triplex-next-Typography-ErrorInvert_Color
+  - --triplex-next-Typography-System_Color
+  - --triplex-next-Typography-SystemInvert_Color
+stories: stories/Typography/CodeText.stories.tsx
+version: "1.0"
+---
+
+# CodeText
+
+## Назначение
+
+Моноширинный текст (типографика). Рендерит инлайновый `<span>` (тег настраивается через `tag`) со шрифтом SBSansTextMono и фиксированной типографикой 14/20px (font-weight 400). Размер и начертание не настраиваются — в отличие от остальных компонентов семейства.
+
+Используй когда: нужно выровнять символы по ширине — фрагменты кода, номера счетов/договоров, ИНН/БИК, суммы в таблицах, технические идентификаторы.
+
+Не используй когда:
+- Нужен обычный пропорциональный текст — используй `Text`.
+- Нужен другой размер моноширинного текста — в семействе его нет; не задавай `font-size` через `style`/`className`, обсуди расширение API с командой.
+
+---
+
+## Варианты и props
+
+Собственных обязательных props нет. Компонент принимает только общие props типографики (`ITypographyProps`).
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `type` | `EFontType` | `PRIMARY` | Цвет текста из общей палитры типографики (11 базовых + 11 `*_INVERT`). |
+| `underline` | `boolean` | — | Подчёркивание. Совместим со `strikethrough` (оба сразу — `underline line-through`). |
+| `strikethrough` | `boolean` | — | Зачёркивание. |
+| `tag` | `string` | `"span"` | HTML-тег корневого элемента (например, `code` для семантики фрагмента кода). |
+
+Компонент типизирован как `TCodeTextProps<T extends keyof JSX.IntrinsicElements>` и принимает все атрибуты соответствующего HTML-элемента через spread.
+
+### Ограничения
+
+- Props `size`, `weight`, `line` отсутствуют намеренно: типографика фиксирована (SBSansTextMono, 14/20px, 400).
+- Внешний тип `forwardRef<HTMLElement, TCodeTextProps<keyof JSX.IntrinsicElements>>` «растворяет» дженерик: TypeScript не сужает атрибуты под конкретный `tag`. Известное ограничение публичного API, не исправлять без обсуждения (breaking).
+- `EFontType.BRAND` дополнительно задаёт `user-select: none` (особенность стилей `Typography.module.less`).
+
+---
+
+## Дизайн-токены
+
+Цвета — общие CSS-переменные семейства Typography (см. frontmatter): `--triplex-next-Typography-{Type}_Color` и `--triplex-next-Typography-{Type}Invert_Color`.
+
+Шрифт и размер — фиксированные значения в `styles/CodeText.module.less` (токенов для них нет).
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — обязателен, `ref` пробрасывается на корневой элемент.
+- **`TCodeTextProps`**, **`ITypographyProps`**, значения **`EFontType`** — публичный API из barrel. Изменение — breaking change.
+- **`displayName = "CodeText"`** — не убирать.
+- Фиксированная типографика (SBSansTextMono, 14/20px) — контракт компонента; добавление `size`/`weight` — расширение публичного API, требует обсуждения.
+- Классы собираются только через `clsx`.
+
+---
+
+## Accessibility
+
+- Компонент не интерактивный: focus management и keyboard navigation не применимы.
+- По умолчанию рендерится нейтральный `<span>`; для семантики фрагмента кода передай `tag="code"`.
+- Цвет (`type`) не передаёт семантику для screen reader'ов.
+
+---
+
+## Связанные компоненты
+
+- `Text` — основной пропорциональный текст интерфейса (B1–B4).
+- `Title` — заголовки `h1`–`h3`.
+- `Caption` — мелкие подписи и крупный показатель D1.
+
+---
+
+## Stories
+
+Основные истории: `stories/Typography/CodeText.stories.tsx`
+Файлы примеров: `stories/Typography/examples/CodeText/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль props `type`, `tag`, `underline`, `strikethrough` |
+| `Default` | `Default.tsx` | Минимальное использование |
+| `Types` | `Types.tsx` | Все значения `EFontType`: базовые + инвертированные на тёмной подложке |
+| `Decorations` | `Decorations.tsx` | `underline`, `strikethrough` и их комбинация |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-07-20 | Создан документ. AI-рефакторинг: decoration-логика вынесена во внутренний хелпер `getTextDecorationClassName` (`utils.ts`), unit-тесты дополнены (дефолтный `type`, класс `brand`). Stories переведены на modern pattern (`examples/CodeText/`). |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Typography/examples/CodeText/Default.tsx`
+
+```tsx
+import React from "react";
+import { CodeText } from "@sberbusiness/triplex-next";
+
+export const Default = () => <CodeText>const greeting = &quot;Hello, World!&quot;;</CodeText>;
+```
+
+### Types
+
+`stories/Typography/examples/CodeText/Types.tsx`
+
+```tsx
+import React from "react";
+import { CodeText, EFontType } from "@sberbusiness/triplex-next";
+
+export const Types = () => (
+    <div style={{ display: "flex", gap: "16px" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <CodeText type={EFontType.PRIMARY}>Primary</CodeText>
+            <CodeText type={EFontType.COMPLEMENTARY}>Complementary</CodeText>
+            <CodeText type={EFontType.SECONDARY}>Secondary</CodeText>
+            <CodeText type={EFontType.TERTIARY}>Tertiary</CodeText>
+            <CodeText type={EFontType.BRAND}>Brand</CodeText>
+            <CodeText type={EFontType.INFO}>Info</CodeText>
+            <CodeText type={EFontType.SUCCESS}>Success</CodeText>
+            <CodeText type={EFontType.WARNING}>Warning</CodeText>
+            <CodeText type={EFontType.ERROR}>Error</CodeText>
+            <CodeText type={EFontType.DISABLED}>Disabled</CodeText>
+            <CodeText type={EFontType.SYSTEM}>System</CodeText>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px", backgroundColor: "#1F1F22" }}>
+            <CodeText type={EFontType.PRIMARY_INVERT}>Primary Invert</CodeText>
+            <CodeText type={EFontType.COMPLEMENTARY_INVERT}>Complementary Invert</CodeText>
+            <CodeText type={EFontType.SECONDARY_INVERT}>Secondary Invert</CodeText>
+            <CodeText type={EFontType.TERTIARY_INVERT}>Tertiary Invert</CodeText>
+            <CodeText type={EFontType.BRAND_INVERT}>Brand Invert</CodeText>
+            <CodeText type={EFontType.INFO_INVERT}>Info Invert</CodeText>
+            <CodeText type={EFontType.SUCCESS_INVERT}>Success Invert</CodeText>
+            <CodeText type={EFontType.WARNING_INVERT}>Warning Invert</CodeText>
+            <CodeText type={EFontType.ERROR_INVERT}>Error Invert</CodeText>
+            <CodeText type={EFontType.DISABLED_INVERT}>Disabled Invert</CodeText>
+            <CodeText type={EFontType.SYSTEM_INVERT}>System Invert</CodeText>
+        </div>
+    </div>
+);
+```
+
+### Decorations
+
+`stories/Typography/examples/CodeText/Decorations.tsx`
+
+```tsx
+import React from "react";
+import { CodeText } from "@sberbusiness/triplex-next";
+
+export const Decorations = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <CodeText>const x = 42;</CodeText>
+        <CodeText underline>const x = 42; // с подчеркиванием</CodeText>
+        <CodeText strikethrough>const x = 42; // с зачеркиванием</CodeText>
+        <CodeText underline strikethrough>
+            const x = 42; // с подчеркиванием и зачеркиванием
+        </CodeText>
+    </div>
+);
+```
+