feat UGN-204 - cleanup, added dynamic title, context for config

src/components/DropZone.tsx

@@ -0,0 +1,73 @@
+import { Box, Button, Text, useTheme, useToast } from "@chakra-ui/react"
+import { getDropZoneBorder } from "../utils/getDropZoneBorder"
+import { useDropzone } from "react-dropzone"
+import XLSX from "xlsx"
+
+const UPLOAD_TITLE = "Upload .xlsx, .xls or .csv file"
+const ERROR_TOAST_DESCRIPTION = "upload rejected"
+const ACTIVE_DROP_ZONE_TITLE = "Drop file here..."
+const BUTTON_TITLE = "Select file"
+
+type DropZoneProps = {
+  onContinue: (data: string[][]) => void
+}
+
+export const DropZone = ({ onContinue }: DropZoneProps) => {
+  const {
+    colors: { rsi },
+  } = useTheme()
+  const toast = useToast()
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    noClick: true,
+    noKeyboard: true,
+    maxFiles: 1,
+    accept: ".xls, .csv, .xlsx",
+    onDropRejected: (fileRejections) => {
+      fileRejections.forEach((fileRejection) => {
+        toast({
+          status: "error",
+          title: `${fileRejection.file.name} ${ERROR_TOAST_DESCRIPTION}`,
+          description: fileRejection.errors[0].message,
+        })
+      })
+    },
+    onDrop: async ([file]) => {
+      const arrayBuffer = await file.arrayBuffer()
+      const workbook = XLSX.read(arrayBuffer)
+      const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]
+      const data = XLSX.utils.sheet_to_json(first_worksheet, {
+        header: 1,
+        blankrows: false,
+      })
+      onContinue(data as string[][])
+    },
+  })
+  return (
+    <Box
+      {...getRootProps()}
+      {...getDropZoneBorder(rsi["500"])}
+      width="100%"
+      cursor="pointer"
+      onClick={open}
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      flex={1}
+    >
+      <input {...getInputProps()} />
+      {isDragActive ? (
+        <Text size="lg" lineHeight={7} fontWeight="semibold">
+          {ACTIVE_DROP_ZONE_TITLE}
+        </Text>
+      ) : (
+        <>
+          <Text fontSize="lg" lineHeight={7} fontWeight="semibold">
+            {UPLOAD_TITLE}
+          </Text>
+          <Button mt="1rem">{BUTTON_TITLE}</Button>
+        </>
+      )}
+    </Box>
+  )
+}

src/components/Providers.tsx

@@ -0,0 +1,22 @@
+import { ChakraProvider, CSSObject } from "@chakra-ui/react"
+import { createContext } from "react"
+import type { ReactSpreadsheetImportProps } from "./ReactSpreadsheetImport"
+
+export const RsiContext = createContext({} as ReactSpreadsheetImportProps)
+
+type ProvidersProps = {
+  children: React.ReactNode
+  theme: CSSObject
+  rsiValues: ReactSpreadsheetImportProps
+}
+
+export const Providers = ({ children, theme, rsiValues }: ProvidersProps) => (
+  <RsiContext.Provider value={rsiValues}>
+    <ChakraProvider>
+      {/* cssVarsRoot used to override RSI theme but not the rest of chakra theme */}
+      <ChakraProvider cssVarsRoot="#chakra-modal-rsi" theme={theme}>
+        {children}
+      </ChakraProvider>
+    </ChakraProvider>
+  </RsiContext.Provider>
+)

src/components/ReactSpreadsheetImport.tsx

@@ -1,28 +1,33 @@
-import { ChakraProvider, Modal, ModalContent, ModalOverlay, extendTheme } from "@chakra-ui/react"
+import { Modal, ModalContent, ModalOverlay, extendTheme } from "@chakra-ui/react"
 import { ModalCloseButton } from "./ModalCloseButton"
 import { Steps } from "./Steps"
 import { themeOverrides, colorSchemeOverrides } from "../theme"
+import { Providers } from "./Providers"
 
 const theme = extendTheme(colorSchemeOverrides, themeOverrides)
 
