Release: Prerelease 8.1.0-alpha.2

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -19,18 +19,19 @@ body:
     attributes:
       label: To Reproduce
       description: >-
-        We prioritize bug reports that have a reproduction. You can create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and
-        following the instructions. Read our
-        [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce)
-        to learn more about creating reproductions.
+        Due to the high volume of reports we receive, we can only prioritize bug reports that include a clear reproduction of the problem. Please use [storybook.new](https://storybook.new) to create one, and consult our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) for guidance. Thank you for your understanding!
       placeholder: >-
-        Paste a link to your reproduction here. We prioritize issues with reproductions over those without.
+        Please provide a link to your reproduction here. If creating a reproduction really isn't feasible, let us know and be sure to include as much detail as you can to help us understand the issue. 
+    validations:
+      required: true
   - type: textarea
     id: system
     attributes:
       label: System
       description: Please paste the results of `npx storybook@latest info` here.
       render: bash
+    validations:
+      required: true
   - type: textarea
     id: context
     attributes:

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.1.0-alpha.2
+
+- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
+- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
+- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
+- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
+- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
+- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
+
 ## 8.1.0-alpha.1
 
 - Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!

code/addons/actions/src/runtime/action.ts

@@ -21,10 +21,9 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
       findProto(e, (proto) => /^Synthetic(?:Base)?Event$/.test(proto.constructor.name)) &&
       typeof (e as SyntheticEvent).persist === 'function'
   );
