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

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconEdit } from '@salutejs/plasma-icons';
-
-import { Button } from '../Button';
-
-import { Toolbar, ToolbarDivider } from './Toolbar';
-
-const orientations: Array<string> = ['vertical', 'horizontal'];
-const size: Array<string> = ['xs', 's', 'm', 'l'];
-
-const ToolbarWrapper = (props: ComponentProps<typeof Toolbar>) => {
-    return (
-        <Toolbar {...props}>
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <ToolbarDivider />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-        </Toolbar>
-    );
-};
-
-const meta: Meta<typeof Toolbar> = {
-    title: 'Overlay/Toolbar',
-    component: ToolbarWrapper,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        hasShadow: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        orientation: 'vertical',
-        hasShadow: true,
-        size: 'm',
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toolbar>;
-
-export const Default: Story = {
-    args: {},
-};

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

@@ -1,163 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { IconDisclosureRight } from '@salutejs/plasma-icons';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Button } from '../Button/Button';
-
-import { Tooltip } from '.';
-import type { TooltipProps } from '.';
-
-const placements: Array<string> = [
-    'top',
-    'top-start',
-    'top-end',
-
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-
-    'left',
-    'left-start',
-    'left-end',
-
-    'right',
-    'right-start',
-    'right-end',
-
-    'auto',
-];
-
-const disabledProps = [
-    'target',
-    'children',
-    'text',
-    'opened',
-    'isOpen',
-    'isVisible',
-    'offset',
-    'frame',
-    'view',
-    'zIndex',
-    'minWidth',
-    'maxWidth',
-    'contentLeft',
-    'onDismiss',
-];
-const meta: Meta<TooltipProps> = {
-    title: 'Overlay/Tooltip',
-    decorators: [InSpacingDecorator],
-    component: Tooltip,
-};
-
-export default meta;
-
-const StyledGrid = styled.div`
-    display: grid;
-    grid-template-columns: repeat(3, max-content);
-    grid-gap: 1rem 3.5rem;
-    padding: 3.5rem;
-`;
-
-const StoryDefault = (props: Pick<TooltipProps, 'hasArrow' | 'size' | 'usePortal'>) => {
-    return (
-        <StyledGrid>
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" {...props} />}
-                placement="top-start"
-                opened
-                text="top-start"
-                view="default"
-                {...props}
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" {...props} />
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" {...props} />}
-                placement="top-end"
-                opened
-                text="top-end"
-                {...props}
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" {...props} />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" {...props} />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" {...props} />
-        </StyledGrid>
-    );
-};
-
-export const Default: StoryObj<TooltipProps> = {
-    argTypes: {
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps([...disabledProps, 'placement']),
-    },
-    args: {
-        maxWidth: 10,
-        minWidth: 3,
-        hasArrow: true,
-        usePortal: false,
-        animated: true,
-        size: 'm',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StyledRow = styled.div`
-    display: flex;
-    width: 150vw;
-    height: 150vh;
-    padding: 10rem;
-`;
-
-const StoryLive = (args: TooltipProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <StyledRow>
-                <Tooltip
-                    target={<Button onClick={() => setIsOpen(!isOpen)}>Show tooltip</Button>}
-                    contentLeft={<IconDisclosureRight size="xs" />}
-                    {...args}
-                    id="example-tooltip-firstname"
-                    text="Tooltip text"
-                    opened={isOpen}
-                />
-            </StyledRow>
-        </>
-    );
-};
-
-export const Live: StoryObj<TooltipProps> = {
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            mapping: placements,
-        },
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(disabledProps),
-    },
-    args: {
-        placement: 'bottom',
-        maxWidth: 10,
-        minWidth: 3,
-        hasArrow: true,
-        usePortal: false,
-        animated: true,
-        size: 'm',
-    },
-    render: (args) => <StoryLive {...args} />,
-};

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

