@storybook/react 11.0.0-alpha.1 → 11.0.0-alpha.2

package/dist/chunk-DT7W2slC.d.ts

@@ -0,0 +1,239 @@
+import { ComponentType, JSX } from "react";
+import { Args, ArgsStoryFn, Canvas, DecoratorFunction, ProjectAnnotations, StoryAnnotations, WebRenderer } from "storybook/internal/types";
+import { RootOptions } from "react-dom/client";
+import { AddonTypes, InferTypes, Meta, MetaInput, MetaTypes, Preview, PreviewAddon, Story, StoryArgs, TypedMetaArgKeys } from "storybook/internal/csf";
+
+//#region node_modules/type-fest/source/simplify.d.ts
+/**
+Useful to flatten the type output to improve type hints shown in editors. And also to transform an interface into a type to aide with assignability.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+type PositionProps = {
+	top: number;
+	left: number;
+};
+
+type SizeProps = {
+	width: number;
+	height: number;
+};
+
+// In your editor, hovering over `Props` will show a flattened object with all the properties.
+type Props = Simplify<PositionProps & SizeProps>;
+```
+
+Sometimes it is desired to pass a value as a function argument that has a different type. At first inspection it may seem assignable, and then you discover it is not because the `value`'s type definition was defined as an interface. In the following example, `fn` requires an argument of type `Record<string, unknown>`. If the value is defined as a literal, then it is assignable. And if the `value` is defined as type using the `Simplify` utility the value is assignable.  But if the `value` is defined as an interface, it is not assignable because the interface is not sealed and elsewhere a non-string property could be added to the interface.
+
+If the type definition must be an interface (perhaps it was defined in a third-party npm package), then the `value` can be defined as `const value: Simplify<SomeInterface> = ...`. Then `value` will be assignable to the `fn` argument.  Or the `value` can be cast as `Simplify<SomeInterface>` if you can't re-declare the `value`.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+interface SomeInterface {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+}
+
+type SomeType = {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+};
+
+const literal = {foo: 123, bar: 'hello', baz: 456};
+const someType: SomeType = literal;
+const someInterface: SomeInterface = literal;
+
+declare function fn(object: Record<string, unknown>): void;
+
+fn(literal); // Good: literal object type is sealed
+fn(someType); // Good: type is sealed
+// @ts-expect-error
+fn(someInterface); // Error: Index signature for type 'string' is missing in type 'someInterface'. Because `interface` can be re-opened
+fn(someInterface as Simplify<SomeInterface>); // Good: transform an `interface` into a `type`
+```
+
+@link https://github.com/microsoft/TypeScript/issues/15300
+@see {@link SimplifyDeep}
+@category Object
+*/
+type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
+//#endregion
+//#region code/renderers/react/.dts-emit/code/renderers/react/src/types.d.ts
+interface ReactRenderer extends WebRenderer {
+  component: ComponentType<this['T']>;
+  storyResult: StoryFnReactReturnType;
+  mount: (ui?: JSX.Element) => Promise<Canvas>;
+}
+interface ReactParameters {
+  /** React renderer configuration */
+  react?: {
+    /**
+     * Whether to enable React Server Components
+     *
+     * @see https://storybook.js.org/docs/get-started/frameworks/nextjs#react-server-components-rsc
+     */
+    rsc?: boolean; /** Options passed to React root creation */
+    rootOptions?: RootOptions;
+  };
+}
+interface ReactTypes extends ReactRenderer {
+  parameters: ReactParameters;
+}
+type StoryFnReactReturnType = JSX.Element;
+//#endregion
+//#region code/renderers/react/.dts-emit/code/renderers/react/src/preview.d.ts
+/**
+ * Creates a React-specific preview configuration with CSF factories support.
+ *
+ * This function wraps the base `definePreview` and adds React-specific annotations for rendering
+ * and documentation. It returns a `ReactPreview` that provides type-safe `meta()` and `story()`
+ * factory methods.
+ *
+ * @example
+ *
+ * ```ts
+ * // .storybook/preview.ts
+ * import { definePreview } from '@storybook/react';
+ *
+ * export const preview = definePreview({
+ *   addons: [],
+ *   parameters: { layout: 'centered' },
+ * });
+ * ```
+ */
+declare function __definePreview<Addons extends PreviewAddon<never>[]>(input: {
+  addons: Addons;
+} & ProjectAnnotations<ReactTypes & InferTypes<Addons>>): ReactPreview<ReactTypes & InferTypes<Addons>>;
+/**
+ * React-specific Preview interface that provides type-safe CSF factory methods.
+ *
+ * Use `preview.meta()` to create a meta configuration for a component, and then `meta.story()` to
+ * create individual stories. The type system will infer args from the component props, decorators,
+ * and any addon types.
+ *
+ * @example
+ *
+ * ```ts
+ * const meta = preview.meta({ component: Button });
+ * export const Primary = meta.story({ args: { label: 'Click me' } });
+ * ```
+ */
+interface ReactPreview<T extends AddonTypes> extends Omit<Preview<ReactTypes & T>, 'meta' | 'type'> {
+  /**
+   * Narrows the type of the preview to include additional type information. This is useful when you
+   * need to add args that aren't inferred from the component.
+   *
+   * @example
+   *
+   * ```ts
+   * const meta = preview.type<{ args: { theme: 'light' | 'dark' } }>().meta({
+   *   component: Button,
+   * });
+   * ```
+   */
+  type<R>(): ReactPreview<T & R>;
+  meta<TArgs extends Args, Decorators extends DecoratorFunction<ReactTypes & T, any>, TMetaArgKeys extends PropertyKey = never>(meta: {
+    render?: ArgsStoryFn<ReactTypes & T, TArgs & T['args']>;
+    component?: ComponentType<TArgs>;
+  } & MetaInput<ReactTypes & T, TArgs, Decorators, TMetaArgKeys>): ReactMeta<MetaTypes<ReactTypes & T, TArgs, Decorators, TMetaArgKeys>, TMetaArgKeys>;
+}
+/**
+ * React-specific Meta interface returned by `preview.meta()`.
+ *
+ * Provides the `story()` method to create individual stories with proper type inference. Args
+ * provided in meta become optional in stories, while missing required args must be provided at the
+ * story level.
+ */
+interface ReactMeta<T extends ReactTypes, TMetaArgKeys extends PropertyKey = never> extends Meta<T, TMetaArgKeys> {
+  /**
+   * Creates a story with a custom render function that takes no args.
+   *
+   * This overload allows you to define a story using just a render function or an object with a
+   * render function that doesn't depend on args. Since the render function doesn't use args, no
+   * args need to be provided regardless of what's required by the component.
+   *
+   * @example
+   *
+   * ```ts
+   * // Using just a render function
+   * export const CustomRender = meta.story(() => <div>Custom content</div>);
+   *
+   * // Using an object with render
+   * export const WithRender = meta.story({
+   *   render: () => <MyComponent prop="static" />,
+   * });
+   * ```
+   */
+  story<TInput extends (() => ReactTypes['storyResult']) | (StoryAnnotations<T, T['args']> & {
+    render: () => ReactTypes['storyResult'];
+  })>(story: TInput): ReactStory<T, TInput extends (() => ReactTypes['storyResult']) ? {
+    render: TInput;
+  } : TInput>;
+  /**
+   * Creates a story with custom configuration including args, decorators, or other annotations.
+   *
+   * This is the primary overload for defining stories. Args that were already provided in meta
+   * become optional, while any remaining required args must be specified here.
+   *
+   * @example
+   *
+   * ```ts
+   * // Provide required args not in meta
+   * export const Primary = meta.story({
+   *   args: { label: 'Click me', disabled: false },
+   * });
+   *
+   * // Override meta args and add story-specific configuration
+   * export const Disabled = meta.story({
+   *   args: { disabled: true },
+   *   decorators: [withCustomWrapper],
+   * });
+   * ```
+   */
+  story<TInput extends Simplify<StoryAnnotations<T, T['args'], StoryArgs<T['args'], TMetaArgKeys>>>>(story: TInput): ReactStory<T, TInput>;
+  /**
+   * Creates a story with no additional configuration.
+   *
+   * This overload is only available when all required args have been provided in meta. The
+   * conditional type `Partial<T['args']> extends StoryArgs<...>` checks if the remaining required
+   * args (after accounting for args provided in meta) are all optional. If so, the function accepts
+   * zero arguments `[]`. Otherwise, it requires `[never]` which makes this overload unmatchable,
+   * forcing the user to provide args.
+   *
+   * @example
+   *
+   * ```ts
+   * // When meta provides all required args, story() can be called with no arguments
+   * const meta = preview.meta({ component: Button, args: { label: 'Hi', disabled: false } });
+   * export const Default = meta.story(); // Valid - all args provided in meta
+   * ```
+   */
+  story(..._args: Partial<T['args']> extends StoryArgs<T['args'], TMetaArgKeys> ? [] : [never]): ReactStory<T, {}>;
+  /**
+   * Add types to the stories created from the returned meta, such as an arg that only one story
+   * has: `meta.type<{ args: { icon: string } }>().story({ args: { icon: 'star' } })`.
+   */
+  type<S>(): ReactMeta<T & S, TypedMetaArgKeys<TMetaArgKeys, S>>;
+}
+/**
+ * React-specific Story interface returned by `meta.story()`.
+ *
+ * Represents a single story with its configuration and provides access to the composed story for
+ * testing via `story.run()`.
+ *
+ * Also includes a `Component` property for portable story compatibility.
+ */
+interface ReactStory<T extends ReactTypes, TInput extends {
+  play?: (...args: never[]) => void;
+  render?: (...args: never[]) => T['storyResult'];
+}> extends Story<T, TInput> {
+  Component: ComponentType<Partial<T['args']>>;
+}
+//#endregion
+export { ReactRenderer as a, __definePreview as i, ReactPreview as n, ReactTypes as o, ReactStory as r, Simplify as s, ReactMeta as t };

