@salutejs/sdds-cs 0.319.0-canary.2021.15821149221.0 → 0.319.0-canary.2021.15824070198.0

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

@@ -1,97 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-import { IconChevronRight } from '@salutejs/plasma-icons';
-import styled from 'styled-components';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Avatar } from '../Avatar';
-
-import { Cell } from '.';
-
-type StoryProps = ComponentProps<typeof Cell> & {
-    itemsCount?: number;
-    disableLeftContent?: boolean;
-    disableRightContent?: boolean;
-};
-type Story = StoryObj<StoryProps>;
-
-const sizes = ['s', 'xs'];
-const stretchingValues = ['fixed', 'filled', 'auto'];
-const alignLeft = ['top', 'center', 'bottom'];
-const alignRight = ['top', 'center', 'bottom'];
-
-type SizesCell = 'xs' | 's' | undefined;
-type SizesAvatar = 'l' | 'm' | 's';
-
-const getSize = (size: SizesCell): SizesAvatar => {
-    if (size === 'xs' || !size) {
-        return 's';
-    }
-
-    return size;
-};
-
-const ChevronRight = styled(IconChevronRight)`
-    color: var(--text-secondary);
-`;
-
-const meta: Meta<typeof Cell> = {
-    title: 'Data Display/Cell',
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        alignContentLeft: {
-            options: alignLeft,
-            control: {
-                type: 'select',
-            },
-        },
-        alignContentRight: {
-            options: alignRight,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['size', 'view']),
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    args: {
-        size: 's',
-        stretching: 'filled',
-        disableLeftContent: false,
-        disableRightContent: false,
-        alignContentLeft: 'center',
-        alignContentRight: 'center',
-        title: 'Title',
-        subtitle: 'Subtitle',
-        label: 'Label',
-    },
-    render: ({ ...args }: StoryProps) => {
-        return (
-            <Cell
-                contentLeft={
-                    !args.disableLeftContent && (
-                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
-                    )
-                }
-                contentRight={!args.disableRightContent && <ChevronRight color="inherit" size="s" />}
-                {...args}
-            />
-        );
-    },
-};

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

