From 431b33acb4def0a2685ef3e23ff32c32c8e0e055 Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Mon, 29 Jul 2024 15:22:31 +0200
Subject: [PATCH] add CSV importer

---
 .../csv-importer-column-map-row.tsx           |  85 ++++
 .../csv-importer/csv-importer-column-map.tsx  |  83 ++++
 .../csv-importer/csv-importer-data-clean.tsx  | 429 ++++++++++++++++++
 .../src/csv-importer/csv-importer-done.tsx    |  25 +
 .../src/csv-importer/csv-importer-footer.tsx  | 101 +++++
 .../csv-importer-header-select.tsx            |  93 ++++
 .../src/csv-importer/csv-importer-steps.tsx   |  54 +++
 .../src/csv-importer/csv-importer-upload.tsx  |  56 +++
 .../csv-importer-validation-popup.tsx         |  71 +++
 .../core/src/csv-importer/csv-importer.css    |  30 ++
 .../csv-importer/csv-importer.provider.tsx    |  79 ++++
 .../src/csv-importer/csv-importer.stories.tsx |  84 ++++
 .../core/src/csv-importer/csv-importer.tsx    |  68 +++
 .../src/csv-importer/csv-importer.types.ts    | 137 ++++++
 .../src/csv-importer/csv-importer.util.ts     |  70 +++
 packages/core/src/csv-importer/index.ts       |  13 +
 packages/core/src/index.ts                    |   1 +
 packages/core/src/styles/styles.css           |   1 +
 18 files changed, 1480 insertions(+)
 create mode 100644 packages/core/src/csv-importer/csv-importer-column-map-row.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-column-map.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-data-clean.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-done.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-footer.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-header-select.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-steps.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-upload.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer-validation-popup.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer.css
 create mode 100644 packages/core/src/csv-importer/csv-importer.provider.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer.stories.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer.tsx
 create mode 100644 packages/core/src/csv-importer/csv-importer.types.ts
 create mode 100644 packages/core/src/csv-importer/csv-importer.util.ts
 create mode 100644 packages/core/src/csv-importer/index.ts

