Storybook

Archibald ships a first-class Storybook integration through the @archibald/storybook package. It wires Storybook 10 (React + webpack 5 builder) into an Archibald project so that stories are compiled with the same build pipeline as the application instead of a separate, hand-maintained webpack config.

Why a wrapper package?

Storybook out of the box knows nothing about Archibald's file shadowing, SCSS theming, or app contexts. The integration closes that gap:

• Reuses the Archibald compiler setup. A Storybook preset injects the framework's loaders into Storybook's webpack config: the babel shadowing loader, the swc transform, the SCSS pipeline (including the shadowing importer), CSS modules, and SVGR — with the same options your archibald.json configures for the app build.
• Shadowing- and tenant-aware story discovery. Stories are not collected with a static glob. A custom loader scans the selected platform (falling back to the default platform) and drops base stories that are shadowed by a more specific override — mirroring how the app build resolves files.
• App context for stories. The exported StorybookProvider wraps stories in the same providers used for unit tests (data client, app client, translations, in-memory router), so components that rely on hooks like translations or routing render without extra boilerplate.
• One command. archibald storybook prompts for environment, tenant, platform, and mode — the same dimensions as archibald serve — and starts or builds Storybook accordingly.

In this section

• Getting started — installation, the .storybook/ folder, running and building Storybook.
• Writing stories — where stories live, how they are discovered, using StorybookProvider, styling.
• How it works — the CLI command, the preset, the story loader, the style pipeline, and the cli.storybook config schema.

info

@archibald/storybook is included in every project generated from the basic or shop template. Existing projects can add it with archibald add by selecting the storybook function.