Migrate to storybook 6

Author: openscript

.storybook/main.js

@@ -1,31 +1,17 @@
 module.exports = {
   stories: [
     '../docs/start.stories.mdx',
-    '../docs/**/*.stories.([tj]sx|mdx)',
-    '../src/**/*.stories.([tj]sx|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)$/,
-      use: [
-        {
-          loader: require.resolve('babel-loader'),
-          options: {
-            presets: [['react-app', { flow: false, typescript: true }]]
-          }
-        },
-        {
-          loader: require.resolve('react-docgen-typescript-loader'),
-        },
-      ],
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
+    '@storybook/addon-storysource',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+      },
+    }
+  ]
 };

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

@@ -16,16 +16,14 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@rollup/plugin-typescript": "^5.0.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.11.0",
-    "@testing-library/react": "^10.4.6",
+    "@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": "^26.0.4",
     "@types/node": "^14.0.23",
@@ -41,7 +39,7 @@
     "eslint-plugin-react": "^7.20.3",
     "jest": "^26.1.0",
     "prettier": "^2.0.5",
-    "react-docgen-typescript-loader": "^3.7.2",
+    "react-docgen": "^5.3.0",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "rollup": "^2.21.0",

src/DSVImport.stories.tsx

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import styled from '@emotion/styled';
 
 export default {
-  title: 'Usage|Components/DSVImport',
+  title: 'Components/DSVImport',
   component: DSVImport,
   parameters: {
     componentSubtitle: 'Wrapping component'
@@ -28,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,18 +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[];
-}
+};
 
 /**
- * Joho
- * @param props Joho
+ * Hello
  */
-export const DSVImport = <T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) => {
+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);
@@ -61,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);
 };