Merge branch 'next' into pr/43081j/28315

storybookjs · Sep 30, 2024 · be07741 · be07741
2 parents 1f43562 + 13db1c7
commit be07741
Show file tree

Hide file tree

Showing 215 changed files with 1,282 additions and 727 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -154,6 +154,8 @@ jobs:
             cd code
             yarn local-registry --publish
       - report-workflow-on-failure
+      - store_artifacts: 
+          path: code/bench/esbuild-metafiles
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@@ -164,6 +166,7 @@ jobs:
           paths:
             - code/node_modules
             - scripts/node_modules
+            - code/bench
             - code/examples
             - code/node_modules
             - code/addons
@@ -192,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
@@ -685,6 +704,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -751,6 +773,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -818,6 +843,9 @@ workflows:
       - lint:
           requires:
             - build
+      - knip:
+          requires:
+            - build
       - check:
           requires:
             - build

diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@ test-results
 /repros
 /sandbox
 /bench
+/code/bench
 .verdaccio-cache
 .next
 /.npmrc
@@ -58,3 +59,5 @@ code/.vite-inspect
 .nx/cache
 !**/fixtures/**/yarn.lock
 code/core/report
+
+*storybook.log
diff --git a/CHANGELOG.md b/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!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,11 @@
+## 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!

diff --git a/code/.eslintrc.js b/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/**/*'],

diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
+const allMetafiles = import.meta.glob([
+  '../bench/esbuild-metafiles/**/*.json',
+  // the core metafile is too big to be loaded automatically in the iframe
+  '!../bench/esbuild-metafiles/core/core.json',
+]);
+
+const METAFILES_DIR = '../bench/esbuild-metafiles/';
+const PACKAGES_WITHOUT_ORG = ['storybook', 'sb', 'create-storybook'];
+
+// allows the metafile path to be used in the URL hash
+const safeMetafileArg = (path: string) =>
+  path
+    .replace(METAFILES_DIR, '')
+    .replaceAll('/', '__')
+    .replace(/(\w*).json/, '$1');
+
+export default {
+  title: 'Bench',
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    metafile: safeMetafileArg(Object.keys(allMetafiles)[0]),
+  },
+  argTypes: {
+    metafile: {
+      options: Object.keys(allMetafiles).concat('core - core').map(safeMetafileArg).sort(),
+      mapping: Object.fromEntries(
+        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
+      ),
+      control: {
+        type: 'select',
+        labels: Object.fromEntries(
+          Object.keys(allMetafiles)
+            .map((path) => {
+              const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
+              const pkgName = PACKAGES_WITHOUT_ORG.includes(dirName)
+                ? dirName
+                : `@storybook/${dirName}`;
+
+              return [
+                safeMetafileArg(path),
+                subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName,
+              ];
+            })
+            .concat([['core - core', '@storybook/core - core - TOO BIG PLEASE UPLOAD MANUALLY']])
+        ),
+      },
+    },
+  },
+  loaders: [
+    async ({ args }) => {
+      if (!args.metafile) {
+        return;
+      }
+      let metafile;
+      try {
+        metafile = await allMetafiles[args.metafile]();
+      } catch (e) {
+        return;
+      }
+      const encodedMetafile = btoa(JSON.stringify(metafile));
+      return { encodedMetafile };
+    },
+  ],
+  render: (args, { loaded }) => {
+    const { encodedMetafile = '' } = loaded ?? {};
+
+    return (
+      <iframe
+        // esbuild analyzer has a hidden feature to load a base64-encoded metafile from the the URL hash
+        // see https://github.com/esbuild/esbuild.github.io/blob/ccf70086543a034495834b4135e15e91a3ffceb8/src/analyze/index.ts#L113-L116
+        src={`https://esbuild.github.io/analyze/#${encodedMetafile}`}
+        style={{ border: 'none', width: '100%', height: '100vh' }}
+        key={args.metafile} // force re-render on args change
+      />
+    );
+  },
+} satisfies Meta;
+
+export const ESBuildAnalyzer = {
+  name: 'ESBuild Metafiles',
+};
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
@@ -7,6 +7,7 @@ const managerApiPath = join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [
+    './*.stories.@(js|jsx|ts|tsx)',
     {
       directory: '../core/template/stories',
       titlePrefix: 'core',

diff --git a/code/.storybook/manager.tsx b/code/.storybook/manager.tsx
@@ -1,6 +1,6 @@
 import { addons } from 'storybook/internal/manager-api';
 
-import startCase from 'lodash/startCase.js';
+import { startCase } from 'es-toolkit/compat';
 
 addons.setConfig({
   sidebar: {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -62,7 +62,6 @@
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.10",
     "@testing-library/react": "^14.0.0",
-    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

diff --git a/code/addons/a11y/project.json b/code/addons/a11y/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "a11y",
+  "name": "addon-a11y",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/actions/project.json b/code/addons/actions/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "actions",
+  "name": "addon-actions",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/backgrounds/project.json b/code/addons/backgrounds/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "backgrounds",
+  "name": "addon-backgrounds",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -52,7 +52,6 @@
   "dependencies": {
     "@storybook/global": "^5.0.0",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

diff --git a/code/addons/controls/project.json b/code/addons/controls/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "controls",
+  "name": "addon-controls",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/project.json b/code/addons/docs/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "docs",
+  "name": "addon-docs",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/project.json b/code/addons/essentials/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "essentials",
+  "name": "addon-essentials",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/project.json b/code/addons/gfm/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "gfm",
+  "name": "addon-gfm",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/highlight/project.json b/code/addons/highlight/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "highlight",
+  "name": "addon-highlight",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/project.json b/code/addons/interactions/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "interactions",
+  "name": "addon-interactions",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/jest/project.json b/code/addons/jest/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "jest",
+  "name": "addon-jest",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

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.1",
+  "version": "8.4.0-alpha.2",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",