Merge branch 'next' into shilman/package-structure-changes

.circleci/config.yml

@@ -601,6 +601,8 @@ jobs:
           name: Install dependencies
           command: yarn install --no-immutable
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
+          environment:
+            YARN_ENABLE_IMMUTABLE_INSTALLS: false
       - run:
           name: Run Jest tests
           command: yarn jest

.github/workflows/canary-release-pr.yml

@@ -59,6 +59,11 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
+
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.1.1
+
       - name: Cache dependencies
         uses: actions/cache@v4
         with:

.github/workflows/trigger-circle-ci-workflow.yml

@@ -4,7 +4,7 @@ on:
   # Use pull_request_target, as we don't need to check out the actual code of the fork in this script.
   # And this is the only way to trigger the Circle CI API on forks as well.
   pull_request_target:
-    types: [opened, synchronize, labeled, unlabeled, reopened, converted_to_draft, ready_for_review]
+    types: [opened, synchronize, labeled, reopened]
   push:
     branches:
       - next
@@ -39,7 +39,7 @@ jobs:
   trigger-normal-tests:
     runs-on: ubuntu-latest
     needs: get-branch
-    if: github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'ci:normal')
+    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal')))
     steps:
       - name: Trigger Normal tests
         run: >
@@ -58,7 +58,7 @@ jobs:
   trigger-docs-tests:
     runs-on: ubuntu-latest
     needs: get-branch
-    if: github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'ci:docs')
+    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs')))
     steps:
       - name: Trigger docs tests
         run: >
@@ -77,7 +77,7 @@ jobs:
   trigger-merged-tests:
     runs-on: ubuntu-latest
     needs: get-branch
-    if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:merged')
+    if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged'))
     steps:
       - name: Trigger merged tests
         run: >
@@ -96,7 +96,7 @@ jobs:
   trigger-daily-tests:
     runs-on: ubuntu-latest
     needs: get-branch
-    if: github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'ci:daily')
+    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily')))
     steps:
       - name: Trigger the daily tests
         run: >

CHANGELOG.prerelease.md

