feat(storybook): Add storybook support (#8360)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

.storybook/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "corejs": 3,
+        "useBuiltIns": "usage",
+        "shippedProposals": true,
+        "targets": {
+          "browsers": [
+            "last 2 Chrome versions",
+            "last 2 Edge versions",
+            "last 2 Firefox versions",
+            "last 2 Safari versions"
+          ]
+        }
+      }
+    ]
+  ]
+}

.storybook/main.js

@@ -0,0 +1,26 @@
+const deckWebpackConfigurer = require('../webpack.config');
+
+module.exports = {
+  addons: ['@storybook/preset-typescript'],
+  stories: ['../app/scripts/modules/core/src/presentation/**/*.stories.[tj]sx'],
+  webpackFinal: async config => {
+    const deckWebpackConfig = deckWebpackConfigurer({}, {});
+
+    config.resolve = {
+      ...config.resolve,
+      alias: deckWebpackConfig.resolve.alias,
+      extensions: deckWebpackConfig.resolve.extensions,
+      modules: deckWebpackConfig.resolve.modules,
+    };
+
+    config.module.rules = deckWebpackConfig.module.rules.map(rule => {
+      // There are some issues with thread-loader and storybook, so disabling it until it gets fixed.
+      rule.use = (rule.use || []).filter(({ loader }) => loader !== 'thread-loader');
+      return rule;
+    });
+
+    config.watch = true;
+
+    return config;
+  },
+};

app/scripts/modules/core/src/config/settings.ts

@@ -127,7 +127,7 @@ export interface ISpinnakerSettings {
   useClassicFirewallLabels: boolean;
 }
 
-export const SETTINGS: ISpinnakerSettings = (window as any).spinnakerSettings;
+export const SETTINGS: ISpinnakerSettings = (window as any).spinnakerSettings || {};
 
 // Make sure to set up some reasonable default settings fields so we do not have to keep checking if they exist everywhere
 SETTINGS.feature = SETTINGS.feature || {};

app/scripts/modules/core/src/presentation/modal/Modal.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '@storybook/react/demo';
+
+import { Modal, ModalBody, ModalHeader, showModal } from './index';
+
+export default { component: Modal, title: 'Modal' };
+
+const ModalWithoutFooterComponent = () => {
+  return (
+    <>
+      <ModalHeader>Modal</ModalHeader>
+      <ModalBody>
+        <div className="flex-container-h middle center" style={{ width: '100%', height: '100%' }}>
+          <span className="heading-1">Simple modal without footer</span>
+        </div>
+      </ModalBody>
+    </>
+  );
+};
+export const ModalWithoutFooter = () => {
+  return (
+    <div className="sp-margin-xl">
+      <Button onClick={() => showModal(ModalWithoutFooterComponent)}>Show Modal</Button>
+    </div>
+  );
+};

package.json

@@ -26,7 +26,8 @@
     "modules": "./gradle/buildModules.sh",
     "prettier": "prettier --write 'app/**/*.{js,jsx,ts,tsx,html,css,less}'",
     "functional": "npm run build && cd test/functional && yarn && npm run test",
-    "functional:debug": "npm run build && cd test/functional && yarn && npm run open"
+    "functional:debug": "npm run build && cd test/functional && yarn && npm run open",
+    "storybook": "start-storybook -p 9001"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.4.1",
@@ -48,13 +49,15 @@
     "classname": "^0.0.0",
     "clipboard": "^1.5.12",
     "commonmark": "^0.28.1",
+    "core-js": "^2.0.0",
     "create-react-context": "^0.2.3",
     "d3-format": "^1.3.2",
     "d3-scale": "^2.0.0",
     "d3-shape": "^1.2.0",
     "date-fns": "^1.30.1",
     "diff-match-patch": "^1.0.0",
     "dompurify": "^1.0.4",
+    "es-to-primitive": "1.2.1",
     "formik": "^1.4.1",
     "human-readable-ids": "^1.0.4",
     "jquery": "3.5.0",
@@ -104,6 +107,8 @@
     "@babel/preset-env": "^7.9.6",
     "@spinnaker/eslint-plugin": "1.0.7",
     "@spinnaker/mocks": "1.0.6",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^5.3.19",
     "@svgr/webpack": "^5.2.0",
     "@types/angular": "1.6.26",
     "@types/angular-mocks": "1.5.10",