Merge pull request #24537 from storybookjs/version-non-patch-from-7.6…

….0-alpha.1

Release: Prerelease 7.6.0-alpha.2

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)!

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

@@ -39,6 +39,14 @@ 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,
@@ -47,7 +55,8 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
 
   const handler = function actionHandler(...args: any[]) {
     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/builders/builder-manager/src/index.ts

@@ -45,7 +45,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
   return {
     entryPoints: realEntryPoints,
     outdir: join(options.outputDir || './', 'sb-addons'),
-    format: 'esm',
+    format: 'iife',
     write: false,
     ignoreAnnotations: true,
     resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],

code/frameworks/react-vite/package.json

@@ -53,7 +53,7 @@
     "@storybook/react": "workspace:*",
     "@vitejs/plugin-react": "^3.0.1",
     "magic-string": "^0.30.0",
-    "react-docgen": "^6.0.2"
+    "react-docgen": "^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",

code/lib/channels/src/postmessage/index.ts

@@ -103,7 +103,7 @@ export class PostMessageTransport implements ChannelTransport {
 
     const frames = this.getFrames(target);
 
-    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+    const query = qs.parse(location?.search || '', { ignoreQueryPrefix: true });
 
     const data = stringify(
       {

code/package.json

@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.0-alpha.2"
 }

code/renderers/react/template/stories/docgen-components/ts-react-fc/argTypes.snapshot

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-react-fc 1`] = `Object {}`;

code/renderers/react/template/stories/docgen-components/ts-react-fc/docgen.snapshot

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-react-fc 1`] = `
+"import React from 'react';
+var DefaultEnum = /*#__PURE__*/function (DefaultEnum) {
+  DefaultEnum[DefaultEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  DefaultEnum[DefaultEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  DefaultEnum[DefaultEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+  return DefaultEnum;
+}(DefaultEnum || {});
+var NumericEnum = /*#__PURE__*/function (NumericEnum) {
+  NumericEnum[NumericEnum[\\"TopLeft\\"] = 0] = \\"TopLeft\\";
+  NumericEnum[NumericEnum[\\"TopRight\\"] = 1] = \\"TopRight\\";
+  NumericEnum[NumericEnum[\\"TopCenter\\"] = 2] = \\"TopCenter\\";
+  return NumericEnum;
+}(NumericEnum || {});
+var StringEnum = /*#__PURE__*/function (StringEnum) {
+  StringEnum[\\"TopLeft\\"] = \\"top-left\\";
+  StringEnum[\\"TopRight\\"] = \\"top-right\\";
+  StringEnum[\\"TopCenter\\"] = \\"top-center\\";
+  return StringEnum;
+}(StringEnum || {});
+export const TypeScriptProps = props => /*#__PURE__*/React.createElement(\\"div\\", null, \\"TypeScript!\\");
+export const component = TypeScriptProps;
+TypeScriptProps.__docgenInfo = {
+  \\"description\\": \\"\\",
+  \\"methods\\": [],
+  \\"displayName\\": \\"TypeScriptProps\\"
+};"
+`;

code/renderers/react/template/stories/docgen-components/ts-react-fc/input.tsx

@@ -0,0 +1,93 @@
+import type { FC } from 'react';
+import React from 'react';
+
+interface ItemInterface {
+  text: string;
+  value: string;
+}
+
+interface PersonInterface {
+  name: string;
+}
+
+type InterfaceIntersection = ItemInterface & PersonInterface;
+
+interface GenericInterface<T> {
+  value: T;
+}
+
+enum DefaultEnum {
+  TopLeft,
+  TopRight,
+  TopCenter,
+}
+
+enum NumericEnum {
+  TopLeft = 0,
+  TopRight,
+  TopCenter,
+}
+
+enum StringEnum {
+  TopLeft = 'top-left',
+  TopRight = 'top-right',
+  TopCenter = 'top-center',
+}
+
+type EnumUnion = DefaultEnum | NumericEnum;
+
+type StringLiteralUnion = 'top-left' | 'top-right' | 'top-center';
+type NumericLiteralUnion = 0 | 1 | 2;
+
+type StringAlias = string;
+type NumberAlias = number;
+type AliasesIntersection = StringAlias & NumberAlias;
+type AliasesUnion = StringAlias | NumberAlias;
+interface GenericAlias<T> {
+  value: T;
+}
+
+interface TypeScriptPropsProps {
+  any: any;
+  string: string;
+  bool: boolean;
+  number: number;
+  voidFunc: () => void;
+  funcWithArgsAndReturns: (a: string, b: string) => string;
+  funcWithunionArg: (a: string | number) => string;
+  funcWithMultipleUnionReturns: () => string | ItemInterface;
+  funcWithIndexTypes: <T, K extends keyof T>(o: T, propertyNames: K[]) => T[K][];
+  symbol: symbol;
+  interface: ItemInterface;
+  genericInterface: GenericInterface<string>;
+  arrayOfPrimitive: string[];
+  arrayOfComplexObject: ItemInterface[];
+  tupleOfPrimitive: [string, number];
+  tupleWithComplexType: [string, ItemInterface];
+  defaultEnum: DefaultEnum;
+  numericEnum: NumericEnum;
+  stringEnum: StringEnum;
+  enumUnion: EnumUnion;
+  recordOfPrimitive: Record<string, number>;
+  recordOfComplexObject: Record<string, ItemInterface>;
+  intersectionType: InterfaceIntersection;
+  intersectionWithInlineType: ItemInterface & { inlineValue: string };
+  unionOfPrimitive: string | number;
+  unionOfComplexType: ItemInterface | InterfaceIntersection;
+  nullablePrimitive?: string;
+  nullableComplexType?: ItemInterface;
+  nullableComplexTypeUndefinedDefaultValue?: ItemInterface;
+  readonly readonlyPrimitive: string;
+  typeAlias: StringAlias;
+  aliasesIntersection: AliasesIntersection;
+  aliasesUnion: AliasesUnion;
+  genericAlias: GenericAlias<string>;
+  namedStringLiteralUnion: StringLiteralUnion;
+  inlinedStringLiteralUnion: 'bottom-left' | 'bottom-right' | 'bottom-center';
+  namedNumericLiteralUnion: NumericLiteralUnion;
+  inlinedNumericLiteralUnion: 0 | 1 | 2;
+}
+
+export const TypeScriptProps: FC<TypeScriptPropsProps> = (props) => <div>TypeScript!</div>;
+
+export const component = TypeScriptProps;

code/renderers/react/template/stories/docgen-components/ts-react-fc/properties.snapshot

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react component properties ts-react-fc 1`] = `
+Object {
+  "rows": Array [],
+}
+`;

code/renderers/react/template/stories/ts-argtypes.stories.tsx

@@ -25,6 +25,7 @@ import { component as TsComponentPropsComponent } from './docgen-components/9922
 import { component as TsJsdocComponent } from './docgen-components/ts-jsdoc/input';
 import { component as TsTypesComponent } from './docgen-components/ts-types/input';
 import { component as TsHtmlComponent } from './docgen-components/ts-html/input';
+import { component as TsFCComponent } from './docgen-components/ts-react-fc/input';
 
 export default {
   component: {},
@@ -78,6 +79,8 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo
 
 export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
 
+export const TsFC = { parameters: { component: TsFCComponent } };
+
 const addChromaticIgnore = async (element: HTMLElement) => {
   const row = element.parentElement?.parentElement;
   if (row?.nodeName === 'TR') {

code/yarn.lock

@@ -7707,7 +7707,7 @@ __metadata:
     "@types/node": ^18.0.0
     "@vitejs/plugin-react": ^3.0.1
     magic-string: ^0.30.0
-    react-docgen: ^6.0.2
+    react-docgen: ^7.0.0
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
@@ -9062,10 +9062,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/doctrine@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@types/doctrine@npm:0.0.6"
-  checksum: eae59a178be3b7989f3dd269cbe30fee9041a95ccb7ac963bbff3fcc82e7985c5002228afe23b7fad985f3eedf5257d36c7011bd8caafb087fcdcc6df1e52cb3
+"@types/doctrine@npm:^0.0.8":
+  version: 0.0.8
+  resolution: "@types/doctrine@npm:0.0.8"
+  checksum: ca4cab4a94526ec3579c3f10a027298028d34b4c092e4b6791afb37a5f6899208ee1e91bc9542541f31d6d3ba3d1a70408deaa1f105c22c86d23e3a87c59a43c
   languageName: node
   linkType: hard
 
@@ -26939,21 +26939,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen@npm:^6.0.2":
-  version: 6.0.4
-  resolution: "react-docgen@npm:6.0.4"
+"react-docgen@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "react-docgen@npm:7.0.0"
   dependencies:
     "@babel/core": ^7.18.9
     "@babel/traverse": ^7.18.9
     "@babel/types": ^7.18.9
     "@types/babel__core": ^7.18.0
     "@types/babel__traverse": ^7.18.0
-    "@types/doctrine": ^0.0.6
+    "@types/doctrine": ^0.0.8
     "@types/resolve": ^1.20.2
     doctrine: ^3.0.0
     resolve: ^1.22.1
     strip-indent: ^4.0.0
-  checksum: 6e372de705b0ce576c8a46c8aedaea3f584441b18d68c02128f14e20657597fe088c80bb67374d5057001f71505924e07d6e366ec8d768e2456d47395bd32066
+  checksum: 79678d01644e6519450f847c77fa554a7a80ae3a5ff81b1482d1458caa064cf3be88597051375ba7a90921980feb8586378e1560146d64c41d0e569465315575
   languageName: node
   linkType: hard
 

docs/versions/next.json

@@ -1 +1 @@
-{"version":"7.6.0-alpha.1","info":{"plain":"- Angular: Add source-map option to builder - [#24466](https://github.com/storybookjs/storybook/pull/24466), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- 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)!\n- CLI: Add @storybook/addon-designs to non-core list - [#24507](https://github.com/storybookjs/storybook/pull/24507), thanks [@yannbf](https://github.com/yannbf)!\n- Doc Blocks: Add support for `of` prop to `Primary` block - [#23849](https://github.com/storybookjs/storybook/pull/23849), thanks [@Wilson2k](https://github.com/Wilson2k)!\n- Doc Blocks: Remove `defaultProps` in `Stories` block - [#24506](https://github.com/storybookjs/storybook/pull/24506), thanks [@WouterK12](https://github.com/WouterK12)!\n- Themes: Run postinstall in shell for windows - [#24389](https://github.com/storybookjs/storybook/pull/24389), thanks [@Integrayshaun](https://github.com/Integrayshaun)!"}}
+{"version":"7.6.0-alpha.2","info":{"plain":"- Actions: Fix missing crypto module crashing React Native - [#24546](https://github.com/storybookjs/storybook/pull/24546), thanks [@dannyhw](https://github.com/dannyhw)!\n- 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)!\n- ManagerBuilder: Fix `\\\"type\\\": \\\"commonjs\\\"` compatibility - [#24534](https://github.com/storybookjs/storybook/pull/24534), thanks [@ndelangen](https://github.com/ndelangen)!\n- React: Upgrade `react-docgen` to v7 - [#24530](https://github.com/storybookjs/storybook/pull/24530), thanks [@shilman](https://github.com/shilman)!"}}