@@ -1,3 +1,23 @@
+## 8.2.0-alpha.7
+
+- Angular: Allow outputPath object syntax - [#28144](https://github.com/storybookjs/storybook/pull/28144), thanks @valentinpalkovic!
+- Angular: Introduce preserveSymlink builder option - [#28145](https://github.com/storybookjs/storybook/pull/28145), thanks @valentinpalkovic!
+- CLI: Fix typo in React Docgen migration - [#27536](https://github.com/storybookjs/storybook/pull/27536), thanks @jonniebigodes!
+- CSF: Automatically extract componentPath - [#24396](https://github.com/storybookjs/storybook/pull/24396), thanks @shilman!
+- Core: Remove more `.stories.mdx` handling - [#25973](https://github.com/storybookjs/storybook/pull/25973), thanks @JReinhold!
+- Docs-tools: Replace `doctrine` with `jsdoc-type-pratt-parser` - [#26305](https://github.com/storybookjs/storybook/pull/26305), thanks @43081j!
+- Test: Display toHaveBeenCalledWith expected / received values on failure - [#28088](https://github.com/storybookjs/storybook/pull/28088), thanks @kasperpeulen!
+
+## 8.2.0-alpha.6
+
+- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!
+- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!
+- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!
+- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!
+- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!
+- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!
+- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!
+
 ## 8.2.0-alpha.5
 
 - Angular: Fix wrong detection of standalone components - [#27353](https://github.com/storybookjs/storybook/pull/27353), thanks @dario-baumberger!

CONTRIBUTING.md

@@ -61,6 +61,19 @@ yarn build --watch react core-server api addon-docs
 yarn task --task dev --template <your template> --start-from=publish
 ```
 
+### Making code changes when working on Angular-specific code
+
+If you are working on Angular-specific code, you will need to append `--prod` to the above mentioned commands to ensure that the Angular compiler is able to pick up the changes appropriately and doesn't fail. This will build all the packages in production mode.
+
+```sh
+yarn task --prod
+```
+
+```bash
+cd code
+yarn build --prod --watch angular core-server api addon-docs
+```
+
 ## Contributing to Storybook
 
 For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute).

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/docs/recipes.md

@@ -269,8 +269,8 @@ export const parameters = {
       transform: (src, storyContext) => {
         const match = SOURCE_REGEX.exec(src);
         return match ? match[1] : src;
-      }
-    }
+      },
+    },
   },
 };
 ```

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "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.2.0-alpha.5",
+  "version": "8.2.0-alpha.7",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/interactions/src/components/Interaction.tsx

@@ -5,12 +5,12 @@ import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
 import { ListUnorderedIcon } from '@storybook/icons';
-import { Expected, MatcherResult, Received } from './MatcherResult';
+import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
 import type { Controls } from './InteractionsPanel';
-import { isJestError } from '../utils';
+import { isChaiError, isJestError } from '../utils';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,
@@ -117,33 +117,23 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
   if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
+  if (isChaiError(exception)) {
+    return (
+      <RowMessage>
+        <MatcherResult
+          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
+          style={{ padding: 0 }}
+        />
+        <p>See the full stack trace in the browser console.</p>
+      </RowMessage>
+    );
+  }
+
   const paragraphs = exception.message.split('\n\n');
   const more = paragraphs.length > 1;
   return (
     <RowMessage>
       <pre>{paragraphs[0]}</pre>
-      {exception.showDiff && exception.diff ? (
-        <>
-          <br />
-          <MatcherResult message={exception.diff} style={{ padding: 0 }} />
-        </>
-      ) : (
-        <pre>
-          <br />
-          {exception.expected && (
-            <>
-              Expected: <Expected value={exception.expected} />
-              <br />
-            </>
-          )}
-          {exception.actual && (
-            <>
-              Received: <Received value={exception.actual} />
-              <br />
-            </>
-          )}
-        </pre>
-      )}
       {more && <p>See the full stack trace in the browser console.</p>}
     </RowMessage>
   );

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -120,11 +120,11 @@ export const Failed: Story = {
   },
 };
 
-export const NoInteractions: Story = {
-  args: {
-    interactions: [],
-  },
-};
+// export const NoInteractions: Story = {
+//   args: {
+//     interactions: [],
+//   },
+// };
 
 export const CaughtException: Story = {
   args: {

code/addons/interactions/src/components/MatcherResult.stories.tsx

@@ -29,53 +29,81 @@ export default {
 export const Expected = {
   args: {
     message: dedent`
-      expect(jest.fn()).lastCalledWith(...expected)
-
-      Expected: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 0
+      expected last "spy" call to have been called with [ { …(2) } ]
+      
+      - Expected: 
+      Array [
+        Object {
+          "email": "[email protected]",
+          "password": "testpasswordthatwontfail",
+        },
+      ]
+      
+      + Received: 
+      undefined
     `,
   },
 };
 
 export const ExpectedReceived = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      Expected: called with 0 arguments
-      Received: {"email": "[email protected]", "password": "testpasswordthatwontfail"}
-
-      Number of calls: 1
+      expected last "spy" call to have been called with []
+      
+      - Expected
+      + Received
+      
+      - Array []
+      + Array [
+      +   Object {
+      +     "email": "[email protected]",
+      +     "password": "testpasswordthatwontfail",
+      +   },
+      + ]
     `,
   },
 };
 
 export const ExpectedNumberOfCalls = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledTimes(expected)
-
-      Expected number of calls: 1
-      Received number of calls: 0
+      expected "spy" to not be called at all, but actually been called 1 times
+      
+      Received: 
+      
+        1st spy call:
+      
+          Array [
+            Object {
+              "email": "[email protected]",
+              "password": "testpasswordthatwontfail",
+            },
+          ]
+      
+      
+      Number of calls: 1
     `,
   },
 };
 
 export const Diff = {
   args: {
     message: dedent`
-      expect(jest.fn()).toHaveBeenCalledWith(...expected)
-
-      - Expected
-      + Received
-
-        Object {
-      -   "email": "[email protected]",
-      +   "email": "[email protected]",
-          "password": "testpasswordthatwontfail",
-        },
-
+      expected "spy" to be called with arguments: [ { …(2) } ]
+      
+      Received: 
+      
+        1st spy call:
+      
+        Array [
+          Object {
+      -     "email": "[email protected]",
+      +     "email": "[email protected]",
+            "password": "testpasswordthatwontfail",
+          },
+        ]
+      
+      
       Number of calls: 1
     `,
   },

code/addons/interactions/src/components/MatcherResult.tsx

@@ -85,7 +85,7 @@ export const MatcherResult = ({
         if (line.match(/^\s*- /)) {
           return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
         }
-        if (line.match(/^\s*\+ /)) {
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
           return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
         }
 

code/addons/jest/package.json

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