-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19603 from storybookjs/future/CSF3-vue2
Vue2: Improve CSF3 types
- Loading branch information
Showing
12 changed files
with
328 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <template> | ||
| <button type="button" class="classes" @click="onClick" :disabled="disabled">{{ label }}</button> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import Vue from 'vue'; | ||
| import './button.css'; | ||
| export default Vue.extend({ | ||
| name: 'my-button', | ||
| props: { | ||
| label: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| disabled: { | ||
| type: Boolean, | ||
| default: false, | ||
| }, | ||
| }, | ||
| methods: { | ||
| onClick(): void { | ||
| this.$emit('onClick'); | ||
| }, | ||
| }, | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| import { satisfies } from '@storybook/core-common'; | ||
| import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf'; | ||
| import { expectTypeOf } from 'expect-type'; | ||
| import { SetOptional } from 'type-fest'; | ||
| import { Component } from 'vue'; | ||
| import { ExtendedVue, Vue } from 'vue/types/vue'; | ||
| import { DecoratorFn, Meta, StoryObj } from './public-types'; | ||
| import Button from './__tests__/Button.vue'; | ||
| import { VueFramework } from './types'; | ||
|
|
||
| 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< | ||
| VueFramework, | ||
| { | ||
| disabled: boolean; | ||
| label: string; | ||
| } | ||
| > | ||
| >(); | ||
| }); | ||
|
|
||
| test('Generic parameter of Meta can be the props of the component', () => { | ||
| const meta: Meta<{ disabled: boolean; label: string }> = { | ||
| component: Button, | ||
| args: { label: 'good', disabled: false }, | ||
| }; | ||
|
|
||
| expectTypeOf(meta).toEqualTypeOf< | ||
| ComponentAnnotations<VueFramework, { disabled: boolean; label: string }> | ||
| >(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('StoryObj', () => { | ||
| type ButtonProps = { | ||
| disabled: boolean; | ||
| label: string; | ||
| }; | ||
|
|
||
| test('✅ Required args may be provided partial in meta and the story', () => { | ||
| const meta = satisfies<Meta<typeof Button>>()({ | ||
| component: Button, | ||
| args: { label: 'good' }, | ||
| }); | ||
|
|
||
| type Actual = StoryObj<typeof meta>; | ||
| type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>; | ||
| expectTypeOf<Actual>().toEqualTypeOf<Expected>(); | ||
| }); | ||
|
|
||
| test('❌ The combined shape of meta args and story args must match the required args.', () => { | ||
| { | ||
| const meta = satisfies<Meta<typeof Button>>()({ component: Button }); | ||
|
|
||
| type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>; | ||
| expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>(); | ||
| } | ||
| { | ||
| const meta = satisfies<Meta<typeof Button>>()({ | ||
| component: Button, | ||
| args: { label: 'good' }, | ||
| }); | ||
| // @ts-expect-error disabled not provided ❌ | ||
| const Basic: StoryObj<typeof meta> = {}; | ||
|
|
||
| type Expected = StoryAnnotations< | ||
| VueFramework, | ||
| ButtonProps, | ||
| SetOptional<ButtonProps, 'label'> | ||
| >; | ||
| expectTypeOf(Basic).toEqualTypeOf<Expected>(); | ||
| } | ||
| { | ||
| const meta = satisfies<Meta<{ label: string; disabled: boolean }>>()({ component: Button }); | ||
| const Basic: StoryObj<typeof meta> = { | ||
| // @ts-expect-error disabled not provided ❌ | ||
| args: { label: 'good' }, | ||
| }; | ||
|
|
||
| type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>; | ||
| expectTypeOf(Basic).toEqualTypeOf<Expected>(); | ||
| } | ||
| }); | ||
|
|
||
| test('Component can be used as generic parameter for StoryObj', () => { | ||
| expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf< | ||
| StoryAnnotations<VueFramework, ButtonProps> | ||
| >(); | ||
| }); | ||
| }); | ||
|
|
||
| type ThemeData = 'light' | 'dark'; | ||
|
|
||
| type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P> | ||
| ? P | ||
| : C extends Component<infer P> | ||
| ? P | ||
| : unknown; | ||
|
|
||
| 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 }; | ||
|
|
||
| const meta = satisfies<Meta<Props>>()({ | ||
| component: Button, | ||
| args: { disabled: false }, | ||
| render: (args) => | ||
| Vue.extend({ | ||
| components: { Button }, | ||
| template: `<div>Using the theme: ${args.theme}<Button v-bind="$props"/></div>`, | ||
| props: Object.keys(args), | ||
| }), | ||
| }); | ||
|
|
||
| const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } }; | ||
|
|
||
| type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>; | ||
| expectTypeOf(Basic).toEqualTypeOf<Expected>(); | ||
| }); | ||
|
|
||
| const withDecorator: DecoratorFn<{ decoratorArg: string }> = ( | ||
| storyFn, | ||
| { args: { decoratorArg } } | ||
| ) => | ||
| Vue.extend({ | ||
| components: { Story: storyFn() }, | ||
| template: `<div>Decorator: ${decoratorArg}<Story/></div>`, | ||
| }); | ||
|
|
||
| test('Correct args are inferred when type is widened for decorators', () => { | ||
| type Props = ComponentProps<typeof Button> & { decoratorArg: string }; | ||
|
|
||
| const meta = satisfies<Meta<Props>>()({ | ||
| component: Button, | ||
| args: { disabled: false }, | ||
| decorators: [withDecorator], | ||
| }); | ||
|
|
||
| const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } }; | ||
|
|
||
| type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>; | ||
| expectTypeOf(Basic).toEqualTypeOf<Expected>(); | ||
| }); | ||
|
|
||
| test('Correct args are inferred when type is widened for multiple decorators', () => { | ||
| type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string }; | ||
|
|
||
| const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = ( | ||
| storyFn, | ||
| { args: { decoratorArg2 } } | ||
| ) => { | ||
| return Vue.extend({ | ||
| components: { Story: storyFn() }, | ||
| template: `<div>Decorator: ${decoratorArg2}<Story/></div>`, | ||
| }); | ||
| }; | ||
|
|
||
| const meta = satisfies<Meta<Props>>()({ | ||
| component: Button, | ||
| args: { disabled: false }, | ||
| decorators: [withDecorator, secondDecorator], | ||
| }); | ||
|
|
||
| const Basic: StoryObj<typeof meta> = { | ||
| args: { decoratorArg: '', decoratorArg2: '', label: 'good' }, | ||
| }; | ||
|
|
||
| type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>; | ||
| expectTypeOf(Basic).toEqualTypeOf<Expected>(); | ||
| }); | ||
| }); |
Oops, something went wrong.