What Type is Storybook Story From Example

Question

I have used some code from the example on storybook website, specifically:

export const Primary = Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>]

However, even though this is the typescript example, it does not specify a type for Story and my linter will not pass unless it has a type. What type should I use for Story?

Story: any

also will not pass.

Reference: https://storybook.js.org/docs/react/writing-stories/decorators

Answer 1

With the new story format (CSF 3) the types have been updated :

• the Story type is deprecated
• the correct type is now StoryFn

The decorator correct typed signature is :

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

export const decorators = [(Story: StoryFn) => <div style={{ margin: '3em' }}><Story/></div>]