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

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

@@ -1,228 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { IconBell, IconLockOutline } from '@salutejs/plasma-icons';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { TextArea } from './TextArea';
-
-const labelPlacements = ['inner', 'outer'];
-
-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" />;
-};
-
-type StoryTextAreaPropsCustom = {
-    hasHint?: boolean;
-    enableContentRight?: boolean;
-};
-
-type StoryTextAreaProps = ComponentProps<typeof TextArea> & StoryTextAreaPropsCustom;
-
-const meta: Meta<StoryTextAreaProps> = {
-    title: 'Data Entry/TextArea',
-    decorators: [InSpacingDecorator],
-    component: TextArea,
-    argTypes: {
-        requiredPlacement: {
-            options: ['left', 'right'],
-            control: {
-                type: 'select',
-            },
-        },
-        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,
-            },
-        },
-        clear: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'select',
-            },
-        },
-        hasDivider: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'clear',
-                truthy: true,
-            },
-        },
-        cols: {
-            control: {
-                type: 'number',
-            },
-            if: {
-                arg: 'clear',
-                truthy: false,
-            },
-        },
-        rows: {
-            control: {
-                type: 'number',
-            },
-            if: {
-                arg: 'clear',
-                truthy: false,
-            },
-        },
-        helperText: {
-            control: { type: 'text' },
-        },
-        width: {
-            control: { type: 'text' },
-        },
-        height: {
-            control: { type: 'text' },
-        },
-        leftHelper: {
-            control: { type: 'text' },
-        },
-        titleCaption: {
-            control: { type: 'text' },
-        },
-        rightHelper: {
-            control: { type: 'text' },
-        },
-        ...disableProps([
-            'size',
-            'helperBlock',
-            'helperText',
-            '$isFocused',
-            'contentRight',
-            'autoComplete',
-            'autoFocus',
-            'dirName',
-            'form',
-            'minLength',
-            'maxLength',
-            'name',
-            'value',
-            'wrap',
-            'theme',
-            'as',
-            'forwardedAs',
-            'onChange',
-            'onFocus',
-            'onBlur',
-            'leftHelperPlacement',
-            'status',
-            'resize',
-            'height',
-            'width',
-            'helperText',
-            'labelPlacement',
-            'hintText',
-            'hintTrigger',
-            'hintView',
-            'hintSize',
-            'hintTargetIcon',
-            'hintTargetPlacement',
-            'hintPlacement',
-            'hintHasArrow',
-            'hintOffset',
-            'hintWidth',
-            'hintContentLeft',
-            'hintView',
-            'hintOpened',
-        ]),
-    },
-    args: {
-        id: 'example-textarea',
-        view: 'default',
-        size: 's',
-        enableContentRight: true,
-        label: 'Лейбл',
-        labelPlacement: 'outer',
-        placeholder: 'Заполните многострочное поле',
-        titleCaption: 'Подпись к полю',
-        leftHelper: 'Подсказка к полю слева',
-        rightHelper: 'Подсказка к полю справа',
-        disabled: false,
-        readOnly: false,
-        autoResize: false,
-        minAuto: 0,
-        maxAuto: 0,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
-        hasRequiredIndicator: true,
-        clear: false,
-        hasDivider: false,
-    },
-};
-
-export default meta;
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const StoryDefault = (props: StoryTextAreaProps) => {
-    const [value, setValue] = useState('Значение поля');
-
-    return (
-        <TextArea
-            value={value}
-            contentRight={
-                props.enableContentRight || props.readOnly ? getIcon(IconBell, props.size, props.readOnly) : undefined
-            }
-            onChange={(e) => {
-                setValue(e.target.value);
-                onChange(e);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            style={{
-                width: '70%',
-                margin: '0 auto',
-            }}
-            {...props}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryTextAreaProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};

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

@@ -1,260 +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 { IconPlasma, IconLockOutline } from '@salutejs/plasma-icons';
-import type { PopoverPlacement } from '@salutejs/plasma-new-hope';
-
-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 { views, sizes } = getConfigVariations(config);
-const labelPlacements = ['outer'];
-
-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',
-            },
-        },
-        titleCaption: {
-            control: { type: 'text' },
-        },
-        leftHelper: {
-            control: { type: 'text' },
-        },
-        ...disableProps([
-            'contentLeft',
-            'contentRight',
-            'onChange',
-            'onSearch',
-            'onChangeChips',
-            'enumerationType',
-            'values',
-            'hintView',
-            'hintTargetIcon',
-            'hintOffset',
-            'hintContentLeft',
-            'chipView',
-            'chips',
-            'chipValidator',
-            'onFocus',
-            'onBlur',
-            'name',
-            'value',
-            'type',
-            'minLength',
-            'maxLength',
-            'checked',
-            'hintText',
-            'hintTrigger',
-            'hintView',
-            'hintSize',
-            'hintTargetIcon',
-            'hintTargetPlacement',
-            'hintPlacement',
-            'hintHasArrow',
-            'hintOffset',
-            'hintWidth',
-            'hintContentLeft',
-        ]),
-    },
-};
-
-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(IconPlasma, 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(IconPlasma, 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(IconPlasma, 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',
-        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,
-    },
-    parameters: {
-        controls: {
-            exclude: ['chipType', 'size'],
-        },
-    },
-    render: (args) => <StoryDemo {...args} />,
-};

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

@@ -1,156 +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'];
-
-const meta: Meta<typeof ToastController> = {
-    title: 'Overlay/Toast (Legacy)',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        // NOTE: контролы 'textColor' и 'view' скрыты для сторибуков sdds-cs и sdds-insol
-        ...disableProps(['textColor', 'view', '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: 'thin',
-        size: 's',
-        hasClose: true,
-        enableContentLeft: true,
-        pilled: false,
-    },
-    render: ({ enableContentLeft, ...args }) => (
-        <ToastContainer>
-            <Toast contentLeft={enableContentLeft && <BellIcon width="1.5rem" height="1.5rem" />} {...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="1.5rem" height="1.5rem" />;
-
-    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>
-    ),
-};