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

You can tell what sort of properties we require from Story based on how we use it. We are expecting that it is something that can be called via JSX with no arguments and return an element. So you could use (Story: React.FC) and that would work.

---

As shown in this example, you can import the type Meta from @storybook/react and use that as the type for Primary.

import { Meta } from "@storybook/react";

const Primary: Meta = {
  title: "MyStory",
  decorators: [
    (Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};

They type for Story here is inferred as () => StoryFnReactReturnType.

---

You could also import the type for Story:

import { Story } from "@storybook/react";

export default {
  title: "MyStory",
  decorators: [
    (Story: Story) => (
      <div style={{ margin: "3em" }}>
        <Story />
      </div>
    )
  ]
};