CSF Templates

Handoff fully supports the industry-standard Component Story Format (CSF). This allows teams already using Storybook to bring their existing stories into Handoff, or for new teams to adopt a scalable, portable format for component documentation.

For a full reference on the CSF specification, visit the official Storybook documentation.

Simple Example: Alert

A basic story file defining the default state for an Alert component.

example.tsx
tsx
1// Alert.stories.tsx
2import { Alert } from './Alert';
3
4export default {
5  title: 'Components/Alert',
6  component: Alert,
7};
8
9export const Default = {
10  args: {
11    type: 'info',
12    message: 'This is a standard system alert.',
13  },
14};

---

Complex Example: Modal with Multi-State Stories

A more advanced CSF file demonstrating multiple stories and complex interaction states.

example.tsx
tsx
1// Modal.stories.tsx
2import { Modal } from './Modal';
3
4export default {
5  title: 'Content/Modal',
6  component: Modal,
7  argTypes: {
8    size: {
9      control: { type: 'select' },
10      options: ['sm', 'md', 'lg', 'full'],
11    },
12  },
13};
14
15export const SmallSuccess = {
16  args: {
17    size: 'sm',
18    title: 'Success!',
19    body: 'Your changes have been saved.',
20    type: 'success',
21  },
22};
23
24export const LargeWarning = {
25  args: {
26    size: 'lg',
27    title: 'Irreversible Action',
28    body: 'Are you sure you want to delete this record?',
29    type: 'warning',
30    showCancel: true,
31  },
32};

---

Automatic Documentation

When you provide a CSF file (e.g., .stories.tsx), Handoff uses handoff-docgen to analyze your code and automatically generate:

• Properties Table: Inferred from your component's TypeScript types or PropTypes.
• Default Values: Automatically detected from your story arguments.
• Interactive Controls: Handoff maps your argTypes to interactive UI controls (selects, toggles, color pickers) in the documentation site.

This approach minimizes the need for manual documentation in config.json and ensures your system remains the single source of truth.