arch: move web folder into api & move api to top level

frontend/src/shared/components/Modal/Modal.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import Modal from '.';
+
+export default {
+  component: Modal,
+  title: 'Modal',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <Modal
+        width={1040}
+        onClose={action('on close')}
+        renderContent={() => {
+          return <h1>Hello!</h1>;
+        }}
+      />
+    </>
+  );
+};

frontend/src/shared/components/Modal/Styles.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const ScrollOverlay = styled.div`
+  z-index: 3000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+
+export const ClickableOverlay = styled.div`
+  min-height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+`;
+
+export const StyledModal = styled.div<{ width: number }>`
+  display: inline-block;
+  position: relative;
+  margin: 48px 0 80px;
+  width: 100%;
+  background: #262c49;
+  max-width: ${props => props.width}px;
+  vertical-align: middle;
+  border-radius: 3px;
+  ${mixin.boxShadowMedium}
+`;

frontend/src/shared/components/Modal/index.tsx

@@ -0,0 +1,36 @@
+import React, { useRef } from 'react';
+import ReactDOM from 'react-dom';
+
+import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
+
+import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';
+
+const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+
+type ModalProps = {
+  width: number;
+  onClose: () => void;
+  renderContent: () => JSX.Element;
+};
+
+const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+  const $modalRef = useRef<HTMLDivElement>(null);
+  const $clickableOverlayRef = useRef<HTMLDivElement>(null);
+
+  useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
+  useOnEscapeKeyDown(true, tellParentToClose);
+
+  return ReactDOM.createPortal(
+    <ScrollOverlay>
+      <ClickableOverlay ref={$clickableOverlayRef}>
+        <StyledModal width={width} ref={$modalRef}>
+          {renderContent()}
+        </StyledModal>
+      </ClickableOverlay>
+    </ScrollOverlay>,
+    $root,
+  );
+};
+
+export default Modal;