@storybook/react 6.5.0-alpha.7 → 6.5.0-beta.1

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-cra.d.ts

@@ -1,3 +1,3 @@
-import { Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 import type { Options } from '@storybook/core-common';
 export declare function webpackFinal(config: Configuration, { presetsList }: Options): Configuration;

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

@@ -0,0 +1,6 @@
+import type { StorybookConfig, Options } from '@storybook/core-common';
+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 previewAnnotations: StorybookConfig['previewAnnotations'];

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

@@ -0,0 +1,32 @@
+import { Configuration } from 'webpack';
+export declare function webpackFinal(config: Configuration): Promise<{
+    plugins: import("webpack").Plugin[];
+    mode?: "none" | "production" | "development";
+    name?: string;
+    context?: string;
+    entry?: string | string[] | import("webpack").Entry | import("webpack").EntryFunc;
+    devtool?: string | boolean;
+    output?: import("webpack").Output;
+    module?: import("webpack").Module;
+    resolve?: import("webpack").Resolve;
+    resolveLoader?: import("webpack").ResolveLoader;
+    externals?: string | RegExp | import("webpack").ExternalsObjectElement | import("webpack").ExternalsFunctionElement | import("webpack").ExternalsElement[];
+    target?: "node" | "web" | "webworker" | "async-node" | "node-webkit" | "atom" | "electron" | "electron-renderer" | "electron-preload" | "electron-main" | ((compiler?: any) => void);
+    bail?: boolean;
+    profile?: boolean;
+    cache?: boolean | object;
+    watch?: boolean;
+    watchOptions?: import("webpack").ICompiler.WatchOptions;
+    node?: false | import("webpack").Node;
+    amd?: {
+        [moduleName: string]: boolean;
+    };
+    recordsPath?: string;
+    recordsInputPath?: string;
+    recordsOutputPath?: string;
+    stats?: import("webpack").Stats.ToStringOptions;
+    performance?: false | import("webpack").Options.Performance;
+    parallelism?: number;
+    optimization?: import("webpack").Options.Optimization;
+    infrastructureLogging?: import("webpack").Options.InfrastructureLogging;
+}>;

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

@@ -2,50 +2,5 @@ import { TransformOptions } from '@babel/core';
 import type { Configuration } from 'webpack';
 import type { Options } from '@storybook/core-common';
 export declare function babel(config: TransformOptions, options: Options): Promise<TransformOptions>;
-export declare function babelDefault(config: TransformOptions): Promise<{
-    presets: (string | object)[];
-    plugins: (string | object)[];
-    ast?: boolean;
-    auxiliaryCommentAfter?: string;
-    auxiliaryCommentBefore?: string;
-    root?: string;
-    rootMode?: "root" | "upward" | "upward-optional";
-    configFile?: string | boolean;
-    babelrc?: boolean;
-    babelrcRoots?: string | boolean | RegExp | ((filename: string, context: import("@babel/core").MatchPatternContext) => boolean) | import("@babel/core").MatchPattern[];
-    envName?: string;
-    exclude?: string | RegExp | ((filename: string, context: import("@babel/core").MatchPatternContext) => boolean) | import("@babel/core").MatchPattern[];
-    code?: boolean;
-    comments?: boolean;
-    compact?: boolean | "auto";
-    cwd?: string;
-    caller?: import("@babel/core").TransformCaller;
-    env?: {
-        [index: string]: TransformOptions;
-    };
-    extends?: string;
-    filename?: string;
-    filenameRelative?: string;
-    generatorOpts?: import("@babel/generator").GeneratorOptions;
-    getModuleId?: (moduleName: string) => string;
-    highlightCode?: boolean;
-    ignore?: import("@babel/core").MatchPattern[];
-    include?: string | RegExp | ((filename: string, context: import("@babel/core").MatchPatternContext) => boolean) | import("@babel/core").MatchPattern[];
-    inputSourceMap?: object;
-    minified?: boolean;
-    moduleId?: string;
-    moduleIds?: boolean;
-    moduleRoot?: string;
-    only?: import("@babel/core").MatchPattern[];
-    overrides?: TransformOptions[];
-    parserOpts?: import("@babel/parser").ParserOptions;
-    retainLines?: boolean;
-    shouldPrintComment?: (commentContents: string) => boolean;
-    sourceFileName?: string;
-    sourceMaps?: boolean | "inline" | "both";
-    sourceRoot?: string;
-    sourceType?: "script" | "module" | "unambiguous";
-    test?: string | RegExp | ((filename: string, context: import("@babel/core").MatchPatternContext) => boolean) | import("@babel/core").MatchPattern[];
-    wrapPluginVisitorMethod?: (pluginAlias: string, visitorType: "enter" | "exit", callback: (path: import("@babel/traverse").NodePath<import("@babel/types").Node>, state: any) => void) => (path: import("@babel/traverse").NodePath<import("@babel/types").Node>, state: any) => void;
-}>;
+export declare function babelDefault(config: TransformOptions): Promise<TransformOptions>;
 export declare function webpackFinal(config: Configuration, options: Options): Promise<Configuration>;

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

@@ -1,3 +1,3 @@
-import { LoadOptions } from '@storybook/core-common';
+import type { LoadOptions } from '@storybook/core-common';
 declare const _default: LoadOptions;
 export default _default;

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

@@ -1,3 +1,3 @@
-import { StorybookConfig } from '@storybook/core-common';
-export declare const config: StorybookConfig['config'];
+import type { StorybookConfig } from '@storybook/core-common';
+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.7",
+  "version": "6.5.0-beta.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,42 +49,66 @@
     "@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.7",
-    "@storybook/core": "6.5.0-alpha.7",
-    "@storybook/core-common": "6.5.0-alpha.7",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.7",
+    "@storybook/addons": "6.5.0-beta.1",
+    "@storybook/client-logger": "6.5.0-beta.1",
+    "@storybook/core": "6.5.0-beta.1",
+    "@storybook/core-common": "6.5.0-beta.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/docs-tools": "6.5.0-beta.1",
+    "@storybook/node-logger": "6.5.0-beta.1",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
     "@storybook/semver": "^7.3.2",
-    "@storybook/store": "6.5.0-alpha.7",
+    "@storybook/store": "6.5.0-beta.1",
+    "@types/estree": "^0.0.51",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/webpack-env": "^1.16.0",
+    "acorn": "^7.4.1",
+    "acorn-jsx": "^5.3.1",
+    "acorn-walk": "^7.2.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-named-asset-import": "^0.3.1",
     "babel-plugin-react-docgen": "^4.2.1",
     "core-js": "^3.8.2",
+    "escodegen": "^2.0.0",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
+    "html-tags": "^3.1.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
+    "react-element-to-jsx-string": "^14.3.4",
     "react-refresh": "^0.11.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
-    "webpack": "4"
+    "util-deprecate": "^1.0.2",
+    "webpack": ">=4.43.0 <6.0.0"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.5.0-alpha.7",
-    "@types/prompts": "^2.0.9"
+    "@types/util-deprecate": "^1.0.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "jest-specific-snapshot": "^4.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": {
     "@babel/core": {
       "optional": true
     },
+    "@storybook/builder-webpack4": {
+      "optional": true
+    },
+    "@storybook/builder-webpack5": {
+      "optional": true
+    },
+    "@storybook/manager-webpack4": {
+      "optional": true
+    },
+    "@storybook/manager-webpack5": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     }
@@ -95,6 +119,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb1ec353f7fbdf90d67576d93b9a23809d6cc0e6",
+  "gitHead": "85bcae3041a0664d7c0ee4756241e29ad1063a9a",
   "sbmodern": "dist/modern/client/index.js"
 }

