Expose more CSF types in all renderers

MIGRATION.md

@@ -43,8 +43,9 @@
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
-    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
     - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
+    - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -864,6 +865,47 @@ import type { SvelteRenderer } from '@storybook/svelte';
 // etc.
 ```
 
+#### Renamed `DecoratorFn` to `Decorator`
+
+In 6.x you could import the type `DecoratorFn`:
+
+```ts
+import type { DecoratorFn } from '@storybook/react';
+```
+
+This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers:
+
+```ts
+import type { Decorator } from '@storybook/react';
+// or
+import type { Decorator } from '@storybook/vue';
+// or
+import type { Decorator } from '@storybook/svelte';
+// etc.
+```
+
+The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this:
+
+```tsx
+import type { Decorator } from '@storybook/react';
+import { LocaleProvider } from './locale';
+
+const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => (
+  <LocaleProvider lang={args.locale}>
+    <Story />
+  </LocaleProvider>
+);
+```
+
+If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use:
+
+```tsx
+import type { Args, Decorator } from '@storybook/react';
+
+// Decorator<Args> behaves the same as DecoratorFn (without generic)
+const withLocale: Decorator<Args> = (Story, { args }) => // args has type { [name: string]: any }
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade

code/addons/links/package.json

@@ -79,7 +79,7 @@
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/router": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "global": "^4.4.0",

code/addons/storyshots/storyshots-puppeteer/package.json

@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/node-logger": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/jest-image-snapshot": "^4.1.3",

code/frameworks/angular/src/client/public-types.ts

@@ -1,7 +1,18 @@
-import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types';
+import {
+  AnnotatedStoryFn,
+  Args,
+  ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
+  StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
+} from '@storybook/types';
 import { AngularRenderer } from './types';
 
-export type { Args, ArgTypes } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { Parameters as AngularParameters } from './types';
+export type { AngularRenderer };
 
 /**
  * Metadata to configure the stories for a component.
@@ -34,3 +45,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;

code/lib/api/package.json

@@ -48,7 +48,7 @@
     "@storybook/channels": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/router": "7.0.0-alpha.49",
     "@storybook/theming": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",

code/lib/client-api/package.json

@@ -44,7 +44,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/store": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/qs": "^6.9.5",

code/lib/codemod/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@babel/types": "^7.12.11",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/csf-tools": "7.0.0-alpha.49",
     "@storybook/node-logger": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",

code/lib/core-client/package.json

@@ -42,7 +42,7 @@
     "@storybook/client-api": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/preview-web": "7.0.0-alpha.49",
     "@storybook/store": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",

code/lib/core-server/package.json

@@ -39,7 +39,7 @@
     "@storybook/core-client": "7.0.0-alpha.49",
     "@storybook/core-common": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/csf-tools": "7.0.0-alpha.49",
     "@storybook/docs-mdx": "0.0.1-canary.12433cf.0",
     "@storybook/node-logger": "7.0.0-alpha.49",

code/lib/csf-tools/package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@babel/types": "^7.12.11",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/types": "7.0.0-alpha.49",
     "fs-extra": "^9.0.1",
     "ts-dedent": "^2.0.0"

code/lib/source-loader/package.json

@@ -43,7 +43,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/types": "7.0.0-alpha.49",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",

code/lib/store/package.json

@@ -45,7 +45,7 @@
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/types": "7.0.0-alpha.49",
     "dequal": "^2.0.2",
     "global": "^4.4.0",

code/lib/types/package.json

@@ -47,7 +47,7 @@
     "file-system-cache": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@types/node": "^16.0.0",
     "synchronous-promise": "^2.0.15",
     "typescript": "~4.6.3"

code/lib/types/src/modules/csf.ts

@@ -23,7 +23,7 @@ import type {
   LegacyStoryAnnotationsOrFn,
   LegacyStoryFn,
   LoaderFunction,
-  Parameters as ParametersBase,
+  Parameters,
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
@@ -51,6 +51,7 @@ import type {
   StoryIdentifier,
   StoryKind,
   StoryName,
+  StrictArgs,
   StrictArgTypes,
   StrictGlobalTypes,
   StrictInputType,
@@ -83,6 +84,7 @@ export type {
   LegacyStoryAnnotationsOrFn,
   LegacyStoryFn,
   LoaderFunction,
+  Parameters,
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
@@ -109,6 +111,7 @@ export type {
   StoryIdentifier,
   StoryKind,
   StoryName,
+  StrictArgs,
   StrictArgTypes,
   StrictGlobalTypes,
   StrictInputType,
@@ -135,13 +138,15 @@ export type ViewMode = ViewModeBase | 'story' | 'info' | 'settings' | string | u
 
 type Layout = 'centered' | 'fullscreen' | 'padded' | 'none';
 
-export interface Parameters extends ParametersBase {
-  fileName?: string;
+export interface StorybookParameters {
   options?: Addon_OptionsParameter;
   /** The layout property defines basic styles added to the preview body where the story is rendered. If you pass 'none', no styles are applied. */
   layout?: Layout;
