@gravity-ui/aikit 0.6.0 → 1.0.1

package/dist/components/atoms/ActionButton/__stories__/ActionButton.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ActionButton } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof ActionButton>;
+export declare const Playground: Story;
+export declare const Default: Story;
+export declare const WithoutTooltip: Story;

package/dist/components/atoms/ActionButton/__stories__/ActionButton.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy, Pencil } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { ActionButton } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ActionButton',
+    component: ActionButton,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Story, {}) })),
+];
+const mockOnClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Button clicked');
+};
+export const Playground = {
+    args: {
+        tooltipTitle: 'Copy',
+        view: 'flat',
+        size: 'm',
+        children: _jsx(Icon, { data: Copy, size: 16 }),
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};
+export const Default = {
+    args: {
+        tooltipTitle: 'Edit',
+        children: _jsx(Icon, { data: Pencil, size: 16 }),
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};
+export const WithoutTooltip = {
+    args: {
+        children: _jsx(Icon, { data: Copy, size: 16 }),
+        view: 'outlined',
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/atoms/Alert/__stories__/Alert.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { AlertProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<AlertProps>;
+export declare const Variant: StoryObj<AlertProps>;
+export declare const Action: StoryFn<AlertProps>;
+export declare const LongText: StoryFn<AlertProps>;
+export declare const CustomIcon: StoryFn<AlertProps>;
+export declare const CollapsibleWithLongContent: StoryFn<AlertProps>;

package/dist/components/atoms/Alert/__stories__/Alert.stories.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Arrows3RotateLeft } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { Alert } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/Alert',
+    component: Alert,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args)) }));
+Playground.args = {
+    text: 'Alert message',
+    variant: 'default',
+};
+export const Variant = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Default", children: _jsx(Alert, Object.assign({}, args, { variant: "default" })) }), _jsx(ShowcaseItem, { title: "Info", children: _jsx(Alert, Object.assign({}, args, { variant: "info" })) }), _jsx(ShowcaseItem, { title: "Warning", children: _jsx(Alert, Object.assign({}, args, { variant: "warning" })) }), _jsx(ShowcaseItem, { title: "Error", children: _jsx(Alert, Object.assign({}, args, { variant: "error" })) })] })),
+    decorators: defaultDecorators,
+    args: { text: 'Alert message' },
+};
+export const Action = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { button: { content: 'Retry', onClick: () => ({}) } })) }));
+Action.args = {
+    text: 'Alert message',
+    variant: 'default',
+};
+export const LongText = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { button: { content: 'Retry', onClick: () => ({}) } })) }));
+LongText.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+    variant: 'warning',
+};
+export const CustomIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { icon: _jsx(Icon, { data: Arrows3RotateLeft, size: 20 }) })) }));
+CustomIcon.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+    variant: 'default',
+    button: { content: 'Retry', onClick: () => ({}) },
+};
+export const CollapsibleWithLongContent = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(Alert, Object.assign({}, args, { text: "Error occurred", initialExpanded: true, variant: "error", button: { content: 'Retry', onClick: () => ({}) }, content: _jsxs("div", { children: [_jsx("p", { children: "Full error log:" }), _jsx("pre", { style: {
+                        margin: 0,
+                        fontSize: '12px',
+                        maxHeight: '200px',
+                        overflow: 'auto',
+                    }, children: `[2024-01-15 10:23:45] ERROR: Connection failed
+[2024-01-15 10:23:45] DEBUG: Attempting to reconnect...
+[2024-01-15 10:23:46] ERROR: Reconnection failed
+[2024-01-15 10:23:46] DEBUG: Retrying in 5 seconds...
+[2024-01-15 10:23:51] ERROR: Connection timeout
+[2024-01-15 10:23:51] DEBUG: Stack trace:
+    at ConnectionManager.connect (connection.js:45)
+    at NetworkHandler.handleRequest (network.js:123)
+    at API.request (api.js:67)
+    at UserService.fetchData (user.js:23)
+    at Component.loadUser (component.js:10)` })] }) })) }));

