Storybook

type StoryComponentType = StoryObj<typeof Component>;

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

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>;

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

/**
 * This is the default state of the button showing standard usage.
 * It demonstrates the basic props and expected behavior.
 */
export const Default: StoryComponentType = {
    args: {
        children: "Click me",
        onClick: () => {},
    },
};

export const WithState: StoryComponentType = {
    render: function Render(args) {
        const [value, setValue] = React.useState(args.value || "");

        return (
            <Component
                {...args}
                value={value}
                onChange={setValue}
            />
        );
    },
    args: {
        // initial args
    },
};

// ✅ Good - Named function for better debugging
render: function Render(args) {
    // ...
}

// ❌ Avoid - Arrow functions don't have clear names
render: (args) => {
    // ...
}

/**
 * Buttons have three kinds: `primary` (default), `secondary`, and `tertiary`.
 */
export const Kinds: StoryComponentType = {
    render: () => (
        <View style={{gap: spacing.medium_16}}>
            <Button onClick={() => {}}>Primary</Button>
            <Button kind="secondary" onClick={() => {}}>Secondary</Button>
            <Button kind="tertiary" onClick={() => {}}>Tertiary</Button>
        </View>
    ),
};

/**
 * This example demonstrates how SingleSelect behaves with an initial value.
 * The screen reader will not announce the initial value on mount, but will
 * announce when the value changes through user interaction.
 */
export const WithInitialValue: StoryComponentType = {
    // story configuration
};

// __docs__/wonder-blocks-button/button.argtypes.ts
import type {ArgTypes} from "@storybook/react-vite";

export default {
    // Override type display for union types
    kind: {
        control: {type: "select"},
        options: ["primary", "secondary", "tertiary"],
        table: {
            category: "Visual style",
            type: {summary: `"primary" | "secondary" | "tertiary"`},
            defaultValue: {summary: `"primary"`},
        },
    },
    // Group related props
    size: {
        control: {type: "select"},
        table: {
            category: "Layout",
            type: {summary: `"medium" | "small" | "large"`},
        },
    },
    // Improve descriptions for complex props
    style: {
        table: {
            category: "Layout",
            type: {summary: "StyleType"},
        },
    },
} satisfies ArgTypes;

import ComponentArgTypes from "./component.argtypes";

export default {
    title: "Packages / Component",
    component: Component,
    argTypes: ComponentArgTypes,
} as Meta<typeof Component>;

export const Interactive: StoryComponentType = {
    render: () => {/* ... */},
    parameters: {
        chromatic: {
            // Disabling because this is for manual testing purposes
            disableSnapshot: true,
        },
    },
};

export const ControlledOpened: StoryComponentType = {
    render: (args) => <Component {...args} />,
    parameters: {
        // Added to ensure that the dropdown menu is rendered using PopperJS.
        chromatic: {delay: 500},
    },
};

export const WithIcon: StoryComponentType = {
    render: () => <IconExample />,
    parameters: {
        chromatic: {
            modes: allThemeModes, // Test in multiple themes
        },
    },
};

import {allThemeModes} from "../../.storybook/modes";

export default {
    title: "Packages / Component / Testing / Snapshots",
    parameters: {
        chromatic: {
            modes: allThemeModes, // Captures snapshots in all themes
        },
    },
    tags: ["!autodocs"],
} as Meta<typeof Component>;