Release: Prerelease 8.4.0-alpha.3

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,9 @@
+## 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!

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/test/package.json

@@ -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/core/package.json

@@ -329,7 +329,6 @@
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/prompts": "^2.0.9",
-    "@types/qs": "^6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.5.8",
@@ -344,7 +343,6 @@
     "browser-dtector": "^3.4.0",
     "camelcase": "^8.0.0",
     "chai": "^4.4.1",
-    "chalk": "^5.3.0",
     "cli-table3": "^0.6.1",
     "commander": "^12.1.0",
     "comment-parser": "^1.4.1",
@@ -385,12 +383,13 @@
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
     "open": "^8.4.0",
+    "picocolors": "^1.1.0",
     "picomatch": "^2.3.0",
+    "picoquery": "^1.4.0",
     "polished": "^4.2.2",
     "prettier": "^3.2.5",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
-    "qs": "^6.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",

code/core/scripts/helpers/generateTypesFiles.ts

@@ -1,7 +1,7 @@
 import { join, relative } from 'node:path';
 
 import { spawn } from '../../../../scripts/prepare/tools';
-import { chalk, limit, process } from '../../../../scripts/prepare/tools';
+import { limit, picocolors, process } from '../../../../scripts/prepare/tools';
 import type { getEntries } from '../entries';
 
 export async function generateTypesFiles(
@@ -69,7 +69,7 @@ export async function generateTypesFiles(
             console.log(index, fileName);
             process.exit(dtsProcess.exitCode || 1);
           } else {
-            console.log('Generated types for', chalk.cyan(relative(cwd, dtsEntries[index])));
+            console.log('Generated types for', picocolors.cyan(relative(cwd, dtsEntries[index])));
           }
         });
       })

code/core/scripts/prep.ts

@@ -6,13 +6,13 @@ import { dirname, join } from 'node:path';
 import type { Metafile } from 'esbuild';
 
 import {
-  chalk,
   dedent,
   esbuild,
   globalExternals,
   measure,
   merge,
   nodeInternals,
+  picocolors,
   prettyTime,
   process,
 } from '../../../scripts/prepare/tools';
@@ -77,12 +77,15 @@ async function run() {
     types,
   ]);
 
