Merge branch 'dev-nextjs' into ci/server-client-deploy

client/package.json

@@ -36,6 +36,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",
+    "react-modal": "^3.16.1",
     "react-select": "^5.7.4",
     "sass": "^1.64.2",
     "typescript": "5.1.6",
@@ -53,6 +54,7 @@
     "@storybook/nextjs": "7.2.1",
     "@storybook/react": "7.2.1",
     "@storybook/testing-library": "0.2.0",
+    "@types/react-modal": "^3.16.0",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "eslint-plugin-storybook": "^0.6.13",

client/src/shared/assets/Icons/Cross.tsx

@@ -0,0 +1,7 @@
+export const Cross: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg width='20' height='20' fill='#ffffff' viewBox='0 0 256 256' {...props}>
+      <path d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'></path>
+    </svg>
+  );
+};

client/src/shared/ui/index.tsx

@@ -3,6 +3,7 @@ export * from './badge/language';
 export * from './button';
 export * from './checkbox';
 export * from './input';
+export * from './modal';
 export * from './select';
 export * from './tabs';
 export * from './textarea';

client/src/shared/ui/modal/index.tsx

@@ -0,0 +1 @@
+export { Modal } from './ui';

client/src/shared/ui/modal/modal.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Button } from '../button';
+import { Modal } from './ui';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Modal> = {
+  title: 'shared/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Modal_Opened = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        Some Text
+      </Modal>
+      <Button typeBtn='primary' size='m' onClick={() => setIsModalOpen(true)}>
+        Open modal
+      </Button>
+    </div>
+  );
+};

client/src/shared/ui/modal/styles.module.scss

@@ -0,0 +1,80 @@
+.modalOverlay {
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(8px);
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.modalOverlay__afterOpen {
+  opacity: 1;
+}
+
+.modalOverlay__beforeClose {
+  opacity: 0;
+}
+
+.modalBody {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 100%;
+  padding: 32px;
+  border-radius: 15px;
+  background: var(--base-cards-color, #1a1c22);
+  transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  transform: translate(-50%, 100%);
+}
+
+.modalBody__afterOpen {
+  bottom: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.modalBody__beforeClose {
+  bottom: 0;
+  transform: translate(-50%, 100%);
+}
+
+.modalBody,
+.modalBody__afterOpen,
+.modalBody__beforeClose {
+  &.size_l {
+    max-width: 570px;
+  }
+
+  &.size_m {
+    max-width: 470px;
+  }
+
+  &.size_s {
+    max-width: 370px;
+  }
+}
+
+.modalContent {
+  width: 100%;
+  height: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 52px;
+  height: 52px;
+  padding: 16px;
+  cursor: pointer;
+
+  &:hover path {
+    stroke: #d42522;
+  }
+}

client/src/shared/ui/modal/ui.tsx

@@ -0,0 +1,38 @@
+import classNames from 'clsx';
+import { FC, PropsWithChildren } from 'react';
+import ReactModal from 'react-modal';
+
+import styles from './styles.module.scss';
+
+import { Cross } from 'shared/assets/Icons/Cross';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  size?: 's' | 'm' | 'l';
+}
+
+export const Modal: FC<PropsWithChildren<ModalProps>> = (props) => {
+  const { isOpen, onClose, size = 's', children } = props;
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      closeTimeoutMS={225}
+      onRequestClose={onClose}
+      overlayClassName={{
+        base: styles.modalOverlay,
+        afterOpen: styles.modalOverlay__afterOpen,
+        beforeClose: styles.modalOverlay__beforeClose
+      }}
+      className={{
+        base: classNames(styles.modalBody, {}, [styles[`size_${size}`]]),
+        afterOpen: classNames(styles.modalBody__afterOpen, {}, [styles[`size_${size}`]]),
+        beforeClose: classNames(styles.modalBody__beforeClose, {}, [styles[`size_${size}`]])
+      }}
+    >
+      <Cross className={styles.closeButton} onClick={onClose} />
+      <div className={styles.modalContent}>{children}</div>
+    </ReactModal>
+  );
+};