CSF Factories: Add parameters/globals types, extend API, portable stories

code/addons/a11y/src/index.ts

@@ -1,9 +1,10 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { A11yTypes } from './types';
 
 export { PARAM_KEY } from './constants';
 export * from './params';
-export type { A11yParameters } from './types';
+export type { A11yTypes } from './types';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<A11yTypes>(addonAnnotations);

code/addons/a11y/src/types.ts

@@ -47,3 +47,8 @@ export interface A11yGlobals {
     manual?: boolean;
   };
 }
+
+export interface A11yTypes {
+  parameters: A11yParameters;
+  globals: A11yGlobals;
+}

code/addons/actions/src/index.ts

@@ -1,11 +1,12 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { ActionsTypes } from './types';
 
 export * from './constants';
 export * from './models';
 export * from './runtime';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<ActionsTypes>(addonAnnotations);
 
-export type { ActionsParameters } from './types';
+export type { ActionsTypes };

code/addons/actions/src/types.ts

@@ -4,7 +4,7 @@ export interface ActionsParameters {
    *
    * @see https://storybook.js.org/docs/essentials/actions#parameters
    */
-  actions: {
+  actions?: {
     /**
      * Create actions for each arg that matches the regex. (**NOT recommended, see below**)
      *
@@ -36,3 +36,7 @@ export interface ActionsParameters {
     handles?: string[];
   };
 }
+
+export interface ActionsTypes {
+  parameters: ActionsParameters;
+}

code/addons/backgrounds/src/index.ts

@@ -1,7 +1,9 @@
+import { definePreviewAddon } from 'storybook/internal/csf';
 import { definePreview } from 'storybook/internal/preview-api';
 
 import * as addonAnnotations from './preview';
+import type { BackgroundTypes } from './types';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<BackgroundTypes>(addonAnnotations);
 
-export type { BackgroundsParameters, BackgroundsGlobals } from './types';
+export type { BackgroundTypes };

code/addons/backgrounds/src/types.ts

@@ -28,7 +28,7 @@ export interface BackgroundsParameters {
    *
    * @see https://storybook.js.org/docs/essentials/backgrounds#parameters
    */
-  backgrounds: {
+  backgrounds?: {
     /** Default background color */
     default?: string;
 
@@ -51,3 +51,8 @@ export interface BackgroundsGlobals {
    */
   backgrounds: GlobalState;
 }
+
+export interface BackgroundTypes {
+  parameters: BackgroundsParameters;
+  globals: BackgroundsGlobals;
+}

code/addons/controls/src/index.ts

@@ -1,7 +1,9 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
+
+import type { ControlsTypes } from './types';
 
 export { PARAM_KEY } from './constants';
 
-export default () => definePreview({});
+export default () => definePreviewAddon<ControlsTypes>({});
 
-export type { ControlsParameters } from './types';
+export type { ControlsTypes };

code/addons/controls/src/types.ts

@@ -4,7 +4,7 @@ export interface ControlsParameters {
    *
    * @see https://storybook.js.org/docs/essentials/controls#parameters-1
    */
-  controls: {
+  controls?: {
     /** Remove the addon panel and disable the addon's behavior */
     disable?: boolean;
 
@@ -35,3 +35,7 @@ export interface ControlsParameters {
     sort?: 'none' | 'alpha' | 'requiredFirst';
   };
 }
+
+export interface ControlsTypes {
+  parameters: ControlsParameters;
+}

code/addons/docs/src/index.ts

@@ -1,9 +1,10 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { DocsTypes } from './types';
 
 export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';
-export type { DocsParameters } from './types';
+export type { DocsTypes };
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<DocsTypes>(addonAnnotations);

code/addons/docs/src/types.ts

@@ -217,3 +217,7 @@ export interface DocsParameters {
     title?: string;
   };
 }
+
+export interface DocsTypes {
+  parameters: DocsParameters;
+}

code/addons/essentials/src/index.ts

@@ -1,5 +1,8 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import addonAnnotations from './preview';
+import type { EssentialsTypes } from './types';
 
-export default () => definePreview(addonAnnotations);
+export type { EssentialsTypes };
+
+export default () => definePreviewAddon<EssentialsTypes>(addonAnnotations);

code/addons/essentials/src/types.ts

@@ -1,16 +1,15 @@
-import type { ActionsParameters } from '@storybook/addon-actions';
-import type { BackgroundsParameters } from '@storybook/addon-backgrounds';
-import type { DocsParameters } from '@storybook/addon-docs';
-import type { HighlightParameters } from '@storybook/addon-highlight';
-import type { MeasureParameters } from '@storybook/addon-measure';
-import type { OutlineParameters } from '@storybook/addon-outline';
-import type { ViewportParameters } from '@storybook/addon-viewport';
+import type { ActionsTypes } from '@storybook/addon-actions';
+import type { BackgroundTypes } from '@storybook/addon-backgrounds';
+import type { DocsTypes } from '@storybook/addon-docs';
+import type { HighLightTypes } from '@storybook/addon-highlight';
+import type { MeasureTypes } from '@storybook/addon-measure';
+import type { OutlineTypes } from '@storybook/addon-outline';
+import type { ViewportTypes } from '@storybook/addon-viewport';
 
-export interface EssentialsParameters
-  extends ActionsParameters,
-    BackgroundsParameters,
-    DocsParameters,
-    HighlightParameters,
-    MeasureParameters,
-    OutlineParameters,
-    ViewportParameters {}
+export type EssentialsTypes = ActionsTypes &
+  BackgroundTypes &
+  DocsTypes &
+  HighLightTypes &
+  MeasureTypes &
+  OutlineTypes &
+  ViewportTypes;

code/addons/highlight/src/index.ts

@@ -1,8 +1,9 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import './preview';
+import type { HighLightTypes } from './types';
 
 export { HIGHLIGHT, RESET_HIGHLIGHT } from './constants';
-export type { HighlightParameters } from './types';
+export type { HighLightTypes };
 
-export default () => definePreview({});
+export default () => definePreviewAddon<HighLightTypes>({});

code/addons/highlight/src/types.ts

@@ -4,8 +4,12 @@ export interface HighlightParameters {
    *
    * @see https://storybook.js.org/docs/essentials/highlight#parameters
    */
-  highlight: {
+  highlight?: {
     /** Remove the addon panel and disable the addon's behavior */
     disable?: boolean;
   };
 }
+
+export interface HighLightTypes {
+  parameters: HighlightParameters;
+}

code/addons/interactions/src/index.ts

@@ -1,5 +1,9 @@
+import { definePreviewAddon } from 'storybook/internal/csf';
 import { definePreview } from 'storybook/internal/preview-api';
 
 import * as addonAnnotations from './preview';
+import type { InteractionsTypes } from './types';
 
-export default () => definePreview(addonAnnotations);
+export type { InteractionsTypes };
+
+export default () => definePreviewAddon<InteractionsTypes>(addonAnnotations);

code/addons/interactions/src/types.ts

@@ -4,11 +4,15 @@ export interface InteractionsParameters {
    *
    * @see https://storybook.js.org/docs/essentials/interactions
    */
-  test: {
+  test?: {
     /** Ignore unhandled errors during test execution */
     dangerouslyIgnoreUnhandledErrors?: boolean;
 
     /** Whether to throw exceptions coming from the play function */
     throwPlayFunctionExceptions?: boolean;
   };
 }
+
+export interface InteractionsTypes {
+  parameters: InteractionsParameters;
+}

code/addons/links/src/index.ts

@@ -1,7 +1,7 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
 
 export { linkTo, hrefTo, withLinks, navigate } from './utils';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon(addonAnnotations);

code/addons/measure/src/index.ts

@@ -1,7 +1,8 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { MeasureTypes } from './types';
 
-export type { MeasureParameters } from './types';
+export type { MeasureTypes };
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<MeasureTypes>(addonAnnotations);

code/addons/measure/src/types.ts

@@ -4,8 +4,12 @@ export interface MeasureParameters {
    *
    * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
    */
-  measure: {
+  measure?: {
     /** Remove the addon panel and disable the addon's behavior */
     disable?: boolean;
   };
 }
+
+export interface MeasureTypes {
+  parameters: MeasureParameters;
+}

code/addons/outline/src/index.ts

@@ -1,7 +1,9 @@
+import { definePreviewAddon } from 'storybook/internal/csf';
 import { definePreview } from 'storybook/internal/preview-api';
 
 import * as addonAnnotations from './preview';
+import type { OutlineTypes } from './types';
 
-export type { OutlineParameters } from './types';
+export type { OutlineTypes };
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<OutlineTypes>(addonAnnotations);

code/addons/outline/src/types.ts

@@ -4,8 +4,12 @@ export interface OutlineParameters {
    *
    * @see https://storybook.js.org/docs/essentials/measure-and-outline#parameters
    */
-  outline: {
+  outline?: {
     /** Remove the addon panel and disable the addon's behavior */
     disable?: boolean;
   };
 }
+
+export interface OutlineTypes {
+  parameters: OutlineParameters;
+}

code/addons/test/src/index.ts

@@ -1,11 +1,12 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { TestTypes } from './types';
 import type { storybookTest as storybookTestImport } from './vitest-plugin';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<TestTypes>(addonAnnotations);
 
-export type { TestParameters } from './types';
+export type { TestTypes } from './types';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore-error - this is a hack to make the module's sub-path augmentable

code/addons/test/src/types.ts

@@ -4,11 +4,15 @@ export interface TestParameters {
    *
    * @see https://storybook.js.org/docs/writing-tests/test-addon
    */
-  test: {
+  test?: {
     /** Ignore unhandled errors during test execution */
     dangerouslyIgnoreUnhandledErrors?: boolean;
 
     /** Whether to throw exceptions coming from the play function */
     throwPlayFunctionExceptions?: boolean;
   };
 }
+
+export interface TestTypes {
+  parameters: TestParameters;
+}

code/addons/themes/src/index.ts

@@ -1,9 +1,11 @@
+import { definePreviewAddon } from 'storybook/internal/csf';
 import { definePreview } from 'storybook/internal/preview-api';
 
 import * as addonAnnotations from './preview';
+import type { ThemesTypes } from './types';
 
-export type { ThemesGlobals, ThemesParameters } from './types';
+export type { ThemesTypes } from './types';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<ThemesTypes>(addonAnnotations);
 
 export * from './decorators';

code/addons/themes/src/types.ts

@@ -9,7 +9,7 @@ export interface ThemesParameters {
    *
    * @see https://github.com/storybookjs/storybook/blob/next/code/addons/themes/README.md
    */
-  themes: {
+  themes?: {
     /** Remove the addon panel and disable the addon's behavior */
     disable?: boolean;
     /** Which theme to override for the story */
@@ -21,3 +21,8 @@ export interface ThemesGlobals {
   /** Which theme to override for the story */
   theme?: string;
 }
+
+export interface ThemesTypes {
+  parameters: ThemesParameters;
+  globals: ThemesGlobals;
+}

code/addons/viewport/src/index.ts

@@ -1,8 +1,9 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { ViewportTypes } from './types';
 
 export * from './defaults';
 export type * from './types';
 
-export default () => definePreview(addonAnnotations);
+export default () => definePreviewAddon<ViewportTypes>(addonAnnotations);

code/addons/viewport/src/types.ts

@@ -45,7 +45,7 @@ export interface ViewportParameters {
    *
    * @see https://storybook.js.org/docs/essentials/viewport#parameters
    */
-  viewport: {
+  viewport?: {
     /**
      * Specifies the default orientation used when viewing a story. Only available if you haven't
      * enabled the globals API.
@@ -80,7 +80,12 @@ export interface ViewportGlobals {
    *
    * @see https://storybook.js.org/docs/essentials/viewport#globals
    */
-  viewport: {
+  viewport?: {
     [key: string]: GlobalState;
   };
 }
+
+export interface ViewportTypes {
+  parameters: ViewportParameters;
+  globals: ViewportGlobals;
+}