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

package/README.md

@@ -80,6 +80,9 @@ npm run inspect
 # Обновить bundle/ из последнего релиза triplex-next
 npm run fetch-bundle
 
+# Обновить только AI-ready компоненты из bundle, остальные данные сохранить
+npm run fetch-bundle -- --merge --file path/to/mcp-data.json
+
 # Обновить bundle/icons.json из @sberbusiness/icons-next
 npm run fetch-icons
 
@@ -111,6 +114,13 @@ bundle/
 содержимое в поддиректории выше. Транзиентный `mcp-data.json` удаляется
 после раскладки.
 
+По умолчанию дерево перезаписывается целиком. Флаг `--merge` включает
+инкрементальное обновление: компоненты, у которых в bundle есть данные
+(`raw !== null`), перезаписываются, остальные сохраняют текущую документацию
+и записи в `manifest.json`. Гайды и release notes из bundle перезаписываются,
+отсутствующие в bundle — сохраняются. Режим полезен, пока AI-документация
+в triplex-next выверяется покомпонентно.
+
 В triplex-next bundle собирается скриптом `scripts/generateMcpData.ts`
 (npm-команда `generateMcpData`) и автоматически прикладывается к релиз-ассетам
 через `.github/workflows/release.yml`.

package/bundle/components/Alert.md

