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

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

@@ -1,86 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconSaluteOutline } from '@salutejs/plasma-icons';
-
-import { Note } from './Note';
-
-const views = ['default', 'positive', 'warning', 'negative', 'info'];
-const sizes = ['l', 'm', 's', 'xs'];
-const contentBeforeSizes = ['fixed', 'scalable'];
-
-const meta: Meta<typeof Note> = {
-    title: 'Data Display/Note',
-    component: Note,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        contentBeforeSizing: {
-            options: contentBeforeSizes,
-            control: {
-                type: 'inline-radio',
-            },
-            if: { arg: 'enableContentBefore', truthy: true },
-            defaultValue: 'fixed',
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = {
-    enableContentBefore: boolean;
-} & ComponentProps<typeof Note>;
-
-const getIconSize = (size?: string, isScalable?: boolean) => {
-    if (isScalable) {
-        return 'm';
-    }
-
-    if (size === 'l' || size === 'm') {
-        return 's';
-    }
-
-    return 'xs';
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        view: 'default',
-        size: 'l',
-        width: 400,
-        height: 116,
-        stretch: false,
-        title: 'Title',
-        text: 'Text',
-        enableContentBefore: true,
-        contentBeforeSizing: 'fixed',
-        hasClose: false,
-    },
-    render: ({ enableContentBefore, ...args }) => (
-        <div style={{ height: '100vh' }}>
-            <Note
-                contentBefore={
-                    enableContentBefore && (
-                        <IconSaluteOutline
-                            size={getIconSize(args.size, args.contentBeforeSizing === 'scalable')}
-                            color="inherit"
-                        />
-                    )
-                }
-                {...args}
-            />
-        </div>
-    ),
-};

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

@@ -1,246 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconDisclosureRight } from '@salutejs/plasma-icons';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { action } from '@storybook/addon-actions';
-import { addNotification } from '@salutejs/plasma-new-hope';
-import type { NotificationIconPlacement, NotificationLayout } from '@salutejs/plasma-new-hope';
-
-import { Button } from '../Button/Button';
-import { Modal } from '../Modal/Modal';
-import { PopupProvider } from '../Popup';
-
-import { Notification, NotificationsProvider, NotificationPlacement } from './Notification';
-
-const titles = ['Выполнено', 'Внимание', 'Ошибка'];
-const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
-const size = ['xs', 'xxs'];
-const iconPlacement = ['top', 'left'];
-const notificationsPlacements = [
-    'center',
-    'top',
-    'bottom',
-    'right',
-    'left',
-    'top-right',
-    'top-left',
-    'bottom-right',
-    'bottom-left',
-];
-const views = ['default', 'negative', 'positive', 'warning', 'info'];
-
-const longText = `JavaScript frameworks are an essential part of modern front-end web development,
-providing developers with proven tools for building scalable, interactive web applications.
-`;
-
-const getNotificationProps = (i: number) => ({
-    title: titles[i % 3],
-    children: texts[i % 3],
-    size: size[i % 2],
-    iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
-    onTimeoutClose: () => {
-        action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
-    },
-});
-
-const placements = ['top', 'left'];
-
-const meta: Meta<typeof Notification> = {
-    title: 'Overlay/Notification',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-interface StoryDefaultProps {
-    title: string;
-    children: string;
-    iconColor?: string;
-    showCloseIcon: boolean;
-    showLeftIcon: boolean;
-    layout: NotificationLayout;
-    size: 'xs' | 'xxs';
-    iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
-}
-
-const StoryDefault = ({
-    title,
-    children,
-    iconPlacement,
-    size,
-    layout,
-    showLeftIcon,
-    iconColor,
-    ...rest
-}: StoryDefaultProps) => {
-    return (
-        <Notification
-            title={title}
-            icon={showLeftIcon ? <IconDisclosureRight color={iconColor || 'inherit'} /> : ''}
-            iconPlacement={iconPlacement}
-            actions={
-                <Button
-                    text="text"
-                    size={layout === 'horizontal' ? 'xs' : size}
-                    stretch={layout === 'vertical' && size === 'xs'}
-                />
-            }
-            size={size}
-            layout={layout}
-            {...rest}
-        >
-            {children}
-        </Notification>
-    );
-};
-
-export const Default: StoryObj<StoryDefaultProps> = {
-    argTypes: {
-        iconPlacement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: ['xs', 'xxs'],
-            control: {
-                type: 'select',
-            },
-        },
-        layout: {
-            options: ['vertical', 'horizontal'],
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        textColor: {
-            control: 'color',
-        },
-        titleColor: {
-            control: 'color',
-        },
-        iconColor: {
-            control: 'color',
-        },
-        backgroundColor: {
-            control: 'color',
-        },
-    },
-    args: {
-        title: 'Title',
-        children: longText,
-        showCloseIcon: true,
-        showLeftIcon: true,
-        iconPlacement: 'top',
-        layout: 'vertical',
-        view: 'default',
-        size: 'xs',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
-    timeout: number;
-    layout: NotificationLayout;
-    size: 'xs' | 'xxs';
-    iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
-};
-
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
-    const count = useRef(0);
-    const handleClick = useCallback(() => {
-        addNotification(
-            {
-                icon: <IconDisclosureRight color="inherit" />,
-                ...rest,
-                ...getNotificationProps(count.current),
-            },
-            timeout,
-        );
-        count.current++;
-    }, [count, rest]);
-
-    return (
-        <NotificationsProvider placement={placement}>
-            <Button text="Добавить уведомление" onClick={handleClick} />
-        </NotificationsProvider>
-    );
-};
-
-export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
-    argTypes: {
-        layout: {
-            options: ['vertical', 'horizontal'],
-            control: {
-                type: 'select',
-            },
-        },
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        timeout: 3000,
-        role: 'alert',
-        layout: 'vertical',
-        placement: 'bottom-right',
-        width: '',
-        maxWidth: '',
-    },
-    render: (args) => <StoryLiveDemo {...args} />,
-};
-
-type StoryWithModalProps = ComponentProps<typeof Notification> & {
-    timeout: number;
-    placement?: NotificationPlacement;
-};
-
-const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const count = useRef(0);
-    const handleClick = useCallback(() => {
-        addNotification(getNotificationProps(count.current), timeout);
-        count.current++;
-    }, [count]);
-
-    return (
-        <NotificationsProvider placement={placement}>
-            <PopupProvider>
-                <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
-                <Modal opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <div>Hello!</div>
-                    <Button view="default" text="Add notification" onClick={handleClick} />
-                </Modal>
-            </PopupProvider>
-        </NotificationsProvider>
-    );
-};
-
-export const WithModal: StoryObj<StoryLiveDemoProps> = {
-    args: {
-        timeout: 3500,
-        placement: 'bottom-right',
-    },
-    argTypes: {
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => <StoryWithModal {...args} />,
-};

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

@@ -1,186 +0,0 @@
-import React, { 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 { config } from '../TextField/TextField.config';
-
-import { NumberFormat } from './NumberFormat';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-const onSearch = action('onSearch');
-
-const { views, sizes } = getConfigVariations(config);
-
-const labelPlacements = ['outer', 'inner'];
-const thousandsGroupStyles = ['thousand', 'lakh', 'wan', 'none'];
-
-const meta: Meta = {
-    title: 'Data Entry/NumberFormat',
-    component: NumberFormat,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        thousandsGroupStyle: {
-            options: thousandsGroupStyles,
-            control: {
-                type: 'select',
-            },
-        },
-        requiredPlacement: {
-            options: ['left', 'right'],
-            control: {
-                type: 'select',
-            },
-        },
-        required: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'optional',
-                truthy: false,
-            },
-        },
-        optional: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'required',
-                truthy: false,
-            },
-        },
-        hasDivider: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'clear',
-                truthy: true,
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        labelPlacement: {
-            options: labelPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        keepPlaceholder: {
-            control: {
-                type: 'boolean',
-            },
-            if: {
-                arg: 'labelPlacement',
-                eq: 'inner',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        titleCaption: {
-            control: { type: 'text' },
-        },
-        leftHelper: {
-            control: { type: 'text' },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = Omit<
-    ComponentProps<typeof NumberFormat>,
-    | 'helperBlock'
-    | 'contentLeft'
-    | 'htmlSize'
-    | 'contentRight'
-    | 'type'
-    | 'name'
-    | 'onFocus'
-    | 'onBlur'
-    | 'onChange'
-    | 'checked'
-    | 'maxLength'
-    | 'minLength'
-    | 'required'
-    | 'enumerationType'
-    | 'chips'
-    | 'chipView'
-    | 'chipValidator'
-    | 'onChangeChips'
-    | 'hintText'
-    | 'hintView'
-    | 'hintSize'
-    | 'hintTargetIcon'
-    | 'hintPlacement'
-    | 'hintTargetPlacement'
-    | 'hintHasArrow'
-    | 'hintOffset'
-    | 'hintWidth'
-    | 'hintContentLeft'
-    | 'hintTrigger'
->;
-
-const StoryDemo = ({ ...rest }: StoryPropsDefault) => {
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '2rem',
-                width: '70%',
-                margin: '0 auto',
-            }}
-        >
-            <NumberFormat
-                {...rest}
-                enumerationType="plain"
-                onChange={onChange}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onSearch={onSearch}
-            />
-        </div>
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        thousandSeparator: ' ',
-        decimalScale: 3,
-        decimalSeparator: '.',
-        thousandsGroupStyle: 'thousand',
-        fixedDecimalScale: false,
-        allowNegative: true,
-        allowLeadingZeros: false,
-        size: 'l',
-        view: 'default',
-        label: 'Лейбл',
-        labelPlacement: 'outer',
-        keepPlaceholder: false,
-        titleCaption: 'Подпись к полю',
-        textBefore: '',
-        textAfter: '₽',
-        placeholder: 'Заполните поле',
-        leftHelper: 'Подсказка к полю',
-        disabled: false,
-        readOnly: false,
-        optional: false,
-        required: false,
-        requiredPlacement: 'right',
-        clear: false,
-        hasDivider: false,
-    },
-    render: (args) => <StoryDemo {...args} />,
-};

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

@@ -1,108 +0,0 @@
-import React, { useState, ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { NumberInput } from './NumberInput';
-
-const onChange = action('onChange');
-const onDecrement = action('onDecrement');
-const onIncrement = action('onIncrement');
-
-const views = ['default', 'secondary', 'accent', 'clear'];
-const sizes = ['l', 'm', 's', 'xs'];
-const shapes = ['cornered', 'pilled'];
-const inputBackgroundTypes = ['fill', 'clear'];
-const segmentation = ['default', 'segmented', 'solid'];
-
-const meta: Meta<typeof NumberInput> = {
-    title: 'Data Entry/NumberInput',
-    component: NumberInput,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        min: {
-            control: {
-                type: 'number',
-            },
-        },
-        max: {
-            control: {
-                type: 'number',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        shape: {
-            options: shapes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        inputBackgroundType: {
-            options: inputBackgroundTypes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        segmentation: {
-            options: segmentation,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof NumberInput>;
-
-const StoryDefault = (args: StoryPropsDefault) => {
-    const [value, setValue] = useState(5);
-
-    const handleChange = (_: any, newValue: number) => {
-        setValue(newValue);
-        onChange(newValue);
-    };
-
-    return (
-        <NumberInput
-            {...args}
-            value={value}
-            onChange={handleChange}
-            onDecrement={onDecrement}
-            onIncrement={onIncrement}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        view: 'default',
-        size: 'l',
-        shape: 'cornered',
-        inputBackgroundType: 'fill',
-        segmentation: 'default',
-        min: 0,
-        max: 9,
-        precision: 2,
-        step: 1,
-        width: 188,
-        isManualInput: false,
-        textBefore: '',
-        textAfter: '',
-        isLoading: false,
-        disabled: false,
-    },
-    render: StoryDefault,
-};

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { Button } from '../Button/Button';
-
-import { Overlay } from '.';
-
-const onOverlayClick = action('onOverlayClick');
-
-export default {
-    title: 'Overlay/Overlay',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        isClickable: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        withBlur: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: false } },
-        },
-        ...disableProps(['onOverlayClick', 'zIndex']),
-    },
-} as Meta;
-
-type StoryOverlayProps = ComponentProps<typeof Overlay>;
-
-const StyledButton = styled(Button)`
-    margin: 1rem;
-    width: 15rem;
-`;
-
-const StyledCloseButton = styled(Button)`
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    z-index: 101;
-    transform: translate(-50%, -50%);
-    width: 15rem;
-`;
-
-const StoryDefault = (props: StoryOverlayProps) => {
-    const [isVisible, setIsVisible] = useState(false);
-
-    return (
-        <>
-            <StyledButton text="Показать overlay" onClick={() => setIsVisible(true)} />
-            {isVisible && (
-                <>
-                    <Overlay {...props} />
-                    <StyledCloseButton view="primary" text=" Скрыть overlay" onClick={() => setIsVisible(false)} />
-                </>
-            )}
-        </>
-    );
-};
-
-export const Default: StoryObj<StoryOverlayProps> = {
-    args: {
-        zIndex: '100',
-        backgroundColorProperty: 'var(--overlay-soft)',
-        withBlur: false,
-        transparent: false,
-        isClickable: true,
-        onOverlayClick,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};