Storybook

The core-server package provides the shared Node.js-side functionality used across all Storybook frameworks (including React, React Native, Vue 3, Ember, and Angular). It manages the orchestration of the Storybook environment, including CLI operations, the development server, and the static build process.

Key responsibilities include:

• CLI Argument Parsing: Handling command-line inputs for Storybook commands.
• Manager Configuration: Providing Webpack configurations for the Storybook UI (the "manager").
• Dev Server: Powering the storybook dev command.
• Static Builder: Powering the storybook build command.
• Presets Handling: Managing configuration presets used to extend Storybook functionality.

Open Service is a schema-driven service system used for Storybook internals. It allows developers to define stateful services using a declarative object structure.

Key features include:

• Declarative State: Define services in a single object.
• Strong Typing: Expose synchronous queries and asynchronous commands with strong TypeScript inference.
• Schema Validation: All query and command inputs/outputs are validated using Standard Schema (supporting transformation and coercion).
• Reactive Subscriptions: Supports fine-grained reactive query subscriptions via deep signals (deepsignal and @preact/signals-core).
• Static Snapshots: Supports server-side static state snapshots driven by query load hooks.

Storybook CSF Tools is an experimental library designed for programmatic interaction with Component Story Format (CSF) files. It allows developers to automate the lifecycle of story files through three primary capabilities:

1. Read: Parses CSF files using Babel to generate an Abstract Syntax Tree (AST).
2. Analyze: Extracts metadata and story definitions by traversing the Babel AST.
3. Write: Serializes the modified AST back into a physical file.

Additionally, the library supports parsing MDX files and converting them into CSF format.

Storybook 5 (SB5) introduced a significant overhaul of the user interface and underlying architecture. Key improvements include:

• Redesigned Navigation Sidebar: A new way to browse stories.
• New Canvas Toolbar: Enhanced controls for the story preview area.
• Customizable Keyboard Shortcuts: Improved developer workflow via hotkeys.
• Improved Search: Faster and more intuitive story discovery.
• Expanded Addon API: More power for developers building custom addons.
• New URL Structure: Changes to how stories are addressed via the browser URL.
• Version Update Notifications: In-app alerts for new releases.

Storybook 6.2.0-beta.0 introduced several major improvements:

• Vue 3: Official support for the latest version of Vue.
• Webpack 5: Experimental support for the latest version of Webpack.
• Controls: Improvements including URL sync, filtering, sorting, and a new JSON tree editor for Object/Array Type args.
• Angular: Overhauled Angular support.
• Svelte: Overhauled Svelte support.

Storybook Docs Utils is a shared utility library used by various Storybook framework packages to implement documentation features. It provides standardized logic for common documentation tasks, ensuring consistency across different framework integrations.

Key capabilities include:

• ArgType extraction: Extracting metadata about component arguments/props.
• Dynamic snippet generation: Generating code snippets dynamically for documentation.
• Context detection: Determining whether the user is currently interacting with the docs tab or the controls tab.

Storybook provides several sub-exports to access its internal APIs depending on where your code is running (the Manager iframe or the Preview iframe) or what you are building (addons or types).

Addon Development

• storybook/components: A collection of components designed for building addons. Using these ensures your addon has a consistent look and feel with the rest of Storybook.
• storybook/theming: Utility functions to help your components automatically adapt to the current Storybook theme.

Runtime APIs

• storybook/preview-api: The API available inside the preview iframe (where your components are rendered).
• storybook/manager-api: The API available inside the manager iframe (the Storybook UI itself).

Type Definitions

• storybook/types: TypeScript interfaces used throughout Storybook, including configurations and addon definitions.