@gravity-ui/aikit 0.6.0 → 1.0.1

package/dist/components/molecules/PromptInputFooter/__stories__/PromptInputFooter.stories.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromptInputFooter } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputFooter',
+    component: PromptInputFooter,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Submit clicked'),
+            state: 'enabled',
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithAllIcons = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Submit clicked'),
+            state: 'enabled',
+        },
+        showSettings: true,
+        showAttachment: true,
+        showMicrophone: true,
+        // eslint-disable-next-line no-console
+        onSettingsClick: () => console.log('Settings clicked'),
+        // eslint-disable-next-line no-console
+        onAttachmentClick: () => console.log('Attachment clicked'),
+        // eslint-disable-next-line no-console
+        onMicrophoneClick: () => console.log('Microphone clicked'),
+    },
+    decorators: defaultDecorators,
+};
+export const DisabledButton = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Submit clicked'),
+            state: 'disabled',
+        },
+        showSettings: true,
+        showAttachment: true,
+        showMicrophone: true,
+    },
+    decorators: defaultDecorators,
+};
+export const LoadingButton = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Submit clicked'),
+            state: 'loading',
+        },
+        showSettings: true,
+        showAttachment: true,
+        showMicrophone: true,
+    },
+    decorators: defaultDecorators,
+};
+export const CancelableButton = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Cancel clicked'),
+            state: 'cancelable',
+        },
+        showSettings: true,
+        showAttachment: true,
+        showMicrophone: true,
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomContent = {
+    args: {
+        submitButton: {
+            // eslint-disable-next-line no-console
+            onClick: async () => console.log('Submit clicked'),
+            state: 'enabled',
+        },
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { PromptInputHeader } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof PromptInputHeader>;
+export declare const Playground: Story;
+export declare const WithContextItems: Story;
+export declare const WithSingleContextItem: Story;
+export declare const WithManyContextItems: Story;
+export declare const WithContextItemsAndIndicator: Story;
+export declare const WithContextIndicator: Story;
+export declare const WithContextIndicatorNumber: Story;
+export declare const WithCustomContent: Story;
+export declare const WithContextItemsWithoutRemove: Story;
+export declare const WithMixedContextItems: Story;

package/dist/components/molecules/PromptInputHeader/__stories__/PromptInputHeader.stories.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PromptInputHeader } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputHeader',
+    component: PromptInputHeader,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {},
+    decorators: defaultDecorators,
+};
+export const WithContextItems = {
+    render: (args) => {
+        const [items, setItems] = useState([
+            { id: '1', content: 'file.tsx', onRemove: () => { } },
+            { id: '2', content: 'component.tsx', onRemove: () => { } },
+            { id: '3', content: 'utils.ts', onRemove: () => { } },
+        ]);
+        const handleRemove = (id) => {
+            setItems(items.filter((item) => item.id !== id));
+        };
+        return (_jsx(PromptInputHeader, Object.assign({}, args, { contextItems: items.map((item) => (Object.assign(Object.assign({}, item), { onRemove: () => handleRemove(item.id) }))) })));
+    },
+    decorators: defaultDecorators,
+};
+export const WithSingleContextItem = {
+    args: {
+        contextItems: [
+            {
+                id: '1',
+                content: 'README.md',
+                onRemove: () => {
+                    // Handle remove
+                },
+            },
+        ],
+    },
+    decorators: defaultDecorators,
+};
+export const WithManyContextItems = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file1.tsx', onRemove: () => { } },
+            { id: '2', content: 'file2.tsx', onRemove: () => { } },
+            { id: '3', content: 'file3.tsx', onRemove: () => { } },
+            { id: '4', content: 'file4.tsx', onRemove: () => { } },
+            { id: '5', content: 'file5.tsx', onRemove: () => { } },
+        ],
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextItemsAndIndicator = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file.tsx', onRemove: () => { } },
+            { id: '2', content: 'component.tsx', onRemove: () => { } },
+        ],
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'percent',
+            usedContext: 75,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextIndicator = {
+    args: {
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'percent',
+            usedContext: 24,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextIndicatorNumber = {
+    args: {
+        showContextIndicator: true,
+        contextIndicatorProps: {
+            type: 'number',
+            usedContext: 2400,
+            maxContext: 10000,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomContent = {
+    args: {
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextItemsWithoutRemove = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file.tsx' },
+            { id: '2', content: 'component.tsx' },
+            { id: '3', content: 'utils.ts' },
+        ],
+    },
+    decorators: defaultDecorators,
+};
+export const WithMixedContextItems = {
+    args: {
+        contextItems: [
+            { id: '1', content: 'file.tsx', onRemove: () => { } },
+            { id: '2', content: 'component.tsx' },
+            { id: '3', content: 'utils.ts', onRemove: () => { } },
+        ],
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.d.ts

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

package/dist/components/molecules/PromptInputPanel/__stories__/PromptInputPanel.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { PromptInputPanel } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import { ActionButton } from '../../../atoms/ActionButton';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/PromptInputPanel',
+    component: PromptInputPanel,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {
+        children: 'This is the panel content',
+    },
+    decorators: defaultDecorators,
+};
+export const WithSwapArea = {
+    args: {
+        children: _jsx(SwapArea, {}),
+    },
+    decorators: defaultDecorators,
+};
+export const WithContentAndCloseButton = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 }, children: _jsx("span", { children: "Upgrade your plan to Business to unlock all features" }) }), _jsx(Button, { view: "action", size: "m", children: "Upgrade" }), _jsx(ActionButton, { view: "flat", size: "m", onClick: () => { }, children: _jsx(Icon, { data: Xmark, size: 16 }) })] })),
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/molecules/Suggestions/__stories__/Suggestions.stories.d.ts

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { SuggestionsProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<SuggestionsProps>;
+export declare const ListLayout: StoryFn<SuggestionsProps>;
+export declare const ListLayoutWithContainer: StoryFn<SuggestionsProps>;
+export declare const WrapTextListLayoutWithContainer: StoryFn<SuggestionsProps>;
+export declare const GridLayout: StoryFn<SuggestionsProps>;
+export declare const GridLayoutWithContainer: StoryFn<SuggestionsProps>;
+export declare const WithoutIds: StoryFn<SuggestionsProps>;
+export declare const SingleItem: StoryFn<SuggestionsProps>;
+export declare const TextAlignLeft: StoryFn<SuggestionsProps>;
+export declare const TextAlignCenter: StoryFn<SuggestionsProps>;
+export declare const TextAlignRight: StoryFn<SuggestionsProps>;
+export declare const WithLeftIcon: StoryFn<SuggestionsProps>;
+export declare const WithRightIcon: StoryFn<SuggestionsProps>;
+export declare const WithMixedIcons: StoryFn<SuggestionsProps>;
+export declare const IconsWithContainer: StoryFn<SuggestionsProps>;
+export declare const WithIconsInGridLayout: StoryFn<SuggestionsProps>;
+export declare const WithTitle: StoryFn<SuggestionsProps>;
+export declare const WithTitleAndGridLayout: StoryFn<SuggestionsProps>;

package/dist/components/molecules/Suggestions/__stories__/Suggestions.stories.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suggestions } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/Suggestions',
+    component: Suggestions,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of suggestion items to display',
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Callback function called when a suggestion is clicked',
+        },
+        title: {
+            control: 'text',
+            description: 'Title to display above suggestions',
+        },
+        layout: {
+            control: 'select',
+            options: ['grid', 'list'],
+            description: 'Layout orientation: grid for horizontal, list for vertical',
+        },
+        textAlign: {
+            control: 'select',
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment inside buttons',
+        },
+        wrapText: {
+            control: 'boolean',
+            description: 'Enable text wrapping inside buttons instead of ellipsis',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args)) }));
+Playground.args = {
+    items: [
+        { id: '1', title: 'First suggestion' },
+        { id: '2', title: 'Second suggestion' },
+        { id: '3', title: 'Third suggestion' },
+    ],
+    onClick: () => {
+        // onClick handler
+    },
+    layout: 'list',
+};
+export const ListLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion' },
+            { id: '2', title: 'Another one suggestion' },
+            { id: '3', title: 'Looooooong suggestion for testing' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const ListLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion' },
+            { id: '2', title: 'Another one suggestion' },
+            { id: '3', title: 'Looooooong suggestion for testing' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WrapTextListLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "400px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            {
+                id: '1',
+                title: 'This is a short.',
+            },
+            {
+                id: '2',
+                title: 'This is a long suggestion text generated to be exactly 256 characters long for testing component behavior. It fills up space with enough repetition and verbosity to ensure that you can clearly see where truncation or overflow might appear.',
+            },
+            {
+                id: '3',
+                title: 'Another extra long suggestion exactly 256 characters in length. Used to test how well the UI handles longer entries and maintains design consistency.',
+            },
+        ], layout: "list", wrapText: true, onClick: () => {
+            // onClick handler
+        } })) }));
+export const GridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Option 1' },
+            { id: '2', title: 'Option 2' },
+            { id: '3', title: 'Option 3' },
+            { id: '4', title: 'Option 4' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const GridLayoutWithContainer = (args) => (_jsx(ContentWrapper, { width: "300px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Option 1' },
+            { id: '2', title: 'Option 2' },
+            { id: '3', title: 'Option 3' },
+            { id: '4', title: 'Option 4' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithoutIds = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ title: 'First item' }, { title: 'Second item' }, { title: 'Third item' }], onClick: () => {
+            // onClick handler
+        } })) }));
+export const SingleItem = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [{ id: '1', title: 'Only one suggestion' }], onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignLeft = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Left aligned text' },
+            { id: '2', title: 'Another left aligned suggestion' },
+        ], textAlign: "left", onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignCenter = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Center aligned text' },
+            { id: '2', title: 'Another centered suggestion' },
+        ], textAlign: "center", onClick: () => {
+            // onClick handler
+        } })) }));
+export const TextAlignRight = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Right aligned text' },
+            { id: '2', title: 'Another right aligned suggestion' },
+        ], textAlign: "right", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithLeftIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Previous page', icon: 'left' },
+            { id: '2', title: 'Go back', icon: 'left' },
+            { id: '3', title: 'Return to start', icon: 'left' },
+        ], onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithRightIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Next page', icon: 'right' },
+            { id: '2', title: 'Continue', icon: 'right' },
+            { id: '3', title: 'Go forward', icon: 'right' },
+        ], onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithMixedIcons = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Previous', icon: 'left' },
+            { id: '2', title: 'No action' },
+            { id: '3', title: 'Next', icon: 'right' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const IconsWithContainer = (args) => (_jsx(ContentWrapper, { width: "200px", children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Example suggestion', icon: 'right' },
+            { id: '2', title: 'Another one suggestion', icon: 'right' },
+            { id: '3', title: 'Looooooong suggestion for testing', icon: 'right' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithIconsInGridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { items: [
+            { id: '1', title: 'Back', icon: 'left' },
+            { id: '2', title: 'Home' },
+            { id: '3', title: 'Settings' },
+            { id: '4', title: 'Forward', icon: 'right' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithTitle = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { title: "Try asking about:", items: [
+            { id: '1', title: 'What is AI?' },
+            { id: '2', title: 'How does machine learning work?' },
+            { id: '3', title: 'What are neural networks?' },
+        ], layout: "list", onClick: () => {
+            // onClick handler
+        } })) }));
+export const WithTitleAndGridLayout = (args) => (_jsx(ContentWrapper, { children: _jsx(Suggestions, Object.assign({}, args, { title: "Popular topics", items: [
+            { id: '1', title: 'Getting started' },
+            { id: '2', title: 'Documentation' },
+            { id: '3', title: 'API Reference' },
+            { id: '4', title: 'Examples' },
+        ], layout: "grid", onClick: () => {
+            // onClick handler
+        } })) }));

package/dist/components/molecules/Tabs/__stories__/Tabs.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type TabsProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<TabsProps>;
+export declare const Basic: StoryObj<TabsProps>;
+export declare const WithIcons: StoryObj<TabsProps>;
+export declare const WithStyle: StoryObj<TabsProps>;
+export declare const MaxWidth: StoryObj<TabsProps>;

package/dist/components/molecules/Tabs/__stories__/Tabs.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { At, Envelope, Gear } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { Tabs } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/Tabs',
+    component: Tabs,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of tab items',
+        },
+        activeId: {
+            control: 'text',
+            description: 'ID of the currently active tab',
+        },
+        allowDelete: {
+            control: 'boolean',
+            description: 'Whether to show delete buttons',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        styles: {
+            control: 'object',
+            description: 'Additional CSS properties',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+const basicItems = [
+    { id: '1', title: 'Chat name 1' },
+    { id: '2', title: 'Chat name 2' },
+    { id: '3', title: 'Chat name 3' },
+    { id: '4', title: 'Chat name 4' },
+];
+const itemsWithIcons = [
+    { id: '1', title: 'Chat name 1', icon: _jsx(Icon, { data: At, size: 16 }) },
+    { id: '2', title: 'Chat name 2', icon: _jsx(Icon, { data: Envelope, size: 16 }) },
+    { id: '3', title: 'Chat name 3', icon: _jsx(Icon, { data: Gear, size: 16 }) },
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Tabs, Object.assign({}, args)) }));
+Playground.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};
+export const Basic = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Basic Tabs", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+Basic.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};
+export const WithIcons = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Tabs with Icons", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+WithIcons.args = {
+    items: itemsWithIcons,
+    activeId: '1',
+    allowDelete: true,
+};
+export const WithStyle = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Tabs with Style", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+WithStyle.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+    style: {
+        '--g-color-base-info-light': '#ff9100',
+        '--g-color-base-info-light-hover': '#aa9100',
+        '--g-color-text-info-heavy': '#ffffff',
+        '--g-color-base-simple-hover': '#aa9100',
+        '--g-color-text-complementary': '#ff9100',
+        '--g-color-line-generic': '#ff9100',
+    },
+};
+export const MaxWidth = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Max width (200px)", children: _jsxs("div", { style: { maxWidth: '200px', border: '1px solid lightgray' }, children: [_jsx("h1", { style: { paddingInline: '10px' }, children: "Lorem ipsum" }), _jsx(Tabs, Object.assign({}, args)), _jsx("p", { style: { paddingInline: '10px' }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur commodi natus dolor repellendus sit, similique aliquam, quia ad hic quam porro nobis a? Cumque ratione est nostrum exercitationem velit." })] }) })),
+    decorators: defaultDecorators,
+};
+MaxWidth.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};

