fix(storybook): upgrade deps and fix storybook (#112)

Author: seanforyou23

.storybook/config.ts

@@ -0,0 +1,16 @@
+// https://storybook.js.org/blog/storybook-for-webpack-5/
+module.exports = {
+  // https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
+  core: {
+    builder: "webpack5",
+  },
+  stories: ['../stories/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-knobs',
+  ],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript'
+  },
+};

.storybook/main.ts

@@ -0,0 +1 @@
+import '@patternfly/react-core/dist/styles/base.css';

.storybook/preview.ts

@@ -26,35 +26,37 @@
     "build:storybook": "build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.23",
     "@types/react-router-dom": "^5.1.7",
     "@types/victory": "^33.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
-    "copy-webpack-plugin": "^8.1.1",
-    "css-loader": "^5.2.4",
-    "css-minimizer-webpack-plugin": "^2.0.0",
-    "dotenv-webpack": "^7.0.2",
-    "enzyme": "^3.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^3.0.1",
+    "dotenv-webpack": "^7.0.3",
+    "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.17.0",
-    "eslint-plugin-react": "^7.22.0",
+    "enzyme-to-json": "^3.6.2",
+    "eslint": "^7.28.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.1",
-    "imagemin": "^7.0.0",
-    "jest": "^26.6.3",
+    "imagemin": "^8.0.0",
+    "jest": "^27.0.4",
     "mini-css-extract-plugin": "^1.6.0",
-    "prettier": "^2.2.1",
-    "prop-types": "^15.6.1",
+    "postcss": "^8.3.1",
+    "prettier": "^2.3.1",
+    "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
@@ -63,26 +65,27 @@
     "rimraf": "^3.0.2",
     "style-loader": "^2.0.0",
     "svg-url-loader": "^7.1.1",
-    "terser-webpack-plugin": "^5.1.1",
-    "ts-jest": "^26.4.4",
-    "ts-loader": "^9.1.1",
+    "terser-webpack-plugin": "^5.1.3",
+    "ts-jest": "^27.0.3",
+    "ts-loader": "^9.2.3",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.1.3",
+    "tslib": "^2.2.0",
+    "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.36.2",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0",
+    "webpack": "^5.38.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.84.4",
-    "@patternfly/react-icons": "^4.7.22",
-    "@patternfly/react-styles": "^4.7.22",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@patternfly/react-core": "^4.128.2",
+    "@patternfly/react-icons": "^4.10.11",
+    "@patternfly/react-styles": "^4.10.11",
+    "@storybook/builder-webpack5": "^6.2.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-last-location": "^2.0.1",
-    "sirv-cli": "^1.0.10"
+    "sirv-cli": "^1.0.12"
   }
 }

package-lock.json

@@ -15,6 +15,7 @@ export interface ISupportProps {
   sampleProp?: string;
 }
 
+// eslint-disable-next-line prefer-const
 let Support: React.FunctionComponent<ISupportProps> = () => (
   <PageSection>
     <EmptyState variant={EmptyStateVariant.full}>

package.json

@@ -1,12 +1,17 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
+import React, { ComponentProps } from 'react';
 import { Dashboard } from '@app/Dashboard/Dashboard';
+import { Story } from '@storybook/react';
 
-const stories = storiesOf('Components', module);
-stories.addDecorator(withInfo);
-stories.add(
-  'Dashboard',
-  () => <Dashboard />,
-  { info: { inline: true } }
-);
+//👇 This default export determines where your story goes in the story list
+export default {
+  title: 'Components/Dashboard',
+  component: Dashboard,
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template: Story<ComponentProps<typeof Dashboard>> = (args) => <Dashboard {...args} />;
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+  /*👇 The args you need here will depend on your component */
+};

src/app/Support/Support.tsx

@@ -1,12 +1,17 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
+import React, { ComponentProps } from 'react';
 import { Support } from '@app/Support/Support';
+import { Story } from '@storybook/react';
 
-const stories = storiesOf('Components', module);
-stories.addDecorator(withInfo);
-stories.add(
-  'Support',
-  () => <Support />,
-  { info: { inline: true } }
-);
+//👇 This default export determines where your story goes in the story list
+export default {
+  title: 'Components/Support',
+  component: Support,
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template: Story<ComponentProps<typeof Support>> = (args) => <Support {...args} />;
+
+export const SupportStory = Template.bind({});
+SupportStory.args = {
+  /*👇 The args you need here will depend on your component */
+};