@sberbusiness/triplex-next-mcp-server 0.24.0-beta1 → 0.24.0-beta2

package/bundle/components/CheckboxTreeExtended.md

@@ -319,3 +319,117 @@ margin). Кандидат на токенизацию.
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/CheckboxTreeExtended/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { CheckboxTreeExtended, EComponentSize } from "@sberbusiness/triplex-next";
+
+type CheckboxNode = { id: string; label: string; checked: boolean; bulk?: boolean; children?: CheckboxNode[] };
+
+const INITIAL: CheckboxNode[] = [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+export const DefaultExample = ({ size = EComponentSize.MD }: { size?: EComponentSize }) => {
+    const [checkboxes, setCheckboxes] = React.useState<CheckboxNode[]>(INITIAL);
+
+    const onChange = (target: CheckboxNode) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        target.checked = event.target.checked;
+        setCheckboxes([...checkboxes]);
+    };
+
+    const renderNode = (node: CheckboxNode) => (
+        <CheckboxTreeExtended.Node
+            id={node.id}
+            key={node.id}
+            checkbox={(props) => (
+                <CheckboxTreeExtended.Checkbox
+                    {...props}
+                    onChange={onChange(node)}
+                    bulk={node.bulk}
+                    checked={node.checked}
+                >
+                    {node.label}
+                </CheckboxTreeExtended.Checkbox>
+            )}
+        >
+            {node.children?.map((child) => renderNode(child))}
+        </CheckboxTreeExtended.Node>
+    );
+
+    return <CheckboxTreeExtended size={size}>{checkboxes.map((node) => renderNode(node))}</CheckboxTreeExtended>;
+};
+```
+
+### Sizes
+
+`stories/CheckboxTreeExtended/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { CheckboxTreeExtended, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
+
+type CheckboxNode = { id: string; label: string; checked: boolean; bulk?: boolean; children?: CheckboxNode[] };
+
+const INITIAL: CheckboxNode[] = [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+const TreeBySize = ({ size = EComponentSize.MD }: { size?: EComponentSize }) => {
+    const [checkboxes, setCheckboxes] = React.useState<CheckboxNode[]>(INITIAL);
+
+    const onChange = (target: CheckboxNode) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        target.checked = event.target.checked;
+        setCheckboxes([...checkboxes]);
+    };
+
+    const renderNode = (node: CheckboxNode) => (
+        <CheckboxTreeExtended.Node
+            id={node.id}
+            key={node.id}
+            checkbox={(props) => (
+                <CheckboxTreeExtended.Checkbox
+                    {...props}
+                    onChange={onChange(node)}
+                    bulk={node.bulk}
+                    checked={node.checked}
+                >
+                    {node.label}
+                </CheckboxTreeExtended.Checkbox>
+            )}
+        >
+            {node.children?.map((child) => renderNode(child))}
+        </CheckboxTreeExtended.Node>
+    );
+
+    return <CheckboxTreeExtended size={size}>{checkboxes.map((node) => renderNode(node))}</CheckboxTreeExtended>;
+};
+
+export const SizesExample = () => (
+    <Row>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <TreeBySize size={EComponentSize.SM} />
+        </Col>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <TreeBySize size={EComponentSize.MD} />
+        </Col>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <TreeBySize size={EComponentSize.LG} />
+        </Col>
+    </Row>
+);
+```
+

package/bundle/components/CheckboxXGroup.md

@@ -66,3 +66,44 @@ version: "1.0"
 |---|---|
 | 2026-04-16 | Приведение `CheckboxXGroup` к AI-ready: добавлен `forwardRef`, типизирован `children`, созданы AI-документ и инварианты. |
 
+---
+
+## Примеры использования
+
+### XGroup
+
+`stories/Checkbox/examples/XGroupExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup, EComponentSize, Gap } from "@sberbusiness/triplex-next";
+
+export const XGroupExample = () => (
+    <>
+        <CheckboxXGroup indent={16}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.SM}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+        <Gap size={16} />
+        <CheckboxXGroup indent={16}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+        <Gap size={16} />
+        <CheckboxXGroup indent={20}>
+            {[1, 2, 3].map((value) => (
+                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.LG}>
+                    Checkbox text
+                </Checkbox>
+            ))}
+        </CheckboxXGroup>
+    </>
+);
+```
+

package/bundle/components/CheckboxYGroup.md

@@ -65,3 +65,48 @@ version: "1.0"
 |---|---|
 | 2026-04-16 | Приведение `CheckboxYGroup` к AI-ready: добавлен `forwardRef`, типизирован `children`, созданы AI-документ и инварианты. |
 
+---
+
+## Примеры использования
+
+### YGroup
+
+`stories/Checkbox/examples/YGroupExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxYGroup, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
+
+export const YGroupExample = () => (
+    <Row>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.SM}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+        <Col size={3}>
+            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                {[1, 2, 3, 4].map((value) => (
+                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.LG}>
+                        Checkbox text
+                    </Checkbox>
+                ))}
+            </CheckboxYGroup>
+        </Col>
+    </Row>
+);
+```
+

package/bundle/components/EmptyView.md

@@ -97,3 +97,122 @@ version: "1.0"
 | Дата | Изменение |
 |---|---|
 | 2026-04-09 | Создан компонент и документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/EmptyView/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { EmptyView, EEmptyViewSize } from "@sberbusiness/triplex-next";
+import ServicesetupSysIcon96 from "@sberbusiness/icons-next/WaitgradientStsIcon96";
+
+export const DefaultExample = () => (
+    <div style={{ maxWidth: "380px" }}>
+        <EmptyView
+            size={EEmptyViewSize.SM}
+            icon={<ServicesetupSysIcon96 />}
+            title="Title text"
+            description="This message provides additional context or highlights important information to note."
+            caption="Caption"
+        />
+    </div>
+);
+```
+
+### Sizes
+
+`stories/EmptyView/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { EmptyView, EEmptyViewSize } from "@sberbusiness/triplex-next";
+import { ServicesetupSysIcon96, ServicesetupSysIcon128 } from "@sberbusiness/icons-next";
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", gap: "48px", flexWrap: "wrap" }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <div style={{ maxWidth: "380px" }}>
+                <EmptyView
+                    size={EEmptyViewSize.SM}
+                    icon={<ServicesetupSysIcon96 />}
+                    title="Title text"
+                    description="This message provides additional context or highlights important information to note."
+                    caption="Caption"
+                />
+            </div>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <div style={{ maxWidth: "380px" }}>
+                <EmptyView
+                    size={EEmptyViewSize.MD}
+                    icon={<ServicesetupSysIcon128 />}
+                    title="Title text"
+                    description="This message provides additional context or highlights important information to note."
+                    caption="Caption"
+                />
+            </div>
+        </div>
+    </div>
+);
+```
+
+### WithoutTitle
+
+`stories/EmptyView/examples/WithoutTitleExample.tsx`
+
+```tsx
+import React from "react";
+import { EmptyView, EEmptyViewSize } from "@sberbusiness/triplex-next";
+import { ServicesetupSysIcon96 } from "@sberbusiness/icons-next";
+
+export const WithoutTitleExample = () => (
+    <div style={{ maxWidth: "380px" }}>
+        <EmptyView
+            size={EEmptyViewSize.SM}
+            icon={<ServicesetupSysIcon96 />}
+            description="This message provides additional context or highlights important information to note."
+            caption="Caption"
+        />
+    </div>
+);
+```
+
+### WithButtons
+
+`stories/EmptyView/examples/WithButtonsExample.tsx`
+
+```tsx
+import React from "react";
+import { EmptyView, EEmptyViewSize, Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+import { ServicesetupSysIcon96 } from "@sberbusiness/icons-next";
+
+export const WithButtonsExample = () => (
+    <div style={{ maxWidth: "380px" }}>
+        <EmptyView
+            size={EEmptyViewSize.SM}
+            icon={<ServicesetupSysIcon96 />}
+            title="Title text"
+            description="This message provides additional context or highlights important information to note."
+            caption="Caption"
+            buttons={
+                <>
+                    <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM}>
+                        Button text
+                    </Button>
+                    <Button theme={EButtonTheme.GENERAL} size={EComponentSize.SM}>
+                        Button text
+                    </Button>
+                </>
+            }
+        />
+    </div>
+);
+```
+

