diff --git a/code/addons/docs/src/types.ts b/code/addons/docs/src/types.ts index ac6ab06ddc98..e6b05c876d34 100644 --- a/code/addons/docs/src/types.ts +++ b/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; /** * Specifies how the source code is rendered. * @@ -166,6 +171,13 @@ export interface DocsParameters { */ canvas?: Partial; + /** + * Enable the Code panel. + * + * @see https://storybook.js.org/docs/writing-docs/code-panel + */ + codePanel?: boolean; + /** * Controls block configuration * @@ -173,6 +185,13 @@ export interface DocsParameters { */ controls?: ControlsBlockParameters; + /** + * Customize the Docs Container + * + * @see https://storybook.js.org/docs/writing-docs/autodocs#customize-the-docs-container + */ + container?: ComponentType; + /** * 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; }; } diff --git a/code/core/package.json b/code/core/package.json index 7b93d07c767e..a3a4e92ab304 100644 --- a/code/core/package.json +++ b/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" ], diff --git a/code/core/scripts/dts.ts b/code/core/scripts/dts.ts index 20c0c6e353c5..4e4b4b36a693 100644 --- a/code/core/scripts/dts.ts +++ b/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', diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index 28e82e8f4b20..965adce43792 100644 --- a/code/core/scripts/entries.ts +++ b/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), diff --git a/code/core/src/controls/preview.ts b/code/core/src/controls/preview.ts index fc919081569a..5b71238a3b71 100644 --- a/code/core/src/controls/preview.ts +++ b/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({ // Controls addon doesn't need any preview-side configuration // It operates entirely through the manager UI diff --git a/code/core/src/csf/core-annotations.ts b/code/core/src/csf/core-annotations.ts index 6737a567c6c9..1ca9d8559043 100644 --- a/code/core/src/csf/core-annotations.ts +++ b/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 &