@@ -3,91 +3,197 @@ applyTo: "**/*.stories.ts,**/*.stories.tsx"
33---
44# Storybook Guidelines
55
6- ## Structure & Basic Setup
6+ ## Core Principles
77
8- - Co-locate story files with component files
8+ We create stories that ** accelerate development** and ** improve team communication** . Stories should be practical tools that help developers work faster, not documentation overhead.
9+
10+ ## Structure & Setup
11+
12+ - ** Co-locate** story files with component files (` Component.stories.tsx ` )
913- Use ` satisfies Meta<typeof Component> ` for type safety
10- - Use ` tags: ["autodocs"] ` to generate documentation
14+ - Always include ` tags: ["autodocs"] ` for automatic documentation generation
15+ - Favor auto-generated titles (omit ` title ` property)
16+
17+ ## Documentation Strategy
1118
12- ## Documentation
19+ ### Component-Level Documentation
20+ - Add a ** concise JSDoc comment** above the ` meta ` object explaining the component's purpose and key capabilities
21+ - Focus on ** when to use** the component, not implementation details
22+
23+ ``` typescript
24+ /**
25+ * CodeBlock component for displaying code snippets and terminal output.
26+ * Supports both inline code and multi-line code blocks with syntax highlighting.
27+ */
28+ ```
1329
14- - Add a JSDoc comment above the ` meta ` object describing the component's purpose
15- - Add JSDoc comments for each story variant explaining its use case
30+ ### Story-Level Documentation
31+ - Add ** brief JSDoc comments** for each story explaining its specific use case
32+ - Use action-oriented descriptions that help developers choose the right variant
1633
1734``` typescript
1835/**
19- * Button component for user interactions with multiple variants and states .
36+ * Multi-line code block for displaying formatted code snippets .
2037 */
38+ export const CodeBlock: Story = { /* ... */ };
2139```
2240
23- ## Component Controls
41+ ## Controls Configuration
2442
25- - Document props using ` argTypes ` with clear descriptions
26- - Use appropriate controls for each prop type (boolean, select, text, etc.)
27- - Set default values for common props
43+ ### Selective argTypes
44+ - Only configure ` argTypes ` for props that ** benefit from interactive controls**
45+ - Let Storybook infer most controls automatically
46+ - Add ` description ` for complex or non-obvious props
2847
2948``` typescript
3049argTypes : {
31- size : {
32- control : ' select' ,
33- options : [' default' , ' sm' , ' lg' ],
34- description : ' Button size' ,
50+ inline : {
51+ control : ' boolean' ,
52+ description : ' Whether to display as inline code or a code block' ,
3553 },
36- variant : {
37- control : ' select' ,
38- description : ' Visual style' ,
54+ className : {
55+ description : ' Additional CSS classes for styling' ,
3956 },
4057}
4158```
4259
43- ## Example Story
60+ ### Default Values
61+ - Set meaningful defaults using ` args ` at the meta level
62+ - Avoid setting ` defaultValue ` in argTypes (deprecated pattern)
63+
64+ ``` typescript
65+ const meta = {
66+ component: CodeBlock ,
67+ args: {
68+ inline: false ,
69+ className: ' ' ,
70+ children: ' console.log("Hello, world!");' ,
71+ },
72+ } satisfies Meta <typeof CodeBlock >;
73+ ```
74+
75+ ## Story Patterns
76+
77+ ### Essential Stories
78+ Every component should have these core stories:
79+ 1 . ** Default** - Standard usage with common props
80+ 2 . ** Variants** - Different visual styles/states
81+ 3 . ** Edge Cases** - Empty states, long content, error states
82+
83+ ### Interactive Stories
84+ - Use realistic content that demonstrates actual usage patterns
85+ - Include examples with both short and long content to test layout
86+ - Show different states and configurations
87+
88+ ### Content Guidelines
89+ - Use ** realistic, relevant content** that reflects actual usage
90+ - Follow our platform's ** friendly, supportive engineering voice**
91+ - Use consistent terminology across all components
92+ - Include practical examples developers would actually encounter
93+
94+ ## Layout & Presentation
95+
96+ ### Parameters
97+ - Use ` layout: 'centered' ` for isolated components
98+ - Use ` layout: 'fullscreen' ` for page-level components
99+ - Add appropriate decorators when components need context
100+
101+ ``` typescript
102+ parameters : {
103+ layout : ' centered' ,
104+ docs : {
105+ description : {
106+ component : ' Additional context if the JSDoc comment is insufficient' ,
107+ },
108+ },
109+ },
110+ decorators : [
111+ (Story ) => (
112+ < div className = " max-w-4xl p-6 bg-background" >
113+ < Story / >
114+ < / div >
115+ ),
116+ ],
117+ ```
118+
119+ ## Advanced Patterns
120+
121+ ### Composition Stories
122+ Create stories that show components working together:
123+
124+ ``` typescript
125+ export const InContext: Story = {
126+ render : () => (
127+ < div className = " prose" >
128+ <p >Here ' s how to use the API:</p>
129+ < CodeBlock inline = {false } className = " " >
130+ {`const response = await fetch (' /api/users' );
131+ const users = await response .json ();`}
132+ < / CodeBlock >
133+ < / div >
134+ ),
135+ };
136+ ```
137+
138+ ### Data-Driven Stories
139+ For components with complex requirements, create realistic mock data and scenarios.
140+
141+ ## Quality Standards
142+
143+ - ** Simplicity over complexity** - Don't over-engineer stories
144+ - ** Practical scenarios** - Focus on real use cases over edge cases
145+ - ** Visual clarity** - Stories should immediately show component capabilities
146+ - ** Performance** - Avoid heavy computations or API calls in stories
147+ - ** Maintenance** - Keep stories simple enough that they don't become a burden
148+
149+ ## Example Story Structure
44150
45151``` typescript
46152import type { Meta , StoryObj } from ' @storybook/react' ;
47- import { fn } from ' @storybook/test' ;
48- import { Button } from ' ./Button' ;
153+ import { CodeBlock } from ' ./CodeBlock' ;
49154
50155/**
51- * Button component for user interactions.
156+ * CodeBlock component for displaying code snippets and terminal output.
157+ * Supports both inline code and multi-line code blocks with proper formatting.
52158 */
53159const meta = {
54- // No title needed, we should favor auto-generated titles
55- component: Button ,
160+ component: CodeBlock ,
56161 parameters: { layout: ' centered' },
57162 tags: [' autodocs' ],
58163 argTypes: {
59- size: { control: ' select' , options: [' small' , ' large' ] },
60- backgroundColor: { control: ' color' },
164+ inline: {
165+ control: ' boolean' ,
166+ description: ' Whether to display as inline code or a code block' ,
167+ },
168+ className: {
169+ description: ' Additional CSS classes for styling' ,
170+ },
61171 },
62- args: { onClick: fn () },
63- } satisfies Meta <typeof Button >;
172+ args: {
173+ inline: false ,
174+ className: ' ' ,
175+ },
176+ } satisfies Meta <typeof CodeBlock >;
64177
65178export default meta ;
66179type Story = StoryObj <typeof meta >;
67180
68181/**
69- * Primary button for main actions .
182+ * Multi-line code block for displaying formatted code snippets .
70183 */
71- export const Primary : Story = {
184+ export const Default : Story = {
72185 args: {
73- primary: true ,
74- label: ' Button' ,
186+ children: ' console.log("Hello, world!");' ,
75187 },
76188};
77189
78190/**
79- * Secondary button for less important actions .
191+ * Inline code for referencing variables or short snippets within text .
80192 */
81- export const Secondary : Story = {
193+ export const Inline : Story = {
82194 args: {
83- label: ' Button' ,
195+ inline: true ,
196+ children: ' useState' ,
84197 },
85198};
86199```
87-
88- ## UX Writing
89-
90- - Use realistic and relevant content in stories
91- - Follow our platform's friendly, supportive voice
92- - Keep text clear and concise
93- - Use consistent terminology across components
0 commit comments