Merge branch 'next' into make-font-failed-to-load-error-message-useful

.circleci/config.yml

@@ -262,48 +262,6 @@ jobs:
       - report-workflow-on-failure
       - store_test_results:
           path: test-results
-  angular-prerelease-sandbox:
-    executor:
-      class: large
-      name: sb_playwright
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Create Sandbox
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task sandbox
-      - run:
-          name: Build Sandbox
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task build
-      - run:
-          name: Chromatic
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task chromatic
-      - run:
-          name: E2E Tests Production
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task e2e-tests
-      - run:
-          name: E2E Tests Development
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task e2e-tests-dev
-      - run:
-          name: Test Runner
-          command: |
-            yarn task --template angular-cli/prerelease --no-link --start-from=never --junit --task test-runner
-      - report-workflow-on-failure:
-          template: angular-cli/prerelease
-      - persist_to_workspace:
-          root: .
-          paths:
-            - sandbox
-      - store_test_results:
-          path: test-results
-
   ## new workflow
   create-sandboxes:
     parameters:
@@ -650,9 +608,6 @@ workflows:
       - chromatic-internal-storybooks:
           requires:
             - build
-      - angular-prerelease-sandbox:
-          requires:
-            - build
       - create-sandboxes:
           parallelism: 34
           requires:

.github/workflows/generate-sandboxes.yml → .github/workflows/generate-sandboxes-main.yml

@@ -1,4 +1,4 @@
-name: Generate and push sandboxes
+name: Generate and push sandboxes (main)
 
 on:
   schedule:
@@ -10,74 +10,48 @@ on:
   #   branches:
   #     - <your-branch-name>
   # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
-  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK BEFORE YOU MERGE YOUR CHANGES!
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
-    strategy:
-      fail-fast: false
-      matrix:
-        node_version:
-          - 16
-          - 18
-        branch:
-          - main
-          - next
-        include:
-          - node_version: 16
-            # space-delimited list of templates
-            exclude: 'angular-cli/prerelease'
-          - node_version: 18
-            # space-delimited list of templates
-            templates: 'angular-cli/prerelease'
     steps:
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node_version }}
-
+          node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: ${{ matrix.branch }}
-
+          ref: main
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
           git config --global user.email "[email protected]"
-
       - name: Install dependencies
         run: node ./scripts/check-dependencies.js
-
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link
-
       - name: Publishing to local registry
         run: yarn local-registry --publish
         working-directory: ./code
-
       - name: Running local registry
         run: yarn local-registry --open &
         working-directory: ./code
-
       - name: Wait for registry
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
-
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --templates ${{matrix.templates}} --exclude ${{matrix.exclude}}
+        run: yarn generate-sandboxes --local-registry
         working-directory: ./code
-
       - name: Publish
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=${{ matrix.branch }}
+        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
         working-directory: ./code
-
       - name: The job has failed
         if: ${{ failure() || cancelled() }}
         env:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
         uses: Ilshidur/action-discord@master
         with:
-          args: 'The generation of sandboxes with Node version **${{ matrix.node_version }}** in the **${{ matrix.branch }}** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'
+          args: 'The generation of sandboxes in the **main** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'

.github/workflows/generate-sandboxes-next.yml

@@ -0,0 +1,57 @@
+name: Generate and push sandboxes (next)
+
+on:
+  schedule:
+    - cron: '2 2 */1 * *'
+  workflow_dispatch:
+  # To test fixes on push rather than wait for the scheduling, do the following:
+  # 1. Uncomment the lines below and add your branch.
+  # push:
+  #   branches:
+  #     - <your-branch-name>
+  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `next` BEFORE YOU MERGE YOUR CHANGES!
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      CLEANUP_SANDBOX_NODE_MODULES: true
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - uses: actions/checkout@v3
+        with:
+          ref: next
+      - name: Setup git user
+        run: |
+          git config --global user.name "Storybook Bot"
+          git config --global user.email "[email protected]"
+      - name: Install dependencies
+        run: node ./scripts/check-dependencies.js
+      - name: Compile Storybook libraries
+        run: yarn task --task compile --start-from=auto --no-link
+      - name: Publishing to local registry
+        run: yarn local-registry --publish
+        working-directory: ./code
+      - name: Running local registry
+        run: yarn local-registry --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
+      - name: Generate
+        run: yarn generate-sandboxes --local-registry
+        working-directory: ./code
+      - name: Publish
+        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
+        working-directory: ./code
+      - name: The job has failed
+        if: ${{ failure() || cancelled() }}
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The generation of sandboxes in the **next** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'

code/frameworks/svelte-vite/src/utils.ts

@@ -23,7 +23,7 @@ export async function handleSvelteKit(plugins: PluginOption[], options: Options)
     'vite-plugin-sveltekit-compile',
   ]);
 
-  if (hasSvelteKitPlugins && framework !== '@storybook/sveltekit') {
+  if (hasSvelteKitPlugins && !framework.includes('@storybook/sveltekit')) {
     throw new Error(dedent`
       We've detected a SvelteKit project using the @storybook/svelte-vite framework, which is not supported in Storybook 7.0
       Please use the @storybook/sveltekit framework instead.

code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts

@@ -32,6 +32,7 @@ describe('getMigrationSummary', () => {
     },
     dependencies: {},
     infoCommand: 'yarn why',
+    dedupeCommand: 'yarn dedupe',
   };
 
   const logFile = '/path/to/log/file';
@@ -146,7 +147,9 @@ describe('getMigrationSummary', () => {
       @storybook/addon-essentials:
       7.0.0, 7.1.0
 
-      You can find more information for a given dependency by running yarn why <package-name>"
+      You can find more information for a given dependency by running yarn why <package-name>
+
+      Please try de-duplicating these dependencies by running yarn dedupe"
     `);
   });
 

