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

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

@@ -1,343 +0,0 @@
-import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconSearch, IconSber, IconArrowRight } from '@salutejs/plasma-icons';
-
-import { IconButton } from '../IconButton';
-
-import { Range } from './Range';
-
-const onChangeFirstValue = action('onChangeFirstValue');
-const onChangeSecondValue = action('onChangeSecondValue');
-const onSearchFirstValue = action('onSearchFirstValue');
-const onSearchSecondValue = action('onSearchSecondValue');
-const onFocusFirstTextfield = action('onFocusFirstTextfield');
-const onFocusSecondTextfield = action('onFocusSecondTextfield');
-const onBlurFirstTextfield = action('onBlurFirstTextfield');
-const onBlurSecondTextfield = action('onBlurSecondTextfield');
-
-const sizes = ['s'];
-const views = ['default'];
-const dividers = ['none', 'dash', 'icon'];
-const requiredPlacements = ['left', 'right'];
-
-const meta: Meta<typeof Range> = {
-    title: 'Data Entry/Range',
-    component: Range,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        requiredPlacement: {
-            options: requiredPlacements,
-            control: {
-                type: 'select',
-            },
-            if: {
-                arg: 'required',
-                truthy: true,
-            },
-        },
-        hasRequiredIndicator: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'required',
-                truthy: true,
-            },
-        },
-        ...disableProps(['view']),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof Range> & {
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-    enableFirstTextfieldContentLeft: boolean;
-    enableSecondTextfieldContentLeft: boolean;
-    enableFirstTextfieldContentRight: boolean;
-    enableSecondTextfieldContentRight: boolean;
-};
-
-const getSizeForIcon = (size) => {
-    const map = {
-        m: 's',
-        l: 's',
-        s: 's',
-        xs: 'xs',
-    };
-    if (map[size]) {
-        return map[size];
-    }
-
-    return size;
-};
-
-const ActionButton = ({ size, readOnly }) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return (
-        <IconButton view="clear" size={size} disabled={readOnly}>
-            <IconSearch color={readOnly ? 'var(--text-secondary)' : 'inherit'} size={getSizeForIcon(size)} />
-        </IconButton>
-    );
-};
-
-const StoryDefault = ({
-    dividerVariant,
-    enableContentLeft,
-    enableContentRight,
-    firstTextfieldTextBefore,
-    secondTextfieldTextBefore,
-    enableFirstTextfieldContentLeft,
-    enableSecondTextfieldContentLeft,
-    enableFirstTextfieldContentRight,
-    enableSecondTextfieldContentRight,
-    size,
-    ...rest
-}: StoryPropsDefault) => {
-    const [firstValue, setFirstValue] = useState('');
-    const [secondValue, setSecondValue] = useState('');
-
-    const iconSize = 's';
-    const showDividerIcon = dividerVariant === 'icon';
-    const showDefaultTextBefore = dividerVariant === 'none';
-
-    const dividerIconProps = {
-        dividerIcon: showDividerIcon ? <IconArrowRight size={iconSize} /> : null,
-        dividerVariant,
-    };
-
-    return (
-        <Range
-            size={size}
-            firstValue={firstValue}
-            secondValue={secondValue}
-            contentLeft={enableContentLeft ? <IconSber color="inherit" size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
-            firstTextfieldContentLeft={
-                enableFirstTextfieldContentLeft ? <IconSber color="inherit" size={iconSize} /> : undefined
-            }
-            firstTextfieldContentRight={
-                enableFirstTextfieldContentRight ? (
-                    <IconSber color="inherit" size={iconSize} readOnly={rest.readOnly} />
-                ) : undefined
-            }
-            secondTextfieldContentLeft={
-                enableSecondTextfieldContentLeft ? <IconSber color="inherit" size={iconSize} /> : undefined
-            }
-            secondTextfieldContentRight={
-                enableSecondTextfieldContentRight ? (
-                    <IconSber color="inherit" size={iconSize} readOnly={rest.readOnly} />
-                ) : undefined
-            }
-            firstTextfieldTextBefore={
-                showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
-            }
-            secondTextfieldTextBefore={
-                showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
-            }
-            onChangeFirstValue={(e) => {
-                setFirstValue(e.target.value);
-                onChangeFirstValue(e, e.target.value);
-            }}
-            onChangeSecondValue={(e) => {
-                setSecondValue(e.target.value);
-                onChangeSecondValue(e, e.target.value);
-            }}
-            onSearchFirstValue={onSearchFirstValue}
-            onSearchSecondValue={onSearchSecondValue}
-            onFocusFirstTextfield={onFocusFirstTextfield}
-            onFocusSecondTextfield={onFocusSecondTextfield}
-            onBlurFirstTextfield={onBlurFirstTextfield}
-            onBlurSecondTextfield={onBlurSecondTextfield}
-            {...dividerIconProps}
-            {...rest}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    argTypes: {
-        dividerVariant: {
-            options: dividers,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        label: 'Лейбл',
-        leftHelper: 'Подсказка к полю',
-        firstPlaceholder: 'Заполните поле 1',
-        secondPlaceholder: 'Заполните поле 2',
-        size: 's',
-        view: 'default',
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        disabled: false,
-        readOnly: false,
-        firstTextfieldTextBefore: 'С',
-        secondTextfieldTextBefore: 'ПО',
-        enableContentLeft: true,
-        enableContentRight: true,
-        dividerVariant: 'dash',
-        enableFirstTextfieldContentLeft: false,
-        enableFirstTextfieldContentRight: false,
-        enableSecondTextfieldContentLeft: false,
-        enableSecondTextfieldContentRight: false,
-        firstValueError: false,
-        secondValueError: false,
-        firstValueSuccess: false,
-        secondValueSuccess: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
-    const [firstValue, setFirstValue] = useState('');
-    const [secondValue, setSecondValue] = useState('');
-
-    const [firstValueError, setFirstValueError] = useState(false);
-    const [secondValueError, setSecondValueError] = useState(false);
-
-    const [firstValueSuccess, setFirstValueSuccess] = useState(false);
-    const [secondValueSuccess, setSecondValueSuccess] = useState(false);
-
-    const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
-
-    const handleChangeValue = (
-        e: ChangeEvent<HTMLInputElement>,
-        setter: Dispatch<SetStateAction<string>>,
-        error: boolean,
-        errorSetter: Dispatch<SetStateAction<boolean>>,
-        success: boolean,
-        successSetter: Dispatch<SetStateAction<boolean>>,
-    ) => {
-        const { value } = e.target;
-        if (!checkValue(value)) {
-            return;
-        }
-
-        if (error) {
-            errorSetter(false);
-        }
-
-        if (success) {
-            successSetter(false);
-        }
-
-        setter(value);
-    };
-
-    const firstValueConstraint = (value: number) =>
-        value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
-    const secondValueConstraint = (value: number) =>
-        value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
-
-    const handleCommitValue = (
-        value: string,
-        constraint: (currentValue: number) => boolean,
-        errorSetter: Dispatch<SetStateAction<boolean>>,
-        successSetter: Dispatch<SetStateAction<boolean>>,
-    ) => {
-        if (!value) {
-            return;
-        }
-
-        if (!checkValue(value)) {
-            return errorSetter(true);
-        }
-
-        if (constraint(Number(value))) {
-            return errorSetter(true);
-        }
-
-        successSetter(true);
-    };
-
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    return (
-        <Range
-            dividerVariant="dash"
-            size={size}
-            firstValue={firstValue}
-            secondValue={secondValue}
-            firstValueError={firstValueError}
-            secondValueError={secondValueError}
-            firstValueSuccess={firstValueSuccess}
-            secondValueSuccess={secondValueSuccess}
-            contentLeft={enableContentLeft ? <IconSber color="inherit" size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
-            onChangeFirstValue={(e) => {
-                handleChangeValue(
-                    e,
-                    setFirstValue,
-                    firstValueError,
-                    setFirstValueError,
-                    firstValueSuccess,
-                    setFirstValueSuccess,
-                );
-            }}
-            onChangeSecondValue={(e) => {
-                handleChangeValue(
-                    e,
-                    setSecondValue,
-                    secondValueError,
-                    setSecondValueError,
-                    secondValueSuccess,
-                    setSecondValueSuccess,
-                );
-            }}
-            onSearchFirstValue={(e) => {
-                const { value } = e.target as HTMLInputElement;
-                handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
-            }}
-            onSearchSecondValue={(e) => {
-                const { value } = e.target as HTMLInputElement;
-                handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
-            }}
-            onFocusFirstTextfield={onFocusFirstTextfield}
-            onFocusSecondTextfield={onFocusSecondTextfield}
-            onBlurFirstTextfield={onBlurFirstTextfield}
-            onBlurSecondTextfield={onBlurSecondTextfield}
-            {...rest}
-        />
-    );
-};
-
-export const Demo: StoryObj<StoryPropsDefault> = {
-    args: {
-        label: 'Введите кол-во товара',
-        leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
-        firstPlaceholder: '1',
-        secondPlaceholder: '5',
-        size: 's',
-        view: 'default',
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        disabled: false,
-        readOnly: false,
-        firstTextfieldTextBefore: '',
-        secondTextfieldTextBefore: '',
-        enableContentLeft: true,
-        enableContentRight: true,
-    },
-    render: (args) => <StoryDemo {...args} />,
-};

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

@@ -1,125 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
-import { IconKeyFill, IconKeyOutline, IconLockFill } from '@salutejs/plasma-icons';
-import { ratingClasses } from '@salutejs/plasma-new-hope/emotion';
-
-import { Rating } from './Rating';
-import { config } from './Rating.config';
-
-const { views, sizes } = getConfigVariations(config);
-const scorePrecision = [1, 2];
-const valuePlacements = ['before', 'after'];
-const iconsCount = [1, 5, 10];
-const helperTextStretching = ['fixed', 'filled'];
-
-const meta: Meta<typeof Rating> = {
-    title: 'Data Display/Rating',
-    component: Rating,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        value: {
-            control: {
-                type: 'number',
-            },
-        },
-        precision: {
-            options: scorePrecision,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'hasValue', truthy: true },
-        },
-        valuePlacement: {
-            options: valuePlacements,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'hasValue', truthy: true },
-        },
-        hasIcons: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'hasValue', truthy: true },
-        },
-        iconQuantity: {
-            options: iconsCount,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        helperTextStretching: {
-            options: helperTextStretching,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'helperText', neq: '' },
-        },
-        ...disableProps(['iconSlot', 'iconSlotOutline', 'iconSlotHalf']),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof Rating> & {
-    hasValue?: boolean;
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        view: 'default',
-        size: 's',
-        hasValue: true,
-        value: 3.8,
-        precision: 1,
-        valuePlacement: 'before',
-        hasIcons: true,
-        iconQuantity: 5,
-        helperText: 'Helper text',
-        helperTextStretching: 'filled',
-    },
-    render: ({ hasIcons, hasValue, ...args }) => (
-        <Rating hasIcons={hasValue ? hasIcons : true} hasValue={hasValue} {...args} />
-    ),
-};
-
-export const CustomIcons: StoryObj<StoryPropsDefault> = {
-    argTypes: {
-        ...disableProps(['size', 'view']),
-    },
-    args: {
-        view: 'default',
-        size: 's',
-        hasValue: true,
-        value: 3.8,
-        precision: 1,
-        valuePlacement: 'before',
-        hasIcons: true,
-        iconQuantity: 5,
-        helperText: 'Helper text',
-        helperTextStretching: 'filled',
-    },
-    render: ({ hasIcons, hasValue, ...args }) => (
-        <Rating
-            hasIcons={hasValue ? hasIcons : true}
-            hasValue={hasValue}
-            iconSlot={<IconKeyFill size="s" className={ratingClasses.customIconSizing} />}
-            iconSlotOutline={<IconLockFill size="s" className={ratingClasses.customIconSizing} />}
-            iconSlotHalf={<IconKeyOutline size="s" className={ratingClasses.customIconSizing} />}
-            {...args}
-        />
-    ),
-};

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

@@ -1,162 +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 { IconMic } from '@salutejs/plasma-icons';
-
-import { Counter } from '../Counter/Counter';
-
-import { SegmentItem, SegmentGroup } from './Segment';
-
-import { SegmentProvider } from '.';
-
-const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
-
-const segmentItemViews = ['default', 'secondary'];
-type Size = typeof sizes[number];
-
-type CustomStoryProps = {
-    itemQuantity: number;
-    contentLeft: string;
-    contentRight: string;
-    segmentItemView?: 'default' | 'secondary';
-    singleSelectedRequired?: boolean;
-};
-
-type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStoryProps;
-
-const sizes = ['xs'] as const;
-
-const getContentLeft = (contentLeftOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
-};
-
-const getContentRight = (contentRightOption: string, size: Size) => {
-    switch (contentRightOption) {
-        case 'icon':
-            return <IconMic size="xs" color="inherit" />;
-        case 'counter':
-            return <Counter size="s" count={1} view="positive" />;
-        case 'text':
-            return 'Text';
-        default:
-            return undefined;
-    }
-};
-
-const meta: Meta<StorySegmentProps> = {
-    title: 'Data Entry/Segment',
-    decorators: [InSpacingDecorator],
-    component: SegmentGroup,
-    argTypes: {
-        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip', 'size']),
-        stretch: {
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'orientation', eq: 'horizontal' },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: {
-                type: 'select',
-            },
-        },
-        selectionMode: {
-            options: ['single', 'multiple'],
-            control: {
-                type: 'select',
-            },
-        },
-        segmentItemView: {
-            options: segmentItemViews,
-            control: {
-                type: 'select',
-            },
-        },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-const StoryDefault = (props: StorySegmentProps) => {
-    const {
-        singleSelectedRequired,
-        disabled,
-        itemQuantity,
-        size,
-        stretch,
-        orientation,
-
-        segmentItemView,
-        contentLeft: contentLeftOption,
-        contentRight: contentRightOption,
-        ...args
-    } = props;
-    const items = Array(itemQuantity).fill(0);
-    const isVertical = orientation === 'vertical';
-
-    return (
-        <SegmentProvider singleSelectedRequired={singleSelectedRequired}>
-            <SegmentGroup
-                stretch={stretch}
-                disabled={disabled}
-                clip={false}
-                size={size}
-                orientation={orientation}
-                {...args}
-            >
-                {items.map((_, i) => (
-                    <SegmentItem
-                        view={segmentItemView}
-                        label={`Label ${i}`}
-                        value={`label_${i}`}
-                        size={size}
-                        key={`label_${i}`}
-                        contentLeft={getContentLeft(contentLeftOption, size)}
-                        contentRight={getContentRight(contentRightOption, size)}
-                        {...args}
-                    >
-                        {`Label${i + 1}`}
-                    </SegmentItem>
-                ))}
-            </SegmentGroup>
-        </SegmentProvider>
-    );
-};
-
-export const Default: StoryObj<StorySegmentProps> = {
-    args: {
-        itemQuantity: 8,
-        size: 'xs',
-        segmentItemView: 'default',
-        selectionMode: 'single',
-        pilled: false,
-        filledBackground: false,
-        hasBackground: false,
-        disabled: false,
-        stretch: false,
-        singleSelectedRequired: false,
-        orientation: 'horizontal',
-        contentRight: 'none',
-        contentLeft: 'none',
-    },
-    argTypes: {
-        ...disableProps(['filledBackground', 'view', 'selectionMode', 'clip']),
-    },
-    render: (args: StorySegmentProps) => <StoryDefault {...args} />,
-};