@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/components/BaseCalendar/BaseCalendar.stories.tsx

@@ -1,77 +1,77 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BaseCalendar } from './index';
-
-const meta: Meta<typeof BaseCalendar> = {
-  component: BaseCalendar,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BaseCalendar>;
-
-export const Default: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-  },
-};
-
-export const WithTasks: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 25),
-    firstDayOfWeek: 1,
-    enableTasks: true,
-  },
-};
-
-export const HideWeekends: Story = {
-  args: {
-    monthDate: new Date(2026, 8, 7),
-    firstDayOfWeek: 1,
-    hideWeekends: true,
-  },
-};
-
-export const ShowHolidays: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 3),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-  },
-};
-
-export const WeekMode: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 31),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-    mode: 'week',
-  },
-};
-
-export const HideWeekendsFirstDaySundayWeekMode: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 3),
-    mode: 'week',
-    firstDayOfWeek: 0,
-    hideWeekends: true,
-  },
-};
-
-export const HideWeekendsFirstDaySundayMonthMode: Story = {
-  args: {
-    monthDate: new Date(2025, 2, 31),
-    firstDayOfWeek: 0,
-    hideWeekends: true,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { BaseCalendar } from './index';
+
+const meta: Meta<typeof BaseCalendar> = {
+  component: BaseCalendar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BaseCalendar>;
+
+export const Default: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const WithTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: true,
+  },
+};
+
+export const HideWeekends: Story = {
+  args: {
+    monthDate: new Date(2026, 8, 7),
+    firstDayOfWeek: 1,
+    hideWeekends: true,
+  },
+};
+
+export const ShowHolidays: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WeekMode: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 31),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+    mode: 'week',
+  },
+};
+
+export const HideWeekendsFirstDaySundayWeekMode: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    mode: 'week',
+    firstDayOfWeek: 0,
+    hideWeekends: true,
+  },
+};
+
+export const HideWeekendsFirstDaySundayMonthMode: Story = {
+  args: {
+    monthDate: new Date(2025, 2, 31),
+    firstDayOfWeek: 0,
+    hideWeekends: true,
+  },
+};

package/src/components/BaseCalendar/index.tsx

@@ -1,63 +1,63 @@
-import { useEffect, useState } from 'react';
-
-import { MODES } from '@/constants/modes';
-
-import { CalendarGrid } from '../CalendarGrid';
-import { BaseCalendarProps } from '../CalendarGrid/types';
-import { Month } from '../Month';
-import { WeekDay } from '../WeekDay';
-import styles from './styles.module.scss';
-
-export const BaseCalendar = ({
-  mode = MODES.MONTH,
-  monthDate,
-  firstDayOfWeek = 1,
-  hideWeekends = false,
-  ...props
-}: BaseCalendarProps) => {
-  const [baseDate, setBaseDate] = useState(monthDate);
-
-  useEffect(() => {
-    setBaseDate(monthDate);
-  }, [monthDate]);
-
-  const onPrev = () => {
-    const newDate = new Date(baseDate);
-
-    if (mode === MODES.MONTH) {
-      newDate.setDate(1);
-      newDate.setMonth(baseDate.getMonth() - 1);
-    } else {
-      newDate.setDate(baseDate.getDate() - 7);
-    }
-
-    setBaseDate(newDate);
-  };
-
-  const onNext = () => {
-    const newDate = new Date(baseDate);
-
-    if (mode === MODES.MONTH) {
-      newDate.setDate(1);
-      newDate.setMonth(baseDate.getMonth() + 1);
-    } else {
-      newDate.setDate(baseDate.getDate() + 7);
-    }
-
-    setBaseDate(newDate);
-  };
-
-  return (
-    <div className={styles.calendarGrid}>
-      <Month date={baseDate} onPrev={onPrev} onNext={onNext} />
-      <WeekDay firstDayOfWeek={firstDayOfWeek} hideWeekends={hideWeekends} />
-      <CalendarGrid
-        mode={mode}
-        monthDate={baseDate}
-        firstDayOfWeek={firstDayOfWeek}
-        hideWeekends={hideWeekends}
-        {...props}
-      />
-    </div>
-  );
-};
+import { useEffect, useState } from 'react';
+
+import { MODES } from '@/constants/modes';
+
+import { CalendarGrid } from '../CalendarGrid';
+import { BaseCalendarProps } from '../CalendarGrid/types';
+import { Month } from '../Month';
+import { WeekDay } from '../WeekDay';
+import styles from './styles.module.scss';
+
+export const BaseCalendar = ({
+  mode = MODES.MONTH,
+  monthDate,
+  firstDayOfWeek = 1,
+  hideWeekends = false,
+  ...props
+}: BaseCalendarProps) => {
+  const [baseDate, setBaseDate] = useState(monthDate);
+
+  useEffect(() => {
+    setBaseDate(monthDate);
+  }, [monthDate]);
+
+  const onPrev = () => {
+    const newDate = new Date(baseDate);
+
+    if (mode === MODES.MONTH) {
+      newDate.setDate(1);
+      newDate.setMonth(baseDate.getMonth() - 1);
+    } else {
+      newDate.setDate(baseDate.getDate() - 7);
+    }
+
+    setBaseDate(newDate);
+  };
+
+  const onNext = () => {
+    const newDate = new Date(baseDate);
+
+    if (mode === MODES.MONTH) {
+      newDate.setDate(1);
+      newDate.setMonth(baseDate.getMonth() + 1);
+    } else {
+      newDate.setDate(baseDate.getDate() + 7);
+    }
+
+    setBaseDate(newDate);
+  };
+
+  return (
+    <div className={styles.calendarGrid}>
+      <Month date={baseDate} onPrev={onPrev} onNext={onNext} />
+      <WeekDay firstDayOfWeek={firstDayOfWeek} hideWeekends={hideWeekends} />
+      <CalendarGrid
+        mode={mode}
+        monthDate={baseDate}
+        firstDayOfWeek={firstDayOfWeek}
+        hideWeekends={hideWeekends}
+        {...props}
+      />
+    </div>
+  );
+};

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