-  console.log('Files generated in', chalk.yellow(prettyTime(filesTime)));
-  console.log('Package.json generated in', chalk.yellow(prettyTime(packageJsonTime)));
-  console.log(isWatch ? 'Watcher started in' : 'Bundled in', chalk.yellow(prettyTime(distTime)));
+  console.log('Files generated in', picocolors.yellow(prettyTime(filesTime)));
+  console.log('Package.json generated in', picocolors.yellow(prettyTime(packageJsonTime)));
+  console.log(
+    isWatch ? 'Watcher started in' : 'Bundled in',
+    picocolors.yellow(prettyTime(distTime))
+  );
   console.log(
     isOptimized ? 'Generated types in' : 'Generated type mappers in',
-    chalk.yellow(prettyTime(typesTime))
+    picocolors.yellow(prettyTime(typesTime))
   );
 
   async function generateDistFiles() {
@@ -313,7 +316,7 @@ async function run() {
 
       // show a log message when a file is compiled
       watch(join(cwd, 'dist'), { recursive: true }, (event, filename) => {
-        console.log(`compiled ${chalk.cyan(filename)}`);
+        console.log(`compiled ${picocolors.cyan(filename)}`);
       });
     } else {
       // repo root/bench/esbuild-metafiles/core

code/core/src/cli/bin/index.ts

@@ -3,10 +3,10 @@ import { addToGlobalContext } from '@storybook/core/telemetry';
 
 import { logger } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
 import { program } from 'commander';
 import { findPackageSync } from 'fd-package-json';
 import leven from 'leven';
+import picocolors from 'picocolors';
 import invariant from 'tiny-invariant';
 
 import { build } from '../build';
@@ -70,7 +70,7 @@ command('dev')
   )
   .action(async (options) => {
     logger.setLevel(options.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
+    consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}`) + picocolors.reset('\n'));
 
     // The key is the field created in `options` variable for
     // each command line argument. Value is the env variable.
@@ -110,7 +110,7 @@ command('build')
   .action(async (options) => {
     process.env.NODE_ENV = process.env.NODE_ENV || 'production';
     logger.setLevel(options.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
+    consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`));
 
     // The key is the field created in `options` variable for
     // each command line argument. Value is the env variable.

code/core/src/cli/eslintPlugin.ts

@@ -6,8 +6,8 @@ import { paddedLog } from '@storybook/core/common';
 
 import { readConfig, writeConfig } from '@storybook/core/csf-tools';
 
-import chalk from 'chalk';
 import detectIndent from 'detect-indent';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -108,7 +108,7 @@ export const suggestESLintPlugin = async (): Promise<boolean> => {
     type: 'confirm',
     name: 'shouldInstall',
     message: dedent`
-        We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${chalk.yellow(
+        We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${picocolors.yellow(
           'https://github.com/storybookjs/eslint-plugin-storybook#readme'
         )}
 

code/core/src/cli/helpers.ts

@@ -11,8 +11,8 @@ import {
 import { versions as storybookMonorepoPackages } from '@storybook/core/common';
 import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/types';
 
-import chalk from 'chalk';
 import { findUpSync } from 'find-up';
+import picocolors from 'picocolors';
 import { coerce, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 import invariant from 'tiny-invariant';
@@ -34,7 +34,7 @@ export function readFileAsJson(jsonPath: string, allowComments?: boolean) {
   try {
     return JSON.parse(jsonContent);
   } catch (e) {
-    logger.error(chalk.red(`Invalid json in file: ${filePath}`));
+    logger.error(picocolors.red(`Invalid json in file: ${filePath}`));
     throw e;
   }
 }

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

@@ -2,9 +2,9 @@ import { existsSync, readFileSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 
-import chalk from 'chalk';
 import type { CommonOptions } from 'execa';
 import { execaCommand, execaCommandSync } from 'execa';
+import picocolors from 'picocolors';
 import { gt, satisfies } from 'semver';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -384,11 +384,11 @@ export abstract class JsPackageManager {
       latest = await this.latestVersion(packageName, constraint);
     } catch (e) {
       if (current) {
-        logger.warn(`\n     ${chalk.yellow(String(e))}`);
+        logger.warn(`\n     ${picocolors.yellow(String(e))}`);
         return current;
       }
 
-      logger.error(`\n     ${chalk.red(String(e))}`);
+      logger.error(`\n     ${picocolors.red(String(e))}`);
       throw new HandledError(e);
     }
 

code/core/src/common/utils/log-config.ts

@@ -1,6 +1,6 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 export function logConfig(caption: unknown, config: unknown) {
-  console.log(chalk.cyan(caption));
+  console.log(picocolors.cyan(String(caption)));
   console.dir(config, { depth: null });
 }

code/core/src/common/utils/log.ts

@@ -1,29 +1,29 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 const logger = console;
 
 export const commandLog = (message: string) => {
-  process.stdout.write(chalk.cyan(' • ') + message);
+  process.stdout.write(picocolors.cyan(' • ') + message);
 
   // Need `void` to be able to use this function in a then of a Promise<void>
   return (errorMessage?: string | void, errorInfo?: string) => {
     if (errorMessage) {
-      process.stdout.write(`. ${chalk.red('✖')}\n`);
-      logger.error(`\n     ${chalk.red(errorMessage)}`);
+      process.stdout.write(`. ${picocolors.red('✖')}\n`);
+      logger.error(`\n     ${picocolors.red(errorMessage)}`);
 
       if (!errorInfo) {
         return;
       }
 
       const newErrorInfo = errorInfo
         .split('\n')
-        .map((line) => `     ${chalk.dim(line)}`)
+        .map((line) => `     ${picocolors.dim(line)}`)
         .join('\n');
       logger.error(`${newErrorInfo}\n`);
       return;
     }
 
-    process.stdout.write(`. ${chalk.green('✓')}\n`);
+    process.stdout.write(`. ${picocolors.green('✓')}\n`);
   };
 };
 
@@ -56,7 +56,7 @@ export function codeLog(codeLines: string[], leftPadAmount?: number) {
     .map((line) => {
       const rightPadAmount = maxLength - line.length;
       let newLine = line + getChars(' ', rightPadAmount);
-      newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `);
+      newLine = getChars(' ', leftPadAmount || 2) + picocolors.inverse(` ${newLine} `);
       return newLine;
     })
     .join('\n');

code/core/src/common/utils/notify-telemetry.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import { cache } from './cache';
 
@@ -19,14 +19,14 @@ export const notifyTelemetry = async () => {
   cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now().toString());
 
   logger.log(
-    `${chalk.magenta.bold(
-      'Attention'
+    `${picocolors.magenta(
+      picocolors.bold('Attention')
     )}: Storybook now collects completely anonymous telemetry regarding usage.`
   );
   logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
   logger.log(
     `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
   );
-  logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+  logger.log(picocolors.cyan('https://storybook.js.org/telemetry'));
   logger.log();
 };