@salutejs/sdds-serv 0.314.0-canary.2032.15771800756.0 → 0.314.0-canary.2040.15828624275.0

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

@@ -1,439 +0,0 @@
-import React, { ComponentProps, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { InSpacingDecorator, disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
-import type { PopoverPlacement } from '@salutejs/plasma-new-hope';
-import { IconBellFill, IconLockOutline } from '@salutejs/plasma-icons';
-
-import { TextField } from './TextField';
-import { config } from './TextField.config';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-const onSearch = action('onSearch');
-const onChipsChange = action('onChipsChange');
-
-const { views, sizes } = getConfigVariations(config);
-
-const chipViews = ['default', 'secondary', 'accent', 'positive', 'warning', 'negative'];
-const hintViews = ['default'];
-const hintSizes = ['m', 's'];
-const hintTriggers = ['hover', 'click'];
-const labelPlacements = ['outer', 'inner'];
-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 StyledIconLockOutline = styled(IconLockOutline)`
-    opacity: 0.4;
-`;
-
-const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    if (readOnly) {
-        return <StyledIconLockOutline size={iconSize} color="var(--text-secondary)" />;
-    }
-
-    return <IconComponent size={iconSize} color="inherit" />;
-};
-
-const meta: Meta<typeof TextField> = {
-    title: 'Data Entry/TextField',
-    component: TextField,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        requiredPlacement: {
-            options: ['left', 'right'],
-            control: {
-                type: 'select',
-            },
-            if: {
-                arg: 'optional',
-                truthy: false,
-            },
-        },
-        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,
-            },
-        },
-        hasDivider: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'clear',
-                truthy: true,
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        maxLength: {
-            control: {
-                type: 'number',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        keepPlaceholder: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'labelPlacement',
-                eq: 'inner',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        titleCaption: {
-            control: { type: 'text' },
-        },
-        leftHelper: {
-            control: { type: 'text' },
-        },
-        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,
-            },
-        },
-        chipType: {
-            control: 'select',
-            options: ['default', 'text'],
-        },
-        ...disableProps([
-            'contentLeft',
-            'contentRight',
-            'onChange',
-            'onSearch',
-            'onChangeChips',
-            'enumerationType',
-            'values',
-            'hintTargetIcon',
-            'hintOffset',
-            'hintContentLeft',
-            'chips',
-            'chipValidator',
-            'onFocus',
-            'onBlur',
-            'name',
-            'value',
-            'type',
-            'minLength',
-            'maxLength',
-            'checked',
-        ]),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = Omit<
-    ComponentProps<typeof TextField>,
-    | 'helperBlock'
-    | 'contentLeft'
-    | 'htmlSize'
-    | 'contentRight'
-    | 'type'
-    | 'name'
-    | 'onFocus'
-    | 'onBlur'
-    | 'onChange'
-    | 'value'
-    | 'checked'
-    | 'maxLength'
-    | 'minLength'
-    | 'required'
-    | 'enumerationType'
-    | 'chips'
-    | 'onChangeChips'
-> & {
-    hasHint: boolean;
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryDemo = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsDefault) => {
-    const [text, setText] = useState('Значение поля');
-
-    const contentRight = enableContentRight || readOnly ? getIcon(IconBellFill, rest.size, readOnly) : undefined;
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '2rem',
-                width: '70%',
-                margin: '0 auto',
-            }}
-        >
-            <TextField
-                {...rest}
-                enumerationType="plain"
-                value={text}
-                readOnly={readOnly}
-                contentLeft={enableContentLeft ? getIcon(IconBellFill, rest.size) : undefined}
-                contentRight={contentRight}
-                view={view}
-                onChange={(e) => {
-                    setText(e.target.value);
-                    onChange(e.target.value);
-                }}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onSearch={onSearch}
-            />
-
-            <TextField
-                {...rest}
-                label="Uncontrolled TextField"
-                defaultValue="Дефолтное значение"
-                enumerationType="plain"
-                contentLeft={enableContentLeft ? getIcon(IconBellFill, rest.size) : undefined}
-                contentRight={contentRight}
-                view={view}
-                readOnly={readOnly}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onSearch={onSearch}
-            />
-        </div>
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        id: 'example-text-field',
-        size: 'm',
-        view: 'default',
-        label: 'Лейбл',
-        labelPlacement: 'outer',
-        keepPlaceholder: false,
-        titleCaption: 'Подпись к полю',
-        textBefore: '',
-        textAfter: '',
-        placeholder: 'Заполните поле',
-        leftHelper: 'Подсказка к полю',
-        disabled: false,
-        readOnly: false,
-        enableContentLeft: true,
-        enableContentRight: true,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        clear: false,
-        hasDivider: false,
-        hasHint: true,
-        hintText: 'Текст подсказки',
-        hintTrigger: 'hover',
-        hintView: 'default',
-        hintSize: 'm',
-        hintTargetPlacement: 'outer',
-        hintPlacement: 'auto',
-        hintWidth: '10rem',
-        hintHasArrow: true,
-    },
-    parameters: {
-        controls: {
-            exclude: ['chipType', 'chipView'],
-        },
-    },
-    render: (args) => <StoryDemo {...args} />,
-};
-
-type StoryPropsChips = Omit<
-    ComponentProps<typeof TextField>,
-    | 'helperBlock'
-    | 'contentLeft'
-    | 'htmlSize'
-    | 'contentRight'
-    | 'type'
-    | 'name'
-    | 'onFocus'
-    | 'onBlur'
-    | 'onChange'
-    | 'onSearch'
-    | 'value'
-    | 'checked'
-    | 'maxLength'
-    | 'minLength'
-    | 'enumerationType'
-> & {
-    hasHint: boolean;
-    enableContentLeft: boolean;
-    enableContentRight: boolean;
-};
-
-const StoryChips = ({ enableContentLeft, enableContentRight, view, readOnly, ...rest }: StoryPropsChips) => {
-    const [text, setText] = useState('Значение поля');
-
-    const contentRight = enableContentRight || readOnly ? getIcon(IconBellFill, rest.size, readOnly) : undefined;
-
-    const validateChip = (value) => (value === '1 value' ? { view: 'negative' } : {});
-
-    return (
-        <TextField
-            {...rest}
-            enumerationType="chip"
-            value={text}
-            contentLeft={enableContentLeft ? getIcon(IconBellFill, rest.size) : undefined}
-            contentRight={contentRight}
-            view={view}
-            readOnly={readOnly}
-            onChange={(e) => {
-                setText(e.target.value);
-                onChange(e.target.value);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onChangeChips={onChipsChange}
-            chipValidator={validateChip}
-            style={{
-                width: '70%',
-                margin: '0 auto',
-            }}
-        />
-    );
-};
-
-export const Chips: StoryObj<StoryPropsChips> = {
-    argTypes: {
-        chipView: {
-            options: chipViews,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        ...Default.args,
-        leftHelper: 'Для первого чипа валидация вернула view="negative"',
-        chipView: 'secondary',
-        chips: ['1 value', '2 value', '3 value', '4 value'],
-        chipType: 'default',
-    },
-    render: (args) => <StoryChips {...args} />,
-};

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

@@ -1,115 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { TextField } from '../TextField/TextField';
-
-import { TextFieldGroup } from './TextFieldGroup';
-
-type StoryProps = Omit<ComponentProps<typeof TextFieldGroup>, 'gap'> & {
-    itemsCount?: number;
-    gapDefaultShape?: string;
-    gapSegmentedShape?: string;
-};
-type Story = StoryObj<StoryProps>;
-
-const sizes = ['l', 'm', 's', 'xs'];
-const orientationValues = ['horizontal', 'vertical'];
-const gapDefaultValues = ['dense', 'wide'];
-const gapSegmentedValues = ['none', 'dense'];
-const shapeValues = ['segmented', 'default'];
-const stretchingValues = ['auto', 'filled'];
-
-const meta: Meta<typeof TextFieldGroup> = {
-    title: 'Data Entry/TextFieldGroup',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        orientation: {
-            options: orientationValues,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        shape: {
-            options: shapeValues,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['gap']),
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    argTypes: {
-        gapDefaultShape: {
-            options: gapDefaultValues,
-            control: { type: 'select' },
-            if: { arg: 'shape', eq: 'default' },
-        },
-        gapSegmentedShape: {
-            options: gapSegmentedValues,
-            control: { type: 'select' },
-            if: { arg: 'shape', eq: 'segmented' },
-        },
-    },
-    args: {
-        size: 'm',
-        shape: 'default',
-        gapDefaultShape: 'dense',
-        gapSegmentedShape: 'dense',
-        orientation: 'horizontal',
-        itemsCount: 5,
-        stretching: 'auto',
-    },
-    render: ({ itemsCount, gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
-        return (
-            <TextFieldGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
-                {Array(itemsCount)
-                    .fill(true)
-                    .map((_, i) => (
-                        <TextField placeholder={`input #${i}`} />
-                    ))}
-            </TextFieldGroup>
-        );
-    },
-};
-
-export const CustomTextFields: Story = {
-    args: {
-        ...Default.args,
-        isCommonTextFieldStyles: false,
-    },
-    argTypes: {
-        ...Default.argTypes,
-        ...disableProps(['itemsCount']),
-    },
-    render: ({ gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
-        return (
-            <>
-                <h3>Группа TextField с разными размерами</h3>
-                <TextFieldGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
-                    <TextField placeholder="Размер l" size="l" />
-                    <TextField placeholder="Размер m" size="m" />
-                    <TextField placeholder="Размер s" size="s" />
-                    <TextField placeholder="Размер xs" size="xs" />
-                </TextFieldGroup>
-            </>
-        );
-    },
-};

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

@@ -1,155 +0,0 @@
-import React, { ComponentProps } 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 { Button } from '../Button';
-
-import { ToastController, ToastProvider } from './Toast';
-
-import { Toast, useToast } from '.';
-
-const views = ['default', 'positive', 'negative'];
-
-const meta: Meta<typeof ToastController> = {
-    title: 'Overlay/Toast',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        ...disableProps(['closeIconType', 'size', 'role', 'onShow', 'onHide', 'contentLeft']),
-    },
-};
-
-export default meta;
-
-type StoryComponentProps = ComponentProps<typeof Toast> & {
-    enableContentLeft?: boolean;
-};
-type StoryComponent = StoryObj<StoryComponentProps>;
-
-type StoryProps = ComponentProps<typeof ToastController> & {
-    text: string;
-    timeout?: number;
-    enableContentLeft?: boolean;
-};
-type Story = StoryObj<StoryProps>;
-
-const BellIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-        <path
-            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-const ToastContainer = styled.div`
-    transform: translateX(50%);
-`;
-
-const Container = styled.div`
-    display: flex;
-    gap: 0.5rem;
-`;
-
-export const ToastComponent: StoryComponent = {
-    args: {
-        text: 'Текст всплывающего уведомления',
-        textColor: undefined,
-        view: 'default',
-        closeIconType: 'default',
-        size: 'm',
-        hasClose: true,
-        enableContentLeft: true,
-        pilled: false,
-    },
-    render: ({ enableContentLeft, ...args }) => (
-        <ToastContainer>
-            <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
-        </ToastContainer>
-    ),
-};
-
-const StoryLiveDemo = ({
-    text,
-    position,
-    timeout,
-    fade,
-    offset,
-    pilled,
-    view,
-    size,
-    hasClose,
-    enableContentLeft,
-    closeIconType,
-    textColor,
-}: StoryProps) => {
-    const { showToast, hideToast } = useToast();
-    const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
-
-    return (
-        <Container>
-            <Button onClick={hideToast}>Скрыть уведомление</Button>
-            <Button
-                onClick={() => {
-                    showToast({
-                        text,
-                        position,
-                        offset,
-                        timeout,
-                        fade,
-                        contentLeft,
-                        pilled,
-                        view,
-                        size,
-                        hasClose,
-                        closeIconType,
-                        textColor,
-                        onHide: action('onHide'),
-                        onShow: action('onShow'),
-                    });
-                }}
-            >
-                Показать уведомление
-            </Button>
-        </Container>
-    );
-};
-
-export const LiveDemo: Story = {
-    argTypes: {
-        position: {
-            options: ['top', 'bottom'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    args: {
-        ...ToastComponent.args,
-        position: 'bottom',
-        fade: true,
-        offset: 0,
-        timeout: 3000,
-        role: 'alert',
-    },
-    parameters: {
-        chromatic: {
-            disable: true,
-        },
-    },
-    render: (args) => (
-        <ToastProvider>
-            <StoryLiveDemo {...args} />
-        </ToastProvider>
-    ),
-};