@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.
Files changed (183) hide show
  1. package/.babelrc.json +7 -0
  2. package/.github/workflows/chromatic.yml +25 -0
  3. package/.github/workflows/ci.yml +56 -0
  4. package/.husky/commit-msg +1 -0
  5. package/.husky/pre-commit +1 -0
  6. package/.prettierignore +16 -0
  7. package/.prettierrc +6 -0
  8. package/.storybook/main.js +93 -0
  9. package/.storybook/preview-head.html +6 -0
  10. package/.storybook/preview.js +26 -0
  11. package/.storybook/preview.tsx +18 -0
  12. package/README.md +302 -0
  13. package/commitlint.config.js +23 -0
  14. package/dist/components/BaseCalendar/index.d.ts +2 -0
  15. package/dist/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.d.ts +8 -0
  16. package/dist/components/CalendarGrid/CalendarGridWithTasks/index.d.ts +2 -0
  17. package/dist/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.d.ts +1 -0
  18. package/dist/components/CalendarGrid/CalendarGridWithoutTasks/index.d.ts +4 -0
  19. package/dist/components/CalendarGrid/index.d.ts +2 -0
  20. package/dist/components/CalendarGrid/types.d.ts +21 -0
  21. package/dist/components/Clear/index.d.ts +5 -0
  22. package/dist/components/DatePicker/index.d.ts +5 -0
  23. package/dist/components/Day/index.d.ts +16 -0
  24. package/dist/components/Input/index.d.ts +10 -0
  25. package/dist/components/Modal/CrudModal/index.d.ts +2 -0
  26. package/dist/components/Modal/index.d.ts +12 -0
  27. package/dist/components/Modal/types.d.ts +12 -0
  28. package/dist/components/Month/index.d.ts +7 -0
  29. package/dist/components/RangePicker/index.d.ts +6 -0
  30. package/dist/components/TasksManager/AddModal/index.d.ts +6 -0
  31. package/dist/components/TasksManager/DeleteModal/index.d.ts +6 -0
  32. package/dist/components/TasksManager/EditModal/index.d.ts +7 -0
  33. package/dist/components/TasksManager/index.d.ts +9 -0
  34. package/dist/components/Week/index.d.ts +17 -0
  35. package/dist/components/WeekDay/index.d.ts +7 -0
  36. package/dist/constants/dateMask.d.ts +21 -0
  37. package/dist/constants/firstDayOfWeek.d.ts +5 -0
  38. package/dist/constants/holidays.d.ts +1 -0
  39. package/dist/constants/modes.d.ts +5 -0
  40. package/dist/constants/monthsNames.d.ts +1 -0
  41. package/dist/constants/weekdaysNames.d.ts +1 -0
  42. package/dist/hooks/useCalendar.d.ts +7 -0
  43. package/dist/hooks/useLockBodyScroll.d.ts +2 -0
  44. package/dist/hooks/useModal.d.ts +13 -0
  45. package/dist/hooks/useTooltip.d.ts +9 -0
  46. package/dist/hooks/useValidate.d.ts +11 -0
  47. package/dist/index.cjs +17250 -0
  48. package/dist/index.cjs.map +1 -0
  49. package/dist/index.d.ts +11 -0
  50. package/dist/index.js +17233 -0
  51. package/dist/index.js.map +1 -0
  52. package/dist/services/calendarService.d.ts +19 -0
  53. package/dist/services/decorators/withHolidays.d.ts +2 -0
  54. package/dist/services/decorators/withHolidays.test.d.ts +1 -0
  55. package/dist/services/decorators/withMinMax.d.ts +2 -0
  56. package/dist/services/decorators/withMinMax.test.d.ts +1 -0
  57. package/dist/services/holidayService.d.ts +5 -0
  58. package/dist/setupTests.d.ts +1 -0
  59. package/dist/store/localStorage.d.ts +3 -0
  60. package/dist/store/tasksStore.d.ts +8 -0
  61. package/dist/store/tasksStore.test.d.ts +1 -0
  62. package/dist/store/types.d.ts +18 -0
  63. package/dist/utils/calendar.d.ts +7 -0
  64. package/dist/utils/calendar.test.d.ts +1 -0
  65. package/dist/utils/controlDate.d.ts +1 -0
  66. package/dist/utils/dateChecks.d.ts +10 -0
  67. package/dist/utils/dateChecks.test.d.ts +1 -0
  68. package/dist/utils/formatDate.d.ts +3 -0
  69. package/dist/utils/formatDate.test.d.ts +1 -0
  70. package/dist/utils/schema.d.ts +6 -0
  71. package/dist/utils/schema.test.d.ts +1 -0
  72. package/dist/utils/weekdayOrder.d.ts +1 -0
  73. package/dist/utils/weekdayOrder.test.d.ts +1 -0
  74. package/docs/base-calendar.png +0 -0
  75. package/docs/dark-theme.png +0 -0
  76. package/docs/datepicker.png +0 -0
  77. package/docs/rangepicker-with-error.png +0 -0
  78. package/docs/rangepicker.png +0 -0
  79. package/eslint.config.ts +80 -0
  80. package/jest.config.json +21 -0
  81. package/package.json +106 -0
  82. package/rollup.config.js +65 -0
  83. package/src/assets/actions/Delete.svg +4 -0
  84. package/src/assets/actions/Edit.svg +3 -0
  85. package/src/assets/arrows/Next.svg +4 -0
  86. package/src/assets/arrows/Prev.svg +4 -0
  87. package/src/assets/input/Calendar.svg +3 -0
  88. package/src/assets/input/Clear.svg +3 -0
  89. package/src/components/BaseCalendar/BaseCalendar.stories.tsx +77 -0
  90. package/src/components/BaseCalendar/index.tsx +63 -0
  91. package/src/components/BaseCalendar/styles.module.scss +15 -0
  92. package/src/components/CalendarGrid/CalendarGrid.stories.tsx +136 -0
  93. package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.tsx +27 -0
  94. package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/styles.module.scss +9 -0
  95. package/src/components/CalendarGrid/CalendarGridWithTasks/index.tsx +51 -0
  96. package/src/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.tsx +223 -0
  97. package/src/components/CalendarGrid/CalendarGridWithoutTasks/index.tsx +36 -0
  98. package/src/components/CalendarGrid/CalendarGridWithoutTasks/styles.module.scss +11 -0
  99. package/src/components/CalendarGrid/index.tsx +19 -0
  100. package/src/components/CalendarGrid/types.ts +26 -0
  101. package/src/components/Clear/Clear.stories.tsx +16 -0
  102. package/src/components/Clear/index.tsx +12 -0
  103. package/src/components/Clear/styles.module.scss +34 -0
  104. package/src/components/DatePicker/DatePicker.stories.tsx +127 -0
  105. package/src/components/DatePicker/index.tsx +72 -0
  106. package/src/components/DatePicker/styles.module.scss +10 -0
  107. package/src/components/Day/Day.stories.tsx +75 -0
  108. package/src/components/Day/index.tsx +95 -0
  109. package/src/components/Day/styles.module.scss +97 -0
  110. package/src/components/Input/Input.stories.tsx +37 -0
  111. package/src/components/Input/index.tsx +64 -0
  112. package/src/components/Input/styles.module.scss +79 -0
  113. package/src/components/Modal/CrudModal/index.tsx +43 -0
  114. package/src/components/Modal/CrudModal/styles.module.scss +44 -0
  115. package/src/components/Modal/index.tsx +66 -0
  116. package/src/components/Modal/styles.module.scss +40 -0
  117. package/src/components/Modal/types.ts +13 -0
  118. package/src/components/Month/Month.stories.tsx +19 -0
  119. package/src/components/Month/index.tsx +31 -0
  120. package/src/components/Month/styles.module.scss +30 -0
  121. package/src/components/RangePicker/RangePicker.stories.tsx +134 -0
  122. package/src/components/RangePicker/index.tsx +144 -0
  123. package/src/components/RangePicker/styles.module.scss +19 -0
  124. package/src/components/TasksManager/AddModal/index.tsx +62 -0
  125. package/src/components/TasksManager/DeleteModal/index.tsx +22 -0
  126. package/src/components/TasksManager/EditModal/index.tsx +96 -0
  127. package/src/components/TasksManager/index.tsx +112 -0
  128. package/src/components/TasksManager/styles.module.scss +62 -0
  129. package/src/components/Week/Week.stories.tsx +49 -0
  130. package/src/components/Week/index.tsx +68 -0
  131. package/src/components/Week/styles.module.scss +7 -0
  132. package/src/components/WeekDay/WeekDay.stories.tsx +38 -0
  133. package/src/components/WeekDay/index.tsx +35 -0
  134. package/src/components/WeekDay/styles.module.scss +19 -0
  135. package/src/constants/dateMask.ts +23 -0
  136. package/src/constants/firstDayOfWeek.ts +7 -0
  137. package/src/constants/holidays.ts +32 -0
  138. package/src/constants/modes.ts +6 -0
  139. package/src/constants/monthsNames.ts +14 -0
  140. package/src/constants/weekdaysNames.ts +1 -0
  141. package/src/hooks/useCalendar.ts +62 -0
  142. package/src/hooks/useLockBodyScroll.ts +19 -0
  143. package/src/hooks/useModal.ts +45 -0
  144. package/src/hooks/useTooltip.ts +41 -0
  145. package/src/hooks/useValidate.ts +80 -0
  146. package/src/index.ts +15 -0
  147. package/src/services/calendarService.ts +62 -0
  148. package/src/services/decorators/withHolidays.test.ts +64 -0
  149. package/src/services/decorators/withHolidays.ts +12 -0
  150. package/src/services/decorators/withMinMax.test.ts +77 -0
  151. package/src/services/decorators/withMinMax.ts +19 -0
  152. package/src/services/holidayService.ts +56 -0
  153. package/src/setupTests.ts +1 -0
  154. package/src/store/localStorage.ts +33 -0
  155. package/src/store/tasksStore.test.tsx +208 -0
  156. package/src/store/tasksStore.tsx +146 -0
  157. package/src/store/types.ts +22 -0
  158. package/src/styles/_border.scss +9 -0
  159. package/src/styles/_colors.scss +53 -0
  160. package/src/styles/_gap.scss +4 -0
  161. package/src/styles/_globals.scss +61 -0
  162. package/src/styles/_grid.scss +9 -0
  163. package/src/styles/_mixins.scss +6 -0
  164. package/src/styles/_reset.scss +98 -0
  165. package/src/styles/_theme-mixins.scss +51 -0
  166. package/src/styles/_typography.scss +10 -0
  167. package/src/styles/_variables.scss +8 -0
  168. package/src/styles/main.scss +3 -0
  169. package/src/types/types.d.ts +15 -0
  170. package/src/utils/calendar.test.ts +154 -0
  171. package/src/utils/calendar.ts +82 -0
  172. package/src/utils/controlDate.ts +3 -0
  173. package/src/utils/dateChecks.test.ts +216 -0
  174. package/src/utils/dateChecks.ts +75 -0
  175. package/src/utils/formatDate.test.ts +57 -0
  176. package/src/utils/formatDate.ts +27 -0
  177. package/src/utils/schema.test.ts +40 -0
  178. package/src/utils/schema.ts +8 -0
  179. package/src/utils/weekdayOrder.test.ts +11 -0
  180. package/src/utils/weekdayOrder.ts +7 -0
  181. package/tsconfig.json +31 -0
  182. package/vitest.config.ts +38 -0
  183. 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,2 @@
