@storybook/react 6.5.0-alpha.52 → 6.5.0-alpha.55

package/dist/cjs/client/index.js

@@ -70,6 +70,20 @@ Object.defineProperty(exports, "storiesOf", {
 
 var _preview = require("./preview");
 
+var _testing = require("./testing");
+
+Object.keys(_testing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _testing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _testing[key];
+    }
+  });
+});
+
 var _types = require("./preview/types-6-3");
 
 Object.keys(_types).forEach(function (key) {

package/dist/cjs/client/testing/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.composeStories = composeStories;
+exports.composeStory = composeStory;
+exports.setGlobalConfig = setGlobalConfig;
+exports.setProjectAnnotations = setProjectAnnotations;
+
+var _store = require("@storybook/store");
+
+var _clientLogger = require("@storybook/client-logger");
+
+var _render = require("../preview/render");
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+function setProjectAnnotations(projectAnnotations) {
+  (0, _store.setProjectAnnotations)(projectAnnotations);
+}
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+
+
+function setGlobalConfig(projectAnnotations) {
+  _clientLogger.once.warn("setGlobalConfig is deprecated. Use setProjectAnnotations instead.");
+
+  setProjectAnnotations(projectAnnotations);
+} // This will not be necessary once we have auto preset loading
+
+
+var defaultProjectAnnotations = {
+  render: _render.render
+};
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+
+function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
+  return (0, _store.composeStory)(story, componentAnnotations, projectAnnotations, defaultProjectAnnotations, exportsName);
+}
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+
+
+function composeStories(csfExports, projectAnnotations) {
+  var composedStories = (0, _store.composeStories)(csfExports, projectAnnotations, composeStory);
+  return composedStories;
+}

package/dist/cjs/server/framework-preset-react-docs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.babel = babel;
-exports.config = void 0;
+exports.previewAnnotations = void 0;
 exports.webpackFinal = webpackFinal;
 
 require("core-js/modules/es.promise.js");
@@ -60,9 +60,9 @@ async function webpackFinal(config, options) {
   });
 }
 
-var config = function (entry = [], options) {
+var previewAnnotations = function (entry = [], options) {
   if (!(0, _docsTools.hasDocsOrControls)(options)) return entry;
   return [...entry, (0, _coreCommon.findDistEsm)(__dirname, 'client/docs/config')];
 };
 
-exports.config = config;
+exports.previewAnnotations = previewAnnotations;

package/dist/cjs/server/preset.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.config = exports.addons = void 0;
+exports.previewAnnotations = exports.addons = void 0;
 
 var _coreCommon = require("@storybook/core-common");
 
-var config = function (entries = []) {
+var previewAnnotations = function (entries = []) {
   return [...entries, (0, _coreCommon.findDistEsm)(__dirname, 'client/preview/config')];
 };
 
-exports.config = config;
+exports.previewAnnotations = previewAnnotations;
 var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
 exports.addons = addons;

package/dist/esm/client/index.js

@@ -1,4 +1,5 @@
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, raw, forceReRender } from './preview';
+export * from './testing';
 export * from './preview/types-6-3';
 
 if (module && module.hot && module.hot.decline) {

package/dist/esm/client/testing/index.js

@@ -0,0 +1,96 @@
+import { composeStory as originalComposeStory, composeStories as originalComposeStories, setProjectAnnotations as originalSetProjectAnnotations } from '@storybook/store';
+import { once } from '@storybook/client-logger';
+import { render } from '../preview/render';
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(projectAnnotations) {
+  originalSetProjectAnnotations(projectAnnotations);
+}
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+
+export function setGlobalConfig(projectAnnotations) {
+  once.warn("setGlobalConfig is deprecated. Use setProjectAnnotations instead.");
+  setProjectAnnotations(projectAnnotations);
+} // This will not be necessary once we have auto preset loading
+
+var defaultProjectAnnotations = {
+  render: render
+};
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+
+export function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
+  return originalComposeStory(story, componentAnnotations, projectAnnotations, defaultProjectAnnotations, exportsName);
+}
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+
+export function composeStories(csfExports, projectAnnotations) {
+  var composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+  return composedStories;
+}

package/dist/esm/server/framework-preset-react-docs.js

@@ -43,7 +43,7 @@ export async function webpackFinal(config, options) {
     }))]
   });
 }
