@salutejs/sdds-cs 0.318.1-canary.2030.15756642897.0 → 0.318.1-canary.2030.15826725038.0

package/emotion/cjs/components/Accordion/Accordion.stories.tsx

@@ -1,159 +0,0 @@
-import React, { useState, ComponentProps, ReactNode } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-import { IconPlus } from '@salutejs/plasma-icons';
-
-import { IconButton } from '../IconButton/IconButton';
-
-import { Accordion, AccordionItem } from './Accordion';
-
-type AccordionItemCustomProps = {
-    type: 'arrow' | 'sign' | 'clear';
-    title: string;
-    body: ReactNode;
-    pin?:
-        | 'square-square'
-        | 'square-clear'
-        | 'clear-square'
-        | 'clear-clear'
-        | 'clear-circle'
-        | 'circle-clear'
-        | 'circle-circle';
-};
-
-type AccordionProps = ComponentProps<typeof Accordion> & AccordionItemCustomProps;
-
-const meta: Meta<AccordionProps> = {
-    title: 'Data Display/Accordion',
-    decorators: [InSpacingDecorator],
-    component: Accordion,
-    args: {
-        singleActive: false,
-        view: 'default',
-        size: 's',
-        stretching: 'filled',
-        disabled: false,
-        type: 'arrow',
-        pin: undefined,
-        title: 'Как оплатить заправку бонусами СберСпасибо?',
-        body:
-            'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива',
-    },
-    argTypes: {
-        ...disableProps(['text', 'size']),
-        view: {
-            options: ['default', 'clear'],
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: ['filled', 'fixed'],
-            control: {
-                type: 'select',
-            },
-        },
-        type: {
-            options: ['arrow', 'sign', 'clear'],
-            control: {
-                type: 'select',
-            },
-        },
-        pin: {
-            options: [
-                'square-square',
-                'square-clear',
-                'clear-square',
-                'clear-clear',
-                'clear-circle',
-                'circle-clear',
-                'circle-circle',
-            ],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-export const Default: StoryObj<AccordionProps> = {
-    render: (props: AccordionProps) => {
-        const args = { ...props, text: undefined };
-
-        return (
-            <Accordion {...args}>
-                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
-                    {args.body}
-                </AccordionItem>
-                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
-                    {args.body}
-                </AccordionItem>
-                <AccordionItem type={args.type} pin={args.pin} title={args.title}>
-                    {args.body}
-                </AccordionItem>
-            </Accordion>
-        );
-    },
-};
-
-const getSizeForIcon = (size) => (size === 'xs' ? 'xs' : 's');
-
-const ControlledAccordion = (props: ComponentProps<typeof Accordion>) => {
-    const args = { ...props, text: undefined };
-    const [activeFirst, setActiveFirst] = useState(false);
-    const [activeSecond, setActiveSecond] = useState(false);
-    const [activeThree, setActiveThree] = useState(false);
-
-    return (
-        <Accordion {...args}>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveFirst(!activeFirst)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeFirst}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveSecond(!activeSecond)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeSecond}
-            >
-                {args.body}
-            </AccordionItem>
-            <AccordionItem
-                contentRight={
-                    <IconButton view="secondary" size={args.size} onClick={() => setActiveThree(!activeThree)}>
-                        <IconPlus size={getSizeForIcon(args.size)} />
-                    </IconButton>
-                }
-                alignWithTitle={args.alignWithTitle}
-                type={args.type}
-                pin={args.pin}
-                title={args.title}
-                opened={activeThree}
-            >
-                {args.body}
-            </AccordionItem>
-        </Accordion>
-    );
-};
-
-export const Controlled: StoryObj<ComponentProps<typeof Accordion>> = {
-    render: (props: ComponentProps<typeof Accordion>) => ControlledAccordion(props),
-};

package/emotion/cjs/components/Attach/Attach.stories.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconPlasma } from '@salutejs/plasma-icons';
-
-import { Attach } from './Attach';
-
-const viewOptions = ['accent', 'secondary', 'clear'];
-const helperTextViewOptions = ['default', 'negative'];
-
-const flowOptions = ['horizontal', 'vertical', 'auto'];
-const fileFormatOptions = ['all', '.doc', '.xls', '.pdf', '.csv', '.txt'];
-const sizeOptions = ['s'];
-
-type StoryAttachProps = ComponentProps<typeof Attach> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-    buttonText?: string;
-    buttonValue?: string;
-    fileFormat?: string;
-    width?: string;
-};
-
-const meta: Meta<StoryAttachProps> = {
-    title: 'Data Entry/Attach',
-    decorators: [InSpacingDecorator],
-    component: Attach,
-    argTypes: {
-        fileFormat: {
-            options: fileFormatOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        flow: {
-            options: flowOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizeOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: viewOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        helperTextView: {
-            options: helperTextViewOptions,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-const StoryButton = (props: StoryAttachProps) => {
-    return <Attach {...props} />;
-};
-
-export const Button: StoryObj<StoryAttachProps> = {
-    args: {
-        fileFormat: 'all',
-        flow: 'horizontal',
-        hasAttachment: true,
-        width: '400px',
-        buttonText: 'Загрузить файл',
-        buttonValue: '',
-        helperText: 'Подсказка',
-        enableContentLeft: false,
-        enableContentRight: false,
-        size: 's',
-        view: 'accent',
-        helperTextView: 'default',
-    },
-    render: (args) => {
-        const {
-            buttonText,
-            buttonValue,
-            width,
-            size,
-            fileFormat,
-            enableContentLeft,
-            enableContentRight,
-            ...rest
-        } = args;
-        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
-        const iconSize = size === 'xs' ? 'xs' : 's';
-
-        return (
-            <StoryButton
-                style={{ width }}
-                size={size}
-                buttonType="button"
-                contentLeft={enableContentLeft ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                contentRight={enableContentRight ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                acceptedFileFormats={accepted}
-                text={buttonText}
-                value={buttonValue}
-                {...rest}
-            />
-        );
-    },
-};
-
-const StoryIconButton = (props: StoryAttachProps) => {
-    return <Attach {...props} />;
-};
-
-export const IconButton: StoryObj<StoryAttachProps> = {
-    args: {
-        fileFormat: 'all',
-        flow: 'horizontal',
-        hasAttachment: true,
-        width: '400px',
-        helperText: 'Подсказка',
-        size: 's',
-        view: 'accent',
-        helperTextView: 'default',
-    },
-    render: (args) => {
-        const {
-            buttonText,
-            buttonValue,
-            width,
-            size,
-            fileFormat,
-            enableContentLeft,
-            enableContentRight,
-            ...rest
-        } = args;
-        const accepted = fileFormat && fileFormat !== 'all' ? [fileFormat] : undefined;
-        const iconSize = size === 'xs' ? 'xs' : 's';
-
-        return (
-            <StoryIconButton
-                style={{ width }}
-                size={size}
-                buttonType="iconButton"
-                contentLeft={enableContentLeft ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                contentRight={enableContentRight ? <IconPlasma size={iconSize} color="inherit" /> : undefined}
-                acceptedFileFormats={accepted}
-                text={buttonText}
-                value={buttonValue}
-                {...rest}
-            />
-        );
-    },
-};

package/emotion/cjs/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/cjs/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/cjs/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>
-        );
-    },
-};