@storybook/types

What is @storybook/types?

The @storybook/types package provides TypeScript definitions and utility types for Storybook, a popular tool for developing UI components in isolation. It facilitates type checking and development within the Storybook ecosystem, ensuring that components and their stories adhere to expected types.

What are @storybook/types's main functionalities?

Storybook Component Types

Defines types for Storybook stories, ensuring that the stories and their configurations adhere to the correct structure and types.

import { Story, Meta } from '@storybook/types';

export default {
  title: 'Button',
  component: Button
} as Meta;

export const Primary: Story = (args) => <Button {...args} />;
Primary.args = {
  primary: true,
  label: 'Click Me'
};

Addon Development

Provides types for developing Storybook addons, helping developers to integrate additional functionality into Storybook with type safety.

import { Addon } from '@storybook/types';

const myAddon: Addon = {
  title: 'My Custom Addon',
  type: 'panel',
  render: ({ active, key }) => (active ? <div id={key}>Addon Content</div> : null)
};

Other packages similar to @storybook/types

@types/storybook__react

Provides TypeScript definitions specifically for Storybook for React. It is similar to @storybook/types but focuses exclusively on React, whereas @storybook/types is more general and can be used with various frameworks.

@storybook/addons

While not exclusively a types package, it includes types and functions for developing Storybook addons. It compares to @storybook/types by also facilitating addon development but includes more comprehensive tools and utilities beyond type definitions.

README

Storybook Types

Storybook types exports only typescript types for storybook usage.

It exports typescript enums, which do have a runtime implementation. But it should not export any implementation such as classes, method, function or constants.

It also has no dependencies, all the types it exports are bundled in.