@salutejs/sdds-cs 0.319.0-canary.2020.15698332896.0 → 0.319.0-canary.2020.15824629894.0

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

@@ -1,277 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import styled from 'styled-components';
-import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconMic } from '@salutejs/plasma-icons';
-
-import { Slider } from './Slider';
-import { config } from './Slider.config';
-
-const { views } = getConfigVariations(config);
-
-const pointerSizes = ['small', 'none'];
-const sliderAligns = ['center', 'left', 'right', 'none'];
-const labelPlacements = ['top', 'left'];
-const scaleAligns = ['side', 'bottom'];
-const orientations: Array<string> = ['vertical', 'horizontal'];
-const visibility = ['always', 'hover'];
-
-const meta: Meta<typeof Slider> = {
-    title: 'Data Entry/Slider',
-    component: Slider,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        pointerSize: {
-            options: pointerSizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([
-            'size',
-            'value',
-            'onChangeCommitted',
-            'onChangeTextField',
-            'onBlurTextField',
-            'onKeyDownTextField',
-            'ariaLabel',
-            'onChange',
-            'fontSizeMultiplier',
-            'gap',
-            'settings',
-            'hasHoverAnimation',
-            'type',
-            'labelContentLeft',
-            'rangeValuesPlacement',
-            'name',
-            'defaultValue',
-            'labelContent',
-            'showRangeValues',
-            'hideMinValueDiff',
-            'hideMaxValueDiff',
-        ]),
-    },
-};
-
-export default meta;
-
-type StoryProps = Omit<ComponentProps<typeof Slider>, 'value' | 'onChangeCommitted'>;
-type StorySingleProps = StoryProps;
-
-type StorySingle = StoryObj<StorySingleProps>;
-type StoryDouble = StoryObj<StoryProps>;
-
-const SliderWrapper = styled.div<{ isVertical?: boolean }>`
-    padding: 1rem;
-
-    width: calc(100% - 2rem);
-    height: ${({ isVertical }) => (isVertical ? '25rem' : 'auto')};
-
-    background-color: rgb(232, 238, 242, 0.4);
-`;
-
-const StoryDefault = (args: StorySingleProps) => {
-    const [value, setValue] = useState(30);
-
-    const onChangeCommittedHandle = (values) => {
-        setValue(values);
-    };
-
-    const onChangeHandle = (values) => {
-        setValue(values);
-    };
-
-    const { hasIcon, showIcon, orientation, labelPlacement, labelVerticalPlacement, ...rest } = args;
-    const isVertical = orientation === 'vertical';
-
-    return (
-        <SliderWrapper isVertical={isVertical}>
-            <Slider
-                value={value}
-                orientation={orientation}
-                labelPlacement={labelPlacement}
-                labelContent={showIcon ? <IconMic size="xs" /> : null}
-                onChangeCommitted={onChangeCommittedHandle}
-                onChange={onChangeHandle}
-                {...rest}
-                size="s"
-            />
-        </SliderWrapper>
-    );
-};
-
-export const Default: StorySingle = {
-    argTypes: {
-        sliderAlign: {
-            options: sliderAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        labelReversed: {
-            control: {
-                type: 'boolean',
-                expanded: true,
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        scaleAlign: {
-            options: scaleAligns,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        reversed: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'vertical' },
-        },
-        pointerVisibility: {
-            options: visibility,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        currentValueVisibility: {
-            options: visibility,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        view: 'default',
-        pointerSize: 'small',
-        pointerVisibility: 'always',
-        min: 0,
-        max: 100,
-        orientation: 'horizontal',
-        ariaLabel: 'Цена микрофона',
-        multipleStepSize: 10,
-        label: 'Цена микрофона',
-        labelPlacement: 'top',
-        sliderAlign: 'center',
-        scaleAlign: 'bottom',
-        showScale: true,
-        showCurrentValue: false,
-        currentValueVisibility: 'always',
-        showIcon: true,
-        reversed: false,
-        labelReversed: false,
-        disabled: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryMultipleValues = (args: StoryProps) => {
-    const [value, setValue] = useState([10, 80]);
-    const sortValues = (values) => {
-        return values
-            .map((val) => {
-                if (val < args.min) {
-                    return args.min;
-                }
-                if (val > args.max) {
-                    return args.max;
-                }
-                return val;
-            })
-            .sort((a, b) => a - b);
-    };
-
-    const onChangeHandle = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onChangeCommitedHandle = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onBlurTextField = (values) => {
-        setValue(sortValues(values));
-    };
-
-    const onKeyDownTextField = (values, event) => {
-        if (event.key === 'Enter') {
-            setValue(sortValues(values));
-        }
-    };
-
-    return (
-        <SliderWrapper isVertical={args.orientation === 'vertical'}>
-            <Slider
-                value={value}
-                onKeyDownTextField={onKeyDownTextField}
-                onBlurTextField={onBlurTextField}
-                onChangeCommitted={onChangeCommitedHandle}
-                onChange={onChangeHandle}
-                {...args}
-                size="s"
-            />
-        </SliderWrapper>
-    );
-};
-
-export const MultipleValues: StoryDouble = {
-    args: {
-        view: 'default',
-        pointerSize: 'small',
-        min: 0,
-        max: 100,
-        disabled: false,
-        label: 'Цена товара',
-        ariaLabel: ['Минимальная цена товара', 'Максимальная цена товара'],
-        multipleStepSize: 10,
-    },
-    argTypes: {
-        pointerSize: {
-            options: ['small', 'large'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([
-            'size',
-            'orientation',
-            'labelPlacement',
-            'scaleAlign',
-            'sliderAlign',
-            'reversed',
-            'labelReversed',
-            'showCurrentValue',
-            'showScale',
-            'pointerVisibility',
-            'currentValueVisibility',
-        ]),
-    },
-    render: (args) => <StoryMultipleValues {...args} />,
-};

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

@@ -1,109 +0,0 @@
-import React, { useState, useRef, useEffect, ComponentProps } from 'react';
-import styled, { css } from 'styled-components';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { InSpacingDecorator, disableProps } from '../../helpers';
-import { Button } from '../Button';
-import { BodyL } from '../Typography';
-
-import { Spinner } from '.';
-
-const meta: Meta<typeof Spinner> = {
-    title: 'Data Display/Spinner',
-    decorators: [InSpacingDecorator],
-    component: Spinner,
-    argTypes: {
-        size: {
-            options: [8, 16, 32, 64, 96, 128],
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: ['default', 'secondary', 'tertiary', 'paragraph', 'accent', 'positive', 'warning', 'negative'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['color', 'theme', 'as', 'forwardedAs']),
-    },
-};
-
-export default meta;
-
-type StorySpinnerProps = ComponentProps<typeof Spinner>;
-
-export const Default: StoryObj<StorySpinnerProps> = {
-    args: {
-        size: 32,
-        view: 'default',
-    },
-};
-
-const StyledWrapper = styled.div<{ $loading?: boolean }>`
-    &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-
-        content: '';
-        display: none;
-        background: var(--surface-transparent-primary);
-    }
-
-    ${({ $loading }) =>
-        $loading &&
-        css`
-            &::after {
-                display: block;
-            }
-        `}
-`;
-
-const StyledSpinner = styled(Spinner)`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-`;
-
-const StoryLive = (props: StorySpinnerProps) => {
-    const [loading, setLoading] = useState(false);
-    const timeoutRef = useRef(null);
-
-    useEffect(() => {
-        if (loading) {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-
-            timeoutRef.current = setTimeout(() => setLoading(false), 10000);
-        }
-    }, [loading]);
-
-    return (
-        <StyledWrapper $loading={loading}>
-            <BodyL id="example-live-text" mb="8x">
-                При нажатии кнопки приложение будет на 10 секунд переведено в состояние загрузки, отображая при этом
-                индикатор Spinner, который не может быть сфокусирован и не доступен для взаимодействия. Через 10 секунд
-                кнопку снова станет возможно нажать.
-            </BodyL>
-            <Button
-                text={loading ? 'Загрузка' : 'Нажмите'}
-                onClick={() => setLoading(true)}
-                aria-busy={loading}
-                aria-describedby="example-live-text"
-                disabled={loading}
-            />
-            {loading && <StyledSpinner {...props} />}
-        </StyledWrapper>
-    );
-};
-
-export const Live: StoryObj<StorySpinnerProps> = {
-    render: (args) => <StoryLive {...args} />,
-};

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

@@ -1,191 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-import { IconMic } from '@salutejs/plasma-icons';
-
-import { Steps } from './Steps';
-
-import type { StepItemProps } from '.';
-
-const meta: Meta<typeof Steps> = {
-    title: 'Navigation/Steps',
-    decorators: [InSpacingDecorator],
-    component: Steps,
-};
-
-export default meta;
-
-type Story = StoryObj<ComponentProps<typeof Steps>>;
-
-const renderIndicator = ({ status, size }) => {
-    let iconSize;
-    if (size === 'xs' || size === 's') {
-        iconSize = 'xs';
-    } else if (status === 'active') {
-        iconSize = 's';
-    } else {
-        iconSize = 'xs';
-    }
-
-    return <IconMic color="inherit" size={iconSize} />;
-};
-
-const DefaultStory = (args) => {
-    const {
-        maxWidth,
-        title,
-        content,
-        size,
-        indicatorType,
-        quantity,
-        hasContent,
-        loading,
-        disabled,
-        simple,
-        ...rest
-    } = args;
-
-    const innerTitle = title || 'Title';
-
-    const [items, setItems] = useState([]);
-
-    useEffect(() => {
-        const newItems = new Array(quantity).fill(null).map((_, index) => {
-            const indicator = index + 1;
-            const status = index === 0 ? 'active' : 'inactive';
-
-            if (simple) {
-                return {
-                    indicator,
-                    status,
-                };
-            }
-
-            return {
-                title: innerTitle,
-                content,
-                indicator,
-                status,
-            };
-        });
-
-        setItems(newItems);
-    }, [loading, quantity, simple]);
-
-    useEffect(() => {
-        setItems((curItems) =>
-            curItems.map((item, index) => {
-                if (indicatorType === 'numbered') {
-                    return simple
-                        ? { ...item, indicator: index + 1 }
-                        : { ...item, title: innerTitle, content, indicator: index + 1 };
-                }
-
-                if (indicatorType === 'bullet') {
-                    return simple
-                        ? { ...item, indicator: undefined }
-                        : { ...item, title: innerTitle, content, indicator: undefined };
-                }
-
-                if (indicatorType === 'icon') {
-                    return simple
-                        ? { ...item, indicator: renderIndicator }
-                        : { ...item, title: innerTitle, content, indicator: renderIndicator };
-                }
-
-                return item;
-            }),
-        );
-    }, [indicatorType, innerTitle, content, simple]);
-
-    useEffect(() => {
-        setItems((curItems) => curItems.map((item) => ({ ...item, disabled })));
-    }, [disabled]);
-
-    const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
-        if (prevIndex !== undefined) {
-            items[prevIndex].status = 'completed';
-        }
-
-        items[index].status = 'active';
-
-        setItems([...items]);
-    };
-
-    return (
-        <div style={{ maxWidth, height: '600px' }}>
-            <Steps
-                size={size}
-                items={items}
-                onChange={onChange}
-                hasLoader={loading}
-                hasContent={hasContent}
-                {...rest}
-            />
-        </div>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        maxWidth: '100%',
-        quantity: 6,
-        size: 's',
-        title: 'Title',
-        content: 'Content',
-        contentAlign: 'left',
-        indicatorType: 'numbered',
-        orientation: 'horizontal',
-        hasLine: true,
-        hasContent: 'all',
-        disabled: false,
-        loading: false,
-        simple: false,
-    },
-    argTypes: {
-        maxWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        size: {
-            options: ['s'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentAlign: {
-            options: ['left', 'center'],
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        indicatorType: {
-            options: ['numbered', 'bullet', 'icon'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        hasContent: {
-            options: ['all', 'active', 'none'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        simple: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        ...disableProps(['view', 'size']),
-    },
-    render: (args) => <DefaultStory {...args} />,
-};

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

@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Switch } from '.';
-import type { SwitchProps } from '.';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const meta: Meta<SwitchProps> = {
-    title: 'Data Entry/Switch',
-    component: Switch,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        label: {
-            control: {
-                type: 'text',
-            },
-        },
-        description: {
-            control: {
-                type: 'text',
-            },
-        },
-        labelPosition: {
-            options: ['before', 'after'],
-            control: { type: 'select' },
-        },
-        toggleSize: {
-            control: { type: 'select' },
-        },
-        ...disableProps([
-            'id',
-            'onFocus',
-            'onBlur',
-            'onChange',
-            'value',
-            'checked',
-            'focused',
-            'pressed',
-            'outlined',
-            'theme',
-            'as',
-            'forwardedAs',
-            'view',
-            'placeholder',
-            'name',
-            'type',
-            'readOnly',
-            'required',
-            'minLength',
-            'maxLength',
-            'size',
-        ]),
-    },
-    args: {
-        label: 'Label',
-        description: 'Description',
-        labelPosition: 'before',
-    },
-};
-
-export default meta;
-
-const StyledWrapper = styled.div`
-    width: 13.75rem;
-`;
-
-const StoryDefault = (args: SwitchProps) => {
-    const value = 0;
-    const [checked, setChecked] = useState(true);
-
-    return (
-        <StyledWrapper>
-            <Switch
-                value={value}
-                checked={checked}
-                onChange={(event) => {
-                    setChecked(event.target.checked);
-                    onChange(event);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                {...args}
-            />
-        </StyledWrapper>
-    );
-};
-
-export const Default: StoryObj<SwitchProps> = {
-    args: {
-        toggleSize: 'l',
-        disabled: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};