@storybook/react 7.0.20 → 7.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -52,13 +52,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/react-dom-shim": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/react-dom-shim": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^16.0.0",
@@ -106,4 +106,4 @@
     "platform": "browser"
   },
   "gitHead": "9fb2573aa274f3f69d3358050e8df9c903e8245f"
-}
+}

package/src/__test__/README.md

@@ -0,0 +1,3 @@
+## Integration tests for @storybook/react.
+
+As these tests are implemented as stories, we may consider moving them inside the `template/stories` folder.

package/src/typings.d.ts

@@ -0,0 +1,48 @@
+// TODO: Replace, as soon as @types/react-dom 17.0.14 is used
+// Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts
+declare module 'react-dom/client' {
+  import React = require('react');
+
+  export interface HydrationOptions {
+    onHydrated?(suspenseInstance: Comment): void;
+    onDeleted?(suspenseInstance: Comment): void;
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+  }
+
+  export interface RootOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+  }
+
+  export interface Root {
+    render(children: React.ReactChild | Iterable<React.ReactNode>): void;
+    unmount(): void;
+  }
+
+  /**
+   * Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode.
+   *
+   * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot
+   */
+  export function createRoot(
+    container: Element | Document | DocumentFragment | Comment,
+    options?: RootOptions
+  ): Root;
+
+  export function hydrateRoot(
+    container: Element | Document | DocumentFragment | Comment,
+    initialChildren: React.ReactChild | Iterable<React.ReactNode>,
+    options?: HydrationOptions
+  ): Root;
+}
+
+declare var STORYBOOK_ENV: 'react';
+declare var FRAMEWORK_OPTIONS: any;
+declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

package/template/stories/ts-argtypes.stories.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues.js';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
+import type { StoryObj } from '@storybook/react';
 import type { Args, Parameters, StoryContext } from '@storybook/types';
 import { inferControls } from '@storybook/preview-api';
 import { ThemeProvider, themes, convert } from '@storybook/theming';
 
+import { within } from '@storybook/testing-library';
 import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input';
 import { component as TsFunctionComponentInlineDefaultsComponent } from './docgen-components/ts-function-component-inline-defaults/input';
 import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input';
@@ -76,6 +78,27 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo
 
 export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
 
-export const TsTypes = { parameters: { component: TsTypesComponent } };
+const addChromaticIgnore = async (element: HTMLElement) => {
+  const row = element.parentElement?.parentElement;
+  if (row?.nodeName === 'TR') {
+    row.setAttribute('data-chromatic', 'ignore');
+  } else {
+    throw new Error('the DOM structure changed, please update this test');
+  }
+};
+
+export const TsTypes: StoryObj = {
+  parameters: { component: TsTypesComponent },
+  play: async ({ canvasElement }) => {
+    // This play function's sole purpose is to add a "chromatic ignore" region to flaky rows.
+    const canvas = within(canvasElement);
+    const funcCell = await canvas.findByText('funcWithArgsAndReturns');
+    addChromaticIgnore(funcCell);
+    const namedNumericCell = await canvas.findByText('namedNumericLiteralUnion');
+    addChromaticIgnore(namedNumericCell);
+    const inlinedNumericCell = await canvas.findByText('inlinedNumericLiteralUnion');
+    addChromaticIgnore(inlinedNumericCell);
+  },
+};
 
 export const TsHtml = { parameters: { component: TsHtmlComponent } };