diff --git a/code/frameworks/nextjs/src/portable-stories.ts b/code/frameworks/nextjs/src/portable-stories.ts index 52aacbb592bc..bc00b0ba9f18 100644 --- a/code/frameworks/nextjs/src/portable-stories.ts +++ b/code/frameworks/nextjs/src/portable-stories.ts @@ -11,6 +11,7 @@ import type { Store_CSFExports, StoriesWithPartialProps, NamedOrDefaultProjectAnnotations, + ComposedStoryFn, } from 'storybook/internal/types'; // ! ATTENTION: This needs to be a relative import so it gets prebundled. This is to avoid ESM issues in Nextjs + Jest setups @@ -80,7 +81,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStoryFn> { return originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/renderers/react/src/docs/extractArgTypes.ts b/code/renderers/react/src/docs/extractArgTypes.ts index c7cac4c96a81..efa23a7df28c 100644 --- a/code/renderers/react/src/docs/extractArgTypes.ts +++ b/code/renderers/react/src/docs/extractArgTypes.ts @@ -2,7 +2,7 @@ import type { StrictArgTypes } from 'storybook/internal/types'; import type { PropDef, ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractProps } from './extractProps'; -export const extractArgTypes: ArgTypesExtractor = (component) => { +export const extractArgTypes: ArgTypesExtractor = (component): StrictArgTypes | null => { if (component) { const { rows } = extractProps(component); if (rows) { diff --git a/code/renderers/react/src/entry-preview-docs.ts b/code/renderers/react/src/entry-preview-docs.ts index 5bdcd7f2c40f..ad3146a94fe5 100644 --- a/code/renderers/react/src/entry-preview-docs.ts +++ b/code/renderers/react/src/entry-preview-docs.ts @@ -1,11 +1,20 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractComponentDescription, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { jsxDecorator } from './docs/jsxDecorator'; import type { ReactRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx index e562d68963d4..b8058deb4571 100644 --- a/code/renderers/react/src/portable-stories.tsx +++ b/code/renderers/react/src/portable-stories.tsx @@ -10,6 +10,7 @@ import type { Store_CSFExports, StoriesWithPartialProps, ProjectAnnotations, + ComposedStoryFn, } from 'storybook/internal/types'; import * as reactProjectAnnotations from './entry-preview'; @@ -85,7 +86,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStoryFn> { return originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/renderers/svelte/src/docs/extractArgTypes.ts b/code/renderers/svelte/src/docs/extractArgTypes.ts index a81539bd1b4b..aeb719884f93 100644 --- a/code/renderers/svelte/src/docs/extractArgTypes.ts +++ b/code/renderers/svelte/src/docs/extractArgTypes.ts @@ -17,7 +17,9 @@ function hasKeyword(keyword: string, keywords: JSDocKeyword[]): boolean { return keywords ? keywords.find((k) => k.name === keyword) != null : false; } -export const extractArgTypes: ArgTypesExtractor = (component: ComponentWithDocgen) => { +export const extractArgTypes: ArgTypesExtractor = ( + component: ComponentWithDocgen +): StrictArgTypes | null => { try { // eslint-disable-next-line no-underscore-dangle const docgen = component.__docgen; diff --git a/code/renderers/svelte/src/entry-preview-docs.ts b/code/renderers/svelte/src/entry-preview-docs.ts index fff20c3523ff..a1abf3504a53 100644 --- a/code/renderers/svelte/src/entry-preview-docs.ts +++ b/code/renderers/svelte/src/entry-preview-docs.ts @@ -1,11 +1,20 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { extractComponentDescription } from './docs/extractComponentDescription'; import { sourceDecorator } from './docs/sourceDecorator'; import type { SvelteRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/svelte/src/portable-stories.ts b/code/renderers/svelte/src/portable-stories.ts index 51c4ed0d6c82..a3c2e54336e2 100644 --- a/code/renderers/svelte/src/portable-stories.ts +++ b/code/renderers/svelte/src/portable-stories.ts @@ -103,7 +103,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStory { const composedStory = originalComposeStory( story as StoryAnnotationsOrFn, // @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial>' diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index 30fda1267c40..76c52cc755a7 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -13,7 +13,7 @@ type PropertyMetaSchema = VueDocgenInfoEntry<'vue-component-meta', 'props'>['sch // "exposed" is used by the vue-component-meta plugin while "expose" is used by vue-docgen-api const ARG_TYPE_SECTIONS = ['props', 'events', 'slots', 'exposed', 'expose'] as const; -export const extractArgTypes: ArgTypesExtractor = (component) => { +export const extractArgTypes: ArgTypesExtractor = (component): StrictArgTypes | null => { if (!hasDocgen>(component)) { return null; } diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts index 4965fc9356b7..66e848f2bc12 100644 --- a/code/renderers/vue3/src/entry-preview-docs.ts +++ b/code/renderers/vue3/src/entry-preview-docs.ts @@ -1,10 +1,19 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractComponentDescription, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { sourceDecorator } from './docs/sourceDecorator'; import type { VueRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/vue3/src/portable-stories.ts b/code/renderers/vue3/src/portable-stories.ts index 5965da3dd63b..7e1e64c6f458 100644 --- a/code/renderers/vue3/src/portable-stories.ts +++ b/code/renderers/vue3/src/portable-stories.ts @@ -10,6 +10,7 @@ import type { StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps, + ComposedStoryFn, } from 'storybook/internal/types'; import { TestingLibraryMustBeConfiguredError } from 'storybook/internal/preview-errors'; import { h } from 'vue'; @@ -91,7 +92,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): JSXAble>> { const composedStory = originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/renderers/web-components/src/entry-preview-docs.ts b/code/renderers/web-components/src/entry-preview-docs.ts index 489c91bbd2d3..c6c441644e4d 100644 --- a/code/renderers/web-components/src/entry-preview-docs.ts +++ b/code/renderers/web-components/src/entry-preview-docs.ts @@ -1,4 +1,4 @@ -import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesEnhancer, DecoratorFunction, InputType } from 'storybook/internal/types'; import { SourceType, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes, extractComponentDescription } from './docs/custom-elements'; import { sourceDecorator } from './docs/sourceDecorator'; @@ -6,7 +6,24 @@ import type { WebComponentsRenderer } from './types'; export const decorators: DecoratorFunction[] = [sourceDecorator]; -export const parameters = { +export const parameters: { + docs: { + extractArgTypes: (tagName: string) => + | { + [x: string]: InputType; + } + | null + | undefined; + extractComponentDescription: (tagName: string) => string | null | undefined; + story: { + inline: true; + }; + source: { + type: SourceType; + language: string; + }; + }; +} = { docs: { extractArgTypes, extractComponentDescription,