Merge branch 'next' into fix(23454)-raw-button-contrast-ratio

.circleci/config.yml

@@ -84,23 +84,23 @@ commands:
 jobs:
   pretty-docs:
     executor:
-      class: small
+      class: medium
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
       - restore_cache:
           name: Restore Yarn cache
           keys:
-            - prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+            - prettydocs-yarn-2-cache-v7--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
       - run:
           name: Install
           command: |
             cd scripts
             yarn install
       - save_cache:
           name: Save Yarn cache
-          key: prettydocs-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+          key: prettydocs-yarn-2-cache-v7--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
           paths:
             - ~/.yarn/berry/cache
       - run:
@@ -499,11 +499,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 12
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 12
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -523,7 +523,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 3
+          parallelism: 5
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -555,11 +555,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 21
+          parallelism: 23
           requires:
             - build
       - build-sandboxes:
-          parallelism: 21
+          parallelism: 23
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -579,7 +579,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 3
+          parallelism: 5
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -609,14 +609,14 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 38
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 38
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -640,3 +640,4 @@ workflows:
       #     parallelism: 4
       #     requires:
       #       - create-sandboxes
+

.github/workflows/publish.yml

@@ -163,7 +163,7 @@ jobs:
           yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}"
 
           git add ..
-          git commit -m "Bump next to be one minor ahead of main [skip ci]"
+          git diff --staged --quiet || git commit -m "Bump next to be one minor ahead of main [skip ci]"
           git push origin next
 
       - name: Sync CHANGELOG.md from `main` to `next`

.gitignore

@@ -21,6 +21,7 @@ test-results
 !/**/.yarn/plugins
 !/**/.yarn/sdks
 !/**/.yarn/versions
+!/**/.yarn/patches
 /**/.pnp.*
 !/node_modules
 

.yarnrc.yml

