@salutejs/sdds-cs 0.318.1-canary.2039.15822369887.0 → 0.318.1-canary.2043.15849605311.0

package/emotion/es/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,170 +0,0 @@
-import type { ComponentProps } from 'react';
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconPlasma } from '@salutejs/plasma-icons';
-
-import { Autocomplete } from './Autocomplete';
-
-const views = ['default', 'negative'];
-
-const suggestions = [
-    { label: 'Алексей Смирнов' },
-    { label: 'Екатерина Иванова' },
-    { label: 'Дмитрий Петров' },
-    { label: 'Ольга Васильева' },
-    { label: 'Сергей Сидоров' },
-    { label: 'Мария Кузнецова' },
-    { label: 'Андрей Попов' },
-    { label: 'Анна Николаева' },
-    { label: 'Иван Федоров' },
-    { label: 'Наталья Морозова' },
-    { label: 'Михаил Павлов' },
-    { label: 'Елена Романова' },
-    { label: 'Владимир Киселев' },
-    { label: 'Татьяна Захарова' },
-    { label: 'Николай Семенов' },
-    { label: 'Юлия Белова' },
-    { label: 'Александр Гусев' },
-    { label: 'Оксана Яковлева' },
-    { label: 'Игорь Егорова' },
-    { label: 'Вера Тихомирова' },
-    { label: 'Артем Григорьев' },
-    { label: 'Евгения Козлова' },
-    { label: 'Максим Лебедев' },
-    { label: 'Виктория Калашникова' },
-    { label: 'Константин Абрамов' },
-    { label: 'Светлана Новикова' },
-    { label: 'Юрий Волков' },
-    { label: 'Валентина Воробьева' },
-    { label: 'Павел Сергеев' },
-    { label: 'Людмила Виноградова' },
-    { label: 'Антон Соловьев' },
-    { label: 'Маргарита Цветкова' },
-    { label: 'Роман Трофимов' },
-    { label: 'Лариса Зайцева' },
-    { label: 'Евгений Никитин' },
-    { label: 'Галина Михайлова' },
-    { label: 'Владислав Антонов' },
-    { label: 'Дарья Филатова' },
-    { label: 'Олег Буров' },
-    { label: 'Инна Медведева' },
-    { label: 'Вячеслав Крылов' },
-    { label: 'Тамара Беляева' },
-    { label: 'Кирилл Марков' },
-    { label: 'Марина Пономарева' },
-    { label: 'Борис Захаров' },
-    { label: 'Жанна Савельева' },
-    { label: 'Федор Жуков' },
-    { label: 'Елизавета Логинова' },
-    { label: 'Виктор Рыбаков' },
-    { label: 'Лилия Макарова' },
-];
-
-type StoryProps = ComponentProps<typeof Autocomplete> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const meta: Meta<StoryProps> = {
-    title: 'Data Entry/Autocomplete',
-    decorators: [InSpacingDecorator],
-    component: Autocomplete,
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        requiredPlacement: {
-            options: ['left', 'right'],
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'required', truthy: true },
-        },
-        required: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'optional', truthy: false },
-        },
-        hasRequiredIndicator: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'required',
-                truthy: true,
-            },
-        },
-        optional: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'required', truthy: false },
-        },
-        listWidth: {
-            control: { type: 'text' },
-        },
-        listMaxHeight: {
-            control: { type: 'text' },
-        },
-        virtual: {
-            control: { type: 'boolean' },
-        },
-        ...disableProps([
-            'hintText',
-            'hintTrigger',
-            'hintView',
-            'hintSize',
-            'hintTargetIcon',
-            'hintTargetPlacement',
-            'hintPlacement',
-            'hintHasArrow',
-            'hintOffset',
-            'hintWidth',
-            'hintContentLeft',
-        ]),
-    },
-    args: {
-        view: 'default',
-        disabled: false,
-        readOnly: false,
-        label: 'Label',
-        textBefore: '',
-        textAfter: '',
-        placeholder: 'Заполните поле',
-        leftHelper: 'Введите имя Алексей',
-        threshold: 2,
-        enableContentLeft: true,
-        enableContentRight: true,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        virtual: false,
-    },
-};
-
-export default meta;
-
-const DefaultStory = (args: StoryProps) => {
-    const { enableContentLeft, enableContentRight } = args;
-
-    const iconSize = 's';
-
-    return (
-        <Autocomplete
-            {...args}
-            suggestions={suggestions}
-            contentLeft={enableContentLeft ? <IconPlasma size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <IconPlasma size={iconSize} /> : undefined}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryProps> = {
-    render: (args) => <DefaultStory {...args} />,
-};

package/emotion/es/components/Avatar/Avatar.stories.tsx

@@ -1,74 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Avatar } from './Avatar';
-
-const extraPlacements = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-const extraType = ['', 'counter'];
-const counterViews = ['default', 'accent', 'positive', 'negative'];
-
-const meta: Meta<typeof Avatar> = {
-    title: 'Data Display/Avatar',
-    component: Avatar,
-    argTypes: {
-        view: { control: 'inline-radio', options: ['default'] },
-        size: { control: 'select', options: ['xxl', 'm', 's', 'fit'] },
-        status: { control: 'select', options: ['active', 'inactive'] },
-        type: {
-            control: 'select',
-            options: extraType,
-            if: { arg: 'hasExtra', truthy: true },
-        },
-        extraPlacement: {
-            control: 'select',
-            options: extraPlacements,
-            if: { arg: 'hasExtra', truthy: true },
-        },
-        counterView: {
-            control: 'select',
-            options: counterViews,
-            defaultValue: 'default',
-            if: { arg: 'type', eq: 'counter' },
-        },
-        count: {
-            control: 'number',
-            if: { arg: 'type', eq: 'counter' },
-        },
-        maxCount: {
-            control: 'number',
-            if: { arg: 'type', eq: 'counter' },
-        },
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<ComponentProps<typeof Avatar>>;
-
-export const Default: Story = {
-    args: {
-        view: 'default',
-        size: 's',
-        name: 'Иван Фадеев',
-        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
-        status: 'active',
-        isScalable: false,
-        hasExtra: false,
-        extraPlacement: 'bottom-left',
-    },
-    argTypes: {
-        ...disableProps(['focused']),
-    },
-};
-
-export const Accessibility: Story = {
-    args: {
-        role: 'button',
-        tabIndex: 0,
-        view: 'default',
-        size: 's',
-        name: 'Иван Фадеев',
-        status: 'active',
-    },
-};

package/emotion/es/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -1,71 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import * as React from 'react';
-
-import { Avatar } from '../Avatar';
-
-import { AvatarGroup } from './AvatarGroup';
-
-type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
-
-const meta: Meta<typeof AvatarGroup> = {
-    title: 'Data Display/AvatarGroup',
-    component: AvatarGroup,
-};
-
-export default meta;
-
-export const Default: Story = {
-    render: (args: ComponentProps<typeof AvatarGroup>) => {
-        return (
-            <AvatarGroup {...args}>
-                {Array(5)
-                    .fill(true)
-                    .map(() => (
-                        <Avatar size="s" url="https://avatars.githubusercontent.com/u/1813468?v=4" />
-                    ))}
-            </AvatarGroup>
-        );
-    },
-};
-
-export const DynamicSize: Story = {
-    args: { totalCount: 10, visibleCount: 3 },
-    render: (args: ComponentProps<typeof AvatarGroup>) => {
-        const itemLength = args.totalCount;
-
-        return (
-            <AvatarGroup {...args}>
-                {Array(args.visibleCount)
-                    .fill(true)
-                    .map((_, index) => (
-                        <Avatar size="s" customText={index + 1} />
-                    ))}
-
-                {itemLength > args.visibleCount && (
-                    <Avatar size="s" customText={`+${itemLength - args.visibleCount}`} />
-                )}
-            </AvatarGroup>
-        );
-    },
-};
-
-export const Accessibility: Story = {
-    render: (args: ComponentProps<typeof AvatarGroup>) => {
-        return (
-            <AvatarGroup {...args}>
-                {Array(5)
-                    .fill(true)
-                    .map(() => (
-                        <Avatar
-                            role="button"
-                            tabIndex={0}
-                            focused
-                            size="s"
-                            url="https://avatars.githubusercontent.com/u/1813468?v=4"
-                        />
-                    ))}
-            </AvatarGroup>
-        );
-    },
-};

package/emotion/es/components/Badge/Badge.stories.tsx

@@ -1,87 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { Badge } from './Badge';
-
-const meta: Meta<typeof Badge> = {
-    title: 'Data Display/Badge',
-    component: Badge,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        size: {
-            options: ['s'],
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: ['default', 'accent', 'positive', 'negative'],
-            control: {
-                type: 'select',
-            },
-        },
-        pilled: {
-            control: { type: 'boolean' },
-            if: { arg: 'clear', truthy: false },
-        },
-        text: {
-            control: { type: 'text' },
-            if: { arg: 'enableText', truthy: true },
-        },
-        ...disableProps(['contentLeft', 'contentRight', 'transparent', 'size']),
-    },
-};
-
-export default meta;
-
-type StoryProps = ComponentProps<typeof Badge> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-    enableText: boolean;
-};
-type Story = StoryObj<StoryProps>;
-
-const BellIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-        <path
-            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-export const Default: Story = {
-    argTypes: {
-        enableContentLeft: {
-            control: { type: 'boolean' },
-            if: { arg: 'enableContentRight', truthy: false },
-        },
-        enableContentRight: {
-            control: { type: 'boolean' },
-            if: { arg: 'enableText', truthy: true },
-        },
-    },
-    args: {
-        view: 'default',
-        size: 's',
-        enableText: true,
-        text: 'Hello',
-        enableContentLeft: false,
-        enableContentRight: false,
-        clear: false,
-        pilled: false,
-    },
-    render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
-        return (
-            <Badge
-                contentLeft={
-                    enableContentLeft || !enableText ? <BellIcon width="0.75rem" height="0.75rem" /> : undefined
-                }
-                contentRight={enableContentRight ? <BellIcon width="0.75rem" height="0.75rem" /> : undefined}
-                size={size}
-                {...rest}
-            />
-        );
-    },
-};