package/dist/components/atoms/ChatDate/__stories__/ChatDate.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { ChatDateProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ChatDateProps>;
+export declare const DateString: StoryFn<ChatDateProps>;
+export declare const DateObject: StoryFn<ChatDateProps>;
+export declare const Timestamp: StoryFn<ChatDateProps>;
+export declare const WithTime: StoryFn<ChatDateProps>;
+export declare const CustomFormat: StoryFn<ChatDateProps>;
+export declare const CustomFormatWithTime: StoryFn<ChatDateProps>;
+export declare const WithCustomStyle: StoryFn<ChatDateProps>;
+export declare const DifferentFormats: StoryObj<ChatDateProps>;
+export declare const DifferentDateTypes: StoryObj<ChatDateProps>;
+export declare const RecentDates: StoryObj<ChatDateProps>;
+export declare const InvalidDate: StoryFn<ChatDateProps>;

package/dist/components/atoms/ChatDate/__stories__/ChatDate.stories.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatDate } from '..';
+import { RELATIVE_DATE_THRESHOLD } from '../../../../constants';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ChatDate',
+    component: ChatDate,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        date: {
+            control: 'text',
+            description: 'Date value in string, Date, or number (timestamp) format',
+        },
+        format: {
+            control: 'text',
+            description: 'Custom format string (dayjs format)',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+        style: {
+            control: 'object',
+            description: 'Inline styles for the component',
+        },
+        locale: {
+            control: 'text',
+            description: 'Locale for date formatting',
+        },
+        relative: {
+            control: 'boolean',
+            description: 'Display relative dates (today, yesterday, two days ago, etc.)',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args)) }));
+Playground.args = {
+    date: new Date().toISOString(),
+};
+export const DateString = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }));
+export const DateObject = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: new Date(2024, 0, 15, 10, 30) })) }));
+export const Timestamp = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: 1705312200000 })) }));
+export const WithTime = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", showTime: true })) }));
+export const CustomFormat = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY" })) }));
+export const CustomFormatWithTime = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY HH:mm", showTime: true })) }));
+export const WithCustomStyle = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", style: { color: 'red', fontWeight: 'bold', fontSize: '18px' } })) }));
+export const DifferentFormats = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Default", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }), _jsx(ShowcaseItem, { title: "DD/MM/YYYY", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY" })) }), _jsx(ShowcaseItem, { title: "MM-DD-YYYY", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "MM-DD-YYYY" })) }), _jsx(ShowcaseItem, { title: "YYYY/MM/DD HH-mm", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "YYYY/MM/DD HH-mm", showTime: true })) })] })),
+    decorators: defaultDecorators,
+};
+export const DifferentDateTypes = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "ISO String", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }), _jsx(ShowcaseItem, { title: "Date Object", children: _jsx(ChatDate, Object.assign({}, args, { date: new Date(2024, 0, 15, 10, 30) })) }), _jsx(ShowcaseItem, { title: "Timestamp", children: _jsx(ChatDate, Object.assign({}, args, { date: 1705312200000 })) })] })),
+    decorators: defaultDecorators,
+};
+export const RecentDates = {
+    render: (args) => {
+        const today = new Date('2025-11-11T10:19:59.971Z');
+        const getTitle = (daysAgo) => {
+            return daysAgo ? `[ + ${daysAgo} ]` : `[ 0 ]`;
+        };
+        return (_jsx(_Fragment, { children: Array.from({ length: RELATIVE_DATE_THRESHOLD + 1 }, (_, i) => {
+                const date = new Date(today);
+                date.setDate(date.getDate() - i);
+                return (_jsx(ShowcaseItem, { title: getTitle(i), children: _jsx(ChatDate, Object.assign({}, args, { date: date, relative: true })) }, i));
+            }) }));
+    },
+    decorators: defaultDecorators,
+};
+export const InvalidDate = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "invalid-date-string" })) }));

