{ "version": "4.6.0", "generatedAt": "2026-11-01T13:44:04.937Z", "components": [ { "name": "Accordion", "description": "Stacks sections behind their own headers and opens each on demand — reach for `Tabs` when a few primary sections get switched between often, and leave content on the page when people read most of it anyway. `primary` and `secondary` are inline rows for grouping; `section` is the bordered panel, and the only variant with room for `AccordionActions`.", "importPath": "@wallarm-org/design-system/Accordion", "props": [ { "name": "variant", "type": "AccordionVariant | undefined", "required": false, "description": "Visual variant of the accordion", "defaultValue": "primary" }, { "name": "multiple", "type": "boolean | undefined", "required": false, "description": "Whether multiple items can be expanded at the same time", "defaultValue": "false" }, { "name": "collapsible", "type": "boolean | undefined", "required": false, "description": "Whether an expanded item can be collapsed (when `multiple` is false)", "defaultValue": "true" }, { "name": "value", "type": "string[] | undefined", "required": false, "description": "Controlled expanded item values" }, { "name": "defaultValue", "type": "string[] | undefined", "required": false, "description": "Initial expanded item values for uncontrolled usage" }, { "name": "onValueChange", "type": "complex", "required": false, "description": "Callback fired when expanded items change" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Disable all interaction" }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "variant", "options": [ "primary", "secondary", "section" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "AccordionActions", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AccordionContent", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] }, { "name": "AccordionItem", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "value", "type": "string", "required": true, "description": "The value of the accordion item." }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the accordion item is disabled." }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] }, { "name": "AccordionTrigger", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." } ] } ], "examples": [ { "name": "Primary", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Primary = () => (\n
\n \n \n Title\n \n {sampleText}\n \n \n \n Title\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "The default variant — a 40px row with the chevron ahead of the title and a hover\nfill across the full width. Opening one section closes the other: `multiple` is\noff unless you ask for it." }, { "name": "Secondary", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Secondary = () => (\n
\n \n \n Title\n \n {sampleText}\n \n \n \n Title\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "A 24px row in small medium-weight muted type with no hover fill, for dense or\nnested groups where the header should sit behind the content it labels." }, { "name": "Section", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { NumericBadge } from '@wallarm-org/design-system/NumericBadge';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Section = () => (\n
\n \n \n \n Title 2\n \n \n {sampleText}\n \n \n \n \n Title 2\n \n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "`section` draws each item as a bordered panel row — title left, chevron right —\nand the title takes inline content, here a `NumericBadge` carrying a count." }, { "name": "SectionWithActions", "code": "import { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { NumericBadge } from '@wallarm-org/design-system/NumericBadge';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const SectionWithActions = () => (\n
\n \n \n \n Title 2\n \n \n \n \n \n \n {sampleText}\n \n \n \n \n Title 2\n \n \n \n \n \n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "`AccordionActions` renders beside the trigger rather than inside it, so buttons in\nthe header act on the section without toggling it open." }, { "name": "LongTitlePrimary", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const LongTitlePrimary = () => (\n
\n \n \n {longTitleText}\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "Titles truncate to one line rather than wrapping — the row is a fixed height, so\nreword a long header instead of relying on the ellipsis." }, { "name": "LongTitleSecondary", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const LongTitleSecondary = () => (\n
\n \n \n {longTitleText}\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "The same 320px column at `secondary` size, where smaller type and no row padding\nleave a little more of the title visible before the ellipsis." }, { "name": "Multiple", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Multiple = () => (\n
\n \n \n Section A\n \n {sampleText}\n \n \n \n Section B\n \n {sampleText}\n \n \n \n Section C\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "`multiple` keeps several sections open at once, for when people reference sections\non their own terms — not when the sections have to be read side by side, which is\na layout rather than an accordion." }, { "name": "Disabled", "code": "import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Disabled = () => (\n
\n \n \n Available\n \n {sampleText}\n \n \n \n Disabled item\n \n {sampleText}\n \n \n \n
\n);", "storyFile": "Accordion/Accordion.stories.tsx", "storyTitle": "Data Display/Accordion", "description": "`disabled` on a single `AccordionItem` fades the row and blocks its toggle while the\nrest stay live; the same prop on `Accordion` locks every row at once." } ] }, { "name": "Alert", "description": "An inline message bound to one part of the screen, which stays until the state changes or the reader dismisses it — reach for `Banner` when the message would still matter on another page, `Toast` for a transient confirmation, and the field’s own error for a single invalid input. `color` carries the meaning and `AlertIcon` takes its icon from it, so the pair is not yours to mix; `primary` is the neutral default for a notice with no status to encode.", "importPath": "@wallarm-org/design-system/Alert", "props": [ { "name": "color", "type": "AlertColor | undefined", "required": false, "description": "Color variant of the alert", "defaultValue": "primary" }, { "name": "minWidth", "type": "number | undefined", "required": false, "description": "Minimum width in pixels (default: 256)", "defaultValue": "ALERT_MIN_WIDTH" }, { "name": "maxWidth", "type": "number | undefined", "required": false, "description": "Maximum width in pixels (default: 980)", "defaultValue": "ALERT_MAX_WIDTH" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "color", "options": [ "primary", "destructive", "info", "warning", "success" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "AlertClose", "props": [ { "name": "onClick", "type": "(() => void) | undefined", "required": false, "description": "Callback when the close button is clicked" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "AlertContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AlertControls", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AlertDescription", "props": [ { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation." }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AlertIcon", "props": [ { "name": "icon", "type": "ReactNode", "required": false, "description": "Override the default icon for the variant" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AlertTitle", "props": [ { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before truncation (default: 4). Set to 0 to disable truncation." }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "AllColors", "code": "import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\n\nexport const AllColors = () => (\n
\n \n \n \n Primary Alert\n This is a neutral alert for general information.\n \n \n\n \n \n \n Destructive Alert\n This alert indicates an error or dangerous action.\n \n \n\n \n \n \n Info Alert\n This alert provides informational content to the user.\n \n \n\n \n \n \n Warning Alert\n This alert warns the user about potential issues.\n \n \n\n \n \n \n Success Alert\n This alert confirms a successful action or operation.\n \n \n
\n);", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "The five colours with the icon each implies: neutral `primary` for a general notice, then destructive, info, warning and success for real status." }, { "name": "TitleOnly", "code": "import { Alert, AlertContent, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\n\nexport const TitleOnly = () => {\n return (\n
\n \n \n \n Alert with title only\n \n \n\n \n \n \n Information message without description\n \n \n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "A title on its own is a complete alert. Add a description only when it says something the title does not." }, { "name": "WithCloseButton", "code": "import { useState } from 'react';\nimport { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\n\nexport const WithCloseButton = () => {\n const [showInfo, setShowInfo] = useState(true);\n const [showWarning, setShowWarning] = useState(true);\n\n return (\n
\n {showInfo && (\n \n \n \n Dismissable Alert\n This alert can be closed by clicking the X button.\n \n setShowInfo(false)} />\n \n )}\n\n {showWarning && (\n \n \n \n Warning with close\n \n setShowWarning(false)} />\n \n )}\n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "`AlertClose` gives the reader a way out — add it where dismissing is reasonable, and leave it off while the condition still holds." }, { "name": "WithControls", "code": "import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\nimport { Button } from '@wallarm-org/design-system/Button';\n\nexport const WithControls = () => {\n return (\n
\n \n \n \n Alert with Two Action Buttons\n \n This alert has two action buttons on the right side without a close button.\n \n \n \n \n \n \n \n\n \n \n \n Alert with Actions and Close\n This alert has action buttons and a close button.\n \n \n \n \n \n \n\n \n \n \n Critical Error\n An error occurred that requires your attention.\n \n \n \n \n \n \n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "`AlertControls` as a direct child of `Alert` puts the actions top-right, which is what a wide alert wants. The buttons are always `secondary` and `small`, neutral or destructive to match the alert, never a solid primary." }, { "name": "WithBottomActions", "code": "import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\nimport { Button } from '@wallarm-org/design-system/Button';\n\nexport const WithBottomActions = () => {\n return (\n
\n \n \n \n Alert with Bottom Actions\n \n This alert has action buttons at the bottom of the content area.\n \n \n \n \n \n \n \n \n\n \n \n \n Destructive Alert with Actions\n \n This error requires immediate action. Please review and take necessary steps.\n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "The same controls nested inside `AlertContent` drop below the text instead, which is what a narrow alert wants. Placement follows the width rather than a rule." }, { "name": "MinMaxWidth", "code": "import { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\n\nexport const MinMaxWidth = () => {\n const edge = 'border border-dashed border-border-primary';\n return (\n
\n
\n
\n \n \n \n Short\n \n \n
\n
\n
\n
\n \n \n \n \n This is a very long alert title that demonstrates the maximum width behavior of the\n component\n \n \n This is an extended description that shows how the alert handles longer content, and\n wraps within whatever width the container gives it.\n \n \n \n \n
\n
\n
\n
\n \n \n \n \n Past 980px the alert stops widening and leaves the rest of the container empty\n \n \n A line of text long enough to reach the ceiling, so the gap on the right is the\n ceiling rather than the content running out.\n \n \n \n \n
\n
\n
\n
\n \n \n \n \n This is a very long alert title that demonstrates the custom maximum width behavior\n \n \n This alert has a custom maxWidth of 500px set via prop.\n \n \n \n \n
\n
\n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "Each row puts the alert in a container that crosses one of its bounds, since\nneither is visible in a container that sits between them. The alert has no width\nof its own: it takes the container's, clamped between 256 and 980px." }, { "name": "MaxLines", "code": "import { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\n\nexport const MaxLines = () => {\n const longTitle =\n 'This is a very long title that should be truncated after a certain number of lines. It keeps going and going to demonstrate the line clamp functionality. We need even more text to ensure it exceeds the maximum number of lines allowed.';\n const longDescription =\n 'This is a very long description that demonstrates the text truncation feature. The description can be quite lengthy and should be limited to a maximum of 4 lines by default. When the text exceeds this limit, it will be truncated with an ellipsis. This behavior ensures that the alert remains compact and does not take up too much vertical space on the page. Additional text is added here to make sure the truncation is visible.';\n return (\n
\n
\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n
\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n
\n \n \n \n {longTitle}\n {longDescription}\n \n \n
\n
\n );\n};", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "`lineClamp` is opt-in: without it long text wraps freely, and with it the text truncates and the full string moves into a tooltip. Four lines is the usual cap." }, { "name": "WithCode", "code": "import { Alert, AlertClose, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@wallarm-org/design-system/Alert';\nimport { Code } from '@wallarm-org/design-system/Code';\n\nexport const WithCode = () => (\n
\n \n \n \n Message goes here\n Description goes here\n
\n \n Optional code output\n \n
\n \n \n\n \n \n \n Syntax Error in Configuration\n An error occurred while parsing the configuration file.\n\n
\n \n Error: Unexpected token at line 42, column 15\n \n
\n \n \n \n
\n);", "storyFile": "Alert/Alert.stories.tsx", "storyTitle": "Messaging/Alert", "description": "An inline `Code` line inside the content, for the error code or the command that failed — the one piece of rich content an alert is built to carry." } ] }, { "name": "AnimatedBackground", "description": "The decorative backdrop behind the surfaces that have no chrome of their own — sign-in, the splash screen, the assistant. `pixel`, the default, sweeps a canvas dot grid; `blur` drifts a mesh gradient. Children sit centred above it. It is `aria-hidden` and lets the pointer through, with one exception: the pixel variant’s `game`, which takes pointer events for as long as it is running.", "importPath": "@wallarm-org/design-system/AnimatedBackground", "props": [ { "name": "variant", "type": "\"pixel\" | undefined", "required": false, "defaultValue": "pixel" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "BlurBackground", "props": [ { "name": "palette", "type": "BlurBackgroundPalette | undefined", "required": false, "description": "Blob colours and layout. `'chat'` is the Wally chat panel mesh (Figma chat-bg 67:1254),\ntuned for a ~480px-wide panel and meant to be dimmed by the host (5–12% opacity).", "defaultValue": "default" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "PixelBackground", "props": [ { "name": "game", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "excludeCardSize", "type": "{ width: number; height: number; } | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Pixel", "code": "import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';\n\nexport const Pixel = () => (\n \n);", "storyFile": "AnimatedBackground/AnimatedBackground.stories.tsx", "storyTitle": "Layout/AnimatedBackground", "description": "The default sweep across the dot grid, full-bleed with nothing on top of it." }, { "name": "PixelWithCard", "code": "import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';\nimport { Card, CardContent, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';\n\nexport const PixelWithCard = () => (\n \n \n \n Sign In\n \n \n

\n Decorative background renders behind interactive content.\n

\n \n \n \n);", "storyFile": "AnimatedBackground/AnimatedBackground.stories.tsx", "storyTitle": "Layout/AnimatedBackground", "description": "A card above the grid, with `excludeCardSize` keeping the dots clear behind it. This story also switches on `game` — the easter egg, and the one case where the backdrop accepts clicks." }, { "name": "Blur", "code": "import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';\n\nexport const Blur = () => (\n \n);", "storyFile": "AnimatedBackground/AnimatedBackground.stories.tsx", "storyTitle": "Layout/AnimatedBackground", "description": "`variant='blur'`: colour blobs drifting behind a frosted layer, which is the assistant’s backdrop rather than the console’s." }, { "name": "BlurWithCard", "code": "import { AnimatedBackground } from '@wallarm-org/design-system/AnimatedBackground';\nimport { Card, CardContent, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';\n\nexport const BlurWithCard = () => (\n \n \n \n Wally Chat\n \n \n

\n Liquid gradient background renders behind chat content.\n

\n \n \n \n);", "storyFile": "AnimatedBackground/AnimatedBackground.stories.tsx", "storyTitle": "Layout/AnimatedBackground", "description": "The same gradient with content over it. There is no exclusion to set here, since the blur has no grid for a card to interrupt." } ] }, { "name": "AppShell", "description": "The platform’s outermost frame — global top bar, product rail, and the content surface products mount into, with an optional `AppShellAside` panel docked to its right. There is exactly one, at the app root, and it persists while the content swaps. Do not wrap a page in it: a single product screen renders `RemoteShell` and its own content, blind to the shell. In-product navigation is `NavPanel`, and laying out a page’s insides is `Stack` and `Flex`. The gray surround — header bar plus rail, everything that is not the canvas — is the **Frame**. It carries **Ambient**, a faint still layer of soft blooms, grain and a dot cluster pooled bottom-left, painted under everything. Ambient is on by default; `ambient={false}` leaves the flat Frame fill. The Frame comes in two styles, **Neutral** and **Branded**: a user preference next to light/dark, set with `useTheme().setFrameStyle` (from `ThemeProvider`) and written on `` so every micro-frontend follows it. Branded warms the Frame and turns active navigation to the brand colour; try it from the account item → Appearance.", "importPath": "@wallarm-org/design-system/AppShell", "props": [ { "name": "reveal", "type": "boolean | undefined", "required": false }, { "name": "expandFrom", "type": "AppShellExpandFrom | undefined", "required": false }, { "name": "onRevealed", "type": "(() => void) | undefined", "required": false }, { "name": "appeared", "type": "boolean | undefined", "required": false }, { "name": "ambient", "type": "boolean | undefined", "required": false, "description": "The Frame's ambient layer — soft blooms, grain and a dot cluster behind the header and\nrail. On by default; `false` leaves the flat Frame token fill.", "defaultValue": "true" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "AppShellAside", "props": [ { "name": "open", "type": "boolean", "required": true, "description": "Shows the panel, sliding it in from the right as the canvas narrows. Closing makes it\n`hidden` and `inert` at once while the column slides shut, after which it takes no space.\nThe panel stays painted through that slide only where `display` can transition\n(`transition-behavior: allow-discrete`: Chromium, WebKit); in Firefox it hides at once while\nthe column still closes smoothly. Under reduced motion both directions are instant. Its\nchildren stay mounted throughout, so whatever state they hold survives a close and reopen." }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AppShellHeader", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AppShellRail", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AppShellRemote", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Basic", "code": "import { StoryRouter } from './story-content';\n\nexport const Basic = ({ ambient }) => (\n \n \n \n);", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls. Pick a product in the rail to drill into it, and the account item at the bottom for appearance and sidebar mode." }, { "name": "Loading", "code": "import { StoryRouter } from './story-content';\n\nexport const Loading = ({ ambient, loading }) => (\n \n \n \n);", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading." }, { "name": "WithAside", "code": "import { StoryRouter } from './story-content';\n\nexport const WithAside = ({ ambient }) => (\n \n \n \n);", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "`AppShellAside` docks a panel right of the content surface — the real `WallyAssistant` here, driven by the `useMockWally` streaming mock and toggled from the header's `ChatTrigger` — that slides in as the canvas narrows, while closing widens the canvas back and hides the region without unmounting what is inside, so the conversation and text typed into the panel survive a close and reopen." }, { "name": "RevealFlow", "code": "import { StoryRouter } from './story-content';\n\nexport const RevealFlow = () => (\n \n \n \n);", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "`reveal` animates the chrome in on the first application load only. Leave it unset for an ordinary screen; this exists for prototyping the boot moment itself." }, { "name": "LoginFlow", "code": "import { StoryRouter } from './story-content';\n\nexport const LoginFlow = () => (\n \n \n \n);", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "The whole entrance: the splash hands off, the content surface expands from the sign-in card into the full shell. `onRevealed` fires when it has settled." }, { "name": "WithTanStackRouter", "code": "import { useState } from 'react';\nimport { RouterProvider } from '@tanstack/react-router';\n\nexport const WithTanStackRouter = () => {\n const [router] = useState(createShellRouter);\n\n return ;\n};", "storyFile": "AppShell/AppShell.stories.tsx", "storyTitle": "Navigation/AppShell", "description": "`AppShell` and a `RemoteShell` per product on one TanStack Router: the root route is\nthe shell (rail → `navigate`, `AppShellRemote` → ``), `/$product` is the\nremote (`RemoteShell` with `pathname` + `onNavigate`, content → ``), and\n`/$product/$` is the page. Every way of moving — the rail, the nav panel, the\nbreadcrumbs, links in the page — goes through the router, and the active items follow." } ] }, { "name": "ApprovalCard", "description": "Asks the user to approve an action Wally wants to take — a tool call, a config change — before it runs. While `status` is `pending` the card shows its children (`ApprovalCardContent` and `ApprovalCardActions`); once the app sets `approved` or `rejected`, the children are replaced by a one-line status, so the buttons need no gating of their own. The card has no outer margins or horizontal padding: the panel gutter (`ChatBody` / `ChatFooter`) places it, whether it sits inline in the conversation or docked above the input. Buttons are plain DS components composed by the app, which also owns loading — disable them while the request is in flight.", "importPath": "@wallarm-org/design-system/ApprovalCard", "props": [ { "name": "status", "type": "ApprovalCardStatus | undefined", "required": false, "description": "Pending shows `children` (content + actions); resolved states replace them with a status row.", "defaultValue": "pending" }, { "name": "caption", "type": "ReactNode", "required": false, "description": "Shown above the card in every state. Pass `null` to hide it.", "defaultValue": "Requires your approval" }, { "name": "approvedLabel", "type": "ReactNode", "required": false, "defaultValue": "Approved" }, { "name": "rejectedLabel", "type": "ReactNode", "required": false, "defaultValue": "Rejected" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "status", "options": [ "pending", "approved", "rejected" ], "defaultValue": "pending" } ], "subComponents": [ { "name": "ApprovalCardActions", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "ApprovalCardContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [ { "name": "Pending", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const Pending = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "The default ask: what Wally wants to do, then the split approve button and Reject." }, { "name": "PendingLongText", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const PendingLongText = () => (\n \n \n Disable the rule \"Block SQL injection attempts\" for the application \"Payments API\" and\n redeploy the policy to every node in the eu-west-1 cluster. Affected endpoint:\n https://payments.example.com/api/v2/transactions/refunds/batch-processing/callbacks\n \n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "Long text wraps, and unbroken strings such as URLs break rather than overflow the card." }, { "name": "PendingWithCodeSnippet", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const PendingWithCodeSnippet = () => (\n \n \n

Run this command on the node:

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "Arguments the user should read verbatim go in a `CodeSnippet`, 8px under the text." }, { "name": "AllowOnceMenu", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const AllowOnceMenu = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "The chevron half of the split button opens the narrower \"Allow once\" option." }, { "name": "Loading", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const Loading = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "There is no loading variant: while the decision is being sent, the app disables its own buttons." }, { "name": "Approved", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const Approved = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "After approval the content and buttons collapse into a status row; the caption stays. The\nchildren are kept on purpose: the app renders the same tree and only flips `status`." }, { "name": "Rejected", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const Rejected = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "The rejected status row. `rejectedLabel` (like `approvedLabel` and `caption`) is a prop, so\nthe app can say what was rejected." }, { "name": "Analytics", "code": "import { ApprovalCard, ApprovalCardActions, ApprovalCardContent } from '@wallarm-org/design-system/ApprovalCard';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { ChevronDown } from '@wallarm-org/design-system/icons';\nimport { SplitButton } from '@wallarm-org/design-system/SplitButton';\n\nexport const Analytics = () => (\n \n Add 203.0.113.42 to the denylist on all applications\n \n \n \n \n \n \n \n \n \n Allow once\n \n \n \n \n \n);", "storyFile": "ApprovalCard/ApprovalCard.stories.tsx", "storyTitle": "AI/ApprovalCard", "description": "Analytics attributes go on the composed DS buttons themselves — the card adds no seam of\nits own, so each `data-analytics-id` lands on the real `\n \n \n \n \n

Blocked attacks, last 24 hours

\n

\n Wallarm blocked 1,204 SQL injection attempts, almost all against{' '}\n .\n

\n
    \n
  • \n Most came from .\n
    • \n
  • The peak was at 03:00 UTC.
    • \n
  • No request reached the application.
    • \n
\n

Want me to add a rule that denies the whole subnet?

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Regenerate\n Report a problem\n \n \n 1m ago\n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "The full composition: reasoning, an `ApprovalCard` stretched to the message width, the\nanswer and its actions. The card sits 12px from the parts around it, like the reasoning." }, { "name": "WithActionsOnHover", "code": "import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, ThumbsDown, ThumbsUp } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\n\nexport const WithActionsOnHover = () => (\n \n \n

Blocked attacks, last 24 hours

\n

\n Wallarm blocked 1,204 SQL injection attempts, almost all against{' '}\n .\n

\n
    \n
  • \n Most came from .\n
    • \n
  • The peak was at 03:00 UTC.
    • \n
  • No request reached the application.
    • \n
\n

Want me to add a rule that denies the whole subnet?

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Regenerate\n Report a problem\n \n \n 1m ago\n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "Older answers keep their actions row transparent until the message is hovered or holds\nfocus; the 30px row stays reserved so nothing jumps." }, { "name": "Streaming", "code": "import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Database, Search } from '@wallarm-org/design-system/icons';\n\nexport const Streaming = () => (\n \n \n } label='Searched for blocked requests' />\n } label='Querying attack events...' status='running' />\n \n \n

Wallarm blocked 1,204 SQL injection attempts, almost all against

\n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "While the answer streams, set `aria-busy` on the message and show the running step with a\nshimmering label; the actions come once it finishes." }, { "name": "Loading", "code": "import { AssistantMessage, AssistantMessageLoader } from '@wallarm-org/design-system/AssistantMessage';\n\nexport const Loading = () => (\n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "Before the first output, the message holds only an `AssistantMessageLoader`: the Figma\n\"Working...\" row with a shimmering label, announced as `role='status'`. Pass children to\nchange the text." }, { "name": "ErrorState", "code": "import { AssistantMessage, AssistantMessageContent, AssistantMessageError } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { RefreshCcw } from '@wallarm-org/design-system/icons';\n\nexport const ErrorState = () => (\n \n \n

Wallarm blocked 1,204 SQL injection attempts, almost all against

\n \n \n \n Retry\n \n }\n >\n The connection was lost before the answer finished.\n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "A failed answer: `AssistantMessageError` comes after whatever content streamed, announced\nas `role='alert'`. Put your own Retry `Button` in `action`, so its click and analytics are\nyours. The action renders inside the error's test-id cascade, but `Button` doesn't read it:\neither give it the full id yourself (here `error--error--retry`, i.e. the error's id `error--error`\nplus `--retry`), or read `useTestId('retry')` (exported from the package) inside your own\nRetry component to derive it. Not in Figma yet; pending design review." }, { "name": "Analytics", "code": "import { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { MessageAction, MessageActions } from '@wallarm-org/design-system/MessageActions';\nimport { WALLY_ANSWER } from './mocks';\n\nexport const Analytics = () => (\n \n \n

{ANSWER_TEXT}

\n \n \n \n \n \n \n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "The message and its content are not interactive, but `data-analytics-*` still lands on\ntheir real nodes; put click analytics on each `MessageAction` instead." }, { "name": "Markdown", "code": "import { AssistantMessage, AssistantMessageContent, AssistantMessageMarkdown } from '@wallarm-org/design-system/AssistantMessage';\nimport { CodeSnippetAdapterProvider, loadPrismAdapter } from '@wallarm-org/design-system/CodeSnippet';\nimport { WALLY_ANSWER } from './mocks';\n\nexport const Markdown = () => (\n \n \n \n \n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "`AssistantMessageMarkdown` inside `AssistantMessageContent`: every GFM element in the DS look —\nheading, bold/italic/strike, inline code (click to copy), an aligned table, nested lists, a task\nlist, a fenced block with a copy button, a quote, a rule and links. Highlighting follows the\napp's `CodeSnippetAdapterProvider` (WallyAssistant mounts the lazy Prism one itself)." }, { "name": "MarkdownStreaming", "code": "import { useEffect, useState } from 'react';\nimport { AssistantMessage, AssistantMessageContent, AssistantMessageMarkdown } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { CodeSnippetAdapterProvider, loadPrismAdapter } from '@wallarm-org/design-system/CodeSnippet';\nimport { RefreshCcw } from '@wallarm-org/design-system/icons';\nimport { WALLY_ANSWER } from './mocks';\n\nexport const MarkdownStreaming = () => {\n const [length, setLength] = useState(0);\n const streaming = length < WALLY_ANSWER.length;\n\n useEffect(() => {\n if (length >= WALLY_ANSWER.length) return;\n const id = setTimeout(() => setLength(Math.min(length + 6, WALLY_ANSWER.length)), 40);\n return () => clearTimeout(id);\n }, [length]);\n\n const handleClick = () => {\n setLength(0);\n };\n\n return (\n
\n \n \n \n \n \n \n \n \n \n Replay\n \n
\n );\n};", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "Pass the whole text so far (a snapshot, never a delta) with `streaming`: only the unfinished\ntail is repaired, a dangling `**`, a half-typed table header and an empty fence wait a frame,\nand an open fence stays plain without a copy button until it closes. Finished blocks never\nre-render. Here a timer grows the string; press Replay to stream it again." }, { "name": "MarkdownInChainOfThought", "code": "import { AssistantMessage, AssistantMessageMarkdown } from '@wallarm-org/design-system/AssistantMessage';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Brain } from '@wallarm-org/design-system/icons';\nimport { COT_TEXT } from './mocks';\n\nexport const MarkdownInChainOfThought = () => (\n \n \n } defaultOpen>\n \n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "`variant='chain-of-thought'` for reasoning inside a `ChainOfThoughtStep` (Figma 494:4292): the\nstep body sets the 12/16 muted text, inline code is muted and not copyable, links are 12px." }, { "name": "MarkdownUnsafeContent", "code": "import { AssistantMessage, AssistantMessageContent, AssistantMessageMarkdown } from '@wallarm-org/design-system/AssistantMessage';\nimport { HOSTILE } from './mocks';\n\nexport const MarkdownUnsafeContent = () => (\n \n \n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "Assistant text is untrusted (prompt injection). Raw HTML shows as typed (only `
` breaks a\nline), `javascript:`/`data:`/`vbscript:`/`file:` links render as plain text, and images show\nonly their alt text, so no tracking pixel loads." }, { "name": "MarkdownCustomElements", "code": "import { AssistantMessage, AssistantMessageContent, AssistantMessageMarkdown } from '@wallarm-org/design-system/AssistantMessage';\n\nexport const MarkdownCustomElements = () => (\n \n \n \n \n \n);", "storyFile": "AssistantMessage/AssistantMessage.stories.tsx", "storyTitle": "AI/AssistantMessage", "description": "`components` overrides any element at module scope; wrap the exported parts\n(`AssistantMessageMarkdownLink`, `…InlineCode`, `…CodeBlock`, `…Table`) to add analytics\nattributes to the real nodes. Here every link gets a `data-analytics-id`, and images render\nonly from the app's own origin — the app owns that decision." } ] }, { "name": "Attribute", "description": "Pairs one field's label with its value on a detail page — reach for `Table` when the same fields repeat across many objects, and `Field` when the value is being collected rather than read. The value slot takes whichever display component fits the data and hosts `InlineEdit` when the field is editable in place, while `AttributeActions` hangs a per-value menu off it.", "importPath": "@wallarm-org/design-system/Attribute", "props": [ { "name": "loading", "type": "boolean | undefined", "required": false, "description": "Show skeleton placeholders instead of children", "defaultValue": "false" }, { "name": "isEmpty", "type": "boolean | undefined", "required": false, "description": "When true, `AttributeValue` renders the em-dash placeholder instead of its\nchildren, and any `AttributeEmptyDescription` inside the tree renders\n(it returns `null` otherwise). Ignored while `loading` is true (skeleton\nwins).", "defaultValue": "false" }, { "name": "orientation", "type": "AttributeOrientation | undefined", "required": false, "description": "Layout direction of the label and value.\n- `vertical` (default): label above value\n- `horizontal`: label on the left, value on the right", "defaultValue": "vertical" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "AttributeActions", "props": [ { "name": "open", "type": "boolean | undefined", "required": false }, { "name": "defaultOpen", "type": "boolean | undefined", "required": false }, { "name": "onOpenChange", "type": "((open: boolean) => void) | undefined", "required": false }, { "name": "modal", "type": "boolean | undefined", "required": false }, { "name": "anchorPoint", "type": "{ x: number; y: number; } | undefined", "required": false, "description": "Virtual anchor point for positioning without a trigger element" }, { "name": "positioning", "type": "PositioningOptions | undefined", "required": false, "description": "Override default positioning config" }, { "name": "highlightedValue", "type": "string | null | undefined", "required": false, "description": "Programmatically control which item is highlighted" }, { "name": "onHighlightChange", "type": "((details: HighlightChangeDetails) => void) | undefined", "required": false, "description": "Callback when the highlighted item changes (e.g. on mouse hover)" }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false, "description": "Whether selecting an item closes the menu (default true)" }, { "name": "onRequestDismiss", "type": "((event: LayerDismissEvent) => void) | undefined", "required": false, "description": "Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is\nremoved. Call `event.preventDefault()` to keep the menu open." }, { "name": "ids", "type": "ElementIds | undefined", "required": false, "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and the\nother component can't find its own anchor." }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "AttributeActionsContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeActionsItem", "props": [ { "name": "inset", "type": "boolean | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "onSelect", "type": "(() => void) | undefined", "required": false }, { "name": "value", "type": "string | undefined", "required": false, "description": "Explicit value for programmatic highlighting via highlightedValue" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "variant", "type": "{ default: string; brand: string; destructive: string; }", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "AttributeActionsTarget", "props": [ { "name": "disableNestedInteractive", "type": "boolean | undefined", "required": false, "description": "When true, descendants are rendered `inert` — they cannot be clicked,\nfocused, or read by assistive tech as actionable. Any interaction with the\ntarget (mouse or keyboard) opens the AttributeActions dropdown.\n\nDefault `false` — descendants keep their own behavior; clicking them does\nnot open the dropdown. The dropdown opens only when the surrounding target\narea is clicked.", "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeEmptyDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeLabel", "props": [ { "name": "width", "type": "number | undefined", "required": false, "description": "Width of the label cell in horizontal orientation, in pixels.\nDefaults to MIN_LABEL_WIDTH. Clamped to [MIN_LABEL_WIDTH, MAX_LABEL_WIDTH].\nIgnored in vertical orientation.", "defaultValue": "MIN_LABEL_WIDTH" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeLabelDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeLabelInfo", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AttributeValue", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Default", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Default = () => (\n
\n \n Request ID\n \n abc-123-def-456\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The smallest pair — `AttributeLabel` over `AttributeValue` — with the label in\nsentence case and the value left to whichever component formats that data." }, { "name": "WithDescription", "code": "import { Attribute, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const WithDescription = () => (\n
\n \n \n Created at\n \n The time when the request was first received\n \n \n \n April 9, 2026, 14:32\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`AttributeLabelDescription` adds a line that stays under the label, for a field\nwhose name does not explain itself." }, { "name": "WithInfo", "code": "import { Attribute, AttributeLabel, AttributeLabelInfo, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const WithInfo = () => (\n
\n \n \n Request ID\n Unique identifier assigned to each incoming request\n \n \n abc-123-def-456\n \n \n\n \n \n Unique identifier assigned to each incoming request\n Request ID\n \n \n abc-123-def-456\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`AttributeLabelInfo` puts the same explanation behind a hover tooltip instead,\nand reads correctly on either side of the label text." }, { "name": "WithLink", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Link } from '@wallarm-org/design-system/Link';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const WithLink = () => (\n
\n \n \n Source\n \n View docs\n \n \n \n API Gateway\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The label row takes inline content of its own, here a `Link` out to whatever\nexplains the field — the value slot stays reserved for the data." }, { "name": "Empty", "code": "import { Attribute, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Link } from '@wallarm-org/design-system/Link';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Empty = () => (\n
\n \n \n Region\n Manual composition\n \n \n \n\n \n Region\n \n This text is replaced by the em-dash placeholder\n \n \n\n \n \n Owner\n Not yet assigned\n \n \n \n\n \n \n SSO provider\n \n Not connected —{' '}\n \n set up integration\n \n \n \n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "Four ways a missing value can read: composed by hand, `isEmpty` on its own —\nwhich swaps the value for an em dash and ignores whatever children it had — and\n`isEmpty` alongside an `AttributeEmptyDescription`, which appears only in that\nstate and can carry the link out to the fix." }, { "name": "Loading", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\n\nexport const Loading = () => (\n
\n \n Created at\n \n \n \n Status\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`loading` skeletons both slots and ignores the children, so a panel can be laid\nout before its data lands; it wins over `isEmpty`." }, { "name": "Composition", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Badge } from '@wallarm-org/design-system/Badge';\nimport { Code } from '@wallarm-org/design-system/Code';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';\nimport { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';\nimport { Link } from '@wallarm-org/design-system/Link';\nimport { OverflowList } from '@wallarm-org/design-system/OverflowList';\nimport { Tag } from '@wallarm-org/design-system/Tag';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const Composition = () => (\n
\n \n Status\n \n \n Blocked\n \n \n \n\n \n First seen\n \n \n \n \n\n \n Attack type\n \n {item}}\n />\n \n \n\n \n Sessions\n \n 3 sessions\n \n \n\n \n Users\n \n {item}}\n />\n \n \n\n \n IPs\n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n 10.0.0.1\n \n \n \n 192.168.1.1\n \n \n \n \n\n \n Source IP\n \n \n \n 142.198.167.52\n Azure\n \n \n \n\n \n Created at\n \n \n \n \n\n \n Documentation\n \n \n View full report\n \n \n \n\n \n Payload (inline)\n \n \n \n \n\n \n Payload (code)\n \n {'{ \"action\": \"login\", \"user_id\": 42 }'}\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The display components sanctioned inside a value — `Badge`, `FormatDateTime`,\n`OverflowList` of `Tag`s, `Ip` and `IpList`, `Link`, `InlineCodeSnippet`, `Code` —\neach formatting the data itself rather than receiving a pre-built string." }, { "name": "WithActions", "code": "import { Attribute, AttributeActions, AttributeActionsTarget, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Badge } from '@wallarm-org/design-system/Badge';\nimport { Code } from '@wallarm-org/design-system/Code';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';\nimport { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';\nimport { Link } from '@wallarm-org/design-system/Link';\nimport { OverflowList } from '@wallarm-org/design-system/OverflowList';\nimport { Tag } from '@wallarm-org/design-system/Tag';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const WithActions = () => (\n
\n \n Status\n \n \n \n \n Blocked\n \n \n {renderActionsItems()}\n \n \n \n\n \n First seen\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Attack type\n \n \n \n {item}}\n />\n \n {renderActionsItems()}\n \n \n \n\n \n Sessions\n \n \n \n 3 sessions\n \n {renderActionsItems()}\n \n \n \n\n \n Users\n \n \n \n {item}}\n />\n \n {renderActionsItems()}\n \n \n \n\n \n IPs\n \n \n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n 10.0.0.1\n \n \n \n 192.168.1.1\n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Source IP\n \n \n \n \n \n 142.198.167.52\n Azure\n \n \n {renderActionsItems()}\n \n \n \n\n \n Created at\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Documentation\n \n \n \n \n View full report\n \n \n {renderActionsItems()}\n \n \n \n\n \n Payload (inline)\n \n \n \n \n \n {renderActionsItems()}\n \n \n \n\n \n Payload (code)\n \n \n \n {'{ \"action\": \"login\", \"user_id\": 42 }'}\n \n {renderActionsItems()}\n \n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`AttributeActions` turns the value into a `DropdownMenu` trigger: the row picks up\na hover surface and the menu carries the actions that belong to that one value." }, { "name": "Horizontal", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Badge } from '@wallarm-org/design-system/Badge';\n\nexport const Horizontal = () => (\n
\n \n Status\n \n \n Blocked\n \n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`orientation='horizontal'` sets the label beside the value in a cell clamped\nbetween 100 and 256px, so values line up down a panel." }, { "name": "HorizontalTruncation", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const HorizontalTruncation = () => (\n
\n \n Short\n \n Fits in 256px label cell\n \n \n \n \n This label text is much longer than 256 pixels and must be truncated\n \n \n Value\n \n \n \n Users\n \n \n artem@acme.com, uxd@acme.com, ops@acme.com, security@acme.com, admin@acme.com\n \n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "Horizontal cells clip with an ellipsis rather than wrapping — the label at its set\nwidth, 100px unless you widen it, and the value once its own content overruns." }, { "name": "HorizontalComposition", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Badge } from '@wallarm-org/design-system/Badge';\nimport { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';\nimport { Ip, IpAddress, IpCountry, IpList, IpProvider } from '@wallarm-org/design-system/Ip';\nimport { OverflowList } from '@wallarm-org/design-system/OverflowList';\nimport { Tag } from '@wallarm-org/design-system/Tag';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const HorizontalComposition = () => (\n
\n \n Status\n \n \n Blocked\n \n \n \n\n \n First seen\n \n \n \n \n\n \n Attack type\n \n {item}}\n />\n \n \n\n \n Last seen\n \n \n \n \n\n \n Sessions\n \n 3 sessions\n \n \n\n \n Users\n \n {item}}\n />\n \n \n\n
\n \n IPs\n \n \n \n \n 142.198.167.52\n Azure\n \n \n \n 34.74.73.20\n AWS\n \n \n \n 34.74.73.20\n GCP\n \n \n \n \n
\n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The same value components in the horizontal layout, where a wide one such as\n`IpList type='horizontal'` needs its row to span both columns." }, { "name": "HorizontalLoading", "code": "import { Attribute, AttributeLabel, AttributeValue } from '@wallarm-org/design-system/Attribute';\n\nexport const HorizontalLoading = () => (\n
\n \n Created at\n \n \n \n Status\n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The horizontal skeleton is a 16px line against the vertical 24px, matching the\nsingle-line row it stands in for." }, { "name": "HorizontalEmpty", "code": "import { Attribute, AttributeEmptyDescription, AttributeLabel, AttributeLabelDescription, AttributeValue } from '@wallarm-org/design-system/Attribute';\nimport { Link } from '@wallarm-org/design-system/Link';\nimport { Text } from '@wallarm-org/design-system/Text';\n\nexport const HorizontalEmpty = () => (\n
\n \n \n Region\n Manual composition\n \n \n \n\n \n Region\n \n This text is replaced by the em-dash placeholder\n \n \n\n \n \n Owner\n Not yet assigned\n \n \n \n\n \n \n SSO provider\n \n Not connected —{' '}\n \n set up integration\n \n \n \n \n \n
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The same four cases side by side, with `width={160}` on the label so the\ndescriptions have somewhere to sit." }, { "name": "HorizontalWithActions", "code": "export const HorizontalWithActions = () => (\n
{renderActionsAttributes(false)}
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "By default the value keeps its own interactivity: a link, or a snippet's copy\nbutton, still does its own job, and the menu opens from the space around it." }, { "name": "HorizontalWithActionsMenuOnly", "code": "export const HorizontalWithActionsMenuOnly = () => (\n
{renderActionsAttributes(true)}
\n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`disableNestedInteractive` renders the value inert, so a click anywhere on the row\nopens the menu — for values with nothing worth clicking of their own." }, { "name": "WithInlineEdit", "code": "export const WithInlineEdit = () => ;", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "`Attribute` > `AttributeValue` > `InlineEdit` is the sanctioned nesting for an\neditable field — the value slot supplies the overflow room the editor needs, so\nnever add your own." }, { "name": "HorizontalWithInlineEdit", "code": "export const HorizontalWithInlineEdit = () => (\n \n);", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The same editor in a horizontal row, where it takes the width of the value cell\nrather than the panel." }, { "name": "Mixed", "code": "export const Mixed = () => ;", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "A plain value, an actions target and an inline editor stacked in one column: the\ntext has to start at the same place in all three, which is what the value slot's\n7px pull is for — it moves the hover box left, not the text." }, { "name": "HorizontalMixed", "code": "export const HorizontalMixed = () => ;", "storyFile": "Attribute/Attribute.stories.tsx", "storyTitle": "Data Display/Attribute", "description": "The same three hosts horizontally, where the label cell fixes the start of every\nvalue and the pull has to fit inside the 12px gap between the two cells." } ] }, { "name": "Avatar", "description": "A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it `aria-label` so it reads as an image. Add `AvatarContent` with `AvatarName` (and an optional `AvatarDescription`) for the user item: plate and name in one row. To let people change it, make the avatar the `FileUploadTrigger` (`asChild`) and give it `as='button'` — picking only previews, and your form uploads.", "importPath": "@wallarm-org/design-system/Avatar", "props": [ { "name": "onStatusChange", "type": "((details: StatusChangeDetails) => void) | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "size", "type": "{ sm: string; md: string; lg: string; }", "required": false, "defaultValue": "lg" }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "as", "type": "\"span\" | undefined", "required": false, "description": "Root tag. 'button' makes the avatar itself interactive (e.g. inside FileUploadTrigger asChild)." }, { "name": "asChild", "type": "false | undefined", "required": false, "description": "Render the single child element as the root instead of `as`; takes precedence over it.", "defaultValue": "false" }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ], "variants": [ { "name": "size", "options": [ "sm", "md", "lg" ], "defaultValue": "lg" }, { "name": "initials", "options": [ "true", "false" ], "defaultValue": "false" } ], "subComponents": [ { "name": "AvatarContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AvatarDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AvatarFallback", "props": [ { "name": "name", "type": "string | undefined", "required": false, "description": "Initials are taken from this: first letter of the first and of the last word (first word only at `sm`)." }, { "name": "icon", "type": "ComponentType | undefined", "required": false, "description": "Shown when there are no children and `name` gives no initials." }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AvatarImage", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "alt", "type": "string | undefined", "required": false, "defaultValue": "" }, { "name": "height", "type": "string | number | undefined", "required": false }, { "name": "loading", "type": "\"eager\" | \"lazy\" | undefined", "required": false }, { "name": "src", "type": "string | undefined", "required": false }, { "name": "width", "type": "string | number | undefined", "required": false } ] }, { "name": "AvatarName", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "AvatarOverlay", "props": [ { "name": "visible", "type": "boolean | undefined", "required": false, "description": "Keep it shown regardless of hover — e.g. a `Loader` while the new photo uploads.", "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Basic", "code": "import { Avatar, AvatarFallback, AvatarImage } from '@wallarm-org/design-system/Avatar';\n\nexport const Basic = () => (\n \n \n \n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "A photo with an initials fallback — the fallback also covers the moment before the photo arrives." }, { "name": "Sizes", "code": "import { Avatar, AvatarFallback, AvatarImage } from '@wallarm-org/design-system/Avatar';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Sizes = () => (\n \n {SIZES.map(size => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "`sm` (20px) and `md` (24px, the nav-rail plate) are the compact sizes for user items; `lg` (32px,\nthe default) is for rows and forms. Each row shows a photo, initials and the icon, then the same\nthree inside a Branded frame." }, { "name": "WithName", "code": "import { Avatar, AvatarContent, AvatarFallback, AvatarImage, AvatarName } from '@wallarm-org/design-system/Avatar';\nimport { VStack } from '@wallarm-org/design-system/Stack';\n\nexport const WithName = () => (\n \n {(['sm', 'md'] as const).map(size => (\n \n \n \n \n \n Artem Miskevich\n \n \n \n \n \n Artem Miskevich\n \n \n
\n \n \n \n Artem Miskevich\n \n \n
\n
\n \n \n \n Maximilian Alexander-Montgomery\n \n \n
\n \n ))}\n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "The user item (Figma 12557:5856): the plate and the name in one row, 6px apart. The name is\n`text-sm` at every size and truncates with an ellipsis when the row is narrow." }, { "name": "WithDescription", "code": "import { Avatar, AvatarContent, AvatarDescription, AvatarFallback, AvatarImage, AvatarName } from '@wallarm-org/design-system/Avatar';\nimport { VStack } from '@wallarm-org/design-system/Stack';\n\nexport const WithDescription = () => (\n \n \n \n \n \n Artem Miskevich\n admin@wallarm.com\n \n \n \n \n \n Artem Miskevich\n admin@wallarm.com\n \n \n
\n \n \n \n Maximilian Alexander-Montgomery\n maximilian.alexander-montgomery@wallarm.com\n \n \n
\n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "`AvatarDescription` adds a secondary line under the name — the email in the account menu. Both lines truncate." }, { "name": "Fallback", "code": "import { Avatar, AvatarFallback, AvatarImage } from '@wallarm-org/design-system/Avatar';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Fallback = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "Initials are the first letters of the first and last word of `name`; without a name the person icon shows, whether the photo is missing or failed to load." }, { "name": "CustomIcon", "code": "import { Avatar, AvatarFallback } from '@wallarm-org/design-system/Avatar';\nimport { Activity } from '@wallarm-org/design-system/icons';\n\nexport const CustomIcon = () => (\n \n \n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "`icon` replaces the default person glyph whenever `name` gives no initials." }, { "name": "Branded", "code": "import { Avatar, AvatarFallback, AvatarImage } from '@wallarm-org/design-system/Avatar';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Branded = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "Inside a Branded frame the empty plate takes the brand tint and stroke, initials and the icon take the brand colour, and a photo is unchanged." }, { "name": "ClickToUpload", "code": "import { Avatar, AvatarFallback, AvatarImage, AvatarOverlay } from '@wallarm-org/design-system/Avatar';\nimport { FileUpload, FileUploadError, FileUploadTrigger } from '@wallarm-org/design-system/FileUpload';\n\nexport const ClickToUpload = () => {\n const { src, files, setFiles } = useAvatarUpload();\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "Click the avatar, or focus it and press Enter, to pick a photo — hover and focus show the edit\nicon, and the pick only previews until your form saves." }, { "name": "WithActions", "code": "import { Avatar, AvatarFallback, AvatarImage } from '@wallarm-org/design-system/Avatar';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { FieldDescription, FieldLabel } from '@wallarm-org/design-system/Field';\nimport { FileUpload, FileUploadError, FileUploadTrigger } from '@wallarm-org/design-system/FileUpload';\nimport { RefreshCcw, Trash2 } from '@wallarm-org/design-system/icons';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const WithActions = () => {\n const { src, files, setFiles, remove } = useAvatarUpload(PHOTO);\n return (\n \n \n \n Avatar\n PNG, JPEG, or WebP · up to 512 KB\n \n \n {src && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n \n );\n};", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "The settings-row pattern: explicit Remove and Replace buttons beside a plain avatar, with the accepted formats and size spelled out." }, { "name": "Uploading", "code": "import { Avatar, AvatarFallback, AvatarImage, AvatarOverlay } from '@wallarm-org/design-system/Avatar';\nimport { FileUpload, FileUploadTrigger } from '@wallarm-org/design-system/FileUpload';\nimport { Loader } from '@wallarm-org/design-system/Loader';\n\nexport const Uploading = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Avatar/Avatar.stories.tsx", "storyTitle": "Data Display/Avatar", "description": "While the new photo uploads, disable the trigger and force the overlay with `visible` so it holds a `Loader`." } ] }, { "name": "Badge", "description": "The status chip the rest of the family is built from — reach for the dedicated component when one exists (`HttpMethod`, `ResponseCode`, `Ip`, `Country`) rather than rebuilding it here, and for `Tag` when the chip is interactive. Colour carries the meaning, so choose it from what the value is rather than from what looks right on the page.", "importPath": "@wallarm-org/design-system/Badge", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false, "defaultValue": "slate" }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "{ solid: string; secondary: string; outline: string; text: string; 'text-color': string; }", "required": false, "defaultValue": "solid" }, { "name": "size", "type": "{ small: string; medium: string; large: string; }", "required": false, "defaultValue": "medium" }, { "name": "muted", "type": "{ true: string; false: string; }", "required": false, "defaultValue": "false" }, { "name": "variant", "type": "{ default: string; dotted: string; }", "required": false, "defaultValue": "default" }, { "name": "isIconOnly", "type": "{ true: string; }", "required": false }, { "name": "textVariant", "type": "{ default: string; code: string; }", "required": false, "defaultValue": "default" }, { "name": "isClickable", "type": "{ true: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "variant", "options": [ "default", "dotted" ], "defaultValue": "default" }, { "name": "size", "options": [ "small", "medium", "large" ] }, { "name": "isIconOnly", "options": [ "true" ] }, { "name": "type", "options": [ "solid", "secondary", "outline", "text", "text-color" ] }, { "name": "color", "options": [] }, { "name": "muted", "options": [ "true", "false" ] }, { "name": "textVariant", "options": [ "default", "code" ] }, { "name": "isClickable", "options": [ "true" ] } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\n\nexport const Basic = () => Badge;", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "The default chip. Keep the text to a word or two — a badge is read at a glance, in a table\ncell, alongside dozens of others." }, { "name": "Dotted", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\n\nexport const Dotted = () => (\n \n Badge\n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "A leading dot in the current colour, for a status that reads faster as a mark than as a fill." }, { "name": "Sizes", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Sizes = () => (\n \n \n Small\n \n \n Medium\n \n \n Large\n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "Two heights. `medium` exists for dense rows; anything smaller stops being legible at a\nglance, which is the only thing a badge is for." }, { "name": "Types", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Types = () => (\n \n \n Solid\n \n \n Secondary\n \n \n Outline\n \n \n Text\n \n \n Text Color\n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "The emphasis ladder from `solid` down to `text`. Drop the emphasis when badges are everywhere\n— a table of solid chips is a table nobody can scan." }, { "name": "TextVariants", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const TextVariants = () => (\n \n \n Default Text\n \n \n Code Text\n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "`text` and `text-color`, the two flattest types. They suit a value that must be read but\nshould not compete with the row it sits in." }, { "name": "WithIconsLeft", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { Check, CircleCheck, Info, X } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const WithIconsLeft = () => (\n \n \n \n Success\n \n \n \n Error\n \n \n \n Info\n \n \n \n Verified\n \n \n \n Complete\n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "An icon before the label, which is how a status reads without relying on colour alone." }, { "name": "WithIconsRight", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { Check, CircleCheck, Info, X } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const WithIconsRight = () => (\n \n \n Success\n \n \n \n Error\n \n \n \n Info\n \n \n \n Verified\n \n \n \n Complete\n \n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "An icon after the label, for a mark about the value rather than the value's own state." }, { "name": "IconsOnly", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { Check, CircleCheck, Info, X } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const IconsOnly = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "No label at all. Only safe where the icon's meaning is already established elsewhere on the\npage, since nothing here names it." }, { "name": "MutedVariants", "code": "import { Badge, type BadgeType } from '@wallarm-org/design-system/Badge';\nimport { BadgeTypeEnum } from './constants';\nimport { badgeColorsMuted } from './generateBadgeVariants';\n\nexport const MutedVariants = () => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {badgeColorsMuted.map(color => (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n ))}\n \n
\n {type}\n
\n {isMutedSupported(type, color) ? (\n \n {capitalize(color)}\n \n ) : null}\n
\n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "`muted` drops the saturation for a status that is true but not worth attention — the case for\neverything that is merely fine." }, { "name": "MutedOutline", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\n\nexport const MutedOutline = () => (\n \n \n Muted outline\n \n \n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "A quieter outline keeps its neutral label and border inside a coloured message." }, { "name": "ColorVariants", "code": "import { Badge, type BadgeType } from '@wallarm-org/design-system/Badge';\nimport { BadgeColorEnum, BadgeTypeEnum } from './constants';\n\nexport const ColorVariants = () => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {Object.entries(BadgeColorEnum).map(([label, color]) => (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n ))}\n \n
\n {type}\n
\n \n {label}\n \n
\n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "The full palette. Every colour already means something in the system, so borrowing one for\ndecoration teaches the reader the wrong thing." }, { "name": "ContentVariants", "code": "import { Fragment } from 'react';\nimport { Badge, type BadgeType } from '@wallarm-org/design-system/Badge';\nimport { Info, PenTool, X } from '@wallarm-org/design-system/icons';\nimport { BadgeColorEnum, BadgeTypeEnum } from './constants';\nimport { badgeColorsMuted } from './generateBadgeVariants';\n\nexport const ContentVariants = () => (\n \n \n \n {Object.keys(BadgeTypeEnum).map(type => (\n \n ))}\n \n \n \n {Object.entries(BadgeColorEnum).map(([label, color]) => (\n \n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n\n {badgeColorsMuted.includes(color) && (\n \n {Object.values(BadgeTypeEnum).map((type: BadgeType) => (\n \n ))}\n \n )}\n \n ))}\n \n
\n {type}\n
\n \n {label}\n \n
\n \n {label}\n\n \n \n
\n \n \n {label}\n \n
\n \n \n {label}\n \n \n
\n \n {label}\n \n
\n \n {label}\n \n \n
\n \n {label}\n \n \n
\n \n \n \n
\n {isMutedSupported(type, color) ? (\n \n {capitalize(color)}\n \n ) : null}\n
\n);", "storyFile": "Badge/Badge.stories.tsx", "storyTitle": "Status Indication/Badge", "description": "What happens as the content grows. A badge does not truncate, so long text widens the row\nrather than being cut." } ] }, { "name": "Banner", "description": "A full-width message pinned above the header, for something account- or system-wide. The test is whether it would still matter on another page: yes and it is a `Banner`, no and it is an `Alert`. There is no success variant — “it worked” is a `Toast` — and no `icon` prop either: the icon appears only when a `BannerIcon` is composed in.", "importPath": "@wallarm-org/design-system/Banner", "props": [ { "name": "variant", "type": "BannerVariant | undefined", "required": false, "description": "Visual variant of the banner", "defaultValue": "primary" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "variant", "options": [ "primary", "secondary", "destructive", "info", "warning" ], "defaultValue": "primary" } ], "subComponents": [ { "name": "BannerClose", "props": [ { "name": "onClick", "type": "(() => void) | undefined", "required": false, "description": "Callback when the close button is clicked" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false } ] }, { "name": "BannerContent", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "BannerControls", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "BannerDescription", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "BannerIcon", "props": [ { "name": "icon", "type": "ReactNode", "required": false, "description": "Override the default icon for the variant." }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "BannerLink", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "{ true: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "weight", "type": "{ regular: string; medium: string; }", "required": false, "defaultValue": "regular" }, { "name": "href", "type": "string | undefined", "required": false }, { "name": "download", "type": "any", "required": false }, { "name": "hrefLang", "type": "string | undefined", "required": false }, { "name": "target", "type": "HTMLAttributeAnchorTarget | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "BannerTitle", "props": [ { "name": "action", "type": "ReactNode", "required": false, "description": "Optional inline action rendered next to the title (e.g. a BannerLink).\nSits on the same row and wraps below on narrow viewports." }, { "name": "lineClamp", "type": "number | undefined", "required": false, "description": "Maximum number of lines before the message is truncated (default: 1).\nThe design budget is 2 lines; 1 line is preferred.", "defaultValue": "1" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Default", "code": "import { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Megaphone } from '@wallarm-org/design-system/icons';\n\nexport const Default = ({\n variant,\n customIcon,\n description,\n inlineAction,\n actions,\n closable,\n title,\n text,\n}) => (\n \n : undefined}\n />\n \n Action : undefined}>\n {title}\n \n {description && {text}}\n \n {(actions || closable) && (\n \n {actions && (\n \n )}\n {closable && }\n \n )}\n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "The playground — toggle the controls to compose a banner and see which parts are optional." }, { "name": "AllColors", "code": "import { Banner, BannerContent, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';\n\nexport const AllColors = () => (\n
\n \n \n Message goes here\n \n \n\n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n\n \n \n \n Message goes here\n \n \n
\n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "`primary` (dark) and `secondary` (light) are the neutral bars and carry no icon of their own; destructive, info and warning each bring one." }, { "name": "WithDescription", "code": "import { Banner, BannerContent, BannerDescription, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';\n\nexport const WithDescription = () => (\n \n \n \n Credential Stuffing Detection\n \n Credential Stuffing Detection requires Wallarm node version 4.10.3 or higher.\n \n \n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "A description earns its place by adding the consequence — here the node version the feature needs — never by restating the title." }, { "name": "WithInlineLink", "code": "import { Banner, BannerContent, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';\n\nexport const WithInlineLink = () => (\n \n \n \n Learn more}>\n You have exceeded the monthly quota for your company\n \n \n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "A `BannerLink` inside the title, for when the action belongs in the sentence. Use the inline link or the trailing buttons, never both." }, { "name": "LongText", "code": "import { Banner, BannerClose, BannerContent, BannerControls, BannerTitle } from '@wallarm-org/design-system/Banner';\n\nexport const LongText = () => (\n \n \n \n Banner will render at most two lines before truncating the text. Banners address system-wide\n conditions, not individual user actions. The voice should be institutional and factual, even\n when the situation is urgent. Every word must earn its place within the 2-line budget, but\n one line is more preferred.\n \n \n \n \n \n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "Two lines is the ceiling, after which the text truncates into a tooltip. One line is what to aim for." }, { "name": "CustomIcon", "code": "import { Banner, BannerClose, BannerContent, BannerControls, BannerIcon, BannerLink, BannerTitle } from '@wallarm-org/design-system/Banner';\nimport { Megaphone } from '@wallarm-org/design-system/icons';\n\nexport const CustomIcon = () => (\n \n } />\n \n View plans}>\n New features are now available on the Pro plan\n \n \n \n \n \n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "`BannerIcon`’s `icon` prop overrides the variant default, or gives `primary` and `secondary` the icon they otherwise lack — which is how an announcement gets its megaphone." }, { "name": "WithActions", "code": "import { Banner, BannerContent, BannerControls, BannerIcon, BannerTitle } from '@wallarm-org/design-system/Banner';\nimport { Button } from '@wallarm-org/design-system/Button';\n\nexport const WithActions = () => (\n \n \n \n Your subscription has expired\n \n \n \n \n \n \n);", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "Trailing buttons in `BannerControls`, small and never solid, labelled with the verb that follows: “Renew”, not “Learn more”." }, { "name": "Closable", "code": "import { useState } from 'react';\nimport { Banner, BannerClose, BannerContent, BannerControls, BannerTitle } from '@wallarm-org/design-system/Banner';\nimport { Button } from '@wallarm-org/design-system/Button';\n\nexport const Closable = () => {\n const [open, setOpen] = useState(true);\n\n if (!open) {\n return (\n
\n \n
\n );\n }\n\n return (\n \n \n A new version of the dashboard is available\n \n \n setOpen(false)} />\n \n \n );\n};", "storyFile": "Banner/Banner.stories.tsx", "storyTitle": "Messaging/Banner", "description": "`BannerClose` where the reader may dismiss it. Leave it off while the condition still holds, since a banner is meant to outlast a page view." } ] }, { "name": "Breadcrumbs", "description": "The location trail for a page that sits deep in a hierarchy — each ancestor links up, and the last item is the page you are on. Skip it in a flat app of one or two levels, and never use it to move between peers at the same level: that is `Tabs`. It shows vertical hierarchy only, and complements the sidebar rather than replacing it.", "importPath": "@wallarm-org/design-system/Breadcrumbs", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "BreadcrumbsEllipsis", "props": [ { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "BreadcrumbsItem", "props": [ { "name": "href", "type": "string | undefined", "required": false, "description": "If provided, renders as a link instead of button" }, { "name": "onClick", "type": "MouseEventHandler | undefined", "required": false, "description": "Click handler for buttons" }, { "name": "aria-label", "type": "string | undefined", "required": false, "description": "ARIA label for accessibility" }, { "name": "isCurrent", "type": "boolean | undefined", "required": false, "description": "@internal - Whether this is the current/active page (set automatically by parent)", "defaultValue": "false" } ] }, { "name": "BreadcrumbsScopeSwitcher", "props": [ { "name": "value", "type": "string", "required": true }, { "name": "items", "type": "ScopeSwitcherItem[]", "required": true }, { "name": "onSelect", "type": "(item: ScopeSwitcherItem) => void", "required": true }, { "name": "isCurrent", "type": "boolean | undefined", "required": false, "description": "@internal - set automatically by parent", "defaultValue": "false" } ] }, { "name": "BreadcrumbsSeparator", "props": [ { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Basic", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { Home } from '@wallarm-org/design-system/icons';\n\nexport const Basic = () => {\n return (\n
\n \n Home\n Products\n Current Page\n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "The plain trail. The root inserts the chevrons and marks the last item as the current page, so you list only your own items." }, { "name": "SingleItem", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\n\nexport const SingleItem = () => {\n return (\n
\n \n Current Page\n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "One item is the current page and nothing more — which is the case where a breadcrumb has stopped earning its space." }, { "name": "WithIcons", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { CircleDashed, Home } from '@wallarm-org/design-system/icons';\n\nexport const WithIcons = () => {\n return (\n
\n \n \n \n Home\n \n \n \n Category\n \n \n Subcategory\n \n \n \n \n Current Page\n \n \n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "An icon inside an item, for a level whose type is worth showing as well as naming." }, { "name": "WithInteractiveItems", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { ChevronDown, CircleDashed, Home } from '@wallarm-org/design-system/icons';\n\nexport const WithInteractiveItems = () => {\n return (\n
\n \n Home\n \n \n Category\n \n \n Current Page\n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "Items that call a handler instead of following an `href`, for a trail wired to a router rather than to URLs." }, { "name": "IconsOnly", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { CircleDashed, Home } from '@wallarm-org/design-system/icons';\n\nexport const IconsOnly = () => {\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "Icons with no text. Each item needs its own `aria-label`, since the icon is then the only thing naming the level." }, { "name": "WithTruncation", "code": "import { useState } from 'react';\nimport { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { Home } from '@wallarm-org/design-system/icons';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';\n\nexport const WithTruncation = () => {\n const [showAll, setShowAll] = useState(false);\n\n return (\n
\n \n Home\n Level 1\n {!showAll ? (\n \n \n setShowAll(true)} />\n \n WIP\n \n ) : (\n [\n \n Level 2\n ,\n \n Level 3\n ,\n ]\n )}\n Penultimate\n Current Page\n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "A long trail folded behind a `BreadcrumbsEllipsis`, which expands the middle on click. The first and current items always stay." }, { "name": "LongBreadcrumbs", "code": "import { Breadcrumbs, BreadcrumbsItem } from '@wallarm-org/design-system/Breadcrumbs';\nimport { Home } from '@wallarm-org/design-system/icons';\n\nexport const LongBreadcrumbs = () => {\n return (\n
\n \n Home\n Products & Services\n Technology Category\n Software Development\n Web Development Tools\n \n Frontend Frameworks and Libraries\n \n \n
\n );\n};", "storyFile": "Breadcrumbs/Breadcrumbs.stories.tsx", "storyTitle": "Navigation/Breadcrumbs", "description": "What a trail of long labels actually does today: it runs on. Per-item truncation is drawn in Figma but not shipped, so keep labels short." } ] }, { "name": "BulkBar", "importPath": "@wallarm-org/design-system/BulkBar", "props": [], "variants": [], "subComponents": [ { "name": "BulkBarSummary", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "BulkBarSummaryClear", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "BulkBarSummaryCount", "props": [ { "name": "count", "type": "number | undefined", "required": false, "description": "Renders the default \"{count} selected\" label." }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "color", "type": "{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; 'tertiary-alt': string; danger: string; inherit: string; }", "required": false, "defaultValue": "primary-alt" }, { "name": "size", "type": "{ xs: string; sm: string; md: string; lg: string; xl: string; }", "required": false, "defaultValue": "sm" }, { "name": "weight", "type": "{ light: string; regular: string; medium: string; bold: string; }", "required": false, "defaultValue": "medium" }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "BulkBarSummarySelectAll", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [] }, { "name": "Button", "description": "Triggers an action — reach for `Link` when the control navigates somewhere instead, `ToggleButton` when it stays switched on, and `SplitButton` or `DropdownMenu` when several related actions compete for one slot. Keep one `variant='primary'` per view, and reserve `color='destructive'` for actions that are hard to undo.", "importPath": "@wallarm-org/design-system/Button", "props": [ { "name": "size", "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }", "required": false, "defaultValue": "large" }, { "name": "loading", "type": "{ true: string; }", "required": false, "defaultValue": "false" }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "color", "type": "{ brand: string; neutral: string; 'neutral-alt': string; destructive: string; }", "required": false, "defaultValue": "brand" }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false, "defaultValue": "primary" } ], "variants": [ { "name": "variant", "options": [ "primary", "outline", "ghost", "secondary" ] }, { "name": "color", "options": [ "brand", "neutral", "neutral-alt", "destructive" ] } ], "subComponents": [], "examples": [ { "name": "Basic", "code": "import { Button } from '@wallarm-org/design-system/Button';\n\nexport const Basic = () => {\n return (\n \n );\n};", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "A button with nothing set: you get the brand primary at the large size. Label it with a\nverb and its object — `Delete rule` rather than `Delete` — so the action still reads on its own." }, { "name": "Variants", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Variants = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "`variant` sets emphasis and `color` sets meaning, and only the pairings drawn here are\ndesigned: `primary` exists for `brand` and `destructive` only. `neutral-alt` has ghost and\nsecondary variants, shown on an inverted surface so they remain readable in both themes." }, { "name": "Sizes", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Sizes = () => (\n \n \n \n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "Three heights at identical emphasis; `large` is the default, and the smaller two are for\ndense contexts like table rows and toolbars where a full-height button would dominate." }, { "name": "Disabled", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Disabled = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "Every sanctioned pairing with the action unavailable. `disabled` also takes the button out\nof the tab order, so say somewhere on screen what would re-enable it rather than leaving the\nreader to guess." }, { "name": "Loading", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Loading = () => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "`loading` covers the content with a spinner but keeps the label's footprint, so the button\ndoesn't resize mid-request. It disables the button on its own — passing `disabled` as well is\nredundant." }, { "name": "Icons", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { ChevronLeft, ChevronRight } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Icons = () => (\n \n \n\n \n\n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "An icon before the label, after it, or both. The button sizes and spaces icons itself, so\npass the icon bare; and if one button in a row carries an icon, they all should." }, { "name": "Badge", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { NumericBadge } from '@wallarm-org/design-system/NumericBadge';\n\nexport const Badge = () => (\n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "A `NumericBadge` after the label, for a count the action applies to. The button tightens\nits right padding whenever the last child isn't text, so a trailing badge or icon doesn't sit\nstranded." }, { "name": "IconOnly", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { ChevronRight } from '@wallarm-org/design-system/icons';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const IconOnly = () => (\n \n \n\n \n\n \n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "There is no `iconOnly` prop: a button whose only child is an icon squares itself off. Give\nit an `aria-label` naming the action and a `Tooltip`, since nothing on screen says what it does." }, { "name": "LinkAsButton", "code": "import { Button } from '@wallarm-org/design-system/Button';\n\nexport const LinkAsButton = () => (\n \n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "`asChild` puts the button's styling on your own ``, so the element stays a real link and\nmiddle-click and “open in new tab” keep working. Use it only when a navigation has to carry a\nbutton's weight; ordinary navigation is a `Link`." }, { "name": "FullWidth", "code": "import { Button } from '@wallarm-org/design-system/Button';\n\nexport const FullWidth = () => (\n
\n \n
\n);", "storyFile": "Button/Button.stories.tsx", "storyTitle": "Actions/Button", "description": "`fullWidth` fills the container, for narrow surfaces like a `Drawer` or a dialog footer\nrather than a wide desktop form. Two full-width buttons side by side split the row evenly\ninstead of overflowing it." } ] }, { "name": "ButtonBase", "importPath": "@wallarm-org/design-system/ButtonBase", "props": [ { "name": "size", "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }", "required": false, "defaultValue": "large" }, { "name": "loading", "type": "{ true: string; }", "required": false, "defaultValue": "false" }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false, "defaultValue": "false" }, { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "as", "type": "C | undefined", "required": false, "defaultValue": "button" } ], "variants": [ { "name": "size", "options": [ "small", "medium", "large", "inline-edit" ] }, { "name": "iconOnly", "options": [ "true", "false" ] }, { "name": "loading", "options": [ "true" ] }, { "name": "hasNonTextEnd", "options": [ "true", "false" ] }, { "name": "fullWidth", "options": [ "true", "false" ] } ], "subComponents": [], "examples": [] }, { "name": "Calendar", "description": "The month grid for choosing a date the reader needs to see in context — a weekday, a distance from today — where `DateInput` is for a date they already know. It is its own popover, so compose a trigger beside it rather than wrapping it in one, and take React Aria date objects rather than a JavaScript `Date`.", "importPath": "@wallarm-org/design-system/Calendar", "props": [ { "name": "type", "type": "CalendarType | undefined", "required": false, "description": "Calendar type: 'single' for one month, 'range' for two months (date range selection)", "defaultValue": "single" }, { "name": "showTime", "type": "boolean | undefined", "required": false, "description": "Show time selection (affects input placeholder text)", "defaultValue": "false" }, { "name": "showKeyboardHints", "type": "boolean | undefined", "required": false, "description": "Show keyboard shortcut hints in presets and footer", "defaultValue": "true" }, { "name": "value", "type": "DateValue[] | undefined", "required": false, "description": "Controlled value - array of selected dates" }, { "name": "defaultValue", "type": "DateValue[] | undefined", "required": false, "description": "Default value for uncontrolled mode" }, { "name": "onChange", "type": "complex", "required": false, "description": "Callback fired when selected value changes" }, { "name": "minDate", "type": "DateValue | undefined", "required": false, "description": "Minimum selectable date" }, { "name": "maxDate", "type": "DateValue | undefined", "required": false, "description": "Maximum selectable date" }, { "name": "isDateUnavailable", "type": "complex", "required": false, "description": "Function to determine if a specific date should be unavailable/disabled.\nDateValue has year, month (1-12), and day properties.\nTo get day of week, use: new Date(date.year, date.month - 1, date.day).getDay()\nwhere Sunday = 0, Saturday = 6." }, { "name": "disallowDisabledDatesInRange", "type": "boolean | undefined", "required": false, "description": "When true, prevents selecting a range that contains any unavailable dates.\nRequires controlled mode (value + onChange props) to work properly.", "defaultValue": "false" }, { "name": "open", "type": "boolean | undefined", "required": false, "description": "Controlled open state of the calendar popover" }, { "name": "defaultOpen", "type": "boolean | undefined", "required": false, "description": "Default open state for uncontrolled mode" }, { "name": "onOpenChange", "type": "((open: boolean) => void) | undefined", "required": false, "description": "Callback fired when popover open state changes" }, { "name": "closeOnSelect", "type": "boolean | undefined", "required": false, "description": "Whether to close calendar on date selection. Default: true", "defaultValue": "true" }, { "name": "readonly", "type": "boolean | undefined", "required": false, "description": "Whether calendar is readonly (display only, no date selection allowed). Default: false", "defaultValue": "false" }, { "name": "focusedValue", "type": "DateValue | undefined", "required": false, "description": "Controlled focused date — navigates the calendar view to this date" } ], "variants": [], "subComponents": [ { "name": "CalendarApplyButton", "props": [ { "name": "onClick", "type": "(() => void) | undefined", "required": false, "description": "Callback fired before closing calendar" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false, "defaultValue": "brand" }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }", "required": false, "defaultValue": "small" }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false, "defaultValue": "primary" }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false } ] }, { "name": "CalendarBody", "props": [] }, { "name": "CalendarContent", "props": [] }, { "name": "CalendarFooter", "props": [] }, { "name": "CalendarFooterControls", "props": [] }, { "name": "CalendarGrids", "props": [] }, { "name": "CalendarInputHeader", "props": [] }, { "name": "CalendarKeyboardHints", "props": [] }, { "name": "CalendarPresetItem", "props": [ { "name": "label", "type": "string", "required": true, "description": "Display label for the preset" }, { "name": "value", "type": "PresetValue", "required": true, "description": "Preset value - dates array or named preset string" }, { "name": "shortcut", "type": "string | undefined", "required": false, "description": "Keyboard shortcut key" }, { "name": "showShortcut", "type": "boolean | undefined", "required": false, "description": "Whether to display the shortcut badge", "defaultValue": "true" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "CalendarPresets", "props": [ { "name": "presets", "type": "PresetConfig[] | undefined", "required": false, "description": "Array of preset configurations. Defaults to DEFAULT_SINGLE_PRESETS or DEFAULT_RANGE_PRESETS based on calendar type" }, { "name": "showShortcuts", "type": "boolean | undefined", "required": false, "description": "Whether to show keyboard shortcuts next to presets", "defaultValue": "true" } ] }, { "name": "CalendarResetButton", "props": [ { "name": "onClick", "type": "(() => void) | undefined", "required": false, "description": "Callback fired after reset (in addition to clearing value)" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "color", "type": "string | undefined", "required": false, "defaultValue": "neutral" }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "asChild", "type": "boolean | undefined", "required": false }, { "name": "size", "type": "{ small: string; medium: string; large: string; 'inline-edit': string; }", "required": false, "defaultValue": "small" }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "variant", "type": "{ primary: string; outline: string; ghost: string; secondary: string; }", "required": false, "defaultValue": "ghost" }, { "name": "loading", "type": "{ true: string; }", "required": false }, { "name": "as", "type": "C | undefined", "required": false }, { "name": "fullWidth", "type": "{ true: string; false: string; }", "required": false } ] }, { "name": "CalendarTrigger", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Additional props passed to the trigger wrapper", "defaultValue": "true" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [ { "name": "Single", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const Single = () => (\n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "One date. The grid earns its space when the reader is choosing by weekday or by distance from\ntoday rather than typing a date they know." }, { "name": "Range", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const Range = () => (\n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "A start and an end in one grid, with the span drawn between them. Two months show at once so\na range crossing a boundary can be chosen without paging." }, { "name": "RangeWithPresets", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, DEFAULT_RANGE_PRESETS, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeWithPresets = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "`CalendarPresets` alongside the grid. The shipped defaults cover the ranges people actually\nask for — last week, this month, last 90 days — so reach for them before writing your own." }, { "name": "RangeWithInput", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeWithInput = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "`CalendarInputHeader` puts a typed field above the grid, so the same popover serves both a\nreader who knows the dates and one who needs to look." }, { "name": "RangeWithFooter", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarKeyboardHints, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeWithFooter = () => {\n const [value, setValue] = useState([]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n \n \n \n \n \n \n );\n};", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "`CalendarFooter` holds Reset and Apply, which turns the grid into a deliberate commit —\nnothing changes underneath the reader until they apply it." }, { "name": "RangeFullFeatured", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, DEFAULT_RANGE_PRESETS, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarInputHeader, CalendarKeyboardHints, CalendarPresets, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeFullFeatured = () => {\n const [value, setValue] = useState([]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n \n \n \n \n \n \n );\n};", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "Presets, input header and footer together, which is the shape a filter bar wants. Everything\nelse on this page is a subset of it." }, { "name": "SingleWithInput", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const SingleWithInput = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "The typed header on a single calendar, for the same reason as the range: the reader chooses\nhow to answer." }, { "name": "SingleWithDateTime", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarInputHeader, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const SingleWithDateTime = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "`showTime` adds a time to the date, for a moment rather than a day. Ask for it only where the\ntime genuinely changes the result." }, { "name": "SingleWithPresets", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const SingleWithPresets = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "Single-date presets — today, yesterday, first of the month — which answer the questions a\nsingle date usually stands for." }, { "name": "RangeWithDisabledDates", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeWithDisabledDates = () => (\n {\n const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();\n return dayOfWeek === 0 || dayOfWeek === 6;\n }}\n >\n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "`isDateUnavailable` greys out dates that cannot be chosen. Show them rather than hiding them,\nso the reader can see the shape of what is allowed." }, { "name": "RangeDisallowDisabled", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeDisallowDisabled = () => {\n const [value, setValue] = useState([]);\n\n const isWeekend = (date: DateValue) => {\n const dayOfWeek = new Date(date.year, date.month - 1, date.day).getDay();\n return dayOfWeek === 0 || dayOfWeek === 6;\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n );\n};", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "A range refusing to span an unavailable date, which needs controlled mode. Use it where\ncrossing the gap would produce a period the system cannot honour." }, { "name": "RangeControlled", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, DEFAULT_RANGE_PRESETS, CalendarApplyButton, CalendarBody, CalendarContent, CalendarFooter, CalendarFooterControls, CalendarGrids, CalendarInputHeader, CalendarKeyboardHints, CalendarPresets, CalendarResetButton, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeControlled = () => {\n const [value, setValue] = useState([]);\n const [open, setOpen] = useState(false);\n\n const getButtonLabel = () => {\n if (!value || value.length === 0 || !value[0]) return 'Select date range';\n if (value.length === 1 || !value[1]) return value[0].toString();\n return `${value[0].toString()} - ${value[1].toString()}`;\n };\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n setValue([])} />\n setOpen(false)} />\n \n \n \n \n \n );\n};", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "Owning the value, which is what presets, Apply and disallowed spans all require — the\nuncontrolled form is only for the simplest case." }, { "name": "SingleCustomPresets", "code": "import { getLocalTimeZone, today } from '@internationalized/date';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarPresetItem, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const SingleCustomPresets = () => {\n const now = today(getLocalTimeZone()) as unknown as DateValue;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "Your own preset list, for domain periods the defaults do not cover. Keep the labels as plain\nas the shipped ones." }, { "name": "RangeReadonly", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeReadonly = () => (\n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "A range shown but not editable, for a period the reader needs to read back rather than\nchange." }, { "name": "RangeReadonlyWithPresets", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, DEFAULT_RANGE_PRESETS, CalendarBody, CalendarContent, CalendarGrids, CalendarPresets, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const RangeReadonlyWithPresets = () => (\n \n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "The same, with presets rendered but inert — worth seeing, because a live-looking preset that\ndoes nothing is worse than none." }, { "name": "SingleReadonly", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Calendar, CalendarBody, CalendarContent, CalendarGrids, CalendarTrigger } from '@wallarm-org/design-system/Calendar';\nimport { Calendar as CalendarIcon } from '@wallarm-org/design-system/icons';\n\nexport const SingleReadonly = () => (\n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Calendar/Calendar.stories.tsx", "storyTitle": "Inputs Date/Calendar", "description": "A single date shown but not editable." } ] }, { "name": "Card", "description": "Holds one self-contained thing — a metric, an integration, a saved view — in a block you can compare against its neighbours in a grid; reach for `Table` when the same fields repeat down a list, and for a `Heading` when you only mean to section a page. Passing any handler turns the whole card into the target: it becomes focusable and picks up hover and pressed overlays, while clicks on a link or button inside it stay with that control.", "importPath": "@wallarm-org/design-system/Card", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "onClick", "type": "MouseEventHandler | undefined", "required": false }, { "name": "color", "type": "{ primary: string; secondary: string; }", "required": false, "defaultValue": "primary" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "color", "options": [ "primary", "secondary" ], "defaultValue": "primary" }, { "name": "interactive", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "disabled", "options": [ "true", "false" ], "defaultValue": "false" } ], "subComponents": [ { "name": "CardContent", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "CardFooter", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "CardHeader", "props": [ { "name": "asChild", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] }, { "name": "CardTitle", "props": [ { "name": "icon", "type": "ReactNode", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false } ] } ], "examples": [ { "name": "Basic", "code": "import { type MouseEvent, useState } from 'react';\nimport { Badge } from '@wallarm-org/design-system/Badge';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';\n\nexport const Basic = () => {\n // `data-last-click` records which target handled the click. It renders nothing,\n // and it is what the click-isolation e2e asserts on — the story used to prove\n // the same thing by writing to the console.\n const [lastClick, setLastClick] = useState<'card' | 'button' | 'none'>('none');\n\n return (\n {\n onCardClick(e);\n setLastClick('card');\n }}\n data-last-click={lastClick}\n >\n \n Card title\n \n Badge\n \n \n\n Card description\n\n \n ) => {\n onButtonClick(e);\n setLastClick('button');\n }}\n >\n Button\n \n \n \n );\n};", "storyFile": "Card/Card.stories.tsx", "storyTitle": "Data Display/Card", "description": "The full stack — `CardHeader` with a `CardTitle`, `CardContent`, and a `CardFooter`\nfor actions — carrying a handler, so the footer button and the card are two\nseparate targets." }, { "name": "Variants", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const Variants = () => (\n \n \n \n \n Primary card\n \n Badge\n \n \n This is a primary card variant\n \n \n \n \n\n \n \n Secondary card\n \n Badge\n \n \n This is a secondary card variant\n \n \n \n \n \n\n \n \n \n Primary card\n \n Badge\n \n \n This is a primary card variant with onClick event\n \n \n \n \n\n \n \n Secondary card\n \n Badge\n \n \n This is a secondary card variant with onClick event\n \n \n \n \n \n\n \n \n \n Primary card\n \n Badge\n \n \n This is a disabled primary card variant\n \n \n \n \n\n \n \n Secondary card\n \n Badge\n \n \n This is a disabled secondary card variant\n \n \n \n \n \n \n);", "storyFile": "Card/Card.stories.tsx", "storyTitle": "Data Display/Card", "description": "`primary` sits on the page surface and `secondary` on a tinted fill, each shown\nplain, with a handler, and disabled — where the card fades and stops answering\nthe pointer." }, { "name": "VariousContent", "code": "import { Badge } from '@wallarm-org/design-system/Badge';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';\nimport { CodeSnippetActions, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';\nimport { Field, FieldDescription, FieldLabel } from '@wallarm-org/design-system/Field';\nimport { CircleDashed } from '@wallarm-org/design-system/icons';\nimport { Input } from '@wallarm-org/design-system/Input';\nimport { HStack, VStack } from '@wallarm-org/design-system/Stack';\n\nexport const VariousContent = () => (\n \n \n \n \n Card title\n \n Badge\n \n \n \n Card description Very long! Even if it goes to the second line, it won't break anything.\n It works perfectly! Can you see? Amazing yeah?\n \n \n \n \n \n\n \n \n Card title\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n Card title\n \n Badge\n \n \n \n \n Label\n \n Input description\n \n \n \n \n \n \n\n \n \n \n }>Card title\n \n Card description.\n \n\n \n \n }>Card title\n \n \n \n \n);", "storyFile": "Card/Card.stories.tsx", "storyTitle": "Data Display/Card", "description": "What the block tolerates: body copy that wraps, a `CodeSnippet`, a whole `Field`,\na `CardTitle` with an `icon`, and a header standing on its own with nothing under it." } ] }, { "name": "ChainOfThought", "description": "A read-only log of what Wally did while answering — searches, tool calls, its own reasoning — so the user can see how it got there without the steps crowding the answer. Each `ChainOfThoughtStep` is one line: a type icon, a label and an optional right-aligned metric, joined to the next step by a thin connector. A step with children becomes a collapsible trigger, and children can be another `ChainOfThought`, so runs nest as deep as the agent did. The app owns the mapping from step type to icon (see **Type Icons**); the DS only draws the row.", "importPath": "@wallarm-org/design-system/ChainOfThought", "props": [ { "name": "type", "type": "\"a\" | \"i\" | \"1\" | \"A\" | \"I\" | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "simple", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "entered", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "interactive", "options": [ "true", "false" ], "defaultValue": "false" }, { "name": "status", "options": [ "running", "done", "error" ], "defaultValue": "done" } ], "subComponents": [ { "name": "ChainOfThoughtStep", "props": [ { "name": "label", "type": "ReactNode", "required": true, "description": "Row text: 'Searched for ABC', 'Working...', 'Thought for 5s', 'Worked for 3m 45s'." }, { "name": "icon", "type": "ReactNode", "required": false, "description": "16px type icon. Default ``. `null` = Figma \"Simple\" row (no icon cell, no connector).", "defaultValue": "DEFAULT_ICON" }, { "name": "metric", "type": "ReactNode", "required": false, "description": "Right-aligned mono slot = Figma \"Simple-result\"." }, { "name": "status", "type": "\"done\" | \"running\" | \"error\" | undefined", "required": false, "description": "`'running'` shimmers the label (Figma \"Working\"). `'error'` tints the label and icon danger\n(not in Figma yet; pending design review) and prefixes a visually hidden \"Error:\" for screen\nreaders; still word the label so it reads as a failure ('get_attacks failed'). Default `'done'`.\nReflected in the `li`'s `data-status`. A step that mounts as `'running'` gets `data-entered`\nand animates in (and fades its shimmer out on `'done'`); one mounted `'done'` renders static.", "defaultValue": "done" }, { "name": "open", "type": "boolean | undefined", "required": false, "description": "Controlled open state of the nested content." }, { "name": "defaultOpen", "type": "boolean | undefined", "required": false, "description": "Initial open state when uncontrolled. Default `false`.", "defaultValue": "false" }, { "name": "onOpenChange", "type": "((open: boolean) => void) | undefined", "required": false }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [ { "name": "Basic", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Brain, Database, FileText, Search } from '@wallarm-org/design-system/icons';\n\nexport const Basic = () => (\n \n } label='Thought for 5s' />\n } label='Searched for blocked requests' />\n } label='Queried attack events' />\n } label='Read the policy for api.example.com' />\n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "Icon steps joined by connectors; the last step drops its line." }, { "name": "Nested", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Bot, Brain, FilePlus, ListChecks, Search, Wrench } from '@wallarm-org/design-system/icons';\n\nexport const Nested = () => (\n \n } label='Thought for 5s' />\n }\n label='Ran the triage subagent'\n defaultOpen\n data-testid='cot-subagent'\n >\n \n } label='Searched for ABC' />\n } label='Called get_attacks' data-testid='cot-tool'>\n

Returned 42 attacks over the last 24 hours.

\n \n } label='Made a plan' />\n \n \n }\n label='Created a rule draft'\n data-testid='cot-collapsed'\n >\n

Draft rule blocks SQL injection on /api/v1/login.

\n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "Steps with children toggle open; a nested chain can hold its own collapsible steps." }, { "name": "SimpleRows", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\n\nexport const SimpleRows = () => (\n \n \n \n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`icon={null}` gives the Figma \"Simple\" row: no icon cell, no connector, 16px apart." }, { "name": "SimpleResult", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\n\nexport const SimpleResult = () => (\n \n \n \n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`metric` adds a right-aligned mono value — the Figma \"Simple-result\" row." }, { "name": "Working", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Globe, Search } from '@wallarm-org/design-system/icons';\n\nexport const Working = () => (\n \n } label='Searched for ABC' />\n } label='Searching the web...' status='running' />\n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`status='running'` shimmers the label while the step is in progress." }, { "name": "Streaming", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\n\nexport const Streaming = () => {\n const [count, setCount] = useState(1);\n const finished = count > STREAMING_STEPS.length;\n\n const handleClick = () => {\n setCount(count + 1);\n };\n\n return (\n
\n \n {HISTORY_STEPS.map(step => (\n \n ))}\n {STREAMING_STEPS.slice(0, count).map((step, i) => {\n const running = i === count - 1;\n return (\n \n );\n })}\n \n
\n \n {count === STREAMING_STEPS.length ? 'Finish' : 'Next step'}\n \n
\n
\n );\n};", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "A step that mounts as `running` fades in and settles 4px; the previous step's connector grows\ntoward it; on `done` the shimmer fades into the plain label. Steps that mount `done` (history)\nappear instantly. All of it is off under `prefers-reduced-motion`." }, { "name": "ErrorStep", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Plug, Search } from '@wallarm-org/design-system/icons';\n\nexport const ErrorStep = () => (\n \n } label='Searched for ABC' />\n }\n label='get_attacks failed'\n status='error'\n defaultOpen\n data-testid='cot-error'\n >\n

Request failed: 503 Service Unavailable.

\n \n } label='get_rules failed' status='error' />\n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`status='error'` tints the label and the type icon danger, for a step that failed. Word the\nlabel as a failure too (color alone is not enough); put the detail in the step's children.\nNot in Figma yet; pending design review." }, { "name": "WorkedSummary", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Activity, BadgeCheck, Brain, Radar, Terminal } from '@wallarm-org/design-system/icons';\n\nexport const WorkedSummary = () => (\n \n }\n label='Worked for 3m 45s'\n defaultOpen\n data-testid='cot-summary'\n >\n \n } label='Thought for 5s' />\n } label='Ran wallarm-cli status' />\n } label='Scanned 12 hosts' />\n } label='Created a mitigation rule' />\n \n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "The whole run folded under one \"Worked for …\" step with the Activity icon." }, { "name": "RichTextContent", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { Brain } from '@wallarm-org/design-system/icons';\n\nexport const RichTextContent = () => (\n \n } label='Thought for 12s' defaultOpen>\n

\n The user wants to know why requests to{' '}\n {' '}\n were blocked.\n

\n
    \n
  • Check recent attacks on that path.
    • \n
  • Compare them with the active rules.
    • \n
\n

Then suggest the narrowest rule change.

\n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "Nested content can be prose: paragraphs, bullets and inline code." }, { "name": "TypeIcons", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Activity, BadgeCheck, Bot, Brain, CircleDashed, Database, Download, FilePlus, FileText, Filter, GitBranch, Globe, Link, ListChecks, Pencil, Plug, Radar, Search, ShieldAlert, Terminal, Wrench } from '@wallarm-org/design-system/icons';\n\nexport const TypeIcons = () => (\n \n } label='thinking' />\n } label='plan' />\n } label='decision' />\n } label='subagent' />\n } label='tool' />\n } label='command' />\n } label='web search' />\n } label='query' />\n } label='datastore' />\n } label='api' />\n } label='read' />\n } label='fetch' />\n } label='filter' />\n } label='create' />\n } label='edit' />\n } label='cite' />\n } label='threat' />\n } label='scan' />\n } label='pending / default' />\n } label='summary' />\n } label='\"Created\" example' />\n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "The recommended step-type → icon mapping. The app owns it; this is documentation only." }, { "name": "Controlled", "code": "import { useState } from 'react';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Brain } from '@wallarm-org/design-system/icons';\n\nexport const Controlled = () => {\n const [open, setOpen] = useState(false);\n return (\n
\n \n }\n label='Thought for 5s'\n open={open}\n onOpenChange={setOpen}\n >\n

