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

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

@@ -1,304 +0,0 @@
-import React, { ComponentProps, useCallback, useRef, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { Tabs } from '../Tabs/Tabs';
-import { TabItem } from '../Tabs/TabItem';
-import { H3 } from '../Typography';
-
-import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from '.';
-
-const onChangeValue = action('onChangeValue');
-
-const meta: Meta<CalendarProps> = {
-    title: 'Data Entry/Calendar',
-    decorators: [InSpacingDecorator],
-    component: Calendar,
-    argTypes: {
-        min: {
-            control: {
-                type: 'date',
-            },
-        },
-        max: {
-            control: {
-                type: 'date',
-            },
-        },
-        ...disableProps([
-            'size',
-            'value',
-            'onChangeValue',
-            'date',
-            'eventList',
-            'disabledList',
-            'eventMonthList',
-            'disabledMonthList',
-            'eventQuarterList',
-            'disabledQuarterList',
-            'eventYearList',
-            'disabledYearList',
-            'type',
-            'view',
-            'onChangeStartOfRange',
-        ]),
-    },
-};
-
-export default meta;
-
-type CalendarProps = ComponentProps<typeof Calendar>;
-type CalendarBaseProps = ComponentProps<typeof CalendarBase>;
-type CalendarBaseRangeProps = ComponentProps<typeof CalendarBaseRange>;
-const defaultMinDate = new Date(2016, 6, 1);
-const defaultMaxDate = new Date(2030, 11, 24);
-
-const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumber = 2) => {
-    const baseDate = {
-        day: 10,
-        monthIndex: 6,
-        year: 2023,
-    };
-
-    const events = [...new Array(datesNumber)].map((_, index) => {
-        const eventNumber = Math.floor(Math.random() * 3 + 1);
-        const day = type === 'days' ? baseDate.day + index : 1;
-        const month =
-            // eslint-disable-next-line no-nested-ternary
-            type === 'months' || type === 'quarters'
-                ? baseDate.monthIndex + index
-                : type === 'days'
-                ? baseDate.monthIndex
-                : 0;
-        const year = type === 'years' ? baseDate.year + index : baseDate.year;
-
-        return [...new Array(eventNumber)].map(() => {
-            return { date: new Date(year, month, day), color: 'var(--text-warning)' };
-        });
-    });
-
-    return events.flat();
-};
-
-const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size, ...rest } = args;
-    const [value, setValue] = useState(new Date(2023, 10, 16));
-    const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
-
-    const handleOnChange = useCallback((newValue: Date) => {
-        setValue(newValue);
-        onChangeValue(newValue);
-    }, []);
-    const handleOnRangeChange = useCallback((newValue: [Date, Date?]) => {
-        setValueRange(newValue);
-    }, []);
-
-    return (
-        <div style={{ height: '100vh' }}>
-            <Calendar
-                size={size}
-                isRange={isRange}
-                isDouble={isDouble}
-                date={date}
-                includeEdgeDates={includeEdgeDates}
-                min={min}
-                max={max}
-                {...rest}
-                value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-                onChangeValue={
-                    (isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void
-                }
-            />
-        </div>
-    );
-};
-
-export const Default: StoryObj<CalendarProps> = {
-    args: {
-        min: new Date(2023, 10, 1),
-        max: new Date(2023, 11, 24),
-        isDouble: false,
-        isRange: false,
-        includeEdgeDates: false,
-        size: 's',
-        stretched: false,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble, ...rest } = args;
-    const [value, setValue] = useState(new Date(2023, 6, 7));
-    const [currentState, setCurrentState] = useState('Days');
-
-    const handleOnChange = useCallback((newValue: Date, dateInfo?: unknown) => {
-        setValue(newValue);
-        onChangeValue(newValue, dateInfo);
-    }, []);
-
-    const eventList = useRef(getBaseEvents('days', 5));
-    const eventMonthList = useRef(getBaseEvents('months', 5));
-    const eventQuarterList = useRef(getBaseEvents('quarters'));
-    const eventYearList = useRef(getBaseEvents('years'));
-
-    const disabledDays = [...new Array(5)].map((_, day) => ({
-        date: new Date(2023, 6, 23 + day),
-    }));
-
-    const getCalendarComponent = ({ type, ...rest }) => {
-        return displayDouble ? (
-            <CalendarDouble
-                size={size}
-                value={value}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                min={min}
-                max={max}
-                {...rest}
-            />
-        ) : (
-            <CalendarBase
-                size={size}
-                value={value}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                min={min}
-                max={max}
-                {...rest}
-            />
-        );
-    };
-
-    const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
-    };
-
-    return (
-        <>
-            <H3>Тип календаря</H3>
-            <Tabs view="divider" size="s" hasDivider>
-                {Object.keys(calendarMap).map((state, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={state === currentState}
-                        onClick={() => setCurrentState(state)}
-                        size="s"
-                    >
-                        {state}
-                    </TabItem>
-                ))}
-            </Tabs>
-            <div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
-        </>
-    );
-};
-
-export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
-    argTypes: {
-        ...disableProps(['isRange', 'isDouble']),
-    },
-    args: {
-        size: 's',
-        min: defaultMinDate,
-        max: defaultMaxDate,
-        includeEdgeDates: false,
-        displayDouble: false,
-        stretched: false,
-    },
-    render: (args) => <StoryBase {...args} />,
-};
-
-const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble, ...rest } = args;
-    const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]);
-    const [currentState, setCurrentState] = useState('Days');
-
-    const handleOnChange = (newValue: [Date, Date?], dateInfo) => {
-        onChangeValue(newValue, dateInfo);
-        setValue(newValue);
-    };
-
-    const eventList = useRef(getBaseEvents('days', 5));
-    const eventMonthList = useRef(getBaseEvents('months', 5));
-    const eventQuarterList = useRef(getBaseEvents('quarters'));
-    const eventYearList = useRef(getBaseEvents('years'));
-
-    const disabledDays = [...new Array(5)].map((_, day) => ({
-        date: new Date(2023, 6, 23 + day),
-    }));
-
-    const getCalendarComponent = ({ type, ...rest }) => {
-        return displayDouble ? (
-            <CalendarDoubleRange
-                size={size}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                {...rest}
-                value={values}
-                onChangeValue={handleOnChange}
-            />
-        ) : (
-            <CalendarBaseRange
-                size={size}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                {...rest}
-                value={values}
-                onChangeValue={handleOnChange}
-            />
-        );
-    };
-
-    const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays, ...rest }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current, ...rest }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current, ...rest }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current, ...rest }),
-    };
-
-    return (
-        <>
-            <H3>Тип календаря</H3>
-            <Tabs view="divider" size="s" hasDivider>
-                {Object.keys(calendarMap).map((state, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={state === currentState}
-                        onClick={() => setCurrentState(state)}
-                        size="s"
-                    >
-                        {state}
-                    </TabItem>
-                ))}
-            </Tabs>
-            <div style={{ marginTop: '1rem', height: '100vh' }}>{calendarMap[currentState]}</div>
-        </>
-    );
-};
-
-export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }> = {
-    argTypes: {
-        ...disableProps(['isRange', 'isDouble']),
-    },
-    args: {
-        size: 's',
-        min: defaultMinDate,
-        max: defaultMaxDate,
-        includeEdgeDates: false,
-        displayDouble: false,
-        stretched: false,
-    },
-    render: (args) => <StoryRange {...args} />,
-};

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

