@itcase/ui-web 1.9.77 → 1.9.82

package/dist/types/components/DatePeriod/stories/DatePeriodSize.stories.js

@@ -0,0 +1,548 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { DateTime } from 'luxon';
+import { DatePeriod } from '../DatePeriod';
+const meta = {
+    title: 'Molecules / DatePeriod / Size',
+    component: DatePeriod,
+    args: {
+        appearance: 'surfacePrimary sizeL',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+const Component = (args) => {
+    // const [startDatePickerPeriod, setStartDatePickerPeriod] = useState<
+    //   Date | DateIso | null
+    // >(DATE_PERIOD_INTERVALS.today.dateIntervalsList[0])
+    // const [endDatePickerPeriod, setEndDatePickerPeriod] = useState<
+    //   Date | DateIso | null
+    // >(DATE_PERIOD_INTERVALS.today.dateIntervalsList[1])
+    // const onChangeDatePeriod = useCallback(
+    //   (start: Date | null, end: Date | null) => {
+    //     debugger
+    //     setStartDatePickerPeriod(start ? new Date(start) : start)
+    //     setEndDatePickerPeriod(end ? new Date(end).toISOString() : end)
+    //   },
+    //   [],
+    // )
+    const [selectedDatePeriodValue, setSelectedDatePeriodValue] = useState({
+        label: '',
+        value: {
+            endDate: '',
+            startDate: '',
+            weekNumber: 0,
+        },
+    });
+    const [filtersState, setFiltersState] = useState({
+        selectedBlocksIdList: [],
+        selectedDatePeriodEnd: '2025-11-21',
+        selectedDatePeriodStart: '2025-10-22',
+    });
+    const weeksSelectGroupedOptions = useMemo(() => [
+        {
+            label: '2025',
+            options: [
+                {
+                    label: '47 неделя',
+                    value: {
+                        endDate: '2025-11-23',
+                        startDate: '2025-11-17',
+                        weekNumber: 47,
+                    },
+                },
+                {
+                    label: '46 неделя',
+                    value: {
+                        endDate: '2025-11-16',
+                        startDate: '2025-11-10',
+                        weekNumber: 46,
+                    },
+                },
+                {
+                    label: '45 неделя',
+                    value: {
+                        endDate: '2025-11-09',
+                        startDate: '2025-11-03',
+                        weekNumber: 45,
+                    },
+                },
+                {
+                    label: '44 неделя',
+                    value: {
+                        endDate: '2025-11-02',
+                        startDate: '2025-10-27',
+                        weekNumber: 44,
+                    },
+                },
+                {
+                    label: '43 неделя',
+                    value: {
+                        endDate: '2025-10-26',
+                        startDate: '2025-10-20',
+                        weekNumber: 43,
+                    },
+                },
+                {
+                    label: '42 неделя',
+                    value: {
+                        endDate: '2025-10-19',
+                        startDate: '2025-10-13',
+                        weekNumber: 42,
+                    },
+                },
+                {
+                    label: '41 неделя',
+                    value: {
+                        endDate: '2025-10-12',
+                        startDate: '2025-10-06',
+                        weekNumber: 41,
+                    },
+                },
+                {
+                    label: '40 неделя',
+                    value: {
+                        endDate: '2025-10-05',
+                        startDate: '2025-09-29',
+                        weekNumber: 40,
+                    },
+                },
+                {
+                    label: '39 неделя',
+                    value: {
+                        endDate: '2025-09-28',
+                        startDate: '2025-09-22',
+                        weekNumber: 39,
+                    },
+                },
+                {
+                    label: '38 неделя',
+                    value: {
+                        endDate: '2025-09-21',
+                        startDate: '2025-09-15',
+                        weekNumber: 38,
+                    },
+                },
+                {
+                    label: '37 неделя',
+                    value: {
+                        endDate: '2025-09-14',
+                        startDate: '2025-09-08',
+                        weekNumber: 37,
+                    },
+                },
+                {
+                    label: '36 неделя',
+                    value: {
+                        endDate: '2025-09-07',
+                        startDate: '2025-09-01',
+                        weekNumber: 36,
+                    },
+                },
+                {
+                    label: '35 неделя',
+                    value: {
+                        endDate: '2025-08-31',
+                        startDate: '2025-08-25',
+                        weekNumber: 35,
+                    },
+                },
+                {
+                    label: '34 неделя',
+                    value: {
+                        endDate: '2025-08-24',
+                        startDate: '2025-08-18',
+                        weekNumber: 34,
+                    },
+                },
+                {
+                    label: '33 неделя',
+                    value: {
+                        endDate: '2025-08-17',
+                        startDate: '2025-08-11',
+                        weekNumber: 33,
+                    },
+                },
+                {
+                    label: '32 неделя',
+                    value: {
+                        endDate: '2025-08-10',
+                        startDate: '2025-08-04',
+                        weekNumber: 32,
+                    },
+                },
+                {
+                    label: '31 неделя',
+                    value: {
+                        endDate: '2025-08-03',
+                        startDate: '2025-07-28',
+                        weekNumber: 31,
+                    },
+                },
+                {
+                    label: '30 неделя',
+                    value: {
+                        endDate: '2025-07-27',
+                        startDate: '2025-07-21',
+                        weekNumber: 30,
+                    },
+                },
+                {
+                    label: '29 неделя',
+                    value: {
+                        endDate: '2025-07-20',
+                        startDate: '2025-07-14',
+                        weekNumber: 29,
+                    },
+                },
+                {
+                    label: '28 неделя',
+                    value: {
+                        endDate: '2025-07-13',
+                        startDate: '2025-07-07',
+                        weekNumber: 28,
+                    },
+                },
+                {
+                    label: '27 неделя',
+                    value: {
+                        endDate: '2025-07-06',
+                        startDate: '2025-06-30',
+                        weekNumber: 27,
+                    },
+                },
+                {
+                    label: '26 неделя',
+                    value: {
+                        endDate: '2025-06-29',
+                        startDate: '2025-06-23',
+                        weekNumber: 26,
+                    },
+                },
+                {
+                    label: '25 неделя',
+                    value: {
+                        endDate: '2025-06-22',
+                        startDate: '2025-06-16',
+                        weekNumber: 25,
+                    },
+                },
+                {
+                    label: '24 неделя',
+                    value: {
+                        endDate: '2025-06-15',
+                        startDate: '2025-06-09',
+                        weekNumber: 24,
+                    },
+                },
+                {
+                    label: '23 неделя',
+                    value: {
+                        endDate: '2025-06-08',
+                        startDate: '2025-06-02',
+                        weekNumber: 23,
+                    },
+                },
+                {
+                    label: '22 неделя',
+                    value: {
+                        endDate: '2025-06-01',
+                        startDate: '2025-05-26',
+                        weekNumber: 22,
+                    },
+                },
+                {
+                    label: '21 неделя',
+                    value: {
+                        endDate: '2025-05-25',
+                        startDate: '2025-05-19',
+                        weekNumber: 21,
+                    },
+                },
+                {
+                    label: '20 неделя',
+                    value: {
+                        endDate: '2025-05-18',
+                        startDate: '2025-05-12',
+                        weekNumber: 20,
+                    },
+                },
+                {
+                    label: '19 неделя',
+                    value: {
+                        endDate: '2025-05-11',
+                        startDate: '2025-05-05',
+                        weekNumber: 19,
+                    },
+                },
+                {
+                    label: '18 неделя',
+                    value: {
+                        endDate: '2025-05-04',
+                        startDate: '2025-04-28',
+                        weekNumber: 18,
+                    },
+                },
+                {
+                    label: '17 неделя',
+                    value: {
+                        endDate: '2025-04-27',
+                        startDate: '2025-04-21',
+                        weekNumber: 17,
+                    },
+                },
+                {
+                    label: '16 неделя',
+                    value: {
+                        endDate: '2025-04-20',
+                        startDate: '2025-04-14',
+                        weekNumber: 16,
+                    },
+                },
+                {
+                    label: '15 неделя',
+                    value: {
+                        endDate: '2025-04-13',
+                        startDate: '2025-04-07',
+                        weekNumber: 15,
+                    },
+                },
+                {
+                    label: '14 неделя',
+                    value: {
+                        endDate: '2025-04-06',
+                        startDate: '2025-03-31',
+                        weekNumber: 14,
+                    },
+                },
+                {
+                    label: '13 неделя',
+                    value: {
+                        endDate: '2025-03-30',
+                        startDate: '2025-03-24',
+                        weekNumber: 13,
+                    },
+                },
+                {
+                    label: '12 неделя',
+                    value: {
+                        endDate: '2025-03-23',
+                        startDate: '2025-03-17',
+                        weekNumber: 12,
+                    },
+                },
+                {
+                    label: '11 неделя',
+                    value: {
+                        endDate: '2025-03-16',
+                        startDate: '2025-03-10',
+                        weekNumber: 11,
+                    },
+                },
+                {
+                    label: '10 неделя',
+                    value: {
+                        endDate: '2025-03-09',
+                        startDate: '2025-03-03',
+                        weekNumber: 10,
+                    },
+                },
+                {
+                    label: '9 неделя',
+                    value: {
+                        endDate: '2025-03-02',
+                        startDate: '2025-02-24',
+                        weekNumber: 9,
+                    },
+                },
+                {
+                    label: '8 неделя',
+                    value: {
+                        endDate: '2025-02-23',
+                        startDate: '2025-02-17',
+                        weekNumber: 8,
+                    },
+                },
+                {
+                    label: '7 неделя',
+                    value: {
+                        endDate: '2025-02-16',
+                        startDate: '2025-02-10',
+                        weekNumber: 7,
+                    },
+                },
+                {
+                    label: '6 неделя',
+                    value: {
+                        endDate: '2025-02-09',
+                        startDate: '2025-02-03',
+                        weekNumber: 6,
+                    },
+                },
+                {
+                    label: '5 неделя',
+                    value: {
+                        endDate: '2025-02-02',
+                        startDate: '2025-01-27',
+                        weekNumber: 5,
+                    },
+                },
+                {
+                    label: '4 неделя',
+                    value: {
+                        endDate: '2025-01-26',
+                        startDate: '2025-01-20',
+                        weekNumber: 4,
+                    },
+                },
+                {
+                    label: '3 неделя',
+                    value: {
+                        endDate: '2025-01-19',
+                        startDate: '2025-01-13',
+                        weekNumber: 3,
+                    },
+                },
+                {
+                    label: '2 неделя',
+                    value: {
+                        endDate: '2025-01-12',
+                        startDate: '2025-01-06',
+                        weekNumber: 2,
+                    },
+                },
+            ],
+            value: '',
+        },
+        {
+            label: '2024',
+            options: [
+                {
+                    label: '52 неделя',
+                    value: {
+                        endDate: '2024-12-29',
+                        startDate: '2024-12-23',
+                        weekNumber: 52,
+                    },
+                },
+                {
+                    label: '51 неделя',
+                    value: {
+                        endDate: '2024-12-22',
+                        startDate: '2024-12-16',
+                        weekNumber: 51,
+                    },
+                },
+                {
+                    label: '50 неделя',
+                    value: {
+                        endDate: '2024-12-15',
+                        startDate: '2024-12-09',
+                        weekNumber: 50,
+                    },
+                },
+                {
+                    label: '49 неделя',
+                    value: {
+                        endDate: '2024-12-08',
+                        startDate: '2024-12-02',
+                        weekNumber: 49,
+                    },
+                },
+                {
+                    label: '48 неделя',
+                    value: {
+                        endDate: '2024-12-01',
+                        startDate: '2024-11-25',
+                        weekNumber: 48,
+                    },
+                },
+                {
+                    label: '47 неделя',
+                    value: {
+                        endDate: '2024-11-24',
+                        startDate: '2024-11-18',
+                        weekNumber: 47,
+                    },
+                },
+                {
+                    label: '1 неделя',
+                    value: {
+                        endDate: '2025-01-05',
+                        startDate: '2024-12-30',
+                        weekNumber: 1,
+                    },
+                },
+            ],
+            value: '',
+        },
+    ], []);
+    const onChangeDatePeriod = useCallback((dateStart, dateEnd) => {
+        let dateStartIso = null;
+        let dateEndIso = null;
+        if (dateStart) {
+            const dateStartDateTime = DateTime.fromJSDate(dateStart, {
+                zone: 'local',
+            });
+            dateStartIso = dateStartDateTime.toISODate();
+        }
+        if (dateEnd) {
+            const dateEndDateTime = DateTime.fromJSDate(dateEnd, { zone: 'local' });
+            dateEndIso = dateEndDateTime.toISODate();
+        }
+        setFiltersState((prevState) => ({
+            ...prevState,
+            selectedDatePeriodEnd: dateEndIso,
+            selectedDatePeriodStart: dateStartIso,
+        }));
+        const [weekValue] = weeksSelectGroupedOptions
+            .map((yearGroup) => {
+            return yearGroup.options.find((weekGroup) => {
+                const isStartSame = weekGroup.value.startDate === dateStartIso;
+                const isEndSame = weekGroup.value.endDate === dateEndIso;
+                return isStartSame && isEndSame;
+            });
+        })
+            .filter(Boolean);
+        setSelectedDatePeriodValue(weekValue ?? null);
+    }, [weeksSelectGroupedOptions]);
+    const onChangeWeeksSelect = useCallback((newValue) => {
+        const { endDate, startDate } = newValue.value;
+        setFiltersState((prevState) => ({
+            ...prevState,
+            selectedDatePeriodEnd: endDate,
+            selectedDatePeriodStart: startDate,
+        }));
+        setSelectedDatePeriodValue(newValue);
+    }, []);
+    const { selectedDatePeriodEnd, selectedDatePeriodStart } = filtersState;
+    const datePeriodFirstOptions = weeksSelectGroupedOptions.flatMap(({ options }) => options.map((option) => ({ label: option.label, value: option.value })));
+    return (
+    // <DatePeriod
+    //   {...args}
+    //   appearance="surfaceSecondary sizeL solid rounded"
+    //   datePeriodValueEnd={endDatePickerPeriod}
+    //   datePeriodValueStart={startDatePickerPeriod}
+    //   monthsShown={2}
+    //   onChangeDatePeriod={onChangeDatePeriod}
+    // />
+    _jsx(DatePeriod, { ...args, 
+        // datePeriodIntervalsList={DATE_PERIOD_INTERVALS_LIST}
+        datePeriodSelectFirstOptions: datePeriodFirstOptions, datePeriodSelectFirstPlaceholder: "\u041D\u0435\u0434\u0435\u043B\u044F", datePeriodSelectFirstValue: selectedDatePeriodValue, 
+        // datePeriodValueEnd={startDatePickerPeriod}
+        // datePeriodValueStart={endDatePickerPeriod}
+        datePeriodValueEnd: selectedDatePeriodEnd, datePeriodValueStart: selectedDatePeriodStart, monthsShown: 2, onChangeDatePeriod: onChangeDatePeriod, onChangeDatePeriodFirstSelect: onChangeWeeksSelect, onKeyDown: (event) => event?.preventDefault() }));
+};
+export const Demo = {
+    render: Component,
+};
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => {
+        return _jsx(DatePeriod, { ...args });
+    },
+};

package/dist/types/components/DatePicker/DatePicker.appearance.js

@@ -0,0 +1,9 @@
+import { datePickerSize } from './appearance/datePickerSize';
+import { datePickerStyle } from './appearance/datePickerStyle';
+import { datePickerAppearanceSurface } from './appearance/datePickerSurface';
+const datePickerAppearance = {
+    ...datePickerAppearanceSurface,
+    ...datePickerSize,
+    ...datePickerStyle,
+};
+export { datePickerAppearance };

package/dist/types/components/DatePicker/DatePicker.interface.d.ts

@@ -1,22 +1,14 @@
 import { ReactNode, RefObject } from 'react';
 import DatePicker, { DatePickerProps } from 'react-datepicker';
 import { DateIso } from '@itcase/types-core';
-import { AppearanceKeysDefault, AppearanceSizeKey, AppearanceStyleKey, CompositeAppearanceKey, SizeProps, TextSizeProps, WidthProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceKeysDefault, CompositeAppearanceKeys, SizeProps, TextSizeProps, WidthProps } from '@itcase/types-ui';
 import { ButtonProps } from 'src/components/Button/Button.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { InputProps } from 'src/components/Input/Input.interface';
 import { LabelProps } from 'src/components/Label/Label.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
-type AppearanceKeys = AppearanceKeysDefault | AppearanceSizeKey | AppearanceStyleKey;
-type DatePickerAppearance = {
-    [key in AppearanceKeys]?: DatePickerInputProps;
-};
-type DatePickerConfig = {
-    appearance: DatePickerAppearance;
-    setAppearance: (appearanceConfig: DatePickerAppearance) => void;
-};
 type DatePickerInputAppearanceProps = {
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceKeys;
     clearLabel?: LabelProps['label'];
     clearLabelTextColor?: LabelProps['labelTextColor'];
     clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
@@ -34,6 +26,7 @@ type DatePickerInputAppearanceProps = {
     iconRight?: IconProps['SvgImage'];
     iconShape?: IconProps['shape'];
     iconSize?: IconProps['iconSize'];
+    inputProps?: InputProps;
     labelTextSize?: TextSizeProps;
     monthTextColor?: TextProps['textColor'];
     monthTextSize?: TextProps['size'];
@@ -54,7 +47,6 @@ type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProp
         selectsRange?: boolean;
     };
     endValue?: string | Date | DateIso;
-    inputProps?: InputProps;
     onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
     popperPlacement?: ReactNode;
     value?: string | Date | DateIso;
@@ -98,4 +90,6 @@ type DatePickerInputIcon = {
     inputIconSrc?: IconProps['imageSrc'];
     onClick?: IconProps['onClick'];
 };
+type DatePickerConfig = AppearanceConfig<AppearanceKeysDefault, DatePickerInputAppearanceProps>;
+type DatePickerAppearance = DatePickerConfig['appearance'];
 export type { DatePickerAppearance, DatePickerConfig, DatePickerCustomInput, DatePickerInputAppearanceProps, DatePickerInputIcon, DatePickerInputProps, };

package/dist/types/components/DatePicker/DatePicker.interface.js

@@ -0,0 +1 @@
+export {};