Merge pull request #23982 from storybookjs/version-prerelease-from-7.4.0

Release: Preminor alpha 7.5.0-alpha.0

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -30,7 +30,7 @@ body:
     attributes:
       label: System
       description: Please paste the results of `npx storybook@latest info` here.
-      render: shell
+      render: bash
   - type: textarea
     id: context
     attributes:

CHANGELOG.prerelease.md

@@ -1,3 +1,15 @@
+## 7.5.0-alpha.0
+
+- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Add more information to `storybook info` command - [#24003](https://github.com/storybookjs/storybook/pull/24003), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Remove random commas in storybook upgrade logs - [#22333](https://github.com/storybookjs/storybook/pull/22333), thanks [@joaonunomota](https://github.com/joaonunomota)!
+- Doc Blocks: Add `title` to `Meta` prop types - [#23370](https://github.com/storybookjs/storybook/pull/23370), thanks [@iqbalcodes6602](https://github.com/iqbalcodes6602)!
+- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)!
+- Docs: Fix table of contents scroll behavior - [#23986](https://github.com/storybookjs/storybook/pull/23986), thanks [@almoghaimo](https://github.com/almoghaimo)!
+- 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)!
+
 ## 7.4.0-alpha.2
 
 - Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!

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/src/generate.ts

@@ -22,6 +22,7 @@ import { dev } from './dev';
 import { build } from './build';
 import { parseList, getEnvConfig } from './utils';
 import versions from './versions';
+import { JsPackageManagerFactory } from './js-package-manager';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
@@ -87,17 +88,24 @@ command('upgrade')
 
 command('info')
   .description('Prints debugging information about the local environment')
-  .action(() => {
-    consoleLogger.log(chalk.bold('\nEnvironment Info:'));
-    envinfo
-      .run({
-        System: ['OS', 'CPU'],
-        Binaries: ['Node', 'Yarn', 'npm'],
-        Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
-        npmPackages: '@storybook/*',
-        npmGlobalPackages: '@storybook/*',
-      })
-      .then(consoleLogger.log);
+  .action(async () => {
+    consoleLogger.log(chalk.bold('\nStorybook Environment Info:'));
+    const pkgManager = await JsPackageManagerFactory.getPackageManager();
+    const activePackageManager = pkgManager.type.replace(/\d/, ''); // 'yarn1' -> 'yarn'
+    const output = await envinfo.run({
+      System: ['OS', 'CPU', 'Shell'],
+      Binaries: ['Node', 'Yarn', 'npm', 'pnpm'],
+      Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+      npmPackages: '{@storybook/*,*storybook*,sb,chromatic}',
+      npmGlobalPackages: '{@storybook/*,*storybook*,sb,chromatic}',
+    });
+    const activePackageManagerLine = output.match(new RegExp(`${activePackageManager}:.*`, 'i'));
+    consoleLogger.log(
+      output.replace(
+        activePackageManagerLine,
+        chalk.bold(`${activePackageManagerLine} <----- active`)
+      )
+    );
   });
 
 command('migrate [migration]')

code/lib/cli/src/upgrade.ts

@@ -190,14 +190,16 @@ export const doUpgrade = async ({
   const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], {
     stdio: 'pipe',
     shell: true,
-  }).output.toString();
-  logger.info(check);
+  });
+  logger.info(check.stdout.toString());
+  logger.info(check.stderr.toString());
 
   const checkSb = spawnSync('npx', ['npm-check-updates@latest', 'sb', ...flags], {
     stdio: 'pipe',
     shell: true,
-  }).output.toString();
-  logger.info(checkSb);
+  });
+  logger.info(checkSb.stdout.toString());
+  logger.info(checkSb.stderr.toString());
 
   if (!dryRun) {
     commandLog(`Installing upgrades`);

code/lib/manager-api/src/modules/stories.ts

@@ -263,7 +263,10 @@ export interface SubAPI {
    * @param {StatusUpdate} update - An object containing the updated status information.
    * @returns {Promise<void>} A promise that resolves when the status has been updated.
    */
-  experimental_updateStatus: (addonId: string, update: API_StatusUpdate) => Promise<void>;
+  experimental_updateStatus: (
+    addonId: string,
+    update: API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate)
+  ) => Promise<void>;
   /**
    * Updates the filtering of the index.
    *
@@ -581,13 +584,27 @@ export const init: ModuleFn<SubAPI, SubState> = ({
     },
 
     /* EXPERIMENTAL APIs */
-    experimental_updateStatus: async (id, update) => {
+    experimental_updateStatus: async (id, input) => {
       const { status, internal_index: index } = store.getState();
       const newStatus = { ...status };
 
+      const update = typeof input === 'function' ? input(status) : input;
+
+      if (Object.keys(update).length === 0) {
+        return;
+      }
+
       Object.entries(update).forEach(([storyId, value]) => {
         newStatus[storyId] = { ...(newStatus[storyId] || {}) };
-        newStatus[storyId][id] = value;
+        if (value === null) {
+          delete newStatus[storyId][id];
+        } else {
+          newStatus[storyId][id] = value;
+        }
+
+        if (Object.keys(newStatus[storyId]).length === 0) {
+          delete newStatus[storyId];
+        }
       });
 
       await store.setState({ status: newStatus }, { persistence: 'session' });

code/lib/manager-api/src/tests/stories.test.ts

@@ -1273,6 +1273,90 @@ describe('stories API', () => {
         }
       `);
     });
+    it('delete when value is null', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      // do a second update, this time with null
+      await expect(
+        api.experimental_updateStatus('a-addon-id', {
+          'a-story-id': null,
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        })
+      ).resolves.not.toThrow();
+
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
+    it('updates with a function', async () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+
+      await api.setIndex({ v: 4, entries: mockEntries });
+
+      // setup initial state
+      await expect(
+        api.experimental_updateStatus('a-addon-id', () => ({
+          'a-story-id': {
+            status: 'pending',
+            title: 'an addon title',
+            description: 'an addon description',
+          },
+          'another-story-id': { status: 'success', title: 'a addon title', description: '' },
+        }))
+      ).resolves.not.toThrow();
+
+      // use existing state in function
+      await expect(
+        api.experimental_updateStatus('a-addon-id', (current) => {
+          return Object.fromEntries(
+            Object.entries(current).map(([k, v]) => [k, { ...v['a-addon-id'], status: 'success' }])
+          );
+        })
+      ).resolves.not.toThrow();
+      expect(store.getState().status).toMatchInlineSnapshot(`
+        Object {
+          "a-story-id": Object {
+            "a-addon-id": Object {
+              "description": "an addon description",
+              "status": "success",
+              "title": "an addon title",
+            },
+          },
+          "another-story-id": Object {
+            "a-addon-id": Object {
+              "description": "",
+              "status": "success",
+              "title": "a addon title",
+            },
+          },
+        }
+      `);
+    });
   });
   describe('experimental_setFilter', () => {
     it('is included in the initial state', async () => {

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/lib/types/src/modules/api-stories.ts

@@ -186,5 +186,5 @@ export type API_StatusState = Record<StoryId, Record<string, API_StatusObject>>;
 export type API_StatusUpdate = Record<StoryId, API_StatusObject>;
 
 export type API_FilterFunction = (
-  item: API_PreparedIndexEntry & { status: Record<string, API_StatusObject> }
+  item: API_PreparedIndexEntry & { status: Record<string, API_StatusObject | null> }
 ) => boolean;

code/package.json

@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.5.0-alpha.0"
 }

code/ui/blocks/src/blocks/Meta.tsx

@@ -5,7 +5,7 @@ import type { BaseAnnotations, ModuleExports } from '@storybook/types';
 import { Anchor } from './Anchor';
 import { DocsContext } from './DocsContext';
 
-type MetaProps = BaseAnnotations & { of?: ModuleExports };
+type MetaProps = BaseAnnotations & { of?: ModuleExports; title?: string };
 
 /**
  * This component is used to declare component metadata in docs

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. */
@@ -40,9 +40,12 @@ const Wrapper = styled.div(({ theme }) => ({
 
 const Content = styled.div(({ theme }) => ({
   position: 'fixed',
+  bottom: 0,
   top: 0,
   width: '10rem',
   paddingTop: '4rem',
+  paddingBottom: '2rem',
+  overflowY: 'auto',
 
   fontFamily: theme.typography.fonts.base,
   fontSize: theme.typography.size.s2,

code/yarn.lock

@@ -8037,7 +8037,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/api/doc-block-colorpalette.md

@@ -2,6 +2,8 @@
 title: 'ColorPalette'
 ---
 
+<YouTubeCallout id="tyNIspWhFyU" title="Storybook for Design Systems - ColorPalette Doc Block" params='start=20' />
+
 The `ColorPalette` block allows you to document all color-related items (e.g., swatches) used throughout your project.
 
 ![Screenshot of ColorPalette and ColorItem blocks](./doc-block-colorpalette.png)

docs/api/doc-block-icongallery.md

@@ -2,6 +2,8 @@
 title: 'IconGallery'
 ---
 
+<YouTubeCallout id="tyNIspWhFyU" title="Storybook for Design Systems - IconGallery Doc Block" params='start=131' />
+
 The `IconGallery` block enables you to easily document React icon components associated with your project, displayed in a neat grid.
 
 ![Screenshot of IconGallery and IconItem blocks](./doc-block-icongallery.png)

docs/api/doc-block-typeset.md

@@ -2,6 +2,8 @@
 title: 'Typeset'
 ---
 
+<YouTubeCallout id="tyNIspWhFyU" title="Storybook for Design Systems - Typeset Doc Block" params='start=73' />
+
 The `Typeset` block helps document the fonts used throughout your project.
 
 ![Screenshot of Typeset block](./doc-block-typeset.png)

docs/api/main-config-features.md

@@ -22,7 +22,9 @@ Enables Storybook's additional features.
 
 Type: `boolean`
 
-Generates a `stories.json` file to help story loading with the on-demand mode.
+Default: `true`, when [`storyStoreV7`](#storystorev7) is `true`
+
+Generates a `index.json` and `stories.json` files to help story loading with the on-demand mode.
 
 <!-- prettier-ignore-start -->