@@ -1,281 +0,0 @@
-import React from 'react';
-import { disableProps, getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-import styled from 'styled-components';
-
-import { Flow } from '../Flow/Flow';
-
-import { Card, CardInnerContent, CardContent } from './Card';
-import { config } from './Card.config';
-
-const { views, sizes } = getConfigVariations(config);
-
-const GridDot = styled.div`
-    width: 2rem;
-    height: 2rem;
-    margin: 1rem;
-    border-radius: 50%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--plasma-colors-warning);
-`;
-
-const Content = styled.div`
-    display: flex;
-    flex: 1;
-
-    padding: 1rem;
-    box-sizing: border-box;
-
-    align-items: center;
-    justify-content: center;
-`;
-
-const SvgBackground = (props) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        preserveAspectRatio="xMinYMin slice"
-        viewBox="1 0.5 8 8"
-        {...props}
-        style={{ ...props.style, background: 'var(--text-tertiary)' }}
-    >
-        <path stroke="#fff" strokeDasharray={1} d="M1 1h7M2 2h7M1 3h7M2 4h7M1 5h7M2 6h7M1 7h7M2 8h7" />
-    </svg>
-);
-
-const meta: Meta<typeof Card> = {
-    title: 'Data Display/Card',
-    decorators: [InSpacingDecorator],
-    component: Card,
-    argTypes: {
-        width: {
-            control: {
-                type: 'text',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        orientation: {
-            options: ['vertical', 'horizontal'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        backgroundType: {
-            options: ['none', 'solid'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        textPosition: {
-            options: ['inner', 'outer'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentPosition: {
-            options: ['inner', 'outer'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        textAlign: {
-            options: ['left', 'center', 'right'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentAlign: {
-            options: ['left', 'center', 'right'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        quantity: {
-            options: [1, 2, 4],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        aspectRatio: {
-            control: {
-                type: 'text',
-            },
-        },
-        hasText: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        hasContent: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        hasImage: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        ...disableProps(['view']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Card>;
-
-const itemsPerLineMap = {
-    1: 1,
-    2: 2,
-    3: 3,
-    4: 2,
-};
-
-const orderMap = {
-    left: 0,
-    top: 0,
-    center: 1,
-    right: 2,
-    bottom: 2,
-};
-
-const alignContentValue = {
-    left: 'flex-start',
-    top: 'flex-start',
-    center: 'center',
-    right: 'flex-end',
-    bottom: 'flex-end',
-};
-
-const render: React.FC = ({
-    hasContent,
-    hasImage,
-    hasText,
-    text,
-    quantity,
-    width,
-    orientation,
-    textPosition,
-    contentPosition,
-    textAlign,
-    contentAlign,
-    aspectRatio,
-    ...rest
-}: StoryProps) => {
-    const onlyInnerText = Boolean(
-        (!hasContent || contentPosition === 'outer') && hasText && text && textPosition === 'inner',
-    );
-    const onlyInnerContent = (!hasText || textPosition === 'outer') && hasContent && contentPosition === 'inner';
-
-    const alignProp = orientation === 'vertical' ? 'alignItems' : 'justifyContent';
-
-    const cardTitleNode = (
-        <Content
-            style={{
-                order: orderMap[textAlign],
-                [alignProp]: onlyInnerText ? alignContentValue[textAlign] : 'center',
-            }}
-        >
-            {text}
-        </Content>
-    );
-
-    const cardContentNode = (
-        <Content
-            style={{
-                order: orderMap[contentAlign],
-                [alignProp]: onlyInnerContent ? alignContentValue[contentAlign] : 'center',
-            }}
-        >
-            <Flow
-                itemsPerLine={itemsPerLineMap[quantity]}
-                itemsCount={quantity}
-                orientation={orientation}
-                arrangement={orientation === 'vertical' ? 'center' : 'spaceAround'}
-                alignment={orientation === 'vertical' ? 'center' : 'center'}
-                style={{
-                    height: orientation === 'vertical' ? '10rem' : '100%',
-                }}
-            >
-                {new Array(quantity).fill(null).map((_, i) => (
-                    <GridDot key={i}>{i + 1}</GridDot>
-                ))}
-            </Flow>
-        </Content>
-    );
-
-    return (
-        <Card {...rest} orientation={orientation} style={{ width }}>
-            {hasText && textPosition === 'outer' && cardTitleNode}
-            {hasContent && contentPosition === 'outer' && cardContentNode}
-            <CardContent orientation={orientation} aspectRatio={aspectRatio}>
-                <CardInnerContent orientation={orientation}>
-                    {hasText && textPosition === 'inner' && cardTitleNode}
-                    {hasContent && contentPosition === 'inner' && cardContentNode}
-                </CardInnerContent>
-                {hasImage && <SvgBackground width="100%" height="100%" style={{ width: '100%', height: '100%' }} />}
-            </CardContent>
-        </Card>
-    );
-};
-
-export const Default: Story = {
-    args: {
-        width: '500px',
-        text: 'Title',
-        view: 'default',
-        size: 'm',
-        orientation: 'horizontal',
-
-        selected: true,
-        backgroundType: 'none',
-        textPosition: 'inner',
-        contentPosition: 'inner',
-        textAlign: 'left',
-        contentAlign: 'left',
-        hasText: true,
-        hasContent: true,
-        hasImage: true,
-        quantity: 2,
-        aspectRatio: '4 / 3',
-    },
-    render,
-};
-
-export const Vertical: Story = {
-    args: {
-        ...Default.args,
-        width: '450px',
-        orientation: 'vertical',
-        textAlign: 'top',
-        contentAlign: 'top',
-    },
-    argTypes: {
-        textAlign: {
-            options: ['top', 'center', 'bottom'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        contentAlign: {
-            options: ['top', 'center', 'bottom'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-    render,
-};

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

@@ -1,97 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-import { IconChevronRight } from '@salutejs/plasma-icons';
-import styled from 'styled-components';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Avatar } from '../Avatar';
-
-import { Cell } from '.';
-
-type StoryProps = ComponentProps<typeof Cell> & {
-    itemsCount?: number;
-    disableLeftContent?: boolean;
-    disableRightContent?: boolean;
-};
-type Story = StoryObj<StoryProps>;
-
-const sizes = ['s', 'xs'];
-const stretchingValues = ['fixed', 'filled', 'auto'];
-const alignLeft = ['top', 'center', 'bottom'];
-const alignRight = ['top', 'center', 'bottom'];
-
-type SizesCell = 'xs' | 's' | undefined;
-type SizesAvatar = 'l' | 'm' | 's';
-
-const getSize = (size: SizesCell): SizesAvatar => {
-    if (size === 'xs' || !size) {
-        return 's';
-    }
-
-    return size;
-};
-
-const ChevronRight = styled(IconChevronRight)`
-    color: var(--text-secondary);
-`;
-
-const meta: Meta<typeof Cell> = {
-    title: 'Data Display/Cell',
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-        alignContentLeft: {
-            options: alignLeft,
-            control: {
-                type: 'select',
-            },
-        },
-        alignContentRight: {
-            options: alignRight,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['size', 'view']),
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    args: {
-        size: 's',
-        stretching: 'filled',
-        disableLeftContent: false,
-        disableRightContent: false,
-        alignContentLeft: 'center',
-        alignContentRight: 'center',
-        title: 'Title',
-        subtitle: 'Subtitle',
-        label: 'Label',
-    },
-    render: ({ ...args }: StoryProps) => {
-        return (
-            <Cell
-                contentLeft={
-                    !args.disableLeftContent && (
-                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
-                    )
-                }
-                contentRight={!args.disableRightContent && <ChevronRight color="inherit" size="s" />}
-                {...args}
-            />
-        );
-    },
-};