package/types/index.ts

@@ -1,4 +1,4 @@
-import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
 
 /**
  * The interface for Storybook configuration in `main.ts` files.
@@ -7,5 +7,13 @@ export interface StorybookConfig extends BaseConfig {
   reactOptions?: {
     fastRefresh?: boolean;
     strictMode?: boolean;
+    /**
+     * Use React's legacy root API to mount components
+     * @description
+     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
+     * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
+     * @default false
+     */
+    legacyRootApi?: boolean;
   };
 }

package/dist/cjs/typings.d.js

@@ -1 +0,0 @@
-"use strict";

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

@@ -1,5 +0,0 @@
-import { TransformOptions } from '@babel/core';
-import { Configuration } from 'webpack';
-import { Options } from '@storybook/core-common';
-export declare function babel(config: TransformOptions, { presets }: Options): Promise<TransformOptions>;
-export declare function webpackFinal(config: Configuration, { presets }: Options): Promise<Configuration>;

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

@@ -1,5 +0,0 @@
-import type { TransformOptions } from '@babel/core';
-import type { Configuration } from 'webpack';
-import type { Options } from '@storybook/core-common';
-export declare function babel(config: TransformOptions, { presets }: Options): Promise<TransformOptions>;
-export declare function webpackFinal(config: Configuration, { presets }: Options): Promise<Configuration>;