install of storybook 6, first test without Next import

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.@(js|ts|jsx|tsx)",
+    "../src/**/*.stories.@(js|ts|jsx|tsx)",
+  ],
+  addons: ["@storybook/addon-actions", "@storybook/addon-links"],
+};

package.json

@@ -26,7 +26,9 @@
     "precombine:reports": "npm run copy:reports && rm -Rf .nyc_output && mkdir .nyc_output || true # intermediate script",
     "combine:reports": "nyc merge reports && mv coverage.json .nyc_output/out.json # intermediate script",
     "prereport:combined": "npm run combine:reports # intermediate script",
-    "report:combined": "nyc report --reporter lcov --report-dir coverage | exit 0 # intermediate script"
+    "report:combined": "nyc report --reporter lcov --report-dir coverage | exit 0 # intermediate script",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
@@ -53,9 +55,14 @@
     "react-hook-form": "^4.9.8"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.2",
     "@cypress/code-coverage": "^3.8.1",
     "@cypress/webpack-preprocessor": "^5.4.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "6.0.0-beta.23",
     "@testing-library/cypress": "^6.0.0",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
@@ -68,6 +75,7 @@
     "@typescript-eslint/eslint-plugin": "^2.21.0",
     "@typescript-eslint/parser": "^2.21.0",
     "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "cypress": "^4.7.0",
     "eslint": "^6.8.0",
     "eslint-plugin-react": "^7.18.3",

stories/0-Welcome.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

stories/1-typescript.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@storybook/react/demo";
+
+export default {
+  title: "TypeScript",
+  component: Button,
+};
+
+interface MyComponentProps {
+  children: React.ReactNode;
+}
+const MyComponent = (props: MyComponentProps) => <p>{props.children}</p>;
+
+export const Text = () => (
+  <div>
+    <MyComponent>This story comes from a .tsx file</MyComponent>
+    <Button onClick={action("clicked")}>Hello TypeScript Button</Button>
+  </div>
+);