-export var config = function (entry = [], options) {
+export var previewAnnotations = function (entry = [], options) {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };

package/dist/esm/server/preset.js

@@ -1,5 +1,5 @@
 import { findDistEsm } from '@storybook/core-common';
-export var config = function (entries = []) {
+export var previewAnnotations = function (entries = []) {
   return [...entries, findDistEsm(__dirname, 'client/preview/config')];
 };
 export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];

package/dist/modern/client/index.js

@@ -1,4 +1,5 @@
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, raw, forceReRender } from './preview';
+export * from './testing';
 export * from './preview/types-6-3';
 
 if (module && module.hot && module.hot.decline) {

package/dist/modern/client/testing/index.js

@@ -0,0 +1,96 @@
+import { composeStory as originalComposeStory, composeStories as originalComposeStories, setProjectAnnotations as originalSetProjectAnnotations } from '@storybook/store';
+import { once } from '@storybook/client-logger';
+import { render } from '../preview/render';
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(projectAnnotations) {
+  originalSetProjectAnnotations(projectAnnotations);
+}
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+
+export function setGlobalConfig(projectAnnotations) {
+  once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
+  setProjectAnnotations(projectAnnotations);
+} // This will not be necessary once we have auto preset loading
+
+const defaultProjectAnnotations = {
+  render
+};
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+
+export function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
+  return originalComposeStory(story, componentAnnotations, projectAnnotations, defaultProjectAnnotations, exportsName);
+}
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+
+export function composeStories(csfExports, projectAnnotations) {
+  const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+  return composedStories;
+}

package/dist/modern/server/framework-preset-react-docs.js

@@ -43,7 +43,7 @@ export async function webpackFinal(config, options) {
     }))]
   });
 }
-export var config = function (entry = [], options) {
+export var previewAnnotations = function (entry = [], options) {
   if (!hasDocsOrControls(options)) return entry;
   return [...entry, findDistEsm(__dirname, 'client/docs/config')];
 };

package/dist/modern/server/preset.js

@@ -1,5 +1,5 @@
 import { findDistEsm } from '@storybook/core-common';
-export var config = function (entries = []) {
+export var previewAnnotations = function (entries = []) {
   return [...entries, findDistEsm(__dirname, 'client/preview/config')];
 };
 export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];

package/dist/ts3.4/client/index.d.ts

@@ -1,3 +1,4 @@
 export { DecoratorFn } from './preview';
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, raw, forceReRender, } from './preview';
+export * from './testing';
 export * from './preview/types-6-3';

package/dist/ts3.4/client/testing/index.d.ts

@@ -0,0 +1,84 @@
+import { CSFExports, ComposedStory, StoriesWithPartialProps } from '@storybook/store';
+import { ProjectAnnotations, Args } from '@storybook/csf';
+import { Meta, ReactFramework } from '../preview/types-6-0';
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+export declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+export declare function composeStory<TArgs = Args>(story: ComposedStory<ReactFramework, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactFramework>, exportsName?: string): {
+    (extraArgs: Partial<TArgs>): import("../preview/types").StoryFnReactReturnType;
+    storyName: string;
+    args: Args;
+    play: import("@storybook/store").ComposedStoryPlayFn;
+    parameters: import("@storybook/store").Parameters;
+};
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+export declare function composeStories<TModule extends CSFExports<ReactFramework>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactFramework>): Pick<StoriesWithPartialProps<ReactFramework, TModule>, Exclude<keyof TModule, "default" | "__esModule" | "__namedExportsOrder">>;

package/dist/ts3.4/server/framework-preset-react-docs.d.ts

