Merge pull request #108 from UgnisSoftware/UGN-354

chore UGN-354 - update readme to include initialStepState

Author: JulitorK

README.md

@@ -124,6 +124,60 @@ Example:
 />
 ```
 
+### Initial state
+
+In rare case when you need to skip the beginning of he flow, you can start the flow from any of the steps.
+
+- **initialStepState** - initial state of component that will be rendered on load. 
+
+```tsx
+  initialStepState?: StepState
+  
+  type StepState =
+    | {
+        type: StepType.upload
+      }
+    | {
+        type: StepType.selectSheet
+        workbook: XLSX.WorkBook
+      }
+    | {
+        type: StepType.selectHeader
+        data: RawData[]
+      }
+    | {
+        type: StepType.matchColumns
+        data: RawData[]
+        headerValues: RawData
+      }
+    | {
+        type: StepType.validateData
+        data: any[]
+      }
+
+  type RawData = Array<string | undefined>
+
+  // XLSX.workbook type is native to SheetJS and can be viewed here: https://github.com/SheetJS/sheetjs/blob/83ddb4c1203f6bac052d8c1608b32fead02ea32f/types/index.d.ts#L269
+```
+
+Example:
+
+```tsx
+import { ReactSpreadsheetImport, StepType } from "react-spreadsheet-import";
+
+<ReactSpreadsheetImport
+  initialStepState={{
+    type: StepType.matchColumns,
+    data: [
+      ["Josh", "2"],
+      ["Charlie", "3"],
+      ["Lena", "50"],
+    ],
+    headerValues: ["name", "age"],
+  }}
+/>
+```
+
 ### Other optional props
 
 ```tsx

src/index.ts

@@ -1 +1,2 @@
+export { StepType } from "./steps/UploadFlow"
 export { ReactSpreadsheetImport } from "./ReactSpreadsheetImport"

src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx

@@ -10,7 +10,7 @@ import type { Fields } from "../../../types"
 import selectEvent from "react-select-event"
 import { translations } from "../../../translationsRSIProps"
 import { SELECT_DROPDOWN_ID } from "../../../components/Selects/MenuPortal"
-import { Type } from "../../UploadFlow"
+import { StepType } from "../../UploadFlow"
 
 const fields: Fields<any> = [
   {
@@ -595,7 +595,7 @@ describe("Match Columns general tests", () => {
         {...mockValues}
         matchColumnsStepHook={matchColumnsStepHook}
         initialStepState={{
-          type: Type.matchColumns,
+          type: StepType.matchColumns,
           data: [
             ["Josh", "2"],
             ["Charlie", "3"],
@@ -627,7 +627,7 @@ describe("Match Columns general tests", () => {
         {...mockValues}
         matchColumnsStepHook={matchColumnsStepHook}
         initialStepState={{
-          type: Type.matchColumns,
+          type: StepType.matchColumns,
           data: [
             ["Josh", "2"],
             ["Charlie", "3"],

src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx

@@ -7,7 +7,7 @@ import { Providers } from "../../../components/Providers"
 import { ModalWrapper } from "../../../components/ModalWrapper"
 import userEvent from "@testing-library/user-event"
 import { readFileSync } from "fs"
-import { Type } from "../../UploadFlow"
+import { StepType } from "../../UploadFlow"
 
 const MUTATED_HEADER = "mutated header"
 const CONTINUE_BUTTON = "Next"
@@ -86,7 +86,7 @@ test("selectHeaderStepHook should be able to modify raw data", async () => {
       {...mockRsiValues}
       selectHeaderStepHook={selectHeaderStepHook}
       initialStepState={{
-        type: Type.selectHeader,
+        type: StepType.selectHeader,
         data: [
           ["name", "age"],
           ["Josh", "2"],

src/steps/UploadFlow.tsx

@@ -11,32 +11,32 @@ import { exceedsMaxRecords } from "../utils/exceedsMaxRecords"
 import { useRsi } from "../hooks/useRsi"
 import type { RawData } from "../types"
 
-export enum Type {
-  upload,
-  selectSheet,
-  selectHeader,
-  matchColumns,
-  validateData,
+export enum StepType {
+  upload = "upload",
+  selectSheet = "selectSheet",
+  selectHeader = "selectHeader",
+  matchColumns = "matchColumns",
+  validateData = "validateData",
 }
 export type StepState =
   | {
-      type: Type.upload
+      type: StepType.upload
     }
   | {
-      type: Type.selectSheet
+      type: StepType.selectSheet
       workbook: XLSX.WorkBook
     }
   | {
-      type: Type.selectHeader
+      type: StepType.selectHeader
       data: RawData[]
     }
   | {
-      type: Type.matchColumns
+      type: StepType.matchColumns
       data: RawData[]
       headerValues: RawData
     }
   | {
-      type: Type.validateData
+      type: StepType.validateData
       data: any[]
     }
 
@@ -46,12 +46,12 @@ interface Props {
 
 export const UploadFlow = ({ nextStep }: Props) => {
   const { initialStepState } = useRsi()
-  const [state, setState] = useState<StepState>(initialStepState || { type: Type.upload })
+  const [state, setState] = useState<StepState>(initialStepState || { type: StepType.upload })
   const { maxRecords, translations, uploadStepHook, selectHeaderStepHook, matchColumnsStepHook } = useRsi()
   const toast = useToast()
 
   switch (state.type) {
-    case Type.upload:
+    case StepType.upload:
       return (
         <UploadStep
           onContinue={async (workbook) => {
@@ -69,17 +69,17 @@ export const UploadFlow = ({ nextStep }: Props) => {
               }
               const mappedWorkbook = await uploadStepHook(mapWorkbook(workbook))
               setState({
-                type: Type.selectHeader,
+                type: StepType.selectHeader,
                 data: mappedWorkbook,
               })
               nextStep()
             } else {
-              setState({ type: Type.selectSheet, workbook })
+              setState({ type: StepType.selectSheet, workbook })
             }
           }}
         />
       )
-    case Type.selectSheet:
+    case StepType.selectSheet:
       return (
         <SelectSheetStep
           sheetNames={state.workbook.SheetNames}
@@ -96,44 +96,44 @@ export const UploadFlow = ({ nextStep }: Props) => {
             }
             const mappedWorkbook = await uploadStepHook(mapWorkbook(state.workbook, sheetName))
             setState({
-              type: Type.selectHeader,
+              type: StepType.selectHeader,
               data: mappedWorkbook,
             })
             nextStep()
           }}
         />
       )
-    case Type.selectHeader:
+    case StepType.selectHeader:
       return (
         <SelectHeaderStep
           data={state.data}
           onContinue={async (...args) => {
             const { data, headerValues } = await selectHeaderStepHook(...args)
             setState({
-              type: Type.matchColumns,
+              type: StepType.matchColumns,
               data,
               headerValues,
             })
             nextStep()
           }}
         />
       )
-    case Type.matchColumns:
+    case StepType.matchColumns:
       return (
         <MatchColumnsStep
           data={state.data}
           headerValues={state.headerValues}
           onContinue={async (values, rawData, columns) => {
             const data = await matchColumnsStepHook(values, rawData, columns)
             setState({
-              type: Type.validateData,
+              type: StepType.validateData,
               data,
             })
             nextStep()
           }}
         />
       )
-    case Type.validateData:
+    case StepType.validateData:
       return <ValidationStep initialData={state.data} />
     default:
       return <Progress isIndeterminate />