refactor UGN-226 - remove lape, improve types, refactor table component

package.json

@@ -44,7 +44,6 @@
     "chakra-ui-steps": "1.6.1",
     "framer-motion": "6.2.6",
     "js-levenshtein": "1.1.6",
-    "lape": "6.4.8",
     "react": "17.0.2",
     "react-data-grid": "7.0.0-beta.11",
     "react-dom": "17.0.2",
@@ -53,12 +52,12 @@
     "xlsx": "0.18.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.2",
+    "@babel/core": "7.17.5",
     "@emotion/jest": "11.7.1",
     "@jest/types": "27.5.1",
     "@storybook/react": "6.4.19",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.3",
     "@types/jest": "27.4.0",
     "@types/js-levenshtein": "1.1.1",
     "@types/react": "17.0.39",
@@ -68,7 +67,7 @@
     "jest": "27.5.1",
     "jest-watch-typeahead": "1.0.0",
     "prettier": "2.5.1",
-    "rollup": "2.67.2",
+    "rollup": "2.67.3",
     "rollup-plugin-typescript2": "0.31.2",
     "ts-jest": "27.1.3",
     "ttypescript": "1.5.13",

src/components/SelectHeader.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo } from "react"
-import {Box, Button, Checkbox, Text} from "@chakra-ui/react"
+import React, { useCallback, useMemo, useState } from "react"
+import { Box, Button, Checkbox, Text } from "@chakra-ui/react"
 import Table, { useRowSelection } from "react-data-grid"
-import {ignoreState, useLape} from "lape";
 
 const SELECT_HEADER_TITLE = "Select header row"
 const CANCEL_BUTTON_TITLE = "Cancel"
@@ -36,9 +35,8 @@ type SelectHeaderProps = {
 }
 
 export const SelectHeader = ({ data, onCancel, onContinue }: SelectHeaderProps) => {
-  const state = useLape<{ selectedRow: ReadonlySet<any>; error?: string }>({
-    selectedRow: ignoreState(new Set()),
-  })
+  const [selectedRows, setSelectedRows] = useState<ReadonlySet<any>>(new Set())
+  const [error, setError] = useState<string | undefined>()
 
   const rowLength = useMemo(() => Math.max(...data.map((row) => row.length)), [data])
   const columns = useMemo(
@@ -61,9 +59,9 @@ export const SelectHeader = ({ data, onCancel, onContinue }: SelectHeaderProps)
 
   const rowKeyGetter = useCallback((row) => row, [])
   const handleContinue = useCallback(() => {
-    const [selectedRow] = state.selectedRow
+    const [selectedRow] = selectedRows
     if (!selectedRow) {
-      state.error = NO_SELECTION_ERROR
+      setError(NO_SELECTION_ERROR)
       return
     }
     // We consider data above header to be redundant
@@ -85,9 +83,9 @@ export const SelectHeader = ({ data, onCancel, onContinue }: SelectHeaderProps)
           <Button onClick={handleContinue}>{CONFIRM_BUTTON_TITLE}</Button>
         </Box>
       </Box>
-      {state.error && (
+      {error && (
         <Text color="error.500" px="0.75rem" pb="0.75rem">
-          {state.error}
+          {error}
         </Text>
       )}
       <Box display="flex" flex={1} px={1} pb="2rem">
@@ -96,16 +94,16 @@ export const SelectHeader = ({ data, onCancel, onContinue }: SelectHeaderProps)
           rows={data as any}
           columns={columns}
           headerRowHeight={0}
-          selectedRows={state.selectedRow}
+          selectedRows={selectedRows}
           onSelectedRowsChange={(rows) => {
-            state.error = undefined
+            setError(undefined)
             const size = rows.size
             if (size === 1) {
-              state.selectedRow = ignoreState(rows)
+              setSelectedRows(rows)
             } else {
               const [_, newItem] = rows
               // react-data-grid only accepts Sets
-              state.selectedRow = ignoreState(new Set([newItem]))
+              setSelectedRows(new Set([newItem]))
             }
           }}
           className="rdg-static"

src/components/Upload.tsx

@@ -12,11 +12,11 @@ type UploadProps = {
 }
 
 export const Upload = ({ onContinue }: UploadProps) => {
-  const { config } = useRsi()
+  const { title } = useRsi()
   return (
     <Box minH="fit-content" display="flex" flex={1} p="2rem" flexDirection="column">
       <Heading size="lg" color="gray.700" mb="2rem">
-        {config?.title || DEFAULT_TITLE}
+        {title || DEFAULT_TITLE}
       </Heading>
       <Text fontSize="2xl" lineHeight={8} fontWeight="semibold" color="gray.700">
         {MANIFEST_TITLE}

src/stories/Default.stories.tsx

@@ -11,7 +11,7 @@ export const Basic = () => {
   return (
     <>
       <Button onClick={onOpen}>Open modal</Button>
-      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} config={{ title: "Upload file" }} />
+      <ReactSpreadsheetImport {...mockRsiValues} isOpen={isOpen} onClose={onClose} title="Upload file" />
     </>
   )
 }