@@ -1,146 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconBlankTxtOutline, IconLock, IconTrash } from '@salutejs/plasma-icons';
-
-import { Tree } from './Tree';
-
-type StoryTreeProps = ComponentProps<typeof Tree>;
-
-const size = ['xs', 's', 'm', 'l'];
-const arrowPlacements = ['left', 'right'];
-
-const meta: Meta<StoryTreeProps> = {
-    title: 'Data Entry/Tree',
-    decorators: [InSpacingDecorator],
-    component: Tree,
-    argTypes: {
-        size: {
-            control: 'select',
-            options: size,
-        },
-        checkable: {
-            control: 'boolean',
-        },
-        multiple: {
-            control: 'boolean',
-        },
-        arrowPlacement: {
-            options: arrowPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        defaultExpandAll: {
-            control: 'boolean',
-        },
-        fullWidthItemSelection: {
-            control: 'boolean',
-        },
-        height: {
-            control: 'number',
-        },
-        hasIcon: {
-            control: 'boolean',
-        },
-    },
-    args: {
-        size: 'm',
-        fullWidthItemSelection: false,
-        checkable: false,
-        multiple: false,
-        arrowPlacement: 'left',
-        defaultExpandAll: true,
-        height: undefined,
-        hasIcon: true,
-    },
-    parameters: {
-        controls: {
-            include: [
-                'size',
-                'fullWidthItemSelection',
-                'checkable',
-                'multiple',
-                'arrowPlacement',
-                'defaultExpandAll',
-                'height',
-                'hasIcon',
-            ],
-        },
-    },
-};
-
-export default meta;
-
-const StoryDefault = (args: StoryTreeProps) => {
-    const treeData: any[] = [
-        {
-            title: 'Основной каталог',
-            key: '0-0',
-            contentRight: <IconTrash size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />,
-            children: [
-                {
-                    title: 'Документы',
-                    key: '0-0-0',
-                    children: [
-                        {
-                            title: 'Отчёты',
-                            key: '0-0-0-0',
-                            contentRight: (
-                                <IconLock size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />
-                            ),
-                            disabled: true,
-                        },
-                        {
-                            title: 'Проекты',
-                            key: '0-0-0-1',
-                            children: [
-                                {
-                                    title: 'Проект Альфа',
-                                    key: '0-0-0-0-0',
-                                    icon: (
-                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
-                                    ),
-                                },
-                                {
-                                    title: 'Проект Бета',
-                                    key: '0-0-0-0-1',
-                                    icon: (
-                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
-                                    ),
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    title: 'Медиа',
-                    key: '0-0-1',
-                    children: [
-                        {
-                            title: 'Фотографии',
-                            key: '0-0-1-0',
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            title: 'Корзина',
-            key: '0-1',
-            children: [
-                {
-                    title: 'Удалённые файлы',
-                    key: '0-1-0',
-                },
-            ],
-        },
-    ];
-
-    return <Tree {...args} items={treeData} />;
-};
-
-export const Default: StoryObj<StoryTreeProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};

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

@@ -1,243 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import {
-    DsplL,
-    DsplM,
-    DsplS,
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    BodyL,
-    BodyM,
-    BodyS,
-    BodyXS,
-    BodyXXS,
-    TextL,
-    TextM,
-    TextS,
-    TextXS,
-} from '.';
-
-const meta: Meta = {
-    title: 'Data Display/Typography',
-    component: DsplL,
-    argTypes: {
-        ...disableProps(['size', 'bold', 'medium', 'as', 'forwardedAs', 'isNumeric']),
-        color: {
-            control: {
-                type: 'color',
-            },
-        },
-    },
-    args: {
-        noWrap: false,
-        breakWord: true,
-    },
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Dspl: Story = {
-    render: (props) => (
-        <>
-            <DsplL bold={false} {...props}>
-                DsplL
-            </DsplL>
-            <DsplL {...props}>DsplL Bold</DsplL>
-            <DsplL medium {...props}>
-                DsplL Medium
-            </DsplL>
-            <DsplL bold={false} isNumeric {...props}>
-                1234567890
-            </DsplL>
-            <DsplM bold={false} {...props}>
-                DsplM
-            </DsplM>
-            <DsplM {...props}>DsplM Bold</DsplM>
-            <DsplM medium {...props}>
-                DsplM Medium
-            </DsplM>
-            <DsplM bold={false} isNumeric {...props}>
-                1234567890
-            </DsplM>
-            <DsplS bold={false} {...props}>
-                DsplS
-            </DsplS>
-            <DsplS {...props}>DsplS Bold</DsplS>
-            <DsplS medium {...props}>
-                DsplS Medium
-            </DsplS>
-            <DsplS bold={false} isNumeric {...props}>
-                1234567890
-            </DsplS>
-        </>
-    ),
-};
-
-export const H: Story = {
-    render: (props) => (
-        <>
-            <H1 bold={false} {...props}>
-                H1
-            </H1>
-            <H1 {...props}>H1 Bold</H1>
-            <H1 medium {...props}>
-                H1 Medium
-            </H1>
-            <H1 bold={false} isNumeric {...props}>
-                1234567890
-            </H1>
-            <H2 bold={false} {...props}>
-                H2
-            </H2>
-            <H2 {...props}>H2 Bold</H2>
-            <H2 medium {...props}>
-                H2 Medium
-            </H2>
-            <H2 bold={false} isNumeric {...props}>
-                1234567890
-            </H2>
-            <H3 bold={false} {...props}>
-                H3
-            </H3>
-            <H3 {...props}>H3 Bold</H3>
-            <H3 medium {...props}>
-                H3 Medium
-            </H3>
-            <H3 bold={false} isNumeric {...props}>
-                1234567890
-            </H3>
-            <H4 bold={false} {...props}>
-                H4
-            </H4>
-            <H4 {...props}>H4 Bold</H4>
-            <H4 medium {...props}>
-                H4 Medium
-            </H4>
-            <H4 bold={false} isNumeric {...props}>
-                1234567890
-            </H4>
-            <H5 bold={false} {...props}>
-                H5
-            </H5>
-            <H5 {...props}>H5 Bold</H5>
-            <H5 medium {...props}>
-                H5 Medium
-            </H5>
-            <H5 bold={false} isNumeric {...props}>
-                1234567890
-            </H5>
-        </>
-    ),
-};
-
-export const Body: Story = {
-    render: (props) => (
-        <>
-            <BodyL {...props}>BodyL</BodyL>
-            <BodyL bold {...props}>
-                BodyL Bold
-            </BodyL>
-            <BodyL medium {...props}>
-                BodyL Medium
-            </BodyL>
-            <BodyL isNumeric {...props}>
-                1234567890
-            </BodyL>
-            <BodyM {...props}>BodyM</BodyM>
-            <BodyM bold {...props}>
-                BodyM Bold
-            </BodyM>
-            <BodyM medium {...props}>
-                BodyM Medium
-            </BodyM>
-            <BodyM isNumeric {...props}>
-                1234567890
-            </BodyM>
-            <BodyS {...props}>BodyS</BodyS>
-            <BodyS bold {...props}>
-                BodyS Bold
-            </BodyS>
-            <BodyS medium {...props}>
-                BodyS Medium
-            </BodyS>
-            <BodyS isNumeric {...props}>
-                1234567890
-            </BodyS>
-            <BodyXS {...props}>BodyXS</BodyXS>
-            <BodyXS bold {...props}>
-                BodyXS Bold
-            </BodyXS>
-            <BodyXS medium {...props}>
-                BodyXS Medium
-            </BodyXS>
-            <BodyXS isNumeric {...props}>
-                1234567890
-            </BodyXS>
-            <BodyXXS {...props}>BodyXXS</BodyXXS>
-            <BodyXXS bold {...props}>
-                BodyXXS Bold
-            </BodyXXS>
-            <BodyXXS medium {...props}>
-                BodyXXS Medium
-            </BodyXXS>
-            <BodyXXS isNumeric {...props}>
-                1234567890
-            </BodyXXS>
-        </>
-    ),
-};
-
-export const Text: Story = {
-    render: (props) => (
-        <>
-            <TextL {...props}>TextL</TextL>
-            <TextL bold {...props}>
-                TextL Bold
-            </TextL>
-            <TextL medium {...props}>
-                TextL Medium
-            </TextL>
-            <TextL isNumeric {...props}>
-                1234567890
-            </TextL>
-            <TextM {...props}>TextM</TextM>
-            <TextM bold {...props}>
-                TextM Bold
-            </TextM>
-            <TextM medium {...props}>
-                TextM Medium
-            </TextM>
-            <TextM isNumeric {...props}>
-                1234567890
-            </TextM>
-            <TextS {...props}>TextS</TextS>
-            <TextS bold {...props}>
-                TextS Bold
-            </TextS>
-            <TextS medium {...props}>
-                TextS Medium
-            </TextS>
-            <TextS isNumeric {...props}>
-                1234567890
-            </TextS>
-            <TextXS {...props}>TextXS</TextXS>
-            <TextXS bold {...props}>
-                TextXS Bold
-            </TextXS>
-            <TextXS medium {...props}>
-                TextXS Medium
-            </TextXS>
-            <TextXS isNumeric {...props}>
-                1234567890
-            </TextXS>
-        </>
-    ),
-};

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

@@ -1,67 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { Button } from '../Button/Button';
-import { TextField } from '../TextField/TextField';
-import { Checkbox } from '../Checkbox/Checkbox';
-
-import { ViewContainer } from './ViewContainer';
-
-type StoryViewProps = ComponentProps<typeof ViewContainer>;
-
-const meta: Meta<StoryViewProps> = {
-    title: 'Data Display/ViewContainer',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-type Story = StoryObj<StoryViewProps>;
-
-const ViewExample = ({ view }: StoryViewProps) => {
-    const style = view
-        ? {
-              background: view === 'onDark' ? '#1a1a1a' : '#ededed',
-              color: view === 'onDark' ? 'white' : 'black',
-          }
-        : undefined;
-
-    return (
-        <>
-            <h4>view: {view ?? 'default'}</h4>
-            <div>
-                <ViewContainer
-                    view={view}
-                    style={{
-                        ...style,
-                        padding: '1rem',
-                        borderRadius: '1rem',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '1rem',
-                    }}
-                >
-                    <h3 style={{ margin: 0 }}>Inside ViewContainer</h3>
-                    <Button text="default Button" />
-                    <Checkbox checked label="Label" />
-                    <TextField value="Example Value" label="Label" labelPlacement="inner" />
-                </ViewContainer>
-            </div>
-        </>
-    );
-};
-
-export const Default: Story = {
-    render: () => {
-        return (
-            <>
-                <ViewExample />
-                <br />
-                <ViewExample view="onDark" />
-                <br />
-                <ViewExample view="onLight" />
-            </>
-        );
-    },
-};