Add develop mode and use consistently

package.json

@@ -43,7 +43,7 @@
     "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": "export storybookBuildMode=fast && yarn storybooks-build && yarn clean:lib && yarn prepare",
     "image-snapshots-only": "yarn jest --config jest-image-snapshots.config.js",

packages/components/package.json

@@ -13,7 +13,7 @@
     "directory": "packages/components"
   },
   "scripts": {
-    "storybook": "start-storybook  -c .storybook -p 3301  --host 0.0.0.0",
+    "storybook": "export storybookBuildMode=develop && start-storybook  -c .storybook -p 3301  --host 0.0.0.0",
     "storybook-build": "build-storybook -c .storybook"
   },
   "publishConfig": {

packages/design-tokens/package.json

@@ -13,7 +13,7 @@
     "directory": "packages/design-tokens"
   },
   "scripts": {
-    "storybook": "start-storybook  -c .storybook -p 3302  --host 0.0.0.0",
+    "storybook": "export storybookBuildMode=develop && start-storybook  -c .storybook -p 3302  --host 0.0.0.0",
     "storybook-build": "build-storybook -c .storybook"
   },
   "publishConfig": {

packages/storybook-config/src/main.js

@@ -29,8 +29,15 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const excludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 
+const addonEssentials = {
+  name: '@storybook/addon-essentials',
+  options: {
+    backgrounds: false,
+  },
+}
+
 const config = {
-  addOns: ['@storybook/addon-essentials'],
+  addons: [addonEssentials],
   stories: ['../**/*.story.tsx'],
   webpackFinal: async (config) => {
     config.module.rules.push({
@@ -67,15 +74,23 @@ const mode = process.env.storybookBuildMode
  */
 if (mode === 'fast') {
   config.typescript = { reactDocgen: false }
-  config.addOns = []
-}
-
-if (mode) {
-  // eslint-disable-next-line no-console
-  console.log('Storybook BuildMode:', mode)
+  config.addons = []
+} else if (mode === 'develop') {
+  /**
+   * TODO:
+   * Look at `webpack-react-docgen-typescript` + to load types from a "static"
+   * build of inteerface types.
+   *
+   * Background: https://github.com/storybookjs/storybook/issues/7942
+   *
+   */
+  addonEssentials.options = {
+    ...addonEssentials.options,
+    docs: false,
+  }
 }
 
-// eslint-disable-next-line no-console
-console.log(config)
+/* eslint-disable-next-line no-console */
+mode && console.log('Storybook build bode:', mode, '\n', config)
 
-module.exports = { ...config }
+module.exports = config

storybook/package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "start": "start-storybook  -c .storybook -p 3333  --host 0.0.0.0",
-    "docs": "yarn start --docs",
+    "develop": "export storybookBuildMode=develop && yarn start",
     "build": "build-storybook -c .storybook",
     "postbuild": "npx sb extract"
   },