@daryasidorovich/modsen-datepicker 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc.json +7 -0
- package/.github/workflows/chromatic.yml +25 -0
- package/.github/workflows/ci.yml +56 -0
- package/.husky/commit-msg +1 -0
- package/.husky/pre-commit +1 -0
- package/.prettierignore +16 -0
- package/.prettierrc +6 -0
- package/.storybook/main.js +93 -0
- package/.storybook/preview-head.html +6 -0
- package/.storybook/preview.js +26 -0
- package/.storybook/preview.tsx +18 -0
- package/README.md +302 -0
- package/commitlint.config.js +23 -0
- package/dist/components/BaseCalendar/index.d.ts +2 -0
- package/dist/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.d.ts +8 -0
- package/dist/components/CalendarGrid/CalendarGridWithTasks/index.d.ts +2 -0
- package/dist/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.d.ts +1 -0
- package/dist/components/CalendarGrid/CalendarGridWithoutTasks/index.d.ts +4 -0
- package/dist/components/CalendarGrid/index.d.ts +2 -0
- package/dist/components/CalendarGrid/types.d.ts +21 -0
- package/dist/components/Clear/index.d.ts +5 -0
- package/dist/components/DatePicker/index.d.ts +5 -0
- package/dist/components/Day/index.d.ts +16 -0
- package/dist/components/Input/index.d.ts +10 -0
- package/dist/components/Modal/CrudModal/index.d.ts +2 -0
- package/dist/components/Modal/index.d.ts +12 -0
- package/dist/components/Modal/types.d.ts +12 -0
- package/dist/components/Month/index.d.ts +7 -0
- package/dist/components/RangePicker/index.d.ts +6 -0
- package/dist/components/TasksManager/AddModal/index.d.ts +6 -0
- package/dist/components/TasksManager/DeleteModal/index.d.ts +6 -0
- package/dist/components/TasksManager/EditModal/index.d.ts +7 -0
- package/dist/components/TasksManager/index.d.ts +9 -0
- package/dist/components/Week/index.d.ts +17 -0
- package/dist/components/WeekDay/index.d.ts +7 -0
- package/dist/constants/dateMask.d.ts +21 -0
- package/dist/constants/firstDayOfWeek.d.ts +5 -0
- package/dist/constants/holidays.d.ts +1 -0
- package/dist/constants/modes.d.ts +5 -0
- package/dist/constants/monthsNames.d.ts +1 -0
- package/dist/constants/weekdaysNames.d.ts +1 -0
- package/dist/hooks/useCalendar.d.ts +7 -0
- package/dist/hooks/useLockBodyScroll.d.ts +2 -0
- package/dist/hooks/useModal.d.ts +13 -0
- package/dist/hooks/useTooltip.d.ts +9 -0
- package/dist/hooks/useValidate.d.ts +11 -0
- package/dist/index.cjs +17250 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +17233 -0
- package/dist/index.js.map +1 -0
- package/dist/services/calendarService.d.ts +19 -0
- package/dist/services/decorators/withHolidays.d.ts +2 -0
- package/dist/services/decorators/withHolidays.test.d.ts +1 -0
- package/dist/services/decorators/withMinMax.d.ts +2 -0
- package/dist/services/decorators/withMinMax.test.d.ts +1 -0
- package/dist/services/holidayService.d.ts +5 -0
- package/dist/setupTests.d.ts +1 -0
- package/dist/store/localStorage.d.ts +3 -0
- package/dist/store/tasksStore.d.ts +8 -0
- package/dist/store/tasksStore.test.d.ts +1 -0
- package/dist/store/types.d.ts +18 -0
- package/dist/utils/calendar.d.ts +7 -0
- package/dist/utils/calendar.test.d.ts +1 -0
- package/dist/utils/controlDate.d.ts +1 -0
- package/dist/utils/dateChecks.d.ts +10 -0
- package/dist/utils/dateChecks.test.d.ts +1 -0
- package/dist/utils/formatDate.d.ts +3 -0
- package/dist/utils/formatDate.test.d.ts +1 -0
- package/dist/utils/schema.d.ts +6 -0
- package/dist/utils/schema.test.d.ts +1 -0
- package/dist/utils/weekdayOrder.d.ts +1 -0
- package/dist/utils/weekdayOrder.test.d.ts +1 -0
- package/docs/base-calendar.png +0 -0
- package/docs/dark-theme.png +0 -0
- package/docs/datepicker.png +0 -0
- package/docs/rangepicker-with-error.png +0 -0
- package/docs/rangepicker.png +0 -0
- package/eslint.config.ts +80 -0
- package/jest.config.json +21 -0
- package/package.json +106 -0
- package/rollup.config.js +65 -0
- package/src/assets/actions/Delete.svg +4 -0
- package/src/assets/actions/Edit.svg +3 -0
- package/src/assets/arrows/Next.svg +4 -0
- package/src/assets/arrows/Prev.svg +4 -0
- package/src/assets/input/Calendar.svg +3 -0
- package/src/assets/input/Clear.svg +3 -0
- package/src/components/BaseCalendar/BaseCalendar.stories.tsx +77 -0
- package/src/components/BaseCalendar/index.tsx +63 -0
- package/src/components/BaseCalendar/styles.module.scss +15 -0
- package/src/components/CalendarGrid/CalendarGrid.stories.tsx +136 -0
- package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.tsx +27 -0
- package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/styles.module.scss +9 -0
- package/src/components/CalendarGrid/CalendarGridWithTasks/index.tsx +51 -0
- package/src/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.tsx +223 -0
- package/src/components/CalendarGrid/CalendarGridWithoutTasks/index.tsx +36 -0
- package/src/components/CalendarGrid/CalendarGridWithoutTasks/styles.module.scss +11 -0
- package/src/components/CalendarGrid/index.tsx +19 -0
- package/src/components/CalendarGrid/types.ts +26 -0
- package/src/components/Clear/Clear.stories.tsx +16 -0
- package/src/components/Clear/index.tsx +12 -0
- package/src/components/Clear/styles.module.scss +34 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +127 -0
- package/src/components/DatePicker/index.tsx +72 -0
- package/src/components/DatePicker/styles.module.scss +10 -0
- package/src/components/Day/Day.stories.tsx +75 -0
- package/src/components/Day/index.tsx +95 -0
- package/src/components/Day/styles.module.scss +97 -0
- package/src/components/Input/Input.stories.tsx +37 -0
- package/src/components/Input/index.tsx +64 -0
- package/src/components/Input/styles.module.scss +79 -0
- package/src/components/Modal/CrudModal/index.tsx +43 -0
- package/src/components/Modal/CrudModal/styles.module.scss +44 -0
- package/src/components/Modal/index.tsx +66 -0
- package/src/components/Modal/styles.module.scss +40 -0
- package/src/components/Modal/types.ts +13 -0
- package/src/components/Month/Month.stories.tsx +19 -0
- package/src/components/Month/index.tsx +31 -0
- package/src/components/Month/styles.module.scss +30 -0
- package/src/components/RangePicker/RangePicker.stories.tsx +134 -0
- package/src/components/RangePicker/index.tsx +144 -0
- package/src/components/RangePicker/styles.module.scss +19 -0
- package/src/components/TasksManager/AddModal/index.tsx +62 -0
- package/src/components/TasksManager/DeleteModal/index.tsx +22 -0
- package/src/components/TasksManager/EditModal/index.tsx +96 -0
- package/src/components/TasksManager/index.tsx +112 -0
- package/src/components/TasksManager/styles.module.scss +62 -0
- package/src/components/Week/Week.stories.tsx +49 -0
- package/src/components/Week/index.tsx +68 -0
- package/src/components/Week/styles.module.scss +7 -0
- package/src/components/WeekDay/WeekDay.stories.tsx +38 -0
- package/src/components/WeekDay/index.tsx +35 -0
- package/src/components/WeekDay/styles.module.scss +19 -0
- package/src/constants/dateMask.ts +23 -0
- package/src/constants/firstDayOfWeek.ts +7 -0
- package/src/constants/holidays.ts +32 -0
- package/src/constants/modes.ts +6 -0
- package/src/constants/monthsNames.ts +14 -0
- package/src/constants/weekdaysNames.ts +1 -0
- package/src/hooks/useCalendar.ts +62 -0
- package/src/hooks/useLockBodyScroll.ts +19 -0
- package/src/hooks/useModal.ts +45 -0
- package/src/hooks/useTooltip.ts +41 -0
- package/src/hooks/useValidate.ts +80 -0
- package/src/index.ts +15 -0
- package/src/services/calendarService.ts +62 -0
- package/src/services/decorators/withHolidays.test.ts +64 -0
- package/src/services/decorators/withHolidays.ts +12 -0
- package/src/services/decorators/withMinMax.test.ts +77 -0
- package/src/services/decorators/withMinMax.ts +19 -0
- package/src/services/holidayService.ts +56 -0
- package/src/setupTests.ts +1 -0
- package/src/store/localStorage.ts +33 -0
- package/src/store/tasksStore.test.tsx +208 -0
- package/src/store/tasksStore.tsx +146 -0
- package/src/store/types.ts +22 -0
- package/src/styles/_border.scss +9 -0
- package/src/styles/_colors.scss +53 -0
- package/src/styles/_gap.scss +4 -0
- package/src/styles/_globals.scss +61 -0
- package/src/styles/_grid.scss +9 -0
- package/src/styles/_mixins.scss +6 -0
- package/src/styles/_reset.scss +98 -0
- package/src/styles/_theme-mixins.scss +51 -0
- package/src/styles/_typography.scss +10 -0
- package/src/styles/_variables.scss +8 -0
- package/src/styles/main.scss +3 -0
- package/src/types/types.d.ts +15 -0
- package/src/utils/calendar.test.ts +154 -0
- package/src/utils/calendar.ts +82 -0
- package/src/utils/controlDate.ts +3 -0
- package/src/utils/dateChecks.test.ts +216 -0
- package/src/utils/dateChecks.ts +75 -0
- package/src/utils/formatDate.test.ts +57 -0
- package/src/utils/formatDate.ts +27 -0
- package/src/utils/schema.test.ts +40 -0
- package/src/utils/schema.ts +8 -0
- package/src/utils/weekdayOrder.test.ts +11 -0
- package/src/utils/weekdayOrder.ts +7 -0
- package/tsconfig.json +31 -0
- package/vitest.config.ts +38 -0
- package/vitest.shims.d.ts +1 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InputHTMLAttributes, Ref } from 'react';
|
|
2
|
+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
+
label?: string;
|
|
4
|
+
error?: string;
|
|
5
|
+
onReset?: () => void;
|
|
6
|
+
ref?: Ref<HTMLInputElement>;
|
|
7
|
+
isDateInput?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const Input: ({ label, error, className, id, onReset, placeholder, type, isDateInput, ref, ...restProps }: InputProps) => import("react").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export interface ModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
showCloseButton?: boolean;
|
|
7
|
+
showOverlay?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
classNameOverlay?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
}
|
|
12
|
+
export declare const Modal: ({ isOpen, onClose, children, showOverlay, showCloseButton, className, classNameOverlay, style, }: ModalProps) => React.ReactPortal | null;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface CrudModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onConfirm: () => void;
|
|
6
|
+
title: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
cancelText?: string;
|
|
9
|
+
confirmText?: string;
|
|
10
|
+
isLoading?: boolean;
|
|
11
|
+
showCloseButton?: boolean;
|
|
12
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
|
|
2
|
+
export interface RangePickerProps extends BaseCalendarProps, Pick<CalendarProps, 'rangeStart' | 'rangeEnd'> {
|
|
3
|
+
onChangeStart?: (date?: Date) => void;
|
|
4
|
+
onChangeEnd?: (date?: Date) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const RangePicker: ({ rangeStart, rangeEnd, monthDate, onChangeStart, onChangeEnd, ...props }: RangePickerProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ModalProps } from '@/components/Modal';
|
|
2
|
+
interface EditModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
|
|
3
|
+
id: string;
|
|
4
|
+
date: Date;
|
|
5
|
+
}
|
|
6
|
+
export declare const EditModal: ({ isOpen, onClose, id, date }: EditModalProps) => import("react").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Task } from '@/store/types';
|
|
2
|
+
interface TasksManager {
|
|
3
|
+
tasks: Task[];
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
selectedDate: Date;
|
|
7
|
+
}
|
|
8
|
+
export declare const TasksManager: ({ onClose, isOpen, tasks, selectedDate, }: TasksManager) => import("react").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface WeekProps {
|
|
2
|
+
weekDays: Date[];
|
|
3
|
+
selectedDate?: Date;
|
|
4
|
+
rangeStart?: Date;
|
|
5
|
+
rangeEnd?: Date;
|
|
6
|
+
getIsHoliday?: (date: Date) => boolean;
|
|
7
|
+
getHasTask?: (date: Date) => boolean;
|
|
8
|
+
getIsDisabled?: (date: Date) => boolean;
|
|
9
|
+
getIsCurrentMonth: (date: Date) => boolean;
|
|
10
|
+
getIsWeekend?: (date: Date) => boolean;
|
|
11
|
+
hasTasks?: (date: Date) => boolean;
|
|
12
|
+
onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
|
|
13
|
+
onDateDoubleClick?: (date: Date) => void;
|
|
14
|
+
onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
|
+
onMouseLeave?: () => void;
|
|
16
|
+
}
|
|
17
|
+
export declare const Week: ({ weekDays, selectedDate, getIsHoliday, getIsDisabled, getIsCurrentMonth, rangeStart, rangeEnd, hasTasks, onDateClick, onDateDoubleClick, onMouseEnter, onMouseLeave, }: WeekProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare const DATE_MASK: {
|
|
2
|
+
readonly mask: "dd/mm/yyyy";
|
|
3
|
+
readonly blocks: {
|
|
4
|
+
readonly dd: {
|
|
5
|
+
readonly mask: typeof import("imask").MaskedRange;
|
|
6
|
+
readonly from: 1;
|
|
7
|
+
readonly to: 31;
|
|
8
|
+
};
|
|
9
|
+
readonly mm: {
|
|
10
|
+
readonly mask: typeof import("imask").MaskedRange;
|
|
11
|
+
readonly from: 1;
|
|
12
|
+
readonly to: 12;
|
|
13
|
+
};
|
|
14
|
+
readonly yyyy: {
|
|
15
|
+
readonly mask: typeof import("imask").MaskedRange;
|
|
16
|
+
readonly from: 1900;
|
|
17
|
+
readonly to: 2100;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
readonly autofix: true;
|
|
21
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getDefaultHolidays: (year: number) => Date[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const MONTHS_NAMES: string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const WEEKDAYS_NAMES: string[];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface UseModalOptions {
|
|
2
|
+
initial?: boolean;
|
|
3
|
+
onOpen?: () => void;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const useModal: (options?: UseModalOptions) => {
|
|
7
|
+
isOpen: boolean;
|
|
8
|
+
open: () => void;
|
|
9
|
+
close: () => void;
|
|
10
|
+
toggle: () => void;
|
|
11
|
+
setOpen: (value: boolean) => void;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare function useValidate(selectedDate: Date | undefined): {
|
|
2
|
+
currentDate: Date | undefined;
|
|
3
|
+
setCurrentDate: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
|
|
4
|
+
handleDateValidation: (value: string, startDate?: Date) => Date | undefined;
|
|
5
|
+
handleClearInput: () => void;
|
|
6
|
+
handleDateSelect: (date?: Date) => void;
|
|
7
|
+
ref: import("react").MutableRefObject<import("imask").InputMaskElement | null>;
|
|
8
|
+
value: string;
|
|
9
|
+
setValue: import("react").Dispatch<string>;
|
|
10
|
+
error: string;
|
|
11
|
+
};
|