Merge pull request #19 from openscript/develop

Upgrade storybook to version 6 and enhance exports

Author: openscript

.storybook/manager.js

@@ -2,5 +2,5 @@ import { addons } from '@storybook/addons';
 import theme from './theme';
 
 addons.setConfig({
-  theme: theme,
+  theme: theme
 });

.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  viewMode: 'docs'
+}

.storybook/theme.js

@@ -4,5 +4,5 @@ export default create({
   base: 'light',
 
   brandTitle: 'React DSV Import',
-  brandUrl: 'https://github.com/openscript/react-dsv-import',
+  brandUrl: 'https://github.com/openscript/react-dsv-import'
 });

docs/start.stories.mdx

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

package.json

@@ -7,47 +7,47 @@
     "react"
   ],
   "homepage": "https://openscript.github.io/react-dsv-import/",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@emotion/core": "^10.0.28",
+    "@babel/core": "^7.11.6",
+    "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
-    "@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": "^26.0.4",
-    "@types/node": "^14.0.23",
-    "@types/react": "^16.9.43",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-docs": "^6.0.21",
+    "@storybook/addon-links": "^6.0.21",
+    "@storybook/addon-storysource": "^6.0.21",
+    "@storybook/addons": "^6.0.21",
+    "@storybook/react": "^6.0.21",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.3",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.10.1",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^3.6.1",
-    "@typescript-eslint/parser": "^3.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.1.0",
+    "@typescript-eslint/parser": "^4.1.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
-    "eslint": "^7.4.0",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
-    "jest": "^26.1.0",
-    "prettier": "^2.0.5",
+    "eslint-plugin-react": "^7.20.6",
+    "jest": "^26.4.2",
+    "prettier": "^2.1.1",
     "react-docgen": "^5.3.0",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "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.6"
+    "rollup": "^2.26.11",
+    "ts-jest": "^26.3.0",
+    "ts-loader": "^8.0.3",
+    "ts-node": "^9.0.0",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
   },
   "scripts": {
     "build": "yarn build:rollup",

src/DSVImport.stories.tsx

@@ -28,7 +28,7 @@ export const BasicUsage = () => {
     </DSVImport>
   );
 };
-BasicUsage.story = { name: 'Basic usage', parameters: { docs: { storyDescription: 'Hello' } } };
+BasicUsage.story = { name: 'Basic usage' };
 
 export const UsingOnChangeCallback = () => {
   const columns: ColumnType<BasicType>[] = [

src/DSVImport.tsx

@@ -8,6 +8,8 @@ import { createValidatorMiddleware } from './middlewares/validatorMiddleware';
 import { ValidationError } from './models/validation';
 import { createTransformerMiddleware } from './middlewares/transformerMiddleware';
 import { Transformer } from './models/transformer';
+import { TextareaInput } from './components/inputs/TextareaInput';
+import { TablePreview } from './components/previews/TablePreview';
 
 interface EventListenerProps<T> {
   onChange?: (value: T[]) => void;
@@ -52,7 +54,7 @@ export type Props<T> = {
 };
 
 /**
- * Hello
+ * This is the main component, which creates a context for it's children. All children can access the information of the `DSVImport`.
  */
 export function DSVImport<T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) {
   const DSVImportContext = getDSVImportContext<T>();
@@ -73,3 +75,6 @@ export function DSVImport<T extends GenericColumnType>(props: PropsWithChildren<
     </DSVImportContext.Provider>
   );
 }
+
+DSVImport.TextareaInput = TextareaInput;
+DSVImport.TablePreview = TablePreview;

src/index.tsx

@@ -1,16 +1,4 @@
-import { PropsWithChildren } from 'react';
-import { DSVImport as Import, Props } from './DSVImport';
-import { GenericColumnType } from './models/column';
-import { TextareaInput } from './components/inputs/TextareaInput';
-import { TablePreview } from './components/previews/TablePreview';
-
-export function DSVImport<T extends GenericColumnType>(props: PropsWithChildren<Props<T>>) {
-  return Import<T>(props);
-}
-
-DSVImport.TextareaInput = TextareaInput;
-DSVImport.TablePreview = TablePreview;
-
+export { DSVImport } from './DSVImport';
 export { ColumnType, GenericColumnType } from './models/column';
 export { useDSVImport } from './features/context';
 export { Rule } from './models/rule';

src/models/middleware.ts

@@ -1,4 +1,4 @@
-import { State } from "./state";
-import { Dispatch } from "react";
+import { State } from './state';
+import { Dispatch } from 'react';
 
 export type Middleware<T, A> = (state: State<T>, dispatch: Dispatch<A>, action: A) => void;