Add transformer middleware

Author: openscript

.vscode/launch.json

@@ -0,0 +1,37 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest All",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      },
+      "runtimeExecutable": "~/.asdf/shims/node"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": [
+        "${fileBasenameNoExtension}",
+        "--config",
+        "jest.config.js"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      },
+      "runtimeExecutable": "~/.asdf/shims/node"
+    }
+  ]
+}

README.md

@@ -63,7 +63,7 @@ The most important features of this component are:
  - ✅ Automatic testing with >90% coverage
  - ✅ Input validation
  - ✅ [Ant Design](https://ant.design/) integration (see storybook)
- - ❌ Input transformation
+ - ✅ Input transformation (e.g. trim, ...)
  - ❌ [Material UI](https://material-ui.com/) integration (see storybook)
 
 ✅ means the feature is implemented and released. ❌ indicates that a feature is planned.
@@ -91,3 +91,4 @@ The most important features of this component are:
  - [Article: Using ESLint and Prettier in a TypeScript Project](https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project)
  - [Template: Rollup Starter Lib (TypeScript)](https://github.com/rollup/rollup-starter-lib/tree/typescript)
  - [Article: Creating a React Component library using Rollup, Typescript, Sass and Storybook](https://blog.harveydelaney.com/creating-your-own-react-component-library/) <br> Explains how to create a React component library using Rollup
+ - [Template: Debugging tests in VS Code](https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests)

package.json

@@ -7,7 +7,7 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",

src/DSVImport.tsx

@@ -6,6 +6,8 @@ import { State } from './models/state';
 import { applyMiddlewares } from './middlewares/middleware';
 import { createValidatorMiddleware } from './middlewares/validatorMiddleware';
 import { ValidationError } from './models/validation';
+import { Transformers } from './models/transformer';
+import { createTransformerMiddleware } from './middlewares/transformerMiddleware';
 
 interface EventListenerProps<T> {
   onChange?: (value: T[]) => void;
@@ -33,14 +35,21 @@ const EventListener = <T extends { [key: string]: string }>(props: EventListener
 export interface Props<T> {
   onChange?: (value: T[]) => void;
   onValidation?: (errors: ValidationError<T>[]) => void;
+  transformers?: Transformers<T>;
   columns: ColumnsType<T>;
 }
 
 export const DSVImport = <T extends { [key: string]: string }>(props: PropsWithChildren<Props<T>>) => {
   const DSVImportContext = getDSVImportContext<T>();
-  const initialValues: State<T> = { columns: props.columns };
+  const initialValues: State<T> = { columns: props.columns, transformers: props.transformers };
   const [state, dispatch] = useReducer(createReducer<T>(), initialValues);
-  const enhancedDispatch = applyMiddlewares(state, dispatch, createParserMiddleware(), createValidatorMiddleware());
+  const enhancedDispatch = applyMiddlewares(
+    state,
+    dispatch,
+    createParserMiddleware(),
+    createTransformerMiddleware(),
+    createValidatorMiddleware()
+  );
 
   return (
     <DSVImportContext.Provider value={[state, enhancedDispatch]}>

src/middlewares/transformerMiddleware.test.ts

@@ -0,0 +1,63 @@
+import { ColumnsType } from '../models/column';
+import { State } from '../models/state';
+import { createTransformerMiddleware } from './transformerMiddleware';
+
+describe('validatorMiddleware', () => {
+  type TestType = { forename: string; surname: string; email: string };
+  const defaultColumns: ColumnsType<TestType> = [
+    { key: 'forename', label: 'Forename' },
+    { key: 'surname', label: 'Surname' },
+    { key: 'email', label: 'Email' }
+  ];
+  const middleware = createTransformerMiddleware<TestType>();
+  const parsed: TestType[] = [
+    { forename: 'Hans', surname: 'Muster', email: '[email protected]' },
+    { forename: 'Heidi', surname: ' Muster', email: '[email protected]' },
+    { forename: 'Joe', surname: 'Doe', email: ' [email protected] ' }
+  ];
+
+  it('should not dispatch if there are no transformers', () => {
+    const state: State<TestType> = { columns: defaultColumns };
+    const dispatchMock = jest.fn();
+
+    middleware(state, dispatchMock, { type: 'setParsed', parsed });
+    expect(dispatchMock).toBeCalledTimes(0);
+  });
+
+  it('should run a transformer on all values', () => {
+    const trimTransformer = (value: string) => value.trim();
+    const state: State<TestType> = { columns: defaultColumns, transformers: [{ transformer: trimTransformer }] };
+    const dispatchMock = jest.fn();
+
+    middleware(state, dispatchMock, { type: 'setParsed', parsed });
+
+    expect(dispatchMock).toBeCalledWith({
+      type: 'setParsed',
+      parsed: [
+        { forename: 'Hans', surname: 'Muster', email: '[email protected]' },
+        { forename: 'Heidi', surname: 'Muster', email: '[email protected]' },
+        { forename: 'Joe', surname: 'Doe', email: '[email protected]' }
+      ]
+    });
+  });
+
+  it('should run transformers on values of a certain column', () => {
+    const trimTransformer = (value: string) => value.trim();
+    const state: State<TestType> = {
+      columns: defaultColumns,
+      transformers: [{ transformer: trimTransformer, column: 'surname' }]
+    };
+    const dispatchMock = jest.fn();
+
+    middleware(state, dispatchMock, { type: 'setParsed', parsed });
+
+    expect(dispatchMock).toBeCalledWith({
+      type: 'setParsed',
+      parsed: [
+        { forename: 'Hans', surname: 'Muster', email: '[email protected]' },
+        { forename: 'Heidi', surname: 'Muster', email: '[email protected]' },
+        { forename: 'Joe', surname: 'Doe', email: ' [email protected] ' }
+      ]
+    });
+  });
+});

src/middlewares/transformerMiddleware.ts

@@ -0,0 +1,36 @@
+import { State } from '../models/state';
+import { Dispatch } from 'react';
+import { Actions } from '../models/actions';
+import { TransformerConfiguration } from '../models/transformer';
+import { ColumnsType } from '../models/column';
+
+const executeTransformer = <T>(
+  values: T[],
+  transformerConfiguration: TransformerConfiguration<T>,
+  columns: ColumnsType<T>
+) => {
+  const currentColumns = transformerConfiguration.column
+    ? columns.filter((c) => c.key === transformerConfiguration.column)
+    : columns;
+  return values.map<T>((r) => {
+    const transformed = { ...r };
+    currentColumns.forEach((c) => {
+      transformed[c.key] = (transformerConfiguration.transformer(
+        new String(r[c.key]).toString()
+      ) as unknown) as T[keyof T];
+    });
+    return transformed;
+  });
+};
+
+export const createTransformerMiddleware = <T>() => {
+  return (state: State<T>, next: Dispatch<Actions<T>>, action: Actions<T>) => {
+    if (action.type === 'setParsed' && state.transformers) {
+      const parsed = state.transformers.reduce<T[]>(
+        (acc, t) => executeTransformer(acc, t, state.columns),
+        action.parsed
+      );
+      next({ type: 'setParsed', parsed });
+    }
+  };
+};

src/models/state.ts

@@ -1,10 +1,12 @@
 import { ColumnsType } from './column';
 import { ValidationError } from './validation';
+import { Transformers } from './transformer';
 
 export interface State<T> {
   raw?: string;
   parsed?: T[];
   validation?: ValidationError<T>[];
+  transformers?: Transformers<T>;
   columns: ColumnsType<T>;
 }
 

src/models/transformer.ts

@@ -0,0 +1,3 @@
+export type Transformer = (value: string) => string;
+export type TransformerConfiguration<T> = { transformer: Transformer; column?: keyof T };
+export type Transformers<T> = TransformerConfiguration<T>[];