Modal component

.eslintrc.json

@@ -27,6 +27,7 @@
     "no-shadow": "off",
     "@typescript-eslint/no-shadow": ["error"],
     "react-hooks/rules-of-hooks": "error",
+    "react/jsx-props-no-spreading": "off",
     "react-hooks/exhaustive-deps": "warn",
     "react/jsx-filename-extension": [
       1,

custom.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

src/Modal/Modal.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Modal, ModalType } from './Modal';
+
+export default {
+  title: 'Modal',
+  component: Modal,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+
+export const Centered = Template.bind({});
+Centered.args = {
+  children: <div>content</div>,
+  displayModalState: [true, () => null],
+};
+
+export const Left = Template.bind({});
+Left.args = {
+  type: ModalType.Left,
+  children: <div>content</div>,
+  displayModalState: [true, () => null],
+};
+
+export const Right = Template.bind({});
+Right.args = {
+  type: ModalType.Right,
+  children: <div>content</div>,
+  displayModalState: [true, () => null],
+};

src/Modal/Modal.style.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { ModalType } from './Modal';
+
+export const getModalStyles = (type: ModalType): CSSProperties => {
+  if (type === ModalType.Centered)
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+  return {};
+};

src/Modal/Modal.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Modal, ModalType } from './Modal';
+
+describe('Modal component', () => {
+  describe('@snapshots', () => {
+    it('should match with the previous Centered Modal snapshot', () => {
+      expect(
+        render(
+          <Modal displayModalState={[true, () => null]}>
+            <div>
+              <div>
+                <h1>Demo header</h1>
+                <button type="button">exit cross</button>
+              </div>
+              <div>content</div>
+            </div>
+          </Modal>
+        ).baseElement
+      ).toMatchSnapshot('Centered Modal snapshot');
+    });
+
+    it('should match with the previous Left Modal snapshot', () => {
+      expect(
+        render(
+          <Modal type={ModalType.Left} displayModalState={[true, () => null]}>
+            <div>
+              <div>
+                <h1>Demo header</h1>
+                <button type="button">exit cross</button>
+              </div>
+              <div>content</div>
+            </div>
+          </Modal>
+        ).baseElement
+      ).toMatchSnapshot('Left Modal snapshot');
+    });
+
+    it('should match with the previous Right Modal snapshot', () => {
+      expect(
+        render(
+          <Modal type={ModalType.Right} displayModalState={[true, () => null]}>
+            <div>
+              <div>
+                <h1>Demo header</h1>
+                <button type="button">exit cross</button>
+              </div>
+              <div>content</div>
+            </div>
+          </Modal>
+        ).baseElement
+      ).toMatchSnapshot('Right Modal snapshot');
+    });
+  });
+});

src/Modal/Modal.tsx

@@ -0,0 +1,60 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { Modal as ModalMui, Paper, Slide, withStyles } from '@material-ui/core';
+import { getModalStyles } from './Modal.style';
+
+export enum ModalType {
+  Centered,
+  Left,
+  Right,
+}
+
+type ModalProps = {
+  children: JSX.Element;
+  type?: ModalType;
+  displayModalState: [boolean, Dispatch<SetStateAction<boolean>>];
+  onClose?: () => void;
+};
+
+export const Modal = ({ children, type, displayModalState, onClose }: ModalProps) => {
+  const [isOpen, setIsOpen] = displayModalState;
+
+  const closeModal = () => {
+    onClose();
+    setIsOpen(false);
+  };
+
+  const StyledSlide = withStyles({
+    root: {
+      outline: 'none',
+      borderRadius: type === ModalType.Centered ? 20 : 0,
+      height: type === ModalType.Centered ? 'none' : '100vh',
+      maxHeight: type === ModalType.Centered ? '70vh' : '100vh',
+      width: '70vw',
+      position: type === ModalType.Centered ? 'relative' : 'absolute',
+      right: type === ModalType.Right ? 0 : 'auto',
+
+      overflowY: 'scroll',
+      scrollbarWidth: 'none',
+      // TODO: hide scrollbare on Chrome
+    },
+  })(Slide); // TODO: export in style files when I remember how to pass type as props
+
+  const direction = () => {
+    if (type === ModalType.Left) return 'right';
+    if (type === ModalType.Right) return 'left';
+    return 'up';
+  };
+
+  return (
+    <ModalMui open={isOpen} onClose={closeModal} style={getModalStyles(type)}>
+      <StyledSlide direction={direction()} in={isOpen}>
+        <Paper>{children}</Paper>
+      </StyledSlide>
+    </ModalMui>
+  );
+};
+
+Modal.defaultProps = {
+  type: ModalType.Centered,
+  onClose: () => null,
+};

src/Modal/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal component @snapshots should match with the previous Centered Modal snapshot: Centered Modal snapshot 1`] = `
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center;"
+  >
+    <div
+      aria-hidden="true"
+      style="z-index: -1; position: fixed; right: 0px; bottom: 0px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.5);"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiPaper-root ForwardRef(Slide)-root-1 MuiPaper-elevation1 MuiPaper-rounded"
+      style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div>
+        <div>
+          <h1>
+            Demo header
+          </h1>
+          <button
+            type="button"
+          >
+            exit cross
+          </button>
+        </div>
+        <div>
+          content
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`Modal component @snapshots should match with the previous Left Modal snapshot: Left Modal snapshot 1`] = `
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      style="z-index: -1; position: fixed; right: 0px; bottom: 0px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.5);"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiPaper-root ForwardRef(Slide)-root-2 MuiPaper-elevation1 MuiPaper-rounded"
+      style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div>
+        <div>
+          <h1>
+            Demo header
+          </h1>
+          <button
+            type="button"
+          >
+            exit cross
+          </button>
+        </div>
+        <div>
+          content
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`Modal component @snapshots should match with the previous Right Modal snapshot: Right Modal snapshot 1`] = `
+<body
+  style="padding-right: 0px; overflow: hidden;"
+>
+  <div
+    aria-hidden="true"
+  />
+  <div
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+  >
+    <div
+      aria-hidden="true"
+      style="z-index: -1; position: fixed; right: 0px; bottom: 0px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.5);"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiPaper-root ForwardRef(Slide)-root-3 MuiPaper-elevation1 MuiPaper-rounded"
+      style="webkit-transform: none; transform: none; webkit-transition: -webkit-transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: transform 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
+    >
+      <div>
+        <div>
+          <h1>
+            Demo header
+          </h1>
+          <button
+            type="button"
+          >
+            exit cross
+          </button>
+        </div>
+        <div>
+          content
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;

tsconfig.json

@@ -11,6 +11,6 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "custom.d.ts"],
   "exclude": ["node_modules", "build"]
 }