Reasoning goes here.

\n \n \n open: {String(open)}\n
\n );\n};", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`open` + `onOpenChange` drive the step from outside." }, { "name": "Analytics", "code": "import { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Brain } from '@wallarm-org/design-system/icons';\n\nexport const Analytics = () => (\n \n }\n label='Thought for 5s'\n data-analytics-id='COT_STEP_TOGGLE'\n data-analytics-props='{\"type\":\"thinking\"}'\n >\n

Reasoning goes here.

\n \n \n);", "storyFile": "ChainOfThought/ChainOfThought.stories.tsx", "storyTitle": "AI/ChainOfThought", "description": "`data-analytics-*` on a collapsible step lands on the row `\n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "Figma Default (2:42): the \"Ask Wally\" title with History, a More menu, a separator and Close.\nEvery action is a ghost neutral small `Button` with an `aria-label`." }, { "name": "HeaderWithThreadSelect", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, Plus, X } from '@wallarm-org/design-system/icons';\nimport { Select, SelectButton, SelectContent, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner } from '@wallarm-org/design-system/Select';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const HeaderWithThreadSelect = () => (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n
\n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "Figma Variant2 (44:1465): children of `ChatHeaderTitle` follow a \"/\" joint — here a ghost thread\n`Select` — and a New chat action leads the toolbar." }, { "name": "Greeting", "code": "import { type MouseEvent, useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatGreeting, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, X } from '@wallarm-org/design-system/icons';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const Greeting = () => {\n const [picked, setPicked] = useState();\n const handleSuggestionClick = (event: MouseEvent) =>\n setPicked(event.currentTarget.value);\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n {SUGGESTIONS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n {picked && (\n

\n Picked: {picked}\n

\n )}\n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "The empty state (Figma 44:1464): the circle mark and a heading, with Large suggestion pills\ncentered under it, over the `strong` background." }, { "name": "Suggestions", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatFooter, ChatGreeting, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, X } from '@wallarm-org/design-system/icons';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Suggestions = () => (\n \n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n {SUGGESTIONS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n {SUGGESTIONS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n \n \n
\n \n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "Both placements: `footer` (Figma 91:1167) right-aligns Medium pills under a visible label,\n`greeting` (Figma 44:1706) centers Large pills. The pill size follows the placement." }, { "name": "Backgrounds", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, X } from '@wallarm-org/design-system/icons';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { HStack } from '@wallarm-org/design-system/Stack';\n\nexport const Backgrounds = () => (\n \n {BACKGROUNDS.map(background => (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n
\n ))}\n \n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "The three `background` values side by side: `strong` (Figma Main, 12%), `subtle` (Figma Chat,\n5%, the default) and `none`. The mesh is decorative and sits under every part." }, { "name": "Analytics", "code": "import { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';\nimport { X } from '@wallarm-org/design-system/icons';\n\nexport const Analytics = () => (\n
\n \n \n \n \n \n \n \n \n \n \n \n \n {SUGGESTIONS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n \n
\n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "Analytics attributes go on the interactive parts only: `data-analytics-id` on a `ChatSuggestion`\nlands on its `\n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n \n);", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "`ChatTrigger` under `DrawerTrigger asChild`: the drawer owns the open state and `aria-expanded`,\nthe tooltip keeps its anchor through the shared trigger id." }, { "name": "EmptyPanel", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatFooter, ChatGreeting, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, X } from '@wallarm-org/design-system/icons';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const EmptyPanel = () => {\n const [value, setValue] = useState('');\n const handleSubmit = () => setValue('');\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n {SUGGESTIONS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n \n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "The full empty panel: the greeting with Large suggestion pills over the `strong` background,\nand the composer in the footer. A pill click would send its text as the first message." }, { "name": "Conversation", "code": "import { useState } from 'react';\nimport { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatSuggestion, ChatSuggestions } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Brain, Database, Ellipsis, History, Search, ThumbsDown, ThumbsUp, X } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';\n\nexport const Conversation = () => {\n const [value, setValue] = useState('');\n const handleSubmit = () => setValue('');\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n {QUESTION}\n \n 2m ago\n \n \n \n \n \n \n \n \n \n } label='Thought for 5s'>\n

