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

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

@@ -1,239 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
-
-import { Link } from '../Link';
-
-import { config } from './Checkbox.config';
-
-import { Checkbox } from '.';
-import type { CheckboxProps } from '.';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const { sizes } = getConfigVariations(config);
-const views = ['accent', 'negative'];
-
-const propsToDisable = [
-    'name',
-    'indeterminate',
-    'id',
-    'focused',
-    'type',
-    'value',
-    'checked',
-    'readOnly',
-    'placeholder',
-    'required',
-    'minLength',
-    'maxLength',
-    'onChange',
-    'onFocus',
-    'onBlur',
-    'appearance',
-];
-
-const meta: Meta<CheckboxProps> = {
-    title: 'Data Entry/Checkbox',
-    component: Checkbox,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        label: {
-            control: {
-                type: 'text',
-            },
-        },
-        description: {
-            control: {
-                type: 'text',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        ...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: 'm',
-        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: 'm',
-        view: 'accent',
-        singleLine: false,
-        focused: true,
-        disabled: false,
-    },
-    argTypes: {
-        ...disableProps(['label', 'description']),
-    },
-    render: (args) => <StoryLive {...args} />,
-};

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

@@ -1,88 +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', 'positive', 'warning', 'negative'];
-const sizes = ['l', 'm', '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']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Chip>;
-
-const TrashIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...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: 'm',
-        hasClear: true,
-        disabled: false,
-        focused: true,
-        pilled: false,
-        onClear,
-    },
-};
-
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => {
-        const iconSizeMapper = {
-            l: '1.5rem',
-            m: '1.25rem',
-            s: '1rem',
-            xs: '0.75rem',
-        };
-        const iconSize = args.size || 'm';
-
-        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/cjs/components/ChipGroup/ChipGroup.stories.tsx

@@ -1,94 +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 sizes = ['l', 'm', 's', 'xs'];
-const gapValues = ['dense', 'wide'];
-
-const meta: Meta<typeof ChipGroup> = {
-    title: 'Data Display/ChipGroup',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        size: {
-            options: sizes,
-            control: { type: 'select' },
-            if: { arg: 'isCommonChipStyles', truthy: true },
-        },
-        view: {
-            options: views,
-            control: { type: 'select' },
-            if: { arg: 'isCommonChipStyles', truthy: true },
-        },
-        gap: {
-            options: gapValues,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    args: {
-        itemsCount: 5,
-        gap: 'dense',
-        isWrapped: false,
-        view: 'default',
-        size: 'm',
-        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 (
-            <>
-                <h3>Группа Chip с разными темами</h3>
-                <ChipGroup {...args}>
-                    <Chip text="Primary" view="default" hasClear={false} />
-                    <Chip text="Secondary" view="secondary" hasClear={false} />
-                    <Chip text="Accent" view="accent" hasClear={false} />
-                </ChipGroup>
-
-                <h3>Группа Chip с разными размерами</h3>
-                <ChipGroup {...args}>
-                    <Chip text="Primary" view="default" size="l" hasClear={false} />
-                    <Chip text="Secondary" view="secondary" size="m" hasClear={false} />
-                    <Chip text="Accent" view="accent" size="s" hasClear={false} />
-                </ChipGroup>
-            </>
-        );
-    },
-};

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

@@ -1,105 +0,0 @@
-import React, { useState, ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { CodeField } from './CodeField';
-import { config } from './CodeField.config';
-
-const onChange = action('onChange');
-const onFullCodeEnter = action('onFullCodeEnter');
-
-const { views, sizes } = getConfigVariations(config);
-const codeLengths = [4, 5, 6];
-const shapes = ['default', 'segmented'];
-const captionAlignVariants = ['left', 'center'];
-const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
-const codeErrorBehaviorVariants = ['remove-code', 'keep'];
-
-const meta: Meta<typeof CodeField> = {
-    title: 'Data Entry/CodeField',
-    component: CodeField,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        shape: {
-            options: shapes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        captionAlign: {
-            options: captionAlignVariants,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        codeLength: {
-            options: codeLengths,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        itemErrorBehavior: {
-            options: itemErrorBehaviorVariants,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        codeErrorBehavior: {
-            options: codeErrorBehaviorVariants,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    parameters: {
-        controls: {
-            exclude: ['view'],
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof CodeField>;
-
-const StoryDefault = (args: StoryPropsDefault) => {
-    const [value, setValue] = useState('');
-
-    const handleChange = (newValue: string) => {
-        setValue(newValue);
-        onChange(newValue);
-    };
-
-    return <CodeField {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        view: 'default',
-        size: 'm',
-        shape: 'default',
-        codeLength: 6,
-        caption: 'Caption',
-        captionAlign: 'center',
-        width: '',
-        isError: false,
-        itemErrorBehavior: 'remove-symbol',
-        codeErrorBehavior: 'keep',
-        autoFocus: true,
-        disabled: false,
-    },
-    render: StoryDefault,
-};