package/dist/components/atoms/ContextIndicator/__stories__/ContextIndicator.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { type ContextIndicatorProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ContextIndicatorProps>;
+export declare const Empty: StoryFn<ContextIndicatorProps>;
+export declare const Quarter: StoryFn<ContextIndicatorProps>;
+export declare const Half: StoryFn<ContextIndicatorProps>;
+export declare const ThreeQuarters: StoryFn<ContextIndicatorProps>;
+export declare const Full: StoryFn<ContextIndicatorProps>;
+export declare const WithNumber: StoryFn<ContextIndicatorProps>;
+export declare const WithNumberHalf: StoryFn<ContextIndicatorProps>;
+export declare const AllStates: StoryFn<ContextIndicatorProps>;
+export declare const VerticalOrientation: StoryFn<ContextIndicatorProps>;
+export declare const VerticalWithNumber: StoryFn<ContextIndicatorProps>;
+export declare const AllReversedVariants: StoryFn<ContextIndicatorProps>;
+export declare const GrayColors: StoryFn<ContextIndicatorProps>;

package/dist/components/atoms/ContextIndicator/__stories__/ContextIndicator.stories.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextIndicator } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ContextIndicator',
+    component: ContextIndicator,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'radio',
+            options: ['number', 'percent'],
+            description: 'Whether to use direct percentage or calculate from numbers',
+        },
+        usedContext: {
+            control: 'number',
+            description: 'Current context usage (percentage or absolute number)',
+        },
+        maxContext: {
+            control: 'number',
+            description: 'Maximum context available (only for type="number")',
+            if: { arg: 'type', eq: 'number' },
+        },
+        orientation: {
+            control: 'radio',
+            options: ['horizontal', 'vertical'],
+            description: 'Layout orientation of the indicator',
+        },
+        reversed: {
+            control: 'boolean',
+            description: 'Reverses the order of value and progress bar',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args)) }));
+Playground.args = {
+    type: 'number',
+    usedContext: 50,
+    maxContext: 100,
+};
+export const Empty = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }));
+export const Quarter = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }));
+export const Half = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }));
+export const ThreeQuarters = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }));
+export const Full = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) }));
+export const WithNumber = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 50, maxContext: 100 })) }));
+export const WithNumberHalf = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 500, maxContext: 1000 })) }));
+export const AllStates = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) })] }) }));
+export const VerticalOrientation = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-end' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, orientation: "vertical" }))] }) }));
+export const VerticalWithNumber = (args) => (_jsx(ContentWrapper, { children: _jsx("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-end' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 500, maxContext: 1000, orientation: "vertical" })) }) }));
+export const AllReversedVariants = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '16px' }, children: "Horizontal Reversed" }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, reversed: true }))] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '16px' }, children: "Vertical Reversed" }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-start' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, orientation: "vertical", reversed: true }))] })] })] }) }));
+export const GrayColors = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: {
+            display: 'flex',
+            gap: '16px',
+            alignItems: 'center',
+            // Override all progress colors to gray
+            ['--g-aikit-ci-color-progress-1']: '#999999',
+            ['--g-aikit-ci-color-progress-2']: '#999999',
+            ['--g-aikit-ci-color-progress-3']: '#999999',
+        }, children: [_jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) })] }) }));

package/dist/components/atoms/ContextItem/__stories__/ContextItem.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { ContextItem } from '..';
+type ContextItemProps = React.ComponentProps<typeof ContextItem>;
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ContextItemProps>;
+export declare const WithoutRemoveButton: StoryFn<ContextItemProps>;

package/dist/components/atoms/ContextItem/__stories__/ContextItem.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextItem } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ContextItem',
+    component: ContextItem,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Content of label',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextItem, Object.assign({}, args)) }));
+Playground.args = {
+    content: 'My context',
+    onClick: () => { },
+};
+export const WithoutRemoveButton = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextItem, Object.assign({}, args)) }));
+WithoutRemoveButton.args = {
+    content: 'My context without remove',
+};

package/dist/components/atoms/DiffStat/__stories__/DiffStat.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { DiffStat } from '..';
+type DiffStatProps = React.ComponentProps<typeof DiffStat>;
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<DiffStatProps>;
+export declare const Lengths: StoryObj<typeof DiffStat>;

