0
# ArgTypes Enhancement
1

2
Core functionality for enhancing component argTypes by intelligently combining extracted type information from docgen tools with user-provided argType definitions.
3

4
## Capabilities
5

6
### Enhanced ArgTypes Processing
7

8
The primary function for merging automated type extraction with manual argType definitions.
9

10
```typescript { .api }
11
/**
12
 * Enhances argTypes by combining extracted type information with user-provided types
13
 * @param context - Story context containing component, argTypes, and parameters
14
 * @returns Enhanced argTypes with merged type information
15
 */
16
function enhanceArgTypes<TRenderer extends Renderer>(
17
  context: StoryContextForEnhancers<TRenderer>
18
): typeof userArgTypes;
19
```
20

21
The function processes the story context to:
22
- Extract type information from the component using configured extractors
23
- Combine extracted types with user-defined argTypes  
24
- Preserve user customizations while adding missing type information
25
- Return enhanced argTypes for use in controls and documentation
26

27
**Usage Examples:**
28

29
```typescript
30
import { enhanceArgTypes } from "@storybook/docs-tools";
31
import type { StoryContextForEnhancers, Renderer } from "@storybook/core/types";
32

33
// Basic usage in a decorator
34
const withEnhancedArgTypes = (story: any, context: StoryContextForEnhancers<any>) => {
35
  const enhancedArgTypes = enhanceArgTypes(context);
36
  
37
  return story({
38
    ...context,
39
    argTypes: enhancedArgTypes
40
  });
41
};
42

43
// Framework-specific implementation
44
function createFrameworkDecorator<TRenderer extends Renderer>() {
45
  return (story: any, context: StoryContextForEnhancers<TRenderer>) => {
46
    // Extract and enhance argTypes for this framework
47
    const argTypes = enhanceArgTypes(context);
48
    
49
    // Apply framework-specific processing
50
    const processedArgTypes = processFrameworkTypes(argTypes);
51
    
52
    return story({
53
      ...context,
54
      argTypes: processedArgTypes
55
    });
56
  };
57
}
58

59
// Custom extractor configuration
60
const storyWithCustomExtractor = {
61
  parameters: {
62
    docs: {
63
      extractArgTypes: (component: any) => {
64
        // Custom extraction logic
65
        return extractCustomTypes(component);
66
      }
67
    }
68
  }
69
};
70
```
71

72
### Preset Detection
73

74
Utility function to detect whether docs or controls addons are present in the Storybook configuration.
75

76
```typescript { .api }
77
/**
78
 * Checks if docs or controls addons are present in the preset list
79
 * @param options - Storybook configuration options
80
 * @returns true if docs or controls addons are detected
81
 */
82
function hasDocsOrControls(options: Options): boolean;
83
```
84

85
This function helps conditional feature activation based on addon availability.
86

87
**Usage Examples:**
88

89
```typescript
90
import { hasDocsOrControls } from "@storybook/docs-tools";
91
import type { Options } from "@storybook/core/types";
92

93
// Conditional feature activation
94
function configureStorybook(options: Options) {
95
  const shouldEnableDocs = hasDocsOrControls(options);
96
  
97
  if (shouldEnableDocs) {
98
    // Enable documentation features
99
    return {
100
      ...options,
101
      features: {
102
        ...options.features,
103
        argTypeTargetsV7: true,
104
        docs: true
105
      }
106
    };
107
  }
108
  
109
  return options;
110
}
111

112
// Framework preset configuration
113
export const frameworkOptions = (options: Options) => {
114
  const baseConfig = {
115
    // Basic framework configuration
116
  };
117
  
118
  if (hasDocsOrControls(options)) {
119
    return {
120
      ...baseConfig,
121
      docs: {
122
        defaultName: 'Docs',
123
        autodocs: true
124
      }
125
    };
126
  }
127
  
128
  return baseConfig;
129
};
130

131
// Plugin conditional loading
132
function loadPlugins(options: Options) {
133
  const plugins = [
134
    // Core plugins
135
  ];
136
  
137
  if (hasDocsOrControls(options)) {
138
    plugins.push(
139
      // Documentation-specific plugins
140
      require('@storybook/addon-docs/preset'),
141
      require('@storybook/addon-controls/preset')
142
    );
143
  }
144
  
145
  return plugins;
146
}
147
```
148

149
### Context Processing
150

151
The enhancement process works with the full story context to provide comprehensive type information.
152

153
```typescript
154
// Context structure used by enhanceArgTypes
155
interface StoryContextForEnhancers<TRenderer extends Renderer> {
156
  component: any;
157
  argTypes: StrictArgTypes;
158
  parameters: {
159
    docs?: {
160
      extractArgTypes?: (component: any) => StrictArgTypes;
161
      // Other docs parameters
162
    };
163
    // Other parameters
164
  };
165
  // Other context properties
166
}
167

168
// Example of full context processing
169
function processStoryContext<T extends Renderer>(context: StoryContextForEnhancers<T>) {
170
  // Extract component metadata
171
  const { component, argTypes: userArgTypes, parameters } = context;
172
  
173
  // Check for custom extractor
174
  const extractArgTypes = parameters.docs?.extractArgTypes;
175
  
176
  // Enhance argTypes with extracted information
177
  const enhancedArgTypes = enhanceArgTypes(context);
178
  
179
  // Return processed context
180
  return {
181
    ...context,
182
    argTypes: enhancedArgTypes
183
  };
184
}
185
```
186

187
### Integration with Extractors
188

189
The enhancement system integrates with various type extraction tools and frameworks.
190

191
```typescript
192
// Common extractor patterns
193
const reactExtractor = (component: any) => {
194
  // React component type extraction
195
  if (component.__docgenInfo) {
196
    return processReactDocgen(component.__docgenInfo);
197
  }
198
  return {};
199
};
200

201
const vueExtractor = (component: any) => {
202
  // Vue component type extraction  
203
  if (component.__docgenApi) {
204
    return processVueDocgen(component.__docgenApi);
205
  }
206
  return {};
207
};
208

209
// Framework-specific enhancement
210
const enhanceForFramework = (context: StoryContextForEnhancers<any>, framework: string) => {
211
  const extractors = {
212
    react: reactExtractor,
213
    vue: vueExtractor,
214
    // Other framework extractors
215
  };
216
  
217
  const extractor = extractors[framework];
218
  if (extractor) {
219
    context.parameters.docs = {
220
      ...context.parameters.docs,
221
      extractArgTypes: extractor
222
    };
223
  }
224
  
225
  return enhanceArgTypes(context);
226
};
227
```