Skip to main content

Storybook

The @archibald/storybook package wires Storybook into Archibald projects: a builder preset that makes Storybook compile stories by the same rules as the app (theming/shadowing resolution, aliases, CSS modules), and a StorybookProvider that boots a mocked Archibald environment (DataClient, SystemManager state) around your stories.

How to use​

Add the preset to your Storybook main file:

// .storybook/main.ts
module.exports = {
    addons: [
        '@archibald/storybook/preset'
        // ...
    ]
};

Wrap stories (or use a global decorator) with the provider:

import { StorybookProvider } from '@archibald/storybook';

export const MyStory = {
    render: () => (
        <StorybookProvider>
            <MyComponent />
        </StorybookProvider>
    )
};

Run it through the CLI, which resolves the Archibald-specific wiring for you:

archibald storybook

Where the real documentation lives​

Setup, writing stories and the mocked environment are documented in their own section: