wonder-blocks: Instructions file for GitHub Copilot

Wonder Blocks - Storybook Best Practices

This guide covers conventions and best practices for creating Storybook stories (.stories.tsx or .stories.ts) in the Wonder Blocks design system.

TypeScript Types

Define story types consistently (avoid any):

type StoryComponentType = StoryObj<typeof Component>;

export const Default: StoryComponentType = {
    args: {
        // props here
    },
};

Default Export Configuration

Meta Configuration

Include all relevant meta properties:

export default {
    title: "Packages / ComponentName / SubComponent",
    component: ComponentName,
    subcomponents: {SubComponent1, SubComponent2}, // If applicable
    parameters: {
        componentSubtitle: (
            <ComponentInfo
                name={packageConfig.name}
                version={packageConfig.version}
            />
        ),
        chromatic: {
            disableSnapshot: false, // or true with reason
        },
    },
    argTypes: ComponentArgTypes,
    args: {
        // Default args for all stories
    },
    decorators: [
        // Optional decorators
    ],
} as Meta<typeof ComponentName>;

Key properties:

• title: Hierarchical path in Storybook sidebar
• component: The main component being documented
• subcomponents: Related components shown in docs
• parameters: Meta-level configuration (Chromatic, a11y, etc.)
• argTypes: Control definitions (usually imported from separate file)
• args: Default values applied to all stories
• decorators: Layout wrappers applied to all stories

Title Naming Convention

Follow the hierarchy (avoid flat titles):

title: "Packages / Button / Button"
title: "Packages / Dropdown / SingleSelect"
title: "Packages / Button / Testing / Snapshots / ActivityButton"

Story Patterns

General Tips

• The Default story should be interactive and work with Storybook controls
• Write stories for all possible prop combinations/states
• Disable Chromatic for stories that don't need visual regression tests (limited monthly snapshots)
• Avoid specific background colors in Stories; let users control via Storybook toolbar