Merge pull request #24001 from storybookjs/version-patch-from-7.4.0

Release: Patch 7.4.1

.circleci/config.yml

@@ -609,30 +609,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

.github/workflows/canary-release-pr.yml

@@ -58,8 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
-
+          node-version-file: '.nvmrc'
       - name: Cache dependencies
         uses: actions/cache@v3
         with:

.github/workflows/danger-js.yml

@@ -21,10 +21,10 @@ jobs:
     name: Danger JS
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
-      - uses: actions/checkout@v3
+          node-version-file: '.nvmrc'
       - name: Danger JS
         uses: danger/[email protected]
         env:

.github/workflows/prepare-patch-release.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/prepare-prerelease.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/publish.yml

@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.gitignore

@@ -37,7 +37,6 @@ coverage/
 /**/LICENSE
 code/docs/public
 package-lock.json
-.nvmrc
 storybook-static
 .jest-test-results.json
 *.jar

.nvmrc

@@ -0,0 +1 @@
+16.20

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 7.4.1
+
+- CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!
+- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)!
+- Telemetry: Filter addon options to protect sensitive info - [#24000](https://github.com/storybookjs/storybook/pull/24000), thanks [@shilman](https://github.com/shilman)!
+- Types: Remove `@types/react` dep from `@storybook/types` - [#24042](https://github.com/storybookjs/storybook/pull/24042), thanks [@JReinhold](https://github.com/JReinhold)!
+- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!
+
 ## 7.4.0
 
 - Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!

CONTRIBUTING.md

@@ -1,13 +1,24 @@
 # Getting started
 
-Storybook is developed against a specific node version. We recommend using [Volta](https://volta.sh/) as it will automatically install the correct node and yarn version when you first use the repo. If you chose not to use Volta please ensure you you have node version 16 installed (suggestion: v16.5)
+Storybook is developed against a specific node version which is defined in an `.nvmrc` file. You can use any Node version manager that uses the `.nvmrc` configuration file (we recommend [fnm](https://fnm.vercel.app/)).
+
+## Using fnm as a Node version manager
+
+- Install fnm [as per instructions](https://github.com/Schniz/fnm/tree/master#installation)
+- In your shell setup include the `use-on-cd`, `corepack-enabled` and `version-file-strategy recursive` parameters in the `fnm env` command, e.g.
+
+  ```sh
+  eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
+  ```
+
+## Running the local development environment
 
 - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
 
-## Issues
+### Issues
 
 If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:
 

code/addons/themes/postinstall.js

@@ -2,7 +2,7 @@ const { spawn } = require('child_process');
 
 const PACKAGE_MANAGER_TO_COMMAND = {
   npm: 'npx',
-  yarn1: 'yarn dlx',
+  yarn1: 'npx',
   yarn2: 'yarn dlx',
   pnpm: 'pnpm dlx',
 };

code/lib/cli/bin/index.js

@@ -6,4 +6,21 @@ if (majorNodeVersion < 16) {
   process.exit(1);
 }
 
+// The Storybook CLI has a catch block for all of its commands, but if an error
+// occurs before the command even runs, for instance, if an import fails, then
+// such error will fall under the uncaughtException handler.
+// This is the earliest moment we can catch such errors.
+process.once('uncaughtException', (error) => {
+  if (error.message.includes('string-width')) {
+    console.error(
+      [
+        '🔴 Error: It looks like you are having a known issue with package hoisting.',
+        'Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092\n\n',
+      ].join('\n')
+    );
+  }
+
+  throw error;
+});
+
 require('../dist/generate.js');

code/lib/cli/package.json

@@ -61,6 +61,7 @@
     "@ndelangen/get-tarball": "^3.0.7",
     "@storybook/codemod": "workspace:*",
     "@storybook/core-common": "workspace:*",
+    "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",

code/lib/cli/src/add.ts

@@ -91,6 +91,6 @@ export async function add(
   await writeConfig(main);
 
   if (!options.skipPostinstall && isStorybookAddon) {
-    await postinstallAddon(addonName, { packageManager: pkgMgr });
+    await postinstallAddon(addonName, { packageManager: packageManager.type });
   }
 }

code/lib/cli/src/sandbox-templates.ts

@@ -285,6 +285,8 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
+    // TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
+    inDevelopment: true,
   },
   'angular-cli/default-ts': {
     name: 'Angular CLI (latest)',

code/lib/core-common/package.json

@@ -44,6 +44,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@storybook/core-events": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",
     "@types/find-cache-dir": "^3.2.1",

code/lib/core-events/manager-errors.js

@@ -0,0 +1,4 @@
+// This is required for projects that require paths such as `@storybook/core-events/manager-errors`
+// but in CJS, while not in ESM mode. Else an error like this will occur:
+// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/manager-errors.js'
+module.exports = require('./dist/errors/manager-errors');

code/lib/core-events/preview-errors.js

@@ -0,0 +1,4 @@
+// This is required for projects that require paths such as `@storybook/core-events/preview-errors`
+// but in CJS, while not in ESM mode. Else an error like this will occur:
+// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/preview-errors.js'
+module.exports = require('./dist/errors/preview-errors');

code/lib/core-events/server-errors.js

@@ -0,0 +1,4 @@
+// This is required for projects that require paths such as `@storybook/core-events/server-errors`
+// but in CJS, while not in ESM mode. Else an error like this will occur:
+// ENOENT: no such file or directory, open '/xyz/node_modules/@storybook/core-events/server-errors.js'
+module.exports = require('./dist/errors/server-errors');

code/lib/telemetry/src/storybook-metadata.test.ts

@@ -349,6 +349,33 @@ describe('storybook-metadata', () => {
       expect(res.refCount).toEqual(2);
     });
 
+    test('only reports addon options for addon-essentials', async () => {
+      const res = await computeStorybookMetadata({
+        packageJson: packageJsonMock,
+        mainConfig: {
+          ...mainJsMock,
+          addons: [
+            { name: '@storybook/addon-essentials', options: { controls: false } },
+            { name: 'addon-foo', options: { foo: 'bar' } },
+          ],
+        },
+      });
+      expect(res.addons).toMatchInlineSnapshot(`
+        Object {
+          "@storybook/addon-essentials": Object {
+            "options": Object {
+              "controls": false,
+            },
+            "version": "x.x.x",
+          },
+          "addon-foo": Object {
+            "options": undefined,
+            "version": "x.x.x",
+          },
+        }
+      `);
+    });
+
     test.each(Object.entries(metaFrameworks))(
       'should detect the supported metaframework: %s',
       async (metaFramework, name) => {

code/lib/telemetry/src/storybook-metadata.ts

@@ -114,7 +114,9 @@ export const computeStorybookMetadata = async ({
       if (typeof addon === 'string') {
         addonName = sanitizeAddonName(addon);
       } else {
-        options = addon.options;
+        if (addon.name.includes('addon-essentials')) {
+          options = addon.options;
+        }
         addonName = sanitizeAddonName(addon.name);
       }
 

code/lib/types/package.json

@@ -47,7 +47,6 @@
     "@storybook/channels": "workspace:*",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
-    "@types/react": "^16.14.34",
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {

code/package.json

@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.4.1"
 }

code/renderers/vue3/src/docs/sourceDecorator.ts

@@ -247,7 +247,6 @@ export function generateTemplateSource(
               .map((child) => child.content)
               .join('')
         : '';
-      console.log(' vnode ', vnode, ' childSources ', childSources, ' attributes ', attributes);
       const name =
         typeof type === 'string'
           ? type

code/ui/blocks/src/components/TableOfContents.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import type { FC, ReactElement } from 'react';
 import { styled } from '@storybook/theming';
-import tocbot from 'tocbot';
+import * as tocbot from 'tocbot';
 
 export interface TocParameters {
   /** CSS selector for the container to search for headings. */

code/yarn.lock

@@ -6571,6 +6571,7 @@ __metadata:
     "@storybook/client-api": "workspace:*"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
+    "@storybook/core-events": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
@@ -6719,6 +6720,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
+    "@storybook/core-events": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/find-cache-dir": ^3.2.1
@@ -8048,7 +8050,6 @@ __metadata:
     "@types/babel__core": ^7.0.0
     "@types/express": ^4.7.0
     "@types/node": ^16.0.0
-    "@types/react": ^16.14.34
     file-system-cache: 2.3.0
     typescript: ~4.9.3
   languageName: unknown

docs/versions/latest.json

@@ -1,6 +1 @@
-{
-  "version": "7.4.0",
-  "info": {
-    "plain": "- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!\n- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Improve autotitle stories format handling in GFM automigration - [#23964](https://github.com/storybookjs/storybook/pull/23964), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Install latest version of non-core addon - [#23956](https://github.com/storybookjs/storybook/pull/23956), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Set server init generator to use Webpack5 - [#23971](https://github.com/storybookjs/storybook/pull/23971), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix indexing for non-prefixed `stories.*` stories - [#23974](https://github.com/storybookjs/storybook/pull/23974), thanks [@shilman](https://github.com/shilman)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when detecting empty stories field - [#23942](https://github.com/storybookjs/storybook/pull/23942), thanks [@yannbf](https://github.com/yannbf)!\n- Dependencies: Upgrade `escodegen` to fix security issue - [#23973](https://github.com/storybookjs/storybook/pull/23973), thanks [@shilman](https://github.com/shilman)!\n- Index: Fix `*.story.*` CSF indexing - [#23852](https://github.com/storybookjs/storybook/pull/23852), thanks [@shilman](https://github.com/shilman)!\n- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- Shortcuts: Execute preventDefault only if keyboard shortcuts are enabled - [#23412](https://github.com/storybookjs/storybook/pull/23412), thanks [@Spielboerg](https://github.com/Spielboerg)!\n- Types: Fix `React.ReactElement` not found - [#23967](https://github.com/storybookjs/storybook/pull/23967), thanks [@abu-osos](https://github.com/abu-osos)!\n- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"
-  }
-}
+{"version":"7.4.1","info":{"plain":"- CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!\n- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)!\n- Telemetry: Filter addon options to protect sensitive info - [#24000](https://github.com/storybookjs/storybook/pull/24000), thanks [@shilman](https://github.com/shilman)!\n- Types: Remove `@types/react` dep from `@storybook/types` - [#24042](https://github.com/storybookjs/storybook/pull/24042), thanks [@JReinhold](https://github.com/JReinhold)!\n- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!"}}