@salutejs/sdds-cs 0.319.0-canary.2010.15733259332.0 → 0.319.0-canary.2010.15854111527.0

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

@@ -1,331 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconLocation } from '@salutejs/plasma-icons';
-import { action } from '@storybook/addon-actions';
-
-import { Button } from '../Button';
-
-import { Dropdown } from '.';
-
-type DropdownProps = ComponentProps<typeof Dropdown>;
-
-const placements: DropdownProps['placement'][] = ['auto', 'top', 'right', 'bottom', 'left'];
-const triggers: DropdownProps['trigger'][] = ['click', 'hover'];
-const size = ['s'];
-const variant = ['normal', 'tight'];
-
-const meta: Meta<DropdownProps> = {
-    title: 'Data Entry/Dropdown',
-    component: Dropdown,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            mapping: placements,
-        },
-        trigger: {
-            options: triggers,
-            control: {
-                type: 'select',
-            },
-        },
-        openByRightClick: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-        variant: {
-            options: variant,
-            control: {
-                type: 'select',
-            },
-        },
-        closeOnOverlayClick: {
-            control: { type: 'boolean' },
-            if: { arg: 'alwaysOpened', truthy: false },
-        },
-        closeOnSelect: {
-            control: { type: 'boolean' },
-            if: { arg: 'alwaysOpened', truthy: false },
-        },
-        listWidth: {
-            control: { type: 'text' },
-        },
-    },
-    args: {
-        size: 's',
-        variant: 'normal',
-        placement: 'bottom-start',
-        trigger: 'click',
-        openByRightClick: false,
-        offset: [0, 0],
-        listWidth: '300px',
-        hasArrow: true,
-        alwaysOpened: false,
-        closeOnOverlayClick: true,
-        closeOnSelect: true,
-    },
-    parameters: {
-        controls: {
-            include: [
-                'variant',
-                'placement',
-                'trigger',
-                'offset',
-                'listWidth',
-                'hasArrow',
-                'closeOnOverlayClick',
-                'closeOnSelect',
-            ],
-        },
-    },
-};
-
-export default meta;
-
-const items = (dropdownSize: DropdownProps['size']) => [
-    {
-        value: 'north_america',
-        label: 'Северная Америка',
-        contentLeft: <IconLocation size={dropdownSize !== 'xs' ? 's' : 'xs'} color="inherit" />,
-        contentRight: <IconLocation size={dropdownSize !== 'xs' ? 's' : 'xs'} color="inherit" />,
-    },
-    {
-        value: 'south_america',
-        label: 'Южная Америка',
-        items: [
-            {
-                value: 'brazil',
-                label: 'Бразилия',
-                items: [
-                    {
-                        value: 'rio_de_janeiro',
-                        label: 'Рио-де-Жанейро',
-                    },
-                    {
-                        value: 'sao_paulo',
-                        label: 'Сан-Паулу',
-                    },
-                ],
-            },
-            {
-                value: 'argentina',
-                label: 'Аргентина',
-                items: [
-                    {
-                        value: 'buenos_aires',
-                        label: 'Буэнос-Айрес',
-                    },
-                    {
-                        value: 'cordoba',
-                        label: 'Кордова',
-                    },
-                ],
-            },
-            {
-                value: 'colombia',
-                label: 'Колумбия',
-                items: [
-                    {
-                        value: 'bogota',
-                        label: 'Богота',
-                    },
-                    {
-                        value: 'medellin',
-                        label: 'Медельин',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'europe',
-        label: 'Европа',
-        dividerBefore: true,
-        dividerAfter: true,
-        items: [
-            {
-                value: 'france',
-                label: 'Франция',
-                items: [
-                    {
-                        value: 'paris',
-                        label: 'Париж',
-                    },
-                    {
-                        value: 'lyon',
-                        label: 'Лион',
-                    },
-                ],
-            },
-            {
-                value: 'germany',
-                label: 'Германия',
-                items: [
-                    {
-                        value: 'berlin',
-                        label: 'Берлин',
-                    },
-                    {
-                        value: 'munich',
-                        label: 'Мюнхен',
-                    },
-                ],
-            },
-            {
-                value: 'italy',
-                label: 'Италия',
-                items: [
-                    {
-                        value: 'rome',
-                        label: 'Рим',
-                    },
-                    {
-                        value: 'milan',
-                        label: 'Милан',
-                    },
-                ],
-            },
-            {
-                value: 'spain',
-                label: 'Испания',
-                items: [
-                    {
-                        value: 'madrid',
-                        label: 'Мадрид',
-                    },
-                    {
-                        value: 'barcelona',
-                        label: 'Барселона',
-                    },
-                ],
-            },
-            {
-                value: 'united_kingdom',
-                label: 'Великобритания',
-                items: [
-                    {
-                        value: 'london',
-                        label: 'Лондон',
-                    },
-                    {
-                        value: 'manchester',
-                        label: 'Манчестер',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'asia',
-        label: 'Азия',
-        items: [
-            {
-                value: 'china',
-                label: 'Китай',
-                items: [
-                    {
-                        value: 'beijing',
-                        label: 'Пекин',
-                    },
-                    {
-                        value: 'shanghai',
-                        label: 'Шанхай',
-                    },
-                ],
-            },
-            {
-                value: 'japan',
-                label: 'Япония',
-                items: [
-                    {
-                        value: 'tokyo',
-                        label: 'Токио',
-                    },
-                    {
-                        value: 'osaka',
-                        label: 'Осака',
-                    },
-                ],
-            },
-            {
-                value: 'india',
-                label: 'Индия',
-                items: [
-                    {
-                        value: 'delhi',
-                        label: 'Дели',
-                    },
-                    {
-                        value: 'mumbai',
-                        label: 'Мумбаи',
-                    },
-                ],
-            },
-            {
-                value: 'south_korea',
-                label: 'Южная Корея',
-                items: [
-                    {
-                        value: 'seoul',
-                        label: 'Сеул',
-                    },
-                    {
-                        value: 'busan',
-                        label: 'Пусан',
-                    },
-                ],
-            },
-            {
-                value: 'thailand',
-                label: 'Таиланд',
-                items: [
-                    {
-                        value: 'bangkok',
-                        label: 'Бангкок',
-                    },
-                    {
-                        value: 'phuket',
-                        label: 'Пхукет',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'africa',
-        label: 'Африка',
-        disabled: true,
-    },
-];
-
-const StoryNormal = (args: DropdownProps) => {
-    return (
-        <>
-            <Dropdown
-                {...args}
-                items={items(args.size)}
-                onToggle={action('onToggle')}
-                onHover={action('onHover')}
-                onItemSelect={action('onItemSelect')}
-                onItemClick={action('onItemClick')}
-            >
-                <Button text="Список стран" size={args.size} />
-            </Dropdown>
-        </>
-    );
-};
-
-export const Default: StoryObj<DropdownProps> = {
-    render: (args) => <StoryNormal {...args} />,
-};

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

@@ -1,58 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Dropzone } from './Dropzone';
-
-const onDragEnter = action('onDragEnter');
-const onDragLeave = action('onDragLeave');
-const onDrop = action('onDrop');
-const onChange = action('onChange');
-const onChoseFiles = action('onChoseFiles');
-
-const iconPlacements = ['top', 'left'];
-
-const meta: Meta<typeof Dropzone> = {
-    title: 'Data Entry/Dropzone',
-    component: Dropzone,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        iconPlacement: {
-            options: iconPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-            defaultValue: 'top',
-        },
-        ...disableProps(['view', 'size']),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof Dropzone>;
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        iconPlacement: 'top',
-        width: 400,
-        height: 280,
-        disabled: false,
-        stretch: false,
-        title: 'Click to upload',
-        description: 'or drag and drop files here',
-    },
-    render: (args) => (
-        <div style={{ height: '100vh' }}>
-            <Dropzone
-                {...args}
-                onDragEnter={onDragEnter}
-                onDragLeave={onDragLeave}
-                onDrop={onDrop}
-                onChange={onChange}
-                onChoseFiles={onChoseFiles}
-            />
-        </div>
-    ),
-};

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

@@ -1,43 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import * as React from 'react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconPlasma } from '@salutejs/plasma-icons';
-
-import { EmptyState } from './EmptyState';
-
-const sizes = ['l', 'm', 's', 'xs'];
-
-type StoryProps = ComponentProps<typeof EmptyState> & {
-    enableIcon: boolean;
-};
-
-const meta: Meta<StoryProps> = {
-    title: 'Data Entry/EmptyState',
-    decorators: [InSpacingDecorator],
-    component: EmptyState,
-    args: {
-        description: 'Описание',
-        buttonText: 'Кнопка',
-        size: 'l',
-        enableIcon: true,
-    },
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-};
-
-export default meta;
-
-const DefaultStory = (args: StoryProps) => {
-    return <EmptyState {...args} icon={args.enableIcon ? <IconPlasma size="s" /> : undefined} />;
-};
-
-export const Default: StoryObj<StoryProps> = {
-    render: (args) => <DefaultStory {...args} />,
-};

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

@@ -1,133 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-
-import { Flow } from './Flow';
-
-const orientations = ['vertical', 'horizontal'];
-const arrangements = ['start', 'center', 'end', 'spaceBetween', 'spaceAround'];
-const alignments = ['start', 'center', 'end'];
-
-const widths = [100, 32, 171, 74, 179, 55];
-const heights = [10, 50, 45, 33, 14, 55];
-
-const FlowCustom = styled(Flow)`
-    background: var(--surface-transparent-accent-hover);
-    border-radius: 0.5rem;
-`;
-
-const Item = styled.div`
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    background: #aab1e9;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-const meta: Meta<typeof Flow> = {
-    title: 'Layout/Flow',
-    component: Flow,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        itemsCount: {
-            control: {
-                type: 'number',
-            },
-        },
-        containerWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        containerHeight: {
-            control: {
-                type: 'text',
-            },
-        },
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        arrangement: {
-            options: arrangements,
-            control: {
-                type: 'select',
-            },
-        },
-        alignment: {
-            options: alignments,
-            control: {
-                type: 'select',
-            },
-        },
-        mainAxisGap: {
-            control: {
-                type: 'text',
-            },
-        },
-        crossAxisGap: {
-            control: {
-                type: 'text',
-            },
-        },
-        itemsPerLine: {
-            control: {
-                type: 'text',
-            },
-        },
-        minColWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        ...disableProps(['minColWidth']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Flow>;
-
-export const Default: Story = {
-    args: {
-        containerWidth: '450px',
-        containerHeight: '200px',
-        orientation: 'horizontal',
-        arrangement: 'start',
-        alignment: 'start',
-        mainAxisGap: '10',
-        crossAxisGap: '10',
-        itemsPerLine: '',
-        itemsCount: 6,
-    },
-    render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
-        const hasLines = Boolean(args.itemsPerLine);
-
-        return (
-            <FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
-                {new Array(itemsCount).fill(null).map((width, index) => (
-                    <Item
-                        key={index}
-                        style={
-                            hasLines
-                                ? {
-                                      minWidth: widths[index % widths.length],
-                                      minHeight: heights[index % heights.length],
-                                  }
-                                : {
-                                      width: widths[index % widths.length],
-                                      height: heights[index % heights.length],
-                                  }
-                        }
-                    >
-                        {index + 1}
-                    </Item>
-                ))}
-            </FlowCustom>
-        );
-    },
-};

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

@@ -1,119 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-
-import { Col, Grid, Row } from './Grid';
-
-const meta: Meta = {
-    title: 'Layout/Grid',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const StyledContent = styled.div`
-    height: 10rem;
-    width: 100%;
-    background: #f5f5dc;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--inverse-text-primary);
-`;
-
-export const Default = {
-    args: {
-        colsCount: 6,
-    },
-    render: ({ colsCount }) => (
-        <Grid>
-            <Row>
-                {Array(colsCount)
-                    .fill(true)
-                    .map((_, i) => (
-                        <Col size={1} key={colsCount + i}>
-                            <StyledContent>{i + 1}</StyledContent>
-                        </Col>
-                    ))}
-            </Row>
-        </Grid>
-    ),
-};
-
-export const CustomColsPosition = {
-    render: () => (
-        <Grid view="default">
-            <Row>
-                <Col
-                    smallM={{
-                        size: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                    }}
-                    mediumM={{
-                        size: 3,
-                        offset: 1,
-                    }}
-                    largeS={{
-                        size: 4,
-                        offset: 1,
-                    }}
-                    largeM={{
-                        size: 5,
-                        offset: 2,
-                    }}
-                >
-                    <StyledContent>1</StyledContent>
-                </Col>
-                <Col
-                    smallM={{
-                        size: 1,
-                        offset: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                        offset: 1,
-                    }}
-                    mediumM={{
-                        size: 4,
-                    }}
-                    largeS={{
-                        size: 4,
-                        offset: 3,
-                    }}
-                    largeM={{
-                        size: 5,
-                        offset: 1,
-                    }}
-                >
-                    <StyledContent>2</StyledContent>
-                </Col>
-                <Col
-                    smallM={{
-                        size: 1,
-                    }}
-                    mediumS={{
-                        size: 2,
-                        offset: 1,
-                    }}
-                    mediumM={{
-                        size: 2,
-                        offset: 2,
-                    }}
-                    largeS={{
-                        size: 3,
-                        offset: 4,
-                    }}
-                    largeM={{
-                        size: 6,
-                        offset: 3,
-                    }}
-                >
-                    <StyledContent>3</StyledContent>
-                </Col>
-            </Row>
-        </Grid>
-    ),
-};