Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tobiasdiez opened this issue May 14, 2022 · 2 comments
Open

Comments

@tobiasdiez
Copy link
Contributor

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
Copy link
Contributor

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 AriPerkkio mentioned this issue Dec 1, 2023
8 tasks
@shilman shilman added csf and removed needs triage labels Dec 25, 2023
@shilman shilman added this to the 8.x csf4 milestone Dec 25, 2023
@AriPerkkio
Copy link
Contributor

There's now RFC for this: #25319

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants