-
-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
-\n {!hideStepper && \n {t.uploadStep.maxRecordsExceeded(maxRecords)}\n \n )}\n\n {state.step === \"upload\" && (\n }\n maxFileSize={maxFileSize}\n translations={t.uploadStep}\n onLoaded={handleUploaded}\n uploadStepHook={uploadStepHook}\n showTitle={!hideStepTitles}\n />\n )}\n\n {state.step === \"selectSheet\" && state.workbook && (\n setState((s) => ({ ...s, step: \"upload\" }))}\n onNext={(idx) => advanceFromSheet(state.workbook!, idx)}\n showTitle={!hideStepTitles}\n />\n )}\n\n {state.step === \"selectHeader\" && (\n \n setState((s) => ({\n ...s,\n step: state.workbook && state.workbook.sheets.length > 1 ? \"selectSheet\" : \"upload\",\n }))\n }\n onNext={handleHeader}\n showTitle={!hideStepTitles}\n />\n )}\n\n {state.step === \"matchColumns\" && (\n setState((s) => ({ ...s, step: \"selectHeader\" }))}\n onNext={handleMatch}\n showTitle={!hideStepTitles}\n />\n )}\n\n {state.step === \"validate\" && (\n setState((s) => ({ ...s, step: \"matchColumns\" }))}\n onSubmit={handleSubmit}\n showTitle={!hideStepTitles}\n />\n )}\n
\n );\n\n if (inline) {\n return {body}
;\n }\n\n return (\n <>\n \n {showTitle &&
\n \n\n {unmatchedRequired.length > 0 && (\n {translations.title}
}\n\n\n \n {row[ci] ?? \"\"}\n
\n );\n }),\n )}\n\n \n \n
\n );\n })}\n {sample.map((row, ri) =>\n headers.map((_, ci) => {\n const isIgnored = mapping[ci] === undefined;\n return (\n \n {translations.userTableTitle}\n
\n\n {headers.map((h, idx) => {\n const isIgnored = mapping[idx] === undefined;\n return (\n \n {h || `(column ${idx + 1})`}\n setColumn(idx, IGNORE)}\n disabled={isIgnored}\n >\n ร\n \n
\n \n {translations.templateTitle}\n
\n\n {headers.map((h, idx) => {\n const value = mapping[idx];\n const status = statusFor(value, fields);\n return (\n \n setColumn(idx, e.target.value)}\n aria-label={`${translations.matchDropdownTitle}: ${h}`}\n >\n \n {fields.map((f) => (\n \n {f.label}\n {f.required ? \" *\" : \"\"}\n \n ))}\n \n
\n );\n })}\n \n \n \n
\n\n \n {showTitle &&
\n );\n}\n","import { useState } from \"react\";\nimport { Button, Form } from \"react-bootstrap\";\nimport type { Translations, UploadedWorkbook } from \"../types\";\n\ninterface Props {\n workbook: UploadedWorkbook;\n translations: Translations[\"selectSheetStep\"];\n onBack: () => void;\n onNext: (sheetIndex: number) => void;\n showTitle?: boolean;\n}\n\nexport function SelectSheetStep({ workbook, translations, onBack, onNext, showTitle = true }: Props) {\n const [selected, setSelected] = useState(0);\n return (\n {translations.title}
}\n\n \n \n {rows.slice(0, 25).map((row, idx) => (\n
\n
\n | \n | \n {row.map((cell, ci) => (\n {cell} | \n ))}\n \n ))}\n
\n \n \n
\n \n {showTitle &&
\n );\n}\n","import { useCallback, useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { Alert, Button, Spinner, Table } from \"react-bootstrap\";\nimport type { Field, RawSheet, Translations, UploadedWorkbook } from \"../types\";\nimport { parseFile } from \"../utils/parseFile\";\n\ninterface UploadStepProps {\n fields: ReadonlyArray{translations.title}
}\n \n\n \n \n
\n \n {showTitle && \n \n {loading ? (\n <>\n {\n e.stopPropagation();\n open();\n }}\n >\n {translations.dropzone.buttonTitle}\n \n \n )}\n
\n\n {error && {translations.title}
}\n\n
\n\n {translations.manifestTitle}
\n {translations.manifestDescription}
\n \n \n \n
\n
\n | \n {f.label}\n {f.required && *}\n | \n ))}\n
|---|
| \n {f.example ?? \"\"}\n | \n ))}\n
{translations.dropzone.loadingTitle}
\n \n ) : isDragActive ? (\n {translations.dropzone.activeDropzoneTitle}
\n ) : (\n <>\n {translations.dropzone.title}
\n \n { if (el) el.indeterminate = isIndeterminate; }}\n checked={isRowSelected}\n onChange={(e) => onRowSelectionChange({ checked: isIndeterminate ? false : e.target.checked })}\n />\n
\n );\n}\n\nfunction SelectRowCell(props: { tabIndex: number; row: any }) {\n const { isRowSelected, onRowSelectionChange } = useRowSelection();\n return (\n \n onRowSelectionChange({ row: props.row, checked: e.target.checked, isShiftClick: false })}\n />\n
\n );\n}\n\nconst CustomSelectColumn: Column\n
,\n document.body,\n )}\n \n );\n}\n\ninterface Props{message}
\n \n \n {value ?? \"\"}\n
\n );\n }\n return (\n \n \n {filterErrors ? translations.noRowsMessageWhenFiltered : translations.noRowsMessage}\n \n ) : (\n setShowConfirm(false)} centered>\n \n {alertTranslations.headerTitle} \n \n \n {allowInvalidSubmit ? alertTranslations.bodyText : alertTranslations.bodyTextSubmitForbidden}\n \n \n \n {allowInvalidSubmit && (\n {\n setShowConfirm(false);\n void doSubmit();\n }}\n >\n {alertTranslations.finishButtonTitle}\n \n )}\n \n \n
\n );\n}\n","import type { CalculatedColumn, ColSpanArgs } from '../types';\n\nexport function getColSpan\n {showTitle ?
\n\n {loading ? (\n {translations.title}
: }\n\n setFilterErrors(e.target.checked)}\n />\n \n
\n \n
\n ) : visibleRows.length === 0 ? (\n \n , unknown, string>\n className=\"rdg-light\"\n columns={columns}\n rows={visibleRows}\n rowKeyGetter={(r: ImportedRow) => r.__index}\n selectedRows={selected as Set}\n onSelectedRowsChange={(rows: Set) => setSelected(rows)}\n onRowsChange={(updated: ImportedRow[]) => {\n const updatedByIndex = new Map(updated.map((r) => [r.__index, r]));\n const next = rows.map((r) => updatedByIndex.get(r.__index) ?? r);\n setRows(next);\n void revalidate(next);\n }}\n style={{ blockSize: \"100%\" }}\n />\n
\n )}\n\n {errorCount > 0 && (\n \n {errorCount} row{errorCount === 1 ? \"\" : \"s\"} with errors\n
\n )}\n\n \n \n \n
\n\n