@@ -1,15 +1,15 @@
-.calendarGrid {
-  @include border;
-
-  @include themify-modules($themes) {
-    border-color: themed('border');
-    background-color: themed('background');
-  }
-
-  padding: $gap-10;
-  border-radius: $radius-8;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: center;
-}
+.calendarGrid {
+  @include border;
+
+  @include themify-modules($themes) {
+    border-color: themed('border');
+    background-color: themed('background');
+  }
+
+  padding: $gap-10;
+  border-radius: $radius-8;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: center;
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  args: {
+    children: "Apply",
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import styles from "./styles.module.scss";
+
+type ButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+const Button = (props: ButtonProps) => {
+  return <button {...props} className={styles.button} />;
+};
+
+export type { ButtonProps };
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

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

@@ -0,0 +1,3 @@
+.button {
+  border-radius: 12px;
+}

package/src/components/CalendarGrid/CalendarGrid.stories.tsx

@@ -1,136 +1,136 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CalendarGrid } from '.';
-
-const meta: Meta<typeof CalendarGrid> = {
-  component: CalendarGrid,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    firstDayOfWeek: {
-      control: 'select',
-      options: [0, 1],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CalendarGrid>;
-
-export const Default: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-  },
-};
-
-export const SundayFirst: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 0,
-    selectedDate: new Date(2026, 7, 15),
-  },
-};
-
-export const WithSelectedDate: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 27),
-  },
-};
-
-export const WithMinMax: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-    minDate: new Date(2026, 7, 10),
-    maxDate: new Date(2026, 7, 20),
-  },
-};
-
-export const WeekMode: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-    mode: 'week',
-  },
-};
-
-export const FullFeatured: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 7, 15),
-    minDate: new Date(2026, 7, 1),
-    maxDate: new Date(2026, 7, 15),
-  },
-};
-
-export const September: Story = {
-  args: {
-    monthDate: new Date(2026, 8, 1),
-    firstDayOfWeek: 1,
-    selectedDate: new Date(2026, 8, 15),
-  },
-};
-
-export const CurrentMonth: Story = {
-  args: {
-    monthDate: new Date(),
-    firstDayOfWeek: 1,
-  },
-};
-
-export const WithRange: Story = {
-  args: {
-    monthDate: new Date(),
-    firstDayOfWeek: 1,
-    rangeStart: new Date(2026, 7, 10),
-    rangeEnd: new Date(2026, 7, 19),
-  },
-};
-
-export const HideWeekends: Story = {
-  args: {
-    monthDate: new Date(),
-    firstDayOfWeek: 1,
-    hideWeekends: true,
-  },
-};
-
-export const ShowHolidays: Story = {
-  args: {
-    monthDate: new Date(2025, 0, 3),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    monthDate: new Date(2026, 0, 3),
-    firstDayOfWeek: 1,
-    showHolidays: true,
-  },
-};
-
-export const WithTasks: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 25),
-    firstDayOfWeek: 1,
-    enableTasks: true,
-  },
-};
-
-export const WithoutTasks: Story = {
-  args: {
-    monthDate: new Date(2026, 7, 25),
-    firstDayOfWeek: 1,
-    enableTasks: false,
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarGrid } from '.';
+
+const meta: Meta<typeof CalendarGrid> = {
+  component: CalendarGrid,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    firstDayOfWeek: {
+      control: 'select',
+      options: [0, 1],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CalendarGrid>;
+
+export const Default: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const SundayFirst: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 0,
+    selectedDate: new Date(2026, 7, 15),
+  },
+};
+
+export const WithSelectedDate: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 27),
+  },
+};
+
+export const WithMinMax: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    minDate: new Date(2026, 7, 10),
+    maxDate: new Date(2026, 7, 20),
+  },
+};
+
+export const WeekMode: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    mode: 'week',
+  },
+};
+
+export const FullFeatured: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 7, 15),
+    minDate: new Date(2026, 7, 1),
+    maxDate: new Date(2026, 7, 15),
+  },
+};
+
+export const September: Story = {
+  args: {
+    monthDate: new Date(2026, 8, 1),
+    firstDayOfWeek: 1,
+    selectedDate: new Date(2026, 8, 15),
+  },
+};
+
+export const CurrentMonth: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+  },
+};
+
+export const WithRange: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+    rangeStart: new Date(2026, 7, 10),
+    rangeEnd: new Date(2026, 7, 19),
+  },
+};
+
+export const HideWeekends: Story = {
+  args: {
+    monthDate: new Date(),
+    firstDayOfWeek: 1,
+    hideWeekends: true,
+  },
+};
+
+export const ShowHolidays: Story = {
+  args: {
+    monthDate: new Date(2025, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    monthDate: new Date(2026, 0, 3),
+    firstDayOfWeek: 1,
+    showHolidays: true,
+  },
+};
+
+export const WithTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: true,
+  },
+};
+
+export const WithoutTasks: Story = {
+  args: {
+    monthDate: new Date(2026, 7, 25),
+    firstDayOfWeek: 1,
+    enableTasks: false,
+  },
+};

package/src/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.tsx

@@ -1,27 +1,27 @@
-import { createPortal } from 'react-dom';
-
-import styles from './styles.module.scss';
-
-interface TooltipProps {
-  isVisible: boolean;
-  text: string;
-  x: number;
-  y: number;
-}
-
-export const Tooltip = ({ isVisible, text, x, y }: TooltipProps) => {
-  if (!isVisible) return;
-
-  const Tooltip = (
-    <div
-      className={styles.tooltip}
-      style={{
-        top: y,
-        left: x,
-      }}
-    >
-      <p>{text}</p>
-    </div>
-  );
-  return createPortal(Tooltip, document.body);
-};
+import { createPortal } from 'react-dom';
+
+import styles from './styles.module.scss';
+
+interface TooltipProps {
+  isVisible: boolean;
+  text: string;
+  x: number;
+  y: number;
+}
+
+export const Tooltip = ({ isVisible, text, x, y }: TooltipProps) => {
+  if (!isVisible) return;
+
+  const Tooltip = (
+    <div
+      className={styles.tooltip}
+      style={{
+        top: y,
+        left: x,
+      }}
+    >
+      <p>{text}</p>
+    </div>
+  );
+  return createPortal(Tooltip, document.body);
+};