0
# Constants and Configuration
1

2
Core constants and enums that provide essential identifiers and configuration options for integrating with Storybook's documentation system.
3

4
## Capabilities
5

6
### Addon Identifiers
7

8
Core string constants that identify the docs addon and its components within the Storybook ecosystem.
9

10
```typescript { .api }
11
/**
12
 * Main addon identifier for the Storybook docs addon
13
 * Value: "storybook/docs"
14
 */
15
const ADDON_ID: "storybook/docs";
16

17
/**
18
 * Panel component identifier, derived from ADDON_ID
19
 * Value: "storybook/docs/panel"
20
 */
21
const PANEL_ID: string;
22

23
/**
24
 * Parameter key used for docs configuration in stories
25
 * Value: "docs"
26
 */
27
const PARAM_KEY: "docs";
28

29
/**
30
 * Event identifier for snippet rendering notifications
31
 * Value: "storybook/docs/snippet-rendered"
32
 */
33
const SNIPPET_RENDERED: string;
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import { ADDON_ID, PARAM_KEY } from "@storybook/docs-tools";
40

41
// Register addon
42
export default {
43
  title: 'My Component',
44
  parameters: {
45
    [PARAM_KEY]: {
46
      extractComponentDescription: true,
47
      source: {
48
        type: 'code'
49
      }
50
    }
51
  }
52
};
53

54
// Listen for snippet rendering events
55
if (typeof window !== 'undefined') {
56
  window.addEventListener(SNIPPET_RENDERED, (event) => {
57
    console.log('Code snippet rendered:', event.detail);
58
  });
59
}
60
```
61

62
### Source Type Configuration
63

64
Enum that defines the different source code extraction methods available for documentation display.
65

66
```typescript { .api }
67
/**
68
 * Defines how source code should be extracted and displayed in documentation
69
 */
70
enum SourceType {
71
  /** 
72
   * AUTO is the default behavior
73
   * - Uses CODE logic if user has set custom source snippet or story is not args-based
74
   * - Uses DYNAMIC rendered snippet if story is args-based
75
   */
76
  AUTO = "auto",
77
  
78
  /** Render the code extracted by source-loader */
79
  CODE = "code",
80
  
81
  /** Render dynamically-rendered source snippet from story's virtual DOM (React only) */
82
  DYNAMIC = "dynamic"
83
}
84
```
85

86
**Usage Examples:**
87

88
```typescript
89
import { SourceType } from "@storybook/docs-tools";
90

91
// Configure source extraction in story parameters
92
export const MyStory = {
93
  parameters: {
94
    docs: {
95
      source: {
96
        type: SourceType.CODE  // Force static code extraction
97
      }
98
    }
99
  }
100
};
101

102
// Conditional source type based on framework
103
const getSourceType = (framework: string) => {
104
  if (framework === 'react') {
105
    return SourceType.DYNAMIC;  // Use virtual DOM rendering
106
  }
107
  return SourceType.CODE;  // Fallback to static extraction
108
};
109

110
export const ResponsiveStory = {
111
  parameters: {
112
    docs: {
113
      source: {
114
        type: getSourceType(process.env.STORYBOOK_FRAMEWORK)
115
      }
116
    }
117
  }
118
};
119
```
120

121
### Integration Patterns
122

123
Common patterns for using these constants in Storybook configurations and addon development.
124

125
```typescript
126
import { ADDON_ID, PARAM_KEY, SourceType } from "@storybook/docs-tools";
127

128
// Addon registration
129
const addonConfig = {
130
  name: ADDON_ID,
131
  parameterName: PARAM_KEY,
132
  defaultParameters: {
133
    [PARAM_KEY]: {
134
      source: {
135
        type: SourceType.AUTO
136
      }
137
    }
138
  }
139
};
140

141
// Framework-specific configuration
142
const frameworkDefaults = {
143
  react: {
144
    [PARAM_KEY]: {
145
      source: { type: SourceType.DYNAMIC }
146
    }
147
  },
148
  vue: {
149
    [PARAM_KEY]: {
150
      source: { type: SourceType.CODE }
151
    }
152
  }
153
};
154
```