@itcase/ui-web 1.9.103 → 1.9.105

package/dist/types/components/Code/Code.interface.d.ts

@@ -5,6 +5,7 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { LabelProps } from 'src/components/Label/Label.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
 type CodeAppearanceProps = {
     borderColor?: BorderColorProps;
     fill?: FillProps;
@@ -52,4 +53,6 @@ type CodeAppearance = CodeConfig['appearance'];
 type CodeAppearanceStyle = AppearanceRecord<AppearanceStyleKey, CodeAppearanceProps, 'inputBorderColor' | 'inputFill'>;
 type CodeAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<CodeAppearanceProps, 'shape'>>>>;
 type CodeAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, CodeAppearanceProps, 'inputSize' | 'inputTextSize' | 'size'>;
-export type { CodeAppearance, CodeAppearanceShape, CodeAppearanceSize, CodeAppearanceStyle, CodeConfig, CodeProps, };
+type CodeAppearanceKey = NonNullable<CodeProps['appearance']>;
+type CodeGalleryStory = ComponentGalleryArgs & Pick<CodeProps, 'inputCount' | 'inputPlaceholder' | 'isDisabled' | 'isSkeleton'>;
+export type { CodeAppearance, CodeAppearanceKey, CodeAppearanceShape, CodeAppearanceSize, CodeAppearanceStyle, CodeConfig, CodeGalleryStory, CodeProps, };

package/dist/types/components/Code/__test__/CodeTest.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Code } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Code;
+    args: {
+        appearance: "defaultPrimary sizeL solid rounded";
+        dataTestId: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Skeleton: Story;
+export declare const InputValues: Story;

package/dist/types/components/Code/__test__/CodeTest.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Code } from '..';
+const meta = {
+    title: 'Atoms / Code / __test__',
+    component: Code,
+    args: {
+        appearance: 'defaultPrimary sizeL solid rounded',
+        dataTestId: 'codeTestId',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Skeleton = {
+    play: async ({ args, canvas, step }) => {
+        await step('Code renders with skeleton class', async () => {
+            const code = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(code).toBeInTheDocument();
+            const codeItems = code.querySelectorAll('.code__input');
+            for (const codeItem of Array.from(codeItems)) {
+                await storybookTest.expect(codeItem).toHaveClass('skeleton');
+            }
+        });
+    },
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => _jsx(Code, { ...args }),
+};
+export const InputValues = {
+    play: async ({ args, canvas, step }) => {
+        await step('Code renders with skeleton class', async () => {
+            const code = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(code).toBeInTheDocument();
+            const codeItems = code.querySelectorAll('.code__input');
+            const codeItemsList = Array.from(codeItems);
+            for (let index = 0; index < codeItemsList.length; index++) {
+                await storybookTest.userEvent.type(codeItemsList[index], String(index + 1));
+            }
+        });
+    },
+    render: (args) => _jsx(Code, { ...args }),
+};

package/dist/types/components/Code/appearance/codeShape.d.ts

@@ -6,16 +6,16 @@ declare const codeAppearanceShape: {
         shape: "rounded";
     };
     roundedXL: {
-        shape: "rounded";
+        shape: "roundedXL";
     };
     roundedL: {
-        shape: "rounded";
+        shape: "roundedL";
     };
     roundedM: {
-        shape: "rounded";
+        shape: "roundedM";
     };
     roundedS: {
-        shape: "rounded";
+        shape: "roundedS";
     };
 };
 export { codeAppearanceShape };

package/dist/types/components/Code/appearance/codeShape.js

@@ -6,16 +6,16 @@ const codeAppearanceShape = {
         shape: 'rounded',
     },
     roundedXL: {
-        shape: 'rounded',
+        shape: 'roundedXL',
     },
     roundedL: {
-        shape: 'rounded',
+        shape: 'roundedL',
     },
     roundedM: {
-        shape: 'rounded',
+        shape: 'roundedM',
     },
     roundedS: {
-        shape: 'rounded',
+        shape: 'roundedS',
     },
 };
 export { codeAppearanceShape };

