@daryasidorovich/modsen-datepicker 1.0.0

package/.babelrc.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

package/.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24.19.0
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+    env:
+      STORYBOOK_HOLIDAY_API_KEY: ${{ secrets.STORYBOOK_HOLIDAY_API_KEY }}
+      STORYBOOK_HOLIDAY_API_URL: ${{ secrets.STORYBOOK_HOLIDAY_API_URL }}

package/.github/workflows/ci.yml

@@ -0,0 +1,56 @@
+name: CI for datepicker
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+    branches: [main, dev]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24.19.0
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run lint
+
+  format:
+    name: Format
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24.19.0
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run format:check
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24.19.0
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 24.19.0
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build

package/.husky/commit-msg

@@ -0,0 +1 @@
+npx commitlint --edit "$1"

package/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,16 @@
+# Ignore artifacts:
+build
+coverage
+node_modules
+dist
+build
+coverage
+.next
+out
+.cache
+*.min.js
+*.min.css
+*.map
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true
+}

package/.storybook/main.js

@@ -0,0 +1,93 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+import path from 'path';
+import { fileURLToPath } from 'url';
+import svgr from 'vite-plugin-svgr';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const config = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-themes',
+    '@storybook/addon-vitest',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+  },
+  async viteFinal(config) {
+    config.optimizeDeps = {
+      include: ['react', 'react-dom'],
+    };
+
+    config.plugins = config.plugins || [];
+    config.plugins.push(
+      svgr({
+        include: '**/*.svg?react',
+      })
+    );
+
+    config.css = {
+      modules: {
+        localsConvention: 'camelCase',
+      },
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
+            @use "@styles/variables" as *;
+            @use "@styles/border" as *;
+            @use "@styles/mixins" as *;
+            @use "@styles/theme-mixins" as *;
+            @use "@styles/colors" as *;
+            @use "@styles/typography" as *;
+            @use "@styles/gap" as *;
+          `,
+        },
+      },
+    };
+
+    config.define = {
+      ...config.define,
+      'process.env.STORYBOOK_HOLIDAY_API_KEY': JSON.stringify(
+        process.env.STORYBOOK_HOLIDAY_API_KEY
+      ),
+      'process.env.STORYBOOK_HOLIDAY_API_URL': JSON.stringify(
+        process.env.STORYBOOK_HOLIDAY_API_URL
+      ),
+    };
+
+    config.resolve = {
+      alias: {
+        '@': path.resolve(__dirname, '../src'),
+        '@components': path.resolve(__dirname, '../src/components'),
+        '@styles': path.resolve(__dirname, '../src/styles'),
+        '@assets': path.resolve(__dirname, '../src/assets'),
+        '@utils': path.resolve(__dirname, '../src/utils'),
+      },
+    };
+
+    config.server = {
+      ...config.server,
+      proxy: {
+        '/holidays': {
+          target: 'https://holidayapi.com/v1',
+          changeOrigin: true,
+          secure: true,
+        },
+      },
+    };
+
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.js

@@ -0,0 +1,26 @@
+/** @type { import('@storybook/react-vite').Preview } */
+import '../src/styles/main.scss';
+
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'theme-light',
+        dark: 'theme-dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+};
+
+export default preview;

package/.storybook/preview.tsx

@@ -0,0 +1,18 @@
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,302 @@
+<div align="center">
+
+# Modsen DatePicker Library
+
+**Three calendar components for React: BaseCalendar, DatePicker and RangePicker**
+
+[Installation](#installation) • [Usage](#usage) • [API](#api) • [Types](#types) • [Demo](https://6a88497b3bbc2742a15109b2-cxguycdfyi.chromatic.com/)
+
+</div>
+
+---
+
+## Features
+
+- **BaseCalendar** — a simple calendar for viewing and selecting dates
+- **DatePicker** — single date selection via `selectedDate`
+- **RangePicker** — range selection via `rangeStart` / `rangeEnd`
+- **Flexible configuration** — `minDate`, `maxDate`, first day of week, display modes
+- **Hide weekends** — `hideWeekends`
+- **Holidays** — `showHolidays`, highlights public holidays based on the region (browser language)
+- **Tasks** — `enableTasks`, shows task indicators on dates and enables the built-in task manager- **Light and dark themes** — via CSS class on `<html>`
+- **TypeScript** — fully typed props out of the box
+
+---
+
+## Installation
+
+```bash
+npm install modsen-datepicker
+```
+
+Or via yarn:
+
+```bash
+yarn add modsen-datepicker
+```
+
+Requires **React 19+**.
+
+---
+
+## API
+
+### Shared props (all components)
+
+| Prop             | Type                      | Default      | Description                                        |
+| ---------------- | ------------------------- | ------------ | -------------------------------------------------- |
+| `monthDate`      | `Date`                    | `new Date()` | **Required.** The month being displayed            |
+| `minDate`        | `Date`                    | —            | Minimum selectable date                            |
+| `maxDate`        | `Date`                    | —            | Maximum selectable date                            |
+| `firstDayOfWeek` | `FIRST_DAY_OF_WEEK_TYPES` | `0`          | First day of the week (`0` — Sunday, `1` — Monday) |
+| `mode`           | `MODES_TYPES`             | `'month'`    | Display mode: `'week'` or `'month'`                |
+| `hideWeekends`   | `boolean`                 | `false`      | Hide Saturday and Sunday                           |
+| `showHolidays`   | `boolean`                 | `false`      | Highlight holidays                                 |
+| `enableTasks`    | `boolean`                 | `false`      | Enable task indicators and tasks manager           |
+
+---
+
+## Usage
+
+### DatePicker
+
+Single date selection. Extends the shared props with:
+
+| Prop           | Type                                | Description                               |
+| -------------- | ----------------------------------- | ----------------------------------------- |
+| `selectedDate` | `Date`                              | The selected date                         |
+| `onChange`     | `(date: Date \| undefined) => void` | Called when a date is selected or cleared |
+
+```tsx
+import { useState } from 'react';
+import { DatePicker } from 'modsen-datepicker';
+
+const Example = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+
+  return (
+    <DatePicker
+      monthDate={new Date()}
+      selectedDate={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+    />
+  );
+};
+```
+
+<div align="center">
+
+![DatePicker](/docs/datepicker.png)
+</div>
+
+### RangePicker
+
+Range selection. Extends the shared props with:
+
+| Prop            | Type                    | Description                                        |
+| --------------- | ----------------------- | -------------------------------------------------- |
+| `rangeStart`    | `Date`                  | Start of the range                                 |
+| `rangeEnd`      | `Date`                  | End of the range                                   |
+| `onChangeStart` | `(date?: Date) => void` | Called when the start of the range changes         |
+| `onChangeEnd`   | `(date?: Date) => void` | Called when the end of the range changes or clears |
+
+```tsx
+import { useState } from 'react';
+import { RangePicker } from 'modsen-datepicker';
+
+const Example = () => {
+  const [rangeStart, setRangeStart] = useState<Date | undefined>();
+  const [rangeEnd, setRangeEnd] = useState<Date | undefined>();
+
+  return (
+    <RangePicker
+      monthDate={new Date()}
+      rangeStart={rangeStart}
+      rangeEnd={rangeEnd}
+      onChangeStart={setRangeStart}
+      onChangeEnd={setRangeEnd}
+    />
+  );
+};
+```
+
+<div align="center">
+
+![RangePicker](/docs/rangepicker.png)
+</div>
+
+### BaseCalendar
+
+A simple calendar for viewing and selecting dates. It has no built-in selection logic — you control everything through `onDateClick`. Accepts `selectedDate`, `rangeStart` and `rangeEnd` purely for display.
+
+| Prop           | Type                                   | Description                                                       |
+| -------------- | -------------------------------------- | ----------------------------------------------------------------- |
+| `selectedDate` | `Date`                                 | The date to highlight as selected                                 |
+| `rangeStart`   | `Date`                                 | Start of the range to highlight                                   |
+| `rangeEnd`     | `Date`                                 | End of the range to highlight                                     |
+| `onDateClick`  | `(e: MouseEvent) => void, date: Date)` | Called on every date click — define your own selection logic here |
+
+```tsx
+import { BaseCalendar, FIRST_DAY_OF_WEEK } from 'modsen-datepicker';
+
+const Example = () => {
+  return (
+    <BaseCalendar
+      monthDate={new Date()}
+      selectedDate={new Date()}
+      firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
+      onDateClick={(date, e) => {
+        if (e.ctrlKey) {
+          console.log('Ctrl + click', date);
+        } else {
+          console.log('Click', date);
+        }
+      }}
+    />
+  );
+};
+```
+
+<div align="center">
+
+![BaseCalendar](/docs/base-calendar.png)
+</div>
+
+## Callbacks
+
+All callbacks receive the **final, validated** value — never an intermediate state.
+
+| Component     | Callback        | Signature               | When it fires                                   |
+| ------------- | --------------- | ----------------------- | ----------------------------------------------- |
+| `DatePicker`  | `onChange`      | `(date: Date            | undefined) => void`                             | On date select or clear |
+| `RangePicker` | `onChangeStart` | `(date?: Date) => void` | When the start of the range changes             |
+| `RangePicker` | `onChangeEnd`   | `(date?: Date) => void` | When the end of the range changes or is cleared |
+
+## Input validation
+
+The input is `masked` (dd/mm/yyyy) and validated:
+
+- **Mask** — accepts only digits and inserts separators automatically.
+
+- **Invalid date**- — if the value cannot be parsed, the input shows Invalid date and the selection is cleared.
+
+- **Out of range** — if minDate or maxDate is set and the value falls outside, the input shows the corresponding error and the value is rejected.
+
+<div align="center">
+![Validation](/docs/rangepicker-with-error.png)
+
+</div>
+
+## Interaction
+
+### Single date (DatePicker)
+
+A regular click selects a date and calls `onChange` with the new value.
+
+```tsx
+<DatePicker
+  monthDate={new Date()}
+  selectedDate={selectedDate}
+  onChange={(date) => setSelectedDate(date)}
+/>
+```
+
+Clicking the same date again clears the selection and calls `onChange(undefined)`.
+
+### Range (RangePicker)
+
+Clicks build the range step by step:
+
+1. First click sets `rangeStart` — `onChangeStart(date)` is called.
+2. Second click sets `rangeEnd` — `onChangeEnd(date)` is called.
+3. If the second click is earlier than `rangeStart`, the values are swapped and both callbacks receive the corrected pair.
+4. If the range is already complete, the next click starts a new range — `onChangeStart(date)` and `onChangeEnd(undefined)`.
+
+```tsx
+<RangePicker
+  monthDate={new Date()}
+  rangeStart={rangeStart}
+  rangeEnd={rangeEnd}
+  onChangeStart={setRangeStart}
+  onChangeEnd={setRangeEnd}
+/>
+```
+
+### Ctrl + click
+
+If the range is already selected and the user holds **Ctrl** while clicking, the end of the range is reset to the clicked date. The start stays the same. Only `onChangeEnd(date)` is called.
+
+## Tasks
+
+Tasks are disabled by default. Enable them with the `enableTasks` prop:
+
+```tsx
+<DatePicker enableTasks />
+```
+
+When `enableTasks` is on, a **double click** on any date opens a dialog where you can add, edit and delete tasks for that day.
+
+Tasks are stored in `localStorage`, so they persist between sessions without any backend.
+
+## Types
+
+All types are exported from the package:
+
+```ts
+import type { FIRST_DAY_OF_WEEK_TYPES, MODES_TYPES } from 'modsen-datepicker';
+
+import { FIRST_DAY_OF_WEEK, MODES } from 'modsen-datepicker';
+```
+
+### `FIRST_DAY_OF_WEEK`
+
+Defines which day the week starts on.
+
+| Constant                   | Value | Day    |
+| -------------------------- | ----- | ------ |
+| `FIRST_DAY_OF_WEEK.SUNDAY` | `0`   | Sunday |
+| `FIRST_DAY_OF_WEEK.MONDAY` | `1`   | Monday |
+
+```ts
+export type FIRST_DAY_OF_WEEK_TYPES = 0 | 1;
+```
+
+**Example:**
+
+```tsx
+<BaseCalendar
+  monthDate={new Date()}
+  firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
+/>
+```
+
+### `MODES`
+
+Defines the calendar display mode.
+
+| Constant      | Value     | Description |
+| ------------- | --------- | ----------- |
+| `MODES.WEEK`  | `'week'`  | Week view   |
+| `MODES.MONTH` | `'month'` | Month view  |
+
+```ts
+export type MODES_TYPES = 'week' | 'month';
+```
+
+**Example:**
+
+```tsx
+<BaseCalendar monthDate={new Date()} mode={MODES.WEEK} />
+```
+
+## Theming
+
+The library ships with light and dark themes out of the box — no extra configuration is required. The theme is applied automatically via a class on the `<html>` element:
+
+- `theme-light` — light theme
+- `theme-dark` — dark theme
+
+<div align="center">
+
+![Dark theme](/docs/dark-theme.png)
+</div>

package/commitlint.config.js

@@ -0,0 +1,23 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'build',
+        'ci',
+      ],
+    ],
+    'subject-max-length': [2, 'always', 100],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+  },
+};

package/dist/components/BaseCalendar/index.d.ts

@@ -0,0 +1,2 @@
+import { BaseCalendarProps } from '../CalendarGrid/types';
+export declare const BaseCalendar: ({ mode, monthDate, firstDayOfWeek, hideWeekends, ...props }: BaseCalendarProps) => import("react").JSX.Element;

package/dist/components/CalendarGrid/CalendarGridWithTasks/Tooltip/index.d.ts

@@ -0,0 +1,8 @@
+interface TooltipProps {
+    isVisible: boolean;
+    text: string;
+    x: number;
+    y: number;
+}
+export declare const Tooltip: ({ isVisible, text, x, y }: TooltipProps) => import("react").ReactPortal | undefined;
+export {};

package/dist/components/CalendarGrid/CalendarGridWithTasks/index.d.ts

@@ -0,0 +1,2 @@
+import { CalendarProps } from '../types';
+export declare const CalendarGridWithTasks: (props: CalendarProps) => import("react").JSX.Element;

package/dist/components/CalendarGrid/CalendarGridWithoutTasks/CalendarGridWithoutTasks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CalendarGrid/CalendarGridWithoutTasks/index.d.ts

@@ -0,0 +1,4 @@
+import { CalendarProps } from '../types';
+export declare const CalendarGridWithoutTasks: ({ children, ...props }: CalendarProps & {
+    children?: React.ReactNode;
+}) => import("react").JSX.Element;

package/dist/components/CalendarGrid/index.d.ts

@@ -0,0 +1,2 @@
+import { CalendarProps } from './types';
+export declare const CalendarGrid: (props: CalendarProps) => import("react").JSX.Element;

package/dist/components/CalendarGrid/types.d.ts

@@ -0,0 +1,21 @@
+import { FIRST_DAY_OF_WEEK_TYPES } from '@/constants/firstDayOfWeek';
+import { MODES_TYPES } from '@/constants/modes';
+export interface CalendarProps {
+    minDate?: Date;
+    maxDate?: Date;
+    monthDate: Date;
+    firstDayOfWeek?: FIRST_DAY_OF_WEEK_TYPES;
+    selectedDate?: Date;
+    mode?: MODES_TYPES;
+    rangeStart?: Date;
+    rangeEnd?: Date;
+    hideWeekends?: boolean;
+    showHolidays?: boolean;
+    enableTasks?: 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 type BaseCalendarProps = Omit<CalendarProps, 'hasTasks' | 'onDoubleDateClick' | 'onMouseEnter' | 'onMouseLeave'>;

package/dist/components/Clear/index.d.ts

@@ -0,0 +1,5 @@
+interface ClearProps {
+    onClick: () => void;
+}
+export declare const Clear: ({ onClick }: ClearProps) => import("react").JSX.Element;
+export {};

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseCalendarProps, CalendarProps } from '../CalendarGrid/types';
+export interface DatePickerProps extends BaseCalendarProps, Pick<CalendarProps, 'selectedDate'> {
+    onChange?: (date: Date | undefined) => void;
+}
+export declare const DatePicker: ({ selectedDate, monthDate, onChange, ...props }: DatePickerProps) => import("react").JSX.Element;

package/dist/components/Day/index.d.ts

@@ -0,0 +1,16 @@
+export interface DayProps {
+    date: Date;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isHoliday?: boolean;
+    hasTasks?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+    isRangeMiddle?: boolean;
+    isCurrentMonth: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+    onDoubleClick?: (date: Date) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: () => void;
+}
+export declare const Day: ({ date, isSelected, isCurrentMonth, isDisabled, isHoliday, hasTasks, isRangeStart, isRangeEnd, isRangeMiddle, onClick, onDoubleClick, onMouseEnter, onMouseLeave, }: DayProps) => import("react").JSX.Element;