+>(({ className, ...props }, ref) => (
+
+))
+ScrollArea.displayName = "ScrollArea"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, ScrollArea }
diff --git a/inventory/src/components/ui/code.tsx b/inventory/src/components/ui/code.tsx
new file mode 100644
index 0000000..8f22dbf
--- /dev/null
+++ b/inventory/src/components/ui/code.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface CodeProps extends React.HTMLAttributes {}
+
+const Code = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Code.displayName = "Code"
+
+export { Code }
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/LICENSE b/inventory/src/lib/react-spreadsheet-import/LICENSE
new file mode 100644
index 0000000..ab42a11
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 UGNIS,
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/inventory/src/lib/react-spreadsheet-import/README.md b/inventory/src/lib/react-spreadsheet-import/README.md
new file mode 100644
index 0000000..7f1d4f8
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/README.md
@@ -0,0 +1,341 @@
+
+ +A component used for importing XLS / XLSX / CSV documents built with [**Chakra UI**](https://chakra-ui.com). Import flow combines: + +- 📥 Uploader +- ⚙️ Parser +- 📊 File preview +- 🧪 UI for column mapping +- ✏ UI for validating and editing data + +✨ [**Demo**](https://ugnissoftware.github.io/react-spreadsheet-import/iframe.html?id=react-spreadsheet-import--basic&args=&viewMode=story) ✨ +
+ +## Features + +- Custom styles - edit Chakra UI theme to match your project's styles 🎨 +- Custom validation rules - make sure valid data is being imported, easily spot and correct errors +- Hooks - alter raw data after upload or make adjustments on data changes +- Auto-mapping columns - automatically map most likely value to your template values, e.g. `name` -> `firstName` +
+ + + +## Figma + +We provide full figma designs. You can copy the designs +[here](https://www.figma.com/community/file/1080776795891439629) + +## Getting started + +```sh +npm i react-spreadsheet-import +``` + +Using the component: (it's up to you when the flow is open and what you do on submit with the imported data) + +```tsx +import { ReactSpreadsheetImport } from "react-spreadsheet-import"; + +
+```
+
+### Fields
+
+Fields describe what data you are trying to collect.
+
+```tsx
+const fields = [
+ {
+ // Visible in table header and when matching columns.
+ label: "Name",
+ // This is the key used for this field when we call onSubmit.
+ key: "name",
+ // Allows for better automatic column matching. Optional.
+ alternateMatches: ["first name", "first"],
+ // Used when editing and validating information.
+ fieldType: {
+ // There are 3 types - "input" / "checkbox" / "select".
+ type: "input",
+ },
+ // Used in the first step to provide an example of what data is expected in this field. Optional.
+ example: "Stephanie",
+ // Can have multiple validations that are visible in Validation Step table.
+ validations: [
+ {
+ // Can be "required" / "unique" / "regex"
+ rule: "required",
+ errorMessage: "Name is required",
+ // There can be "info" / "warning" / "error" levels. Optional. Default "error".
+ level: "error",
+ },
+ ],
+ },
+] as const
+```
+
+## Optional Props
+
+### Hooks
+
+You can transform and validate data with custom hooks. There are hooks after each step:
+
+- **uploadStepHook** - runs only once after uploading the file.
+- **selectHeaderStepHook** - runs only once after selecting the header row in spreadsheet.
+- **matchColumnsStepHook** - runs only once after column matching. Operations on data that are expensive should be done here.
+
+The last step - validation step has 2 unique hooks that run only in that step with different performance tradeoffs:
+
+- **tableHook** - runs at the start and on any change. Runs on all rows. Very expensive, but can change rows that depend on other rows.
+- **rowHook** - runs at the start and on any row change. Runs only on the rows changed. Fastest, most validations and transformations should be done here.
+
+Example:
+
+```tsx
+ {
+ // Validation
+ if (data.name === "John") {
+ addError("name", { message: "No Johns allowed", level: "info" })
+ }
+ // Transformation
+ return { ...data, name: "Not John" }
+ // Sorry John
+ }}
+/>
+```
+
+### Initial state
+
+In rare case when you need to skip the beginning of the 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
+
+ // 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";
+
+
+
+2.) Change all components of the same type, like all Buttons, at the same time
+
+```jsx
+
+
+3.) Change components specifically in each Step.
+```jsx
+ 
+
+Underneath we use Chakra-UI, you can send in a custom theme for us to apply. Read more about themes [here](https://chakra-ui.com/docs/styled-system/theming/theme)
+
+### Changing text (translations)
+
+You can change any text in the flow:
+
+```tsx
+/src/$1"
+ },
+ "modulePathIgnorePatterns": [
+ "/e2e/"
+ ],
+ "transformIgnorePatterns": [
+ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+ ],
+ "setupFiles": [
+ "./src/tests/setup.ts"
+ ],
+ "globals": {
+ "ts-jest": {
+ "tsconfig": "tsconfig.json"
+ }
+ },
+ "watchPlugins": [
+ "jest-watch-typeahead/filename",
+ "jest-watch-typeahead/testname"
+ ]
+ },
+ "readme": "ERROR: No README data found!"
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/ReactSpreadsheetImport.tsx b/inventory/src/lib/react-spreadsheet-import/src/ReactSpreadsheetImport.tsx
new file mode 100644
index 0000000..987bca6
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/ReactSpreadsheetImport.tsx
@@ -0,0 +1,41 @@
+import merge from "lodash/merge"
+
+import { Steps } from "./steps/Steps"
+import { rtlThemeSupport, themeOverrides } from "./theme"
+import { Providers } from "./components/Providers"
+import type { RsiProps } from "./types"
+import { ModalWrapper } from "./components/ModalWrapper"
+import { translations } from "./translationsRSIProps"
+
+export const defaultTheme = themeOverrides
+
+export const defaultRSIProps: Partial> = {
+ autoMapHeaders: true,
+ autoMapSelectValues: false,
+ allowInvalidSubmit: true,
+ autoMapDistance: 2,
+ isNavigationEnabled: false,
+ translations: translations,
+ uploadStepHook: async (value) => value,
+ selectHeaderStepHook: async (headerValues, data) => ({ headerValues, data }),
+ matchColumnsStepHook: async (table) => table,
+ dateFormat: "yyyy-mm-dd", // ISO 8601,
+ parseRaw: true,
+} as const
+
+export const ReactSpreadsheetImport = (propsWithoutDefaults: RsiProps) => {
+ const props = merge({}, defaultRSIProps, propsWithoutDefaults)
+ const mergedTranslations =
+ props.translations !== translations ? merge(translations, props.translations) : translations
+ const mergedThemes = props.rtl
+ ? merge(defaultTheme, rtlThemeSupport, props.customTheme)
+ : merge(defaultTheme, props.customTheme)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/ConfirmCloseAlert.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/ConfirmCloseAlert.tsx
new file mode 100644
index 0000000..6865cc7
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/ConfirmCloseAlert.tsx
@@ -0,0 +1,41 @@
+import {
+ AlertDialog,
+ AlertDialogBody,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogContent,
+ AlertDialogOverlay,
+ Button,
+} from "@chakra-ui/react"
+import { useRef } from "react"
+import { useRsi } from "../../hooks/useRsi"
+
+interface Props {
+ isOpen: boolean
+ onClose: () => void
+ onConfirm: () => void
+}
+
+export const ConfirmCloseAlert = ({ isOpen, onClose, onConfirm }: Props) => {
+ const { translations } = useRsi()
+ const cancelRef = useRef(null)
+
+ return (
+
+
+
+ {translations.alerts.confirmClose.headerTitle}
+ {translations.alerts.confirmClose.bodyText}
+
+
+
+
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/SubmitDataAlert.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/SubmitDataAlert.tsx
new file mode 100644
index 0000000..8ae5719
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/SubmitDataAlert.tsx
@@ -0,0 +1,49 @@
+import {
+ AlertDialog,
+ AlertDialogBody,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogContent,
+ AlertDialogOverlay,
+ Button,
+} from "@chakra-ui/react"
+import { useRef } from "react"
+import { useRsi } from "../../hooks/useRsi"
+
+interface Props {
+ isOpen: boolean
+ onClose: () => void
+ onConfirm: () => void
+}
+
+export const SubmitDataAlert = ({ isOpen, onClose, onConfirm }: Props) => {
+ const { allowInvalidSubmit, translations } = useRsi()
+ const cancelRef = useRef(null)
+
+ return (
+
+
+
+
+ {translations.alerts.submitIncomplete.headerTitle}
+
+
+ {allowInvalidSubmit
+ ? translations.alerts.submitIncomplete.bodyText
+ : translations.alerts.submitIncomplete.bodyTextSubmitForbidden}
+
+
+
+ {allowInvalidSubmit && (
+
+ )}
+
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/UnmatchedFieldsAlert.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/UnmatchedFieldsAlert.tsx
new file mode 100644
index 0000000..9f41e51
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Alerts/UnmatchedFieldsAlert.tsx
@@ -0,0 +1,57 @@
+import {
+ AlertDialog,
+ AlertDialogBody,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogContent,
+ AlertDialogOverlay,
+ Button,
+ Text,
+ Box,
+} from "@chakra-ui/react"
+import { useRef } from "react"
+import { useRsi } from "../../hooks/useRsi"
+
+interface Props {
+ isOpen: boolean
+ onClose: () => void
+ onConfirm: () => void
+ fields: string[]
+}
+
+export const UnmatchedFieldsAlert = ({ isOpen, onClose, onConfirm, fields }: Props) => {
+ const { allowInvalidSubmit, translations } = useRsi()
+ const cancelRef = useRef(null)
+
+ return (
+
+
+
+
+ {translations.alerts.unmatchedRequiredFields.headerTitle}
+
+
+ {translations.alerts.unmatchedRequiredFields.bodyText}
+
+ {translations.alerts.unmatchedRequiredFields.listTitle}
+
+ {" "}
+ {fields.join(", ")}
+
+
+
+
+
+ {allowInvalidSubmit && (
+
+ )}
+
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/ContinueButton.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/ContinueButton.tsx
new file mode 100644
index 0000000..2215aef
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/ContinueButton.tsx
@@ -0,0 +1,33 @@
+import { Button, ModalFooter, useStyleConfig } from "@chakra-ui/react"
+import { themeOverrides } from "../theme"
+
+type ContinueButtonProps = {
+ onContinue: (val: any) => void
+ onBack?: () => void
+ title: string
+ backTitle?: string
+ isLoading?: boolean
+}
+
+export const ContinueButton = ({ onContinue, onBack, title, backTitle, isLoading }: ContinueButtonProps) => {
+ const styles = useStyleConfig("Modal") as (typeof themeOverrides)["components"]["Modal"]["baseStyle"]
+ const nextButtonMobileWidth = onBack ? "8rem" : "100%"
+ return (
+
+ {onBack && (
+
+ )}
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/FadingWrapper.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/FadingWrapper.tsx
new file mode 100644
index 0000000..537dc75
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/FadingWrapper.tsx
@@ -0,0 +1,25 @@
+import { Box } from "@chakra-ui/react"
+
+type FadingWrapperProps = {
+ gridColumn: string
+ gridRow: string
+}
+
+export const FadingWrapper = ({ gridColumn, gridRow }: FadingWrapperProps) => (
+ <>
+ setShowModal(false)}
+ onConfirm={() => {
+ setShowModal(false)
+ onClose()
+ }}
+ />
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Providers.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Providers.tsx
new file mode 100644
index 0000000..2599541
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Providers.tsx
@@ -0,0 +1,33 @@
+import { ChakraProvider, extendTheme } from "@chakra-ui/react"
+import { createContext } from "react"
+import type { RsiProps } from "../types"
+import type { CustomTheme } from "../theme"
+
+export const RsiContext = createContext({} as any)
+
+type ProvidersProps = {
+ children: React.ReactNode
+ theme: CustomTheme
+ rsiValues: RsiProps
+}
+
+export const rootId = "chakra-modal-rsi"
+
+export const Providers = ({ children, theme, rsiValues }: ProvidersProps) => {
+ const mergedTheme = extendTheme(theme)
+
+ if (!rsiValues.fields) {
+ throw new Error("Fields must be provided to react-spreadsheet-import")
+ }
+
+ return (
+
+
+ {/* cssVarsRoot used to override RSI defaultTheme but not the rest of chakra defaultTheme */}
+
+ {children}
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MatchColumnSelect.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MatchColumnSelect.tsx
new file mode 100644
index 0000000..7b33edd
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MatchColumnSelect.tsx
@@ -0,0 +1,30 @@
+import { Select } from "chakra-react-select"
+import type { SelectOption } from "../../types"
+import { customComponents } from "./MenuPortal"
+import { useStyleConfig } from "@chakra-ui/react"
+import type { Styles } from "../../steps/MatchColumnsStep/components/ColumnGrid"
+interface Props {
+ onChange: (value: SelectOption | null) => void
+ value?: SelectOption
+ options: readonly SelectOption[]
+ placeholder?: string
+ name?: string
+}
+
+export const MatchColumnSelect = ({ onChange, value, options, placeholder, name }: Props) => {
+ const styles = useStyleConfig("MatchColumnsStep") as Styles
+ return (
+
+ value={value || null}
+ colorScheme="gray"
+ useBasicStyles
+ onChange={onChange}
+ placeholder={placeholder}
+ options={options}
+ chakraStyles={styles.select}
+ menuPosition="fixed"
+ components={customComponents}
+ aria-label={name}
+ />
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MenuPortal.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MenuPortal.tsx
new file mode 100644
index 0000000..b39b8db
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/MenuPortal.tsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useLayoutEffect, useState } from "react"
+import ReactDOM from "react-dom"
+import { Box, useTheme } from "@chakra-ui/react"
+import { usePopper } from "@chakra-ui/popper"
+import { rootId } from "../Providers"
+import { useRsi } from "../../hooks/useRsi"
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+ const wrapperElement = document.createElement("div")
+ wrapperElement.setAttribute("id", wrapperId)
+ document.body.appendChild(wrapperElement)
+ return wrapperElement
+}
+
+export const SELECT_DROPDOWN_ID = "react-select-dropdown-wrapper"
+
+interface PortalProps {
+ controlElement: HTMLDivElement | null
+ children: React.ReactNode
+}
+
+const MenuPortal = (props: PortalProps) => {
+ const theme = useTheme()
+ const { rtl } = useRsi()
+ const { popperRef, referenceRef } = usePopper({
+ strategy: "fixed",
+ matchWidth: true,
+ })
+ const [wrapperElement, setWrapperElement] = useState(null)
+
+ useLayoutEffect(() => {
+ let element = document.getElementById(SELECT_DROPDOWN_ID)
+ let systemCreated = false
+ if (!element) {
+ systemCreated = true
+ element = createWrapperAndAppendToBody(SELECT_DROPDOWN_ID)
+ }
+ setWrapperElement(element)
+
+ return () => {
+ if (systemCreated && element?.parentNode) {
+ element.parentNode.removeChild(element)
+ }
+ }
+ }, [])
+
+ useEffect(() => {
+ referenceRef(props.controlElement)
+ }, [props.controlElement, referenceRef])
+
+ // wrapperElement state will be null on very first render.
+ if (wrapperElement === null) return null
+
+ return ReactDOM.createPortal(
+
+ {props.children}
+ ,
+ wrapperElement,
+ )
+}
+
+export const customComponents = {
+ MenuPortal,
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Selects/TableSelect.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/TableSelect.tsx
new file mode 100644
index 0000000..886a31d
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Selects/TableSelect.tsx
@@ -0,0 +1,33 @@
+import { rootId } from "../Providers"
+import { Select } from "chakra-react-select"
+import type { SelectOption } from "../../types"
+import { useStyleConfig } from "@chakra-ui/react"
+import type { themeOverrides } from "../../theme"
+
+interface Props {
+ onChange: (value: SelectOption | null) => void
+ value?: SelectOption
+ options: readonly SelectOption[]
+}
+
+export const TableSelect = ({ onChange, value, options }: Props) => {
+ const styles = useStyleConfig(
+ "ValidationStep",
+ ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
+ return (
+
+ autoFocus
+ useBasicStyles
+ size="sm"
+ value={value}
+ onChange={onChange}
+ placeholder=" "
+ closeMenuOnScroll
+ menuPosition="fixed"
+ menuIsOpen
+ menuPortalTarget={document.getElementById(rootId)}
+ options={options}
+ chakraStyles={styles.select}
+ />
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/Table.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/Table.tsx
new file mode 100644
index 0000000..083d39c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/components/Table.tsx
@@ -0,0 +1,23 @@
+import type { DataGridProps, Column } from "react-data-grid"
+import DataGrid from "react-data-grid"
+import { useRsi } from "../hooks/useRsi"
+
+export type { Column }
+
+export type Props = DataGridProps & {
+ rowHeight?: number
+ hiddenHeader?: boolean
+ className?: string
+ style?: React.CSSProperties
+}
+
+export const Table = ({ className, ...props }: Props) => {
+ const { rtl } = useRsi()
+ return (
+ () =>
+ useContext, keyof typeof defaultRSIProps> & { translations: Translations }>(RsiContext)
diff --git a/inventory/src/lib/react-spreadsheet-import/src/index.ts b/inventory/src/lib/react-spreadsheet-import/src/index.ts
new file mode 100644
index 0000000..a54ad22
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/index.ts
@@ -0,0 +1,2 @@
+export { StepType } from "./steps/UploadFlow"
+export { ReactSpreadsheetImport } from "./ReactSpreadsheetImport"
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
new file mode 100644
index 0000000..4b79c1d
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/MatchColumnsStep.tsx
@@ -0,0 +1,196 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useToast } from "@chakra-ui/react"
+import { UserTableColumn } from "./components/UserTableColumn"
+import { useRsi } from "../../hooks/useRsi"
+import { TemplateColumn } from "./components/TemplateColumn"
+import { ColumnGrid } from "./components/ColumnGrid"
+import { setColumn } from "./utils/setColumn"
+import { setIgnoreColumn } from "./utils/setIgnoreColumn"
+import { setSubColumn } from "./utils/setSubColumn"
+import { normalizeTableData } from "./utils/normalizeTableData"
+import type { Field, RawData } from "../../types"
+import { getMatchedColumns } from "./utils/getMatchedColumns"
+import { UnmatchedFieldsAlert } from "../../components/Alerts/UnmatchedFieldsAlert"
+import { findUnmatchedRequiredFields } from "./utils/findUnmatchedRequiredFields"
+
+export type MatchColumnsProps = {
+ data: RawData[]
+ headerValues: RawData
+ onContinue: (data: any[], rawData: RawData[], columns: Columns) => void
+ onBack?: () => void
+}
+
+export enum ColumnType {
+ empty,
+ ignored,
+ matched,
+ matchedCheckbox,
+ matchedSelect,
+ matchedSelectOptions,
+}
+
+export type MatchedOptions = {
+ entry: string
+ value: T
+}
+
+type EmptyColumn = { type: ColumnType.empty; index: number; header: string }
+type IgnoredColumn = { type: ColumnType.ignored; index: number; header: string }
+type MatchedColumn = { type: ColumnType.matched; index: number; header: string; value: T }
+type MatchedSwitchColumn = { type: ColumnType.matchedCheckbox; index: number; header: string; value: T }
+export type MatchedSelectColumn = {
+ type: ColumnType.matchedSelect
+ index: number
+ header: string
+ value: T
+ matchedOptions: Partial>[]
+}
+export type MatchedSelectOptionsColumn = {
+ type: ColumnType.matchedSelectOptions
+ index: number
+ header: string
+ value: T
+ matchedOptions: MatchedOptions[]
+}
+
+export type Column =
+ | EmptyColumn
+ | IgnoredColumn
+ | MatchedColumn
+ | MatchedSwitchColumn
+ | MatchedSelectColumn
+ | MatchedSelectOptionsColumn
+
+export type Columns = Column[]
+
+export const MatchColumnsStep = ({
+ data,
+ headerValues,
+ onContinue,
+ onBack,
+}: MatchColumnsProps) => {
+ const toast = useToast()
+ const dataExample = data.slice(0, 2)
+ const { fields, autoMapHeaders, autoMapSelectValues, autoMapDistance, translations } = useRsi()
+ const [isLoading, setIsLoading] = useState(false)
+ const [columns, setColumns] = useState>(
+ // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
+ ([...headerValues] as string[]).map((value, index) => ({ type: ColumnType.empty, index, header: value ?? "" })),
+ )
+ const [showUnmatchedFieldsAlert, setShowUnmatchedFieldsAlert] = useState(false)
+
+ const onChange = useCallback(
+ (value: T, columnIndex: number) => {
+ const field = fields.find((field) => field.key === value) as unknown as Field
+ const existingFieldIndex = columns.findIndex((column) => "value" in column && column.value === field.key)
+ setColumns(
+ columns.map>((column, index) => {
+ columnIndex === index ? setColumn(column, field, data) : column
+ if (columnIndex === index) {
+ return setColumn(column, field, data, autoMapSelectValues)
+ } else if (index === existingFieldIndex) {
+ toast({
+ status: "warning",
+ variant: "left-accent",
+ position: "bottom-left",
+ title: translations.matchColumnsStep.duplicateColumnWarningTitle,
+ description: translations.matchColumnsStep.duplicateColumnWarningDescription,
+ isClosable: true,
+ })
+ return setColumn(column)
+ } else {
+ return column
+ }
+ }),
+ )
+ },
+ [
+ autoMapSelectValues,
+ columns,
+ data,
+ fields,
+ toast,
+ translations.matchColumnsStep.duplicateColumnWarningDescription,
+ translations.matchColumnsStep.duplicateColumnWarningTitle,
+ ],
+ )
+
+ const onIgnore = useCallback(
+ (columnIndex: number) => {
+ setColumns(columns.map((column, index) => (columnIndex === index ? setIgnoreColumn(column) : column)))
+ },
+ [columns, setColumns],
+ )
+
+ const onRevertIgnore = useCallback(
+ (columnIndex: number) => {
+ setColumns(columns.map((column, index) => (columnIndex === index ? setColumn(column) : column)))
+ },
+ [columns, setColumns],
+ )
+
+ const onSubChange = useCallback(
+ (value: string, columnIndex: number, entry: string) => {
+ setColumns(
+ columns.map((column, index) =>
+ columnIndex === index && "matchedOptions" in column ? setSubColumn(column, entry, value) : column,
+ ),
+ )
+ },
+ [columns, setColumns],
+ )
+ const unmatchedRequiredFields = useMemo(() => findUnmatchedRequiredFields(fields, columns), [fields, columns])
+
+ const handleOnContinue = useCallback(async () => {
+ if (unmatchedRequiredFields.length > 0) {
+ setShowUnmatchedFieldsAlert(true)
+ } else {
+ setIsLoading(true)
+ await onContinue(normalizeTableData(columns, data, fields), data, columns)
+ setIsLoading(false)
+ }
+ }, [unmatchedRequiredFields.length, onContinue, columns, data, fields])
+
+ const handleAlertOnContinue = useCallback(async () => {
+ setShowUnmatchedFieldsAlert(false)
+ setIsLoading(true)
+ await onContinue(normalizeTableData(columns, data, fields), data, columns)
+ setIsLoading(false)
+ }, [onContinue, columns, data, fields])
+
+ useEffect(
+ () => {
+ if (autoMapHeaders) {
+ setColumns(getMatchedColumns(columns, fields, data, autoMapDistance, autoMapSelectValues))
+ }
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [],
+ )
+
+ return (
+ <>
+ setShowUnmatchedFieldsAlert(false)}
+ fields={unmatchedRequiredFields}
+ onConfirm={handleAlertOnContinue}
+ />
+ (
+ row[column.index])}
+ />
+ )}
+ templateColumn={(column) => = {
+ columns: Columns
+ userColumn: (column: Column) => React.ReactNode
+ templateColumn: (column: Column) => React.ReactNode
+ onContinue: (val: Record[]) => void
+ onBack?: () => void
+ isLoading: boolean
+}
+
+export type Styles = (typeof themeOverrides)["components"]["MatchColumnsStep"]["baseStyle"]
+
+export const ColumnGrid = ({
+ columns,
+ userColumn,
+ templateColumn,
+ onContinue,
+ onBack,
+ isLoading,
+}: ColumnGridProps) => {
+ const { translations } = useRsi()
+ const styles = useStyleConfig("MatchColumnsStep") as Styles
+
+ return (
+ <>
+
+ {translations.matchColumnsStep.title}
+
+
+ {translations.matchColumnsStep.userTableTitle}
+
+ {columns.map((column, index) => (
+
+ {userColumn(column)}
+
+ ))}
+
+ {translations.matchColumnsStep.templateTitle}
+
+
+ {templateColumn(column)}
+
+ ))}
+
+
+
+ {props.isChecked && (
+
+
+ )}
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/SubMatchingSelect.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/SubMatchingSelect.tsx
new file mode 100644
index 0000000..fbc3bc3
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/SubMatchingSelect.tsx
@@ -0,0 +1,32 @@
+import { Box, Text, useStyleConfig } from "@chakra-ui/react"
+import { MatchColumnSelect } from "../../../components/Selects/MatchColumnSelect"
+import { getFieldOptions } from "../utils/getFieldOptions"
+import { useRsi } from "../../../hooks/useRsi"
+import type { MatchedOptions, MatchedSelectColumn, MatchedSelectOptionsColumn } from "../MatchColumnsStep"
+import type { Styles } from "./ColumnGrid"
+
+interface Props {
+ option: MatchedOptions | Partial>
+ column: MatchedSelectColumn | MatchedSelectOptionsColumn
+ onSubChange: (val: T, index: number, option: string) => void
+}
+
+export const SubMatchingSelect = ({ option, column, onSubChange }: Props) => {
+ const styles = useStyleConfig("MatchColumnsStep") as Styles
+ const { translations, fields } = useRsi()
+ const options = getFieldOptions(fields, column.value)
+ const value = options.find((opt) => opt.value == option.value)
+
+ return (
+
+ {option.entry}
+ onSubChange(value?.value as T, column.index, option.entry!)}
+ options={options}
+ name={option.entry}
+ />
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx
new file mode 100644
index 0000000..4cc1a0d
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/TemplateColumn.tsx
@@ -0,0 +1,96 @@
+import {
+ Flex,
+ Text,
+ Accordion,
+ AccordionItem,
+ AccordionButton,
+ AccordionIcon,
+ Box,
+ AccordionPanel,
+ useStyleConfig,
+} from "@chakra-ui/react"
+import { useRsi } from "../../../hooks/useRsi"
+import type { Column } from "../MatchColumnsStep"
+import { ColumnType } from "../MatchColumnsStep"
+import { MatchIcon } from "./MatchIcon"
+import type { Fields } from "../../../types"
+import type { Translations } from "../../../translationsRSIProps"
+import { MatchColumnSelect } from "../../../components/Selects/MatchColumnSelect"
+import { SubMatchingSelect } from "./SubMatchingSelect"
+import type { Styles } from "./ColumnGrid"
+
+const getAccordionTitle = (fields: Fields, column: Column, translations: Translations) => {
+ const fieldLabel = fields.find((field) => "value" in column && field.key === column.value)!.label
+ return `${translations.matchColumnsStep.matchDropdownTitle} ${fieldLabel} (${
+ "matchedOptions" in column && column.matchedOptions.filter((option) => !option.value).length
+ } ${translations.matchColumnsStep.unmatched})`
+}
+
+type TemplateColumnProps = {
+ onChange: (val: T, index: number) => void
+ onSubChange: (val: T, index: number, option: string) => void
+ column: Column
+}
+
+export const TemplateColumn = ({ column, onChange, onSubChange }: TemplateColumnProps) => {
+ const { translations, fields } = useRsi()
+ const styles = useStyleConfig("MatchColumnsStep") as Styles
+ const isIgnored = column.type === ColumnType.ignored
+ const isChecked =
+ column.type === ColumnType.matched ||
+ column.type === ColumnType.matchedCheckbox ||
+ column.type === ColumnType.matchedSelectOptions
+ const isSelect = "matchedOptions" in column
+ const selectOptions = fields.map(({ label, key }) => ({ value: key, label }))
+ const selectValue = selectOptions.find(({ value }) => "value" in column && column.value === value)
+
+ return (
+
+ {isIgnored ? (
+ {translations.matchColumnsStep.ignoredColumnText}
+ ) : (
+ <>
+
+
+ onChange(value?.value as T, column.index)}
+ options={selectOptions}
+ name={column.header}
+ />
+
+
+ {isSelect && (
+
+
+
+
+
+
+ {getAccordionTitle(fields, column, translations)}
+
+
+
+
+ {column.matchedOptions.map((option) => (
+
+
+
+
+ )}
+
+ )}
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/UserTableColumn.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/UserTableColumn.tsx
new file mode 100644
index 0000000..fda537a
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/components/UserTableColumn.tsx
@@ -0,0 +1,54 @@
+import { Box, Flex, IconButton, Text, useStyleConfig } from "@chakra-ui/react"
+import { CgClose, CgUndo } from "react-icons/cg"
+import type { Column } from "../MatchColumnsStep"
+import { ColumnType } from "../MatchColumnsStep"
+import { dataAttr } from "@chakra-ui/utils"
+import type { Styles } from "./ColumnGrid"
+import type { RawData } from "../../../types"
+
+type UserTableColumnProps = {
+ column: Column
+ entries: RawData
+ onIgnore: (index: number) => void
+ onRevertIgnore: (index: number) => void
+}
+
+export const UserTableColumn = (props: UserTableColumnProps) => {
+ const styles = useStyleConfig("MatchColumnsStep") as Styles
+ const {
+ column: { header, index, type },
+ entries,
+ onIgnore,
+ onRevertIgnore,
+ } = props
+ const isIgnored = type === ColumnType.ignored
+ return (
+
+
+
+ {header}
+
+ {type === ColumnType.ignored ? (
+
+ {entries.map((entry, index) => (
+
+ {entry}
+
+ ))}
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/stories/MatchColumns.stories.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/stories/MatchColumns.stories.tsx
new file mode 100644
index 0000000..e2b335e
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/stories/MatchColumns.stories.tsx
@@ -0,0 +1,33 @@
+import { defaultTheme } from "../../../ReactSpreadsheetImport"
+import { MatchColumnsStep } from "../MatchColumnsStep"
+import { Providers } from "../../../components/Providers"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+
+export default {
+ title: "Match Columns Steps",
+ parameters: {
+ layout: "fullscreen",
+ },
+}
+
+const mockData = [
+ ["id", "first_name", "last_name", "email", "gender", "ip_address"],
+ ["2", "Geno", "Gencke", "ggencke0@tinypic.com", "Female", "17.204.180.40"],
+ ["3", "Bertram", "Twyford", "btwyford1@seattletimes.com", "Genderqueer", "188.98.2.13"],
+ ["4", "Tersina", "Isacke", "tisacke2@edublogs.org", "Non-binary", "237.69.180.31"],
+ ["5", "Yoko", "Guilliland", "yguilliland3@elegantthemes.com", "Male", "179.123.237.119"],
+ ["6", "Freida", "Fearns", "ffearns4@fotki.com", "Male", "184.48.15.1"],
+ ["7", "Mildrid", "Mount", "mmount5@last.fm", "Male", "26.97.160.103"],
+ ["8", "Jolene", "Darlington", "jdarlington6@jalbum.net", "Agender", "172.14.232.84"],
+ ["9", "Craig", "Dickie", "cdickie7@virginia.edu", "Male", "143.248.220.47"],
+ ["10", "Jere", "Shier", "jshier8@comcast.net", "Agender", "10.143.62.161"],
+]
+
+export const Basic = () => (
+
+ {}}>
+ {}} />
+
+
+)
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx
new file mode 100644
index 0000000..ec1a3ea
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/tests/MatchColumnsStep.test.tsx
@@ -0,0 +1,870 @@
+import "@testing-library/jest-dom"
+import { render, waitFor, screen } from "@testing-library/react"
+import { MatchColumnsStep } from "../MatchColumnsStep"
+import { defaultTheme, ReactSpreadsheetImport } from "../../../ReactSpreadsheetImport"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+import userEvent from "@testing-library/user-event"
+import type { Fields } from "../../../types"
+import selectEvent from "react-select-event"
+import { translations } from "../../../translationsRSIProps"
+import { SELECT_DROPDOWN_ID } from "../../../components/Selects/MenuPortal"
+import { StepType } from "../../UploadFlow"
+
+const fields: Fields = [
+ {
+ label: "Name",
+ key: "name",
+ fieldType: {
+ type: "input",
+ },
+ example: "Stephanie",
+ },
+ {
+ label: "Mobile Phone",
+ key: "mobile",
+ fieldType: {
+ type: "input",
+ },
+ example: "+12323423",
+ },
+ {
+ label: "Is cool",
+ key: "is_cool",
+ fieldType: {
+ type: "checkbox",
+ },
+ example: "No",
+ },
+]
+
+const CONTINUE_BUTTON = "Next"
+const MUTATED_ENTRY = "mutated entry"
+const ERROR_MESSAGE = "Something happened"
+
+describe("Match Columns automatic matching", () => {
+ test("AutoMatch column and click next", async () => {
+ const header = ["namezz", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+ // finds only names with automatic matching
+ const result = [{ name: data[0][0] }, { name: data[1][0] }, { name: data[2][0] }]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatching disabled does not match any columns", async () => {
+ const header = ["Name", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+ // finds only names with automatic matching
+ const result = [{}, {}, {}]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatching exact values", async () => {
+ const header = ["Name", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+ // finds only names with automatic matching
+ const result = [{ name: data[0][0] }, { name: data[1][0] }, { name: data[2][0] }]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatches only one value", async () => {
+ const header = ["first name", "name", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+ // finds only names with automatic matching
+ const result = [{ name: data[0][1] }, { name: data[1][1] }, { name: data[2][1] }]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ alternateMatches: ["first name"],
+ fieldType: {
+ type: "input",
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatches select values on mount", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const data = [
+ // match by option label
+ [OPTION_RESULT_ONE, "123", "j@j.com"],
+ // match by option value
+ [OPTION_RESULT_TWO_VALUE, "333", "dane@bane.com"],
+ // do not match
+ [OPTION_RESULT_THREE, "534", "kane@linch.com"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ ]
+ // finds only names with automatic matching
+ const result = [{ name: OPTION_RESULT_ONE_VALUE }, { name: OPTION_RESULT_TWO_VALUE }, { name: undefined }]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ alternateMatches: ["first name"],
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ expect(screen.getByText(/1 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Does not auto match select values when autoMapSelectValues:false", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const data = [
+ // match by option label
+ [OPTION_RESULT_ONE, "123", "j@j.com"],
+ // match by option value
+ [OPTION_RESULT_TWO_VALUE, "333", "dane@bane.com"],
+ // do not match
+ [OPTION_RESULT_THREE, "534", "kane@linch.com"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ ]
+ const result = [{ name: undefined }, { name: undefined }, { name: undefined }]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ alternateMatches: ["first name"],
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ expect(screen.getByText(/3 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("AutoMatches select values on select", async () => {
+ const header = ["first name", "count", "Email"]
+ const OPTION_RESULT_ONE = "John"
+ const OPTION_RESULT_ONE_VALUE = "1"
+ const OPTION_RESULT_TWO = "Dane"
+ const OPTION_RESULT_TWO_VALUE = "2"
+ const OPTION_RESULT_THREE = "Kane"
+ const data = [
+ // match by option label
+ [OPTION_RESULT_ONE, "123", "j@j.com"],
+ // match by option value
+ [OPTION_RESULT_TWO_VALUE, "333", "dane@bane.com"],
+ // do not match
+ [OPTION_RESULT_THREE, "534", "kane@linch.com"],
+ ]
+ const options = [
+ { label: OPTION_RESULT_ONE, value: OPTION_RESULT_ONE_VALUE },
+ { label: OPTION_RESULT_TWO, value: OPTION_RESULT_TWO_VALUE },
+ ]
+ // finds only names with automatic matching
+ const result = [{ name: OPTION_RESULT_ONE_VALUE }, { name: OPTION_RESULT_TWO_VALUE }, { name: undefined }]
+
+ const alternativeFields = [
+ {
+ label: "Name",
+ key: "name",
+ fieldType: {
+ type: "select",
+ options,
+ },
+ example: "Stephanie",
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ await selectEvent.select(screen.getByLabelText(header[0]), alternativeFields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ expect(screen.getByText(/1 Unmatched/)).toBeInTheDocument()
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Boolean-like values are returned as Booleans", async () => {
+ const header = ["namezz", "is_cool", "Email"]
+ const data = [
+ ["John", "yes", "j@j.com"],
+ ["Dane", "TRUE", "dane@bane.com"],
+ ["Kane", "false", "kane@linch.com"],
+ ["Kaney", "no", "kane@linch.com"],
+ ["Kanye", "maybe", "kane@linch.com"],
+ ]
+
+ const result = [
+ { name: data[0][0], is_cool: true },
+ { name: data[1][0], is_cool: true },
+ { name: data[2][0], is_cool: false },
+ { name: data[3][0], is_cool: false },
+ { name: data[4][0], is_cool: false },
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Boolean-like values are returned as Booleans for 'booleanMatches' props", async () => {
+ const BOOLEAN_MATCHES_VALUE = "definitely"
+ const header = ["is_cool"]
+ const data = [["true"], ["false"], [BOOLEAN_MATCHES_VALUE]]
+
+ const fields = [
+ {
+ label: "Is cool",
+ key: "is_cool",
+ fieldType: {
+ type: "checkbox",
+ booleanMatches: { [BOOLEAN_MATCHES_VALUE]: true },
+ },
+ example: "No",
+ },
+ ] as const
+
+ const result = [{ is_cool: true }, { is_cool: false }, { is_cool: true }]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+})
+
+describe("Match Columns general tests", () => {
+ test("Displays all user header columns", async () => {
+ const header = ["namezz", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ expect(screen.getByText(header[0])).toBeInTheDocument()
+ expect(screen.getByText(header[1])).toBeInTheDocument()
+ expect(screen.getByText(header[2])).toBeInTheDocument()
+ })
+
+ test("Displays two rows of example data", async () => {
+ const header = ["namezz", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ // only displays two rows
+ expect(screen.queryByText(data[0][0])).toBeInTheDocument()
+ expect(screen.queryByText(data[0][1])).toBeInTheDocument()
+ expect(screen.queryByText(data[0][2])).toBeInTheDocument()
+ expect(screen.queryByText(data[1][0])).toBeInTheDocument()
+ expect(screen.queryByText(data[1][1])).toBeInTheDocument()
+ expect(screen.queryByText(data[1][2])).toBeInTheDocument()
+ expect(screen.queryByText(data[2][0])).not.toBeInTheDocument()
+ expect(screen.queryByText(data[2][1])).not.toBeInTheDocument()
+ expect(screen.queryByText(data[2][2])).not.toBeInTheDocument()
+ })
+
+ test("Displays all fields in selects dropdown", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const firstSelect = screen.getByLabelText(header[0])
+
+ await userEvent.click(firstSelect)
+
+ fields.forEach((field) => {
+ expect(screen.queryByText(field.label)).toBeInTheDocument()
+ })
+ })
+
+ test("Manually matches first column", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+ const result = [{ name: data[0][0] }, { name: data[1][0] }, { name: data[2][0] }]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ await selectEvent.select(screen.getByLabelText(header[0]), fields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Checkmark changes when field is matched", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const checkmark = screen.getAllByTestId("column-checkmark")[0]
+ // kinda dumb way to check if it has checkmark or not
+ expect(checkmark).toBeEmptyDOMElement()
+
+ await selectEvent.select(screen.getByLabelText(header[0]), fields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ expect(checkmark).not.toBeEmptyDOMElement()
+ })
+
+ test("Selecting select field adds more selects", async () => {
+ const OPTION_ONE = "one"
+ const OPTION_TWO = "two"
+ const OPTION_RESULT_ONE = "uno"
+ const OPTION_RESULT_TWO = "dos"
+ const options = [
+ { label: "One", value: OPTION_RESULT_ONE },
+ { label: "Two", value: OPTION_RESULT_TWO },
+ ]
+ const header = ["Something random"]
+ const data = [[OPTION_ONE], [OPTION_TWO], [OPTION_ONE]]
+
+ const result = [
+ {
+ team: OPTION_RESULT_ONE,
+ },
+ {
+ team: OPTION_RESULT_TWO,
+ },
+ {
+ team: OPTION_RESULT_ONE,
+ },
+ ]
+
+ const enumFields = [
+ {
+ label: "Team",
+ key: "team",
+ fieldType: {
+ type: "select",
+ options: options,
+ },
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ expect(screen.queryByTestId("accordion-button")).not.toBeInTheDocument()
+
+ await selectEvent.select(screen.getByLabelText(header[0]), enumFields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ expect(screen.queryByTestId("accordion-button")).toBeInTheDocument()
+
+ await userEvent.click(screen.getByTestId("accordion-button"))
+
+ await selectEvent.select(screen.getByLabelText(data[0][0]), options[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ await selectEvent.select(screen.getByLabelText(data[1][0]), options[1].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(result)
+ })
+
+ test("Can ignore columns", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const ignoreButton = screen.getAllByLabelText("Ignore column")[0]
+
+ expect(screen.queryByText(translations.matchColumnsStep.ignoredColumnText)).not.toBeInTheDocument()
+
+ await userEvent.click(ignoreButton)
+
+ expect(screen.queryByText(translations.matchColumnsStep.ignoredColumnText)).toBeInTheDocument()
+ })
+
+ test("Required unselected fields show warning alert on submit", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const requiredFields = [
+ {
+ label: "Name",
+ key: "name",
+ fieldType: {
+ type: "input",
+ },
+ example: "Stephanie",
+ validations: [
+ {
+ rule: "required",
+ errorMessage: "Hello",
+ },
+ ],
+ },
+ ] as const
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ expect(onContinue).not.toBeCalled()
+ expect(screen.queryByText(translations.alerts.unmatchedRequiredFields.bodyText)).toBeInTheDocument()
+
+ const continueButton = screen.getByRole("button", {
+ name: "Continue",
+ })
+
+ await userEvent.click(continueButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ })
+
+ test("Selecting the same field twice shows toast", async () => {
+ const header = ["Something random", "Phone", "Email"]
+ const data = [
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ["Kane", "534", "kane@linch.com"],
+ ]
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ await selectEvent.select(screen.getByLabelText(header[0]), fields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+ await selectEvent.select(screen.getByLabelText(header[1]), fields[0].label, {
+ container: document.getElementById(SELECT_DROPDOWN_ID)!,
+ })
+
+ const toasts = await screen.queryAllByText(translations.matchColumnsStep.duplicateColumnWarningDescription)
+
+ expect(toasts?.[0]).toBeInTheDocument()
+ })
+
+ test("matchColumnsStepHook should be called after columns are matched", async () => {
+ const matchColumnsStepHook = jest.fn(async (values) => values)
+ const mockValues = {
+ ...mockRsiValues,
+ fields: mockRsiValues.fields.filter((field) => field.key === "name" || field.key === "age"),
+ }
+ render(
+ = {
+ distance: number
+ value: T
+}
+
+export const findMatch = (
+ header: string,
+ fields: Fields,
+ autoMapDistance: number,
+): T | undefined => {
+ const smallestValue = fields.reduce>((acc, field) => {
+ const distance = Math.min(
+ ...[
+ lavenstein(field.key, header),
+ ...(field.alternateMatches?.map((alternate) => lavenstein(alternate, header)) || []),
+ ],
+ )
+ return distance < acc.distance || acc.distance === undefined
+ ? ({ value: field.key, distance } as AutoMatchAccumulator)
+ : acc
+ }, {} as AutoMatchAccumulator)
+ return smallestValue.distance <= autoMapDistance ? smallestValue.value : undefined
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findUnmatchedRequiredFields.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findUnmatchedRequiredFields.ts
new file mode 100644
index 0000000..f98fa45
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/findUnmatchedRequiredFields.ts
@@ -0,0 +1,8 @@
+import type { Fields } from "../../../types"
+import type { Columns } from "../MatchColumnsStep"
+
+export const findUnmatchedRequiredFields = (fields: Fields, columns: Columns) =>
+ fields
+ .filter((field) => field.validations?.some((validation) => validation.rule === "required"))
+ .filter((field) => columns.findIndex((column) => "value" in column && column.value === field.key) === -1)
+ .map((field) => field.label) || []
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getFieldOptions.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getFieldOptions.ts
new file mode 100644
index 0000000..8793557
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getFieldOptions.ts
@@ -0,0 +1,6 @@
+import type { Fields } from "../../../types"
+
+export const getFieldOptions = (fields: Fields, fieldKey: string) => {
+ const field = fields.find(({ key }) => fieldKey === key)!
+ return field.fieldType.type === "select" ? field.fieldType.options : []
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts
new file mode 100644
index 0000000..4fdea0c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/getMatchedColumns.ts
@@ -0,0 +1,41 @@
+import lavenstein from "js-levenshtein"
+import { findMatch } from "./findMatch"
+import type { Field, Fields } from "../../../types"
+import { setColumn } from "./setColumn"
+import type { Column, Columns } from "../MatchColumnsStep"
+import type { MatchColumnsProps } from "../MatchColumnsStep"
+
+export const getMatchedColumns = (
+ columns: Columns,
+ fields: Fields,
+ data: MatchColumnsProps["data"],
+ autoMapDistance: number,
+ autoMapSelectValues?: boolean,
+) =>
+ columns.reduce[]>((arr, column) => {
+ const autoMatch = findMatch(column.header, fields, autoMapDistance)
+ if (autoMatch) {
+ const field = fields.find((field) => field.key === autoMatch) as Field
+ const duplicateIndex = arr.findIndex((column) => "value" in column && column.value === field.key)
+ const duplicate = arr[duplicateIndex]
+ if (duplicate && "value" in duplicate) {
+ return lavenstein(duplicate.value, duplicate.header) < lavenstein(autoMatch, column.header)
+ ? [
+ ...arr.slice(0, duplicateIndex),
+ setColumn(arr[duplicateIndex], field, data, autoMapSelectValues),
+ ...arr.slice(duplicateIndex + 1),
+ setColumn(column),
+ ]
+ : [
+ ...arr.slice(0, duplicateIndex),
+ setColumn(arr[duplicateIndex]),
+ ...arr.slice(duplicateIndex + 1),
+ setColumn(column, field, data, autoMapSelectValues),
+ ]
+ } else {
+ return [...arr, setColumn(column, field, data, autoMapSelectValues)]
+ }
+ } else {
+ return [...arr, column]
+ }
+ }, [])
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeCheckboxValue.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeCheckboxValue.ts
new file mode 100644
index 0000000..62a434d
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeCheckboxValue.ts
@@ -0,0 +1,13 @@
+const booleanWhitelist: Record = {
+ yes: true,
+ no: false,
+ true: true,
+ false: false,
+}
+
+export const normalizeCheckboxValue = (value: string | undefined): boolean => {
+ if (value && value.toLowerCase() in booleanWhitelist) {
+ return booleanWhitelist[value.toLowerCase()]
+ }
+ return false
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts
new file mode 100644
index 0000000..e1c8b29
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/normalizeTableData.ts
@@ -0,0 +1,42 @@
+import type { Columns } from "../MatchColumnsStep"
+import { ColumnType } from "../MatchColumnsStep"
+import type { Data, Fields, RawData } from "../../../types"
+import { normalizeCheckboxValue } from "./normalizeCheckboxValue"
+
+export const normalizeTableData = (columns: Columns, data: RawData[], fields: Fields) =>
+ data.map((row) =>
+ columns.reduce((acc, column, index) => {
+ const curr = row[index]
+ switch (column.type) {
+ case ColumnType.matchedCheckbox: {
+ const field = fields.find((field) => field.key === column.value)!
+ if ("booleanMatches" in field.fieldType && Object.keys(field.fieldType).length) {
+ const booleanMatchKey = Object.keys(field.fieldType.booleanMatches || []).find(
+ (key) => key.toLowerCase() === curr?.toLowerCase(),
+ )!
+ const booleanMatch = field.fieldType.booleanMatches?.[booleanMatchKey]
+ acc[column.value] = booleanMatchKey ? booleanMatch : normalizeCheckboxValue(curr)
+ } else {
+ acc[column.value] = normalizeCheckboxValue(curr)
+ }
+ return acc
+ }
+ case ColumnType.matched: {
+ acc[column.value] = curr === "" ? undefined : curr
+ return acc
+ }
+ case ColumnType.matchedSelect:
+ case ColumnType.matchedSelectOptions: {
+ const matchedOption = column.matchedOptions.find(({ entry, value }) => entry === curr)
+ acc[column.value] = matchedOption?.value || undefined
+ return acc
+ }
+ case ColumnType.empty:
+ case ColumnType.ignored: {
+ return acc
+ }
+ default:
+ return acc
+ }
+ }, {} as Data),
+ )
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts
new file mode 100644
index 0000000..6c7a811
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setColumn.ts
@@ -0,0 +1,38 @@
+import type { Field } from "../../../types"
+import { Column, ColumnType, MatchColumnsProps, MatchedOptions } from "../MatchColumnsStep"
+import { uniqueEntries } from "./uniqueEntries"
+
+export const setColumn = (
+ oldColumn: Column,
+ field?: Field,
+ data?: MatchColumnsProps["data"],
+ autoMapSelectValues?: boolean,
+): Column => {
+ switch (field?.fieldType.type) {
+ case "select":
+ const fieldOptions = field.fieldType.options
+ const uniqueData = uniqueEntries(data || [], oldColumn.index) as MatchedOptions[]
+ const matchedOptions = autoMapSelectValues
+ ? uniqueData.map((record) => {
+ const value = fieldOptions.find(
+ (fieldOption) => fieldOption.value === record.entry || fieldOption.label === record.entry,
+ )?.value
+ return value ? ({ ...record, value } as MatchedOptions) : (record as MatchedOptions)
+ })
+ : uniqueData
+ const allMatched = matchedOptions.filter((o) => o.value).length == uniqueData?.length
+
+ return {
+ ...oldColumn,
+ type: allMatched ? ColumnType.matchedSelectOptions : ColumnType.matchedSelect,
+ value: field.key,
+ matchedOptions,
+ }
+ case "checkbox":
+ return { index: oldColumn.index, type: ColumnType.matchedCheckbox, value: field.key, header: oldColumn.header }
+ case "input":
+ return { index: oldColumn.index, type: ColumnType.matched, value: field.key, header: oldColumn.header }
+ default:
+ return { index: oldColumn.index, header: oldColumn.header, type: ColumnType.empty }
+ }
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setIgnoreColumn.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setIgnoreColumn.ts
new file mode 100644
index 0000000..2404d12
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setIgnoreColumn.ts
@@ -0,0 +1,7 @@
+import { Column, ColumnType } from "../MatchColumnsStep"
+
+export const setIgnoreColumn = ({ header, index }: Column): Column => ({
+ header,
+ index,
+ type: ColumnType.ignored,
+})
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setSubColumn.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setSubColumn.ts
new file mode 100644
index 0000000..fcde42c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/setSubColumn.ts
@@ -0,0 +1,14 @@
+import { ColumnType, MatchedOptions, MatchedSelectColumn, MatchedSelectOptionsColumn } from "../MatchColumnsStep"
+export const setSubColumn = (
+ oldColumn: MatchedSelectColumn | MatchedSelectOptionsColumn,
+ entry: string,
+ value: string,
+): MatchedSelectColumn | MatchedSelectOptionsColumn => {
+ const options = oldColumn.matchedOptions.map((option) => (option.entry === entry ? { ...option, value } : option))
+ const allMathced = options.every(({ value }) => !!value)
+ if (allMathced) {
+ return { ...oldColumn, matchedOptions: options as MatchedOptions[], type: ColumnType.matchedSelectOptions }
+ } else {
+ return { ...oldColumn, matchedOptions: options as MatchedOptions[], type: ColumnType.matchedSelect }
+ }
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/uniqueEntries.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/uniqueEntries.ts
new file mode 100644
index 0000000..d44739c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/MatchColumnsStep/utils/uniqueEntries.ts
@@ -0,0 +1,11 @@
+import uniqBy from "lodash/uniqBy"
+import type { MatchColumnsProps, MatchedOptions } from "../MatchColumnsStep"
+
+export const uniqueEntries = (
+ data: MatchColumnsProps["data"],
+ index: number,
+): Partial>[] =>
+ uniqBy(
+ data.map((row) => ({ entry: row[index] })),
+ "entry",
+ ).filter(({ entry }) => !!entry)
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx
new file mode 100644
index 0000000..c13673b
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/SelectHeaderStep.tsx
@@ -0,0 +1,47 @@
+import { useCallback, useState } from "react"
+import { Heading, ModalBody, useStyleConfig, Box } from "@chakra-ui/react"
+import { SelectHeaderTable } from "./components/SelectHeaderTable"
+import { ContinueButton } from "../../components/ContinueButton"
+import { useRsi } from "../../hooks/useRsi"
+import type { themeOverrides } from "../../theme"
+import type { RawData } from "../../types"
+
+type SelectHeaderProps = {
+ data: RawData[]
+ onContinue: (headerValues: RawData, data: RawData[]) => Promise
+ onBack?: () => void
+}
+
+export const SelectHeaderStep = ({ data, onContinue, onBack }: SelectHeaderProps) => {
+ const styles = useStyleConfig(
+ "SelectHeaderStep",
+ ) as (typeof themeOverrides)["components"]["SelectHeaderStep"]["baseStyle"]
+ const { translations } = useRsi()
+ const [selectedRows, setSelectedRows] = useState>(new Set([0]))
+ const [isLoading, setIsLoading] = useState(false)
+
+ const handleContinue = useCallback(async () => {
+ const [selectedRowIndex] = selectedRows
+ // We consider data above header to be redundant
+ const trimmedData = data.slice(selectedRowIndex + 1)
+ setIsLoading(true)
+ await onContinue(data[selectedRowIndex], trimmedData)
+ setIsLoading(false)
+ }, [onContinue, data, selectedRows])
+
+ return (
+ <>
+
+ {translations.selectHeaderStep.title}
+
+
+ setSelectedRows: (rows: ReadonlySet) => void
+}
+
+type TableRow = string[];
+
+export const SelectHeaderTable = ({ data, selectedRows, setSelectedRows }: Props) => {
+ const columns = useMemo(() => generateSelectionColumns(data), [data])
+
+ if (!data || data.length === 0) {
+ return (
+
+ No data available to select headers from.
+
+ );
+ }
+
+ return (
+
+
+ Select the row that contains your column headers
+
+
+
+ rows={data as TableRow[]}
+ columns={columns as Column[]}
+ selectedRows={selectedRows}
+ rowKeyGetter={(row: TableRow) => data.indexOf(row)}
+ onSelectedRowsChange={(newRows: Set) => {
+ console.log('Row selection changed:', newRows);
+ // allow selecting only one row
+ newRows.forEach((value: number) => {
+ if (!selectedRows.has(value)) {
+ setSelectedRows(new Set([value]))
+ return
+ }
+ })
+ }}
+ onRowClick={(row: TableRow) => {
+ console.log('Row clicked:', row);
+ setSelectedRows(new Set([data.indexOf(row)]))
+ }}
+ className="rdg-static"
+ rowHeight={45}
+ headerRowHeight={45}
+ style={{ height: '100%' }}
+ />
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/columns.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/columns.tsx
new file mode 100644
index 0000000..0a8c4ea
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/components/columns.tsx
@@ -0,0 +1,56 @@
+import DataGrid, { Column, FormatterProps, useRowSelection } from "react-data-grid"
+import { Radio, Box } from "@chakra-ui/react"
+import type { RawData } from "../../../types"
+
+const SELECT_COLUMN_KEY = "select-row"
+
+function SelectFormatter(props: FormatterProps) {
+ const [isRowSelected, onRowSelectionChange] = useRowSelection()
+
+ return (
+
+ {
+ onRowSelectionChange({
+ row: props.row,
+ checked: Boolean(event.target.checked),
+ isShiftClick: (event.nativeEvent as MouseEvent).shiftKey,
+ })
+ }}
+ />
+
+ )
+}
+
+export const SelectColumn: Column = {
+ key: SELECT_COLUMN_KEY,
+ name: "Select Header",
+ width: 100,
+ minWidth: 100,
+ maxWidth: 100,
+ resizable: false,
+ sortable: false,
+ frozen: true,
+ cellClass: "rdg-radio",
+ formatter: SelectFormatter,
+}
+
+export const generateSelectionColumns = (data: RawData[]) => {
+ const longestRowLength = data.reduce((acc, curr) => (acc > curr.length ? acc : curr.length), 0)
+ return [
+ SelectColumn,
+ ...Array.from(Array(longestRowLength), (_, index) => ({
+ key: index.toString(),
+ name: `Column ${index + 1}`,
+ width: 150,
+ formatter: ({ row }) => (
+
+ {row[index]}
+
+ ),
+ })),
+ ]
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/stories/SelectHeader.stories.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/stories/SelectHeader.stories.tsx
new file mode 100644
index 0000000..9d344e2
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/stories/SelectHeader.stories.tsx
@@ -0,0 +1,19 @@
+import { headerSelectionTableFields, mockRsiValues } from "../../../stories/mockRsiValues"
+import { SelectHeaderStep } from "../SelectHeaderStep"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+import { defaultTheme } from "../../../ReactSpreadsheetImport"
+export default {
+ title: "Select Header Step",
+ parameters: {
+ layout: "fullscreen",
+ },
+}
+
+export const Basic = () => (
+
+ {}}>
+ {}} />
+
+
+)
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx
new file mode 100644
index 0000000..204ba75
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx
@@ -0,0 +1,217 @@
+import "@testing-library/jest-dom"
+import { render, waitFor, screen, fireEvent } from "@testing-library/react"
+import { SelectHeaderStep } from "../SelectHeaderStep"
+import { defaultTheme, ReactSpreadsheetImport } from "../../../ReactSpreadsheetImport"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+import userEvent from "@testing-library/user-event"
+import { readFileSync } from "fs"
+import { StepType } from "../../UploadFlow"
+
+const MUTATED_HEADER = "mutated header"
+const CONTINUE_BUTTON = "Next"
+const ERROR_MESSAGE = "Something happened"
+const RAW_DATE = "2020-03-03"
+const FORMATTED_DATE = "2020/03/03"
+const TRAILING_CELL = "trailingcell"
+
+describe("Select header step tests", () => {
+ test("Select header row and click next", async () => {
+ const data = [
+ ["Some random header"],
+ ["2030"],
+ ["Name", "Phone", "Email"],
+ ["John", "123", "j@j.com"],
+ ["Dane", "333", "dane@bane.com"],
+ ]
+ const selectRowIndex = 2
+
+ const onContinue = jest.fn()
+ const onBack = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const radioButtons = screen.getAllByRole("radio")
+
+ await userEvent.click(radioButtons[selectRowIndex])
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(data[selectRowIndex])
+ expect(onContinue.mock.calls[0][1]).toEqual(data.slice(selectRowIndex + 1))
+ })
+
+ test("selectHeaderStepHook should be called after header is selected", async () => {
+ const selectHeaderStepHook = jest.fn(async (headerValues, data) => {
+ return { headerValues, data }
+ })
+ render(
+ onBack?: () => void
+}
+
+export const SelectSheetStep = ({ sheetNames, onContinue, onBack }: SelectSheetProps) => {
+ const [isLoading, setIsLoading] = useState(false)
+ const { translations } = useRsi()
+ const [value, setValue] = useState(sheetNames[0])
+ const styles = useStyleConfig(
+ "SelectSheetStep",
+ ) as (typeof themeOverrides)["components"]["SelectSheetStep"]["baseStyle"]
+ const handleOnContinue = useCallback(
+ async (data: typeof value) => {
+ setIsLoading(true)
+ await onContinue(data)
+ setIsLoading(false)
+ },
+ [onContinue],
+ )
+
+ return (
+ <>
+
+ {translations.uploadStep.selectSheet.title}
+ setValue(value)} value={value}>
+
+ {sheetNames.map((sheetName) => (
+
+ {sheetName}
+
+ ))}
+
+
+
+ handleOnContinue(value)}
+ onBack={onBack}
+ title={translations.uploadStep.selectSheet.nextButtonTitle}
+ backTitle={translations.uploadStep.selectSheet.backButtonTitle}
+ />
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/stories/SelectSheet.stories.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/stories/SelectSheet.stories.tsx
new file mode 100644
index 0000000..b1c626c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/stories/SelectSheet.stories.tsx
@@ -0,0 +1,22 @@
+import { defaultTheme } from "../../../ReactSpreadsheetImport"
+import { SelectSheetStep } from "../SelectSheetStep"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+
+export default {
+ title: "Select Sheet Step",
+ parameters: {
+ layout: "fullscreen",
+ },
+}
+
+const sheetNames = ["Sheet1", "Sheet2", "Sheet3"]
+
+export const Basic = () => (
+
+ {}}>
+ {}} />
+
+
+)
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx
new file mode 100644
index 0000000..84bfcb5
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/SelectSheetStep/tests/SelectSheetStep.test.tsx
@@ -0,0 +1,118 @@
+import "@testing-library/jest-dom"
+import { render, waitFor, screen, fireEvent, act } from "@testing-library/react"
+import { SelectSheetStep } from "../SelectSheetStep"
+import { defaultTheme, ReactSpreadsheetImport } from "../../../ReactSpreadsheetImport"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+import userEvent from "@testing-library/user-event"
+import { readFileSync } from "fs"
+const SHEET_TITLE_1 = "Sheet1"
+const SHEET_TITLE_2 = "Sheet2"
+const SELECT_HEADER_TABLE_ENTRY_1 = "Charlie"
+const SELECT_HEADER_TABLE_ENTRY_2 = "Josh"
+const SELECT_HEADER_TABLE_ENTRY_3 = "50"
+const ERROR_MESSAGE = "Something happened"
+
+test("Should render select sheet screen if multi-sheet excel file was uploaded", async () => {
+ render(
+ {}}>
+
+ ,
+ )
+
+ const firstRadio = screen.getByLabelText(sheetNames[selectSheetIndex])
+
+ await userEvent.click(firstRadio)
+
+ const nextButton = screen.getByRole("button", {
+ name: "Next",
+ })
+
+ await userEvent.click(nextButton)
+
+ await waitFor(() => {
+ expect(onContinue).toBeCalled()
+ })
+ expect(onContinue.mock.calls[0][0]).toEqual(sheetNames[selectSheetIndex])
+})
+
+test("Should show error toast if error is thrown in uploadStepHook", async () => {
+ const uploadStepHook = jest.fn(async () => {
+ throw new Error(ERROR_MESSAGE)
+ return undefined as any
+ })
+ render((initialStepState || { type: StepType.upload })
+
+ const history = useRef([])
+
+ const onClickStep = (stepIndex: number) => {
+ const type = stepIndexToStepType(stepIndex)
+ const historyIdx = history.current.findIndex((v) => v.type === type)
+ if (historyIdx === -1) return
+ const nextHistory = history.current.slice(0, historyIdx + 1)
+ history.current = nextHistory
+ setState(nextHistory[nextHistory.length - 1])
+ setStep(stepIndex)
+ }
+
+ const onBack = () => {
+ onClickStep(Math.max(activeStep - 1, 0))
+ }
+
+ const onNext = (v: StepState) => {
+ history.current.push(state)
+ setState(v)
+ v.type !== StepType.selectSheet && nextStep()
+ }
+
+ return (
+ <>
+
+
+ {steps.map((key) => (
+
+
+ (null)
+ const toast = useToast()
+ const errorToast = useCallback(
+ (description: string) => {
+ toast({
+ status: "error",
+ variant: "left-accent",
+ position: "bottom-left",
+ title: `${translations.alerts.toast.error}`,
+ description,
+ isClosable: true,
+ })
+ },
+ [toast, translations],
+ )
+
+ switch (state.type) {
+ case StepType.upload:
+ return (
+ {
+ setUploadedFile(file)
+ const isSingleSheet = workbook.SheetNames.length === 1
+ if (isSingleSheet) {
+ if (maxRecords && exceedsMaxRecords(workbook.Sheets[workbook.SheetNames[0]], maxRecords)) {
+ errorToast(translations.uploadStep.maxRecordsExceeded(maxRecords.toString()))
+ return
+ }
+ try {
+ const mappedWorkbook = await uploadStepHook(mapWorkbook(workbook))
+ onNext({
+ type: StepType.selectHeader,
+ data: mappedWorkbook,
+ })
+ } catch (e) {
+ errorToast((e as Error).message)
+ }
+ } else {
+ onNext({ type: StepType.selectSheet, workbook })
+ }
+ }}
+ />
+ )
+ case StepType.selectSheet:
+ return (
+ {
+ if (maxRecords && exceedsMaxRecords(state.workbook.Sheets[sheetName], maxRecords)) {
+ errorToast(translations.uploadStep.maxRecordsExceeded(maxRecords.toString()))
+ return
+ }
+ try {
+ const mappedWorkbook = await uploadStepHook(mapWorkbook(state.workbook, sheetName))
+ onNext({
+ type: StepType.selectHeader,
+ data: mappedWorkbook,
+ })
+ } catch (e) {
+ errorToast((e as Error).message)
+ }
+ }}
+ onBack={onBack}
+ />
+ )
+ case StepType.selectHeader:
+ return (
+ {
+ try {
+ const { data, headerValues } = await selectHeaderStepHook(...args)
+ onNext({
+ type: StepType.matchColumns,
+ data,
+ headerValues,
+ })
+ } catch (e) {
+ errorToast((e as Error).message)
+ }
+ }}
+ onBack={onBack}
+ />
+ )
+ case StepType.matchColumns:
+ return (
+ {
+ try {
+ const data = await matchColumnsStepHook(values, rawData, columns)
+ const dataWithMeta = await addErrorsAndRunHooks(data, fields, rowHook, tableHook)
+ onNext({
+ type: StepType.validateData,
+ data: dataWithMeta,
+ })
+ } catch (e) {
+ errorToast((e as Error).message)
+ }
+ }}
+ onBack={onBack}
+ />
+ )
+ case StepType.validateData:
+ return
+}
+
+export const UploadStep = ({ onContinue }: UploadProps) => {
+ const [isLoading, setIsLoading] = useState(false)
+ const styles = useStyleConfig("UploadStep") as (typeof themeOverrides)["components"]["UploadStep"]["baseStyle"]
+ const { translations, fields } = useRsi()
+ const handleOnContinue = useCallback(
+ async (data: XLSX.WorkBook, file: File) => {
+ setIsLoading(true)
+ await onContinue(data, file)
+ setIsLoading(false)
+ },
+ [onContinue],
+ )
+ return (
+
+ {translations.uploadStep.title}
+ {translations.uploadStep.manifestTitle}
+ {translations.uploadStep.manifestDescription}
+
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx
new file mode 100644
index 0000000..b6c6000
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/DropZone.tsx
@@ -0,0 +1,87 @@
+import { Box, Button, Text, useStyleConfig, useToast } from "@chakra-ui/react"
+import { useDropzone } from "react-dropzone"
+import * as XLSX from "xlsx"
+import { useState } from "react"
+import { getDropZoneBorder } from "../utils/getDropZoneBorder"
+import { useRsi } from "../../../hooks/useRsi"
+import { readFileAsync } from "../utils/readFilesAsync"
+import type { themeOverrides } from "../../../theme"
+import type { AcceptedFile } from "../../../types"
+
+type DropZoneProps = {
+ onContinue: (data: XLSX.WorkBook, file: File) => void
+ isLoading: boolean
+}
+
+export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
+ const { translations, maxFileSize, dateFormat, parseRaw } = useRsi()
+ const styles = useStyleConfig("UploadStep") as (typeof themeOverrides)["components"]["UploadStep"]["baseStyle"]
+ const toast = useToast()
+ const [loading, setLoading] = useState(false)
+ const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+ noClick: true,
+ noKeyboard: true,
+ maxFiles: 1,
+ maxSize: maxFileSize,
+ accept: {
+ "application/vnd.ms-excel": [".xls"],
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+ "text/csv": [".csv"],
+ },
+ onDropRejected: (fileRejections) => {
+ setLoading(false)
+ fileRejections.forEach((fileRejection) => {
+ toast({
+ status: "error",
+ variant: "left-accent",
+ position: "bottom-left",
+ title: `${fileRejection.file.name} ${translations.uploadStep.dropzone.errorToastDescription}`,
+ description: fileRejection.errors[0].message,
+ isClosable: true,
+ })
+ })
+ },
+ onDropAccepted: async ([file]) => {
+ setLoading(true)
+ const arrayBuffer = await readFileAsync(file)
+ const workbook = XLSX.read(arrayBuffer, {
+ cellDates: true,
+ dateNF: dateFormat,
+ raw: parseRaw,
+ dense: true,
+ type: 'array',
+ codepage: 65001, // UTF-8
+ WTF: false // Don't throw on errors
+ })
+ setLoading(false)
+ onContinue(workbook, file)
+ },
+ })
+
+ return (
+
+
+ {isDragActive ? (
+ {translations.uploadStep.dropzone.activeDropzoneTitle}
+ ) : loading || isLoading ? (
+ {translations.uploadStep.dropzone.loadingTitle}
+ ) : (
+ <>
+ {translations.uploadStep.dropzone.title}
+
+
+ )}
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/ExampleTable.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/ExampleTable.tsx
new file mode 100644
index 0000000..f17fa65
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/ExampleTable.tsx
@@ -0,0 +1,16 @@
+import type { Fields } from "../../../types"
+import { useMemo } from "react"
+import { Table } from "../../../components/Table"
+import { generateColumns } from "./columns"
+import { generateExampleRow } from "../utils/generateExampleRow"
+
+interface Props {
+ fields: Fields
+}
+
+export const ExampleTable = ({ fields }: Props) => {
+ const data = useMemo(() => generateExampleRow(fields), [fields])
+ const columns = useMemo(() => generateColumns(fields), [fields])
+
+ return
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/FadingOverlay.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/FadingOverlay.tsx
new file mode 100644
index 0000000..2db60dd
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/components/FadingOverlay.tsx
@@ -0,0 +1,13 @@
+import { Box } from "@chakra-ui/react"
+
+export const FadingOverlay = () => (
+ (fields: Fields) =>
+ fields.map(
+ (column): Column => ({
+ key: column.key,
+ name: column.label,
+ minWidth: 150,
+ headerRenderer: () => (
+
+
+ {column.label}
+
+ {column.description && (
+
+
+
+
+ )}
+
+ ),
+ formatter: ({ row }) => (
+
+ {row[column.key]}
+
+ ),
+ }),
+ )
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/stories/Upload.stories.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/stories/Upload.stories.tsx
new file mode 100644
index 0000000..716140c
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/stories/Upload.stories.tsx
@@ -0,0 +1,22 @@
+import { UploadStep } from "../UploadStep"
+import { defaultTheme } from "../../../ReactSpreadsheetImport"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+
+export default {
+ title: "Upload Step",
+ parameters: {
+ layout: "fullscreen",
+ },
+}
+
+export const Basic = () => {
+ return (
+
+ {}}>
+ {}} />
+
+
+ )
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/tests/UploadStep.test.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/tests/UploadStep.test.tsx
new file mode 100644
index 0000000..6717f75
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/tests/UploadStep.test.tsx
@@ -0,0 +1,86 @@
+import "@testing-library/jest-dom"
+import { render, fireEvent, waitFor, screen } from "@testing-library/react"
+import { UploadStep } from "../UploadStep"
+import { defaultTheme, ReactSpreadsheetImport } from "../../../ReactSpreadsheetImport"
+import { mockRsiValues } from "../../../stories/mockRsiValues"
+import { Providers } from "../../../components/Providers"
+import { ModalWrapper } from "../../../components/ModalWrapper"
+
+const MUTATED_RAW_DATA = "Bye"
+const ERROR_MESSAGE = "Something happened while uploading"
+
+test("Upload a file", async () => {
+ const file = new File(["Hello, Hello, Hello, Hello"], "test.csv", { type: "text/csv" })
+
+ const onContinue = jest.fn()
+ render(
+
+ {}}>
+
+ ,
+ )
+
+ const uploader = screen.getByTestId("rsi-dropzone")
+ fireEvent.drop(uploader, {
+ target: { files: [file] },
+ })
+ await waitFor(
+ () => {
+ expect(onContinue).toBeCalled()
+ },
+ { timeout: 5000 },
+ )
+})
+
+test("Should call uploadStepHook on file upload", async () => {
+ const file = new File(["Hello, Hello, Hello, Hello"], "test.csv", { type: "text/csv" })
+ const uploadStepHook = jest.fn(async (values) => {
+ return values
+ })
+ render(["fieldType"]["type"], string> = {
+ checkbox: "Boolean",
+ select: "Options",
+ input: "Text",
+}
+
+export const generateExampleRow = (fields: Fields) => [
+ fields.reduce((acc, field) => {
+ acc[field.key as T] = field.example || titleMap[field.fieldType.type]
+ return acc
+ }, {} as Record),
+]
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/getDropZoneBorder.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/getDropZoneBorder.ts
new file mode 100644
index 0000000..72ad862
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/getDropZoneBorder.ts
@@ -0,0 +1,9 @@
+export const getDropZoneBorder = (color: string) => {
+ return {
+ bgGradient: `repeating-linear(0deg, ${color}, ${color} 10px, transparent 10px, transparent 20px, ${color} 20px), repeating-linear-gradient(90deg, ${color}, ${color} 10px, transparent 10px, transparent 20px, ${color} 20px), repeating-linear-gradient(180deg, ${color}, ${color} 10px, transparent 10px, transparent 20px, ${color} 20px), repeating-linear-gradient(270deg, ${color}, ${color} 10px, transparent 10px, transparent 20px, ${color} 20px)`,
+ backgroundSize: "2px 100%, 100% 2px, 2px 100% , 100% 2px",
+ backgroundPosition: "0 0, 0 0, 100% 0, 0 100%",
+ backgroundRepeat: "no-repeat",
+ borderRadius: "4px",
+ }
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/readFilesAsync.ts b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/readFilesAsync.ts
new file mode 100644
index 0000000..aa4d209
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/UploadStep/utils/readFilesAsync.ts
@@ -0,0 +1,13 @@
+export const readFileAsync = (file: File) => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader()
+
+ reader.onload = () => {
+ resolve(reader.result)
+ }
+
+ reader.onerror = reject
+
+ reader.readAsArrayBuffer(file)
+ })
+}
diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx
new file mode 100644
index 0000000..2d6ddc5
--- /dev/null
+++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx
@@ -0,0 +1,187 @@
+import { useCallback, useMemo, useState } from "react"
+import { Box, Button, Heading, ModalBody, Switch, useStyleConfig, useToast } from "@chakra-ui/react"
+import { ContinueButton } from "../../components/ContinueButton"
+import { useRsi } from "../../hooks/useRsi"
+import type { Meta } from "./types"
+import { addErrorsAndRunHooks } from "./utils/dataMutations"
+import { generateColumns } from "./components/columns"
+import { Table } from "../../components/Table"
+import { SubmitDataAlert } from "../../components/Alerts/SubmitDataAlert"
+import type { Data } from "../../types"
+import type { themeOverrides } from "../../theme"
+import type { RowsChangeData } from "react-data-grid"
+
+type Props = {
+ initialData: (Data & Meta)[]
+ file: File
+ onBack?: () => void
+}
+
+export const ValidationStep = ({ initialData, file, onBack }: Props) => {
+ const { translations, fields, onClose, onSubmit, rowHook, tableHook } = useRsi()
+ const styles = useStyleConfig(
+ "ValidationStep",
+ ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
+ const toast = useToast()
+
+ const [data, setData] = useState<(Data & Meta)[]>(initialData)
+
+ const [selectedRows, setSelectedRows] = useState>(new Set())
+ const [filterByErrors, setFilterByErrors] = useState(false)
+ const [showSubmitAlert, setShowSubmitAlert] = useState(false)
+ const [isSubmitting, setSubmitting] = useState(false)
+
+ const updateData = useCallback(
+ async (rows: typeof data, indexes?: number[]) => {
+ // Check if hooks are async - if they are we want to apply changes optimistically for better UX
+ if (rowHook?.constructor.name === "AsyncFunction" || tableHook?.constructor.name === "AsyncFunction") {
+ setData(rows)
+ }
+ addErrorsAndRunHooks(rows, fields, rowHook, tableHook, indexes).then((data) => setData(data))
+ },
+ [rowHook, tableHook, fields],
+ )
+
+ const deleteSelectedRows = () => {
+ if (selectedRows.size) {
+ const newData = data.filter((value) => !selectedRows.has(value.__index))
+ updateData(newData)
+ setSelectedRows(new Set())
+ }
+ }
+
+ const updateRows = useCallback(
+ (rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => {
+ const changes = changedData?.indexes.reduce((acc, index) => {
+ // when data is filtered val !== actual index in data
+ const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
+ acc[realIndex] = rows[index]
+ return acc
+ }, {} as Record)
+ const realIndexes = changes && Object.keys(changes).map((index) => Number(index))
+ const newData = Object.assign([], data, changes)
+ updateData(newData, realIndexes)
+ },
+ [data, updateData],
+ )
+
+ const columns = useMemo(() => generateColumns(fields), [fields])
+
+ const tableData = useMemo(() => {
+ if (filterByErrors) {
+ return data.filter((value) => {
+ if (value?.__errors) {
+ return Object.values(value.__errors)?.filter((err) => err.level === "error").length
+ }
+ return false
+ })
+ }
+ return data
+ }, [data, filterByErrors])
+
+ const rowKeyGetter = useCallback((row: Data & Meta) => row.__index, [])
+
+ const submitData = async () => {
+ const calculatedData = data.reduce(
+ (acc, value) => {
+ const { __index, __errors, ...values } = value
+ if (__errors) {
+ for (const key in __errors) {
+ if (__errors[key].level === "error") {
+ acc.invalidData.push(values as unknown as Data)
+ return acc
+ }
+ }
+ }
+ acc.validData.push(values as unknown as Data)
+ return acc
+ },
+ { validData: [] as Data[], invalidData: [] as Data[], all: data },
+ )
+ setShowSubmitAlert(false)
+ setSubmitting(true)
+ const response = onSubmit(calculatedData, file)
+ if (response?.then) {
+ response
+ .then(() => {
+ onClose()
+ })
+ .catch((err: Error) => {
+ toast({
+ status: "error",
+ variant: "left-accent",
+ position: "bottom-left",
+ title: `${translations.alerts.submitError.title}`,
+ description: err?.message || `${translations.alerts.submitError.defaultMessage}`,
+ isClosable: true,
+ })
+ })
+ .finally(() => {
+ setSubmitting(false)
+ })
+ } else {
+ onClose()
+ }
+ }
+ const onContinue = () => {
+ const invalidData = data.find((value) => {
+ if (value?.__errors) {
+ return !!Object.values(value.__errors)?.filter((err) => err.level === "error").length
+ }
+ return false
+ })
+ if (!invalidData) {
+ submitData()
+ } else {
+ setShowSubmitAlert(true)
+ }
+ }
+
+ return (
+ <>
+ setShowSubmitAlert(false)} onConfirm={submitData} />
+
+
+ {translations.validationStep.title}
+
+
+ setFilterByErrors(!filterByErrors)}
+ >
+ {translations.validationStep.filterSwitchTitle}
+
+
+
+
+ {filterByErrors
+ ? translations.validationStep.noRowsMessageWhenFiltered
+ : translations.validationStep.noRowsMessage}
+
+ ),
+ }}
+ />
+
+
RSI react-spreadsheet-import ⚡️
+ +
+
+
+ [](https://www.npmjs.com/package/react-spreadsheet-import)
+
+
++ +A component used for importing XLS / XLSX / CSV documents built with [**Chakra UI**](https://chakra-ui.com). Import flow combines: + +- 📥 Uploader +- ⚙️ Parser +- 📊 File preview +- 🧪 UI for column mapping +- ✏ UI for validating and editing data + +✨ [**Demo**](https://ugnissoftware.github.io/react-spreadsheet-import/iframe.html?id=react-spreadsheet-import--basic&args=&viewMode=story) ✨ +
+ +## Features + +- Custom styles - edit Chakra UI theme to match your project's styles 🎨 +- Custom validation rules - make sure valid data is being imported, easily spot and correct errors +- Hooks - alter raw data after upload or make adjustments on data changes +- Auto-mapping columns - automatically map most likely value to your template values, e.g. `name` -> `firstName` +
+ + + +## Figma + +We provide full figma designs. You can copy the designs +[here](https://www.figma.com/community/file/1080776795891439629) + +## Getting started + +```sh +npm i react-spreadsheet-import +``` + +Using the component: (it's up to you when the flow is open and what you do on submit with the imported data) + +```tsx +import { ReactSpreadsheetImport } from "react-spreadsheet-import"; + +
+
+2.) Change all components of the same type, like all Buttons, at the same time
+
+```jsx
+
+
+3.) Change components specifically in each Step.
+```jsx
+
+
+Underneath we use Chakra-UI, you can send in a custom theme for us to apply. Read more about themes [here](https://chakra-ui.com/docs/styled-system/theming/theme)
+
+### Changing text (translations)
+
+You can change any text in the flow:
+
+```tsx
+
+ {children}
+
+