@@ -3,4 +3,4 @@ import { TransformOptions } from '@babel/core';
 import { Configuration } from 'webpack';
 export declare function babel(config: TransformOptions, options: Options): Promise<TransformOptions>;
 export declare function webpackFinal(config: Configuration, options: Options): Promise<Configuration>;
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.4/server/preset.d.ts

@@ -1,3 +1,3 @@
 import { StorybookConfig } from '@storybook/core-common';
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
 export declare const addons: StorybookConfig['addons'];

package/dist/ts3.9/client/index.d.ts

@@ -1,3 +1,4 @@
 export type { DecoratorFn } from './preview';
 export { storiesOf, setAddon, addDecorator, addParameters, configure, getStorybook, raw, forceReRender, } from './preview';
+export * from './testing';
 export * from './preview/types-6-3';

package/dist/ts3.9/client/testing/index.d.ts

@@ -0,0 +1,84 @@
+import { CSFExports, ComposedStory, StoriesWithPartialProps } from '@storybook/store';
+import { ProjectAnnotations, Args } from '@storybook/csf';
+import type { Meta, ReactFramework } from '../preview/types-6-0';
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+export declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]): void;
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+export declare function composeStory<TArgs = Args>(story: ComposedStory<ReactFramework, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactFramework>, exportsName?: string): {
+    (extraArgs: Partial<TArgs>): import("../preview/types").StoryFnReactReturnType;
+    storyName: string;
+    args: Args;
+    play: import("@storybook/store").ComposedStoryPlayFn;
+    parameters: import("@storybook/store").Parameters;
+};
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+export declare function composeStories<TModule extends CSFExports<ReactFramework>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactFramework>): Pick<StoriesWithPartialProps<ReactFramework, TModule>, Exclude<keyof TModule, "default" | "__esModule" | "__namedExportsOrder">>;

package/dist/ts3.9/server/framework-preset-react-docs.d.ts

@@ -3,4 +3,4 @@ import type { TransformOptions } from '@babel/core';
 import type { Configuration } from 'webpack';
 export declare function babel(config: TransformOptions, options: Options): Promise<TransformOptions>;
 export declare function webpackFinal(config: Configuration, options: Options): Promise<Configuration>;
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];

package/dist/ts3.9/server/preset.d.ts

@@ -1,3 +1,3 @@
 import type { StorybookConfig } from '@storybook/core-common';
-export declare const config: StorybookConfig['config'];
+export declare const previewAnnotations: StorybookConfig['previewAnnotations'];
 export declare const addons: StorybookConfig['addons'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "6.5.0-alpha.52",
+  "version": "6.5.0-alpha.55",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,16 +49,16 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addons": "6.5.0-alpha.52",
-    "@storybook/client-logger": "6.5.0-alpha.52",
-    "@storybook/core": "6.5.0-alpha.52",
-    "@storybook/core-common": "6.5.0-alpha.52",
+    "@storybook/addons": "6.5.0-alpha.55",
+    "@storybook/client-logger": "6.5.0-alpha.55",
+    "@storybook/core": "6.5.0-alpha.55",
+    "@storybook/core-common": "6.5.0-alpha.55",
     "@storybook/csf": "0.0.2--canary.507502b.0",
-    "@storybook/docs-tools": "6.5.0-alpha.52",
-    "@storybook/node-logger": "6.5.0-alpha.52",
+    "@storybook/docs-tools": "6.5.0-alpha.55",
+    "@storybook/node-logger": "6.5.0-alpha.55",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.52",
+    "@storybook/store": "6.5.0-alpha.55",
     "@types/estree": "^0.0.51",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
@@ -88,8 +88,8 @@
   "peerDependencies": {
     "@babel/core": "^7.11.5",
     "jest-specific-snapshot": "^4.0.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "require-from-string": "^2.0.2"
   },
   "peerDependenciesMeta": {
@@ -118,6 +118,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "863b3811b24a4703645a09286059bc6d95bd2e65",
+  "gitHead": "0d051c3d8efb90e15d8734e6e6914b2439420953",
   "sbmodern": "dist/modern/client/index.js"
 }