@@ -1,11 +1,11 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 installStatePath: ./.yarn/root-install-state.gz
 
 nodeLinker: node-modules
 
 npmPublishAccess: public
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.0.cjs

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 7.5.2
+
+- Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Allow Yarn v4 in `link` command - [#24551](https://github.com/storybookjs/storybook/pull/24551), thanks [@yannbf](https://github.com/yannbf)!
+- Next.js: Support v14.0.0 - [#24593](https://github.com/storybookjs/storybook/pull/24593), thanks [@nikospapcom](https://github.com/nikospapcom)!
+
+## 7.5.1
+
+- Angular: update wrong type for webpackStatsJson in start-storybook schema.json - [#24494](https://github.com/storybookjs/storybook/pull/24494), thanks [@LucaVazz](https://github.com/LucaVazz)!
+- Themes: Run postinstall in shell for windows - [#24389](https://github.com/storybookjs/storybook/pull/24389), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+
 ## 7.5.0
 
 Storybook 7.5 enhances your Storybook experience with several key updates:

CHANGELOG.prerelease.md

@@ -1,3 +1,22 @@
+## 7.6.0-alpha.3
+
+- Action: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Addon A11y: Avoid CSP issue - [#24477](https://github.com/storybookjs/storybook/pull/24477), thanks [@Marklb](https://github.com/Marklb)!
+- Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Allow Yarn v4 in `link` command - [#24551](https://github.com/storybookjs/storybook/pull/24551), thanks [@yannbf](https://github.com/yannbf)!
+- Core-Server: Ignore all node_module folders for watchpack - [#24553](https://github.com/storybookjs/storybook/pull/24553), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Core: Fix pnp support when cache dir is outside working dir - [#24572](https://github.com/storybookjs/storybook/pull/24572), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Manager: Update `store.settings.lastTrackedStoryId` - [#24115](https://github.com/storybookjs/storybook/pull/24115), thanks [@rashidshamloo](https://github.com/rashidshamloo)!
+- Next.js: Support v14.0.0 - [#24593](https://github.com/storybookjs/storybook/pull/24593), thanks [@nikospapcom](https://github.com/nikospapcom)!
+- Test: Create @storybook/test package based on vitest - [#24392](https://github.com/storybookjs/storybook/pull/24392), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+
+## 7.6.0-alpha.2
+
+- Actions: Fix missing crypto module crashing React Native - [#24546](https://github.com/storybookjs/storybook/pull/24546), thanks [@dannyhw](https://github.com/dannyhw)!
+- Core: Fix post message channel location.search access for React Native - [#24545](https://github.com/storybookjs/storybook/pull/24545), thanks [@dannyhw](https://github.com/dannyhw)!
+- ManagerBuilder: Fix `"type": "commonjs"` compatibility - [#24534](https://github.com/storybookjs/storybook/pull/24534), thanks [@ndelangen](https://github.com/ndelangen)!
+- React: Upgrade `react-docgen` to v7 - [#24530](https://github.com/storybookjs/storybook/pull/24530), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.6.0-alpha.1
 
 - Angular: Add source-map option to builder - [#24466](https://github.com/storybookjs/storybook/pull/24466), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

CODEOWNERS

@@ -29,6 +29,7 @@
 /code/addons/storyshots-core/      @ndelangen
 /code/addons/storyshots-puppeteer/ @ndelangen
 /code/addons/storysource/          @ndelangen
+/code/addons/themes/               @JReinhold @Integrayshaun
 /code/addons/toolbars/             @ndelangen @JReinhold
 /code/addons/viewport/             @yannbf @ndelangen
 

CONTRIBUTING/RELEASING.md

@@ -476,7 +476,7 @@ No process is defined for this.
 
 ### Merges to `main` without versioning
 
-As described in more details in [the Patch Releases section](#patch-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slighty, to just cherry-picking the patches without bumping the versions.
+As described in more details in [the Patch Releases section](#patch-releases), there are scenarios where you want to patch [unreleasable](#which-changes-are-considered-releasable-and-what-does-it-mean) content back to `main` without bumping versions or publishing a new release. This happens automatically as long as all the unpicked patch pull requests have unreleasable labels. In that case the prepared patch pull request will change form slightly, to just cherry-picking the patches without bumping the versions.
 
 ## FAQ
 

RESOLUTIONS.md

@@ -9,3 +9,7 @@ svelte-check@3.4.6 (bug: 3.5.x): Type issues
 ## code/ui/components/package.json
 
 overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
+
+## code/package.json
+
+@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462

code/.gitignore

@@ -0,0 +1 @@
+.nx/cache

code/.prettierignore

@@ -1 +1,3 @@
 *.mdx
+
+/.nx/cache

code/.yarnrc.yml

@@ -25,5 +25,5 @@ plugins:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-3.5.1.cjs
+yarnPath: ../.yarn/releases/yarn-4.0.0.cjs
 installStatePath: '../.yarn/code-install-state.gz'

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.6.0-alpha.1",
+  "version": "7.6.0-alpha.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/a11y/src/a11yRunner.ts

@@ -45,12 +45,18 @@ const run = async (storyId: string) => {
       }
 
       const result = await axe.run(htmlElement, options);
+
+      // Axe result contains class instances, which telejson deserializes in a
+      // way that violates:
+      //  Content Security Policy directive: "script-src 'self' 'unsafe-inline'".
+      const resultJson = JSON.parse(JSON.stringify(result));
+
       // It's possible that we requested a new run on a different story.
       // Unfortunately, axe doesn't support a cancel method to abort current run.
       // We check if the story we run against is still the current one,
       // if not, trigger a new run using the current story
       if (activeStoryId === storyId) {
-        channel.emit(EVENTS.RESULT, result);
+        channel.emit(EVENTS.RESULT, resultJson);
       } else {
         active = false;
         run(activeStoryId);

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.6.0-alpha.1",
+  "version": "7.6.0-alpha.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/actions/src/addArgs.ts

@@ -1,7 +1,12 @@
 import type { ArgsEnhancer } from '@storybook/types';
-import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
+import {
+  addActionsFromArgTypes,
+  attachActionsToFunctionMocks,
+  inferActionsFromArgTypesRegex,
+} from './addArgsHelpers';
 
 export const argsEnhancers: ArgsEnhancer[] = [
   addActionsFromArgTypes,
   inferActionsFromArgTypesRegex,
+  attachActionsToFunctionMocks,
 ];

code/addons/actions/src/addArgsHelpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle,no-param-reassign */
 import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';
 
@@ -31,7 +32,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) =
 
   return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
     if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(name);
+      acc[name] = action(name, { implicit: true });
     }
     return acc;
   }, {} as Args);
@@ -61,3 +62,33 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
     return acc;
   }, {} as Args);
 };
+
+export const attachActionsToFunctionMocks: ArgsEnhancer<Renderer> = (context) => {
+  const {
+    initialArgs,
+    argTypes,
+    parameters: { actions },
+  } = context;
+  if (actions?.disable || !argTypes) {
+    return {};
+  }
+
+  const argTypesWithAction = Object.entries(initialArgs).filter(
+    ([, value]) =>
+      typeof value === 'function' &&
+      '_isMockFunction' in value &&
+      value._isMockFunction &&
+      !value._actionAttached
+  );
+
+  return argTypesWithAction.reduce((acc, [key, value]) => {
+    const previous = value.getMockImplementation();
+    value.mockImplementation((...args: unknown[]) => {
+      action(key)(...args);
+      return previous?.(...args);
+    });
+    // this enhancer is being called multiple times
+    value._actionAttached = true;
+    return acc;
+  }, {} as Args);
+};

code/addons/actions/src/models/ActionOptions.ts

@@ -4,6 +4,7 @@ interface Options {
   depth: number; // backards compatibility, remove in 7.0
   clearOnStoryChange: boolean;
   limit: number;
+  implicit: boolean;
 }
 
 export type ActionOptions = Partial<Options> & Partial<TelejsonOptions>;

code/addons/actions/src/runtime/action.ts

@@ -39,15 +39,41 @@ const serializeArg = <T>(a: T) => {
   return a;
 };
 
+// TODO react native doesn't have the crypto module, we should figure out a better way to generate these ids.
+const generateId = () => {
+  return typeof crypto === 'object' && typeof crypto.getRandomValues === 'function'
+    ? uuidv4()
+    : // pseudo random id, example response lo1e7zm4832bkr7yfl7
+      Date.now().toString(36) + Math.random().toString(36).substring(2);
+};
+
 export function action(name: string, options: ActionOptions = {}): HandlerFunction {
   const actionOptions = {
     ...config,
     ...options,
   };
 
   const handler = function actionHandler(...args: any[]) {
+    // TODO: Enable once codemods are finished
+    // if (options.implicit) {
+    //   const preview =
+    //     '__STORYBOOK_PREVIEW__' in global
+    //       ? (global.__STORYBOOK_PREVIEW__ as PreviewWeb<Renderer>)
+    //       : undefined;
+    //   if (
+    //     preview?.storyRenders.some(
+    //       (render) => render.phase === 'playing' || render.phase === 'rendering'
+    //     )
+    //   ) {
+    //     console.warn(
+    //       'Can not use implicit actions during rendering or playing of a story.'
+    //     );
+    //   }
+    // }
+
     const channel = addons.getChannel();
-    const id = uuidv4();
+    // this makes sure that in js enviroments like react native you can still get an id
+    const id = generateId();
     const minDepth = 5; // anything less is really just storybook internals
     const serializedArgs = args.map(serializeArg);
     const normalizedArgs = args.length > 1 ? serializedArgs : serializedArgs[0];