Implement basic dsv import

Author: openscript

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   semi: true,
-  trailingComma: "all",
+  trailingComma: "none",
   singleQuote: true,
   printWidth: 120,
   tabWidth: 2

.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   stories: ['../src/**/*.stories.[tj]sx'],
-  addons: ['@storybook/preset-typescript'],
+  addons: ['@storybook/preset-typescript', '@storybook/addon-actions/register'],
   webpackFinal: async config => {
     config.module.rules.push({
       test: /\.(ts|tsx)$/,

src/DSVImport.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DSVImport, ColumnsType } from './DSVImport';
+import { actions } from '@storybook/addon-actions';
+
+export default { title: 'DSVImport' };
+
+const defaultActions = actions('onChange');
+
+type MinimalType = { forename: string; surname: string; email: string };
+const minimalColumns: ColumnsType<MinimalType> = [
+  { key: 'forename', label: 'Forename' },
+  { key: 'surname', label: 'Surname' },
+  { key: 'email', label: 'Email' }
+];
+export const Minimal = () => {
+  return <DSVImport<MinimalType> columns={minimalColumns} {...defaultActions} />;
+};

src/DSVImport.tsx

@@ -0,0 +1,77 @@
+import React, { PropsWithChildren } from 'react';
+
+enum Separator {
+  COMMA = ',',
+  TAB = '\t'
+}
+
+export type ColumnsType<T> = { key: keyof T; label: string }[];
+
+interface Props<T> {
+  onChange: (value: T[]) => void;
+  columns: ColumnsType<T>;
+}
+
+export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
+  const [separator, setSeparator] = React.useState<Separator>(Separator.COMMA);
+  const [data, setData] = React.useState<T[]>([]);
+
+  const detectSeparatorFromValue = (value: string) => {
+    let currentSeparator = separator;
+    let maximumScore = 0;
+    Object.values(Separator).forEach((s) => {
+      const currentScore = (value.match(new RegExp(s, 'g')) || []).length;
+      if (maximumScore < currentScore) {
+        currentSeparator = s;
+        maximumScore = currentScore;
+      }
+    });
+    return currentSeparator;
+  };
+
+  const parseData = (value: string, separator: Separator) => {
+    const lines = value.split('\n');
+    const parsedData = lines.map((line) => {
+      const lineValues = line.split(separator);
+      const parsedLine: T = {} as T;
+      props.columns.forEach((column, columnIndex) => {
+        parsedLine[column.key] = lineValues[columnIndex] as T[keyof T];
+      });
+      return parsedLine;
+    });
+    setData(parsedData);
+    props.onChange(parsedData);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const currentSeparator = detectSeparatorFromValue(event.target.value);
+    setSeparator(currentSeparator);
+    parseData(event.target.value, currentSeparator);
+  };
+
+  return (
+    <>
+      <textarea onChange={handleChange}></textarea>
+      <table>
+        <thead>
+          <tr>
+            {props.columns.map((c, i) => {
+              return <th key={i}>{c.label}</th>;
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((line, lineIndex) => {
+            return (
+              <tr key={lineIndex}>
+                {props.columns.map((c, i) => {
+                  return <td key={i}>{line[c.key]}</td>;
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </>
+  );
+};

src/components/DSVImport.stories.tsx

@@ -1,3 +1,3 @@
-import { DSVImport } from './DSVImport';
+import { DSVImport } from './components/DSVImport';
 
 export { DSVImport };