@daryasidorovich/modsen-datepicker 1.0.0 → 1.0.1

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

@@ -1,79 +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;
-}
+.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 +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>
-  );
-};
+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 +1,44 @@
-.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');
-  }
-}
+.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 +1,66 @@
-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);
-};
+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 +1,40 @@
-.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');
-  }
-}
+.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 +1,13 @@
-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;
-}
+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 +1,19 @@
-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(),
-  },
-};
+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 +1,31 @@
-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>
-  );
-};
+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>
+  );
+};