feat(storybook): upgrade to v7

__fixtures__/test-project/web/package.json

@@ -27,6 +27,7 @@
     "postcss": "^8.4.23",
     "postcss-loader": "^7.3.0",
     "prettier-plugin-tailwindcss": "^0.2.8",
+    "storybook": "7.0.12",
     "tailwindcss": "^3.3.2"
   }
 }

packages/cli/src/commands/storybook.js

@@ -1,68 +1,59 @@
-import path from 'path'
-
-import execa from 'execa'
 import terminalLink from 'terminal-link'
 
-import { getPaths } from '@redwoodjs/project-config'
-import { errorTelemetry } from '@redwoodjs/telemetry'
-
 import c from '../lib/colors'
 
 export const command = 'storybook'
 export const aliases = ['sb']
+
 export const description =
-  'Launch Storybook: a tool for building UI components and pages in isolation'
+  'Launch Storybook: a tool for building UI components in isolation'
 
-export const builder = (yargs) => {
+export function builder(yargs) {
   yargs
-    .option('open', {
-      describe: 'Open storybooks in your browser on start',
-      type: 'boolean',
-      default: true,
-    })
     .option('build', {
       describe: 'Build Storybook',
       type: 'boolean',
       default: false,
     })
+    .option('build-directory', {
+      describe: 'Directory in web/ to store static files',
+      type: 'string',
+      default: 'public/storybook',
+    })
     .option('ci', {
       describe: 'Start server in CI mode, with no interactive prompts',
       type: 'boolean',
       default: false,
     })
+    .option('open', {
+      describe: 'Open storybook in your browser on start',
+      type: 'boolean',
+      default: true,
+    })
     .option('port', {
-      describe: 'Which port to run storybooks on',
+      describe: 'Which port to run storybook on',
       type: 'integer',
       default: 7910,
     })
-    .option('build-directory', {
-      describe: 'Directory in web/ to store static files',
-      type: 'string',
-      default: 'public/storybook',
-    })
-    .option('manager-cache', {
-      describe:
-        "Cache the manager UI. Disable this when you're making changes to `storybook.manager.js`.",
-      type: 'boolean',
-      default: true,
-    })
     .option('smoke-test', {
       describe:
-        "CI mode plus Smoke-test (skip prompts, don't open browser, exit after successful start)",
+        "CI mode plus smoke-test (skip prompts; don't open browser; exit after successful start)",
       type: 'boolean',
       default: false,
     })
     .check((argv) => {
       if (argv.build && argv.smokeTest) {
         throw new Error('Can not provide both "--build" and "--smoke-test"')
       }
+
       if (argv.build && argv.open) {
         console.warn(
           c.warning(
             'Warning: --open option has no effect when running Storybook build'
           )
         )
       }
+
       return true
     })
     .epilogue(
@@ -73,82 +64,7 @@ export const builder = (yargs) => {
     )
 }
 
-export const handler = ({
-  open,
-  port,
-  build,
-  ci,
-  buildDirectory,
-  managerCache,
-  smokeTest,
-}) => {
-  const cwd = getPaths().web.base
-
-  const staticAssetsFolder = path.join(getPaths().web.base, 'public')
-  // Create the `MockServiceWorker.js` file
-  // https://mswjs.io/docs/cli/init
-  execa(`yarn msw init "${staticAssetsFolder}" --no-save`, undefined, {
-    stdio: 'inherit',
-    shell: true,
-    cwd,
-  })
-
-  const storybookConfig = path.dirname(
-    require.resolve('@redwoodjs/testing/config/storybook/main.js')
-  )
-
-  try {
-    if (build) {
-      execa(
-        `yarn build-storybook`,
-        [
-          `--config-dir "${storybookConfig}"`,
-          `--output-dir "${buildDirectory}"`,
-          !managerCache && `--no-manager-cache`,
-        ].filter(Boolean),
-        {
-          stdio: 'inherit',
-          shell: true,
-          cwd,
-        }
-      )
-    } else if (smokeTest) {
-      execa(
-        `yarn start-storybook`,
-        [
-          `--config-dir "${storybookConfig}"`,
-          `--port ${port}`,
-          `--smoke-test`,
-          `--ci`,
-          `--no-version-updates`,
-        ].filter(Boolean),
-        {
-          stdio: 'inherit',
-          shell: true,
-          cwd,
-        }
-      )
-    } else {
-      execa(
-        `yarn start-storybook`,
-        [
-          `--config-dir "${storybookConfig}"`,
-          `--port ${port}`,
-          !managerCache && `--no-manager-cache`,
-          `--no-version-updates`,
-          ci && '--ci',
-          !open && `--no-open`,
-        ].filter(Boolean),
-        {
-          stdio: 'inherit',
-          shell: true,
-          cwd,
-        }
-      )
-    }
-  } catch (e) {
-    console.log(c.error(e.message))
-    errorTelemetry(process.argv, e.message)
-    process.exit(1)
-  }
+export async function handler(options) {
+  const { handler } = await import('./storybookHandler')
+  await handler(options)
 }

packages/cli/src/commands/storybookHandler.js

@@ -0,0 +1,75 @@
+import path from 'path'
+
+import execa from 'execa'
+
+import { getPaths } from '@redwoodjs/project-config'
+import { errorTelemetry } from '@redwoodjs/telemetry'
+
+import c from '../lib/colors'
+
+const redwoodProjectPaths = getPaths()
+
+export const handler = ({
+  build,
+  buildDirectory,
+  ci,
+  open,
+  port,
+  smokeTest,
+}) => {
+  const cwd = redwoodProjectPaths.web.base
+  const staticAssetsFolder = path.join(cwd, 'public')
+  const execaOptions = {
+    stdio: 'inherit',
+    shell: true,
+    cwd,
+  }
+
+  // Create the `MockServiceWorker.js` file. See https://mswjs.io/docs/cli/init.
+  execa.command(`yarn msw init "${staticAssetsFolder}" --no-save`, execaOptions)
+
+  const storybookConfigPath = path.dirname(
+    require.resolve('@redwoodjs/testing/config/storybook/main.js')
+  )
+
+  /** @type {string?} */
+  let command
+  const flags = [`--config-dir "${storybookConfigPath}"`]
+
+  if (build) {
+    command = `yarn storybook build ${[
+      ...flags,
+      `--output-dir "${buildDirectory}"`,
+    ]
+      .filter(Boolean)
+      .join(' ')}`
+  } else if (smokeTest) {
+    command = `yarn storybook dev ${[
+      ...flags,
+      `--port ${port}`,
+      `--smoke-test`,
+      `--ci`,
+      `--no-version-updates`,
+    ]
+      .filter(Boolean)
+      .join(' ')}`
+  } else {
+    command = `yarn storybook dev ${[
+      ...flags,
+      `--port ${port}`,
+      `--no-version-updates`,
+      ci && '--ci',
+      !open && `--no-open`,
+    ]
+      .filter(Boolean)
+      .join(' ')}`
+  }
+
+  try {
+    execa.command(command, execaOptions)
+  } catch (e) {
+    console.log(c.error(e.message))
+    errorTelemetry(process.argv, e.message)
+    process.exit(1)
+  }
+}

packages/testing/README.md

@@ -1,35 +1,24 @@
-# @RedwoodJS/Testing
+# @redwoodjs/testing
 
-<!-- toc -->
-- [Purpose and Vision](#Purpose-and-Vision)
-- [Package Lead](#Package-Lead)
-- [Roadmap](#Roadmap)
-- [Contributing](#Contributing)
+This package includes Redwood's Jest and Storybook config.
 
-## Purpose and Vision
+## Notes on Storybook
 
-This package provides helpful defaults when testing a Redwood project's web side. The core of the project is an re-export of `@testing-library/react` with a custom `render` method.
+This section contains some working notes on Redwood's Storybook config, mainly the `webpackFinal` prop.
 
-## Usage
+- `staticDirs`
 
-In a jest test:
-```js
-import { render, screen } from '@redwoodjs/testing
+  ```js
+  ...(process.env.NODE_ENV !== 'production' && {
+    staticDirs: [path.join(redwoodProjectPaths.web.base, 'public')],
+  }),
+  ```
 
-it('works as expected', () => {
-  render(<MyComponent />)
-  expect(screen.queryByText('Text in my component')).toBeInTheDocument()
-}
-```
+  We only set `staticDirs` when running Storybook process; will fail if set for SB --build.
 
-## Package Lead
-- [@RobertBroersma](https://github.com/RobertBroersma)
-- [@peterp](https://github.com/peterp)
+- resolve extensions and plugins
 
-## Roadmap
-See [[Testing] Support Jest --config extensibility](https://github.com/redwoodjs/redwood/issues/564)
-
-## Contributing
-Core technologies
-- [Jest](https://jestjs.io/docs/en/getting-started)
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+  ```js
+  sbConfig.resolve.extensions = rwConfig.resolve.extensions
+  sbConfig.resolve.plugins = rwConfig.resolve.plugins // Directory Named Plugin
+  ```