Typescript support in CSF3

Question

I'm writing Stories using CSF3, and I want to properly annotate my stories. I've Googled and it's basically impossible to find an answer. I've tried some of the techniques here and nothing quite worked. I found something in the storybook website about Meta and ComponentMeta or ComponentStory or something, but I can't find it anymore.

So hopefully someone here can point me to an "easy" actionable answer.

For reference, here's some simple stories where I've tried annotations that don't work.

export default { component: DataPresentation } as Meta;

// The simplest version of DataPresentation can simply take DataTable's props plus a tableId
const Default: ComponentStory<typeof DataPresentation> = {
  args: {
    ...DataTableStories.Default.args,
    tableId: "players"
  },
};

const NoFiltering: ComponentStory<typeof DataPresentation> = {
  storyName: 'No search/filter args',
  ...Default,
};

• Default has an error on args which appears to relate to the component props (and might be a "valid" TS error by which I mean a problem with my type relationships and not a storybook quirk)
• There's an error on NoFiltering itself (as opposed to on its args), which I imagine means I'm simply using the wrong type, and that I don't know what I'm doing, which is the point of asking this question.

Type '{ decorators?: DecoratorFunction<ReactFramework, Args>[] | undefined; parameters?: Parameters | undefined; args?: Partial<Props> | undefined; ... 6 more ...; story?: Omit<...> | undefined; }' provides no match for the signature '(args: Props, context: StoryContext<ReactFramework, Props>): StoryFnReactReturnType'.

Answer 1

There is no documentation describing how to use CSF3 and especially how to use it with TypeScript.

After some investigation of their source code (storybook version 6.5.9), I discovered that they have ComponentStoryObj type declared for CSF3 format

So, to make your code sample work, you need to replace the ComponentStory type with the ComponentStoryObj type

const Default: ComponentStoryObj<typeof DataPresentation> = {
  // ...
};

const NoFiltering: ComponentStoryObj<typeof DataPresentation> = {
  // ...
};

Here is one of the examples I found in their repo - example