package/dist/types/components/Code/stories/CodeDefault.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Code;
     args: {
-        appearance: "defaultPrimary sizeM";
+        appearance: "defaultPrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Code/stories/CodeDefault.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Code / Default',
     component: Code,
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Code/stories/CodeDemo.stories.d.ts

@@ -1,17 +1,6 @@
-import type { StoryObj } from '@storybook/react-vite';
-import { Code } from '../Code';
-declare const meta: {
-    title: string;
-    component: typeof Code;
-    args: {
-        inputCount: number;
-        inputPlaceholder: string;
-    };
-    parameters: {
-        layout: string;
-    };
-};
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { CodeGalleryStory } from '../Code.interface';
+declare const meta: Meta<CodeGalleryStory>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<CodeGalleryStory>;
 export declare const Demo: Story;
-export declare const Skeleton: Story;

package/dist/types/components/Code/stories/CodeDemo.stories.js

@@ -1,31 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createComponentGallery } from 'src/storybook/createComponentGallery';
+import { codeAppearanceDefault } from '../appearance/codeDefault';
+import { codeAppearanceDisabled } from '../appearance/codeDisabled';
+import { codeAppearanceError } from '../appearance/codeError';
+import { codeAppearanceRequire } from '../appearance/codeRequire';
+import { codeAppearanceShape } from '../appearance/codeShape';
+import { codeAppearanceSize } from '../appearance/codeSize';
+import { codeAppearanceStyle } from '../appearance/codeStyle';
+import { codeAppearanceSuccess } from '../appearance/codeSuccess';
 import { Code } from '../Code';
+const gallery = createComponentGallery({
+    size: codeAppearanceSize,
+    appearanceGroups: {
+        default: codeAppearanceDefault,
+        disabled: codeAppearanceDisabled,
+        error: codeAppearanceError,
+        require: codeAppearanceRequire,
+        success: codeAppearanceSuccess,
+    },
+    shape: codeAppearanceShape,
+    style: codeAppearanceStyle,
+});
 const meta = {
     title: 'Atoms / Code',
     component: Code,
     args: {
+        appearance: 'default sizeM solid rounded',
+        tier: 'Primary',
+        style: 'solid',
+        shape: 'rounded',
         inputCount: 4,
         inputPlaceholder: '0',
+        isDisabled: false,
+        isSkeleton: false,
     },
     parameters: {
         layout: 'centered',
     },
+    argTypes: {
+        appearance: gallery.argTypes.appearance,
+        tier: gallery.argTypes.tier,
+        style: gallery.argTypes.style,
+        shape: gallery.argTypes.shape,
+    },
 };
 export default meta;
 export const Demo = {
-    args: {
-        appearance: 'defaultPrimary sizeL',
-    },
-    render: (args) => {
-        return _jsx(Code, { ...args });
-    },
-};
-export const Skeleton = {
-    args: {
-        appearance: 'defaultPrimary sizeL',
-        isSkeleton: true,
-    },
-    render: (args) => {
-        return _jsx(Code, { ...args });
-    },
+    render: (args) => gallery.render(args, ({ appearance, args: storyArgs }) => (_jsx(Code, { appearance: appearance, inputCount: storyArgs.inputCount, inputPlaceholder: storyArgs.inputPlaceholder, isDisabled: storyArgs.isDisabled, isSkeleton: storyArgs.isSkeleton }))),
 };