-  docsOnly?: boolean;
-  [key: string]: any;
+}
+
+export interface StorybookInternalParameters extends StorybookParameters {
+  fileName?: string;
+  docsOnly?: true;
 }
 
 export type Path = string;

code/package.json

@@ -184,7 +184,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "0.0.2-next.5",
+    "@storybook/csf": "0.0.2-next.7",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",

code/renderers/html/src/public-types.ts

@@ -2,12 +2,16 @@ import type {
   AnnotatedStoryFn,
   Args,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-
 import type { HtmlRenderer } from './types';
 
-export type { Args, ArgTypes, Parameters } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { HtmlRenderer };
 
 /**
  * Metadata to configure the stories for a component.
@@ -40,3 +44,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<HtmlRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<HtmlRenderer, TArgs>;

code/renderers/preact/src/public-types.ts

@@ -3,10 +3,15 @@ import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
 import type { PreactRenderer } from './types';
 
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { PreactRenderer };
 
 /**
  * Metadata to configure the stories for a component.
@@ -39,3 +44,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<PreactRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<PreactRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<PreactRenderer, TArgs>;

code/renderers/react/src/public-api.tsx

@@ -1,13 +1,8 @@
 /* eslint-disable prefer-destructuring */
-import type {
-  Addon_ClientStoryApi,
-  Addon_Loadable,
-  Args,
-  DecoratorFunction,
-} from '@storybook/types';
 import { start } from '@storybook/core-client';
+import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 
-import { renderToCanvas, render } from './render';
+import { render, renderToCanvas } from './render';
 import type { ReactRenderer } from './types';
 
 interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
@@ -28,5 +23,3 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
 export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const raw: ClientApi['raw'] = api.clientApi.raw;
-
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<ReactRenderer, TArgs>;

code/renderers/react/src/public-types.test.tsx

@@ -1,15 +1,14 @@
 import { describe, test } from '@jest/globals';
-import type { StoryAnnotations } from '@storybook/types';
 
 import { satisfies } from '@storybook/core-common';
+import type { StoryAnnotations } from '@storybook/types';
 import { expectTypeOf } from 'expect-type';
 import type { KeyboardEventHandler, ReactNode } from 'react';
 import React from 'react';
 
 import type { SetOptional } from 'type-fest';
 
-import type { DecoratorFn } from './public-api';
-import type { Meta, StoryObj } from './public-types';
+import type { Decorator, Meta, StoryObj } from './public-types';
 import type { ReactRenderer } from './types';
 
 type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactRenderer, Args, RequiredArgs>;
@@ -141,7 +140,7 @@ describe('Story args can be inferred', () => {
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
-  const withDecorator: DecoratorFn<{ decoratorArg: number }> = (Story, { args }) => (
+  const withDecorator: Decorator<{ decoratorArg: number }> = (Story, { args }) => (
     <>
       Decorator: {args.decoratorArg}
       <Story args={{ decoratorArg: 0 }} />
@@ -166,7 +165,7 @@ describe('Story args can be inferred', () => {
   test('Correct args are inferred when type is widened for multiple decorators', () => {
     type Props = ButtonProps & { decoratorArg: number; decoratorArg2: string };
 
-    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (Story, { args }) => (
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (Story, { args }) => (
       <>
         Decorator: {args.decoratorArg2}
         <Story />

code/renderers/react/src/public-types.ts

@@ -4,15 +4,18 @@ import type {
   ArgsFromMeta,
   ArgsStoryFn,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-
 import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
 import type { SetOptional, Simplify } from 'type-fest';
-
 import type { ReactRenderer } from './types';
 
-export { ReactRenderer };
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { ReactRenderer };
 
 type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -124,3 +127,11 @@ export type Story<TArgs = Args> = StoryFn<TArgs>;
  * ```
  */
 export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
+
+/**
+ * @deprecated Use Decorator instead.
+ */
+export type DecoratorFn = DecoratorFunction<ReactRenderer>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<ReactRenderer, TArgs>;