1
+ import { CrudModalProps } from '../types';
2
+ export declare const CrudModal: ({ isOpen, onClose, onConfirm, title, cancelText, confirmText, isLoading, children, showCloseButton, }: CrudModalProps) => import("react").JSX.Element;
@@ -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,7 @@
1
+ interface MonthProps {
2
+ date: Date;
3
+ onPrev: () => void;
4
+ onNext: () => void;
5
+ }
6
+ export declare const Month: ({ date, onPrev, onNext }: MonthProps) => import("react").JSX.Element;
7
+ export {};
@@ -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,6 @@
1
+ import { ModalProps } from '@/components/Modal';
2
+ interface AddModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
3
+ date: Date;
4
+ }
5
+ export declare const AddModal: ({ isOpen, onClose, date }: AddModalProps) => import("react").JSX.Element;
6
+ export {};
@@ -0,0 +1,6 @@
1
+ import { ModalProps } from '@/components/Modal';
2
+ interface DeleteModalProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
3
+ id: string;
4
+ }
5
+ export declare const DeleteModal: ({ id, isOpen, onClose }: DeleteModalProps) => import("react").JSX.Element;
6
+ export {};
@@ -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,7 @@
1
+ interface WeekDayProps {
2
+ firstDayOfWeek?: 0 | 1;
3
+ className?: string;
4
+ hideWeekends?: boolean;
5
+ }
6
+ export declare const WeekDay: ({ firstDayOfWeek, className, hideWeekends, }: WeekDayProps) => import("react").JSX.Element;
7
+ export {};
@@ -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,5 @@
1
+ export declare const FIRST_DAY_OF_WEEK: {
2
+ readonly MONDAY: 1;
3
+ readonly SUNDAY: 0;
4
+ };
5
+ export type FIRST_DAY_OF_WEEK_TYPES = (typeof FIRST_DAY_OF_WEEK)[keyof typeof FIRST_DAY_OF_WEEK];
@@ -0,0 +1 @@
1
+ export declare const getDefaultHolidays: (year: number) => Date[];
@@ -0,0 +1,5 @@
1
+ export declare const MODES: {
2
+ readonly WEEK: "week";
3
+ readonly MONTH: "month";
4
+ };
5
+ export type MODES_TYPES = (typeof MODES)[keyof typeof MODES];
@@ -0,0 +1 @@
1
+ export declare const MONTHS_NAMES: string[];
@@ -0,0 +1 @@
1
+ export declare const WEEKDAYS_NAMES: string[];
@@ -0,0 +1,7 @@
1
+ import { CalendarProps } from '@/components/Calendar/types';
2
+ import { CalendarService } from '@/services/calendarService';
3
+ export declare function useCalendar(props: CalendarProps): {
4
+ calendar: CalendarService;
5
+ loading: boolean;
6
+ error: string;
7
+ };
@@ -0,0 +1,2 @@
1
+ export declare const useLockBodyScroll: (isLocked: boolean) => void;
2
+ export default useLockBodyScroll;
@@ -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,9 @@
1
+ export declare const useTooltip: () => {
2
+ tooltip: {
3
+ isVisible: boolean;
4
+ x: number;
5
+ y: number;
6
+ };
7
+ handleDayMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => void;
8
+ handleDayMouseLeave: () => void;
9
+ };
@@ -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
+ };