package/dist/types/components/Code/stories/CodeDisabled.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Code;
     args: {
-        appearance: "disabledPrimary sizeM";
+        appearance: "disabledPrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Code/stories/CodeDisabled.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Code / Disabled',
     component: Code,
     args: {
-        appearance: 'disabledPrimary sizeM',
+        appearance: 'disabledPrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Code/stories/CodeError.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Code;
     args: {
-        appearance: "errorPrimary sizeM";
+        appearance: "errorPrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Code/stories/CodeError.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Code / Error',
     component: Code,
     args: {
-        appearance: 'errorPrimary sizeM',
+        appearance: 'errorPrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Code/stories/CodeRequire.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Code;
     args: {
-        appearance: "requirePrimary sizeM";
+        appearance: "requirePrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Code/stories/CodeRequire.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Code / Require',
     component: Code,
     args: {
-        appearance: 'requirePrimary sizeM',
+        appearance: 'requirePrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/Code/stories/CodeSize.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const SizeL = {
     args: {
-        appearance: 'defaultPrimary sizeL',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });
@@ -21,7 +21,7 @@ export const SizeL = {
 };
 export const SizeM = {
     args: {
-        appearance: 'defaultPrimary sizeM',
+        appearance: 'defaultPrimary sizeM solid rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });

package/dist/types/components/Code/stories/CodeStyle.stories.js

@@ -13,7 +13,7 @@ const meta = {
 export default meta;
 export const Solid = {
     args: {
-        appearance: 'defaultPrimary sizeL solid',
+        appearance: 'defaultPrimary sizeL solid rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });
@@ -21,7 +21,7 @@ export const Solid = {
 };
 export const Outlined = {
     args: {
-        appearance: 'defaultPrimary sizeL outlined',
+        appearance: 'defaultPrimary sizeL outlined rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });
@@ -29,7 +29,7 @@ export const Outlined = {
 };
 export const Ghost = {
     args: {
-        appearance: 'defaultPrimary sizeL ghost',
+        appearance: 'defaultPrimary sizeL ghost rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });
@@ -37,7 +37,7 @@ export const Ghost = {
 };
 export const Full = {
     args: {
-        appearance: 'defaultPrimary sizeL full',
+        appearance: 'defaultPrimary sizeL full rounded',
     },
     render: (args) => {
         return _jsx(Code, { ...args });

package/dist/types/components/Code/stories/CodeSuccess.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     title: string;
     component: typeof Code;
     args: {
-        appearance: "successPrimary sizeM";
+        appearance: "successPrimary sizeM solid rounded";
     };
     parameters: {
         layout: string;

package/dist/types/components/Code/stories/CodeSuccess.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'Atoms / Code / Success',
     component: Code,
     args: {
-        appearance: 'successPrimary sizeM',
+        appearance: 'successPrimary sizeM solid rounded',
     },
     parameters: {
         layout: 'centered',

package/dist/types/components/CookiesWarning/CookiesWarning.appearance.d.ts

@@ -5,7 +5,7 @@ declare const cookiesWarningAppearance: {
         messageTextColor: "surfaceTextPrimary";
         messageTextSize: "s";
         elevation: "8";
-        buttonAppearance: "accentPrimary sizeXL";
+        buttonAppearance: "accentPrimary sizeXL solid rounded";
         buttonWidth: "fill";
     };
 };

package/dist/types/components/CookiesWarning/__test__/CookiesWarningTest.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { CookiesWarning } from '..';
+declare const meta: {
+    title: string;
+    beforeEach: () => Promise<void>;
+    component: typeof CookiesWarning;
+    args: {
+        appearance: "defaultPrimary";
+        dataTestId: string;
+        message: string;
+        buttonLabel: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Children: Story;
+export declare const Close: Story;

package/dist/types/components/CookiesWarning/__test__/CookiesWarningTest.stories.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Cookies from 'js-cookie';
+import * as storybookTest from 'storybook/test';
+import { CookiesWarning } from '..';
+const meta = {
+    title: 'Molecules / Cookies Warning / __test__',
+    beforeEach: async () => {
+        Cookies.remove('cookies-warning');
+    },
+    component: CookiesWarning,
+    args: {
+        appearance: 'defaultPrimary',
+        dataTestId: 'cookiesWarningTestId',
+        message: 'Мы используем файлы cookie для улучшения взаимодействия с пользователем.',
+        buttonLabel: 'Согласен',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const Children = {
+    play: async ({ args, canvas, step }) => {
+        await step('CookiesWarning renders with children', async () => {
+            const cookiesWarning = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(cookiesWarning).toBeInTheDocument();
+        });
+    },
+    render: (args) => _jsx(CookiesWarning, { ...args }),
+};
+export const Close = {
+    play: async ({ args, canvas, step }) => {
+        await step('CookiesWarning renders with children', async () => {
+            const cookiesWarning = canvas.getByTestId(args.dataTestId);
+            await storybookTest.expect(cookiesWarning).toBeInTheDocument();
+            const button = canvas.getByRole('button');
+            await step('Click via userEvent', async () => {
+                await storybookTest.userEvent.click(button);
+            });
+            await step('onClick called once and CookiesWarning disappears', async () => {
+                await storybookTest
+                    .expect(cookiesWarning)
+                    .toHaveClass('cookies-warning_state_hidden');
+            });
+        });
+    },
+    render: (args) => _jsx(CookiesWarning, { ...args }),
+};

package/dist/types/components/CookiesWarning/appearance/cookiesWarningDefault.d.ts

@@ -5,7 +5,7 @@ declare const cookiesWarningAppearanceDefault: {
         messageTextColor: "surfaceTextPrimary";
         messageTextSize: "s";
         elevation: "8";
-        buttonAppearance: "accentPrimary sizeXL";
+        buttonAppearance: "accentPrimary sizeXL solid rounded";
         buttonWidth: "fill";
     };
 };

package/dist/types/components/CookiesWarning/appearance/cookiesWarningDefault.js

@@ -5,7 +5,7 @@ const cookiesWarningAppearanceDefault = {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 's',
         elevation: '8',
-        buttonAppearance: 'accentPrimary sizeXL',
+        buttonAppearance: 'accentPrimary sizeXL solid rounded',
         buttonWidth: 'fill',
     },
 };

package/dist/types/components/Dadata/__test__/DadataTest.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Dadata } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Dadata;
+    args: {
+        dataTestId: string;
+        inputProps: {
+            placeholder: string;
+        };
+        meta: {
+            error: {
+                key: string;
+            };
+            active: false;
+            touched: false;
+        };
+        token: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InputValues: Story;

package/dist/types/components/Dadata/__test__/DadataTest.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as storybookTest from 'storybook/test';
+import { Dadata } from '..';
+const API_KEY = '631e9ca014c643358378e2bae8c9a0e0aa23ad4f';
+const meta = {
+    title: 'Molecules / Dadata / __test__',
+    component: Dadata,
+    args: {
+        dataTestId: 'dadataTestId',
+        inputProps: {
+            placeholder: 'Введите название организации',
+        },
+        meta: {
+            error: {
+                key: 'error',
+            },
+            active: false,
+            touched: false,
+        },
+        token: API_KEY,
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['test'],
+};
+export default meta;
+export const InputValues = {
+    play: async ({ canvas, step }) => {
+        const dadataInput = canvas.getByRole('textbox');
+        await step('Dadata renders', async () => {
+            await storybookTest.expect(dadataInput).toBeInTheDocument();
+        });
+        await step('Dadata get a value in input', async () => {
+            await storybookTest.userEvent.type(dadataInput, 'ООО');
+        });
+    },
+    render: (args) => _jsx(Dadata, { ...args }),
+};

package/dist/types/components/DatePeriod/DatePeriod.appearance.d.ts

@@ -8,24 +8,24 @@ declare const datePeriodAppearance: {
         shape: "rounded";
     };
     roundedXL: {
-        chipsShape: "rounded";
-        selectShape: "rounded";
-        shape: "rounded";
+        chipsShape: "roundedXL";
+        selectShape: "roundedXL";
+        shape: "roundedXL";
     };
     roundedL: {
-        chipsShape: "rounded";
-        selectShape: "rounded";
-        shape: "rounded";
+        chipsShape: "roundedL";
+        selectShape: "roundedL";
+        shape: "roundedL";
     };
     roundedM: {
-        chipsShape: "rounded";
-        selectShape: "rounded";
-        shape: "rounded";
+        chipsShape: "roundedM";
+        selectShape: "roundedM";
+        shape: "roundedM";
     };
     roundedS: {
-        chipsShape: "rounded";
-        selectShape: "rounded";
-        shape: "rounded";
+        chipsShape: "roundedS";
+        selectShape: "roundedS";
+        shape: "roundedS";
     };
     sizeL: {
         size: "l";
@@ -50,17 +50,17 @@ declare const datePeriodAppearance: {
     };
     surfacePrimary: {
         fill: "surfacePrimary";
-        chipsAppearance: "surfacePrimary ghost";
-        datePickerAppearance: "surfacePrimary";
-        datePickerInputAppearance: "defaultPrimary";
-        selectAppearance: "defaultPrimary solid";
+        chipsAppearance: "surfacePrimary sizeM ghost rounded";
+        datePickerAppearance: "surfacePrimary sizeM solid rounded";
+        datePickerInputAppearance: "defaultPrimary sizeM solid rounded";
+        selectAppearance: "defaultPrimary sizeM solid rounded";
     };
     surfaceSecondary: {
         fill: "surfaceSecondary";
-        chipsAppearance: "surfacePrimary ghost";
-        datePickerAppearance: "surfacePrimary";
-        datePickerInputAppearance: "defaultPrimary";
-        selectAppearance: "defaultPrimary solid";
+        chipsAppearance: "surfacePrimary sizeM ghost rounded";
+        datePickerAppearance: "surfacePrimary sizeM solid rounded";
+        datePickerInputAppearance: "defaultPrimary sizeM solid rounded";
+        selectAppearance: "defaultPrimary sizeM solid rounded";
     };
 };
 export { datePeriodAppearance };

package/dist/types/components/DatePeriod/__test__/DatePeriodTest.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { DatePeriod } from '../DatePeriod';
+declare const meta: {
+    title: string;
+    component: typeof DatePeriod;
+    args: {
+        appearance: "surfaceSecondary sizeL solid rounded";
+        dataTestId: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ChangeChips: Story;
+export declare const ChangeDate: Story;