@daryasidorovich/modsen-datepicker 1.0.0

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

@@ -0,0 +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)}
+    />
+  ),
+};

package/src/components/DatePicker/index.tsx

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +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,
+  },
+};

package/src/components/Day/index.tsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+
+import { isToday } from '@/utils/dateChecks';
+
+import styles from './styles.module.scss';
+
+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 const Day = ({
+  date,
+  isSelected = false,
+  isCurrentMonth,
+  isDisabled = false,
+  isHoliday = false,
+  hasTasks = false,
+  isRangeStart = false,
+  isRangeEnd = false,
+  isRangeMiddle = false,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}: DayProps) => {
+  const dayNumber = date.getDate();
+  let clickTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+    }
+    clickTimeout = setTimeout(() => {
+      if (!isDisabled && onClick) {
+        onClick(e, date);
+      }
+      clickTimeout = null;
+    }, 250);
+  };
+  const handleDoubleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+    }
+    if (!isDisabled && onDoubleClick) {
+      onDoubleClick(date);
+    }
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (!isDisabled && onMouseEnter) {
+      onMouseEnter(e);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!isDisabled && onMouseLeave) {
+      onMouseLeave();
+    }
+  };
+
+  return (
+    <button
+      className={classNames(styles.day, {
+        [styles.today]: isToday(date),
+        [styles.selected]: isSelected,
+        [styles.disabled]: isDisabled,
+        [styles.holiday]: isHoliday,
+        [styles.hasTasks]: hasTasks,
+        [styles.rangeStart]: isRangeStart,
+        [styles.rangeEnd]: isRangeEnd,
+        [styles.rangeMiddle]: isRangeMiddle,
+        [styles.otherMonth]: !isCurrentMonth,
+      })}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      disabled={isDisabled}
+    >
+      <span className={styles.number}>{dayNumber}</span>
+    </button>
+  );
+};

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

@@ -0,0 +1,97 @@
+.day {
+  @include square(32px);
+
+  @include themify-modules($themes) {
+    background-color: themed('background');
+    color: themed('text');
+  }
+
+  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;
+  border: none;
+  position: relative;
+}
+
+.holiday {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+}
+
+.today {
+  @include themify-modules($themes) {
+    color: themed('selected');
+  }
+}
+
+.selected {
+  @include themify-modules($themes) {
+    background-color: themed('selected');
+    color: themed('white-color');
+  }
+}
+
+.disabled {
+  @include themify-modules($themes) {
+    color: themed('disabled');
+  }
+
+  cursor: not-allowed;
+}
+
+.otherMonth {
+  @include themify-modules($themes) {
+    color: themed('disabled');
+  }
+}
+
+.rangeStart {
+  @include themify-modules($themes) {
+    color: themed('white-color');
+    background-color: themed('middle-blue');
+  }
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rangeMiddle {
+  @include themify-modules($themes) {
+    color: themed('blue');
+    background-color: themed('light-blue');
+  }
+
+  border-radius: 0;
+}
+
+.rangeEnd {
+  @include themify-modules($themes) {
+    color: themed('white-color');
+    background-color: themed('selected');
+  }
+
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.hasTasks {
+  position: relative;
+  &::after {
+    @include square(4px);
+
+    @include themify-modules($themes) {
+      background-color: themed('marker');
+    }
+
+    content: '';
+    position: absolute;
+    top: 12%;
+    right: 12%;
+    border-radius: 100%;
+  }
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from '.';
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    label: 'Title',
+    placeholder: 'Enter title',
+  },
+};
+
+export const DefaultDate: Story = {
+  args: {
+    label: 'Date',
+    placeholder: 'Date input...',
+    isDateInput: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Date',
+    value: '45',
+    error: 'Invalid date',
+    isDateInput: true,
+  },
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,64 @@
+import Calendar from '@assets/input/Calendar.svg?react';
+import Clear from '@assets/input/Clear.svg?react';
+import classNames from 'classnames';
+import { InputHTMLAttributes, Ref, useId } from 'react';
+
+import styles from './styles.module.scss';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  onReset?: () => void;
+  ref?: Ref<HTMLInputElement>;
+  isDateInput?: boolean;
+}
+
+export const Input = ({
+  label,
+  error,
+  className = '',
+  id,
+  onReset,
+  placeholder,
+  type = 'text',
+  isDateInput = false,
+  ref = null,
+  ...restProps
+}: InputProps) => {
+  const generatedId = useId();
+  const inputId = id || `input-${generatedId}`;
+
+  return (
+    <div className={styles.wrapper}>
+      {label && (
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+      )}
+
+      <div
+        className={classNames(styles.inputWrapper, {
+          [styles.errorWrapper]: error,
+        })}
+      >
+        {isDateInput && <Calendar className={styles.icon} />}
+        <input
+          id={inputId}
+          type={type}
+          ref={ref}
+          placeholder={placeholder}
+          className={classNames(styles.input, className)}
+          {...restProps}
+        />
+
+        {isDateInput && onReset && (
+          <button className={styles.clear} onClick={onReset} type="button">
+            <Clear className={styles.icon} />
+          </button>
+        )}
+      </div>
+
+      <span className={styles.error}>{error ?? ''}</span>
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+.wrapper {
+  @include themify-modules($themes) {
+    color: themed('text');
+    background-color: themed('background');
+  }
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 2px;
+  width: 100%;
+}
+
+.label {
+  font-size: $font-size-15;
+  font-weight: $font-weight-semibold;
+  margin-bottom: $gap-8;
+}
+
+.inputWrapper {
+  @include themify-modules($themes) {
+    color: themed('text');
+    background-color: themed('background');
+    border-color: themed('border');
+  }
+
+  @include border;
+
+  padding: $gap-8 15px;
+  border-radius: $radius-8;
+  display: flex;
+  gap: $gap-8;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.errorWrapper {
+  @include themify-modules($themes) {
+    border-color: themed('accent');
+  }
+}
+
+.input {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 100%;
+
+  @include themify-modules($themes) {
+    color: themed('text');
+  }
+
+  &::placeholder {
+    @include themify-modules($themes) {
+      color: themed('border');
+    }
+  }
+}
+
+.clear {
+  border: none;
+  background-color: transparent;
+  width: max-content;
+  padding: 0;
+}
+
+.icon {
+  @include themify-modules($themes) {
+    color: themed('disabled');
+  }
+}
+
+.error {
+  @include themify-modules($themes) {
+    color: themed('accent');
+  }
+  height: 15px;
+}

package/src/components/Modal/CrudModal/index.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+
+import { Modal } from '..';
+import { CrudModalProps } from '../types';
+import styles from './styles.module.scss';
+
+export const CrudModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  cancelText = 'No',
+  confirmText = 'Yes',
+  isLoading = false,
+  children,
+  showCloseButton = false,
+}: CrudModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} showCloseButton={showCloseButton}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+      </div>
+
+      {children && <div className={styles.children}>{children}</div>}
+
+      <div className={styles.footer}>
+        <button
+          className={styles.modalButtons}
+          onClick={onClose}
+          disabled={isLoading}
+        >
+          {cancelText}
+        </button>
+        <button
+          className={classNames(styles.confirm, styles.modalButtons)}
+          onClick={onConfirm}
+        >
+          {confirmText}
+        </button>
+      </div>
+    </Modal>
+  );
+};