CSF: Improve docs parameter types

code/addons/docs/src/types.ts

@@ -1,7 +1,12 @@
-import type { JSX } from 'react';
+import type { ComponentType } from 'react';
 
 import type { ModuleExport, ModuleExports } from 'storybook/internal/types';
 
+import type { ThemeVars } from 'storybook/theming';
+
+import type { DocsContainerProps } from './blocks/blocks';
+import type { TocParameters } from './blocks/components';
+
 type StoryBlockParameters = {
   /** Whether a story's play function runs when shown in docs page */
   autoplay?: boolean;
@@ -135,7 +140,7 @@ type SourceBlockParameters = {
    */
   of: ModuleExport;
   /** Source code transformations */
-  transform?: (code: string, storyContext: any) => string;
+  transform?: (code: string, storyContext: any) => string | Promise<string>;
   /**
    * Specifies how the source code is rendered.
    *
@@ -166,13 +171,27 @@ export interface DocsParameters {
      */
     canvas?: Partial<CanvasBlockParameters>;
 
+    /**
+     * Enable the Code panel.
+     *
+     * @see https://storybook.js.org/docs/writing-docs/code-panel
+     */
+    codePanel?: boolean;
+
     /**
      * Controls block configuration
      *
      * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-controls
      */
     controls?: ControlsBlockParameters;
 
+    /**
+     * Customize the Docs Container
+     *
+     * @see https://storybook.js.org/docs/writing-docs/autodocs#customize-the-docs-container
+     */
+    container?: ComponentType<DocsContainerProps>;
+
     /**
      * Component/story description when shown in docs page
      *
@@ -188,7 +207,7 @@ export interface DocsParameters {
      *
      * @see https://storybook.js.org/docs/writing-docs/autodocs#write-a-custom-template
      */
-    page?: unknown;
+    page?: ComponentType;
 
     /**
      * Source code configuration when shown in docs page
@@ -211,12 +230,26 @@ export interface DocsParameters {
      */
     subtitle?: string;
 
+    /**
+     * Override the default theme
+     *
+     * @see https://storybook.js.org/docs/writing-docs/autodocs#override-the-default-theme
+     */
+    theme?: ThemeVars;
+
     /**
      * The title displayed when shown in docs page
      *
      * @see https://storybook.js.org/docs/api/doc-blocks/doc-block-title
      */
     title?: string;
+
+    /**
+     * Configure the table of contents
+     *
+     * @see https://storybook.js.org/docs/writing-docs/autodocs#configure-the-table-of-contents
+     */
+    toc?: true | TocParameters;
   };
 }
 

code/core/package.json

@@ -191,6 +191,16 @@
       "types": "./dist/actions/decorator.d.ts",
       "import": "./dist/actions/decorator.js"
     },
+    "./internal/controls/preview": {
+      "types": "./dist/controls/preview.d.ts",
+      "import": "./dist/controls/preview.js",
+      "require": "./dist/controls/preview.cjs"
+    },
+    "./controls/preview": {
+      "types": "./dist/controls/preview.d.ts",
+      "import": "./dist/controls/preview.js",
+      "require": "./dist/controls/preview.cjs"
+    },
     "./internal/component-testing": {
       "types": "./dist/component-testing/index.d.ts",
       "import": "./dist/component-testing/index.js",
@@ -226,11 +236,6 @@
       "import": "./dist/controls/index.js",
       "require": "./dist/controls/index.cjs"
     },
-    "./internal/controls/preview": {
-      "types": "./dist/controls/preview.d.ts",
-      "import": "./dist/controls/preview.js",
-      "require": "./dist/controls/preview.cjs"
-    },
     "./internal/controls/decorator": {
       "types": "./dist/controls/decorator.d.ts",
       "import": "./dist/controls/decorator.js"
@@ -487,6 +492,12 @@
       "actions/decorator": [
         "./dist/actions/decorator.d.ts"
       ],
+      "internal/controls/preview": [
+        "./dist/controls/preview.d.ts"
+      ],
+      "controls/preview": [
+        "./dist/controls/preview.d.ts"
+      ],
       "internal/component-testing": [
         "./dist/component-testing/index.d.ts"
       ],
@@ -508,9 +519,6 @@
       "internal/controls": [
         "./dist/controls/index.d.ts"
       ],
-      "internal/controls/preview": [
-        "./dist/controls/preview.d.ts"
-      ],
       "internal/controls/decorator": [
         "./dist/controls/decorator.d.ts"
       ],

code/core/scripts/dts.ts

@@ -42,6 +42,8 @@ async function run() {
     'storybook/actions/preview',
     'storybook/actions/decorator',
 
+    'storybook/controls/preview',
+
     'storybook/viewport',
     'storybook/viewport/preview',
 

code/core/scripts/entries.ts

@@ -36,6 +36,8 @@ export const getEntries = (cwd: string) => {
     define('src/actions/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
     define('src/actions/decorator.ts', ['browser'], true, ['react'], [], [], true),
 
+    define('src/controls/preview.ts', ['browser', 'node'], true, ['react'], [], [], true),
+
     define('src/component-testing/index.ts', ['browser', 'node'], true, ['react'], [], []),
     define('src/component-testing/preview.ts', ['browser', 'node'], true, ['react'], [], []),
     define('src/viewport/index.ts', ['browser', 'node'], true, ['react'], [], [], true),

code/core/src/controls/preview.ts

@@ -2,6 +2,8 @@ import { definePreviewAddon } from 'storybook/internal/csf';
 
 import type { ControlsTypes } from './types';
 
+export type { ControlsTypes };
+
 export default definePreviewAddon<ControlsTypes>({
   // Controls addon doesn't need any preview-side configuration
   // It operates entirely through the manager UI

code/core/src/csf/core-annotations.ts

@@ -3,6 +3,7 @@ import type { StorybookTypes } from 'storybook/internal/types';
 
 import actionAnnotations, { type ActionsTypes } from 'storybook/actions/preview';
 import backgroundsAnnotations, { type BackgroundTypes } from 'storybook/backgrounds/preview';
+import { type ControlsTypes } from 'storybook/controls/preview';
 import highlightAnnotations, { type HighlightTypes } from 'storybook/highlight/preview';
 import measureAnnotations, { type MeasureTypes } from 'storybook/measure/preview';
 import outlineAnnotations, { type OutlineTypes } from 'storybook/outline/preview';
@@ -12,6 +13,7 @@ import viewportAnnotations, { type ViewportTypes } from 'storybook/viewport/prev
 export type CoreTypes = StorybookTypes &
   ActionsTypes &
   BackgroundTypes &
+  ControlsTypes &
   HighlightTypes &
   MeasureTypes &
   OutlineTypes &