@@ -1,232 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Link } from '../Link';
-
-import { Checkbox } from '.';
-import type { CheckboxProps } from '.';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const propsToDisable = [
-    'name',
-    'indeterminate',
-    'id',
-    'focused',
-    'type',
-    'value',
-    'checked',
-    'readOnly',
-    'placeholder',
-    'required',
-    'minLength',
-    'maxLength',
-    'onChange',
-    'onFocus',
-    'onBlur',
-    'view',
-    'size',
-    'appearance',
-];
-
-const views = ['accent'];
-
-const meta: Meta<CheckboxProps> = {
-    title: 'Data Entry/Checkbox',
-    component: Checkbox,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        label: {
-            control: {
-                type: 'text',
-            },
-        },
-        description: {
-            control: {
-                type: 'text',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(propsToDisable),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<CheckboxProps>;
-
-const englishDescription = (
-    <div>
-        The most spoken language in the <Link href="/#">world</Link>
-    </div>
-);
-
-const chineseLabel = (
-    <div>
-        Chinese is the hardest <Link href="/#">language</Link>
-    </div>
-);
-
-const name = 'languages';
-
-const items = [
-    {
-        name,
-        value: 'natural',
-        label: 'Natural languages',
-        disabled: false,
-        description: 'Languages that people speak. They were not designed by people and they evolved naturally.',
-    },
-    { name, value: 'russian', label: 'Russian', disabled: false, parent: 'natural' },
-    {
-        name,
-        value: 'english',
-        label: 'English',
-        disabled: false,
-        parent: 'natural',
-        description: englishDescription,
-    },
-    { name, value: 'french', label: 'French', disabled: false, parent: 'natural' },
-    { name, value: 'klingon', label: 'Klingon', disabled: false, parent: 'natural' },
-    { name, value: 'elvish', label: 'Elvish', disabled: true, parent: 'natural' },
-    { name, value: 'dothraki', label: 'Dothraki', disabled: true, parent: 'natural' },
-    {
-        name,
-        value: 'chinese',
-        label: chineseLabel,
-        parent: 'natural',
-    },
-];
-
-const getChildren = (value: string) => items.filter((item) => item.parent === value);
-
-const getState = (values: Record<string, boolean | undefined>, value: string) => {
-    const allChildren = getChildren(value);
-
-    if (!allChildren.length) {
-        return { checked: values[value], indeterminate: false };
-    }
-
-    const checkedChildren = allChildren.filter((child) => values[child.value]);
-
-    if (checkedChildren.length === 0) {
-        return { checked: false, indeterminate: false };
-    }
-
-    if (allChildren.length !== checkedChildren.length) {
-        return { checked: false, indeterminate: true };
-    }
-
-    return { checked: true, indeterminate: false };
-};
-
-const StoryDefault = (args: CheckboxProps) => {
-    const value = 0;
-    const [checked, setChecked] = React.useState(true);
-
-    return (
-        <>
-            <Checkbox
-                value={value}
-                checked={checked}
-                onChange={(event) => {
-                    event.persist();
-
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...args}
-            />
-        </>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        name: 'checkbox',
-        label: 'Label',
-        description: 'Description',
-        disabled: false,
-        singleLine: false,
-        size: 's',
-        view: 'accent',
-        focused: true,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryLive = (args) => {
-    const [values, setValues] = React.useState({
-        russian: true,
-        english: true,
-        french: true,
-        klingon: false,
-        elvish: true,
-        dothraki: false,
-        chinese: true,
-    });
-
-    return (
-        <>
-            {items.map((item) => (
-                <Checkbox
-                    {...getState(values, item.value)}
-                    style={{ marginLeft: item.parent ? 36 : null }}
-                    key={item.value}
-                    name={item.name}
-                    value={item.value}
-                    label={item.label}
-                    disabled={item.disabled}
-                    description={item.description}
-                    onChange={(event) => {
-                        event.persist();
-
-                        const { checked } = event.target;
-
-                        if (item.parent) {
-                            setValues({ ...values, [item.value]: checked });
-                        } else {
-                            setValues({
-                                ...values,
-                                ...getChildren(item.value).reduce(
-                                    (acc, child) => ({ ...acc, [child.value]: checked }),
-                                    {},
-                                ),
-                            });
-                        }
-
-                        onChange(event);
-                    }}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    {...args}
-                />
-            ))}
-        </>
-    );
-};
-
-export const Live: Story = {
-    args: {
-        size: 's',
-        view: 'accent',
-        singleLine: false,
-        focused: true,
-        disabled: false,
-    },
-    argTypes: {
-        ...disableProps(['label', 'description', 'size']),
-    },
-    render: (args) => <StoryLive {...args} />,
-};

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Chip } from '.';
-
-const views = ['default', 'secondary', 'accent'];
-const sizes = ['s', 'xs'];
-
-const onClear = action('onClear');
-
-const meta: Meta<typeof Chip> = {
-    title: 'Data Display/Chip',
-    component: Chip,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([
-            'readOnly',
-            'onClear',
-            'contentLeft',
-            'contentRight',
-            'contentClearButton',
-            'text',
-            'disabled',
-            'pilled',
-        ]),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Chip>;
-
-const TrashIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" color="inherit" {...props}>
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M8 5.5A2.5 2.5 0 0110.5 3h3A2.5 2.5 0 0116 5.5V6h-2v-.5a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5V6H8v-.5zM4 8a1 1 0 011-1h14a1 1 0 110 2h-1v9.5a2.5 2.5 0 01-2.5 2.5h-7A2.5 2.5 0 016 18.5V9H5a1 1 0 01-1-1z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-export const Default: Story = {
-    args: {
-        text: 'This is chip',
-        view: 'default',
-        size: 's',
-        hasClear: true,
-        focused: true,
-        onClear,
-    },
-};
-
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => {
-        const iconSizeMapper = {
-            s: '1.5rem',
-            xs: '1rem',
-        };
-        const iconSize = args.size || 's';
-
-        return (
-            <Chip
-                contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
-                {...args}
-            />
-        );
-    },
-};
-
-export const LongText: Story = {
-    args: {
-        ...Default.args,
-        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
-    },
-    render: (args) => <Chip style={{ width: '10rem' }} {...args} />,
-};

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

@@ -1,79 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Chip } from '../Chip/Chip';
-
-import { ChipGroup } from './ChipGroup';
-
-type StoryProps = ComponentProps<typeof ChipGroup> & { itemsCount?: number };
-type Story = StoryObj<StoryProps>;
-
-const views = ['default', 'accent', 'secondary'];
-const gapValues = ['dense', 'wide'];
-
-const meta: Meta<typeof ChipGroup> = {
-    title: 'Data Display/ChipGroup',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: { type: 'select' },
-            if: { arg: 'isCommonChipStyles', truthy: true },
-        },
-        gap: {
-            options: gapValues,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['size']),
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    args: {
-        gap: 'dense',
-        itemsCount: 5,
-        isWrapped: false,
-        view: 'default',
-        size: 's',
-        isCommonChipStyles: true,
-    },
-    argTypes: {
-        ...disableProps(['isCommonChipStyles']),
-    },
-    render: ({ itemsCount, ...args }: StoryProps) => {
-        return (
-            <ChipGroup {...args}>
-                {Array(itemsCount)
-                    .fill(true)
-                    .map((_, i) => (
-                        <Chip text={`Chip ${i}`} key={`chip_${i}`} hasClear={false} />
-                    ))}
-            </ChipGroup>
-        );
-    },
-};
-
-export const CustomChips: Story = {
-    args: {
-        ...Default.args,
-        isCommonChipStyles: false,
-    },
-    argTypes: {
-        ...disableProps(['itemsCount', 'isWrapped']),
-    },
-    render: (args: StoryProps) => {
-        return (
-            <ChipGroup {...args}>
-                <Chip text="Primary" view="default" hasClear={false} />
-                <Chip text="Secondary" view="secondary" hasClear={false} />
-                <Chip text="Accent" view="accent" hasClear={false} />
-            </ChipGroup>
-        );
-    },
-};