CODEWITHSUNDEEP
typescriptstorybook
Jonathan Tuzman
Jonathan Tuzman

Reputation: 13289

Typescript support in CSF3

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,
};

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'.

Upvotes: 4

Views: 1792

Answers (2)

cruise_lab
cruise_lab

Reputation: 649

Maybe a little late, but I also had a bunch of difficulties with this one. The answer by Dzianis Roi did not work for me.

This was what worked for me

import { StoryObj } from '@storybook/react';

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

This is the source code that made me realize thats how it works enter image description here

Upvotes: 3

Dzianis Roi
Dzianis Roi

Reputation: 925

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

Storybook source code with multiple story type definitions

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

Upvotes: 6

Related Questions