Feature/modals

.gitignore

@@ -1,6 +1,7 @@
 *.log
 .idea
 .DS_Store
+.vscode
 node_modules
 .cache
 dist

components/Modal/.npmignore

@@ -0,0 +1 @@
+src

components/Modal/README.md

@@ -0,0 +1,48 @@
+# `@byndyusoft-ui/modals`
+
+The `Modal` component provides a modal window to display content on top of other interface elements. The `ModalsProvider` is necessary to provide context and manage the state of modals.
+
+## Installation
+
+```bash
+npm install @byndyusoft-ui/modal
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import { ModalsProvider } from '@byndyusoft-ui/modals-provider';
+import { Modal } from '@byndyusoft-ui/modals';
+
+function ComponentWithModalProvider() {
+    return (
+        <ModalsProvider>
+            <ComponentWithModal />
+        </ModalsProvider>
+    );
+}
+
+function ComponentWithModal() {
+    const { open } = useModals();
+
+    return (
+        <div>
+            <button onClick={() => open('modal-id')}>Open modal</button>
+            <div>Main content</div>
+            <Modal id="modal-id" onOpen={() => console.log('Modal opened')} onClose={() => console.log('Modal closed')}>
+                <div>Modal content</div>
+            </Modal>
+        </div>
+    );
+}
+```
+
+## Props
+
+| Prop     | Type      | Default | Description                                      |
+| -------- | --------- | ------- | ------------------------------------------------ |
+| children | ReactNode | -       | Content to be rendered inside the modal          |
+| id       | string    | -       | Unique identifier for the modal                  |
+| onOpen   | function  | -       | Callback function triggered when modal is opened |
+| onClose  | function  | -       | Callback function triggered when modal is closed |

components/Modal/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@byndyusoft-ui/Modal",
+  "version": "0.1.0",
+  "description": "Byndyusoft UI Modal React Component",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "modal"
+  ],
+  "author": "Dmitrii Maletskii <maleckij@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/modal#readme",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots components/modal/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "dependencies": {
+    "@byndyusoft-ui/use-is-mounted": "*",
+    "@byndyusoft-ui/modals-provider": "*",
+    "@byndyusoft-ui/Overlay": "*"
+  }
+}

components/Modal/rollup.config.js

@@ -0,0 +1,15 @@
+import typescript from '@rollup/plugin-typescript';
+import baseConfig from '../../rollup.base.config';
+
+export default {
+    ...baseConfig,
+    input: ['src/index.ts'],
+    plugins: [
+        ...baseConfig.plugins,
+        typescript({
+            tsconfig: './tsconfig.json',
+            module: 'ESNext',
+            exclude: ['src/*.stories.tsx', 'src/*.tests.tsx', 'node_modules']
+        })
+    ]
+};

components/Modal/src/Modal.module.css

