0
# UI Components
1

2
Core interface components including modals, tabs, action bars, and layout utilities for building complex user interfaces.
3

4
## Capabilities
5

6
### Modal Component
7

8
Modal/dialog component for overlays and focused user interactions.
9

10
```typescript { .api }
11
/**
12
 * Modal/dialog component for overlays and focused interactions
13
 */
14
interface ModalProps extends Omit<React.ComponentProps<typeof Dialog.Root>, 'children'> {
15
  /** Modal width in pixels */
16
  width?: number;
17
  /** Modal height in pixels */
18
  height?: number;
19
  /** Modal content */
20
  children: React.ReactNode;
21
  /** Called when escape key is pressed */
22
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
23
  /** Called when clicking outside modal */
24
  onInteractOutside?: (event: PointerEvent | FocusEvent) => void;
25
  /** CSS class name for styling */
26
  className?: string;
27
  /** Container element for portal */
28
  container?: HTMLElement;
29
}
30

31
/**
32
 * Modal/dialog component for overlays and focused interactions
33
 * Built on top of Radix UI Dialog primitive
34
 */
35
const Modal: React.ComponentType<ModalProps>;
36
```
37

38
### ActionBar Component
39

40
Action bar container component for grouping action buttons and controls.
41

42
```typescript { .api }
43
/**
44
 * Action bar container component for grouping related actions
45
 */
46
const ActionBar: React.ComponentType<{
47
  /** Action items to display */
48
  actionItems?: ActionItem[];
49
  /** Additional content */
50
  children?: React.ReactNode;
51
}>;
52

53
interface ActionItem {
54
  /** Unique identifier for the action */
55
  id: string;
56
  /** Display title for the action */
57
  title: string;
58
  /** Click handler */
59
  onClick: () => void;
60
  /** Disabled state */
61
  disabled?: boolean;
62
}
63
```
64

65
### Layout Components
66

67
Components for spacing, layout, and content organization.
68

69
```typescript { .api }
70
/**
71
 * Spacing utility component for consistent margins and padding
72
 */
73
const Spaced: React.ComponentType<{
74
  /** Children to space */
75
  children: React.ReactNode;
76
  /** Spacing configuration */
77
  [key: string]: any;
78
}>;
79

80
/**
81
 * Placeholder content component for empty states
82
 */
83
const Placeholder: React.ComponentType<{
84
  /** Placeholder content */
85
  children?: React.ReactNode;
86
  /** Placeholder configuration */
87
  [key: string]: any;
88
}>;
89

90
/**
91
 * Scrollable area component with custom scrollbar styling
92
 */
93
const ScrollArea: React.ComponentType<{
94
  /** Scrollable content */
95
  children: React.ReactNode;
96
  /** Scroll configuration */
97
  [key: string]: any;
98
}>;
99

100
/**
101
 * Zoom control component for scaling content
102
 */
103
const Zoom: React.ComponentType<{
104
  /** Content to zoom */
105
  children: React.ReactNode;
106
  /** Zoom level and controls */
107
  [key: string]: any;
108
}>;
109
```
110

111
### Error Handling
112

113
Component for formatting and displaying error messages.
114

115
```typescript { .api }
116
/**
117
 * Error message formatter component with consistent styling
118
 */
119
const ErrorFormatter: React.ComponentType<{
120
  /** Error to format and display */
121
  error: Error | string;
122
  /** Additional formatting options */
123
  [key: string]: any;
124
}>;
125
```
126

127
### Loading Components
128

129
Components for indicating loading and progress states.
130

131
```typescript { .api }
132
/**
133
 * Loading indicator component
134
 */
135
const Loader: React.ComponentType<{
136
  /** Loading state configuration */
137
  [key: string]: any;
138
}>;
139

140
/**
141
 * Progress spinner component with animation
142
 */
143
const ProgressSpinner: React.ComponentType<{
144
  /** Spinner configuration */
145
  [key: string]: any;
146
}>;
147
```
148

149
### Badge Component
150

151
Badge/label component for status indicators and labels.
152

153
```typescript { .api }
154
interface BadgeProps {
155
  /** Badge status/variant affecting color and styling */
156
  status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
157
  /** Badge content */
158
  children?: React.ReactNode;
159
}
160

161
/**
162
 * Badge/label component for status indicators and labels
163
 * Supports different status variants with appropriate colors
164
 */
165
const Badge: React.ComponentType<BadgeProps>;
166
```
167