scripts/bench/browse.ts

@@ -1,5 +1,5 @@
 import { chromium } from 'playwright';
-import { now } from './utils';
+import { now, getPreviewPage } from './utils';
 
 interface Result {
   managerHeaderVisible?: number;
@@ -44,7 +44,7 @@ async function benchAutodocs(url: string) {
 
   const tasks = [
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -71,7 +71,7 @@ async function benchMDX(url: string) {
 
   const tasks = [
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
@@ -89,15 +89,15 @@ async function benchMDX(url: string) {
 
 async function benchStory(url: string) {
   const result: Result = {};
-  const browser = await chromium.launch(/* { headless: false } */);
+  // change this to true, to see the browser in action
+  const browser = await chromium.launch({ headless: true });
   await browser.newContext();
   const page = await browser.newPage();
 
   const start = now();
   await page.goto(`${url}?path=/story/example-button--primary`);
 
   const tasks = [
-    //
     async () => {
       await page.waitForSelector('.sidebar-header', { state: 'attached' });
       result.managerHeaderVisible = now() - start;
@@ -107,7 +107,7 @@ async function benchStory(url: string) {
       result.managerIndexVisible = now() - start;
     },
     async () => {
-      const previewPage = await page.frame({ url: /iframe.html/ }).page();
+      const previewPage = await getPreviewPage(page);
       await previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');

scripts/bench/utils.ts

@@ -1,5 +1,6 @@
 import { join } from 'path';
 import { ensureDir, writeJSON, readJSON, readdir } from 'fs-extra';
+import type { Page } from 'playwright-core';
 import type { BenchResults } from './types';
 
 export const now = () => new Date().getTime();
@@ -30,3 +31,11 @@ export const loadBench = async (options: SaveBenchOptions): Promise<Partial<Benc
   }, Promise.resolve({}));
   // return readJSON(join(dirname, `bench.json`));
 };
+
+export async function getPreviewPage(page: Page) {
+  await page.waitForFunction(() => {
+    return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
+  });
+  const previewPage = await page.frame({ url: /iframe.html/ }).page();
+  return previewPage;
+}