Make storybook configurable in a redwood app (#1828)

* feat: grab user's storybook config

* style: revert prettier formatting

* Update packages/internal/src/paths.ts

Co-authored-by: Peter Pistorius <peter.pistorius@gmail.com>

* fix: propagate the rename

Co-authored-by: Peter Pistorius <peter.pistorius@gmail.com>
Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>

packages/core/config/storybook/main.js

@@ -1,13 +1,11 @@
-const path = require('path')
 const fs = require('fs')
-
+const path = require('path')
+const { merge } = require('webpack-merge')
 const { getPaths } = require('@redwoodjs/internal')
 const { getSharedPlugins } = require('../webpack.common')
 
-module.exports = {
-  stories: [
-    '../../../../web/src/**/*.stories.{tsx,jsx,js}',
-  ],
+const baseConfig = {
+  stories: ['../../../../web/src/**/*.stories.{tsx,jsx,js}'],
   webpackFinal: (sbConfig, { configType }) => {
     // configType is 'PRODUCTION' or 'DEVELOPMENT', why shout?
     const isEnvProduction = configType && configType.toLowerCase() === 'production'
@@ -59,3 +57,17 @@ module.exports = {
     return sbConfig
   },
 }
+
+const mergeUserStorybookConfig = (baseConfig) => {
+  const redwoodPaths = getPaths()
+
+  const hasCustomConfig = fs.existsSync(redwoodPaths.web.storybook)
+  if (!hasCustomConfig) {
+    return baseConfig
+  }
+
+  const userStorybookConfig = require(redwoodPaths.web.storybook)
+  return merge(baseConfig, userStorybookConfig)
+}
+
+module.exports = mergeUserStorybookConfig(baseConfig)

packages/core/config/storybook/preview.js

@@ -1,15 +1,16 @@
 const React = require('react')
+
 const { addDecorator } = require('@storybook/react')
 
-// The StorybookLoader is responsible for importing all the mock files,
+// The StorybookProvider is responsible for importing all the mock files,
 // booting up the mock server workers, and mocking the router.
-const { StorybookProvider } = require('@redwoodjs/core/dist/storybook/StorybookProvider')
+const {
+  StorybookProvider,
+} = require('@redwoodjs/core/dist/storybook/StorybookProvider')
 
 // Import the user's default CSS file
 require('~__REDWOOD__USER_WEB_DEFAULT_CSS')
 
-addDecorator(
-  (storyFn, { id }) => {
-    return React.createElement(StorybookProvider, { storyFn, id })
-  }
-)
+addDecorator((storyFn, { id }) => {
+  return React.createElement(StorybookProvider, { storyFn, id })
+})

packages/internal/src/paths.ts

@@ -31,6 +31,7 @@ export interface BrowserTargetPaths {
   config: string
   webpack: string
   postcss: string
+  storybookConfig: string
   dist: string
 }
 
@@ -74,6 +75,7 @@ const PATH_WEB_DIR_SRC_INDEX = 'web/src/index' // .js|.tsx
 const PATH_WEB_DIR_CONFIG = 'web/config'
 const PATH_WEB_DIR_CONFIG_WEBPACK = 'web/config/webpack.config.js'
 const PATH_WEB_DIR_CONFIG_POSTCSS = 'web/config/postcss.config.js'
+const PATH_WEB_DIR_CONFIG_STORYBOOK_CONFIG = 'web/config/storybook.config.js'
 
 const PATH_WEB_DIR_DIST = 'web/dist'
 
@@ -165,6 +167,10 @@ export const getPaths = (BASE_DIR: string = getBaseDir()): Paths => {
       config: path.join(BASE_DIR, PATH_WEB_DIR_CONFIG),
       webpack: path.join(BASE_DIR, PATH_WEB_DIR_CONFIG_WEBPACK),
       postcss: path.join(BASE_DIR, PATH_WEB_DIR_CONFIG_POSTCSS),
+      storybookConfig: path.join(
+        BASE_DIR,
+        PATH_WEB_DIR_CONFIG_STORYBOOK_CONFIG
+      ),
       dist: path.join(BASE_DIR, PATH_WEB_DIR_DIST),
     },
   }