Types: Update type signatures of objects and functions

Our bundler tsup sometimes doesn't seem to create type definition imports properly for inferred types. Instead of importing types from `storybook/internal/*` or `@storybook/core/*`, it would import types from `core/dist/*`. Explicitly defining types for the return type of functions or for objects will resolve this issue.
storybookjs · Jul 10, 2024 · 8be78f2 · 8be78f2
1 parent 3b04c5b
commit 8be78f2
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 12 deletions.
diff --git 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<TArgs extends Args = Args>(
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<ReactRenderer>,
   exportsName?: string
-) {
+): ComposedStoryFn<ReactRenderer, Partial<TArgs>> {
   return originalComposeStory<ReactRenderer, TArgs>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,

diff --git 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
@@ -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
@@ -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<TArgs extends Args = Args>(
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<ReactRenderer>,
   exportsName?: string
-) {
+): ComposedStoryFn<ReactRenderer, Partial<TArgs>> {
   return originalComposeStory<ReactRenderer, TArgs>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,

diff --git 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
@@ -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
@@ -103,7 +103,7 @@ export function composeStory<TArgs extends Args = Args>(
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<SvelteRenderer>,
   exportsName?: string
-) {
+): ComposedStory<TArgs> {
   const composedStory = originalComposeStory<SvelteRenderer, TArgs>(
     story as StoryAnnotationsOrFn<SvelteRenderer, Args>,
     // @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial<Simplify<TArgs, {}>>'

diff --git 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<VueDocgenInfo<VueDocgenPlugin>>(component)) {
     return null;
   }

diff --git 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
@@ -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<TArgs extends Args = Args>(
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<VueRenderer>,
   exportsName?: string
-) {
+): JSXAble<ComposedStoryFn<VueRenderer, Partial<TArgs>>> {
   const composedStory = originalComposeStory<VueRenderer, TArgs>(
     story as StoryAnnotationsOrFn<VueRenderer, Args>,
     componentAnnotations,

diff --git a/code/renderers/web-components/src/entry-preview-docs.ts b/code/renderers/web-components/src/entry-preview-docs.ts
@@ -1,12 +1,29 @@
-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';
 import type { WebComponentsRenderer } from './types';
 
 export const decorators: DecoratorFunction<WebComponentsRenderer>[] = [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,