@@ -0,0 +1,121 @@
+.container {
+    z-index: 1999999999;
+    position: fixed;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+    pointer-events: none;
+}
+
+.overlay {
+    cursor: pointer;
+}
+
+.dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-width: 328px;
+    max-height: calc(100dvh - 2rem);
+    margin: 1rem;
+    color: #FFFFFF;
+    background: #252528;
+    opacity: 0;
+    transform: translateY(-25%);
+    transition:
+        visibility 0s linear 0.4s,
+        transform 0.4s ease,
+        opacity 0.4s ease;
+    visibility: hidden;
+}
+
+.dialog.isOpen {
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(0);
+    transition:
+        visibility 0s linear 0s,
+        transform 0.4s ease,
+        opacity 0.4s ease;
+    visibility: visible;
+}
+
+.header {
+    position: relative;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    padding: 0.75rem 0.75rem 0.75rem 1rem;
+}
+
+.title {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.close {
+    cursor: pointer;
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    flex-shrink: 0;
+    height: 1rem;
+    width: 1rem;
+    background: transparent url('./partials/assets/CrossIcon.svg') no-repeat center center;
+    border: none;
+    background-size: 0.75rem;
+}
+
+.closeText {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    visibility: visible;
+    white-space: nowrap;
+}
+
+.close:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color;
+}
+
+.body {
+    flex: 1 1;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    scrollbar-color: #FFFFFF #252528;
+    scrollbar-width: thin;
+}
+
+.content {
+    flex-grow: 1;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.heading {
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1.5rem;
+    padding-top: 1rem;
+}

components/Modal/src/Modal.tests.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ModalsProvider, { useModals } from '@byndyusoft-ui/modals-provider';
+import Modal from './Modal';
+
+interface ISceneProps {
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+const Scene = ({ onOpen, onClose }: ISceneProps): JSX.Element => {
+    const { open } = useModals();
+
+    return (
+        <>
+            <button onClick={() => open('modal')}>Open</button>
+            <Modal id="modal" onOpen={onOpen} onClose={onClose}>
+                Test
+            </Modal>
+        </>
+    );
+};
+
+describe('components/Modal', () => {
+    test('renders correctly', async () => {
+        render(
+            <ModalsProvider>
+                <Scene />
+            </ModalsProvider>
+        );
+
+        expect(screen.getByRole('document')).not.toHaveClass('is-open');
+
+        await userEvent.click(screen.getByText(/Open/));
+
+        expect(screen.getByText('Test')).toBeInTheDocument();
+        expect(screen.getByRole('document')).toHaveClass('is-open');
+    });
+
+    test('calls `onOpen` callback', async () => {
+        const onOpen = jest.fn();
+
+        render(
+            <ModalsProvider>
+                <Scene onOpen={onOpen} />
+            </ModalsProvider>
+        );
+
+        await userEvent.click(screen.getByText(/Open/));
+
+        expect(onOpen).toBeCalledTimes(1);
+    });
+
+    test('calls `onClose` callback by button click', async () => {
+        const onClose = jest.fn();
+
+        render(
+            <ModalsProvider>
+                <Scene onClose={onClose} />
+            </ModalsProvider>
+        );
+
+        await userEvent.click(screen.getByText(/Open/));
+
+        expect(screen.getByRole('document')).toHaveClass('is-open');
+
+        await userEvent.click(screen.getByRole('button', { name: /Close/ }));
+
+        expect(onClose).toBeCalledTimes(1);
+    });
+
+    test('calls `onClose` callback by overlay click', async () => {
+        const onClose = jest.fn();
+
+        render(
+            <ModalsProvider>
+                <Scene onClose={onClose} />
+            </ModalsProvider>
+        );
+
+        await userEvent.click(screen.getByText(/Open/));
+
+        expect(screen.getByRole('document')).toHaveClass('is-open');
+
+        await userEvent.click(screen.getAllByRole('button')[1]);
+
+        expect(onClose).toBeCalledTimes(1);
+    });
+});

components/Modal/src/Modal.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { ModalContainer, ModalCloseButton } from './partials';
+import { IModalProps } from './Modal.types';
+import styles from './Modal.module.css';
+
+const Modal: FC<IModalProps> = ({ children, classNames, id, ...props }): JSX.Element => {
+    const mergedClassNames = Object.assign(
+        { container: styles.container, dialog: styles.dialog, overlay: styles.overlay, isOpen: styles.isOpen },
+        classNames
+    );
+
+    return (
+        <ModalContainer id={id} classNames={mergedClassNames} {...props}>
+            {children}
+            <ModalCloseButton id={id} />
+        </ModalContainer>
+    );
+};
+
+export default Modal;

components/Modal/src/Modal.types.ts

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+export const tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+
+export type THeadingTag = (typeof tags)[number];
+
+export interface IModalClassNames {
+    container: string;
+    dialog: string;
+    overlay: string;
+    isOpen: string;
+}
+
+export interface IModalPartialProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+
+export interface IModalCloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    id: string;
+}
+
+export interface IModalContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'className'> {
+    classNames?: IModalClassNames;
+    id: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+export interface IModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    className?: string;
+    as?: THeadingTag;
+}
+
+export interface IModalProps extends IModalContainerProps {}