@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.2

package/src/components/Day/index.tsx

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

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

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

package/src/components/Modal/CrudModal/styles.module.scss

@@ -1,44 +0,0 @@
-.header {
-  margin-bottom: $gap-24;
-  margin-top: $gap-8;
-}
-
-.title {
-  font-size: $font-size-18;
-}
-
-.footer {
-  display: flex;
-  width: 100%;
-  gap: $gap-10;
-  justify-content: end;
-}
-
-.children {
-  display: flex;
-  gap: $gap-8;
-  flex-direction: column;
-  min-width: 300px;
-  width: fit-content;
-  margin-bottom: $gap-24;
-}
-
-.modalButtons {
-  @include themify-modules($themes) {
-    background-color: themed('light-blue');
-    border-color: themed('border');
-    color: themed('text');
-  }
-  @include border;
-
-  padding: $gap-5 $gap-10;
-  border-radius: $radius-8;
-}
-
-.confirm {
-  @include themify-modules($themes) {
-    background-color: themed('middle-blue');
-    border-color: themed('border');
-    color: themed('white-color');
-  }
-}

package/src/components/Modal/index.tsx

@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import React, { ReactNode, useRef } from 'react';
-import { createPortal } from 'react-dom';
-
-import useLockBodyScroll from '@/hooks/useLockBodyScroll';
-
-import styles from './styles.module.scss';
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  children: ReactNode;
-  showCloseButton?: boolean;
-  showOverlay?: boolean;
-  className?: string;
-  classNameOverlay?: string;
-  style?: React.CSSProperties;
-}
-
-export const Modal = ({
-  isOpen,
-  onClose,
-  children,
-  showOverlay = true,
-  showCloseButton = true,
-  className = '',
-  classNameOverlay = '',
-  style = {},
-}: ModalProps) => {
-  const modalRoot = document.body;
-  const targetElement = modalRoot || document.body;
-  const modalRef = useRef(null);
-  useLockBodyScroll(isOpen);
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  if (!isOpen) return null;
-
-  const modalContent = (
-    <div
-      className={classNames(styles.overlay, classNameOverlay, {
-        [styles.overlayColor]: showOverlay,
-      })}
-      onClick={handleClick}
-    >
-      <div
-        ref={modalRef}
-        className={classNames(styles.modal, className)}
-        style={style}
-      >
-        {showCloseButton && (
-          <button className={styles.closeButton} onClick={onClose}>
-            <span>×</span>
-          </button>
-        )}
-        {children}
-      </div>
-    </div>
-  );
-
-  return createPortal(modalContent, targetElement);
-};

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

@@ -1,40 +0,0 @@
-.overlay {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: $z-index-10;
-}
-
-.overlayColor {
-  @include themify-modules($themes) {
-    background-color: themed('overlay');
-  }
-}
-
-.modal {
-  position: relative;
-  @include themify-modules($themes) {
-    background-color: themed('background');
-    border-color: themed('border');
-  }
-
-  @include border;
-  border-radius: $radius-8;
-  padding: $gap-24;
-}
-
-.closeButton {
-  border: none;
-  background-color: transparent;
-  position: absolute;
-  right: $gap-8;
-  top: 0;
-  font-size: 24px;
-  line-height: normal;
-
-  @include themify-modules($themes) {
-    color: themed('text');
-  }
-}

package/src/components/Modal/types.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface CrudModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  children?: ReactNode;
-  cancelText?: string;
-  confirmText?: string;
-  isLoading?: boolean;
-  showCloseButton?: boolean;
-}

package/src/components/Month/Month.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Month } from '.';
-
-const meta: Meta<typeof Month> = {
-  component: Month,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Month>;
-
-export const Default: Story = {
-  args: {
-    date: new Date(),
-  },
-};

package/src/components/Month/index.tsx

@@ -1,31 +0,0 @@
-import Next from '@assets/arrows/Next.svg?react';
-import Prev from '@assets/arrows/Prev.svg?react';
-
-import { MONTHS_NAMES } from '@/constants/monthsNames';
-
-import styles from './styles.module.scss';
-
-interface MonthProps {
-  date: Date;
-  onPrev: () => void;
-  onNext: () => void;
-}
-
-export const Month = ({ date, onPrev, onNext }: MonthProps) => {
-  const year = date.getFullYear();
-  const month = MONTHS_NAMES[date.getMonth()];
-
-  return (
-    <div className={styles.month}>
-      <button className={styles.arrow} onClick={onPrev} type="button">
-        <Prev />
-      </button>
-      <p>
-        {month} {year}
-      </p>
-      <button className={styles.arrow} onClick={onNext} type="button">
-        <Next />
-      </button>
-    </div>
-  );
-};

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

@@ -1,30 +0,0 @@
-.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');
-    }
-  }
-}