Release: Prerelease 8.2.0-alpha.7

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

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/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/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/frameworks/angular/src/builders/build-storybook/index.ts

@@ -40,6 +40,7 @@ export type StorybookBuilderOptions = JsonObject & {
   enableProdMode?: boolean;
   styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
+  preserveSymlinks?: boolean;
   assets?: AssetPattern[];
   sourceMap?: SourceMapUnion;
 } & Pick<
@@ -102,6 +103,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         assets,
         previewUrl,
         sourceMap = false,
+        preserveSymlinks = false,
       } = options;
 
       const standaloneOptions: StandaloneBuildOptions = {
@@ -121,6 +123,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
           ...(styles ? { styles } : {}),
           ...(assets ? { assets } : {}),
           sourceMap,
+          preserveSymlinks,
         },
         tsConfig,
         webpackStatsJson,

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -19,6 +19,11 @@
       "description": "Directory where to store built files.",
       "default": "storybook-static"
     },
+    "preserveSymlinks": {
+      "type": "boolean",
+      "description": "Do not use the real path when resolving modules. If true, symlinks are resolved to their real path, if false, symlinks are resolved to their symlinked path.",
+      "default": false
+    },
     "configDir": {
       "type": "string",
       "description": "Directory where to load Storybook configurations from.",

code/frameworks/angular/src/builders/start-storybook/index.ts

@@ -37,6 +37,7 @@ export type StorybookBuilderOptions = JsonObject & {
   styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
   assets?: AssetPattern[];
+  preserveSymlinks?: boolean;
   sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
@@ -118,6 +119,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         statsJson,
         previewUrl,
         sourceMap = false,
+        preserveSymlinks = false,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -141,6 +143,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
           ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
           ...(styles ? { styles } : {}),
           ...(assets ? { assets } : {}),
+          preserveSymlinks,
           sourceMap,
         },
         tsConfig,

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -19,6 +19,11 @@
       "type": "string",
       "description": "The full path for the TypeScript configuration file, relative to the current workspace."
     },
+    "preserveSymlinks": {
+      "type": "boolean",
+      "description": "Do not use the real path when resolving modules. If true, symlinks are resolved to their real path, if false, symlinks are resolved to their symlinked path.",
+      "default": false
+    },
     "port": {
       "type": "number",
       "description": "Port to listen on.",

code/frameworks/angular/src/builders/utils/standalone-options.ts

@@ -18,6 +18,7 @@ export type StandaloneOptions = CLIOptions &
       stylePreprocessorOptions?: StylePreprocessorOptions;
       assets?: AssetPattern[];
       sourceMap?: SourceMapUnion;
+      preserveSymlinks?: boolean;
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;

code/frameworks/angular/src/server/angular-cli-webpack.js

@@ -68,6 +68,10 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
       styles: builderOptions.styles
         ?.map((style) => (typeof style === 'string' ? style : style.input))
         .filter((style) => typeof style === 'string' || style.inject !== false),
+      outputPath:
+        typeof builderOptions.outputPath === 'string'
+          ? builderOptions.outputPath
+          : builderOptions.outputPath?.base,
 
       // Fixed options
       optimization: false,