storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.24k stars 9.26k forks source link

Add helper methods defineStory and defineMeta to enhance typescript support #18228

Open tobiasdiez opened 2 years ago

tobiasdiez commented 2 years ago

Is your feature request related to a problem? Please describe The existing solution to get typing information is hard to write and gives suboptimal auto-completion support by the IDE.

Describe the solution you'd like Add the following identity methods

export function defineMeta(meta: Meta): Meta {
  return meta
}

export function defineStory(story: StoryObj): StoryObj {
  return story
}

With these methods, one could define

export default defineMeta({
  component: TInput,
  title: 't-input',
  args: {
    value: 'Input text',
  },
})

export const Default = defineStory({})

instead of

export default {
  component: TInput,
  title: 't-input',
  args: {
    value: 'Input text',
  },
} as Meta

export const Default: StoryObj = {}

Describe alternatives you've considered Continue using existing explicit type annotations.

Are you able to assist to bring the feature to reality? yes, I can provide a PR introducing these methods.

Additional context This is similar to Vue's defineComponent function whose reason for existence is also only to enhance typescript support, see https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#global-api-mapping for a description why it has been added. See https://github.com/vuejs/core/blob/2a9e9a40963a852238adc4c61b86d0c48e7131fa/packages/runtime-core/src/apiDefineComponent.ts#L86-L89 for details.

AriPerkkio commented 10 months ago

This would be useful helper. Currently I've had to use the satisfies keyword to achieve typings for default exported meta:

import {type Meta} from '@storybook/react';

export default {
    title: 'Button',
    component: Button,
} satisfies Meta;

As the React based stories are written in TSX I cannot use the export default <Meta>{ title: 'Button'... syntax.

AriPerkkio commented 9 months ago

There's now RFC for this: https://github.com/storybookjs/storybook/discussions/25319