-type ReactSpreadsheetImportProps = {
+export type Config = {
+  // Title of importer modal
+  title?: string
+}
+
+export type ReactSpreadsheetImportProps = {
   isOpen: boolean
   onClose: () => void
+  config: Config
 }
 
-export const ReactSpreadsheetImport = ({ isOpen, onClose }: ReactSpreadsheetImportProps) => {
+export const ReactSpreadsheetImport = (props: ReactSpreadsheetImportProps) => {
+  const { isOpen, onClose } = props
   return (
-    <ChakraProvider>
-      {/* cssVarsRoot used to override RSI theme but not the rest of chakra theme */}
-      <ChakraProvider cssVarsRoot="#chakra-modal-rsi" theme={theme}>
-        <Modal isOpen={isOpen} onClose={onClose} id="rsi" variant="rsi" closeOnEsc={false} closeOnOverlayClick={false}>
-          <ModalOverlay />
-          <ModalCloseButton onClose={onClose} />
-          <ModalContent>
-            <Steps />
-          </ModalContent>
-        </Modal>
-      </ChakraProvider>
-    </ChakraProvider>
+    <Providers theme={theme} rsiValues={props}>
+      <Modal isOpen={isOpen} onClose={onClose} id="rsi" variant="rsi" closeOnEsc={false} closeOnOverlayClick={false}>
+        <ModalOverlay />
+        <ModalCloseButton onClose={onClose} />
+        <ModalContent>
+          <Steps />
+        </ModalContent>
+      </Modal>
+    </Providers>
   )
 }

src/components/Upload.tsx

@@ -1,75 +1,31 @@
-import XLSX from "xlsx"
-import { useDropzone } from "react-dropzone"
-import { Box, Button, Text, useTheme, useToast } from "@chakra-ui/react"
-import { getDropZoneBorder } from "../utils/getDropZoneBorder"
+import { Box, Heading, Text } from "@chakra-ui/react"
+import { DropZone } from "./DropZone"
+import { useRsi } from "../hooks/useRsi"
 
-const UPLOAD_TITLE = "Upload .xlsx, .xls or .csv file"
-const ERROR_TOAST_DESCRIPTION = "upload rejected"
-const ACTIVE_DROP_ZONE_TITLE = "Drop file here..."
-const BUTTON_TITLE = "Select file"
+const DEFAULT_TITLE = "Upload Sheet"
+const MANIFEST_TITLE = "Data that we expect:"
+const MANIFEST_DESCRIPTION = "(You will have a chance to select and rename columns in next steps)"
 
 type UploadProps = {
   onContinue: (data: string[][]) => void
 }
 
 export const Upload = ({ onContinue }: UploadProps) => {
   const {
-    colors: { rsi },
-  } = useTheme()
-  const toast = useToast()
-  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    noClick: true,
-    noKeyboard: true,
-    maxFiles: 1,
-    accept: ".xls, .csv, .xlsx",
-    onDropRejected: (fileRejections) => {
-      fileRejections.forEach((fileRejection) => {
-        toast({
-          status: "error",
-          title: `${fileRejection.file.name} ${ERROR_TOAST_DESCRIPTION}`,
-          description: fileRejection.errors[0].message,
-        })
-      })
-    },
-    onDrop: async ([file]) => {
-      const arrayBuffer = await file.arrayBuffer()
-      const workbook = XLSX.read(arrayBuffer)
-      const first_worksheet = workbook.Sheets[workbook.SheetNames[0]]
-      const data = XLSX.utils.sheet_to_json(first_worksheet, {
-        header: 1,
-        blankrows: false,
-      })
-      onContinue(data as string[][])
-    },
-  })
-
+    config: { title },
+  } = useRsi()
   return (
-    <Box minH="fit-content" display="flex" flex={1} p="2rem">
-      <Box
-        {...getRootProps()}
-        {...getDropZoneBorder(rsi["500"])}
-        width="100%"
-        cursor="pointer"
-        onClick={open}
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        flexDirection="column"
-      >
-        <input {...getInputProps()} />
-        {isDragActive ? (
-          <Text size="lg" lineHeight={7} fontWeight="semibold">
-            {ACTIVE_DROP_ZONE_TITLE}
-          </Text>
-        ) : (
-          <>
-            <Text size="lg" lineHeight={7} fontWeight="semibold">
-              {UPLOAD_TITLE}
-            </Text>
-            <Button mt="1rem">{BUTTON_TITLE}</Button>
-          </>
-        )}
-      </Box>
+    <Box minH="fit-content" display="flex" flex={1} p="2rem" flexDirection="column">
+      <Heading size="lg" color="gray.700" mb="2rem">
+        {title || DEFAULT_TITLE}
+      </Heading>
+      <Text fontSize="2xl" lineHeight={8} fontWeight="semibold" color="gray.700">
+        {MANIFEST_TITLE}
+      </Text>
+      <Text fontSize="md" lineHeight={6} color="gray.500" mb="2rem">
+        {MANIFEST_DESCRIPTION}
+      </Text>
+      <DropZone onContinue={onContinue} />
     </Box>
   )
 }

src/hooks/useRsi.ts

@@ -0,0 +1,4 @@
+import { useContext } from "react"
+import { RsiContext } from "../components/Providers"
+
+export const useRsi = () => useContext(RsiContext)

src/stories/Default.stories.tsx

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