\n Look up blocked requests to /api/login for last night, then group them by source.\n

\n \n } label='Searched for blocked requests' />\n }\n label='Queried attack events'\n metric='1,204'\n />\n \n \n

SQL injection on the login endpoint

\n

\n Wallarm blocked 1,204 SQL injection attempts, almost all against{' '}\n .\n

\n
    \n
  • \n Most came from .\n
    • \n
  • The peak was at 03:00 UTC.
    • \n
  • No request reached the application.
    • \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n 1m ago\n \n \n \n \n \n {FOLLOW_UPS.map((text, index) => (\n \n {text}\n \n ))}\n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "A finished turn: the user's question, then Wally's answer with collapsed reasoning, rendered\nmarkdown and a visible actions row; follow-up suggestions sit above the composer." }, { "name": "Streaming", "code": "import { useState } from 'react';\nimport { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Database, Ellipsis, History, Search, X } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';\n\nexport const Streaming = () => {\n const [value, setValue] = useState('');\n const [isRunning, setIsRunning] = useState(true);\n const handleSubmit = () => setValue('');\n const handleStop = () => setIsRunning(false);\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n {QUESTION}\n \n 2m ago\n \n \n \n \n \n \n \n \n \n } label='Searched for blocked requests' />\n }\n label={isRunning ? 'Querying attack events...' : 'Stopped'}\n status={isRunning ? 'running' : 'done'}\n />\n \n \n

Wallarm blocked 1,204 SQL injection attempts, almost all against

\n \n \n \n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "A reply in flight: `ChatBody` and the message carry `aria-busy`, the running step shimmers,\nand the submit is Stop. Stop (or Esc in the textarea) ends the run in this demo." }, { "name": "ApprovalDocked", "code": "import { useState } from 'react';\nimport { ApprovalCard, ApprovalCardActions, ApprovalCardContent, type ApprovalCardStatus } from '@wallarm-org/design-system/ApprovalCard';\nimport { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, Search, ShieldBan, X } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';\n\nexport const ApprovalDocked = () => {\n const [value, setValue] = useState('');\n const [status, setStatus] = useState('pending');\n const pending = status === 'pending';\n const handleSubmit = () => setValue('');\n const handleApprove = () => setStatus('approved');\n const handleReject = () => setStatus('rejected');\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n {QUESTION}\n \n 2m ago\n \n \n \n \n \n \n \n \n \n } label='Searched for blocked requests' />\n }\n label='Proposed a denylist entry'\n status={pending ? 'running' : 'done'}\n />\n \n {!pending && (\n \n

\n {status === 'approved'\n ? 'Done. 203.0.113.0/24 is now denied on all applications.'\n : 'Okay, I left the denylist unchanged.'}\n

\n \n )}\n \n \n \n \n \n