-const serializeArg = <T>(a: T) => {
+const serializeArg = <T extends object>(a: T) => {
   if (isReactSyntheticEvent(a)) {
     const e: SyntheticEvent = Object.create(
-      // @ts-expect-error (Converted from ts-ignore)
       a.constructor.prototype,
       Object.getOwnPropertyDescriptors(a)
     );

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { userEvent, within, waitFor, expect } from '@storybook/test';
-import isChromatic from 'chromatic/isChromatic';
+import { isChromatic } from '../../../../ui/.storybook/isChromatic';
 
 import { getCalls, getInteractions } from '../mocks';
 import { InteractionsPanel } from './InteractionsPanel';

code/addons/links/src/utils.ts

@@ -37,9 +37,7 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
   return new Promise((resolve) => {
     const { location } = document;
     const query = parseQuery(location.search);
-    // @ts-expect-error (Converted from ts-ignore)
-    const existingId = [].concat(query.id)[0];
-    // @ts-expect-error (Converted from ts-ignore)
+    const existingId = query.id;
     const titleToLink = title || existingId.split('--', 2)[0];
     const id = toId(titleToLink, name);
     const path = `/story/${id}`;

code/chromatic.config.json

@@ -3,6 +3,7 @@
   "projectToken": "80b312430ec4",
   "buildScriptName": "storybook:ui:build",
   "onlyChanged": true,
-  "storybookConfigDir": "./ui/.storybook",
-  "storybookBaseDir": "./code"
+  "storybookConfigDir": "ui/.storybook",
+  "storybookBaseDir": "./code",
+  "zip": true
 }

code/frameworks/react-vite/README.md

@@ -1,3 +1,3 @@
 # Storybook for React & Vite
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.

code/frameworks/react-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for React & Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/8.0/get-started/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more.

code/frameworks/vue3-webpack5/README.md

@@ -1,3 +1,3 @@
 # Storybook for Vue 3 and Webpack
 
-See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more.

code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts

@@ -52,22 +52,26 @@ describe('upgrade-storybook-related-dependencies fix', () => {
       {
         packageName: 'storybook',
         packageVersion: '8.0.0',
-        availableUpgrade: undefined,
+        availableUpgrade: '8.0.0',
         hasIncompatibleDependencies: true,
       },
     ];
     vi.mocked(docsUtils.getIncompatibleStorybookPackages).mockResolvedValue(analyzedPackages);
     await expect(
       check({
         packageManager: {
-          getAllDependencies: async () => ({
-            '@chromatic-com/storybook': '1.2.9',
-            '@storybook/jest': '0.2.3',
-            '@storybook/preset-create-react-app': '3.2.0',
-            storybook: '8.0.0',
-          }),
+          getAllDependencies: async () =>
+            analyzedPackages.reduce(
+              (acc, { packageName, packageVersion }) => {
+                acc[packageName] = packageVersion;
+                return acc;
+              },
+              {} as Record<string, string>
+            ),
           latestVersion: async (pkgName) =>
             analyzedPackages.find((pkg) => pkg.packageName === pkgName)?.availableUpgrade || '',
+          getInstalledVersion: async (pkgName) =>
+            analyzedPackages.find((pkg) => pkg.packageName === pkgName)?.packageVersion || null,
         },
       })
     ).resolves.toMatchInlineSnapshot(`

code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts

@@ -1,6 +1,6 @@
 import { dedent } from 'ts-dedent';
 import { cyan, yellow } from 'chalk';
-import { valid, coerce } from 'semver';
+import { gt } from 'semver';
 import type { JsPackageManager } from '@storybook/core-common';
 import { isCorePackage } from '@storybook/core-common';
 import type { Fix } from '../types';
@@ -21,24 +21,14 @@ async function getLatestVersions(
   packages: [string, string][]
 ): Promise<PackageMetadata[]> {
   return Promise.all(
-    packages.map(async ([packageName, beforeVersion]) => ({
+    packages.map(async ([packageName]) => ({
       packageName,
-      beforeVersion: coerce(beforeVersion)?.toString() || null,
+      beforeVersion: await packageManager.getInstalledVersion(packageName).catch(() => null),
       afterVersion: await packageManager.latestVersion(packageName).catch(() => null),
     }))
   );
 }
 
-function isPackageUpgradable(
-  afterVersion: string,
-  packageName: string,
-  allDependencies: Record<string, string>
-) {
-  const installedVersion = coerce(allDependencies[packageName])?.toString();
-
-  return valid(afterVersion) && afterVersion !== installedVersion;
-}
-
 /**
  * Is the user upgrading to the `latest` version of Storybook?
  * Let's try to pull along some of the storybook related dependencies to `latest` as well!
@@ -75,15 +65,13 @@ export const upgradeStorybookRelatedDependencies = {
 
     const packageVersions = await getLatestVersions(packageManager, uniquePackages);
 
-    const upgradablePackages = packageVersions.filter(
-      ({ packageName, afterVersion, beforeVersion }) => {
-        if (beforeVersion === null || afterVersion === null) {
-          return false;
-        }
-
-        return isPackageUpgradable(afterVersion, packageName, allDependencies);
+    const upgradablePackages = packageVersions.filter(({ afterVersion, beforeVersion }) => {
+      if (beforeVersion === null || afterVersion === null) {
+        return false;
       }
-    );
+
+      return gt(afterVersion, beforeVersion);
+    });
 
     return upgradablePackages.length > 0 ? { upgradable: upgradablePackages } : null;
   },

code/lib/cli/src/automigrate/fixes/vite-config-file.ts

@@ -97,12 +97,12 @@ export const viteConfigFile = {
   prompt({ existed, plugins }) {
     if (existed) {
       return dedent`
-        Since version 8.0.0, Storybook no longer ships with a Vite config build-in.
+        Since version 8.0.0, Storybook no longer ships with an in-built Vite config.
         We've detected you do have a Vite config, but you may be missing the following plugins in it.
 
         ${plugins.map((plugin) => `  - ${plugin}`).join('\n')}
 
-        If you do already have these plugins, you can ignore this message.
+        If you already have these plugins, you can ignore this message.
 
         You can find more information on how to do this here:
         https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file
@@ -111,7 +111,7 @@ export const viteConfigFile = {
       `;
     }
     return dedent`
-      Since version 8.0.0, Storybook no longer ships with a Vite config build-in.
+      Since version 8.0.0, Storybook no longer ships with an in-built Vite config.
       Please add a vite.config.js file to your project root.
 
       You can find more information on how to do this here:

code/lib/cli/src/generate.ts

@@ -59,7 +59,7 @@ command('init')
   .option('-b --builder <webpack5 | vite>', 'Builder library')
   .option('-l --linkable', 'Prepare installation for link (contributor helper)')
   .action((options: CommandOptions) => {
-    initiate(options, pkg).catch(() => process.exit(1));
+    initiate(options).catch(() => process.exit(1));
   });
 
 command('add <addon>')
@@ -155,7 +155,7 @@ command('sandbox [filterValue]')
   .option('-o --output <outDir>', 'Define an output directory')
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
-    sandbox({ filterValue, ...options }, pkg).catch((e) => {
+    sandbox({ filterValue, ...options }).catch((e) => {
       logger.error(e);
       process.exit(1);
     })

code/lib/cli/src/initiate.ts

@@ -1,5 +1,4 @@
 import { appendFile, readFile } from 'fs/promises';
-import type { PackageJson } from 'read-pkg-up';
 import findUp from 'find-up';
 import chalk from 'chalk';
 import prompts from 'prompts';
@@ -228,10 +227,7 @@ const projectTypeInquirer = async (
   process.exit(0);
 };
 
-export async function doInitiate(
-  options: CommandOptions,
-  pkg: PackageJson
-): Promise<
+export async function doInitiate(options: CommandOptions): Promise<
   | {
       shouldRunDev: true;
       projectType: ProjectType;
@@ -409,14 +405,14 @@ export async function doInitiate(
   };
 }
 
-export async function initiate(options: CommandOptions, pkg: PackageJson): Promise<void> {
+export async function initiate(options: CommandOptions): Promise<void> {
   const initiateResult = await withTelemetry(
     'init',
     {
       cliOptions: options,
       printError: (err) => !err.handled && logger.error(err),
     },
-    () => doInitiate(options, pkg)
+    () => doInitiate(options)
   );
 
   if (initiateResult?.shouldRunDev) {

code/lib/cli/src/sandbox.ts

@@ -10,7 +10,7 @@ import invariant from 'tiny-invariant';
 import { lt, prerelease } from 'semver';
 import type { Template, TemplateKey } from './sandbox-templates';
 import { allTemplates as TEMPLATES } from './sandbox-templates';
-import type { PackageJson, PackageManagerName } from '@storybook/core-common';
+import type { PackageManagerName } from '@storybook/core-common';
 import { JsPackageManagerFactory } from '@storybook/core-common';
 import { versions } from '@storybook/core-common';
 import { doInitiate } from './initiate';
@@ -28,10 +28,12 @@ type Choice = keyof typeof TEMPLATES;
 
 const toChoices = (c: Choice): prompts.Choice => ({ title: TEMPLATES[c].name, value: c });
 
-export const sandbox = async (
-  { output: outputDirectory, filterValue, init, ...options }: SandboxOptions,
-  pkg: PackageJson
-) => {
+export const sandbox = async ({
+  output: outputDirectory,
+  filterValue,
+  init,
+  ...options
+}: SandboxOptions) => {
   // Either get a direct match when users pass a template id, or filter through all templates
   let selectedConfig: Template | undefined = TEMPLATES[filterValue as TemplateKey];
   let templateId: Choice | null = selectedConfig ? (filterValue as TemplateKey) : null;
@@ -222,12 +224,9 @@ export const sandbox = async (
         const before = process.cwd();
         process.chdir(templateDestination);
         // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project
-        await doInitiate(
-          {
-            ...options,
-          },
-          pkg
-        );
+        await doInitiate({
+          ...options,
+        });
         process.chdir(before);
       }
     } catch (err) {

code/lib/core-common/src/js-package-manager/JsPackageManager.ts

@@ -17,6 +17,8 @@ const logger = console;
 
 export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm';
 
+type StorybookPackage = keyof typeof storybookPackagesVersions;
+
 /**
  * Extract package name and version from input
  *
@@ -381,9 +383,8 @@ export abstract class JsPackageManager {
   public async getVersion(packageName: string, constraint?: string): Promise<string> {
     let current: string | undefined;
 
-    if (/(@storybook|^sb$|^storybook$)/.test(packageName)) {
-      // @ts-expect-error (Converted from ts-ignore)
-      current = storybookPackagesVersions[packageName];
+    if (packageName in storybookPackagesVersions) {
+      current = storybookPackagesVersions[packageName as StorybookPackage];
     }
 
     let latest;
@@ -535,6 +536,18 @@ export abstract class JsPackageManager {
     }
   }
 
+  /**
+   * Returns the installed (within node_modules or pnp zip) version of a specified package
+   */
+  public async getInstalledVersion(packageName: string): Promise<string | null> {
+    const installations = await this.findInstallations([packageName]);
+    if (!installations) {
+      return null;
+    }
+
+    return Object.entries(installations.dependencies)[0]?.[1]?.[0].version || null;
+  }
+
   public async executeCommand({
     command,
     args = [],

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

@@ -37,11 +37,13 @@ export const init: ModuleFn = ({ store }) => {
     clearNotification: (id) => {
       const { notifications } = store.getState();
 
-      store.setState({ notifications: notifications.filter((n) => n.id !== id) });
-
       const notification = notifications.find((n) => n.id === id);
-      if (notification && notification.onClear) {
-        notification.onClear({ dismissed: false });
+
+      if (notification) {
+        store.setState({ notifications: notifications.filter((n) => n.id !== id) });
+        if (notification.onClear) {
+          notification.onClear({ dismissed: false });
+        }
       }
     },
   };

code/lib/preview-api/src/modules/preview-web/Preview.tsx

@@ -100,9 +100,7 @@ export class Preview<TRenderer extends Renderer> {
         get: (_, method) => {
           if (this.storyStoreValue) {
             deprecate('Accessing the Story Store is deprecated and will be removed in 9.0');
-
-            // @ts-expect-error I'm not sure if there's a way to keep TS happy here
-            return this.storyStoreValue[method];
+            return this.storyStoreValue[method as keyof StoryStore<TRenderer>];
           }
 
           throw new StoryStoreAccessedBeforeInitializationError();

code/lib/preview-api/src/modules/store/csf/__mocks__/defaultExportAnnotations.mockfile.ts

@@ -0,0 +1,7 @@
+export default {
+  parameters: {
+    fromAnnotations: {
+      asDefaultImport: true,
+    },
+  },
+};

code/lib/preview-api/src/modules/store/csf/__mocks__/namedExportAnnotations.mockfile.ts

@@ -0,0 +1,5 @@
+export const parameters = {
+  fromAnnotations: {
+    asObjectImport: true,
+  },
+};