Merge pull request #17 from openscript/develop

Upgrade dependencies

.storybook/main.js

@@ -1,23 +1,17 @@
 module.exports = {
   stories: [
-    '../docs/**/*.stories.([tj]sx|mdx)',
-    '../src/**/*.stories.([tj]sx|mdx)'
+    '../docs/start.stories.mdx',
+    '../src/**/*.stories.@([tj]sx|mdx)',
+    '../docs/**/*.stories.@([tj]sx|mdx)'
   ],
   addons: [
-    '@storybook/preset-typescript', 
     '@storybook/addon-actions/register', 
-    '@storybook/addon-storysource', 
-    '@storybook/addon-docs'
-  ],
-  webpackFinal: async config => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
+    '@storybook/addon-storysource',
+    {
+      name: '@storybook/addon-docs',
       options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
+        configureJSX: true,
       },
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
+    }
+  ]
 };

docs/antd-integration.stories.mdx

@@ -1,7 +1,7 @@
 import { Meta, Description, Source } from '@storybook/addon-docs/blocks';
 import Readme from '../README.md';
 
-<Meta title="Usage|Integrations/Ant Design" />
+<Meta title="Integrations/Ant Design" />
 
 # Ant Design integration
 This page shows how an input and a preview component with Ant Design (`>= 4`) can be built and connected to this component.

docs/material-integration.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Description, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Usage|Integrations/Material UI" />
+<Meta title="Integrations/Material UI" />
 
 # Material UI integration
 This page shows how an input and a preview component with Material UI can be built and connected to this component. It's possible to put everything into one file.

docs/start.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Description } from '@storybook/addon-docs/blocks';
 import Readme from '../README.md';
 
-<Meta title="Start|Readme" />
+<Meta title="Start" />
 
 <Description markdown={Readme} />

package.json

@@ -7,48 +7,47 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
-  "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.10.2",
+    "@babel/core": "^7.10.5",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
-    "@rollup/plugin-typescript": "^4.1.2",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^10.2.1",
+    "@rollup/plugin-typescript": "^5.0.2",
+    "@storybook/addon-actions": "^6.0.0-rc.5",
+    "@storybook/addon-docs": "^6.0.0-rc.5",
+    "@storybook/addon-links": "^6.0.0-rc.5",
+    "@storybook/addon-storysource": "^6.0.0-rc.5",
+    "@storybook/addons": "^6.0.0-rc.5",
+    "@storybook/react": "^6.0.0-rc.5",
+    "@testing-library/jest-dom": "^5.11.1",
+    "@testing-library/react": "^10.4.7",
     "@testing-library/react-hooks": "^3.3.0",
-    "@types/jest": "^25.2.3",
-    "@types/node": "^14.0.11",
-    "@types/react": "^16.9.35",
+    "@types/jest": "^26.0.4",
+    "@types/node": "^14.0.23",
+    "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^3.1.0",
-    "@typescript-eslint/parser": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "eslint": "^7.2.0",
+    "eslint": "^7.4.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "jest": "^26.0.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "jest": "^26.1.0",
     "prettier": "^2.0.5",
+    "react-docgen": "^5.3.0",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "rollup": "^2.15.0",
-    "ts-jest": "^26.1.0",
+    "rollup": "^2.21.0",
+    "ts-jest": "^26.1.2",
+    "ts-loader": "^8.0.1",
     "ts-node": "^8.10.2",
     "tslib": "^2.0.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.6"
   },
   "scripts": {
     "build": "yarn build:rollup",

src/DSVImport.stories.tsx

@@ -3,7 +3,13 @@ import { DSVImport, ColumnType } from './';
 import { action } from '@storybook/addon-actions';
 import styled from '@emotion/styled';
 
-export default { title: 'Usage|Examples' };
+export default {
+  title: 'Components/DSVImport',
+  component: DSVImport,
+  parameters: {
+    componentSubtitle: 'Wrapping component'
+  }
+};
 
 type BasicType = { forename: string; surname: string; email: string };
 
@@ -22,7 +28,7 @@ export const BasicUsage = () => {
     </DSVImport>
   );
 };
-BasicUsage.story = { name: 'Basic usage' };
+BasicUsage.story = { name: 'Basic usage', parameters: { docs: { storyDescription: 'Hello' } } };
 
 export const UsingOnChangeCallback = () => {
   const columns: ColumnType<BasicType>[] = [

src/DSVImport.tsx

@@ -32,14 +32,29 @@ const EventListener = <T extends GenericColumnType>(props: EventListenerProps<T>
   return null;
 };
 
-export interface Props<T> {
+export type Props<T> = {
+  /**
+   * Description of the expected columns
+   */
   columns: ColumnType<T>[];
+  /**
+   * Callback which is called after parsing the input
+   */
   onChange?: (value: T[]) => void;
+  /**
+   * Callback which is called if there are validation errors
+   */
   onValidation?: (errors: ValidationError<T>[]) => void;
+  /**
+   * Globally applied transformers
+   */
   transformers?: Transformer[];
-}
+};
 
-export const DSVImport = <T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) => {
+/**
+ * Hello
+ */
+export function DSVImport<T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) {
   const DSVImportContext = getDSVImportContext<T>();
   const initialValues: State<T> = { columns: props.columns, transformers: props.transformers };
   const [state, dispatch] = useReducer(createReducer<T>(), initialValues);
@@ -57,4 +72,4 @@ export const DSVImport = <T extends GenericColumnType>(props: PropsWithChildren<
       {props.children}
     </DSVImportContext.Provider>
   );
-};
+}

src/middlewares/middleware.ts

@@ -18,7 +18,7 @@ export const applyMiddlewares = <T, A>(state: State<T>, dispatch: Dispatch<A>, .
     nextMiddlewares.forEach((m, i) => {
       m(state, next(without(nextMiddlewares, i)), value);
     });
-  }
+  };
 
   call(middlewares, action);
 };