@storybook/react 7.0.0-alpha.50 → 7.0.0-alpha.51

package/dist/config.d.ts

@@ -1,5 +1,5 @@
 import * as lib_docs_tools_dist from 'lib/docs-tools/dist';
-import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-f5aed487.js';
+import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-7d102855.js';
 import * as lib_types_dist from 'lib/types/dist';
 import { ArgsStoryFn, Store_RenderContext } from '@storybook/types';
 import 'react';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _storybook_types from '@storybook/types';
 import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, Store_ComposedStory, Store_CSFExports, Store_StoriesWithPartialProps } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-f5aed487.js';
-export { R as ReactRenderer } from './types-f5aed487.js';
+import { R as ReactRenderer, S as StoryFnReactReturnType } from './types-7d102855.js';
+export { R as ReactRenderer } from './types-7d102855.js';
 import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import { Simplify, SetOptional } from 'type-fest';
 
@@ -16,30 +16,30 @@ declare const configure: ClientApi['configure'];
 declare const forceReRender: ClientApi['forceReRender'];
 declare const raw: ClientApi['raw'];
 
-declare type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-declare type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
+type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
+type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
+type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
     render?: ArgsStoryFn<ReactRenderer, any>;
     component?: infer Component;
     args?: infer DefaultArgs;
 } ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, TArgs, SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
-declare type ActionArgs<TArgs> = {
+type ActionArgs<TArgs> = {
     [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
 };
 /**
@@ -51,7 +51,7 @@ declare type ActionArgs<TArgs> = {
  * export default { ... } as ComponentMeta<typeof Button>;
  * ```
  */
-declare type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
+type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
 /**
  * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
  * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
@@ -63,7 +63,7 @@ declare type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
  * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
  * ```
  */
-declare type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
+type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
 /**
  * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
  *
@@ -75,7 +75,7 @@ declare type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>
  * }
  * ```
  */
-declare type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
+type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
 /**
  * @deprecated Use `StoryFn` instead.
  * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
@@ -85,7 +85,7 @@ declare type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-declare type Story<TArgs = Args> = StoryFn<TArgs>;
+type Story<TArgs = Args> = StoryFn<TArgs>;
 /**
  * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
  * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
@@ -99,14 +99,14 @@ declare type Story<TArgs = Args> = StoryFn<TArgs>;
  * }
  * ```
  */
-declare type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
+type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
 /**
  * @deprecated Use Decorator instead.
  */
-declare type DecoratorFn = DecoratorFunction<ReactRenderer>;
-declare type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
-declare type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
-declare type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
+type DecoratorFn = DecoratorFunction<ReactRenderer>;
+type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
+type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
+type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
 
 /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
  *
@@ -156,7 +156,7 @@ declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRen
  * @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.
  */
-declare function composeStory<TArgs = Args>(story: Store_ComposedStory<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): {
+declare function composeStory<TArgs extends Args = Args>(story: Store_ComposedStory<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): {
     (extraArgs: Partial<TArgs>): StoryFnReactReturnType;
     storyName: string;
     args: Args;

package/dist/{types-f5aed487.d.ts → types-7d102855.d.ts}

@@ -5,6 +5,6 @@ interface ReactRenderer extends WebRenderer {
     component: ComponentType<this['T']>;
     storyResult: StoryFnReactReturnType;
 }
-declare type StoryFnReactReturnType = ReactElement<unknown>;
+type StoryFnReactReturnType = ReactElement<unknown>;
 
 export { ReactRenderer as R, StoryFnReactReturnType as S };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.0.0-alpha.50",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -52,14 +52,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.50",
-    "@storybook/client-logger": "7.0.0-alpha.50",
-    "@storybook/core-client": "7.0.0-alpha.50",
-    "@storybook/docs-tools": "7.0.0-alpha.50",
-    "@storybook/store": "7.0.0-alpha.50",
-    "@storybook/types": "7.0.0-alpha.50",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/estree": "^0.0.51",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -74,12 +74,12 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
+    "@babel/core": "^7.20.2",
     "@types/util-deprecate": "^1.0.0",
     "expect-type": "^0.14.2",
     "jest-specific-snapshot": "^6.0.0",
     "require-from-string": "^2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -103,5 +103,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }

package/template/cli/js/Button.stories.js

@@ -1,18 +1,16 @@
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary = {
   args: {
     primary: true,

package/template/cli/js/Header.stories.js

@@ -3,10 +3,10 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };

package/template/cli/js/Page.stories.js

@@ -6,14 +6,14 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/template/cli/ts/Button.stories.ts

@@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
@@ -17,9 +15,8 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
-  // More on args: https://storybook.js.org/docs/react/writing-stories/args
   args: {
     primary: true,
     label: 'Button',

package/template/cli/ts/Header.stories.ts

@@ -4,10 +4,10 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };

package/template/cli/ts/Page.stories.ts

@@ -7,7 +7,7 @@ const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);