package/emotion/es/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Dropdown } from '../Dropdown';
-
-import { Breadcrumbs } from '.';
-
-type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
-
-const meta: Meta<BreadcrumbsProps> = {
-    title: 'Navigation/Breadcrumbs',
-    component: Breadcrumbs,
-    args: {
-        view: 'default',
-        size: 's',
-    },
-    argTypes: {
-        ...disableProps(['separator', 'size', 'view']),
-    },
-};
-
-export default meta;
-
-export const Default: StoryObj<BreadcrumbsProps> = {
-    args: {
-        showItems: 2,
-        items: [
-            { title: 'Home', href: '/' },
-            { title: 'About as', href: '/' },
-            { renderItem: () => <span>Custom Item</span> },
-            { title: 'Contacts' },
-        ],
-    },
-    render: (props: BreadcrumbsProps) => {
-        return <Breadcrumbs {...props} />;
-    },
-};
-
-export const CustomShorter: StoryObj<BreadcrumbsProps> = {
-    args: {
-        view: 'default',
-        size: 's',
-    },
-    render: (props: BreadcrumbsProps) => {
-        const items = [
-            { title: 'Home', href: '/' },
-            { title: 'About as', href: '/' },
-            {
-                renderItem: () => {
-                    const itemsDropdown = [
-                        {
-                            value: 'Custom Item 1',
-                            label: 'Custom Item 1',
-                        },
-                        {
-                            value: 'Custom Item 2',
-                            label: 'Custom Item 2',
-                        },
-                    ];
-                    return (
-                        <Dropdown
-                            variant="tight"
-                            placement="bottom"
-                            items={itemsDropdown}
-                            trigger="hover"
-                            size={args.size}
-                        >
-                            <span>...</span>
-                        </Dropdown>
-                    );
-                },
-            },
-            { title: 'Contacts' },
-        ];
-
-        const args = { ...props, items };
-
-        return <Breadcrumbs {...args} />;
-    },
-};