\n Add to the denylist on all\n applications\n

\n \n \n \n \n Reject\n \n \n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "Human-in-the-loop: the pending `ApprovalCard` is docked in `ChatFooter` above the composer\nwhile the run waits. Allow or Reject resolves it in place (so its live region and focus work)\nand the answer continues." }, { "name": "ApprovalResolved", "code": "import { useState } from 'react';\nimport { ApprovalCard } from '@wallarm-org/design-system/ApprovalCard';\nimport { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, Search, ShieldBan, X } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';\n\nexport const ApprovalResolved = () => {\n const [value, setValue] = useState('');\n const handleSubmit = () => setValue('');\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n {QUESTION}\n \n 2m ago\n \n \n \n \n \n \n \n \n \n } label='Searched for blocked requests' />\n } label='Proposed a denylist entry' />\n \n \n

Done. 203.0.113.0/24 is now denied on all applications.

\n \n \n \n \n {/* Content and actions render only while pending; a resolved card shows just its status row. */}\n \n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "After the decision the docked card collapses to a one-line status and the answer completes." }, { "name": "Permissions", "code": "import { useState } from 'react';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { Chat, ChatBody, ChatFooter, ChatGreeting, ChatHeader, ChatHeaderActions, ChatHeaderTitle } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Ellipsis, History, X } from '@wallarm-org/design-system/icons';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const Permissions = () => {\n const [value, setValue] = useState('');\n const [allowed, setAllowed] = useState>({\n search_attacks: true,\n get_api_inventory: true,\n propose_add_to_denylist: false,\n });\n const handleSubmit = () => setValue('');\n const handlePermissionChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) =>\n setAllowed(prev => ({ ...prev, [name]: checked }));\n\n return (\n
\n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {TOOLS.map(tool => (\n \n ))}\n \n \n \n \n \n \n
\n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "The per-conversation tool permissions sit inside the composer, between textarea and submit." }, { "name": "InDrawer", "code": "import { useState } from 'react';\nimport { AssistantMessage, AssistantMessageContent } from '@wallarm-org/design-system/AssistantMessage';\nimport { Button } from '@wallarm-org/design-system/Button';\nimport { ChainOfThought, ChainOfThoughtStep } from '@wallarm-org/design-system/ChainOfThought';\nimport { Chat, ChatBody, ChatFooter, ChatHeader, ChatHeaderActions, ChatHeaderTitle, ChatTrigger } from '@wallarm-org/design-system/Chat';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';\nimport { Copyable, CopyableIcon } from '@wallarm-org/design-system/Copyable';\nimport { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@wallarm-org/design-system/Drawer';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';\nimport { Brain, Database, Ellipsis, History, Search, ThumbsDown, ThumbsUp, X } from '@wallarm-org/design-system/icons';\nimport { MessageAction, MessageActions, MessageTimestamp } from '@wallarm-org/design-system/MessageActions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\nimport { UserMessage, UserMessageBubble } from '@wallarm-org/design-system/UserMessage';\n\nexport const InDrawer = () => {\n const [value, setValue] = useState('');\n const [isRunning, setIsRunning] = useState(true);\n const handleSubmit = () => setValue('');\n const handleStop = () => setIsRunning(false);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Rename chat\n Delete chat\n \n \n \n \n \n \n \n \n \n \n {QUESTION}\n \n 2m ago\n \n \n \n \n \n \n \n \n \n } label='Thought for 5s'>\n

\n Look up blocked requests to /api/login for last night, then group them by\n source.\n

\n \n } label='Searched for blocked requests' />\n }\n label='Queried attack events'\n metric='1,204'\n />\n \n \n

