@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

package/src/components/Day/index.tsx

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

@@ -1,97 +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%;
-  }
-}
+.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

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

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