Add type definitions for supported frameworks

[jonniebigodes]

While working on a recent documentation change it was brought to my attention that Storybook for React includes the necessary types to set up and extend Storybook configuration with TypeScript. If a React developer changes main.js to main.ts he's able to configure his/her Storybook as follows:

// .storybook/main.ts
import { StorybookConfig } from "@storybook/react/types"

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions',
  ],
  // Other existing configuration
};
module.exports = config;

But for instance, if either a Svelte, Vue/Vue 3 or Angular developer tries the same approach by updating the import from React to his/her framework the StorybookConfig type is not actually available. The only way to properly configure it is to update the import and use @storybook/core-common which is not actually recommended and we shouldn't promote its usage as it can lead to more issues than it actually solves as it can mutate at a moment's notice and begin breaking user's Storybooks and also preventing them from using certain configurations related to the framework.

What needs to happen

• If and when possible export the types similar to React.
• Update the snippet used in this page to reflect the changes.

@yannbf and @shilman if both of you could follow up with me on this I'd appreciate it.

Thanks in advance.

[zhixuan-loh]

Hi. I come from Vue 3 and I face a similar problem. My project requires coding in Typescript so I try to code everything in TS, including my tests and stories.

From the examples given in the tutorial, when I try to change the file extension from myComponent.stories.js to myComponent.stories.ts and run my jest tests, the tests errors out with all the Typescript type checking errors like args is implicitly of type: any. Meanwhile, Storybook page can run without issues(npm run storybook). I wish to clarify if we are actually looking at the same issue.

I also wish to know if there is officially no type definition support for Vue yet, so that I can move on. For a start, I can't find any stories written in Typescript in their Vue tutorials so I'd guess that there isn't but I'd appreciate if I can get confirmation.

[IanVS]

This is complicated further by the vite-builder, which also exports a config.

https://github.com/storybookjs/builder-vite#typescript

Users would need to combine this together with the StorybookConfig type from their framework.