Merge branch 'next' into next

.circleci/config.yml

@@ -195,6 +195,22 @@ jobs:
             yarn lint
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  knip:
+    executor:
+      class: large
+      name: sb_node_22_classic
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Knip
+          command: |
+            cd code
+            yarn knip --no-exit-code
+      - report-workflow-on-failure
+      - cancel-workflow-on-failure
   check:
     executor:
       class: xlarge
@@ -688,6 +704,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -754,6 +773,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -821,6 +843,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build

.gitignore

@@ -59,3 +59,5 @@ code/.vite-inspect
 .nx/cache
 !**/fixtures/**/yarn.lock
 code/core/report
+
+*storybook.log

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.3.4
+
+- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!
+- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!
+
 ## 8.3.3
 
 - CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh!

CHANGELOG.prerelease.md

@@ -1,3 +1,17 @@
+## 8.4.0-alpha.3
+
+- CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!
+- Core: Migrate from `qs` to `picoquery` - [#28315](https://github.com/storybookjs/storybook/pull/28315), thanks @43081j!
+- UI: Brand image css class conflict causes image to resize on hot reloads - [#29129](https://github.com/storybookjs/storybook/pull/29129), thanks @ShreySinha02!
+
+## 8.4.0-alpha.2
+
+- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!
+- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!
+- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!
+- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!
+- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!
+
 ## 8.4.0-alpha.1
 
 - Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!

code/.eslintrc.js

@@ -42,6 +42,13 @@ module.exports = {
     '@typescript-eslint/default-param-last': 'off',
   },
   overrides: [
+    {
+      files: ['**/templates/virtualModuleModernEntry.js'],
+      rules: {
+        'no-underscore-dangle': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/frameworks/angular/template/**/*'],

code/.storybook/preview.tsx

@@ -320,9 +320,9 @@ export const parameters = {
       { color: '#ff4785', title: 'Coral' },
       { color: '#1EA7FD', title: 'Ocean' },
       { color: 'rgb(252, 82, 31)', title: 'Orange' },
-      { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
       { color: 'hsl(101, 52%, 49%)', title: 'Green' },
-      { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
       { color: '#6F2CAC', title: 'Purple' },
       { color: '#2A0481', title: 'Ultraviolet' },
       { color: 'black' },
@@ -338,7 +338,7 @@ export const parameters = {
       '#fe4a49',
       '#FED766',
       'rgba(0, 159, 183, 1)',
-      'HSLA(240,11%,91%,0.5)',
+      'hsla(240,11%,91%,0.5)',
       'slategray',
     ],
   },

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
@@ -77,6 +77,7 @@
     "@vitest/browser": "^2.0.0",
     "boxen": "^8.0.1",
     "find-up": "^7.0.0",
+    "picocolors": "^1.1.0",
     "semver": "^7.6.3",
     "tinyrainbow": "^1.2.0",
     "ts-dedent": "^2.2.0",

code/addons/test/src/postinstall.ts

@@ -14,6 +14,7 @@ import {
 import { colors, logger } from 'storybook/internal/node-logger';
 
 import { findUp } from 'find-up';
+import picocolors from 'picocolors';
 import { coerce, satisfies } from 'semver';
 import c from 'tinyrainbow';
 import { dedent } from 'ts-dedent';
@@ -30,7 +31,7 @@ export default async function postInstall(options: PostinstallOptions) {
   printSuccess(
     '👋 Howdy!',
     dedent`
-      I'm the installation helper for ${colors.pink.bold(ADDON_NAME)}
+      I'm the installation helper for ${colors.pink(ADDON_NAME)}
 
       Hold on for a moment while I look at your project and get it set up...
     `
@@ -78,22 +79,22 @@ export default async function postInstall(options: PostinstallOptions) {
 
     if (!isRendererSupported) {
       reasons.push(dedent`
-        • The addon cannot yet be used with ${colors.pink.bold(info.frameworkPackageName)}
+        • The addon cannot yet be used with ${picocolors.bold(colors.pink(info.frameworkPackageName))}
       `);
     }
 
     if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.0.0')) {
       reasons.push(`
         • The addon requires Vitest 2.0.0 or later. You are currently using ${vitestVersionSpecifier}.
-          Please update your ${colors.pink.bold('vitest')} dependency and try again.
+          Please update your ${picocolors.bold(colors.pink('vitest'))} dependency and try again.
       `);
     }
 
     if (info.frameworkPackageName === '@storybook/nextjs') {
       const nextVersion = await packageManager.getInstalledVersion('next');
       if (!nextVersion) {
         reasons.push(dedent`
-          • You are using ${colors.pink.bold('@storybook/nextjs')} without having ${colors.pink.bold('next')} installed.
+          • You are using ${picocolors.bold(colors.pink('@storybook/nextjs'))} without having ${picocolors.bold(colors.pink('next'))} installed.
             Please install "next" or use a different Storybook framework integration and try again.
         `);
       }
@@ -105,7 +106,7 @@ export default async function postInstall(options: PostinstallOptions) {
       );
       reasons.push(
         dedent`
-          To roll back the installation, remove ${colors.pink.bold(ADDON_NAME)} from the "addons" array
+          To roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array
           in your main Storybook config file and remove the dependency from your package.json file.
         `
       );
@@ -148,7 +149,7 @@ export default async function postInstall(options: PostinstallOptions) {
       dedent`
         It looks like you're using Next.js.
 
-        Adding ${colors.pink.bold(`@storybook/experimental-nextjs-vite/vite-plugin`)} so you can use it with Vitest.
+        Adding ${picocolors.bold(colors.pink(`@storybook/experimental-nextjs-vite/vite-plugin`))} so you can use it with Vitest.
 
         More info about the plugin at: ${c.cyan`https://github.com/storybookjs/vite-plugin-storybook-nextjs`}
       `
@@ -256,7 +257,7 @@ export default async function postInstall(options: PostinstallOptions) {
         '🚨 Oh no!',
         dedent`
           You seem to have an existing test configuration in your Vite config file:
-          ${colors.gray(vitestWorkspaceFile)}
+          ${colors.gray(vitestWorkspaceFile || '')}
 
           I was able to configure most of the addon but could not safely extend 
           your existing workspace file automatically, you must do it yourself. This was the last step.

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.4.0-alpha.1",
+  "version": "8.4.0-alpha.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -41,7 +41,7 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
-    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
     "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",