Merge pull request #22818 from storybookjs/main-prerelease

Merge pull request #22539 from storybookjs/api-reference-main-config

.circleci/config.yml

@@ -690,6 +690,7 @@ workflows:
     when:
       equal: [daily, << pipeline.parameters.workflow >>]
     jobs:
+      - pretty-docs
       - build
       - lint:
           requires:
@@ -700,6 +701,12 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - script-unit-tests:
+          requires:
+            - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
       - create-sandboxes:
           parallelism: 31
           requires:

CHANGELOG.md

@@ -1,3 +1,17 @@
+## 7.0.18 (May 26, 2023)
+
+#### Bug Fixes
+
+-   Vue3: Fix TS 5.0 compat with vue-component-type-helpers [#22814](https://github.com/storybooks/storybook/pull/22814)
+-   Vue3: Fix reactive args updates in decorators [#22717](https://github.com/storybooks/storybook/pull/22717)
+-   Vue3: Revert v7 breaking change, restore reactive v6-compat API [#22692](https://github.com/storybooks/storybook/pull/22692)
+
+#### Build
+
+-   Build: Add more checks to ci:daily workflow [#22815](https://github.com/storybooks/storybook/pull/22815)
+-   Build: Fix Nextjs E2E tests [#22816](https://github.com/storybooks/storybook/pull/22816)
+-   Build: Bring back new Vue3 tests to main [#22685](https://github.com/storybooks/storybook/pull/22685)
+
 ## 7.0.17 (May 24, 2023)
 
 #### Bug Fixes

code/renderers/vue3/package.json

@@ -54,7 +54,8 @@
     "@storybook/preview-api": "7.0.17",
     "@storybook/types": "7.0.17",
     "ts-dedent": "^2.0.0",
-    "type-fest": "2.19.0"
+    "type-fest": "2.19.0",
+    "vue-component-type-helpers": "^1.6.5"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",

code/renderers/vue3/src/public-types.test.ts

@@ -3,32 +3,23 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types';
 import { expectTypeOf } from 'expect-type';
 import type { SetOptional } from 'type-fest';
 import { h } from 'vue';
-import type { ComponentOptions, FunctionalComponent, VNodeChild } from 'vue';
-import type { Decorator, Meta, StoryObj } from './public-types';
+import type { ComponentPropsAndSlots, Decorator, Meta, StoryObj } from './public-types';
 import type { VueRenderer } from './types';
 import BaseLayout from './__tests__/BaseLayout.vue';
 import Button from './__tests__/Button.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
 
+type ButtonProps = ComponentPropsAndSlots<typeof Button>;
+
 describe('Meta', () => {
   test('Generic parameter of Meta can be a component', () => {
     const meta: Meta<typeof Button> = {
       component: Button,
       args: { label: 'good', disabled: false },
     };
 
-    expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<
-        VueRenderer,
-        {
-          readonly disabled: boolean;
-          readonly label: string;
-          onMyChangeEvent?: (id: number) => any;
-          onMyClickEvent?: (id: number) => any;
-        }
-      >
-    >();
+    expectTypeOf(meta).toEqualTypeOf<ComponentAnnotations<VueRenderer, ButtonProps>>();
   });
 
   test('Generic parameter of Meta can be the props of the component', () => {
@@ -66,13 +57,6 @@ describe('Meta', () => {
 });
 
 describe('StoryObj', () => {
-  type ButtonProps = {
-    readonly disabled: boolean;
-    readonly label: string;
-    onMyChangeEvent?: ((id: number) => any) | undefined;
-    onMyClickEvent?: ((id: number) => any) | undefined;
-  };
-
   test('✅ Required args may be provided partial in meta and the story', () => {
     const meta = satisfies<Meta<typeof Button>>()({
       component: Button,
@@ -123,15 +107,9 @@ describe('StoryObj', () => {
 
 type ThemeData = 'light' | 'dark';
 
-type ComponentProps<Component> = Component extends ComponentOptions<infer P>
-  ? P
-  : Component extends FunctionalComponent<infer P>
-  ? P
-  : never;
-
 describe('Story args can be inferred', () => {
   test('Correct args are inferred when type is widened for render function', () => {
-    type Props = ComponentProps<typeof Button> & { theme: ThemeData };
+    type Props = ButtonProps & { theme: ThemeData };
 
     const meta = satisfies<Meta<Props>>()({
       component: Button,
@@ -153,7 +131,7 @@ describe('Story args can be inferred', () => {
   ) => h(DecoratorTsVue, { decoratorArg }, h(storyFn()));
 
   test('Correct args are inferred when type is widened for decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string };
+    type Props = ButtonProps & { decoratorArg: string };
 
     const meta = satisfies<Meta<Props>>()({
       component: Button,
@@ -168,7 +146,10 @@ describe('Story args can be inferred', () => {
   });
 
   test('Correct args are inferred when type is widened for multiple decorators', () => {
-    type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
+    type Props = ButtonProps & {
+      decoratorArg: string;
+      decoratorArg2: string;
+    };
 
     const secondDecorator: Decorator<{ decoratorArg2: string }> = (
       storyFn,
@@ -208,12 +189,7 @@ test('Infer type of slots', () => {
     },
   };
 
-  type Props = {
-    readonly otherProp: boolean;
-    header?: ((headerProps: { title: string }) => any) | VNodeChild;
-    default?: ((defaultProps: {}) => any) | VNodeChild;
-    footer?: ((footerProps: {}) => any) | VNodeChild;
-  };
+  type Props = ComponentPropsAndSlots<typeof BaseLayout>;
 
   type Expected = StoryAnnotations<VueRenderer, Props, Props>;
   expectTypeOf(Basic).toEqualTypeOf<Expected>();

code/renderers/vue3/src/public-types.ts

@@ -6,13 +6,14 @@ import type {
   ComponentAnnotations,
   DecoratorFunction,
   LoaderFunction,
+  ProjectAnnotations,
   StoryAnnotations,
   StoryContext as GenericStoryContext,
   StrictArgs,
-  ProjectAnnotations,
 } from '@storybook/types';
-import type { SetOptional, Simplify, RemoveIndexSignature } from 'type-fest';
-import type { ComponentOptions, ConcreteComponent, FunctionalComponent, VNodeChild } from 'vue';
+import type { Constructor, RemoveIndexSignature, SetOptional, Simplify } from 'type-fest';
+import type { FunctionalComponent, VNodeChild } from 'vue';
+import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers';
 import type { VueRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
@@ -49,7 +50,7 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
+      ComponentPropsAndSlots<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
         VueRenderer,
@@ -59,24 +60,18 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
     : never
   : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
-type ExtractSlots<C> = C extends new (...args: any[]) => { $slots: infer T }
-  ? AllowNonFunctionSlots<Partial<RemoveIndexSignature<T>>>
-  : unknown;
+type ExtractSlots<C> = AllowNonFunctionSlots<Partial<RemoveIndexSignature<ComponentSlots<C>>>>;
 
 type AllowNonFunctionSlots<Slots> = {
   [K in keyof Slots]: Slots[K] | VNodeChild;
 };
 
-export type ComponentProps<C> = C extends ComponentOptions<infer P>
-  ? P & ExtractSlots<C>
-  : C extends FunctionalComponent<infer P>
-  ? P
-  : unknown;
+export type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
 
-type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any>
-  ? unknown extends ComponentProps<TCmpOrArgs>
-    ? TCmpOrArgs
-    : ComponentProps<TCmpOrArgs>
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
+  ? ComponentPropsAndSlots<TCmpOrArgs>
+  : TCmpOrArgs extends FunctionalComponent<any>
+  ? ComponentPropsAndSlots<TCmpOrArgs>
   : TCmpOrArgs;
 
 /**

code/yarn.lock

@@ -7286,6 +7286,7 @@ __metadata:
     type-fest: 2.19.0
     typescript: ~4.9.3
     vue: ^3.2.47
+    vue-component-type-helpers: ^1.6.5
     vue-tsc: ^1.2.0
   peerDependencies:
     vue: ^3.0.0
@@ -30774,6 +30775,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:^1.6.5":
+  version: 1.7.8
+  resolution: "vue-component-type-helpers@npm:1.7.8"
+  checksum: 82560704241cad12858e197593b18398bfd43c0319b93f0102723975b392a6319bcd9a5912859ebef0a26965d2301836252713af7e0cfe71a0312237ad64ca16
+  languageName: node
+  linkType: hard
+
 "vue-docgen-api@npm:^4.40.0, vue-docgen-api@npm:^4.44.23, vue-docgen-api@npm:^4.46.0":
   version: 4.64.1
   resolution: "vue-docgen-api@npm:4.64.1"

docs/api/doc-block-icongallery.md

@@ -75,14 +75,14 @@ import { IconItem } from '@storybook/blocks';
 
 `IconItem` is configured with the following props:
 
-### `children`
-
-Type: `React.ReactNode`
-
-Provides the icon to be displayed.
-
 ### `name` (required)
 
 Type: `string`
 
 Sets the name of the icon.
+
+### `children`
+
+Type: `React.ReactNode`
+
+Provides the icon to be displayed.

docs/api/main-config-addons.md

@@ -0,0 +1,22 @@
+---
+title: 'addons'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(string | { name: string; options?: AddonOptions })[]`
+
+Registers the [addons](../addons/install-addons.md) loaded by Storybook.
+
+For each addon's available options, see their respective [documentation](https://storybook.js.org/integrations).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-addons.js.mdx',
+    'common/main-config-addons.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

docs/api/main-config-babel-default.md

@@ -0,0 +1,35 @@
+---
+title: 'babelDefault'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
+
+`babelDefault` allows customization of Storybook's [Babel](https://babeljs.io/) setup. It is applied to the preview config before any user presets have been applied, which makes it useful and recommended for [addon authors](../addons/writing-presets.md#babel) so that the end user's [`babel`](./main-config-babel.md) setup can override it.
+
+<div class="aside">
+
+💡 To adjust your Storybook's Babel setup directly—not via an addon—use [`babel`](./main-config-babel.md) instead.
+
+</div>
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-babel-configuration-example.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `Babel.Config`
+
+See [Babel docs](https://babeljs.io/docs/options).
+
+## `Options`
+
+Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
+
+There are other options that are difficult to document here. Please introspect the type definition for more information.

docs/api/main-config-babel.md

@@ -0,0 +1,36 @@
+---
+title: 'babel'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
+
+Customize Storybook's [Babel](https://babeljs.io/) setup.
+
+<div class="aside">
+
+💡 [Addon authors](../addons/writing-presets.md#babel) should use [`babelDefault`](./main-config-babel-default.md) instead, which is applied to the preview config before any user presets have been applied.
+
+</div>
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/main-config-babel.js.mdx',
+    'common/main-config-babel.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `Babel.Config`
+
+See [Babel docs](https://babeljs.io/docs/options).
+
+## `Options`
+
+Type: `{ configType?: 'DEVELOPMENT' | 'PRODUCTION' }`
+
+There are other options that are difficult to document here. Please introspect the type definition for more information.

docs/api/main-config-config.md

@@ -0,0 +1,11 @@
+---
+title: 'config'
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `string[] | ((config: string[], options: Options) => string[] | Promise<string[]>)`
+
+Deprecated: `true`
+
+Add additional scripts to run in the story preview. Deprecated in favor of [`previewAnnotations`](./main-config-preview-annotations.md).