Merge pull request #1 from openscript/develop

openscript · web-flow · commit 0ca0156e1ad3 · 2020-04-14T09:36:59.000+02:00
Make dsv import compositable
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,7 +14,8 @@ module.exports = {
     sourceType: "module"
   },
   rules: {
-    "@typescript-eslint/explicit-function-return-type": "off"
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react/prop-types": "off"
   },
   settings: {
     react: {
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # react-dsv-import
-Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.
+Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats ([DSV](https://en.wikipedia.org/wiki/Delimiter-separated_values)) import functionality.
 
 ![Travis (.com)](https://img.shields.io/travis/com/openscript/react-dsv-import) ![npm](https://img.shields.io/npm/v/react-dsv-import) ![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-dsv-import/peer/react) ![GitHub](https://img.shields.io/github/license/openscript/react-dsv-import)
 
@@ -12,30 +12,36 @@ Add the package with the package manager of choice to your project:
 
 ### TypeScript
 ```
-import { ColumnsType, DSVImport } from 'react-dsv-import';
+import { DSVImport, ColumnsType, TablePreview, TextareaInput } from 'react-dsv-import';
 
-type ImportType = { forename: string; surname: string; email: string };
+type BasicType = { forename: string; surname: string; email: string };
 
-const columns: ColumnsType<ImportType> = [
+const columns: ColumnsType<BasicType> = [
   { key: 'forename', label: 'Forename' },
   { key: 'surname', label: 'Surname' },
   { key: 'email', label: 'Email' }
 ];
 
-<DSVImport<ImportType> columns={columns} />
+<DSVImport<BasicType> columns={columns}>
+  <TextareaInput />
+  <TablePreview />
+</DSVImport>
 ```
 
 ### JavaScript
 ```
-import { DSVImport } from 'react-dsv-import';
+import { DSVImport, TablePreview, TextareaInput } from 'react-dsv-import';
 
 const columns = [
   { key: 'forename', label: 'Forename' },
   { key: 'surname', label: 'Surname' },
   { key: 'email', label: 'Email' }
 ];
 
-<DSVImport columns={columns} />
+<DSVImport columns={columns}>
+  <TextareaInput />
+  <TablePreview />
+</DSVImport>
 ```
 
 ## Project
@@ -46,10 +52,10 @@ The most important features of this component are:
 
  - ✅ Type definitions and type safety
  - ✅ DSV format detection
+ - ✅ Fully compositable
  - ❌ Input validation
  - ❌ [Material UI](https://material-ui.com/) integration
  - ❌ [ant.design](https://ant.design/) integration
- - ❌ Fully compositable
 
 ✅ means the feature is implemented and released. ❌ indicates that a feature is planned.
 
diff --git a/package.json b/package.json
@@ -1,16 +1,20 @@
 {
   "name": "react-dsv-import",
   "description": "Flexible, typed and easy to use React Component ⚛ to provide CSV, TSV and other delimiter-separated values formats (DSV) import functionality.",
-  "keywords": ["react-component", "typescript", "react"],
+  "keywords": [
+    "react-component",
+    "typescript",
+    "react"
+  ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.0.7",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@rollup/plugin-typescript": "^4.0.0",
+    "@rollup/plugin-typescript": "^4.1.1",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-info": "^5.3.18",
@@ -22,17 +26,17 @@
     "@types/node": "^13.11.1",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "prettier": "^2.0.4",
     "react-is": "^16.13.1",
-    "rollup": "^2.6.0",
+    "rollup": "^2.6.1",
     "ts-node": "^8.8.2",
     "tslib": "^1.11.1",
     "typescript": "^3.8.3"
diff --git a/src/DSVImport.stories.tsx b/src/DSVImport.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { DSVImport, ColumnsType, TablePreview, TextareaInput } from './';
+import { action } from '@storybook/addon-actions';
+
+export default { title: 'Usage' };
+
+type BasicType = { forename: string; surname: string; email: string };
+
+const columns: ColumnsType<BasicType> = [
+  { key: 'forename', label: 'Forename' },
+  { key: 'surname', label: 'Surname' },
+  { key: 'email', label: 'Email' }
+];
+
+const onChangeAction = action('Parsed value has changed');
+
+export const BasicUsage = () => {
+  return (
+    <DSVImport<BasicType> columns={columns} onChange={onChangeAction}>
+      <TextareaInput />
+      <TablePreview />
+    </DSVImport>
+  );
+};
+BasicUsage.story = { name: 'Basic usage' };
diff --git a/src/DSVImport.tsx b/src/DSVImport.tsx
@@ -0,0 +1,22 @@
+import React, { PropsWithChildren, useReducer } from 'react';
+import { ColumnsType } from './models/column';
+import { getDSVImportContext } from './features/context';
+import { createSimpleParserMiddleware } from './middlewares/simpleParserMiddleware';
+import { State } from './models/state';
+
+interface Props<T> {
+  onChange?: (value: T[]) => void;
+  columns: ColumnsType<T>;
+}
+
+export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
+  const DSVImportContext = getDSVImportContext<T>();
+  const middleware = createSimpleParserMiddleware<T>(props.onChange);
+  const initialValues: State<T> = { columns: props.columns };
+
+  return (
+    <DSVImportContext.Provider value={useReducer(middleware, initialValues)}>
+      {props.children}
+    </DSVImportContext.Provider>
+  );
+};
diff --git a/src/components/DSVImport.stories.tsx b/src/components/DSVImport.stories.tsx
diff --git a/src/components/DSVImport.tsx b/src/components/DSVImport.tsx
diff --git a/src/components/inputs/TextareaInput.tsx b/src/components/inputs/TextareaInput.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { useDSVImport } from '../../features/context';
+
+export const TextareaInput: React.FC = () => {
+  const [, dispatch] = useDSVImport();
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    dispatch({ type: 'setRaw', raw: event.target.value });
+  };
+
+  return <textarea onChange={handleChange}></textarea>;
+};
diff --git a/src/components/previews/TablePreview.tsx b/src/components/previews/TablePreview.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useDSVImport } from '../../features/context';
+
+export const TablePreview: React.FC = () => {
+  const [context] = useDSVImport();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {context.columns.map((column, columnIndex) => (
+            <th key={columnIndex}>{column.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {context.parsed
+          ? context.parsed.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {context.columns.map((column, columnIndex) => {
+                  return <td key={columnIndex}>{row[column.key]}</td>;
+                })}
+              </tr>
+            ))
+          : null}
+      </tbody>
+    </table>
+  );
+};
diff --git a/src/features/context.ts b/src/features/context.ts
@@ -0,0 +1,28 @@
+import { State, emptyState } from '../models/state';
+import { createContext, Dispatch, useContext } from 'react';
+
+export type Actions = { type: 'setRaw'; raw: string };
+
+export const reducer = <T>(state: State<T>, action: Actions) => {
+  switch (action.type) {
+    case 'setRaw':
+      return { ...state, raw: action.raw };
+    default:
+      return state;
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let contextSingleton: React.Context<[State<any>, Dispatch<Actions>]>;
+export const getDSVImportContext = <T>() => {
+  if (!contextSingleton) {
+    contextSingleton = createContext<[State<T>, Dispatch<Actions>]>([
+      (emptyState as unknown) as State<T>,
+      () => {
+        throw new Error('Not initialized');
+      }
+    ]);
+  }
+  return contextSingleton as React.Context<[State<T>, Dispatch<Actions>]>;
+};
+export const useDSVImport = <T = { [key: string]: string }>() => useContext(getDSVImportContext<T>());
diff --git a/src/index.tsx b/src/index.tsx
@@ -1 +1,12 @@
-export * from './components/DSVImport';
+// composite
+export * from './DSVImport';
+
+// components
+export * from './components/inputs/TextareaInput';
+export * from './components/previews/TablePreview';
+
+// features
+export { useDSVImport } from './features/context';
+
+// models
+export * from './models/column';
diff --git a/src/middlewares/simpleParserMiddleware.ts b/src/middlewares/simpleParserMiddleware.ts
@@ -0,0 +1,46 @@
+import { State } from '../models/state';
+import { Actions, reducer } from '../features/context';
+import { Delimiter } from '../models/delimiter';
+import { ColumnsType } from '../models/column';
+
+const detectDelimiterFromValue = (value: string, defaultDelimiter = Delimiter.COMMA) => {
+  let currentDelimiter = defaultDelimiter;
+  let maximumScore = 0;
+  Object.values(Delimiter).forEach((s) => {
+    const currentScore = (value.match(new RegExp(s, 'g')) || []).length;
+    if (maximumScore < currentScore) {
+      currentDelimiter = s;
+      maximumScore = currentScore;
+    }
+  });
+  return currentDelimiter;
+};
+
+const parseData = <T>(value: string, columns: ColumnsType<T>, delimiter: Delimiter) => {
+  const lines = value.split('\n');
+  return lines.map((line) => {
+    const lineValues = line.split(delimiter);
+    const parsedLine = {} as T;
+    columns.forEach((column, columnIndex) => {
+      parsedLine[column.key] = (lineValues[columnIndex] as unknown) as T[keyof T];
+    });
+    return parsedLine;
+  });
+};
+
+export const createSimpleParserMiddleware = <T>(onChange?: (value: T[]) => void) => {
+  return (state: State<T>, action: Actions) => {
+    let newState = reducer<T>(state, action);
+
+    if (action.type === 'setRaw') {
+      const delimiter = detectDelimiterFromValue(action.raw);
+      const parsed = parseData<T>(action.raw, state.columns, delimiter);
+      if (onChange) {
+        onChange(parsed);
+      }
+      newState = { ...newState, parsed };
+    }
+
+    return newState;
+  };
+};
diff --git a/src/models/column.ts b/src/models/column.ts
@@ -0,0 +1 @@
+export type ColumnsType<T> = { key: keyof T; label: string }[];
diff --git a/src/models/delimiter.ts b/src/models/delimiter.ts
diff --git a/src/models/state.ts b/src/models/state.ts
diff --git a/yarn.lock b/yarn.lock
