build: Add Storybook (#563)

* Adds Storybook
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* tsconfig: move module options to parent file

This might be an oopsie, but I'm not totally clear on the rationale of having
multiple tsconfigs, so I'm

Motivation is that storybook needs these options, but there's no way AFAICT
to specify a tsconfig for it (putting tsconfig.json in .storybook doesn't work)
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: convert main to typescript; import most of the config
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: just use the dev config wholesale
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: remove story for component that doesn't exist yet
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: move story files to live with their views

Open to feedback on this, but I think this will be more scalable.
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: re-add preview, which includes global styles
Signed-off-by: Dorian Johnson <2020@dorianj.net>

* storybook: fix config via env var switching
Signed-off-by: Dorian Johnson <2020@dorianj.net>
Co-authored-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/.storybook/main.ts

+import merge from 'webpack-merge';
+
+import devWebpackConfig from '../webpack.dev';
+
+module.exports = {
+  stories: ['../js/**/*.story.tsx'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  webpackFinal: async (config) => {
+    return merge(devWebpackConfig, config);
+  },
+};

amundsen_application/static/.storybook/preview.ts

+import '../css/styles.scss';

amundsen_application/static/js/components/common/Flag/Flag.story.tsx

+import React from 'react';
+
+import Flag, { CaseType } from '.';
+
+export default {
+  title: 'Flags',
+  component: Flag,
+};
+
+export const SimpleFlag = () => {
+  return <Flag caseType={CaseType.LOWER_CASE} text="Test Flag" />;
+};
+
+SimpleFlag.story = {
+  name: 'simple flag',
+};

amundsen_application/static/js/stories/welcome.story.tsx

+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+// Don't put other stories in this folder, unless they're meta (i.e. about
+// storybook itself). Storybook components for normal components should be
+// put in the same folder as the component itself.
+
+export const ToAmundsen = () => {
+  return (
+    <>
+      <h1>Welcome to Amundsen's Component Library!</h1>
+      <h3>
+        A development area for developing new{' '}
+        <strong>presentational components</strong>
+      </h3>
+      <p>
+        Do you ever miss having a “workshop” to develop new components before
+        hooking them with the real data? Look no more, here is the place!
+      </p>
+      <p>In this environment you can:</p>
+      <ul>
+        <li>Quickly develop new components for using them on Amundsen</li>
+        <li>See what components are available already</li>
+        <li>Be consistent with the Amundsen styling</li>
+        <li>Create manual tests for your components</li>
+        <li>
+          Avoid the whole syncing thing while developing your presentational
+          components
+        </li>
+        <li>
+          Clear the path to eventually move reusable components into the Data
+          Product Language (DPL)
+        </li>
+        <li>Prototype something really quick to show around</li>
+      </ul>
+    </>
+  );
+};
+
+ToAmundsen.story = {
+  name: 'to Amundsen Component Library',
+};

amundsen_application/static/package.json

@@ -23,7 +23,9 @@
     "tsc": "tsc",
     "stylelint": "stylelint '**/*.scss'",
     "stylelint-fix": "stylelint --fix '**/*.scss'",
-    "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,scss}\""
+    "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,scss}\"",
+    "storybook": "cross-env TS_NODE_PROJECT='tsconfig.webpack.json' start-storybook -p 6006",
+    "build-storybook": "cross-env TS_NODE_PROJECT='tsconfig.webpack.json' build-storybook"
   },
   "author": "",
   "license": "Apache-2.0",
@@ -48,6 +50,11 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.9.4",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@types/enzyme": "^3.10.5",
     "@types/jasmine-matchers": "^0.2.32",
     "@types/jest": "^24.9.1",
@@ -86,6 +93,7 @@
     "node-sass": "^4.14.1",
     "postcss": "^7.0.30",
     "prettier": "^2.0.5",
+    "react-docgen-typescript-loader": "^3.7.2",
     "redux-mock-store": "^1.5.4",
     "redux-saga": "^1.1.3",
     "redux-saga-test-plan": "4.0.0-beta.3",

amundsen_application/static/tsconfig.json

@@ -7,9 +7,7 @@
     "module": "esnext",
     "target": "es2015",
     "jsx": "react",
-    "typeRoots": [
-     "node_modules/@types"
-    ],
+    "typeRoots": ["node_modules/@types"],
     "allowJs": true,
     "moduleResolution": "node",
     "noResolve": false,
@@ -18,20 +16,13 @@
     "types": ["jest"],
     "baseUrl": "js",
     "paths": {
-        "components/*": [ "components/*" ],
-        "config/*": [ "config/*" ],
-        "ducks/*": [ "ducks/*" ],
-        "interfaces/*": [ "interfaces/*" ],
+      "components/*": ["components/*"],
+      "config/*": ["config/*"],
+      "ducks/*": ["ducks/*"],
+      "interfaces/*": ["interfaces/*"],
+      "stories/*": ["stories/*"]
     }
   },
-  "exclude": [
-    "node_modules",
-    "**/__tests__",
-  ],
-  "include": [
-    "*.ts",
-    "*.js",
-    ".eslintrc.js",
-    "js/"
-  ]
+  "exclude": ["node_modules", "**/__tests__"],
+  "include": ["*.ts", "*.js", ".eslintrc.js", "js/"]
 }

amundsen_application/static/tsconfig.webpack.json

 {
   "compilerOptions": {
-    "module": "commonjs",
     "target": "es5",
+    "module": "commonjs",
     "esModuleInterop": true
   }
 }