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

package/emotion/cjs/components/ButtonGroup/ButtonGroup.js

@@ -1,14 +1,14 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "ButtonGroup", {
-    enumerable: true,
-    get: function() {
-        return ButtonGroup;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _ButtonGroupconfig = require("./ButtonGroup.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.buttonGroupConfig, _ButtonGroupconfig.config);
-var ButtonGroup = (0, _emotion.component)(mergedConfig);
+exports.ButtonGroup = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _ButtonGroup = /*#__PURE__*/require("./ButtonGroup.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.buttonGroupConfig, _ButtonGroup.config);
+
+/**
+ * Группа кнопок.
+ */
+var ButtonGroup = exports.ButtonGroup = /*#__PURE__*/(0, _emotion.component)(mergedConfig);

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+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', 'success', 'warning', 'critical', 'clear'];
+const sizes = ['xl', '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: 'Data Entry/ButtonGroup',
+    decorators: [InSpacingDecorator],
+    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="success" />
+                    <Button text="Positive" view="warning" />
+                    <Button text="Clear" view="clear" />
+                </ButtonGroup>
+
+                <h3>Группа кнопок с разными размерами</h3>
+                <ButtonGroup {...args}>
+                    <Button text="Primary" view="default" size="l" />
+                    <Button text="Negative" view="success" size="m" />
+                    <Button text="Positive" view="warning" size="s" />
+                    <Button text="Clear" view="clear" size="l" />
+                </ButtonGroup>
+            </>
+        );
+    },
+};

package/emotion/cjs/components/ButtonGroup/index.js

@@ -1,11 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 Object.defineProperty(exports, "ButtonGroup", {
-    enumerable: true,
-    get: function() {
-        return _ButtonGroup.ButtonGroup;
-    }
+  enumerable: true,
+  get: function get() {
+    return _ButtonGroup.ButtonGroup;
+  }
 });
-var _ButtonGroup = require("./ButtonGroup");
+var _ButtonGroup = /*#__PURE__*/require("./ButtonGroup");

package/emotion/cjs/components/Calendar/Calendar.js

@@ -1,42 +1,21 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get Calendar () {
-        return Calendar;
-    },
-    get CalendarBase () {
-        return CalendarBase;
-    },
-    get CalendarBaseRange () {
-        return CalendarBaseRange;
-    },
-    get CalendarDouble () {
-        return CalendarDouble;
-    },
-    get CalendarDoubleRange () {
-        return CalendarDoubleRange;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _CalendarBaseconfig = require("./CalendarBase.config");
-var _CalendarDoubleconfig = require("./CalendarDouble.config");
-var mergedCalendarBaseConfig = (0, _emotion.mergeConfig)(_emotion.calendarBaseConfig, _CalendarBaseconfig.config);
-var mergedCalendarDoubleConfig = (0, _emotion.mergeConfig)(_emotion.calendarDoubleConfig, _CalendarDoubleconfig.config);
-var CalendarBase = (0, _emotion.component)(mergedCalendarBaseConfig);
-var CalendarDouble = (0, _emotion.component)(mergedCalendarDoubleConfig);
-var CalendarBaseRange = (0, _emotion.withRange)(CalendarBase);
-var CalendarDoubleRange = (0, _emotion.withRange)(CalendarDouble);
-var Calendar = (0, _emotion.boundCalendar)({
-    base: CalendarBase,
-    baseRange: CalendarBaseRange,
-    double: CalendarDouble,
-    doubleRange: CalendarDoubleRange
+  value: true
 });
+exports.CalendarDoubleRange = exports.CalendarDouble = exports.CalendarBaseRange = exports.CalendarBase = exports.Calendar = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _CalendarBase = /*#__PURE__*/require("./CalendarBase.config");
+var _CalendarDouble = /*#__PURE__*/require("./CalendarDouble.config");
+var mergedCalendarBaseConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.calendarBaseConfig, _CalendarBase.config);
+var mergedCalendarDoubleConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.calendarDoubleConfig, _CalendarDouble.config);
+var CalendarBase = exports.CalendarBase = /*#__PURE__*/(0, _emotion.component)(mergedCalendarBaseConfig);
+var CalendarDouble = exports.CalendarDouble = /*#__PURE__*/(0, _emotion.component)(mergedCalendarDoubleConfig);
+var CalendarBaseRange = exports.CalendarBaseRange = /*#__PURE__*/(0, _emotion.withRange)(CalendarBase);
+var CalendarDoubleRange = exports.CalendarDoubleRange = /*#__PURE__*/(0, _emotion.withRange)(CalendarDouble);
+var Calendar = exports.Calendar = /*#__PURE__*/(0, _emotion.boundCalendar)({
+  base: CalendarBase,
+  baseRange: CalendarBaseRange,
+  "double": CalendarDouble,
+  doubleRange: CalendarDoubleRange
+});

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

@@ -0,0 +1,326 @@
+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',
+            },
+        },
+        size: {
+            options: ['l', 'm', 's', 'xs'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        locale: {
+            options: ['ru', 'en'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps([
+            '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 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, locale, ...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}
+                locale={locale}
+                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: 'm',
+        locale: 'ru',
+        stretched: false,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => {
+    const { min, max, includeEdgeDates, size, displayDouble, locale, ...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}
+                locale={locale}
+                onChangeValue={handleOnChange}
+                min={min}
+                max={max}
+                {...rest}
+            />
+        ) : (
+            <CalendarBase
+                size={size}
+                value={value}
+                includeEdgeDates={includeEdgeDates}
+                type={type}
+                locale={locale}
+                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="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', height: '100vh' }}>{calendarMap[currentState]}</div>
+        </>
+    );
+};
+
+export const Base: StoryObj<CalendarBaseProps & { displayDouble: boolean }> = {
+    argTypes: {
+        ...disableProps(['isRange', 'isDouble']),
+    },
+    args: {
+        size: 'm',
+        min: defaultMinDate,
+        max: defaultMaxDate,
+        includeEdgeDates: false,
+        displayDouble: false,
+        locale: 'ru',
+        stretched: false,
+    },
+    render: (args) => <StoryBase {...args} />,
+};
+
+const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => {
+    const { min, max, includeEdgeDates, size, displayDouble, locale, ...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 ? (
+            <CalendarBaseRange
+                size={size}
+                includeEdgeDates={includeEdgeDates}
+                type={type}
+                locale={locale}
+                min={min}
+                max={max}
+                {...rest}
+                value={values}
+                onChangeValue={handleOnChange}
+            />
+        ) : (
+            <CalendarDoubleRange
+                size={size}
+                includeEdgeDates={includeEdgeDates}
+                type={type}
+                locale={locale}
+                min={min}
+                max={max}
+                {...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="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', height: '100vh' }}>{calendarMap[currentState]}</div>
+        </>
+    );
+};
+
+export const Range: StoryObj<CalendarBaseRangeProps & { displayDouble: boolean }> = {
+    argTypes: {
+        ...disableProps(['isRange', 'isDouble']),
+    },
+    args: {
+        size: 'm',
+        min: defaultMinDate,
+        max: defaultMaxDate,
+        includeEdgeDates: false,
+        displayDouble: false,
+        locale: 'ru',
+        stretched: false,
+    },
+    render: (args) => <StoryRange {...args} />,
+};