code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts

@@ -184,6 +184,11 @@ function getWarnings(installationMetadata: InstallationMetadata) {
       `${installationMetadata.infoCommand} <package-name>`
     )}`
   );
+  messages.push(
+    `Please try de-duplicating these dependencies by running ${chalk.cyan(
+      `${installationMetadata.dedupeCommand}`
+    )}`
+  );
 
   return messages;
 }

code/lib/cli/src/js-package-manager/NPMProxy.test.ts

@@ -379,6 +379,7 @@ describe('NPM Proxy', () => {
 
       expect(installations).toMatchInlineSnapshot(`
         Object {
+          "dedupeCommand": "npm dedupe",
           "dependencies": Object {
             "@storybook/addon-interactions": Array [
               Object {

code/lib/cli/src/js-package-manager/NPMProxy.ts

@@ -142,6 +142,9 @@ export class NPMProxy extends JsPackageManager {
       args: ['ls', '--json', '--depth=99', pipeToNull],
       // ignore errors, because npm ls will exit with code 1 if there are e.g. unmet peer dependencies
       ignoreError: true,
+      env: {
+        FORCE_COLOR: 'false',
+      },
     });
 
     try {
@@ -272,6 +275,7 @@ export class NPMProxy extends JsPackageManager {
       dependencies: acc,
       duplicatedDependencies,
       infoCommand: 'npm ls --depth=1',
+      dedupeCommand: 'npm dedupe',
     };
   }
 

code/lib/cli/src/js-package-manager/PNPMProxy.test.ts

@@ -316,6 +316,7 @@ describe('PNPM Proxy', () => {
 
       expect(installations).toMatchInlineSnapshot(`
         Object {
+          "dedupeCommand": "pnpm dedupe",
           "dependencies": Object {
             "@storybook/addon-interactions": Array [
               Object {

code/lib/cli/src/js-package-manager/PNPMProxy.ts

@@ -101,6 +101,9 @@ export class PNPMProxy extends JsPackageManager {
     const commandResult = await this.executeCommand({
       command: 'pnpm',
       args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', '--depth=99'],
+      env: {
+        FORCE_COLOR: 'false',
+      },
     });
 
     try {
@@ -287,6 +290,7 @@ export class PNPMProxy extends JsPackageManager {
       dependencies: acc,
       duplicatedDependencies,
       infoCommand: 'pnpm list --depth=1',
+      dedupeCommand: 'pnpm dedupe',
     };
   }
 

code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts

@@ -241,6 +241,7 @@ describe('Yarn 1 Proxy', () => {
 
       expect(installations).toMatchInlineSnapshot(`
         Object {
+          "dedupeCommand": "yarn dedupe",
           "dependencies": Object {
             "@storybook/addon-interactions": Array [
               Object {

code/lib/cli/src/js-package-manager/Yarn1Proxy.ts

@@ -91,6 +91,9 @@ export class Yarn1Proxy extends JsPackageManager {
     const commandResult = await this.executeCommand({
       command: 'yarn',
       args: ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--recursive', '--json'],
+      env: {
+        FORCE_COLOR: 'false',
+      },
     });
 
     try {
@@ -215,6 +218,7 @@ export class Yarn1Proxy extends JsPackageManager {
         dependencies: acc,
         duplicatedDependencies,
         infoCommand: 'yarn why',
+        dedupeCommand: 'yarn dedupe',
       };
     }
 

code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts

@@ -219,6 +219,7 @@ describe('Yarn 2 Proxy', () => {
 
       expect(installations).toMatchInlineSnapshot(`
         Object {
+          "dedupeCommand": "yarn dedupe",
           "dependencies": Object {
             "@storybook/global": Array [
               Object {

code/lib/cli/src/js-package-manager/Yarn2Proxy.ts

@@ -114,6 +114,9 @@ export class Yarn2Proxy extends JsPackageManager {
         pattern.map((p) => `"${p}"`).join(' '),
         `"${pattern}"`,
       ],
+      env: {
+        FORCE_COLOR: 'false',
+      },
     });
 
     try {
@@ -286,6 +289,7 @@ export class Yarn2Proxy extends JsPackageManager {
       dependencies: acc,
       duplicatedDependencies,
       infoCommand: 'yarn why',
+      dedupeCommand: 'yarn dedupe',
     };
   }
 

code/lib/cli/src/js-package-manager/types.ts

@@ -3,4 +3,5 @@ export type InstallationMetadata = {
   dependencies: Record<string, PackageMetadata[]>;
   duplicatedDependencies: Record<string, string[]>;
   infoCommand: string;
+  dedupeCommand: string;
 };

code/lib/cli/src/sandbox-templates.ts

@@ -296,6 +296,8 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
+    // TODO: Can be enabled once we re-revert this PR: https://github.com/storybookjs/storybook/pull/24033
+    inDevelopment: true,
   },
   'angular-cli/default-ts': {
     name: 'Angular CLI Latest (Webpack | TypeScript)',
@@ -584,6 +586,7 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
+  'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',

code/lib/core-events/src/errors/manager-errors.ts

@@ -35,9 +35,13 @@ export class UncaughtManagerError extends StorybookError {
 
   readonly code = 1;
 
-  constructor(public error: Error) {
-    super(error.message);
-    this.stack = error.stack;
+  constructor(
+    public data: {
+      error: Error;
+    }
+  ) {
+    super(data.error.message);
+    this.stack = data.error.stack;
   }
 
   template() {