initial commit

src/app/atoms/modal/RawModal.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RawModal.scss';
+
+import Modal from 'react-modal';
+
+Modal.setAppElement('#root');
+
+function RawModal({
+  className, overlayClassName,
+  isOpen, size, onAfterOpen, onAfterClose,
+  onRequestClose, closeFromOutside, children,
+}) {
+  let modalClass = (className !== null) ? `${className} ` : '';
+  switch (size) {
+    case 'large':
+      modalClass += 'raw-modal__large ';
+      break;
+    case 'medium':
+      modalClass += 'raw-modal__medium ';
+      break;
+    case 'small':
+    default:
+      modalClass += 'raw-modal__small ';
+  }
+  const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
+  return (
+    <Modal
+      className={`${modalClass}raw-modal`}
+      overlayClassName={`${modalOverlayClass}raw-modal__overlay`}
+      isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
+      onRequestClose={onRequestClose}
+      shouldCloseOnEsc={closeFromOutside}
+      shouldCloseOnOverlayClick={closeFromOutside}
+      shouldReturnFocusAfterClose={false}
+      closeTimeoutMS={300}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+RawModal.defaultProps = {
+  className: null,
+  overlayClassName: null,
+  size: 'small',
+  onAfterOpen: null,
+  onAfterClose: null,
+  onRequestClose: null,
+  closeFromOutside: true,
+};
+
+RawModal.propTypes = {
+  className: PropTypes.string,
+  overlayClassName: PropTypes.string,
+  isOpen: PropTypes.bool.isRequired,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
+  onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+export default RawModal;

src/app/atoms/modal/RawModal.scss

@@ -0,0 +1,63 @@
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+}
+.ReactModal__Overlay--after-open{
+  opacity: 1;
+}
+.ReactModal__Overlay--before-close{
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: translateY(100%);
+  transition: transform 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+}
+
+.ReactModal__Content--after-open{
+  transform: translateY(0);
+}
+
+.ReactModal__Content--before-close{
+  transform: translateY(100%);
+}
+
+.raw-modal {
+  --small-modal-width: 525px;
+  --medium-modal-width: 712px;
+  --large-modal-width: 1024px;
+
+
+  width: 100%;
+  max-height: 100%;
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+  outline: none;
+  overflow: hidden;
+
+  &__small {
+    max-width: var(--small-modal-width);
+  }
+  &__medium {
+    max-width: var(--medium-modal-width);
+  }
+  &__large {
+    max-width: var(--large-modal-width);
+  }
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--sp-normal);
+    width: 100%;
+    height: 100%;
+    background-color: var(--bg-overlay);
+  }
+}