Storybook build mode setup (#1612)

Snapshot updates
Storybook 6.0.27
Fix-up `FileTree` story to keep screenshot intact
Add develop mode and use consistently

CHANGELOG.md

@@ -16,6 +16,17 @@ NOTE: This is the CHANGELOG for the @looker/components MONOREPO. Each package ha
 - [Design Tokens](./packages/design-tokens/CHANGELOG.md)
 - [Icons](./packages/icons/CHANGELOG.md)
 
+## [UNRELEASED]
+
+### Added
+
+- Refine Storybook config to support build-modes
+  - enables faster image-snapshot generation and better development performance.
+  - specify mode via shell export: `export storybookBuildMode=develop `
+    - `fast` - disables Typescript extraction and all addons
+    - `develop` - disables "Docs" addon
+    - `publish` - enables Typescript extraction and full `addon-essentials` support
+
 ## [0.9.19]
 
 ### Fixed

package.json

@@ -29,7 +29,10 @@
     "build:ts": "yarn lerna exec --stream --scope '@looker/*' --sort 'tsc -b tsconfig.build.json'",
     "prerelease": "yarn build",
     "release": "yarn lerna publish",
-    "clean": "rm -Rf docs/static packages/*/lib packages/*/storybook-static www/.cache www/public",
+    "clean": "run-p -c clean:*",
+    "clean:lib": "rm -Rf packages/*/lib ",
+    "clean:storybook": "rm -Rf packages/*/storybook-static ",
+    "clean:docs": "rm -Rf docs/static www/.cache www/public",
     "deploy": "./config/deploy.sh",
     "playground": "yarn workspace playground start",
     "gatsby": "yarn workspace www start",
@@ -40,10 +43,10 @@
     "lint:ts": "tsc",
     "lint-staged": "yarn exec lint-staged",
     "test": "yarn jest",
-    "storybook": "yarn workspace storybook start",
+    "storybook": "yarn workspace storybook develop",
     "storybooks-build": "yarn lerna run storybook-build --scope '@looker/*' --stream --parallel",
-    "preimage-snapshots": "yarn storybooks-build",
-    "image-snapshots-only": "export JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 && yarn jest --config jest-image-snapshots.config.js",
+    "preimage-snapshots": "export storybookBuildMode=fast && yarn storybooks-build && yarn clean:lib && yarn prepare",
+    "image-snapshots-only": "yarn jest --config jest-image-snapshots.config.js",
     "image-snapshots": "yarn image-snapshots-only"
   },
   "devDependencies": {

packages/components/package.json

@@ -13,9 +13,8 @@
     "directory": "packages/components"
   },
   "scripts": {
-    "storybook": "start-storybook  -c .storybook -p 3301  --host 0.0.0.0",
-    "storybook-build": "build-storybook -c .storybook",
-    "poststorybook-build": "npx sb extract"
+    "storybook": "export storybookBuildMode=develop && start-storybook  -c .storybook -p 3301  --host 0.0.0.0",
+    "storybook-build": "build-storybook -c .storybook"
   },
   "publishConfig": {
     "access": "public"
@@ -41,8 +40,8 @@
   },
   "devDependencies": {
     "@looker/components-test-utils": "^0.9.21",
-    "@storybook/addon-storyshots": "^6.0.26",
-    "@storybook/react": "^6.0.26",
+    "@storybook/addon-storyshots": "^6.0.27",
+    "@storybook/react": "^6.0.27",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@types/d3-color": "^2.0.0",
@@ -58,7 +57,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-is": "^16.13.1",
-    "storybook": "^6.0.26",
+    "storybook": "^6.0.27",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {

packages/components/src/Tree/stories/FileTree.story.tsx

@@ -31,31 +31,31 @@ import { TreeItem } from '../TreeItem'
 
 const Template: Story<TreeProps> = (args) => (
   <Tree label="thelook" icon="ExploreOutline" {...args}>
-    <Tree label="Orders" icon="VisibilityOutline" defaultOpen>
-      <Tree label="Orders" icon="Table" defaultOpen>
+    <Tree label="Orders" icon="VisibilityOutline" defaultOpen branchFontWeight>
+      <Tree label="Orders" icon="Table" defaultOpen branchFontWeight>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Status</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
-      <Tree label="Products" icon="Table" defaultOpen>
+      <Tree label="Products" icon="Table" defaultOpen branchFontWeight>
         <TreeItem icon="IdeDimension">Brand</TreeItem>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Department</TreeItem>
         <TreeItem icon="IdeDimension">Sku</TreeItem>
       </Tree>
-      <Tree label="Users" icon="Table" defaultOpen>
+      <Tree label="Users" icon="Table" defaultOpen branchFontWeight>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Name</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
     </Tree>
-    <Tree label="Users" icon="VisibilityOutline" defaultOpen>
-      <Tree label="Orders" icon="Table" defaultOpen>
+    <Tree label="Users" icon="VisibilityOutline" defaultOpen branchFontWeight>
+      <Tree label="Orders" icon="Table" defaultOpen branchFontWeight>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Status</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>
       </Tree>
-      <Tree label="Users" icon="Table" defaultOpen>
+      <Tree label="Users" icon="Table" defaultOpen branchFontWeight>
         <TreeItem icon="IdeDimension">ID</TreeItem>
         <TreeItem icon="IdeDimension">Name</TreeItem>
         <TreeItem icon="IdeDimensionGroup">Created</TreeItem>

packages/design-tokens/package.json

@@ -13,9 +13,8 @@
     "directory": "packages/design-tokens"
   },
   "scripts": {
-    "storybook": "start-storybook  -c .storybook -p 3302  --host 0.0.0.0",
-    "storybook-build": "build-storybook -c .storybook",
-    "poststorybook-build": "npx sb extract"
+    "storybook": "export storybookBuildMode=develop && start-storybook  -c .storybook -p 3302  --host 0.0.0.0",
+    "storybook-build": "build-storybook -c .storybook"
   },
   "publishConfig": {
     "access": "public"
@@ -28,8 +27,8 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-storyshots": "^6.0.26",
-    "@storybook/react": "^6.0.26",
+    "@storybook/addon-storyshots": "^6.0.27",
+    "@storybook/react": "^6.0.27",
     "@types/lodash": "^4.14.162",
     "@types/styled-components": "^4.4.1",
     "csstype": "^3.0.3",

packages/storybook-config/package.json

@@ -8,10 +8,13 @@
   ],
   "private": true,
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "babel-loader": "^8.1.0",
+    "babel-loader-exclude-node-modules-except": "^1.0.3",
     "@looker/components-providers": "^0.9.21",
-    "@storybook/addon-essentials": "^6.0.26",
-    "@storybook/addon-storyshots": "^6.0.26",
-    "@storybook/addon-storyshots-puppeteer": "^6.0.26",
+    "@storybook/addon-essentials": "^6.0.27",
+    "@storybook/addon-storyshots": "^6.0.27",
+    "@storybook/addon-storyshots-puppeteer": "^6.0.27",
     "@types/react": "^16.9.53",
     "react": "^16.14.0",
     "tsconfig-paths-webpack-plugin": "^3.3.0"

packages/storybook-config/src/main.js

@@ -24,11 +24,19 @@
 
  */
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+/* eslint-disable @typescript-eslint/no-var-requires */
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+const excludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 
-module.exports = {
-  addons: ['@storybook/addon-essentials'],
+const addonEssentials = {
+  name: '@storybook/addon-essentials',
+  options: {
+    backgrounds: false,
+  },
+}
+
+const config = {
+  addons: [addonEssentials],
   stories: ['../**/*.story.tsx'],
   webpackFinal: async (config) => {
     config.module.rules.push({
@@ -39,8 +47,54 @@ module.exports = {
         },
       ],
     })
+    config.module.rules.push({
+      exclude: [
+        excludeNodeModulesExcept([
+          'merge-anything', // a transitive dependency
+          'react-hotkeys-hook', // ditto
+        ]),
+      ],
+      loader: 'babel-loader',
+      test: /\.js$/,
+    })
     config.resolve.extensions.push('.ts', '.tsx')
     config.resolve.plugins = [new TsconfigPathsPlugin()]
     return config
   },
 }
+
+const mode = process.env.storybookBuildMode
+
+/**
+ * `react-docgen-typescript` is slow because it has to parse _everything_.
+ *
+ * `fast` builds (used by image-snapshots)  turn off docgen as well as all addons since
+ * neither will be needed for snapshots and it significantly improves Storybook performance.
+ */
+
+if (mode === 'fast') {
+  config.typescript = { reactDocgen: false }
+  config.addons = []
+} else if (mode === 'develop') {
+  /**
+   *
+   * TODO: Explore `webpack-react-docgen-typescript` + to load types from a pre-compiled build
+   * of interface types. There may be complications due to our TS monorepo and the complexities
+   * of properly loading types.
+   *
+   * It appears Storybook 6.2 may incorporate this kind of functionality so it may make
+   * sense to wait for that.
+   *
+   * Background: https://github.com/storybookjs/storybook/issues/7942
+   *
+   */
+  addonEssentials.options = {
+    ...addonEssentials.options,
+    docs: false,
+  }
+}
+
+/* eslint-disable-next-line no-console */
+mode && console.log('Storybook build bode:', mode, '\n', config)
+
+module.exports = config

storybook/.storybook/main.js

@@ -25,9 +25,12 @@
  */
 
 const main = require('@looker/storybook-config/src/main')
+module.exports = {
+  ...main,
+  stories: ['../src/**/*.stories.tsx', '../../packages/**/*.story.tsx'],
+}
 
 /**
- *
  *  @TODO - Implement Storybook "Composition" support
  *
  *  This will be a useful way to aid in publishing documentation per-package as
@@ -37,21 +40,7 @@ const main = require('@looker/storybook-config/src/main')
  * const hostPrefix = 'http://components.looker.com/storybook/...'
  *
  * const packages = [
- *   {
- *     key: 'components',
- *     title: '@looker/components',
- *     port: 3301,
- *   },
- *   {
- *     key: 'components-providers',
- *     title: '@looker/components-providers',
- *     port: 3303,
- *   },
- *   {
- *     key: 'design-tokens',
- *     title: '@looker/design-tokens',
- *     port: 3302,
- *   },
+ *  ...
  * ]
  *
  * const refs = {}
@@ -61,10 +50,4 @@ const main = require('@looker/storybook-config/src/main')
  *     url: `${hostPrefix}/${key}`,
  *   }
  * })
- *
  */
-
-module.exports = {
-  ...main,
-  stories: ['../src/**/*.stories.tsx', '../../packages/**/*.story.tsx'],
-}

storybook/package.json

@@ -6,6 +6,7 @@
   "private": true,
   "scripts": {
     "start": "start-storybook  -c .storybook -p 3333  --host 0.0.0.0",
+    "develop": "export storybookBuildMode=develop && yarn start",
     "build": "build-storybook -c .storybook",
     "postbuild": "npx sb extract"
   },
@@ -15,7 +16,7 @@
     "@looker/components-theme-editor": "^0.9.22",
     "@looker/design-tokens": "^0.9.21",
     "@looker/icons": "^0.9.21",
-    "@storybook/react": "^6.0.26",
+    "@storybook/react": "^6.0.27",
     "lodash": "^4.17.20",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
@@ -25,8 +26,8 @@
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@looker/components-providers": "*",
-    "@storybook/addon-essentials": "^6.0.26",
-    "@storybook/addon-storyshots": "^6.0.26",
+    "@storybook/addon-essentials": "^6.0.27",
+    "@storybook/addon-storyshots": "^6.0.27",
     "babel-loader": "^8.1.0"
   }
 }