package/dist/components/atoms/DiffStat/__stories__/DiffStat.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DiffStat } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/DiffStat',
+    component: DiffStat,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        added: {
+            control: 'number',
+            description: 'Number of added lines',
+        },
+        deleted: {
+            control: 'number',
+            description: 'Number of deleted lines',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(DiffStat, Object.assign({}, args)) }));
+Playground.args = {
+    added: 10,
+    deleted: 5,
+};
+export const Lengths = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Digits", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 1 })), _jsx(DiffStat, Object.assign({}, args, { added: 1, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 1, deleted: 1 })), _jsx(DiffStat, Object.assign({}, args, { added: 5, deleted: 3 })), _jsx(DiffStat, Object.assign({}, args, { added: 9, deleted: 9 }))] }) }), _jsx(ShowcaseItem, { title: "Tens", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 10, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 10 })), _jsx(DiffStat, Object.assign({}, args, { added: 10, deleted: 10 })), _jsx(DiffStat, Object.assign({}, args, { added: 25, deleted: 15 })), _jsx(DiffStat, Object.assign({}, args, { added: 50, deleted: 30 })), _jsx(DiffStat, Object.assign({}, args, { added: 99, deleted: 99 }))] }) }), _jsx(ShowcaseItem, { title: "Hundreds", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 100, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 100 })), _jsx(DiffStat, Object.assign({}, args, { added: 100, deleted: 100 })), _jsx(DiffStat, Object.assign({}, args, { added: 250, deleted: 150 })), _jsx(DiffStat, Object.assign({}, args, { added: 500, deleted: 300 })), _jsx(DiffStat, Object.assign({}, args, { added: 999, deleted: 999 }))] }) }), _jsx(ShowcaseItem, { title: "Thousands", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 1000, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 1000 })), _jsx(DiffStat, Object.assign({}, args, { added: 1000, deleted: 1000 })), _jsx(DiffStat, Object.assign({}, args, { added: 2500, deleted: 1500 })), _jsx(DiffStat, Object.assign({}, args, { added: 5000, deleted: 3000 })), _jsx(DiffStat, Object.assign({}, args, { added: 12345, deleted: 6789 }))] }) })] })),
+    decorators: defaultDecorators,
+};

package/dist/components/atoms/Disclaimer/__stories__/Disclaimer.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { DisclaimerProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<DisclaimerProps>;
+export declare const WithText: StoryFn<DisclaimerProps>;
+export declare const WithChildren: StoryFn<DisclaimerProps>;
+export declare const WithTextAndChildren: StoryFn<DisclaimerProps>;
+export declare const WithCaptionVariant: StoryFn<DisclaimerProps>;
+export declare const WithBody2Variant: StoryFn<DisclaimerProps>;
+export declare const WithSubheaderVariant: StoryFn<DisclaimerProps>;
+export declare const AllVariants: StoryFn<DisclaimerProps>;

package/dist/components/atoms/Disclaimer/__stories__/Disclaimer.stories.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclaimer } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/Disclaimer',
+    component: Disclaimer,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Disclaimer text',
+        },
+        variant: {
+            control: 'select',
+            options: [
+                'body-1',
+                'body-2',
+                'body-3',
+                'body-short',
+                'caption-1',
+                'caption-2',
+                'subheader-1',
+                'subheader-2',
+                'subheader-3',
+                'header-1',
+                'header-2',
+                'display-1',
+                'display-2',
+                'display-3',
+                'display-4',
+                'code-1',
+                'code-2',
+                'code-3',
+                'code-inline-1',
+                'code-inline-2',
+                'code-inline-3',
+                'inherit',
+            ],
+            description: 'Text variant for typography styling',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args)) }));
+Playground.args = { text: 'This is a disclaimer text' };
+export const WithText = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "This is an important disclaimer message" })) }));
+export const WithChildren = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { children: _jsx("span", { children: "Custom content goes here" }) })) }));
+export const WithTextAndChildren = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "Disclaimer text", children: _jsx("span", { children: "Additional content" }) })) }));
+export const WithCaptionVariant = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "Small disclaimer with caption-2 variant", variant: "caption-2" })) }));
+export const WithBody2Variant = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "Larger disclaimer with body-2 variant", variant: "body-2" })) }));
+export const WithSubheaderVariant = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "Prominent disclaimer with subheader-1 variant", variant: "subheader-1" })) }));
+export const AllVariants = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(Disclaimer, Object.assign({}, args, { text: "caption-1: Smallest text", variant: "caption-1" })), _jsx(Disclaimer, Object.assign({}, args, { text: "caption-2: Small text", variant: "caption-2" })), _jsx(Disclaimer, Object.assign({}, args, { text: "body-1: Default body text", variant: "body-1" })), _jsx(Disclaimer, Object.assign({}, args, { text: "body-2: Larger body text", variant: "body-2" })), _jsx(Disclaimer, Object.assign({}, args, { text: "body-3: Large body text", variant: "body-3" })), _jsx(Disclaimer, Object.assign({}, args, { text: "subheader-1: Subheader text", variant: "subheader-1" })), _jsx(Disclaimer, Object.assign({}, args, { text: "subheader-2: Larger subheader", variant: "subheader-2" })), _jsx(Disclaimer, Object.assign({}, args, { text: "header-1: Header text", variant: "header-1" }))] }) }));

