It would be nice if there was an exported interface for the CSF metadata (default export). Consider the following:

TS in strict mode will error if types for the decorators are not provided Parameter 'storyFn' implicitly has an 'any' type.

export default {
  component: Event,
  title: 'Event',
  decorators: [
    storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
  ],
};

Adding a StoryMetadata interface to handle the typings solves the issue. Being able to import a proper StoryMetadata interface directly from the library would be very nice IMHO. Also fully possible that I'm completely missing something here... :)

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

type DecoratorFunction = Parameters<typeof addDecorator>[0];

export interface StoryMetadata {
  component: React.ReactNode;
  title: string;
  decorators?: DecoratorFunction[];
}

// Alt 1:
const metadata: StoryMetadata = {
  component: Event,
  title: 'Event',
  decorators: [
    storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
  ],
};

export default metadata;

// Alt 2:
export default {
  component: Event,
  title: 'Event',
  decorators: [
    storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
  ],
} as StoryMetadata;

CSF: Add typescript typings #7677

Description

shilmanopenedon Aug 5, 2019

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

shilman
openedon Aug 5, 2019