package/bundle/components/HelpBox.md

@@ -152,3 +152,201 @@ HelpBox — обёртка над несколькими внутренними
 | Дата | Изменение |
 |---|---|
 | 2026-04-08 | Создан документ. Добавлен `forwardRef`. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/HelpBox/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { HelpBox, ETooltipSize } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <div style={{ padding: 50 }}>
+        <HelpBox tooltipSize={ETooltipSize.SM} aria-label="Подсказка" tooltipXButtonProps={{ "aria-label": "Закрыть" }}>
+            Подсказка по элементу интерфейса
+        </HelpBox>
+    </div>
+);
+```
+
+### Sizes
+
+`stories/HelpBox/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { HelpBox, ETooltipSize, ETooltipPreferPlace } from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <div style={{ padding: 50, display: "flex", gap: 100 }}>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.ABOVE}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                SM
+            </HelpBox>
+        </div>
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <HelpBox
+                tooltipSize={ETooltipSize.LG}
+                preferPlace={ETooltipPreferPlace.BELOW}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                LG
+            </HelpBox>
+        </div>
+    </div>
+);
+```
+
+### Placement
+
+`stories/HelpBox/examples/PlacementExample.tsx`
+
+```tsx
+import React from "react";
+import { HelpBox, ETooltipSize, ETooltipPreferPlace } from "@sberbusiness/triplex-next";
+
+export const PlacementExample = () => (
+    <div style={{ padding: 50, display: "grid", gridTemplateColumns: "repeat(2, minmax(120px, 1fr))", gap: 32 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ width: 150 }}>above</span>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.ABOVE}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                Подсказка сверху
+            </HelpBox>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ width: 150 }}>below</span>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.BELOW}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                Подсказка снизу
+            </HelpBox>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ width: 150 }}>left</span>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.LEFT}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                Подсказка слева
+            </HelpBox>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <span style={{ width: 150 }}>right</span>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.RIGHT}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                Подсказка справа
+            </HelpBox>
+        </div>
+    </div>
+);
+```
+
+### WithMobileHeader
+
+`stories/HelpBox/examples/WithMobileHeaderExample.tsx`
+
+```tsx
+import React from "react";
+import { HelpBox, ETooltipSize } from "@sberbusiness/triplex-next";
+
+export const WithMobileHeaderExample = () => (
+    <div style={{ padding: 50 }}>
+        <HelpBox
+            tooltipSize={ETooltipSize.SM}
+            mobileHeaderContent="Заголовок"
+            aria-label="Подсказка"
+            tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+        >
+            Текст подсказки
+        </HelpBox>
+    </div>
+);
+```
+
+### Controlled
+
+`stories/HelpBox/examples/ControlledExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { HelpBox, ETooltipSize, ETooltipPreferPlace } from "@sberbusiness/triplex-next";
+
+export const ControlledExample = () => {
+    const [open, setOpen] = useState(false);
+
+    const handleToggle = (nextOpen: boolean) => setOpen(nextOpen);
+    const handleManualOpen = () => setOpen(true);
+    const handleManualClose = () => setOpen(false);
+
+    return (
+        <div style={{ padding: 40, display: "flex", alignItems: "center", gap: 16 }}>
+            <button type="button" onClick={handleManualOpen}>
+                Открыть
+            </button>
+            <button type="button" onClick={handleManualClose}>
+                Закрыть
+            </button>
+            <HelpBox
+                tooltipSize={ETooltipSize.SM}
+                preferPlace={ETooltipPreferPlace.RIGHT}
+                isOpen={open}
+                toggle={handleToggle}
+                aria-label="Подсказка"
+                tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+            >
+                Управляемое состояние тултипа
+            </HelpBox>
+        </div>
+    );
+};
+```
+
+### ChangeIconProps
+
+`stories/HelpBox/examples/ChangeIconPropsExample.tsx`
+
+```tsx
+import React from "react";
+import { HelpBox, ETooltipSize } from "@sberbusiness/triplex-next";
+
+export const ChangeIconPropsExample = () => (
+    <div style={{ padding: 50 }}>
+        <HelpBox
+            tooltipSize={ETooltipSize.SM}
+            iconProps={{ paletteIndex: 0 }}
+            aria-label="Подсказка"
+            tooltipXButtonProps={{ "aria-label": "Закрыть" }}
+        >
+            Подсказка по элементу интерфейса
+        </HelpBox>
+    </div>
+);
+```
+