package/dist/components/atoms/Loader/__stories__/Loader.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { LoaderProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<LoaderProps>;
+export declare const Loading: StoryFn<LoaderProps>;
+export declare const Streaming: StoryFn<LoaderProps>;
+export declare const Size: StoryObj<LoaderProps>;

package/dist/components/atoms/Loader/__stories__/Loader.stories.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/Loader',
+    component: Loader,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        view: {
+            control: 'radio',
+            options: ['streaming', 'loading'],
+            description: 'View',
+        },
+        size: {
+            control: 'radio',
+            options: ['xs', 's', 'm'],
+            description: 'Size of element',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Loader, Object.assign({}, args)) }));
+Playground.args = { view: 'streaming', size: 's' };
+export const Loading = (args) => (_jsx(ContentWrapper, { children: _jsx(Loader, Object.assign({}, args, { view: "loading" })) }));
+export const Streaming = (args) => (_jsx(ContentWrapper, { children: _jsx(Loader, Object.assign({}, args, { view: "streaming" })) }));
+export const Size = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Size xs", children: _jsx(Loader, Object.assign({}, args, { size: "xs" })) }), _jsx(ShowcaseItem, { title: "Size s", children: _jsx(Loader, Object.assign({}, args, { size: "s" })) }), _jsx(ShowcaseItem, { title: "Size m", children: _jsx(Loader, Object.assign({}, args, { size: "m" })) })] })),
+    decorators: defaultDecorators,
+    args: { view: 'streaming' },
+};

package/dist/components/atoms/MarkdownRenderer/__stories__/MarkdownRenderer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { MarkdownRendererProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<MarkdownRendererProps>;
+export declare const WithTransformOptions: StoryFn<MarkdownRendererProps>;

package/dist/components/atoms/MarkdownRenderer/__stories__/MarkdownRenderer.stories.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MarkdownRenderer } from '..';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/MarkdownRenderer',
+    component: MarkdownRenderer,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'YFM markdown content to render',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => _jsx(MarkdownRenderer, Object.assign({}, args));
+Playground.args = {
+    content: '# Hello World\n\nThis is **bold** text and this is *italic* text.',
+};
+export const WithTransformOptions = () => {
+    const customPlugin = ((md) => {
+        const defaultRender = md.renderer.rules.strong_open ||
+            function (tokens, idx, options, _env, self) {
+                return self.renderToken(tokens, idx, options);
+            };
+        // eslint-disable-next-line no-param-reassign
+        md.renderer.rules.strong_open = function (tokens, idx, options, _env, self) {
+            const token = tokens[idx];
+            token.attrSet('style', 'color: #ff6b6b; background-color: #fff5f5; padding: 2px 4px; border-radius: 3px;');
+            return defaultRender(tokens, idx, options, _env, self);
+        };
+    });
+    const transformOptions = {
+        plugins: [customPlugin],
+    };
+    const content = `# Custom Plugin Example\n\nThis is **bold text** with custom styling applied via plugin.`;
+    return _jsx(MarkdownRenderer, { content: content, transformOptions: transformOptions });
+};