Merge branch 'next' into halitiince/docs_update_new_react_ts_snippet

.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
+

.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.prerelease.md

@@ -1,3 +1,10 @@
+## 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)!

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
 

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.2",
   "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.2",
   "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];

code/addons/backgrounds/package.json

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

code/addons/docs/README.md

@@ -146,7 +146,6 @@ export default {
         jsxOptions: {},
         csfPluginOptions: null,
         mdxPluginOptions: {},
-        transcludeMarkdown: true,
       },
     },
   ],
@@ -157,16 +156,9 @@ export default {
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 
-The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
 
-```mdx
-import { Meta } from '@storybook/addon-docs';
-import Changelog from '../CHANGELOG.md';
+> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
 
-<Meta title="Changelog" />
-
-<Changelog />
-```
 
 ## TypeScript configuration
 

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.6.0-alpha.1",
+  "version": "7.6.0-alpha.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

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