From 58955c3d6a0271371ebfd25dd76129adc0980617 Mon Sep 17 00:00:00 2001 From: Rabire Date: Thu, 30 Dec 2021 10:03:29 +0100 Subject: [PATCH 1/2] setup --- .eslintrc.json | 1 + custom.d.ts | 1 + src/Modal/Modal.stories.tsx | 33 ++++++++++++++++++++ src/Modal/Modal.style.ts | 13 ++++++++ src/Modal/Modal.tsx | 60 +++++++++++++++++++++++++++++++++++++ tsconfig.json | 2 +- 6 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 custom.d.ts create mode 100644 src/Modal/Modal.stories.tsx create mode 100644 src/Modal/Modal.style.ts create mode 100644 src/Modal/Modal.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 261a6d3..3380bf0 100644 --- a/.eslintrc.json +++ b/.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, diff --git a/custom.d.ts b/custom.d.ts new file mode 100644 index 0000000..bff9471 --- /dev/null +++ b/custom.d.ts @@ -0,0 +1 @@ +declare module '*.svg'; diff --git a/src/Modal/Modal.stories.tsx b/src/Modal/Modal.stories.tsx new file mode 100644 index 0000000..5d3002f --- /dev/null +++ b/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; + +const Template: ComponentStory = (args) => ; + +export const Centered = Template.bind({}); +Centered.args = { + children:
content
, + displayModalState: [true, () => null], +}; + +export const Left = Template.bind({}); +Left.args = { + type: ModalType.Left, + children:
content
, + displayModalState: [true, () => null], +}; + +export const Right = Template.bind({}); +Right.args = { + type: ModalType.Right, + children:
content
, + displayModalState: [true, () => null], +}; diff --git a/src/Modal/Modal.style.ts b/src/Modal/Modal.style.ts new file mode 100644 index 0000000..2f8cb7b --- /dev/null +++ b/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 {}; +}; diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx new file mode 100644 index 0000000..8750d93 --- /dev/null +++ b/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>]; + 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 ( + + + {children} + + + ); +}; + +Modal.defaultProps = { + type: ModalType.Centered, + onClose: () => null, +}; diff --git a/tsconfig.json b/tsconfig.json index a7e2aae..15e0e3a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,6 +11,6 @@ "allowSyntheticDefaultImports": true, "esModuleInterop": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "custom.d.ts"], "exclude": ["node_modules", "build"] } From abad8fcd861877411650a2b3b62881680c9eaf92 Mon Sep 17 00:00:00 2001 From: Rabire Date: Thu, 30 Dec 2021 10:45:11 +0100 Subject: [PATCH 2/2] test added --- src/Modal/Modal.test.tsx | 55 ++++++++ src/Modal/__snapshots__/Modal.test.tsx.snap | 145 ++++++++++++++++++++ 2 files changed, 200 insertions(+) create mode 100644 src/Modal/Modal.test.tsx create mode 100644 src/Modal/__snapshots__/Modal.test.tsx.snap diff --git a/src/Modal/Modal.test.tsx b/src/Modal/Modal.test.tsx new file mode 100644 index 0000000..47cef38 --- /dev/null +++ b/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( + null]}> +
+
+

Demo header

+ +
+
content
+
+ + ).baseElement + ).toMatchSnapshot('Centered Modal snapshot'); + }); + + it('should match with the previous Left Modal snapshot', () => { + expect( + render( + null]}> +
+
+

Demo header

+ +
+
content
+
+ + ).baseElement + ).toMatchSnapshot('Left Modal snapshot'); + }); + + it('should match with the previous Right Modal snapshot', () => { + expect( + render( + null]}> +
+
+

Demo header

+ +
+
content
+
+ + ).baseElement + ).toMatchSnapshot('Right Modal snapshot'); + }); + }); +}); diff --git a/src/Modal/__snapshots__/Modal.test.tsx.snap b/src/Modal/__snapshots__/Modal.test.tsx.snap new file mode 100644 index 0000000..d5e7a74 --- /dev/null +++ b/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`] = ` + +