@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

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

@@ -1,30 +1,30 @@
-.month {
-  @include themify-modules($themes) {
-    color: themed('text');
-    background-color: themed('background');
-  }
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding-block: 5px;
-  gap: 2px;
-  font-weight: $font-weight-bold;
-}
-
-.arrow {
-  @include themify-modules($themes) {
-    color: themed('text');
-  }
-
-  width: max-content;
-  border: none;
-  background-color: transparent;
-
-  &:hover {
-    @include themify-modules($themes) {
-      color: themed('middle-blue');
-    }
-  }
-}
+.month {
+  @include themify-modules($themes) {
+    color: themed('text');
+    background-color: themed('background');
+  }
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-block: 5px;
+  gap: 2px;
+  font-weight: $font-weight-bold;
+}
+
+.arrow {
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+
+  width: max-content;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    @include themify-modules($themes) {
+      color: themed('middle-blue');
+    }
+  }
+}

package/src/components/RangePicker/RangePicker.stories.tsx

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

package/src/components/RangePicker/index.tsx

@@ -1,144 +1,144 @@
-import { ChangeEvent, KeyboardEvent, Ref } from 'react';
-
-import { useValidate } from '@/hooks/useValidate';
-
-import { BaseCalendar } from '../BaseCalendar';
-import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
-import { Clear } from '../Clear';
-import { Input } from '../Input';
-import styles from './styles.module.scss';
-
-export interface RangePickerProps
-  extends BaseCalendarProps, Pick<CalendarProps, 'rangeStart' | 'rangeEnd'> {
-  onChangeStart?: (date?: Date) => void;
-  onChangeEnd?: (date?: Date) => void;
-}
-
-export const RangePicker = ({
-  rangeStart,
-  rangeEnd,
-  monthDate = new Date(),
-  onChangeStart,
-  onChangeEnd,
-  ...props
-}: RangePickerProps) => {
-  const {
-    currentDate: startDate,
-    value: startValue,
-    error: startError,
-    ref: startRef,
-    handleDateSelect: handleStartDateSelect,
-    handleDateValidation: handleStartDateValidation,
-    handleClearInput: handleStartClearInput,
-  } = useValidate(rangeStart);
-
-  const {
-    currentDate: endDate,
-    value: endValue,
-    error: endError,
-    ref: endRef,
-    handleDateSelect: handleEndDateSelect,
-    handleDateValidation: handleEndDateValidation,
-    handleClearInput: handleEndClearInput,
-  } = useValidate(rangeEnd);
-
-  const handleDateSelectAndExternalUpdate = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    date: Date
-  ) => {
-    if (!startDate) {
-      handleStartDateSelect(date);
-      onChangeStart?.(date);
-      return;
-    }
-
-    if (!endDate || e.ctrlKey) {
-      if (startDate && date < startDate) {
-        handleStartDateSelect(date);
-        handleEndDateSelect(startDate);
-        onChangeStart?.(date);
-        onChangeEnd?.(startDate);
-      } else {
-        handleEndDateSelect(date);
-        onChangeEnd?.(date);
-      }
-      return;
-    }
-
-    handleStartDateSelect(date);
-    handleEndDateSelect();
-    onChangeStart?.(date);
-    onChangeEnd?.();
-  };
-
-  const handleStartChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const parsed = handleStartDateValidation(e.target.value);
-    if (!parsed) return;
-    onChangeStart?.(parsed);
-    if (endValue) handleEndDateValidation(endValue, parsed);
-  };
-
-  const handleStartKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key !== 'Enter') return;
-    const parsed = handleStartDateValidation(e.currentTarget.value);
-    if (!parsed) return;
-    onChangeStart?.(parsed);
-    if (endValue) handleEndDateValidation(endValue, parsed);
-  };
-
-  const handleEndChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const parsed = handleEndDateValidation(e.target.value, startDate);
-    if (parsed) onChangeEnd?.(parsed);
-  };
-
-  const handleEndKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key !== 'Enter') return;
-    const parsed = handleEndDateValidation(e.currentTarget.value, startDate);
-    if (parsed) onChangeEnd?.(parsed);
-  };
-
-  const handleClearRange = () => {
-    handleStartClearInput();
-    handleEndClearInput();
-  };
-
-  return (
-    <div className={styles.rangePicker}>
-      <div className={styles.inputs}>
-        <Input
-          isDateInput
-          label="From"
-          value={startValue}
-          ref={startRef as Ref<HTMLInputElement>}
-          placeholder="dd/mm/yyyy"
-          onBlur={handleStartChange}
-          onReset={handleStartClearInput}
-          onKeyDown={handleStartKeyDown}
-          error={startError}
-        />
-        <Input
-          isDateInput
-          label="To"
-          value={endValue}
-          ref={endRef as Ref<HTMLInputElement>}
-          placeholder="dd/mm/yyyy"
-          onBlur={handleEndChange}
-          onReset={handleEndClearInput}
-          onKeyDown={handleEndKeyDown}
-          error={endError}
-        />
-      </div>
-
-      <div className={styles.calendar}>
-        <BaseCalendar
-          monthDate={monthDate}
-          rangeStart={startDate}
-          rangeEnd={endDate}
-          onDateClick={handleDateSelectAndExternalUpdate}
-          {...props}
-        />
-        <Clear onClick={handleClearRange} />
-      </div>
-    </div>
-  );
-};
+import { ChangeEvent, KeyboardEvent, Ref } from 'react';
+
+import { useValidate } from '@/hooks/useValidate';
+
+import { BaseCalendar } from '../BaseCalendar';
+import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
+import { Clear } from '../Clear';
+import { Input } from '../Input';
+import styles from './styles.module.scss';
+
+export interface RangePickerProps
+  extends BaseCalendarProps, Pick<CalendarProps, 'rangeStart' | 'rangeEnd'> {
+  onChangeStart?: (date?: Date) => void;
+  onChangeEnd?: (date?: Date) => void;
+}
+
+export const RangePicker = ({
+  rangeStart,
+  rangeEnd,
+  monthDate = new Date(),
+  onChangeStart,
+  onChangeEnd,
+  ...props
+}: RangePickerProps) => {
+  const {
+    currentDate: startDate,
+    value: startValue,
+    error: startError,
+    ref: startRef,
+    handleDateSelect: handleStartDateSelect,
+    handleDateValidation: handleStartDateValidation,
+    handleClearInput: handleStartClearInput,
+  } = useValidate(rangeStart);
+
+  const {
+    currentDate: endDate,
+    value: endValue,
+    error: endError,
+    ref: endRef,
+    handleDateSelect: handleEndDateSelect,
+    handleDateValidation: handleEndDateValidation,
+    handleClearInput: handleEndClearInput,
+  } = useValidate(rangeEnd);
+
+  const handleDateSelectAndExternalUpdate = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    date: Date
+  ) => {
+    if (!startDate) {
+      handleStartDateSelect(date);
+      onChangeStart?.(date);
+      return;
+    }
+
+    if (!endDate || e.ctrlKey) {
+      if (startDate && date < startDate) {
+        handleStartDateSelect(date);
+        handleEndDateSelect(startDate);
+        onChangeStart?.(date);
+        onChangeEnd?.(startDate);
+      } else {
+        handleEndDateSelect(date);
+        onChangeEnd?.(date);
+      }
+      return;
+    }
+
+    handleStartDateSelect(date);
+    handleEndDateSelect();
+    onChangeStart?.(date);
+    onChangeEnd?.();
+  };
+
+  const handleStartChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = handleStartDateValidation(e.target.value);
+    if (!parsed) return;
+    onChangeStart?.(parsed);
+    if (endValue) handleEndDateValidation(endValue, parsed);
+  };
+
+  const handleStartKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const parsed = handleStartDateValidation(e.currentTarget.value);
+    if (!parsed) return;
+    onChangeStart?.(parsed);
+    if (endValue) handleEndDateValidation(endValue, parsed);
+  };
+
+  const handleEndChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = handleEndDateValidation(e.target.value, startDate);
+    if (parsed) onChangeEnd?.(parsed);
+  };
+
+  const handleEndKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    const parsed = handleEndDateValidation(e.currentTarget.value, startDate);
+    if (parsed) onChangeEnd?.(parsed);
+  };
+
+  const handleClearRange = () => {
+    handleStartClearInput();
+    handleEndClearInput();
+  };
+
+  return (
+    <div className={styles.rangePicker}>
+      <div className={styles.inputs}>
+        <Input
+          isDateInput
+          label="From"
+          value={startValue}
+          ref={startRef as Ref<HTMLInputElement>}
+          placeholder="dd/mm/yyyy"
+          onBlur={handleStartChange}
+          onReset={handleStartClearInput}
+          onKeyDown={handleStartKeyDown}
+          error={startError}
+        />
+        <Input
+          isDateInput
+          label="To"
+          value={endValue}
+          ref={endRef as Ref<HTMLInputElement>}
+          placeholder="dd/mm/yyyy"
+          onBlur={handleEndChange}
+          onReset={handleEndClearInput}
+          onKeyDown={handleEndKeyDown}
+          error={endError}
+        />
+      </div>
+
+      <div className={styles.calendar}>
+        <BaseCalendar
+          monthDate={monthDate}
+          rangeStart={startDate}
+          rangeEnd={endDate}
+          onDateClick={handleDateSelectAndExternalUpdate}
+          {...props}
+        />
+        <Clear onClick={handleClearRange} />
+      </div>
+    </div>
+  );
+};

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

@@ -1,19 +1,19 @@
-.rangePicker {
-  display: flex;
-  flex-direction: column;
-  padding: $gap-8;
-
-  @include themify-modules($themes) {
-    background-color: themed('background');
-  }
-}
-
-.calendar {
-  margin-top: 15px;
-}
-
-.inputs {
-  display: flex;
-  flex-direction: column;
-  gap: $gap-8;
-}
+.rangePicker {
+  display: flex;
+  flex-direction: column;
+  padding: $gap-8;
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+  }
+}
+
+.calendar {
+  margin-top: 15px;
+}
+
+.inputs {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-8;
+}