Update web libraries in client package (#433)

Recidiviz · May 20, 2021 · 4a82a84 · 4a82a84
1 parent 9a9410d
commit 4a82a84
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 664 deletions.
diff --git a/spotlight-client/package.json b/spotlight-client/package.json
@@ -18,7 +18,7 @@
     "@auth0/auth0-spa-js": "^1.13.1",
     "@reach/auto-id": "^0.15.0",
     "@reach/router": "^1.3.4",
-    "@recidiviz/case-triage-components": "^0.2.2",
+    "@recidiviz/design-system": "^0.5.2",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.11",
     "@types/d3-array": "^2.9.0",
@@ -38,6 +38,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-measure": "^2.0.6",
+    "@types/react-modal": "^3.12.0",
     "@types/react-portal": "^4.0.2",
     "@types/react-simple-maps": "^1.0.3",
     "@types/styled-components": "^5.1.5",
@@ -100,6 +101,7 @@
   },
   "devDependencies": {
     "@recidiviz/eslint-config": "^1.0.0",
+    "@recidiviz/tsconfig": "^1.0.0",
     "@segment/analytics.js-core": "^4.1.5",
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/react": "^11.1.1",

diff --git a/spotlight-client/src/UiLibrary/Modal.tsx b/spotlight-client/src/UiLibrary/Modal.tsx
@@ -19,52 +19,18 @@ import {
   Modal as ModalBase,
   ModalHeading as ModalHeadingBase,
   ModalProps,
-} from "@recidiviz/case-triage-components";
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
-import { rem, rgba } from "polished";
-import React, { useRef } from "react";
+} from "@recidiviz/design-system";
+import { rem } from "polished";
+import React from "react";
 import styled from "styled-components/macro";
 import { Omit, Required } from "utility-types";
 import iconPath from "../assets/x.svg";
-import { colors } from ".";
 import animation from "./animation";
-import zIndex from "./zIndex";
 
 export const ModalHeading = styled(ModalHeadingBase)`
   margin-bottom: ${rem(16)};
 `;
 
-const StyledModal = styled(ModalBase)`
-  /*
-    the double ampersands are a trick to overcome
-    specificity in the imported component styles
-  */
-  && .ReactModal__Overlay {
-    background: ${rgba(colors.modalOverlay, 0)};
-    transition: background-color ${animation.defaultDuration}ms,
-      backdrop-filter ${animation.defaultDuration}ms;
-    z-index: ${zIndex.modal};
-
-    &.ReactModal__Overlay--after-open {
-      /* not all browsers support backdrop-filter but it's a nice progressive enhancement */
-      backdrop-filter: blur(${rem(4)});
-      background: ${rgba(colors.modalOverlay, 0.7)};
-    }
-
-    &.ReactModal__Overlay--before-close {
-      backdrop-filter: none;
-      background: ${rgba(colors.modalOverlay, 0)};
-    }
-  }
-
-  && .ReactModal__Content {
-    max-height: 90vh;
-    max-width: 90vw;
-    overflow: auto;
-    z-index: ${zIndex.modal + 1};
-  }
-`;
-
 const CloseButton = styled.button.attrs({ type: "button" })`
   background: none;
   border: none;
@@ -86,42 +52,21 @@ export type SpotlightModalProps = Omit<
 
 export const Modal: React.FC<SpotlightModalProps> = ({
   children,
-  onAfterOpen,
   onRequestClose,
   ...passThruProps
 }) => {
-  const modalContentRef = useRef<HTMLDivElement | null>(null);
-
-  const onRequestCloseWithScrollLock: ModalProps["onRequestClose"] = (e) => {
-    if (modalContentRef.current) {
-      enableBodyScroll(modalContentRef.current);
-    }
-    onRequestClose(e);
-  };
-
   return (
-    <StyledModal
+    <ModalBase
       {...passThruProps}
       closeTimeoutMS={animation.defaultDuration}
-      contentRef={(node) => {
-        modalContentRef.current = node;
-      }}
-      onAfterOpen={(opts) => {
-        if (modalContentRef.current) {
-          disableBodyScroll(modalContentRef.current);
-        }
-        if (onAfterOpen) {
-          onAfterOpen(opts);
-        }
-      }}
-      onRequestClose={onRequestCloseWithScrollLock}
+      onRequestClose={onRequestClose}
     >
       <>
-        <CloseButton onClick={(e) => onRequestCloseWithScrollLock(e)}>
+        <CloseButton onClick={(e) => onRequestClose(e)}>
           <CloseIcon alt="close modal" src={iconPath} />
         </CloseButton>
         {children}
       </>
-    </StyledModal>
+    </ModalBase>
   );
 };
diff --git a/spotlight-client/tsconfig.json b/spotlight-client/tsconfig.json
@@ -1,28 +1,4 @@
 {
-  "compilerOptions": {
-    // Target language and language features
-    "allowJs": true,
-    "esModuleInterop": true,
-    "jsx": "react",
-    "module": "esnext",
-    "target": "es5",
-
-    // what to check
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-
-    // where to check
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-
-    // output
-    "incremental": true,
-    "isolatedModules": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "moduleResolution": "node",
-    "noEmit": true,
-    "useDefineForClassFields": true
-  },
+  "extends": "@recidiviz/tsconfig/react",
   "include": ["src", "@types"]
 }