Release: Patch 8.2.1

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.2.1
+
+- CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen!
+- Types: Update type signatures of objects and functions - [#28503](https://github.com/storybookjs/storybook/pull/28503), thanks @valentinpalkovic!
+
 ## 8.2.0
 
 Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:

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,

code/package.json

@@ -278,5 +278,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.2.1"
 }

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) {

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,

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,

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;

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,

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, {}>>'

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;
   }

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,

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,

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,

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"8.2.0","info":{"plain":""}}
+{"version":"8.2.1","info":{"plain":"- CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen!\n- Types: Update type signatures of objects and functions - [#28503](https://github.com/storybookjs/storybook/pull/28503), thanks @valentinpalkovic!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.2.0-beta.3","info":{"plain":"- Addon Controls: Fix saving on Windows - [#28485](https://github.com/storybookjs/storybook/pull/28485), thanks @ghengeveld!\n- React: Export ButtonProps and HeaderProps in CLI templates - [#28487](https://github.com/storybookjs/storybook/pull/28487), thanks @valentinpalkovic!"}}
+{"version":"8.3.0-alpha.0","info":{"plain":""}}

scripts/prepare/addon-bundle.ts

@@ -10,6 +10,7 @@ import { exec } from '../utils/exec';
 
 import { globalPackages as globalPreviewPackages } from '../../code/core/src/preview/globals/globals';
 import { globalPackages as globalManagerPackages } from '../../code/core/src/manager/globals/globals';
+import { glob } from 'glob';
 
 /* TYPES */
 
@@ -62,8 +63,9 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
   const tasks: Promise<any>[] = [];
 
+  const outDir = join(process.cwd(), 'dist');
   const commonOptions: Options = {
-    outDir: join(process.cwd(), 'dist'),
+    outDir,
     silent: true,
     treeshake: true,
     shims: false,
@@ -190,6 +192,17 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
   await Promise.all(tasks);
 
+  const dtsFiles = await glob(outDir + '/**/*.d.ts');
+  await Promise.all(
+    dtsFiles.map(async (file) => {
+      const content = await fs.readFile(file, 'utf-8');
+      await fs.writeFile(
+        file,
+        content.replace(/from \'core\/dist\/(.*)\'/g, `from 'storybook/internal/$1'`)
+      );
+    })
+  );
+
   if (post) {
     await exec(`bun ${post}`, { cwd }, { debug: true });
   }

scripts/prepare/bundle.ts

@@ -7,6 +7,7 @@ import aliasPlugin from 'esbuild-plugin-alias';
 import { dedent } from 'ts-dedent';
 import slash from 'slash';
 import { exec } from '../utils/exec';
+import { glob } from 'glob';
 
 /* TYPES */
 
@@ -147,6 +148,17 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
   await Promise.all(tasks);
 
+  const dtsFiles = await glob(outDir + '/**/*.d.ts');
+  await Promise.all(
+    dtsFiles.map(async (file) => {
+      const content = await fs.readFile(file, 'utf-8');
+      await fs.writeFile(
+        file,
+        content.replace(/from \'core\/dist\/(.*)\'/g, `from 'storybook/internal/$1'`)
+      );
+    })
+  );
+
   if (post) {
     await exec(`bun ${post}`, { cwd }, { debug: true });
   }