feat: add Storybook (#66)

Author: riccardo-forina

.gitignore

@@ -3,3 +3,4 @@ dist
 yarn-error.log
 stats.json
 coverage
+storybook-static

.storybook/config.ts

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react';
+import '@patternfly/react-core/dist/styles/base.css';
+
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../stories', true, /\.stories\.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

.storybook/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.json"
+}

.storybook/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const appConfig = require('../webpack.common');
+
+module.exports = ({ config }) => {
+  config.module.rules = [];
+  config.module.rules.push(...appConfig.module.rules);
+  config.module.rules.push({
+    test: /\.css$/,
+    include: [
+      path.resolve(__dirname, '../src'),
+      path.resolve(__dirname, '../node_modules/@storybook'),
+      path.resolve(__dirname, '../node_modules/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/styles/base.css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+      path.resolve(__dirname, '../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+    ],
+    use: ["style-loader", "css-loader"]
+  });
+  config.module.rules.push({
+    test: /\.tsx?$/,
+    include: path.resolve(__dirname, '../src'),
+    use: [
+      require.resolve('react-docgen-typescript-loader'),
+    ],
+  })
+  config.resolve.plugins = [
+    new TsconfigPathsPlugin({
+      configFile: path.resolve(__dirname, "../tsconfig.json")
+    })
+  ];
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

package.json

@@ -15,16 +15,24 @@
     "format": "prettier --check --write ./src/**/*.{tsx,ts,js}",
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
     "bundle-profile:analyze": "yarn build:bundle-profile && webpack-bundle-analyzer ./stats.json",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "storybook": "start-storybook -p 6006",
+    "build:storybook": "build-storybook"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-info": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/react": "^5.2.1",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.17",
     "@types/node": "^12.7.1",
     "@types/react": "^16.8.25",
     "@types/react-dom": "^16.8.5",
     "@types/react-router-dom": "^4.3.4",
+    "@types/storybook__react": "^4.0.2",
     "@types/victory": "^31.0.14",
     "@types/webpack": "^4.32.1",
     "css-loader": "^3.2.0",
@@ -42,6 +50,7 @@
     "raw-loader": "^3.1.0",
     "react": "^16.8.4",
     "react-axe": "^3.0.2",
+    "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^16.6.3",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^3.0.0",

src/app/Support/Support.tsx

@@ -11,7 +11,11 @@ import {
   EmptyStateSecondaryActions
 } from '@patternfly/react-core';
 
-const Support: React.FunctionComponent<any> = (props) => {
+export interface ISupportProps {
+  sampleProp?: string;
+}
+
+const Support: React.FunctionComponent<ISupportProps> = (props) => {
   return (
     <PageSection>
       <EmptyState variant={EmptyStateVariant.full}>

stories/Dashboard.stories.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { Dashboard } from '@app/Dashboard/Dashboard';
+
+const stories = storiesOf('Components', module);
+stories.addDecorator(withInfo);
+stories.add(
+  'Dashboard',
+  () => <Dashboard />,
+  { info: { inline: true } }
+);

stories/Support.stories.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { Support } from '@app/Support/Support';
+
+const stories = storiesOf('Components', module);
+stories.addDecorator(withInfo);
+stories.add(
+  'Support',
+  () => <Support />,
+  { info: { inline: true } }
+);

webpack.common.js

@@ -17,7 +17,6 @@ module.exports = {
     rules: [
       {
         test: /\.(tsx|ts|jsx)?$/,
-        include: path.resolve(__dirname, 'src'),
         use: [
           {
             loader: 'ts-loader',