package/dist/components/molecules/ToolFooter/__stories__/ToolFooter.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { ToolFooterProps } from 'src/types';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolFooterProps>;
+export declare const ConfirmationState: StoryObj<ToolFooterProps>;
+export declare const WaitingState: StoryObj<ToolFooterProps>;

package/dist/components/molecules/ToolFooter/__stories__/ToolFooter.stories.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolFooter } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/ToolFooter',
+    component: ToolFooter,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Status message to display',
+        },
+        showLoader: {
+            control: 'boolean',
+            description: 'Whether to show loading indicator',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+const rejectAction = {
+    label: 'Reject',
+    onClick: () => alert('Rejected'),
+    view: 'outlined',
+};
+const acceptAction = {
+    label: 'Accept',
+    onClick: () => alert('Accepted'),
+    view: 'action',
+};
+const cancelAction = {
+    label: 'Cancel',
+    onClick: () => alert('Cancelled'),
+    view: 'outlined',
+};
+const defaultActions = [rejectAction, acceptAction];
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args)) }));
+Playground.args = {
+    content: 'Awaiting confirmation',
+    actions: defaultActions,
+    showLoader: true,
+};
+export const ConfirmationState = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Confirmation State", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args, { content: "Awaiting confirmation", actions: defaultActions })) }) })),
+    decorators: defaultDecorators,
+};
+export const WaitingState = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Waiting State", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args, { content: "Awaiting form submission", actions: [cancelAction] })) }) })),
+    decorators: defaultDecorators,
+};