package/emotion/es/components/Button/Button.stories.tsx

@@ -1,212 +0,0 @@
-import React, { useCallback, useState, useRef } from 'react';
-import type { ComponentProps } from 'react';
-import { action } from '@storybook/addon-actions';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconMic } from '@salutejs/plasma-icons';
-import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { config } from './Button.config';
-
-import { Button } from '.';
-
-type ButtonProps = ComponentProps<typeof Button>;
-
-const { views, sizes } = getConfigVariations(config);
-const stretchingValues = ['auto', 'filled', 'fixed'];
-const pinValues = [
-    '',
-    'square-square',
-    'square-clear',
-    'clear-square',
-    'clear-clear',
-    'clear-circle',
-    'circle-clear',
-    'circle-circle',
-];
-const contentPlacingValues = ['default', 'relaxed'];
-
-const onClick = action('onClick');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const meta: Meta<ButtonProps> = {
-    title: 'Data Entry/Button',
-    decorators: [InSpacingDecorator],
-    component: Button,
-    args: {
-        view: 'accent',
-        size: 's',
-        contentPlacing: 'default',
-        stretching: 'auto',
-        text: 'Hello',
-        value: 'Value',
-        focused: true,
-        square: false,
-        isLoading: false,
-    },
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        value: {
-            control: {
-                type: 'text',
-            },
-        },
-        contentPlacing: {
-            options: contentPlacingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        pin: {
-            options: pinValues,
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-        },
-        ...disableProps([
-            'size',
-            'theme',
-            'loader',
-            'onClick',
-            'onFocus',
-            'onBlur',
-            'outlined',
-            'contentLeft',
-            'contentRight',
-            'shiftLeft',
-            'shiftRight',
-            'stretch',
-            'as',
-            'forwardedAs',
-            'pin',
-            'focused',
-            'disabled',
-        ]),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof Button> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const iconSize = 's';
-
-    return (
-        <Button
-            contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            size={size}
-            onClick={onClick}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-        enableContentRight: false,
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['value']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-export const WithValue: StoryObj<StoryPropsDefault> = {
-    args: {
-        enableContentLeft: false,
-    },
-    argTypes: {
-        ...disableProps(['enableContentRight']),
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryLoading = ({
-    enableContentLeft,
-    enableContentRight,
-    size,
-    isLoading,
-    onClick: _onClick,
-    ...rest
-}: StoryPropsDefault) => {
-    const [loading, setLoading] = useState(isLoading);
-    const [count, setCount] = useState(0);
-    const intervalId = useRef<number | undefined>();
-
-    const iconSize = 's';
-
-    const onClickHandle = useCallback(
-        (event) => {
-            event.persist();
-
-            _onClick?.(event);
-
-            setLoading(true);
-
-            intervalId.current = window.setInterval(() => {
-                setCount((prev) => {
-                    return prev + 1;
-                });
-            }, 1_000);
-        },
-        [_onClick],
-    );
-
-    if (count === 6) {
-        setLoading(false);
-        setCount(0);
-        window.clearInterval(intervalId.current);
-    }
-
-    return (
-        <Button
-            autoFocus
-            onClick={onClickHandle}
-            contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
-            isLoading={loading}
-            size={size}
-            loader={<div>Loading - {count}</div>}
-            {...rest}
-        />
-    );
-};
-
-export const Loading: StoryObj<StoryPropsDefault> = {
-    args: {
-        ...Default.args,
-        text: 'Start loading',
-        value: '',
-    },
-    argTypes: {
-        ...disableProps(['text', 'value']),
-    },
-    render: (args) => <StoryLoading {...args} />,
-};