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

Changelog

7.0.0-beta.44 (February 7, 2023)

Features

• Feature: Add woff2 support for builder-manager #20962
• Feature: Add super early node version check #20964
• Csf-tools: Add satisfies support to ConfigFile #20936

Bug Fixes

• Angular: Fix changeDetectorRef should be defined #20984
• Angular: Fix standalone components to be included in the imports array #20983
• CLI: Fix Introduction MDX for Next.js and Typescript #20798
• CLI: Fix detection of JS projects with type checking #20944
• UI: Fix fonts missing/warnings #20957
• Core: Undo AST main.js check in validateConfigFile #20952
• Csf-tools: Fix error handling for storySort variable references #20930

Maintenance

• Core: Fix missing dependency for core-server #20989
• CLI: Add a default background to newly initialized storybooks #20982
• Svelte/Vite: Remove svelte-options #20942
• Vite: Correctly preserve existing vite envPrefix config #20918

Dependencies

• Deps: Upgrade glob-promise #20959
• Deps: Update glob for storyshots #20954

Build

• Build: upgrade yarn #20986
• Build: add more sandboxes to CI tests #20892