@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,127 +1,127 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DatePicker } from './index';
-import { setControlDate } from '../../utils/controlDate';
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    monthDate: { control: 'date' },
-    selectedDate: { control: 'date' },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof DatePicker>;
-
-export const Default: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WithTasks: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 25),
-    firstDayOfWeek: 1,
-    enableTasks: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const HideWeekends: Story = {
-  args: {
-    monthDate: new Date(2026, 8, 7),
-    firstDayOfWeek: 1,
-    hideWeekends: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const ShowHolidays: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 3),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WeekMode: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 31),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-    mode: 'week',
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
-
-export const WithMinMaxDates: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    minDate: new Date(2026, 7, 10),
-    maxDate: new Date(2026, 7, 20),
-  },
-  render: (args) => (
-    <DatePicker
-      {...args}
-      monthDate={new Date(args.monthDate)}
-      selectedDate={setControlDate(args.selectedDate)}
-      minDate={setControlDate(args.minDate)}
-      maxDate={setControlDate(args.maxDate)}
-    />
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './index';
+import { setControlDate } from '../../utils/controlDate';
+
+const meta: Meta<typeof DatePicker> = {
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    monthDate: { control: 'date' },
+    selectedDate: { control: 'date' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};
+
+export const WithTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: true,
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};
+
+export const HideWeekends: Story = {
+  args: {
+    monthDate: new Date(2026, 8, 7),
+    firstDayOfWeek: 1,
+    hideWeekends: true,
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};
+
+export const ShowHolidays: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};
+
+export const WeekMode: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 31),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+    mode: 'week',
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};
+
+export const WithMinMaxDates: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    minDate: new Date(2026, 7, 10),
+    maxDate: new Date(2026, 7, 20),
+  },
+  render: (args) => (
+    <DatePicker
+      {...args}
+      monthDate={new Date(args.monthDate)}
+      selectedDate={setControlDate(args.selectedDate)}
+      minDate={setControlDate(args.minDate)}
+      maxDate={setControlDate(args.maxDate)}
+    />
+  ),
+};

package/src/components/DatePicker/index.tsx

@@ -1,72 +1,72 @@
-import { ChangeEvent, KeyboardEvent, Ref } from 'react';
-
-import { useValidate } from '@/hooks/useValidate';
-
-import { BaseCalendar } from '../BaseCalendar';
-import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
-import { Input } from '../Input';
-import styles from './styles.module.scss';
-
-export interface DatePickerProps
-  extends BaseCalendarProps, Pick<CalendarProps, 'selectedDate'> {
-  onChange?: (date: Date | undefined) => void;
-}
-
-export const DatePicker = ({
-  selectedDate,
-  monthDate = new Date(),
-  onChange,
-  ...props
-}: DatePickerProps) => {
-  const {
-    currentDate,
-    value,
-    handleDateSelect,
-    error,
-    ref,
-    handleDateValidation,
-    handleClearInput,
-  } = useValidate(selectedDate);
-
-  const handleDateSelectAndExternalUpdate = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    date: Date
-  ) => {
-    handleDateSelect(date);
-    if (onChange) {
-      onChange(date);
-    }
-  };
-
-  const handleDateChange = (e: ChangeEvent<HTMLInputElement>) => {
-    handleDateValidation(e.target.value);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleDateValidation(e.currentTarget.value);
-    }
-  };
-
-  return (
-    <div className={styles.datepicker}>
-      <Input
-        isDateInput
-        label="Date"
-        value={value}
-        ref={ref as Ref<HTMLInputElement>}
-        placeholder="dd/mm/yyyy"
-        onBlur={handleDateChange}
-        onReset={handleClearInput}
-        onKeyDown={handleKeyDown}
-        error={error}
-      />
-      <BaseCalendar
-        selectedDate={currentDate}
-        onDateClick={handleDateSelectAndExternalUpdate}
-        monthDate={currentDate ?? monthDate}
-        {...props}
-      />
-    </div>
-  );
-};
+import { ChangeEvent, KeyboardEvent, Ref } from 'react';
+
+import { useValidate } from '@/hooks/useValidate';
+
+import { BaseCalendar } from '../BaseCalendar';
+import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
+import { Input } from '../Input';
+import styles from './styles.module.scss';
+
+export interface DatePickerProps
+  extends BaseCalendarProps, Pick<CalendarProps, 'selectedDate'> {
+  onChange?: (date: Date | undefined) => void;
+}
+
+export const DatePicker = ({
+  selectedDate,
+  monthDate = new Date(),
+  onChange,
+  ...props
+}: DatePickerProps) => {
+  const {
+    currentDate,
+    value,
+    handleDateSelect,
+    error,
+    ref,
+    handleDateValidation,
+    handleClearInput,
+  } = useValidate(selectedDate);
+
+  const handleDateSelectAndExternalUpdate = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    date: Date
+  ) => {
+    handleDateSelect(date);
+    if (onChange) {
+      onChange(date);
+    }
+  };
+
+  const handleDateChange = (e: ChangeEvent<HTMLInputElement>) => {
+    handleDateValidation(e.target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleDateValidation(e.currentTarget.value);
+    }
+  };
+
+  return (
+    <div className={styles.datepicker}>
+      <Input
+        isDateInput
+        label="Date"
+        value={value}
+        ref={ref as Ref<HTMLInputElement>}
+        placeholder="dd/mm/yyyy"
+        onBlur={handleDateChange}
+        onReset={handleClearInput}
+        onKeyDown={handleKeyDown}
+        error={error}
+      />
+      <BaseCalendar
+        selectedDate={currentDate}
+        onDateClick={handleDateSelectAndExternalUpdate}
+        monthDate={currentDate ?? monthDate}
+        {...props}
+      />
+    </div>
+  );
+};

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

@@ -1,10 +1,10 @@
-.datepicker {
-  display: flex;
-  flex-direction: column;
-  gap: $gap-8;
-  padding: $gap-8;
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-}
+.datepicker {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+  padding: $gap-8;
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+  }
+}

package/src/components/Day/Day.stories.tsx

@@ -1,75 +1,75 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Day } from '.';
-
-const meta: Meta<typeof Day> = {
-  component: Day,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Day>;
-
-export const Today: Story = {
-  args: {
-    date: new Date(),
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isSelected: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isDisabled: true,
-  },
-};
-
-export const Holiday: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isHoliday: true,
-  },
-};
-
-export const HasTasks: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    hasTasks: true,
-  },
-};
-
-export const RangeStart: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeStart: true,
-  },
-};
-
-export const RangeMiddle: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeMiddle: true,
-  },
-};
-
-export const RangeEnd: Story = {
-  args: {
-    date: new Date(2026, 7, 25),
-    isRangeEnd: true,
-  },
-};
-
-export const TodayAndHasTasks: Story = {
-  args: {
-    date: new Date(),
-    hasTasks: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Day } from '.';
+
+const meta: Meta<typeof Day> = {
+  component: Day,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Day>;
+
+export const Today: Story = {
+  args: {
+    date: new Date(),
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isSelected: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isDisabled: true,
+  },
+};
+
+export const Holiday: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isHoliday: true,
+  },
+};
+
+export const HasTasks: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    hasTasks: true,
+  },
+};
+
+export const RangeStart: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isRangeStart: true,
+  },
+};
+
+export const RangeMiddle: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isRangeMiddle: true,
+  },
+};
+
+export const RangeEnd: Story = {
+  args: {
+    date: new Date(2026, 7, 25),
+    isRangeEnd: true,
+  },
+};
+
+export const TodayAndHasTasks: Story = {
+  args: {
+    date: new Date(),
+    hasTasks: true,
+  },
+};