@salutejs/plasma-new-hope 0.133.1-dev.0 → 0.133.2-canary.1396.10611246152.0

package/emotion/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.js

@@ -1,5 +0,0 @@
-import { buttonGroupConfig } from '../../../../components/ButtonGroup';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './ButtonGroup.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(buttonGroupConfig, config);
-export var ButtonGroup = /*#__PURE__*/component(mergedConfig);

package/emotion/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { WithTheme } from '../../../_helpers';
-import { Button } from '../Button/Button';
-
-import { ButtonGroup } from './ButtonGroup';
-
-type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
-type Story = StoryObj<StoryProps>;
-
-const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
-const sizes = ['l', 'm', 's', 'xs', 'xxs'];
-const orientationValues = ['horizontal', 'vertical'];
-const gapValues = ['none', 'dense', 'wide'];
-const shapeValues = ['segmented', 'default'];
-const stretchingValues = ['auto', 'filled'];
-
-const meta: Meta<typeof ButtonGroup> = {
-    title: 'sds_engineer/ButtonGroup',
-    decorators: [WithTheme],
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        orientation: {
-            options: orientationValues,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        gap: {
-            options: gapValues,
-            control: {
-                type: 'select',
-            },
-        },
-        shape: {
-            options: shapeValues,
-            control: {
-                type: 'select',
-            },
-        },
-        stretching: {
-            options: stretchingValues,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-export const Default: Story = {
-    args: {
-        view: 'default',
-        size: 'm',
-        gap: 'dense',
-        orientation: 'horizontal',
-        shape: 'default',
-        itemsCount: 5,
-        stretching: 'auto',
-    },
-    render: ({ itemsCount, ...args }: StoryProps) => {
-        return (
-            <ButtonGroup {...args}>
-                {Array(itemsCount)
-                    .fill(true)
-                    .map((_, i) => (
-                        <Button text={`Button ${i}`} />
-                    ))}
-            </ButtonGroup>
-        );
-    },
-};
-
-export const CustomButtons: Story = {
-    args: {
-        ...Default.args,
-        isCommonButtonStyles: false,
-    },
-    argTypes: {
-        ...disableProps(['itemsCount']),
-    },
-    render: (args: StoryProps) => {
-        return (
-            <>
-                <h3>Группа кнопок с разными темами</h3>
-                <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" />
-                    <Button text="Negative" view="negative" />
-                    <Button text="Positive" view="positive" />
-                    <Button text="Clear" view="clear" />
-                </ButtonGroup>
-
-                <h3>Группа кнопок с разными размерами</h3>
-                <ButtonGroup {...args}>
-                    <Button text="Primary" view="default" size="l" />
-                    <Button text="Negative" view="negative" size="m" />
-                    <Button text="Positive" view="positive" size="s" />
-                    <Button text="Clear" view="clear" size="l" />
-                </ButtonGroup>
-            </>
-        );
-    },
-};

package/emotion/es/examples/sds_engineer/components/Calendar/Calendar.js

@@ -1,17 +0,0 @@
-import { component, mergeConfig } from '../../../../engines';
-import { calendarBaseConfig, calendarDoubleConfig, withRange } from '../../../../components/Calendar';
-import { boundCalendar } from '../../../../components/Calendar/Calendar';
-import { config as baseConfig } from './CalendarBase.config';
-import { config as doubleConfig } from './CalendarDouble.config';
-var mergedCalendarBaseConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig, baseConfig);
-var mergedCalendarDoubleConfig = /*#__PURE__*/mergeConfig(calendarDoubleConfig, doubleConfig);
-export var CalendarBase = /*#__PURE__*/component(mergedCalendarBaseConfig);
-export var CalendarDouble = /*#__PURE__*/component(mergedCalendarDoubleConfig);
-export var CalendarBaseRange = /*#__PURE__*/withRange(CalendarBase);
-export var CalendarDoubleRange = /*#__PURE__*/withRange(CalendarDouble);
-export var Calendar = /*#__PURE__*/boundCalendar({
-  base: CalendarBase,
-  baseRange: CalendarBaseRange,
-  "double": CalendarDouble,
-  doubleRange: CalendarDoubleRange
-});

package/emotion/es/examples/sds_engineer/components/Calendar/Calendar.stories.tsx

@@ -1,283 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { Heading } from '../../../typograpy/components/Heading/Heading';
-import { WithTheme } from '../../../_helpers';
-import { Tabs } from '../Tabs/Tabs';
-import { TabItem } from '../Tabs/TabItem';
-
-import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from './Calendar';
-
-const onChangeValue = action('onChangeValue');
-
-const meta: Meta<typeof CalendarBase> = {
-    title: 'sds_engineer/Calendar',
-    decorators: [WithTheme],
-    argTypes: {
-        min: {
-            control: {
-                type: 'date',
-            },
-        },
-        max: {
-            control: {
-                type: 'date',
-            },
-        },
-        size: {
-            options: ['l', 'm', 's', 'xs'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type CalendarProps = ComponentProps<typeof Calendar>;
-type CalendarBaseProps = ComponentProps<typeof CalendarBase>;
-type CalendarBaseRangeProps = ComponentProps<typeof CalendarBaseRange>;
-
-const eventColors = ['red', 'green', 'blue', 'purple'];
-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 colorIndex = Math.floor(Math.random() * eventColors.length);
-
-    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: eventColors[colorIndex] };
-        });
-    });
-
-    return events.flat();
-};
-
-const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = 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 (
-        <Calendar
-            size={size}
-            isRange={isRange}
-            isDouble={isDouble}
-            date={date}
-            value={(isRange ? valueRange : value) as Date & [Date, Date?]}
-            min={min}
-            max={max}
-            includeEdgeDates={includeEdgeDates}
-            onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
-        />
-    );
-};
-
-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: 'm',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = 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}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                {...rest}
-            />
-        ) : (
-            <CalendarBase
-                size={size}
-                value={value}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                {...rest}
-            />
-        );
-    };
-
-    const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
-    };
-
-    return (
-        <>
-            <Heading size="h3">Тип календаря</Heading>
-            <Tabs view="default" size="m">
-                {Object.keys(calendarMap).map((state, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={state === currentState}
-                        onClick={() => setCurrentState(state)}
-                        size="m"
-                    >
-                        {state}
-                    </TabItem>
-                ))}
-            </Tabs>
-            <div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
-        </>
-    );
-};
-
-export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
-    args: {
-        size: 'm',
-        min: defaultMinDate,
-        max: defaultMaxDate,
-        includeEdgeDates: false,
-        displayDouble: false,
-    },
-    render: (args) => <StoryBase {...args} />,
-};
-
-const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
-    const { min, max, includeEdgeDates, size, displayDouble } = 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 ? (
-            <CalendarBaseRange
-                size={size}
-                value={values}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                {...rest}
-            />
-        ) : (
-            <CalendarDoubleRange
-                size={size}
-                value={values}
-                min={min}
-                max={max}
-                includeEdgeDates={includeEdgeDates}
-                type={type}
-                onChangeValue={handleOnChange}
-                {...rest}
-            />
-        );
-    };
-
-    const calendarMap = {
-        Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }),
-        Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }),
-        Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }),
-        Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }),
-    };
-
-    return (
-        <>
-            <Heading size="h3">Тип календаря</Heading>
-            <Tabs view="default" size="m">
-                {Object.keys(calendarMap).map((state, i) => (
-                    <TabItem
-                        key={`item:${i}`}
-                        view="divider"
-                        selected={state === currentState}
-                        onClick={() => setCurrentState(state)}
-                        size="m"
-                    >
-                        {state}
-                    </TabItem>
-                ))}
-            </Tabs>
-            <div style={{ marginTop: '1rem' }}>{calendarMap[currentState]}</div>
-        </>
-    );
-};
-
-export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }> = {
-    args: {
-        size: 'm',
-        min: defaultMinDate,
-        max: defaultMaxDate,
-        includeEdgeDates: false,
-        displayDouble: false,
-    },
-    render: (args) => <StoryRange {...args} />,
-};