@salutejs/sdds-serv 0.314.0-canary.2021.15816853505.0 → 0.314.0-canary.2021.15824070198.0

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

@@ -1,201 +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 views = ['default', 'clear'] as const;
-const sizes = ['l', 'm', 's', 'xs', 'h2', 'h3', 'h4', 'h5'] as const;
-const stretching = ['filled', 'fixed'] as const;
-const types = ['arrow', 'sign', 'clear'] as const;
-const pins = [
-    'square-square',
-    'square-clear',
-    'clear-square',
-    'clear-clear',
-    'clear-circle',
-    'circle-clear',
-    'circle-circle',
-] as const;
-
-const meta: Meta<AccordionProps> = {
-    title: 'Data Display/Accordion',
-    decorators: [InSpacingDecorator],
-    component: Accordion,
-    args: {
-        singleActive: false,
-        view: 'default',
-        size: 'm',
-        stretching: 'filled',
-        disabled: false,
-        type: 'arrow',
-        pin: undefined,
-        title: 'Как оплатить заправку бонусами СберСпасибо?',
-        body:
-            'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива',
-    },
-    argTypes: {
-        ...disableProps(['text']),
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretching,
-            control: {
-                type: 'select',
-            },
-        },
-        type: {
-            options: types,
-            control: {
-                type: 'select',
-            },
-        },
-        pin: {
-            options: pins,
-            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 getSizeForIconButton = (size) => {
-    switch (size) {
-        case 'l':
-        case 'h2':
-        case 'h3':
-            return 'l';
-        case 'm':
-            return 'm';
-        case 's':
-        case 'h4':
-            return 's';
-        case 'xs':
-        case 'h5':
-            return 'xs';
-        default:
-            return 'm';
-    }
-};
-
-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={getSizeForIconButton(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={getSizeForIconButton(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={getSizeForIconButton(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/es/components/Attach/Attach.stories.tsx

@@ -1,168 +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 = [
-    'default',
-    'accent',
-    'secondary',
-    'clear',
-    'success',
-    'warning',
-    'critical',
-    'dark',
-    'black',
-    'white',
-];
-const helperTextViewOptions = ['default', 'negative'];
-
-const flowOptions = ['horizontal', 'vertical', 'auto'];
-const fileFormatOptions = ['all', '.doc', '.xls', '.pdf', '.csv', '.txt'];
-const sizeOptions = ['xs', 's', 'm', 'l'];
-
-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: 'm',
-        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: 'm',
-        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/es/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,266 +0,0 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconPlasma } from '@salutejs/plasma-icons';
-import type { PopoverPlacement } from '@salutejs/plasma-new-hope';
-
-import { Autocomplete } from './Autocomplete';
-
-const sizes = ['l', 'm', 's', 'xs'];
-const views = ['default', 'positive', 'warning', 'negative'];
-const labelPlacements = ['outer', 'inner'];
-const hintViews = ['default'];
-const hintSizes = ['m', 's'];
-const hintTriggers = ['hover', 'click'];
-const hintTargetPlacements = ['outer', 'inner'];
-const placements: Array<PopoverPlacement> = [
-    'top',
-    'top-start',
-    'top-end',
-
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-
-    'left',
-    'left-start',
-    'left-end',
-
-    'right',
-    'right-start',
-    'right-end',
-
-    'auto',
-];
-
-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;
-    hasHint: boolean;
-};
-
-const meta: Meta<StoryProps> = {
-    title: 'Data Entry/Autocomplete',
-    decorators: [InSpacingDecorator],
-    component: Autocomplete,
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        keepPlaceholder: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'labelPlacement', eq: 'inner' },
-        },
-        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 },
-        },
-        hintText: {
-            control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintView: {
-            options: hintViews,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintSize: {
-            options: hintSizes,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintTargetPlacement: {
-            options: hintTargetPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintTrigger: {
-            options: hintTriggers,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintPlacement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            if: { arg: 'hasHint', truthy: true },
-            mappers: placements,
-        },
-        hintHasArrow: {
-            control: { type: 'boolean' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        hintWidth: {
-            control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        listWidth: {
-            control: { type: 'text' },
-        },
-        listMaxHeight: {
-            control: { type: 'text' },
-        },
-        virtual: {
-            control: { type: 'boolean' },
-        },
-    },
-    args: {
-        view: 'default',
-        size: 'l',
-        labelPlacement: 'outer',
-        disabled: false,
-        readOnly: false,
-        label: 'Label',
-        textBefore: '',
-        textAfter: '',
-        placeholder: 'Заполните поле',
-        leftHelper: 'Введите имя Алексей',
-        keepPlaceholder: false,
-        threshold: 2,
-        enableContentLeft: true,
-        enableContentRight: true,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        hasHint: false,
-        hintText: 'Текст подсказки',
-        hintTrigger: 'hover',
-        hintView: 'default',
-        hintSize: 'm',
-        hintTargetPlacement: 'outer',
-        hintPlacement: 'auto',
-        hintWidth: '10rem',
-        hintHasArrow: true,
-        virtual: false,
-    },
-};
-
-export default meta;
-
-const DefaultStory = (args: StoryProps) => {
-    const { enableContentLeft, enableContentRight } = args;
-
-    const iconSize = args.size === 'xs' ? 'xs' : 's';
-
-    console.log(args.hasRequiredIndicator);
-
-    return (
-        <div style={{ width: '70%', margin: '0 auto' }}>
-            <Autocomplete
-                {...args}
-                suggestions={suggestions}
-                contentLeft={enableContentLeft ? <IconPlasma size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconPlasma size={iconSize} /> : undefined}
-            />
-        </div>
-    );
-};
-
-export const Default: StoryObj<StoryProps> = {
-    render: (args) => <DefaultStory {...args} />,
-};