package/dist/docgen/docgen-worker.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_moh6ij0aoc from 'node:url';
-import CJS_COMPAT_NODE_PATH_moh6ij0aoc from 'node:path';
-import CJS_COMPAT_NODE_MODULE_moh6ij0aoc from "node:module";
+import CJS_COMPAT_NODE_URL_pdriyszte6 from 'node:url';
+import CJS_COMPAT_NODE_PATH_pdriyszte6 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_pdriyszte6 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_moh6ij0aoc.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_moh6ij0aoc.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_moh6ij0aoc.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_pdriyszte6.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_pdriyszte6.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_pdriyszte6.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -15,7 +15,7 @@ import {
   extractArgTypes,
   posix,
   resolveStoryFileComponents
-} from "../_node-chunks/chunk-GFBGFJ4J.js";
+} from "../_node-chunks/chunk-T4O4UWGP.js";
 
 // src/docgen/docgen-worker.ts
 import { createLazyDocgenMiddleware } from "storybook/internal/common";

package/dist/entry-preview-argtypes.js

@@ -1,7 +1,7 @@
 import {
   argTypesEnhancers,
   parameters
-} from "./_browser-chunks/chunk-5GZAZJC7.js";
+} from "./_browser-chunks/chunk-LGSTPTL6.js";
 import "./_browser-chunks/chunk-B3FR4PBN.js";
 import "./_browser-chunks/chunk-UAWMPV5J.js";
 export {

package/dist/entry-preview.js

@@ -5,7 +5,7 @@ import {
   parameters,
   render,
   renderToCanvas
-} from "./_browser-chunks/chunk-XACQAYAZ.js";
+} from "./_browser-chunks/chunk-XD4PMI7Q.js";
 import {
   applyDecorators
 } from "./_browser-chunks/chunk-DDIRQRCA.js";