0
# Configuration Management
1

2
Core utilities for loading, validating, and processing Storybook configuration files. These functions provide the foundation for understanding and working with Storybook project structure.
3

4
## Capabilities
5

6
### Load Main Configuration
7

8
Loads and parses the main Storybook configuration file with error handling and caching support.
9

10
```typescript { .api }
11
/**
12
 * Load and parse main Storybook configuration file
13
 * @param options - Configuration loading options
14
 * @returns Promise resolving to the loaded configuration
15
 */
16
function loadMainConfig(options: {
17
  configDir: string;
18
  noCache?: boolean;
19
}): Promise<StorybookConfigRaw>;
20
```
21

22
**Usage Example:**
23

24
```typescript
25
import { loadMainConfig } from "@storybook/core-common";
26

27
// Load main config from default location
28
const config = await loadMainConfig({ 
29
  configDir: '.storybook' 
30
});
31

32
// Load without caching
33
const freshConfig = await loadMainConfig({ 
34
  configDir: '.storybook',
35
  noCache: true 
36
});
37

38
console.log(config.stories);
39
console.log(config.addons);
40
```
41

42
### Get Storybook Information
43

44
Extracts comprehensive information about a Storybook project including framework, renderer, and configuration file paths.
45

46
```typescript { .api }
47
/**
48
 * Get comprehensive Storybook project information
49
 * @param packageJson - Project package.json content
50
 * @param configDir - Storybook configuration directory path
51
 * @returns Promise resolving to complete project information
52
 */
53
function getStorybookInfo(
54
  packageJson: PackageJson,
55
  configDir?: string
56
): Promise<CoreCommon_StorybookInfo>;
57

58
interface CoreCommon_StorybookInfo {
59
  version: string;
60
  framework: string;
61
  frameworkPackage: string;
62
  renderer: string;
63
  rendererPackage: string;
64
  configDir?: string;
65
  mainConfig?: string;
66
  previewConfig?: string;
67
  managerConfig?: string;
68
}
69
```
70

71
**Usage Example:**
72

73
```typescript
74
import { getStorybookInfo } from "@storybook/core-common";
75
import packageJson from "./package.json";
76

77
const info = await getStorybookInfo(packageJson, '.storybook');
78

79
console.log(`Framework: ${info.framework}`);
80
console.log(`Renderer: ${info.renderer}`);
81
console.log(`Config files found: ${info.mainConfig}, ${info.previewConfig}`);
82
```
83

84
### Get Configuration Info
85

86
Gets configuration file paths and metadata without loading the actual configuration content.
87

88
```typescript { .api }
89
/**
90
 * Get Storybook configuration file paths and metadata
91
 * @param packageJson - Project package.json content
92
 * @param configDir - Configuration directory path
93
 * @returns Configuration file information
94
 */
95
function getConfigInfo(
96
  packageJson: PackageJson,
97
  configDir?: string
98
): {
99
  configDir: string;
100
  mainConfig?: string;
101
  previewConfig?: string;
102
  managerConfig?: string;
103
};
104
```
105

106
### Framework Detection
107

108
Extract and validate framework information from configuration.
109

110
```typescript { .api }
111
/**
112
 * Extract framework name from options or presets
113
 * @param options - Storybook options containing presets
114
 * @returns Framework name string
115
 */
116
function getFrameworkName(options: Options): Promise<string>;
117

118
/**
119
 * Extract proper framework name from framework path or name
120
 * @param framework - Framework identifier
121
 * @returns Normalized framework name
122
 */
123
function extractProperFrameworkName(framework: string | { name: string }): string;
124

125
/**
126
 * Validate framework name and throw detailed error if invalid
127
 * @param frameworkName - Framework name to validate
128
 * @throws Error with detailed validation message
129
 */
130
function validateFrameworkName(frameworkName: string): void;
131
```
132

133
### Renderer Detection
134

135
Extract renderer information from framework configuration.
136

137
```typescript { .api }
138
/**
139
 * Get renderer name from core configuration
140
 * @param options - Storybook options
141
 * @returns Renderer name string
142
 */
143
function getRendererName(options: Options): Promise<string>;
144

145
/**
146
 * Derive renderer name from framework name
147
 * @param frameworkName - Framework identifier
148
 * @returns Corresponding renderer name
149
 */
150
function extractProperRendererNameFromFramework(frameworkName: string): string;
151
```
152

153
### Configuration File Discovery
154

155
Find configuration files by pattern and extension.
156

157
```typescript { .api }
158
/**
159
 * Find configuration file by prefix and directory
160
 * @param prefix - File name prefix (e.g., 'main', 'preview')
161
 * @param configDir - Directory to search in
162
 * @returns Found configuration file path or undefined
163
 */
164
function findConfigFile(prefix: string, configDir: string): string | undefined;
165
```
166

167
### Configuration Validation
168

169
Validate configuration structure and content.
170

171
```typescript { .api }
172
/**
173
 * Validate Storybook configuration
174
 * @param options - Configuration validation options
175
 * @throws Error if configuration is invalid
176
 */
177
function validateConfig(options: Options): void;
178

179
/**
180
 * Validate configuration file structure
181
 * @param configDir - Configuration directory to validate
182
 * @throws Error if file structure is invalid
183
 */
184
function validateConfigurationFiles(configDir: string): void;
185
```
186

187
## Package Constants
188

189
Framework and package mapping constants for configuration detection.
190

191
```typescript { .api }
192
/**
193
 * Mapping of renderer packages to renderer names
194
 */
195
declare const rendererPackages: Record<string, string>;
196

197
/**
198
 * Mapping of framework packages to supported frameworks
199
 */
200
declare const frameworkPackages: Record<string, string[]>;
201

202
/**
203
 * Array of supported builder package names
204
 */
205
declare const builderPackages: string[];
206
```
207

208
## Supporting Types
209

210
```typescript { .api }
211
interface StorybookConfigRaw {
212
  stories: StoriesEntry[];
213
  addons?: Preset[];
214
  framework?: Preset;
215
  core?: CoreConfig;
216
  typescript?: Partial<TypescriptOptions>;
217
  features?: Record<string, boolean>;
218
  staticDirs?: (DirectoryMapping | string)[];
219
  refs?: Record<string, { title: string; url: string }>;
220
  env?: Record<string, string>;
221
  previewAnnotations?: Entry[];
222
  docs?: DocsOptions;
223
}
224

225
interface PackageJson {
226
  name?: string;
227
  version?: string;
228
  dependencies?: Record<string, string>;
229
  devDependencies?: Record<string, string>;
230
  [key: string]: any;
231
}
232

233
interface Options extends LoadOptions, CLIOptions, BuilderOptions {
234
  presets: Presets;
235
  configDir: string;
236
  packageJson?: PackageJson;
237
}
238
```