SQL injection on the login endpoint

\n

\n Wallarm blocked 1,204 SQL injection attempts, almost all against{' '}\n .\n

\n
    \n
  • \n Most came from .\n
    • \n
  • The peak was at 03:00 UTC.
    • \n
  • No request reached the application.
    • \n
\n \n {!isRunning && (\n \n \n \n \n \n \n \n \n \n \n \n \n 1m ago\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n );\n};", "storyFile": "Chat/Chat.stories.tsx", "storyTitle": "AI/Chat", "description": "The real host: `ChatTrigger` opens a 480px right-hand `Drawer` holding the conversation, and\nClose is a `DrawerClose`. Esc in the textarea while running stops the reply instead of closing\nthe drawer; ChatInput handles that itself, so the host needs no `onEscapeKeyDown`." } ] }, { "name": "ChatInput", "description": "The composer at the bottom of the Wally chat: a growing textarea where Enter sends and Shift+Enter adds a line, with the send button turning into Stop while a reply streams. It is controlled — the app owns the draft and the running state — and any actions such as `ChatPermissions` go between the textarea and `ChatInputSubmit`.", "importPath": "@wallarm-org/design-system/ChatInput", "props": [ { "name": "value", "type": "string", "required": true, "description": "Controlled only — the app owns the draft." }, { "name": "onValueChange", "type": "(value: string) => void", "required": true }, { "name": "onSubmit", "type": "(value: string) => void", "required": true, "description": "Receives `value.trim()`. Not called when the value is empty, while `isRunning`, or when\n`disabled`. The form's native submit is prevented and focus returns to the textarea." }, { "name": "onStop", "type": "(() => void) | undefined", "required": false, "description": "Stop-button click, and Esc in the textarea while `isRunning`.\nInside a Drawer/Dialog that Esc stops the run and doesn't close the layer; no host\n`onEscapeKeyDown` is needed. While running, a consumer `onKeyDown` can't cancel the Esc\nstop with `preventDefault` (the textarea has already claimed the key from the layer).\nWithout `onStop`, Esc is left to the layer. A consumer popup anchored to the textarea\n(mention/autocomplete) keeps Esc while the textarea has `aria-expanded='true'`." }, { "name": "isRunning", "type": "boolean | undefined", "required": false, "description": "Swaps Send for Stop and blocks submit. CopilotKit: `agent.isRunning`.", "defaultValue": "false" }, { "name": "disabled", "type": "boolean | undefined", "required": false, "defaultValue": "false" }, { "name": "context", "type": "ReactNode", "required": false, "description": "Attached-context chips, shown in a bar behind the box. Nothing to render (`null`, `false`, `[]`) hides the bar." }, { "name": "disclaimer", "type": "ReactNode", "required": false, "description": "Line under the box. `null`/`false` hides it.", "defaultValue": "DEFAULT_DISCLAIMER" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "target", "type": "string | undefined", "required": false }, { "name": "autoComplete", "type": "string | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [ { "name": "withContext", "options": [ "false", "true" ], "defaultValue": "false" }, { "name": "disabled", "options": [ "true" ] } ], "subComponents": [ { "name": "ChatInputSubmit", "props": [ { "name": "sendLabel", "type": "string | undefined", "required": false, "description": "Accessible name while idle.", "defaultValue": "Send" }, { "name": "stopLabel", "type": "string | undefined", "required": false, "description": "Accessible name and tooltip while `isRunning`.", "defaultValue": "Stop response" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] }, { "name": "ChatInputTextarea", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "autoComplete", "type": "string | undefined", "required": false }, { "name": "maxLength", "type": "number | undefined", "required": false }, { "name": "minLength", "type": "number | undefined", "required": false }, { "name": "placeholder", "type": "string | undefined", "required": false }, { "name": "readOnly", "type": "boolean | undefined", "required": false }, { "name": "required", "type": "boolean | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [ { "name": "Default", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const Default = () => {\n const [value, setValue] = useState('');\n const [isRunning, setIsRunning] = useState(false);\n\n const handleSubmit = () => {\n setValue('');\n setIsRunning(true);\n };\n\n const handleStop = () => {\n setIsRunning(false);\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "Empty and ready: Send stays disabled until there is something other than whitespace to send.\nThe app owns the draft: sending starts a \"response\", Stop or Esc ends it." }, { "name": "Typing", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const Typing = () => {\n const [value, setValue] = useState(\n 'Why was 203.0.113.42 blocked yesterday?\\nShow the attacks it sent\\nand the rule that matched them.',\n );\n const [isRunning, setIsRunning] = useState(false);\n\n const handleSubmit = () => {\n setValue('');\n setIsRunning(true);\n };\n\n const handleStop = () => {\n setIsRunning(false);\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "A multi-line draft — the textarea grows with its content up to eight lines, then scrolls." }, { "name": "Streaming", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const Streaming = () => {\n const [value, setValue] = useState('');\n const [isRunning, setIsRunning] = useState(true);\n\n const handleSubmit = () => {\n setValue('');\n setIsRunning(true);\n };\n\n const handleStop = () => {\n setIsRunning(false);\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "While a reply streams the button becomes Stop; its tooltip mentions that Esc in the textarea does the same." }, { "name": "Disabled", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const Disabled = () => {\n const [value, setValue] = useState('Draft kept');\n\n const handleSubmit = () => {\n setValue('');\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "Disabled as a whole, e.g. while the assistant is unavailable." }, { "name": "WithContext", "code": "import { type MouseEvent, useState } from 'react';\nimport { Badge } from '@wallarm-org/design-system/Badge';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { Quote } from '@wallarm-org/design-system/icons';\nimport { TagClose } from '@wallarm-org/design-system/Tag';\n\nexport const WithContext = () => {\n const [value, setValue] = useState('');\n const [chips, setChips] = useState(['Attacks', 'Incidents']);\n\n const handleContextRemove = (event: MouseEvent) => {\n const chip = event.currentTarget.value;\n setChips(prev => prev.filter(item => item !== chip));\n };\n\n const handleSubmit = () => {\n setValue('');\n };\n\n return (\n
\n (\n \n \n {chip}\n \n \n ))}\n >\n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "Attached context sits in a blue bar behind the box; pass `context` only when there are chips." }, { "name": "WithSettings", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\nimport { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';\n\nexport const WithSettings = () => {\n const [value, setValue] = useState('');\n const [allowed, setAllowed] = useState({ search_attacks: true, propose_add_to_denylist: true });\n\n const handlePermissionChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {\n setAllowed(prev => ({ ...prev, [name]: checked }));\n };\n\n const handleSubmit = () => {\n setValue('');\n };\n\n return (\n
\n
\n \n \n \n \n \n {Object.entries(allowed).map(([name, checked]) => (\n \n ))}\n \n \n \n \n
\n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "`ChatPermissions` goes between the textarea and the submit, on the second row." }, { "name": "NoDisclaimer", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const NoDisclaimer = () => {\n const [value, setValue] = useState('');\n\n const handleSubmit = () => {\n setValue('');\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "`disclaimer={null}` drops the line under the box." }, { "name": "Analytics", "code": "import { useState } from 'react';\nimport { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';\n\nexport const Analytics = () => {\n const [value, setValue] = useState('');\n\n const handleSubmit = () => {\n setValue('');\n };\n\n return (\n
\n \n \n \n \n
\n );\n};", "storyFile": "ChatInput/ChatInput.stories.tsx", "storyTitle": "AI/ChatInput", "description": "`data-analytics-*` goes straight on `ChatInputTextarea` and `ChatInputSubmit`, which render the real nodes." } ] }, { "name": "ChatPermissions", "description": "The settings button in the chat composer that lists which Wally tools may run without asking first in this conversation. Each row is a switch and takes effect the moment it is flipped — there is no Save, and the popover stays open so several tools can be changed in one go. The app owns the list and its order: enabled tools first, then a `Separator` and the disabled ones.", "importPath": "@wallarm-org/design-system/ChatPermissions", "props": [ { "name": "open", "type": "boolean | undefined", "required": false }, { "name": "onOpenChange", "type": "((open: boolean) => void) | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ], "variants": [], "subComponents": [ { "name": "ChatPermissionsContent", "props": [ { "name": "label", "type": "ReactNode", "required": false, "description": "Heading above the tool rows; also names the dialog. Pass `null`, `false` or `''` to hide it.", "defaultValue": "Always allowed in this conversation" }, { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "minHeight", "type": "PopoverSizeDimension | undefined", "required": false }, { "name": "maxHeight", "type": "PopoverSizeDimension | undefined", "required": false } ] }, { "name": "ChatPermissionsItem", "props": [ { "name": "name", "type": "string", "required": true, "description": "Machine name of the tool, e.g. `propose_add_to_denylist`; echoed back in `onCheckedChange`." }, { "name": "title", "type": "ReactNode", "required": true, "description": "Visible tool name." }, { "name": "description", "type": "ReactNode", "required": false }, { "name": "onCheckedChange", "type": "complex", "required": false }, { "name": "label", "type": "string | undefined", "required": false, "description": "Specifies the localized strings that identifies the accessibility elements and their states" }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false, "description": "Whether the switch is disabled." }, { "name": "value", "type": "string | number | undefined", "required": false, "description": "The value of switch input. Useful for form submission." }, { "name": "asChild", "type": "boolean | undefined", "required": false, "description": "Use the provided child element as the default rendered element, combining their props and behavior." }, { "name": "data-testid", "type": "string | undefined", "required": false }, { "name": "ids", "type": "ElementIds | undefined", "required": false, "description": "The ids of the elements in the switch. Useful for composition." }, { "name": "readOnly", "type": "boolean | undefined", "required": false, "description": "Whether the switch is read-only" }, { "name": "required", "type": "boolean | undefined", "required": false, "description": "If `true`, the switch input is marked as required," }, { "name": "htmlFor", "type": "string | undefined", "required": false }, { "name": "invalid", "type": "boolean | undefined", "required": false, "description": "If `true`, the switch is marked as invalid." }, { "name": "checked", "type": "boolean | undefined", "required": false, "description": "The controlled checked state of the switch" }, { "name": "a11yMode", "type": "boolean | undefined", "required": false } ] }, { "name": "ChatPermissionsTrigger", "props": [ { "name": "title", "type": "string | undefined", "required": false }, { "name": "defaultChecked", "type": "boolean | undefined", "required": false }, { "name": "defaultValue", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "autoFocus", "type": "boolean | undefined", "required": false }, { "name": "id", "type": "string | undefined", "required": false }, { "name": "tabIndex", "type": "number | undefined", "required": false }, { "name": "rel", "type": "string | undefined", "required": false }, { "name": "onChange", "type": "ChangeEventHandler | undefined", "required": false }, { "name": "type", "type": "\"button\" | \"submit\" | \"reset\" | undefined", "required": false }, { "name": "disabled", "type": "boolean | undefined", "required": false }, { "name": "name", "type": "string | undefined", "required": false }, { "name": "value", "type": "string | number | readonly string[] | undefined", "required": false }, { "name": "data-testid", "type": "string | undefined", "required": false } ] } ], "examples": [ { "name": "AllOn", "code": "import { useState } from 'react';\nimport { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const AllOn = () => {\n const [allowed, setAllowed] = useState>({\n propose_add_to_denylist: true,\n search_attacks: true,\n get_api_inventory: true,\n create_rule: true,\n });\n const enabled = TOOLS.filter(tool => allowed[tool.name]);\n const disabled = TOOLS.filter(tool => !allowed[tool.name]);\n\n const handleCheckedChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {\n setAllowed(prev => ({ ...prev, [name]: checked }));\n };\n\n return (\n
\n \n \n \n {enabled.map(tool => (\n \n ))}\n {enabled.length > 0 && disabled.length > 0 && }\n {disabled.map(tool => (\n \n ))}\n \n \n
\n );\n};", "storyFile": "ChatPermissions/ChatPermissions.stories.tsx", "storyTitle": "AI/ChatPermissions", "description": "Every tool is allowed. Open the popover with the settings button; the tooltip names it until then." }, { "name": "SomeOff", "code": "import { useState } from 'react';\nimport { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';\nimport { Separator } from '@wallarm-org/design-system/Separator';\n\nexport const SomeOff = () => {\n const [allowed, setAllowed] = useState>({\n propose_add_to_denylist: true,\n search_attacks: true,\n get_api_inventory: false,\n create_rule: false,\n });\n const enabled = TOOLS.filter(tool => allowed[tool.name]);\n const disabled = TOOLS.filter(tool => !allowed[tool.name]);\n\n const handleCheckedChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {\n setAllowed(prev => ({ ...prev, [name]: checked }));\n };\n\n return (\n
\n \n \n \n {enabled.map(tool => (\n \n ))}\n {enabled.length > 0 && disabled.length > 0 && }\n {disabled.map(tool => (\n \n ))}\n \n \n
\n );\n};", "storyFile": "ChatPermissions/ChatPermissions.stories.tsx", "storyTitle": "AI/ChatPermissions", "description": "Two tools switched off sit below a separator. The order is decided by the app, not the component." }, { "name": "Analytics", "code": "import { useState } from 'react';\nimport { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';\n\nexport const Analytics = () => {\n const [checked, setChecked] = useState(true);\n\n const handleCheckedChange = (details: ChatPermissionsItemCheckedChangeDetails) => {\n setChecked(details.checked);\n };\n\n return (\n
\n \n \n \n \n \n \n
\n );\n};", "storyFile": "ChatPermissions/ChatPermissions.stories.tsx", "storyTitle": "AI/ChatPermissions", "description": "`data-analytics-id` lands on the real trigger `