Merge branch 'next' of github.com:storybookjs/storybook into without-…

…express-polka
storybookjs · Oct 4, 2024 · 66eddc5 · 66eddc5
2 parents b563eee + e33f671
commit 66eddc5
Show file tree

Hide file tree

Showing 193 changed files with 1,070 additions and 938 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 8.3.5
+
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
 ## 8.3.4
 
 - Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,16 @@
+## 8.4.0-alpha.4
+
+- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Core: Upgrade `esbuild`, broadening version range - [#29254](https://github.com/storybookjs/storybook/pull/29254), thanks @ndelangen!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
+## 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!

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

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

diff --git a/code/addons/test/package.json b/code/addons/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "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",

diff --git a/code/addons/test/src/postinstall.ts b/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.

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

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

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

diff --git a/code/core/package.json b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.4.0-alpha.2",
+  "version": "8.4.0-alpha.4",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -280,7 +280,7 @@
     "@storybook/csf": "^0.1.11",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-register": "^3.5.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "process": "^0.11.10",
@@ -341,7 +341,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",
@@ -380,6 +379,7 @@
     "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",

diff --git a/code/core/scripts/helpers/generateTypesFiles.ts b/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])));
           }
         });
       })

diff --git a/code/core/scripts/prep.ts b/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

diff --git a/code/core/src/cli/bin/index.ts b/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.