@@ -315,3 +315,275 @@ export const AlertProcess = Object.assign(
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Alerts/examples/AlertContext/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertContext, EAlertType } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertContext type={EAlertType.INFO}>
+            This message provides context or highlights important information to note.
+        </AlertContext>
+    </div>
+);
+```
+
+### Types
+
+`stories/Alerts/examples/AlertContext/TypesExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertContext, EAlertType } from "@sberbusiness/triplex-next";
+
+const TYPES = Object.values(EAlertType).filter((type) => type !== EAlertType.FEATURE);
+
+export const TypesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "750px" }}>
+        {TYPES.map((type) => (
+            <div key={type}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{type.toUpperCase()}</div>
+                <AlertContext type={type}>
+                    This message provides context or highlights important information to note.
+                </AlertContext>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### WithCustomIcon
+
+`stories/Alerts/examples/AlertContext/WithCustomIconExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertContext, EAlertType } from "@sberbusiness/triplex-next";
+import { WaitStrokeStsIcon16 } from "@sberbusiness/icons-next";
+
+export const WithCustomIconExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertContext type={EAlertType.INFO} renderIcon={<WaitStrokeStsIcon16 paletteIndex={4} />}>
+            This message provides context or highlights important information to note.
+        </AlertContext>
+    </div>
+);
+```
+
+### Default
+
+`stories/Alerts/examples/AlertProcess/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertProcess type={EAlertType.INFO}>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                This message provides context or highlights important information to note.
+            </Text>
+        </AlertProcess>
+    </div>
+);
+```
+
+### Types
+
+`stories/Alerts/examples/AlertProcess/TypesExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+const TYPES = Object.values(EAlertType);
+
+export const TypesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "750px" }}>
+        {TYPES.map((type) => (
+            <div key={type}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{type.toUpperCase()}</div>
+                <AlertProcess type={type}>
+                    <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                        This message provides context or highlights important information to note.
+                    </Text>
+                </AlertProcess>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### BorderRadius
+
+`stories/Alerts/examples/AlertProcess/BorderRadiusExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    AlertProcess,
+    EAlertProcessBorderRadius,
+    EAlertType,
+    EFontType,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+const BORDER_RADIUSES = Object.values(EAlertProcessBorderRadius);
+
+export const BorderRadiusExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "750px" }}>
+        {BORDER_RADIUSES.map((borderRadius) => (
+            <div key={borderRadius}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>
+                    {borderRadius.toUpperCase()}
+                </div>
+                <AlertProcess type={EAlertType.INFO} borderRadius={borderRadius}>
+                    <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                        This message provides context or highlights important information to note.
+                    </Text>
+                </AlertProcess>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### WithCustomIcon
+
+`stories/Alerts/examples/AlertProcess/WithCustomIconExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const WithCustomIconExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertProcess type={EAlertType.INFO} renderIcon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                This message provides context or highlights important information to note.
+            </Text>
+        </AlertProcess>
+    </div>
+);
+```
+
+### Closable
+
+`stories/Alerts/examples/AlertProcess/ClosableExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const ClosableExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertProcess type={EAlertType.INFO} closable onClose={() => undefined}>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                This message provides context or highlights important information to note.
+            </Text>
+        </AlertProcess>
+    </div>
+);
+```
+
+### WithButtonLink
+
+`stories/Alerts/examples/AlertProcess/WithButtonLinkExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    AlertProcess,
+    Button,
+    EAlertType,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    ETextSize,
+    Gap,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+export const WithButtonLinkExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertProcess type={EAlertType.INFO}>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                This message provides context or highlights important information to note.
+            </Text>
+            <Gap size={8} />
+            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM}>
+                Button link text
+            </Button>
+        </AlertProcess>
+    </div>
+);
+```
+
+### WithLink
+
+`stories/Alerts/examples/AlertProcess/WithLinkExample.tsx`
+
+```tsx
+import React from "react";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Gap, Link, Text } from "@sberbusiness/triplex-next";
+
+export const WithLinkExample = () => (
+    <div style={{ maxWidth: "750px" }}>
+        <AlertProcess type={EAlertType.INFO}>
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                This message provides context or highlights important information to note.
+            </Text>
+            <Gap size={8} />
+            <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                <Link href="#" onClick={(event) => event.preventDefault()}>
+                    Link text
+                </Link>
+            </Text>
+        </AlertProcess>
+    </div>
+);
+```
+
+### WithSpoiler
+
+`stories/Alerts/examples/AlertProcess/WithSpoilerExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AlertProcess, EAlertType, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const WithSpoilerExample = () => {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <div style={{ maxWidth: "750px" }}>
+            <AlertProcess type={EAlertType.INFO}>
+                <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                    По вопросам финмониторинга обращайтесь в рабочие дни с 03:00 до 21:00 МСК с мобильного телефона по
+                    номеру 0321, доб. 6. Звонки по России бесплатные.
+                </Text>
+                <AlertProcess.Spoiler open={expanded} onOpen={setExpanded}>
+                    <Text size={ETextSize.B3} type={EFontType.PRIMARY}>
+                        У вас нет прав на подписание и отправку заявления в страховую компанию. Подписывать заявления, а
+                        также заверять документы, имеет право генеральный директор на основании устава, владалец ИП на
+                        основании доверенности.
+                    </Text>
+                </AlertProcess.Spoiler>
+            </AlertProcess>
+        </div>
+    );
+};
+```
+

package/bundle/components/Amount.md

@@ -223,3 +223,141 @@ renderCurrencyName = () => [
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Amount/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Amount, EFontType, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <Text size={ETextSize.B2} type={EFontType.PRIMARY}>
+        <Amount value="8967452.31" currency="RUB" currencyTitle="Российские рубли" fractionLength={2} />
+    </Text>
+);
+```
+
+### Example
+
+`stories/Amount/examples/ShowcaseExample.tsx`
+
+```tsx
+import React from "react";
+import { Amount, Col, EFontType, EFontWeightText, ETextSize, Row, Text } from "@sberbusiness/triplex-next";
+
+const COMMON_PROPS = {
+    currency: "RUB",
+    currencyTitle: "Российские рубли",
+};
+
+const DATA = [
+    {
+        title: "Обычный",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="8967452.3145" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Без копеек",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="8967452.31" fractionLength={0} {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "С 4 знаками после разделителя",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="8967452.31" fractionLength={4} {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Положительный",
+        element: (
+            <Text size={ETextSize.B3}>
+                <Amount value="+8967452.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Положительный (цвет)",
+        element: (
+            <Text size={ETextSize.B3} type={EFontType.BRAND}>
+                <Amount value="+8967452.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Отрицательный",
+        element: (
+            <Text size={ETextSize.B3}>
+                <Amount value="-8967452.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Отрицательный (цвет)",
+        element: (
+            <Text size={ETextSize.B3} type={EFontType.ERROR}>
+                <Amount value="-8967452.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Без валюты",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="8967452.31" />
+            </Text>
+        ),
+    },
+    {
+        title: "Большая сумма (50 миллиардов)",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="50000000000.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+    {
+        title: "Адаптивная большая сумма (50 миллиардов)",
+        element: (
+            <Text size={ETextSize.B2}>
+                <Amount value="50000000000.31" {...COMMON_PROPS} adaptive />
+            </Text>
+        ),
+    },
+    {
+        title: "Акцент",
+        element: (
+            <Text size={ETextSize.B3} weight={EFontWeightText.SEMIBOLD}>
+                <Amount value="8967452.31" {...COMMON_PROPS} />
+            </Text>
+        ),
+    },
+];
+
+export const ShowcaseExample = () => (
+    <>
+        {DATA.map(({ title, element }) => (
+            <Row key={title}>
+                <Col size={4}>
+                    <Text size={ETextSize.B2}>{title}</Text>
+                </Col>
+                <Col size={4}>{element}</Col>
+            </Row>
+        ))}
+    </>
+);
+```
+

package/bundle/components/AmountField.md

@@ -287,3 +287,177 @@ forwarded ref. `setRef` передаёт instance в оба. Не заменят
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Basic
+
+`stories/TextFields/examples/AmountField/BasicExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AmountField, EComponentSize, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+export const BasicExample: React.FC = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div style={{ maxWidth: "300px" }}>
+            <AmountField
+                inputProps={{
+                    value,
+                    placeholder: "0,00",
+                    onChange: setValue,
+                }}
+                status={EFormFieldStatus.DEFAULT}
+                size={EComponentSize.LG}
+                label="Label"
+                currency="RUB"
+                maxIntegerDigits={18}
+                fractionDigits={2}
+            />
+        </div>
+    );
+};
+```
+
+### Sizes
+
+`stories/TextFields/examples/AmountField/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AmountField, EComponentSize } from "@sberbusiness/triplex-next";
+
+const AmountFieldItem: React.FC<{ size: EComponentSize }> = ({ size }) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <AmountField
+            inputProps={{
+                value,
+                placeholder: "0,00",
+                onChange: setValue,
+            }}
+            size={size}
+            label="Label"
+        />
+    );
+};
+
+export const SizesExample: React.FC = () => {
+    const sizes = Object.values(EComponentSize);
+
+    return (
+        <div style={{ maxWidth: "300px", display: "flex", flexDirection: "column", gap: "16px" }}>
+            {sizes.map((size) => (
+                <AmountFieldItem key={size} size={size} />
+            ))}
+        </div>
+    );
+};
+```
+
+### Statuses
+
+`stories/TextFields/examples/AmountField/StatusesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AmountField, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+const AmountFieldItem: React.FC<{ status: EFormFieldStatus }> = ({ status }) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <AmountField
+            inputProps={{
+                value,
+                placeholder: "0,00",
+                onChange: setValue,
+            }}
+            status={status}
+            label="Label"
+        />
+    );
+};
+
+export const StatusesExample: React.FC = () => {
+    const statuses = Object.values(EFormFieldStatus);
+
+    return (
+        <div style={{ maxWidth: "300px", display: "flex", flexDirection: "column", gap: "16px" }}>
+            {statuses.map((status) => (
+                <AmountFieldItem key={status} status={status} />
+            ))}
+        </div>
+    );
+};
+```
+
+### WithClearButton
+
+`stories/TextFields/examples/AmountField/WithClearButtonExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AmountField } from "@sberbusiness/triplex-next";
+
+export const WithClearButtonExample: React.FC = () => {
+    const [value, setValue] = useState("8967452.31");
+
+    return (
+        <div style={{ maxWidth: "300px" }}>
+            <AmountField
+                inputProps={{
+                    value,
+                    placeholder: "0,00",
+                    onChange: setValue,
+                }}
+                label="Label"
+                onClear={() => setValue("")}
+            />
+        </div>
+    );
+};
+```
+
+### Example
+
+`stories/TextFields/examples/AmountField/ExampleExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { AmountField, HelpBox, ETooltipSize, Text, ETextSize, EFontType, Link } from "@sberbusiness/triplex-next";
+
+export const ExampleExample: React.FC = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div style={{ maxWidth: "300px" }}>
+            <AmountField
+                inputProps={{
+                    value,
+                    placeholder: "0,00",
+                    onChange: setValue,
+                }}
+                label="Label"
+                currency="RUB"
+                postfix={<HelpBox tooltipSize={ETooltipSize.SM}>Helpful details appear here</HelpBox>}
+                description={
+                    <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+                        (21) Description{" "}
+                        <Link href="#" onClick={(event) => event.preventDefault()}>
+                            Link text
+                        </Link>
+                    </Text>
+                }
+                onClear={() => setValue("")}
+            />
+        </div>
+    );
+};
+```
+

package/bundle/components/Avatar.md

@@ -207,3 +207,75 @@ Ref идёт на root div. Используется для анимаций, п
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Avatar/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Avatar, EAvatarSize } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => <Avatar size={EAvatarSize.XXL} />;
+```
+
+### Sizes
+
+`stories/Avatar/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Avatar, EAvatarSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EAvatarSize);
+
+export const SizesExample = () => (
+    <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>
+                <Avatar size={size} />
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Example
+
+`stories/Avatar/examples/ExampleUsage.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon32 } from "@sberbusiness/icons-next";
+import {
+    Avatar,
+    EAvatarSize,
+    EFontType,
+    EFontWeightTitle,
+    ETitleSize,
+    Title as TypographyTitle,
+} from "@sberbusiness/triplex-next";
+
+export const ExampleUsage = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <Avatar
+            size={EAvatarSize.XXL}
+            style={{ backgroundImage: "url(assets/images/avatar.png)", backgroundSize: "contain" }}
+        />
+        <Avatar size={EAvatarSize.XXL} style={{ backgroundColor: "#339FF1" }}>
+            <TypographyTitle size={ETitleSize.H1} weight={EFontWeightTitle.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                AA
+            </TypographyTitle>
+        </Avatar>
+        <Avatar size={EAvatarSize.XXL} style={{ backgroundColor: "#339FF1" }}>
+            <DefaulticonStrokePrdIcon32 paletteIndex={7} />
+        </Avatar>
+    </div>
+);
+```
+