diff --git a/packages/core/src/csv-importer/csv-importer-column-map-row.tsx b/packages/core/src/csv-importer/csv-importer-column-map-row.tsx
new file mode 100644
index 0000000..6ddab9d
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-column-map-row.tsx
@@ -0,0 +1,85 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react'
+import { Button, CsvImporterContext, Divider, IconLib, If, Select, SelectOption, Text, View, useVisibility } from '../'
+
+export type CsvImporterColumnMapRowProps = {
+    column: any
+    selected: SelectOption
+    index: number
+    onSelect: (value) => void
+}
+
+export const CsvImporterColumnMapRow = (props) => {
+    const { column, selected, index, onSelect } = props
+    const { visible, show, hide } = useVisibility(true)
+    const { schema, sample } = useContext(CsvImporterContext)
+    const [sampleData, setSampleData] = useState([])
+    const options = useMemo(
+        () =>
+            schema.map(({ key, label }) => ({
+                key,
+                label,
+            })),
+        [schema]
+    )
+
+    const handleSelect = (option, dismiss) => {
+        onSelect(option.key)
+        dismiss()
+    }
+
+    useEffect(() => {
+        setSampleData(sample.map((row: any) => row[index].value))
+    }, [sample])
+
+    return (
+        <If if={visible}>
+            <View
+                row
+                width="100%"
+                p="1rem 0"
+                gap="1rem"
+                alignItems="flex-start">
+                <View
+                    flex={1}
+                    p="0 0 0 1rem">
+                    <Text fontWeight="bold">{column.value}</Text>
+                </View>
+                <View
+                    flex={1}
+                    style={{ overflow: 'hidden' }}>
+                    {sampleData.map((text, index) => (
+                        <Text
+                            key={index}
+                            display="inline-block"
+                            className="f-ellipsis"
+                            width="100%">
+                            {text}
+                        </Text>
+                    ))}
+                </View>
+                <View flex={2}>
+                    <Select
+                        width="100%"
+                        suffix={<IconLib icon="chevron-down" />}
+                        placeholder="Select a schema field"
+                        options={options}
+                        selected={selected}
+                        onSelect={handleSelect}
+                    />
+                </View>
+                <View
+                    width={60}
+                    row>
+                    <Button
+                        subtle
+                        colorToken="text-weakest"
+                        onClick={hide}>
+                        <IconLib icon="x" />
+                    </Button>
+                </View>
+            </View>
+
+            <Divider />
+        </If>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-column-map.tsx b/packages/core/src/csv-importer/csv-importer-column-map.tsx
new file mode 100644
index 0000000..d38b4c2
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-column-map.tsx
@@ -0,0 +1,83 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { CsvImporterColumnMapRow, CsvImporterContext, Text, View } from '../'
+
+export type CsvImporterColumnMapProps = {}
+
+export const CsvImporterColumnMap = (props: CsvImporterColumnMapProps) => {
+    const {
+        header,
+        mapping,
+        records,
+        setMapping,
+        options: {
+            text: { map },
+        },
+    } = useContext(CsvImporterContext)
+    const [schemaSelection, setSchemaSelection] = useState({})
+    const [setup, setSetup] = useState(false)
+
+    const handleSelection = (index, key) => {
+        const updatedSchemaSelection = { ...schemaSelection }
+        const existingIndex = Object.keys(updatedSchemaSelection).find((index) => updatedSchemaSelection[index] == key)
+
+        if (existingIndex == undefined) {
+            setSchemaSelection({ ...updatedSchemaSelection, [index]: key })
+        } else {
+            delete updatedSchemaSelection[existingIndex]
+            setSchemaSelection({ ...updatedSchemaSelection, [index]: key })
+        }
+    }
+
+    useEffect(() => {
+        if (setup) return
+        if (!!Object.keys(mapping).length) setSchemaSelection(mapping)
+        setSetup(true)
+    }, [mapping, setup])
+
+    useEffect(() => {
+        if (!setup) return
+        setMapping(schemaSelection)
+    }, [schemaSelection, setup])
+
+    return (
+        <View
+            column
+            gap="0.2rem"
+            width="100%"
+            height={500}
+            position="relative"
+            justifyContent="flex-start"
+            style={{ overflowY: 'auto' }}>
+            <View
+                row
+                p="1rem 0"
+                width="100%"
+                position="sticky"
+                zIndex={100}
+                style={{ top: 0 }}
+                bgToken="surface-strong">
+                <View
+                    flex={1}
+                    p="0 0 0 1rem">
+                    <Text>{map.data}</Text>
+                </View>
+                <View flex={1}>
+                    <Text>{map.sample}</Text>
+                </View>
+                <View flex={2}>
+                    <Text>{map.schema}</Text>
+                </View>
+                <View width={60} />
+            </View>
+            {header.map((column: any, index) => (
+                <CsvImporterColumnMapRow
+                    key={index}
+                    column={column}
+                    index={index}
+                    selected={schemaSelection[index] ? [schemaSelection[index]] : []}
+                    onSelect={(key) => handleSelection(index, key)}
+                />
+            ))}
+        </View>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-data-clean.tsx b/packages/core/src/csv-importer/csv-importer-data-clean.tsx
new file mode 100644
index 0000000..ec16fbe
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-data-clean.tsx
@@ -0,0 +1,429 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+import {
+    Button,
+    CsvImporterContext,
+    CsvImporterValidationPopup,
+    DataGrid,
+    DataGridHeader,
+    DataGridProvider,
+    Dialog,
+    FIBin,
+    FOLD_CSV_MAPPER_CACHE,
+    Flexer,
+    Icon,
+    Portal,
+    Text,
+    View,
+    arrayMove,
+    columnSortFunc,
+    dispatchDataGridEvent,
+    useId,
+    useVisibility
+} from '../'
+
+export type CsvImporterDataCleanProps = {}
+
+const validationColor = '#f56565'
+
+export const CsvImporterDataClean = (props: CsvImporterDataCleanProps) => {
+    const {
+        schema,
+        mapping,
+        records,
+        options: {
+            text: { dialog },
+        },
+    } = useContext(CsvImporterContext)
+    const id = useId()
+    const schemaColsCache = useRef(null)
+    const { visible, show, hide } = useVisibility(false)
+    const rowSelectionCache = useRef({ r1: true })
+    const [columns, setColumns] = useState([])
+    const [columnWidths, setColumnWidths] = useState([])
+    const [validationIndex, setValidationIndex] = useState<any>(-1)
+    const [validationMessages, setValidationMessages] = useState([])
+    const [rows, setRows] = useState([])
+    const { validationMessage, totalValidationMessages, showValidationPopup } = useMemo(() => {
+        return {
+            validationMessage: validationMessages[validationIndex],
+            totalValidationMessages: validationMessages.length,
+            showValidationPopup: validationIndex != -1,
+        }
+    }, [validationMessages, validationIndex])
+
+    const handleValidationPrevious = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setValidationIndex(validationIndex - 1)
+    }
+
+    const handleValidationNext = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setValidationIndex(validationIndex + 1)
+    }
+
+    const handleRowsDelete = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        const updatedRows = [...rows]
+        const rowsSelected = Object.keys(rowSelectionCache.current).map((r) => +r.replace('r', ''))
+
+        for (let i = rowsSelected.length - 1; i >= 0; i--) updatedRows.splice(rowsSelected[i], 1)
+
+        setRows([...updatedRows])
+        dispatchDataGridEvent('clear-row-selection', { instanceId: id })
+        hide()
+    }
+
+    const handleSelect = (selection: any) => {
+        const { cells } = selection
+        const cell = Object.keys(cells)[0]
+
+        if (!cell) return
+
+        const [_, row, col] = cell.split('-')
+        const validationIndex = validationMessages.findIndex((validationMessage: any) => {
+            return validationMessage.row == row && validationMessage.col == col
+        })
+
+        setValidationIndex(validationIndex)
+    }
+
+    const handleScroll = (e) => {
+        if (showValidationPopup) setValidationIndex(-1)
+    }
+
+    const getIndexes = () => Object.keys(mapping).map((k) => +k)
+
+    const getSchemaCols = () => {
+        if (!schemaColsCache.current) {
+            const indexes = getIndexes()
+            schemaColsCache.current = indexes.map((index) => {
+                const schemaKey = mapping[index]
+                const schemaField = schema.find((s) => s.key == schemaKey)
+                return schemaField
+            })
+        }
+        return schemaColsCache.current
+    }
+
+    const handleColumnMove = ({ origin, target }) => {
+        setColumnWidths(arrayMove(columnWidths, origin, target))
+        setColumns(arrayMove(columns, origin, target))
+        setRows(rows.map((row) => arrayMove(row, origin, target)))
+    }
+
+    const handleRowMove = ({ origin, target }) => {
+        setRows(arrayMove(rows, origin, target))
+    }
+
+    const handleColumnClick = (index, column) => {
+        const newRows = [...rows]
+        const schemaCols = getSchemaCols()
+        const validationMessages = []
+
+        // if ASC is already set, then we want to reverse it for DESC
+        // otherwise if it's DESC or undefined, we simply sort it normally
+        if (column.sortOrder == 'ASC') {
+            newRows.reverse()
+        } else {
+            newRows.sort(columnSortFunc(index, column.options.type))
+        }
+
+        setRows(
+            newRows.map((row, index1) => {
+                return row.map((col, index2) => {
+                    const value = schemaCols[index2].transform ? schemaCols[index2].transform(col) : col.value
+                    const validation: string[] = schemaCols[index2].validate ? schemaCols[index2].validate(col) : []
+                    const error = !!validation.length
+
+                    if (error) {
+                        validationMessages.push({
+                            messages: validation,
+                            row: index1,
+                            col: index2,
+                        })
+                    }
+
+                    return {
+                        value,
+                        icon: error ? 'warning' : undefined,
+                        color: error ? validationColor : undefined,
+                    }
+                })
+            })
+        )
+
+        setValidationMessages(validationMessages)
+        setValidationIndex(-1)
+
+        // update sort order
+        setColumns(
+            columns.map((c: any, i) => {
+                if (index == i) {
+                    return {
+                        ...c,
+                        sortOrder: c.sortOrder == 'ASC' ? 'DESC' : 'ASC',
+                    }
+                } else {
+                    return {
+                        ...c,
+                        sortOrder: undefined,
+                    }
+                }
+            })
+        )
+    }
+
+    const removeValidation = ({ row, col }) => {
+        setValidationMessages(
+            validationMessages.filter((vm) => {
+                return !(vm.row == row && vm.col == col)
+            })
+        )
+    }
+
+    const updateValidation = ({ validation, row, col }) => {
+        let updated = false
+        let messages = validationMessages.map((vm) => {
+            if (vm.row == row && vm.col == col) {
+                updated = true
+                return { ...vm, messages: validation }
+            } else {
+                return vm
+            }
+        })
+        if (!updated) messages = [...messages, { messages: validation, row, col }]
+        setValidationMessages(messages)
+    }
+
+    const handleCellUpdate = ({ value, row, col }) => {
+        const schemaCols = getSchemaCols()
+
+        setValidationIndex(-1)
+        setRows(
+            rows.map((r, i1) => {
+                if (i1 == row) {
+                    return r.map((c, i2) => {
+                        if (i2 == col) {
+                            const validation: string[] = schemaCols[i2].validate
+                                ? schemaCols[i2].validate({ value })
+                                : []
+                            const error = !!validation.length
+
+                            if (error) updateValidation({ validation, row, col })
+                            if (!error) removeValidation({ row, col })
+
+                            return {
+                                ...c,
+                                value,
+                                icon: error ? 'warning' : undefined,
+                                color: error ? validationColor : undefined,
+                            }
+                        } else {
+                            return c
+                        }
+                    })
+                } else {
+                    return r
+                }
+            })
+        )
+    }
+
+    const handleCellDelete = ({ row, col }) => {
+        const schemaCols = getSchemaCols()
+        const value = ''
+
+        setValidationIndex(-1)
+        setRows(
+            rows.map((r, i1) => {
+                if (i1 == row) {
+                    return r.map((c, i2) => {
+                        if (i2 == col) {
+                            const validation: string[] = schemaCols[i2].validate
+                                ? schemaCols[i2].validate({ value })
+                                : []
+                            const error = !!validation.length
+
+                            if (error) updateValidation({ validation, row, col })
+                            if (!error) removeValidation({ row, col })
+
+                            return {
+                                ...c,
+                                value,
+                                icon: error ? 'warning' : undefined,
+                                color: error ? validationColor : undefined,
+                            }
+                        } else {
+                            return c
+                        }
+                    })
+                } else {
+                    return r
+                }
+            })
+        )
+    }
+
+    // rows
+    useEffect(() => {
+        const validationMessages = []
+        const indexes = getIndexes()
+        const schemaCols = getSchemaCols()
+        const rows = records
+            .filter((record) => !!record.length)
+            .map((record) => indexes.map((index) => record[index]))
+            .map((row, index1) => {
+                return row.map((col, index2) => {
+                    const value = schemaCols[index2].transform ? schemaCols[index2].transform(col) : col.value
+                    const validation: string[] = schemaCols[index2].validate ? schemaCols[index2].validate(col) : []
+                    const error = !!validation.length
+
+                    if (error) {
+                        validationMessages.push({
+                            messages: validation,
+                            row: index1,
+                            col: index2,
+                        })
+                    }
+
+                    return {
+                        value,
+                        icon: error ? 'warning' : undefined,
+                        color: error ? validationColor : undefined,
+                    }
+                })
+            })
+
+        setRows(rows)
+        setValidationMessages(validationMessages)
+        setValidationIndex(-1)
+
+        window[FOLD_CSV_MAPPER_CACHE] = rows
+    }, [schema, mapping, records])
+
+    // columns
+    useEffect(() => {
+        const columnWidths = []
+        const schemaCols = getSchemaCols()
+        const columns = schemaCols.map((schemaField, index) => {
+            columnWidths.push('150px')
+            const { key, label, type = 'string' } = schemaField
+            return { id: key, label, options: { type } }
+        })
+
+        setColumns(columns)
+        setColumnWidths(columnWidths)
+    }, [schema, mapping])
+
+    // cache saving
+    useEffect(() => {
+        window[FOLD_CSV_MAPPER_CACHE] = rows
+    }, [rows])
+
+    return (
+        <>
+            {!!totalValidationMessages && showValidationPopup && (
+                <CsvImporterValidationPopup
+                    validationMessage={validationMessage}
+                    // unused:
+                    totalValidationMessages={totalValidationMessages}
+                    validationIndex={validationIndex}
+                    onPrevious={handleValidationPrevious}
+                    onNext={handleValidationNext}
+                />
+            )}
+
+            <Dialog
+                closeButton
+                isVisible={visible}
+                title={dialog.title}
+                description={dialog.description}
+                onDismiss={hide}
+                portal={Portal}
+                footer={
+                    <View
+                        row
+                        gap={10}
+                        width="100%">
+                        <Button onClick={hide}>{dialog.cancel}</Button>
+                        <Flexer />
+                        <Button
+                            onClick={handleRowsDelete}
+                            variant="danger"
+                            outline>
+                            {dialog.confirm}
+                        </Button>
+                    </View>
+                }
+            />
+
+            <DataGridProvider
+                id={id}
+                defaultCellSelection={{}}
+                defaultRowSelection={{}}
+                draggableColumns={false}
+                draggableRows={false}
+                columnWidths={columnWidths}
+                onSelect={handleSelect}>
+                <DataGrid
+                    pinFirst
+                    onScroll={handleScroll}
+                    variant="virtual"
+                    virtual={{
+                        rows: 10,
+                        rowHeight: 40,
+                        paddingTop: 40,
+                        paddingBottom: 0,
+                    }}
+                    hideCheckbox={false}
+                    rows={rows}
+                    header={
+                        <DataGridHeader
+                            resizableColumns
+                            columns={columns}
+                            onColumnClick={handleColumnClick}
+                            onWidthChange={(index, width) =>
+                                setColumnWidths(columnWidths.map((w, i) => (i == index ? width : w)))
+                            }
+                        />
+                    }
+                    onCellUpdate={handleCellUpdate}
+                    onCellDelete={handleCellDelete}
+                    onColumnMove={handleColumnMove}
+                    onRowMove={handleRowMove}
+                    toolbar={({ rowSelection, cellSelection }) => (
+                        <View
+                            row
+                            position="absolute"
+                            bgToken="surface-inverse"
+                            colorToken="text-on-color"
+                            p="1rem 2rem"
+                            radius="var(--f-radius)"
+                            shadow="var(--f-shadow-xl)"
+                            zIndex={1000}
+                            gap={10}
+                            display={!Object.keys(rowSelection).length ? 'none' : 'flex'}
+                            style={{ bottom: 10, left: '50%', transform: 'translateX(-50%)' }}>
+                            <Text color="inherit">
+                                Delete {Object.keys(rowSelection).length}{' '}
+                                {Object.keys(rowSelection).length == 1 ? 'row' : 'rows'}
+                            </Text>
+                            <Icon
+                                icon={FIBin}
+                                className="f-buttonize"
+                                onClick={(e) => {
+                                    rowSelectionCache.current = { ...rowSelection }
+                                    show(e)
+                                }}
+                            />
+                        </View>
+                    )}
+                />
+            </DataGridProvider>
+        </>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-done.tsx b/packages/core/src/csv-importer/csv-importer-done.tsx
new file mode 100644
index 0000000..fff6965
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-done.tsx
@@ -0,0 +1,25 @@
+import React, { useContext } from 'react'
+import { CsvImporterContext, Heading, Text, View } from '../'
+
+export type CsvImporterDoneProps = {}
+
+export const CsvImporterDone = (props: CsvImporterDoneProps) => {
+    const {
+        options: {
+            text: {
+                complete: { title, description },
+            },
+        },
+    } = useContext(CsvImporterContext)
+
+    return (
+        <View
+            column
+            gap={10}
+            width="100%"
+            height={500}>
+            <Heading>{title}</Heading>
+            <Text>{description}</Text>
+        </View>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-footer.tsx b/packages/core/src/csv-importer/csv-importer-footer.tsx
new file mode 100644
index 0000000..2f6291b
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-footer.tsx
@@ -0,0 +1,101 @@
+import React, { ReactNode, useContext, useMemo } from 'react'
+import { Button, Flexer, View } from '../'
+import { FOLD_CSV_MAPPER_CACHE } from './csv-importer'
+import { CsvImporterContext } from './csv-importer.provider'
+
+export type CsvImporterFooterProps = {
+    step: number
+    children: ReactNode
+    onStepChange: (value) => void
+    onComplete: (value) => void
+}
+
+export const CsvImporterFooter = (props: CsvImporterFooterProps) => {
+    const { step, children, onStepChange, onComplete } = props
+    const {
+        options: {
+            text: { back, next, finish },
+        },
+        fileData,
+        records,
+        mapping,
+        header,
+        schema,
+    } = useContext(CsvImporterContext)
+    const { nextDisabled, backDisabled } = useMemo(() => {
+        let nextDisabled = false
+        let backDisabled = false
+
+        switch (step) {
+            case 0:
+                backDisabled = true
+                nextDisabled = !fileData
+                break
+            case 1:
+                backDisabled = false
+                nextDisabled = !header
+                break
+            case 2:
+                backDisabled = false
+                nextDisabled = Object.keys(mapping).length != schema.length
+                break
+            case 3:
+                backDisabled = false
+                nextDisabled = false
+                break
+            case 4:
+                backDisabled = false
+                nextDisabled = false
+                break
+        }
+
+        return {
+            nextDisabled,
+            backDisabled,
+        }
+    }, [step, fileData, records, mapping, header])
+
+    const handleBack = () => {
+        onStepChange(step - 1)
+    }
+
+    const handleNext = () => {
+        switch (step) {
+            case 0:
+                return onStepChange(1)
+            case 1:
+                return onStepChange(2)
+            case 2:
+                return onStepChange(3)
+            case 3:
+                return onStepChange(4)
+            case 4:
+                return onComplete(window[FOLD_CSV_MAPPER_CACHE].map((record) => record.map((r) => r.value)))
+        }
+    }
+
+    return (
+        <View
+            row
+            gap={5}
+            justifyContent="flex-end"
+            width="100%">
+            {children}
+            <Flexer />
+            {step != 0 && step != 4 && (
+                <Button
+                    disabled={backDisabled}
+                    variant="accent"
+                    onClick={handleBack}>
+                    {back}
+                </Button>
+            )}
+            <Button
+                disabled={nextDisabled}
+                variant="accent"
+                onClick={handleNext}>
+                {step == 4 ? finish : next}
+            </Button>
+        </View>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-header-select.tsx b/packages/core/src/csv-importer/csv-importer-header-select.tsx
new file mode 100644
index 0000000..0fe8b8e
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-header-select.tsx
@@ -0,0 +1,93 @@
+import React, { useContext, useEffect, useMemo } from 'react'
+import { CSVtoArray, CsvImporterContext, DataGrid, DataGridProvider, Text, View, useDataGridEvent } from '../'
+
+export type CsvImporterHeaderSelectProps = {}
+
+export const CsvImporterHeaderSelect = (props: CsvImporterHeaderSelectProps) => {
+    const {
+        options: {
+            text: { header },
+        },
+    } = useContext(CsvImporterContext)
+    const { separator, fileData, setHeader, setRecords, setSample } = useContext(CsvImporterContext)
+    const { rows, columnWidths } = useMemo(() => {
+        const rows = CSVtoArray(fileData, separator).map((row: any) =>
+            row.map((value) => ({
+                value,
+                disableEdit: true,
+                disableSelect: true,
+            }))
+        )
+        const hasRows = !!rows.length
+        const columnWidths = hasRows ? rows[0].map(() => '150px') : ['150px']
+        if (hasRows) {
+            if (!rows[rows.length - 1].value) rows.pop()
+        }
+        return { rows, columnWidths }
+    }, [fileData])
+
+    const handleRowSelection = (selection: any) => {
+        if (!Object.keys(selection)[0]) {
+            setHeader(null)
+            return
+        }
+
+        const index = +Object.keys(selection)[0].replace('r-', '')
+        const header = [...rows[index]]
+        const leftoverRows: any = [...rows]
+
+        // cut the index away
+        leftoverRows.splice(index, 1)
+
+        setRecords(leftoverRows)
+        setSample(leftoverRows.slice(0, 3))
+        setHeader(header.map((h) => ({ value: h.value })))
+    }
+
+    const handleDataGridRowSelection = ({ detail }) => {
+        const { instanceId, selection } = detail
+        handleRowSelection(selection)
+    }
+
+    useEffect(() => {
+        if (!!rows.length) handleRowSelection({ 'r-0': true })
+    }, [rows])
+
+    useDataGridEvent('row-selection', handleDataGridRowSelection)
+
+    return (
+        <View
+            column
+            gap={10}
+            width="100%">
+            <DataGridProvider
+                singleRowSelect
+                columnWidths={columnWidths}
+                defaultRowSelection={{ 'r-0': true }}>
+                <DataGrid
+                    rows={rows}
+                    width="100%"
+                    variant="virtual"
+                    pinFirst
+                    virtual={{
+                        rows: 9,
+                        rowHeight: 40,
+                        paddingTop: 0,
+                        // there is usually a header, but here we manually remove the double border
+                        paddingBottom: -1,
+                    }}
+                />
+            </DataGridProvider>
+            <View
+                row
+                width="100%">
+                <Text
+                    size="sm"
+                    fontWeight="bold"
+                    colorToken="text-weaker">
+                    {rows.length} {rows.length == 1 ? header.row : header.rows}
+                </Text>
+            </View>
+        </View>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-steps.tsx b/packages/core/src/csv-importer/csv-importer-steps.tsx
new file mode 100644
index 0000000..e7e0cb3
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-steps.tsx
@@ -0,0 +1,54 @@
+import React, { useContext } from 'react'
+import { CsvImporterContext, Heading, Step, Steps, Text, View } from '../'
+
+export type CsvImporterStepsProps = {
+    step: number
+}
+
+export const CsvImporterSteps = (props: CsvImporterStepsProps) => {
+    const { step } = props
+    const {
+        error,
+        options: {
+            text: { steps },
+        },
+    } = useContext(CsvImporterContext)
+
+    return (
+        <View
+            column
+            width="100%"
+            gap="1rem">
+            <Steps width="100%">
+                <Step
+                    next={step == 0}
+                    completed={step > 0}
+                    indicator={<Text>1</Text>}>
+                    <Heading as="h4">{steps.one.title}</Heading>
+                    <Text size="sm">{steps.one.description}</Text>
+                </Step>
+                <Step
+                    next={step == 1}
+                    completed={step > 1}
+                    indicator={<Text>2</Text>}>
+                    <Heading as="h4">{steps.two.title}</Heading>
+                    <Text size="sm">{steps.two.description}</Text>
+                </Step>
+                <Step
+                    next={step == 2}
+                    completed={step > 2}
+                    indicator={<Text>3</Text>}>
+                    <Heading as="h4">{steps.three.title}</Heading>
+                    <Text size="sm">{steps.three.description}</Text>
+                </Step>
+                <Step
+                    next={step == 3}
+                    completed={step > 3}
+                    indicator={<Text>4</Text>}>
+                    <Heading as="h4">{steps.four.title}</Heading>
+                    <Text size="sm">{steps.four.description}</Text>
+                </Step>
+            </Steps>
+        </View>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-upload.tsx b/packages/core/src/csv-importer/csv-importer-upload.tsx
new file mode 100644
index 0000000..61e3c67
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-upload.tsx
@@ -0,0 +1,56 @@
+import React, { useContext, useMemo, useState } from 'react'
+import { CsvImporterContext, Upload } from '../'
+
+export type CsvImporterUploadProps = {}
+
+export const CsvImporterUpload = (props: CsvImporterUploadProps) => {
+    const {
+        setError,
+        fileData,
+        setFileData,
+        options: {
+            text: {
+                upload: { before, after },
+            },
+        },
+    } = useContext(CsvImporterContext)
+    const [loading, setLoading] = useState(false)
+    const { icon, title, description } = useMemo(() => {
+        return {
+            icon: fileData ? 'check' : 'paperclip',
+            title: fileData ? after.title : before.title,
+            description: fileData ? after.description : before.description,
+        }
+    }, [fileData])
+
+    const handleDrop = (files) => {
+        setLoading(true)
+        const file = files[0]
+        const reader = new FileReader()
+
+        reader.onload = (e: any) => {
+            setFileData(e.target.result)
+            setLoading(false)
+        }
+
+        reader.onerror = (e) => {
+            setError(true)
+            setLoading(false)
+        }
+
+        reader.readAsText(file)
+    }
+
+    return (
+        <Upload
+            position="relative"
+            zIndex={10000}
+            height={500}
+            loading={loading}
+            icon={icon}
+            title={title}
+            description={description}
+            onDrop={handleDrop}
+        />
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer-validation-popup.tsx b/packages/core/src/csv-importer/csv-importer-validation-popup.tsx
new file mode 100644
index 0000000..25c3e18
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer-validation-popup.tsx
@@ -0,0 +1,71 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { CsvImporterContext, CsvImporterSchemaValidationMessage, IconLib, If, Portal, Text, documentObject, getBoundingClientRect } from '../'
+
+export type CsvImporterValidationPopupProps = {
+    validationMessage: CsvImporterSchemaValidationMessage
+} & any
+
+export const CsvImporterValidationPopup = (props: CsvImporterValidationPopupProps) => {
+    const { validationMessage } = props
+    const { messages, row, col } = validationMessage
+    const [box, setBox] = useState<any>({})
+    const { bottom, left } = box
+    const {
+        options: {
+            text: { back, next },
+        },
+    } = useContext(CsvImporterContext)
+
+    useEffect(() => {
+        const cell = `c-${row}-${col}`
+        setBox(getBoundingClientRect(documentObject.querySelectorAll(`[data-id='${cell}']`)[0]))
+    }, [row, col])
+
+    return (
+        <Portal>
+            <If if={!!bottom}>
+                <div
+                    onClick={(e) => {
+                        e.stopPropagation()
+                        e.preventDefault()
+                    }}
+                    style={{ top: bottom, left }}
+                    className="f-csv-importer-validation f-col">
+                    {messages.map((message, index) => (
+                        <div
+                            className="f-row"
+                            key={index}
+                            style={{ gap: 5, width: '100%', justifyContent: 'flex-start' }}>
+                            <IconLib
+                                icon="arrow-right"
+                                size="sm"
+                            />
+                            <Text>{message}</Text>
+                        </div>
+                    ))}
+                    {/* 
+                    {totalValidationMessages > 1 && (
+                        <div
+                            className="f-row"
+                            style={{ width: '100%', marginTop: '1rem' }}>
+                            <Button
+                                size="sm"
+                                disabled={!validationIndex}
+                                onClick={onPrevious}>
+                                {back}
+                            </Button>
+                            <div className="f-flexer" />
+                            <Button
+                                size="sm"
+                                disabled={totalValidationMessages == validationIndex + 1}
+                                onClick={onNext}>
+                                {next}
+                            </Button>
+                        </div>
+                    )}
+                    */}
+                </div>
+            </If>
+        </Portal>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer.css b/packages/core/src/csv-importer/csv-importer.css
new file mode 100644
index 0000000..0f62f43
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.css
@@ -0,0 +1,30 @@
+:root {
+    --f-csv-importer-padding: 1rem;
+    --f-csv-importer-gap: 1.5rem;
+}
+
+.f-csv-importer {
+    padding: var(--f-csv-importer-padding);
+    gap: var(--f-csv-importer-gap);
+    width: 100%;
+    position: relative;
+
+    --f-data-grid-row-padding-left: 2rem;
+    --f-data-grid-row-padding-right: 2px;
+}
+
+.f-csv-importer-validation {
+    position: fixed;
+    z-index: 10000;
+    height: fit-content;
+    width: fit-content;
+    background: var(--f-color-surface);
+    align-items: flex-start;
+    padding: var(--f-space-4);
+    border: 1px solid var(--f-color-border);
+    border-radius: var(--f-radius);
+    border-top-left-radius: 0;
+    box-shadow: var(--f-shadow-card);
+    gap: 0.5rem;
+    min-width: 250px;
+}
diff --git a/packages/core/src/csv-importer/csv-importer.provider.tsx b/packages/core/src/csv-importer/csv-importer.provider.tsx
new file mode 100644
index 0000000..5cc667f
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.provider.tsx
@@ -0,0 +1,79 @@
+import React, { createContext, useState } from 'react'
+import { CsvImporterHeaderCell, CsvImporterMapping, CsvImporterOptions, CsvImporterSchema, defaultOptions } from '../'
+
+export type CsvImporterContext = {
+    schema: CsvImporterSchema[]
+    separator: ',' | ';'
+    options: CsvImporterOptions
+    error: string | boolean
+    setError: (content: string | boolean) => void
+    fileData: string
+    setFileData: (content: string) => void
+    header: CsvImporterHeaderCell[]
+    setHeader: (content: CsvImporterHeaderCell[]) => void
+    records: any[][]
+    setRecords: (content: any[][]) => void
+    mapping: CsvImporterMapping
+    setMapping: (content: CsvImporterMapping) => void
+    sample: any[]
+    setSample: (content: any[]) => void
+}
+
+export const CsvImporterContext = createContext<CsvImporterContext>({
+    schema: [],
+    separator: ',',
+    options: {},
+    error: null,
+    setError: (content) => null,
+    fileData: null,
+    setFileData: (content) => null,
+    header: [],
+    setHeader: (content) => null,
+    records: [],
+    setRecords: (content) => null,
+    mapping: [],
+    setMapping: (content) => null,
+    sample: [],
+    setSample: (content) => null,
+})
+
+export const CsvImporterProvider = ({
+    children,
+    separator,
+    schema = [],
+    defaultMapping = {},
+    defaultRecords = [],
+    defaultHeader = [],
+    defaultCsvData = '',
+    options = defaultOptions,
+}) => {
+    const [error, setError] = useState<any>(null)
+    const [header, setHeader] = useState<any>(defaultHeader)
+    const [records, setRecords] = useState<any>(defaultRecords)
+    const [sample, setSample] = useState<any>([])
+    const [mapping, setMapping] = useState<any>(defaultMapping)
+    const [fileData, setFileData] = useState<any>(defaultCsvData)
+
+    return (
+        <CsvImporterContext.Provider
+            value={{
+                separator,
+                options,
+                schema,
+                error,
+                setError,
+                fileData,
+                setFileData,
+                header,
+                setHeader,
+                records,
+                setRecords,
+                mapping,
+                setMapping,
+                sample,
+                setSample,
+            }}>
+            {children}
+        </CsvImporterContext.Provider>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer.stories.tsx b/packages/core/src/csv-importer/csv-importer.stories.tsx
new file mode 100644
index 0000000..68719b1
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.stories.tsx
@@ -0,0 +1,84 @@
+import { Link, View } from '@fold-dev/core'
+import React from 'react'
+import { CsvImporter } from '../'
+import './csv-importer.css'
+
+export default {
+    title: 'Components/CsvImporter',
+    component: CsvImporter,
+    excludeStories: 'docs',
+}
+
+export const docs = {
+    title: 'CSV Importer',
+    subtitle: 'Make sense of imported data by correctly mapping columns with the CSV Importer.',
+    description:
+        'The CSV Importer component offers a streamlined way of onboarding complex data - ideal for customer success, onboarding & data teams.',
+    experimental: true,
+}
+
+export const Usage = () => {
+    return (
+        <CsvImporter
+            step={0}
+            separator=","
+            onComplete={(data) => console.log('data', data)}
+            // defaultCsvData={data.csv}
+            // defaultRecords={data.records}
+            // defaultHeader={data.headers}
+            // defaultMapping={data.mapping}
+            schema={[
+                { key: 'year', label: 'Year', type: 'string' },
+                { key: 'variable', label: 'Variable', type: 'string' },
+                // { key: 'customer-id', label: 'Customer ID', type: 'string' },
+                // { key: 'first-name', label: 'First Name', type: 'string' },
+                // { key: 'last-name', label: 'Last Name', type: 'string' },
+                // { key: 'company', label: 'Company', type: 'string' },
+                // { key: 'website', label: 'Website', type: 'string' },
+                // {
+                //     key: 'email',
+                //     label: 'Email',
+                //     type: 'string',
+                //     validate: ({ value }) => {
+                //         const valid = String(value)
+                //             .toLowerCase()
+                //             .match(
+                //                 /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                //             )
+
+                //         if (valid) {
+                //             return []
+                //         } else {
+                //             return ['Not a valid email address']
+                //         }
+                //     },
+                // },
+                // {
+                //     key: 'subscription-date',
+                //     label: 'Subscription Date',
+                //     type: 'date',
+                //     transform: ({ value }) => {
+                //         return new Date(value).toLocaleDateString('en-US', {
+                //             weekday: 'short',
+                //             year: 'numeric',
+                //             month: 'long',
+                //             day: 'numeric',
+                //         })
+                //     },
+                // },
+            ]}
+            toolbar={
+                <View
+                    row
+                    gap={5}
+                    justifyContent="flex-start">
+                    <Link
+                        href="https://drive.google.com/uc?id=1x2IdSNcHGLmot9i1h90gwMJr5lULC2QV&export=download"
+                        target="_blank">
+                        Download CSV file ↗
+                    </Link>
+                </View>
+            }
+        />
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer.tsx b/packages/core/src/csv-importer/csv-importer.tsx
new file mode 100644
index 0000000..055fa1c
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.tsx
@@ -0,0 +1,68 @@
+import React, { ReactNode, useState } from 'react'
+import { CoreViewProps, View } from '../'
+import { CsvImporterColumnMap } from './csv-importer-column-map'
+import { CsvImporterDataClean } from './csv-importer-data-clean'
+import { CsvImporterDone } from './csv-importer-done'
+import { CsvImporterFooter } from './csv-importer-footer'
+import { CsvImporterHeaderSelect } from './csv-importer-header-select'
+import { CsvImporterSteps } from './csv-importer-steps'
+import { CsvImporterUpload } from './csv-importer-upload'
+import { CsvImporterProvider } from './csv-importer.provider'
+import { CsvImporterHeaderCell, CsvImporterMapping, CsvImporterSchema } from './csv-importer.types'
+
+export let FOLD_CSV_MAPPER_CACHE = 'FOLD_CSV_MAPPER_CACHE'
+
+export type CsvImporterProps = {
+    toolbar?: ReactNode
+    schema?: CsvImporterSchema[]
+    step?: number
+    separator?: ',' | ';'
+    defaultCsvData?: string
+    defaultMapping: CsvImporterMapping
+    defaultRecords: any[][]
+    defaultHeader: CsvImporterHeaderCell[]
+    onComplete: (data) => void
+} & CoreViewProps &
+    any
+
+export const CsvImporter = (props: CsvImporterProps) => {
+    const {
+        toolbar,
+        schema,
+        separator = ',',
+        defaultCsvData,
+        defaultMapping,
+        defaultRecords,
+        defaultHeader,
+        onComplete,
+    } = props
+    const [step, setStep] = useState(props.step || 0)
+
+    return (
+        <CsvImporterProvider
+            schema={schema}
+            separator={separator}
+            defaultCsvData={defaultCsvData}
+            defaultMapping={defaultMapping}
+            defaultRecords={defaultRecords}
+            defaultHeader={defaultHeader}>
+            <View
+                column
+                className="f-csv-importer"
+                alignItems="flex-start">
+                <CsvImporterSteps step={step} />
+                {step == 0 && <CsvImporterUpload />}
+                {step == 1 && <CsvImporterHeaderSelect />}
+                {step == 2 && <CsvImporterColumnMap />}
+                {step == 3 && <CsvImporterDataClean />}
+                {step == 4 && <CsvImporterDone />}
+                <CsvImporterFooter
+                    step={step}
+                    onStepChange={setStep}
+                    onComplete={onComplete}>
+                    {toolbar}
+                </CsvImporterFooter>
+            </View>
+        </CsvImporterProvider>
+    )
+}
diff --git a/packages/core/src/csv-importer/csv-importer.types.ts b/packages/core/src/csv-importer/csv-importer.types.ts
new file mode 100644
index 0000000..e678135
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.types.ts
@@ -0,0 +1,137 @@
+export type CsvImporterSchema = {
+    key: string
+    label: string
+    type?: string
+    validate?: (value) => string[]
+    transform?: (value) => void
+}
+
+export type CsvImporterSchemaValidationMessage = {
+    messages: string[]
+    row: number
+    col: number
+}
+
+export type CsvImporterOptions = {
+    text?: {
+        back: string
+        next: string
+        finish: string
+        dialog: {
+            title: string
+            description: string
+            cancel: string
+            confirm: string
+        }
+        header: {
+            row: string
+            rows: string
+        }
+        toolbar: {
+            row: string
+            rows: string
+            delete: string
+        }
+        complete: {
+            title: string
+            description: string
+        }
+        steps: {
+            one: {
+                title: string
+                description: string
+            }
+            two: {
+                title: string
+                description: string
+            }
+            three: {
+                title: string
+                description: string
+            }
+            four: {
+                title: string
+                description: string
+            }
+        }
+        map: {
+            data: string
+            sample: string
+            schema: string
+        }
+        upload: {
+            before: {
+                title: string
+                description: string
+            }
+            after: {
+                title: string
+                description: string
+            }
+        }
+    }
+}
+
+export const defaultOptions: CsvImporterOptions = {
+    text: {
+        back: 'Back',
+        next: 'Next',
+        finish: 'Finish',
+        dialog: {
+            title: 'Are you sure?',
+            description: 'This cannot be undone & you will lose the rows. Sure you want to continue?',
+            cancel: 'Cancel',
+            confirm: 'Delete',
+        },
+        header: {
+            row: 'record found',
+            rows: 'records found',
+        },
+        toolbar: {
+            row: 'row selected',
+            rows: 'rows selected',
+            delete: 'Delete?',
+        },
+        complete: {
+            title: 'Completed',
+            description: 'Thank you so much, we have processed your file.',
+        },
+        steps: {
+            one: {
+                title: 'Source',
+                description: 'Select a file',
+            },
+            two: {
+                title: 'Headers',
+                description: 'Select headers',
+            },
+            three: {
+                title: 'Mapping',
+                description: 'Map columns',
+            },
+            four: {
+                title: 'Review',
+                description: 'Clean data',
+            },
+        },
+        map: {
+            data: 'Data Column',
+            sample: 'Data Sample',
+            schema: 'Target Schema Column',
+        },
+        upload: {
+            before: {
+                title: 'Upload File',
+                description: 'Click or drop your files here to begin your upload.',
+            },
+            after: {
+                title: 'Uploaded',
+                description: 'File contents retreived successfully - click next to continue!',
+            },
+        },
+    },
+}
+
+export type CsvImporterHeaderCell = { value: string } & any
+
+export type CsvImporterMapping = { [n: number]: string }
diff --git a/packages/core/src/csv-importer/csv-importer.util.ts b/packages/core/src/csv-importer/csv-importer.util.ts
new file mode 100644
index 0000000..6d1869b
--- /dev/null
+++ b/packages/core/src/csv-importer/csv-importer.util.ts
@@ -0,0 +1,70 @@
+/*
+ * https://stackoverflow.com/questions/8493195/how-can-i-parse-a-csv-string-with-javascript-which-contains-comma-in-data
+ */
+export const CSVtoArray1 = (text, separator = ',') => {
+    let re_valid =
+        /^\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*(?:,\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^,'"\s\\]*(?:\s+[^,'"\s\\]+)*)\s*)*$/
+    let re_value =
+        /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|([^,'"\s\\]*(?:\s+[^,'"\s\\]+)*))\s*(?:,|$)/g
+
+    if (separator == ';') {
+        re_valid =
+            /^\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^;'"\s\\]*(?:\s+[^;'"\s\\]+)*)\s*(?:;\s*(?:'[^'\\]*(?:\\[\S\s][^'\\]*)*'|"[^"\\]*(?:\\[\S\s][^"\\]*)*"|[^;'"\s\\]*(?:\s+[^;'"\s\\]+)*)\s*)*$/
+        re_value =
+            /(?!\s*$)\s*(?:'([^'\\]*(?:\\[\S\s][^'\\]*)*)'|"([^"\\]*(?:\\[\S\s][^"\\]*)*)"|([^;'"\s\\]*(?:\s+[^;'"\s\\]+)*))\s*(?:;|$)/g
+    }
+
+    if (!re_valid.test(text)) console.log(re_valid.test(text), text)
+
+    // Return NULL if input string is not well formed CSV string.
+    if (!re_valid.test(text)) return null
+
+    const a = [] // Initialize array to receive values.
+
+    text.replace(
+        re_value, // "Walk" the string using replace with callback.
+        function (m0, m1, m2, m3) {
+            // Remove backslash from \' in single quoted values.
+            if (m1 !== undefined) a.push(m1.replace(/\\'/g, "'"))
+            // Remove backslash from \" in double quoted values.
+            else if (m2 !== undefined) a.push(m2.replace(/\\"/g, '"'))
+            else if (m3 !== undefined) a.push(m3)
+            return '' // Return empty string.
+        }
+    )
+
+    // Handle special case of empty last value.
+    if (/,\s*$/.test(text)) a.push('')
+
+    return a
+}
+
+export const columnSortFunc = (index, type) => {
+    switch (type) {
+        case 'string':
+            return (a, b) => a[index].value.localeCompare(b[index].value)
+            break
+        case 'number':
+            return (a, b) => +a[index].value - +b[index].value
+            break
+        case 'date':
+            return (a, b) => new Date(a[index].value).getTime() - new Date(b[index].value).getTime()
+            break
+    }
+}
+
+export const CSVtoArray = (strData, separator = ',') => {
+    const objPattern =
+        separator == ','
+            ? new RegExp('(\\,|\\r?\\n|\\r|^)(?:"([^"]*(?:""[^"]*)*)"|([^\\,\\r\\n]*))', 'gi')
+            : new RegExp('(\\;|\\r?\\n|\\r|^)(?:"([^"]*(?:""[^"]*)*)"|([^\\;\\r\\n]*))', 'gi')
+    let arrMatches = null,
+        arrData = [[]]
+    while ((arrMatches = objPattern.exec(strData))) {
+        if (arrMatches[1].length && arrMatches[1] !== ',') arrData.push([])
+        arrData[arrData.length - 1].push(
+            arrMatches[2] ? arrMatches[2].replace(new RegExp('""', 'g'), '"') : arrMatches[3]
+        )
+    }
+    return arrData
+}
diff --git a/packages/core/src/csv-importer/index.ts b/packages/core/src/csv-importer/index.ts
new file mode 100644
index 0000000..3dfe336
--- /dev/null
+++ b/packages/core/src/csv-importer/index.ts
@@ -0,0 +1,13 @@
+export * from './csv-importer-column-map-row'
+export * from './csv-importer-column-map'
+export * from './csv-importer-data-clean'
+export * from './csv-importer-done'
+export * from './csv-importer-footer'
+export * from './csv-importer-header-select'
+export * from './csv-importer-steps'
+export * from './csv-importer-upload'
+export * from './csv-importer-validation-popup'
+export * from './csv-importer.provider'
+export * from './csv-importer'
+export * from './csv-importer.types'
+export * from './csv-importer.util'
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index e87b1db..40287a8 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -17,6 +17,7 @@ export * from './contexts'
 export * from './cookie'
 export * from './copy'
 export * from './cropper'
+export * from './csv-importer'
 export * from './data-grid'
 export * from './date-picker'
 export * from './dialog'
diff --git a/packages/core/src/styles/styles.css b/packages/core/src/styles/styles.css
index 2a385e4..636293b 100644
--- a/packages/core/src/styles/styles.css
+++ b/packages/core/src/styles/styles.css
@@ -94,5 +94,6 @@ we don't want to use !important
 @import '../drag/drag.css';
 @import '../data-grid/data-grid.css';
 @import '../date-picker/date-picker.css';
+@import '../csv-importer/csv-importer.css';