@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/components/TasksManager/styles.module.scss

@@ -1,62 +1,62 @@
-.tasksManager {
-  min-width: 300px;
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-  gap: $gap-24;
-  max-height: 70%;
-}
-
-.tasks {
-  display: flex;
-  flex-direction: column;
-  gap: $gap-8;
-}
-
-.task {
-  display: flex;
-  gap: $gap-8;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.checked {
-  @include themify-modules($themes) {
-    color: themed('disabled');
-  }
-}
-
-.title {
-  margin-right: auto;
-}
-
-.action {
-  border: none;
-  background-color: transparent;
-
-  @include themify-modules($themes) {
-    color: themed('text');
-  }
-}
-
-.delete {
-  @include themify-modules($themes) {
-    color: themed('accent');
-  }
-}
-
-.add {
-  @include themify-modules($themes) {
-    background-color: themed('middle-blue');
-    border-color: themed('border');
-    color: themed('white-color');
-  }
-
-  @include border;
-
-  border-radius: $radius-8;
-}
-
-.header {
-  font-size: $font-size-18;
-}
+.tasksManager {
+  min-width: 300px;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: $gap-24;
+  max-height: 70%;
+}
+
+.tasks {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}
+
+.task {
+  display: flex;
+  gap: $gap-8;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checked {
+  @include themify-modules($themes) {
+    color: themed('disabled');
+  }
+}
+
+.title {
+  margin-right: auto;
+}
+
+.action {
+  border: none;
+  background-color: transparent;
+
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+}
+
+.delete {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+}
+
+.add {
+  @include themify-modules($themes) {
+    background-color: themed('middle-blue');
+    border-color: themed('border');
+    color: themed('white-color');
+  }
+
+  @include border;
+
+  border-radius: $radius-8;
+}
+
+.header {
+  font-size: $font-size-18;
+}

package/src/components/Week/Week.stories.tsx

@@ -1,49 +1,49 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Week } from '.';
-
-const meta: Meta<typeof Week> = {
-  component: Week,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-const weekDaysArr = [
-  new Date(2026, 7, 25),
-  new Date(2026, 7, 26),
-  new Date(2026, 7, 27),
-  new Date(2026, 7, 28),
-  new Date(2026, 7, 29),
-  new Date(2026, 7, 30),
-  new Date(2026, 7, 31),
-];
-
-const baseArgs = {
-  weekDays: weekDaysArr,
-  getIsCurrentMonth: () => {
-    return true;
-  },
-};
-
-type Story = StoryObj<typeof Week>;
-
-export const Default: Story = {
-  args: { ...baseArgs },
-};
-
-export const WithSelectedDate: Story = {
-  args: {
-    ...baseArgs,
-    selectedDate: new Date(2026, 7, 28),
-  },
-};
-
-export const WithRange: Story = {
-  args: {
-    ...baseArgs,
-    rangeStart: new Date(2026, 7, 26),
-    rangeEnd: new Date(2026, 7, 30),
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Week } from '.';
+
+const meta: Meta<typeof Week> = {
+  component: Week,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+const weekDaysArr = [
+  new Date(2026, 7, 25),
+  new Date(2026, 7, 26),
+  new Date(2026, 7, 27),
+  new Date(2026, 7, 28),
+  new Date(2026, 7, 29),
+  new Date(2026, 7, 30),
+  new Date(2026, 7, 31),
+];
+
+const baseArgs = {
+  weekDays: weekDaysArr,
+  getIsCurrentMonth: () => {
+    return true;
+  },
+};
+
+type Story = StoryObj<typeof Week>;
+
+export const Default: Story = {
+  args: { ...baseArgs },
+};
+
+export const WithSelectedDate: Story = {
+  args: {
+    ...baseArgs,
+    selectedDate: new Date(2026, 7, 28),
+  },
+};
+
+export const WithRange: Story = {
+  args: {
+    ...baseArgs,
+    rangeStart: new Date(2026, 7, 26),
+    rangeEnd: new Date(2026, 7, 30),
+  },
+};

package/src/components/Week/index.tsx

@@ -1,68 +1,68 @@
-import {
-  isInRange,
-  isRangeEnd,
-  isRangeStart,
-  isSelected,
-} from '@/utils/dateChecks';
-
-import { Day } from '../Day';
-import styles from './styles.module.scss';
-
-export interface WeekProps {
-  weekDays: Date[];
-  selectedDate?: Date;
-  rangeStart?: Date;
-  rangeEnd?: Date;
-  getIsHoliday?: (date: Date) => boolean;
-  getHasTask?: (date: Date) => boolean;
-  getIsDisabled?: (date: Date) => boolean;
-  getIsCurrentMonth: (date: Date) => boolean;
-  getIsWeekend?: (date: Date) => boolean;
-  hasTasks?: (date: Date) => boolean;
-  onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
-  onDateDoubleClick?: (date: Date) => void;
-  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onMouseLeave?: () => void;
-}
-
-export const Week = ({
-  weekDays,
-  selectedDate,
-  getIsHoliday,
-  getIsDisabled,
-  getIsCurrentMonth,
-  rangeStart,
-  rangeEnd,
-  hasTasks,
-  onDateClick,
-  onDateDoubleClick,
-  onMouseEnter,
-  onMouseLeave,
-}: WeekProps) => {
-  return (
-    <div className={styles.week}>
-      {weekDays.map((date) => {
-        return (
-          <Day
-            key={date.toISOString()}
-            date={date}
-            isSelected={isSelected(date, selectedDate)}
-            isDisabled={getIsDisabled?.(date) || false}
-            isCurrentMonth={getIsCurrentMonth(date)}
-            isHoliday={getIsHoliday?.(date) || false}
-            hasTasks={hasTasks?.(date) || false}
-            isRangeStart={isRangeStart(date, rangeStart)}
-            isRangeEnd={isRangeEnd(date, rangeEnd)}
-            isRangeMiddle={isInRange(date, rangeStart, rangeEnd)}
-            onClick={getIsDisabled?.(date) ? undefined : onDateClick}
-            onDoubleClick={
-              getIsDisabled?.(date) ? undefined : onDateDoubleClick
-            }
-            onMouseEnter={getIsDisabled?.(date) ? undefined : onMouseEnter}
-            onMouseLeave={getIsDisabled?.(date) ? undefined : onMouseLeave}
-          />
-        );
-      })}
-    </div>
-  );
-};
+import {
+  isInRange,
+  isRangeEnd,
+  isRangeStart,
+  isSelected,
+} from '@/utils/dateChecks';
+
+import { Day } from '../Day';
+import styles from './styles.module.scss';
+
+export interface WeekProps {
+  weekDays: Date[];
+  selectedDate?: Date;
+  rangeStart?: Date;
+  rangeEnd?: Date;
+  getIsHoliday?: (date: Date) => boolean;
+  getHasTask?: (date: Date) => boolean;
+  getIsDisabled?: (date: Date) => boolean;
+  getIsCurrentMonth: (date: Date) => boolean;
+  getIsWeekend?: (date: Date) => boolean;
+  hasTasks?: (date: Date) => boolean;
+  onDateClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+  onDateDoubleClick?: (date: Date) => void;
+  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onMouseLeave?: () => void;
+}
+
+export const Week = ({
+  weekDays,
+  selectedDate,
+  getIsHoliday,
+  getIsDisabled,
+  getIsCurrentMonth,
+  rangeStart,
+  rangeEnd,
+  hasTasks,
+  onDateClick,
+  onDateDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}: WeekProps) => {
+  return (
+    <div className={styles.week}>
+      {weekDays.map((date) => {
+        return (
+          <Day
+            key={date.toISOString()}
+            date={date}
+            isSelected={isSelected(date, selectedDate)}
+            isDisabled={getIsDisabled?.(date) || false}
+            isCurrentMonth={getIsCurrentMonth(date)}
+            isHoliday={getIsHoliday?.(date) || false}
+            hasTasks={hasTasks?.(date) || false}
+            isRangeStart={isRangeStart(date, rangeStart)}
+            isRangeEnd={isRangeEnd(date, rangeEnd)}
+            isRangeMiddle={isInRange(date, rangeStart, rangeEnd)}
+            onClick={getIsDisabled?.(date) ? undefined : onDateClick}
+            onDoubleClick={
+              getIsDisabled?.(date) ? undefined : onDateDoubleClick
+            }
+            onMouseEnter={getIsDisabled?.(date) ? undefined : onMouseEnter}
+            onMouseLeave={getIsDisabled?.(date) ? undefined : onMouseLeave}
+          />
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Week/styles.module.scss

@@ -1,7 +1,7 @@
-.week {
-  display: flex;
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-}
+.week {
+  display: flex;
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+  }
+}

package/src/components/WeekDay/WeekDay.stories.tsx

@@ -1,38 +1,38 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { WeekDay } from '.';
-
-const meta: Meta<typeof WeekDay> = {
-  component: WeekDay,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof WeekDay>;
-
-export const MondayFirst: Story = {
-  args: {
-    firstDayOfWeek: 1,
-  },
-};
-
-export const SundayFirst: Story = {
-  args: {
-    firstDayOfWeek: 0,
-  },
-};
-
-export const HideWeekends: Story = {
-  args: {
-    firstDayOfWeek: 0,
-    hideWeekends: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { WeekDay } from '.';
+
+const meta: Meta<typeof WeekDay> = {
+  component: WeekDay,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WeekDay>;
+
+export const MondayFirst: Story = {
+  args: {
+    firstDayOfWeek: 1,
+  },
+};
+
+export const SundayFirst: Story = {
+  args: {
+    firstDayOfWeek: 0,
+  },
+};
+
+export const HideWeekends: Story = {
+  args: {
+    firstDayOfWeek: 0,
+    hideWeekends: true,
+  },
+};

package/src/components/WeekDay/index.tsx

@@ -1,35 +1,35 @@
-import classNames from 'classnames';
-
-import { WEEKDAYS_NAMES } from '@/constants/weekdaysNames';
-import { getOrderedDays } from '@/utils/weekdayOrder';
-
-import styles from './styles.module.scss';
-
-interface WeekDayProps {
-  firstDayOfWeek?: 0 | 1;
-  className?: string;
-  hideWeekends?: boolean;
-}
-
-export const WeekDay = ({
-  firstDayOfWeek = 1,
-  className = '',
-  hideWeekends = false,
-}: WeekDayProps) => {
-  let days = getOrderedDays(firstDayOfWeek);
-
-  if (hideWeekends) {
-    days = days.filter((dayIndex) => dayIndex !== 0 && dayIndex !== 6);
-  }
-  return (
-    <div className={classNames(styles.weekDay, className)}>
-      {days.map((index) => {
-        return (
-          <span key={WEEKDAYS_NAMES[index]} className={styles.dayName}>
-            {WEEKDAYS_NAMES[index]}
-          </span>
-        );
-      })}
-    </div>
-  );
-};
+import classNames from 'classnames';
+
+import { WEEKDAYS_NAMES } from '@/constants/weekdaysNames';
+import { getOrderedDays } from '@/utils/weekdayOrder';
+
+import styles from './styles.module.scss';
+
+interface WeekDayProps {
+  firstDayOfWeek?: 0 | 1;
+  className?: string;
+  hideWeekends?: boolean;
+}
+
+export const WeekDay = ({
+  firstDayOfWeek = 1,
+  className = '',
+  hideWeekends = false,
+}: WeekDayProps) => {
+  let days = getOrderedDays(firstDayOfWeek);
+
+  if (hideWeekends) {
+    days = days.filter((dayIndex) => dayIndex !== 0 && dayIndex !== 6);
+  }
+  return (
+    <div className={classNames(styles.weekDay, className)}>
+      {days.map((index) => {
+        return (
+          <span key={WEEKDAYS_NAMES[index]} className={styles.dayName}>
+            {WEEKDAYS_NAMES[index]}
+          </span>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/WeekDay/styles.module.scss

@@ -1,19 +1,19 @@
-.weekDay {
-  display: flex;
-}
-
-.dayName {
-  @include square(32px);
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-
-  font-size: $font-size-13;
-  padding: $gap-10;
-  border-radius: $radius-8;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: $font-weight-semibold;
-}
+.weekDay {
+  display: flex;
+}
+
+.dayName {
+  @include square(32px);
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+  }
+
+  font-size: $font-size-13;
+  padding: $gap-10;
+  border-radius: $radius-8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: $font-weight-semibold;
+}

package/src/constants/dateMask.ts

@@ -1,23 +1,23 @@
-import { IMask } from 'react-imask';
-
-export const DATE_MASK = {
-  mask: 'dd/mm/yyyy',
-  blocks: {
-    dd: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 31,
-    },
-    mm: {
-      mask: IMask.MaskedRange,
-      from: 1,
-      to: 12,
-    },
-    yyyy: {
-      mask: IMask.MaskedRange,
-      from: 1900,
-      to: 2100,
-    },
-  },
-  autofix: true,
-} as const;
+import { IMask } from 'react-imask';
+
+export const DATE_MASK = {
+  mask: 'dd/mm/yyyy',
+  blocks: {
+    dd: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 31,
+    },
+    mm: {
+      mask: IMask.MaskedRange,
+      from: 1,
+      to: 12,
+    },
+    yyyy: {
+      mask: IMask.MaskedRange,
+      from: 1900,
+      to: 2100,
+    },
+  },
+  autofix: true,
+} as const;

package/src/constants/firstDayOfWeek.ts

@@ -1,7 +1,7 @@
-export const FIRST_DAY_OF_WEEK = {
-  MONDAY: 1,
-  SUNDAY: 0,
-} as const;
-
-export type FIRST_DAY_OF_WEEK_TYPES =
-  (typeof FIRST_DAY_OF_WEEK)[keyof typeof FIRST_DAY_OF_WEEK];
+export const FIRST_DAY_OF_WEEK = {
+  MONDAY: 1,
+  SUNDAY: 0,
+} as const;
+
+export type FIRST_DAY_OF_WEEK_TYPES =
+  (typeof FIRST_DAY_OF_WEEK)[keyof typeof FIRST_DAY_OF_WEEK];