168
### Clipboard Component
169

170
Code block component with integrated copy-to-clipboard functionality.
171

172
```typescript { .api }
173
/**
174
 * Code block with copy-to-clipboard functionality
175
 */
176
const ClipboardCode: React.ComponentType<{
177
  /** Code content to display */
178
  code: string;
179
  /** Programming language for syntax highlighting */
180
  language?: string;
181
  /** Additional options */
182
  [key: string]: any;
183
}>;
184
```
185

186
## Usage Examples
187

188
**Modal Usage:**
189

190
```typescript
191
import { Modal, Button, P } from "@storybook/components";
192
import { useState } from "react";
193

194
function MyComponent() {
195
  const [isOpen, setIsOpen] = useState(false);
196

197
  return (
198
    <>
199
      <Button onClick={() => setIsOpen(true)}>
200
        Open Modal
201
      </Button>
202
      
203
      <Modal 
204
        open={isOpen} 
205
        onOpenChange={setIsOpen}
206
        width={400}
207
        height={300}
208
        onEscapeKeyDown={() => setIsOpen(false)}
209
      >
210
        <P>Modal content goes here</P>
211
        <Button onClick={() => setIsOpen(false)}>
212
          Close
213
        </Button>
214
      </Modal>
215
    </>
216
  );
217
}
218
```
219

220
**ActionBar Usage:**
221

222
```typescript
223
import { ActionBar } from "@storybook/components";
224

225
const actions = [
226
  {
227
    id: 'save',
228
    title: 'Save',
229
    onClick: () => console.log('Save clicked'),
230
    disabled: false
231
  },
232
  {
233
    id: 'delete',
234
    title: 'Delete',
235
    onClick: () => console.log('Delete clicked'),
236
    disabled: true
237
  }
238
];
239

240
<ActionBar actionItems={actions} />
241
```
242

243
**Layout Components:**
244

245
```typescript
246
import { Spaced, Placeholder, ScrollArea, Zoom } from "@storybook/components";
247

248
// Spacing utility
249
<Spaced>
250
  <div>First item</div>
251
  <div>Second item</div>
252
  <div>Third item</div>
253
</Spaced>
254

255
// Placeholder for empty states
256
<Placeholder>
257
  No content available
258
</Placeholder>
259

260
// Scrollable area
261
<ScrollArea>
262
  <div style={{ height: 1000 }}>
263
    Long scrollable content here
264
  </div>
265
</ScrollArea>
266

267
// Zoom control
268
<Zoom>
269
  <img src="large-image.jpg" alt="Zoomable content" />
270
</Zoom>
271
```
272

273
**Error Handling:**
274

275
```typescript
276
import { ErrorFormatter } from "@storybook/components";
277

278
// With Error object
279
<ErrorFormatter error={new Error("Something went wrong")} />
280

281
// With string message
282
<ErrorFormatter error="Invalid input provided" />
283
```
284

285
**Loading States:**
286

287
```typescript
288
import { Loader, ProgressSpinner } from "@storybook/components";
289

290
// Basic loader
291
<Loader />
292

293
// Progress spinner
294
<ProgressSpinner />
295
```
296

297
**Badge Usage:**
298

299
```typescript
300
import { Badge } from "@storybook/components";
301

302
// Different status variants
303
<Badge status="positive">New</Badge>
304
<Badge status="warning">Beta</Badge>
305
<Badge status="critical">Deprecated</Badge>
306
<Badge status="negative">Error</Badge>
307
<Badge status="neutral">Info</Badge>
308

309
// Without status (default styling)
310
<Badge>Default</Badge>
311
```
312

313
**Clipboard Code:**
314

315
```typescript
316
import { ClipboardCode } from "@storybook/components";
317

318
<ClipboardCode 
319
  code="const example = 'Hello World';"
320
  language="javascript"
321
/>
322

323
<ClipboardCode 
324
  code={`
325
    import { Button } from "@storybook/components";
326
    
327
    <Button variant="solid">Click me</Button>
328
  `}
329
  language="tsx"
330
/>
331
```
332

333
## Integration Notes
334

335
These UI components are designed to work together and integrate seamlessly with Storybook's theming system. They automatically adapt to the current theme (light/dark) and maintain consistent styling across the interface.
336

337
Many components accept additional props beyond those explicitly documented, allowing for extended customization while maintaining the core functionality and styling consistency expected in Storybook interfaces.