get_component_dependencies
Identifies internal dependencies of a Storybook component by analyzing HTML for React components, web components, and CSS class patterns. Use to streamline design system adoption and refactoring.
Instructions
Analyze rendered HTML to find which other components a given component internally uses by detecting React components, web components, and CSS class patterns
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentId | Yes | The story ID of the component (e.g., "example-button--primary") |
Input Schema (JSON Schema)
{
"properties": {
"componentId": {
"description": "The story ID of the component (e.g., \"example-button--primary\")",
"type": "string"
}
},
"required": [
"componentId"
],
"type": "object"
}
Implementation Reference
- The handler function that executes the tool's core logic: fetches component HTML, uses regex patterns to detect nested components and CSS classes, categorizes dependencies, and formats the response.export async function handleGetComponentDependencies(input: any) { try { const validatedInput = validateGetComponentDependenciesInput(input); const client = new StorybookClient(); // Fetch the component HTML const componentHTML = await client.fetchComponentHTML(validatedInput.componentId); // Analyze the HTML to find other components const dependencies = new Set<string>(); const internalComponents = new Set<string>(); const externalComponents = new Set<string>(); // Common patterns for component detection const componentPatterns = [ // React-style components: <Button>, <MuiButton> /<([A-Z][a-zA-Z0-9]*)\s*[^>]*>/g, // Web components: <my-button>, <app-header> /<([a-z]+-[a-z-]+)\s*[^>]*>/g, // Angular/Vue style: <app-button>, <v-btn> /<(app-[a-z-]+|v-[a-z-]+)\s*[^>]*>/g, ]; // Extract component names from HTML for (const pattern of componentPatterns) { let match; while ((match = pattern.exec(componentHTML.html)) !== null) { const componentName = match[1]; if (componentName && !isHTMLElement(componentName)) { dependencies.add(componentName); } } } // Also check for CSS classes that might indicate component usage const classPatterns = [ /\b([A-Z][a-zA-Z0-9]+)-root\b/g, /\bMui([A-Z][a-zA-Z0-9]+)\b/g, /\bcomponent-([a-z-]+)\b/g, ]; for (const pattern of classPatterns) { let match; while ((match = pattern.exec(componentHTML.html)) !== null) { const componentName = match[1]; if (componentName) { dependencies.add(componentName); } } } // Try to categorize dependencies const allDependencies = Array.from(dependencies); for (const dep of allDependencies) { // Heuristic: if it starts with Mui, Material, Ant, etc., it's external if (/^(Mui|Material|Ant|Bootstrap|Semantic)/i.test(dep)) { externalComponents.add(dep); } else { internalComponents.add(dep); } } const componentDependencies: ComponentDependencies = { storyId: validatedInput.componentId, dependencies: allDependencies.sort(), internalComponents: Array.from(internalComponents).sort(), externalComponents: Array.from(externalComponents).sort(), }; return formatSuccessResponse( componentDependencies, `Retrieved dependencies for component: ${validatedInput.componentId}` ); } catch (error) { return handleError(error); } }
- src/utils/validators.ts:41-43 (schema)Zod schema defining the input validation for the tool.const GetComponentDependenciesInputSchema = z.object({ componentId: z.string(), });
- src/index.ts:15-24 (registration)Registration of the tool handler in the main server toolHandlers map.const toolHandlers = new Map<string, (input: any) => Promise<any>>([ ['list_components', tools.handleListComponents], ['get_component_html', tools.handleGetComponentHTML], ['get_component_variants', tools.handleGetComponentVariants], ['search_components', tools.handleSearchComponents], ['get_component_dependencies', tools.handleGetComponentDependencies], ['get_theme_info', tools.handleGetThemeInfo], ['get_component_by_purpose', tools.handleGetComponentByPurpose], ['get_external_css', tools.handleGetExternalCSS], ]);
- src/index.ts:26-35 (registration)Registration of the tool definition in the allTools array for listTools.const allTools = [ tools.listComponentsTool, tools.getComponentHTMLTool, tools.getComponentVariantsTool, tools.searchComponentsTool, tools.getComponentDependenciesTool, tools.getThemeInfoTool, tools.getComponentByPurposeTool, tools.getExternalCSSTool, ];
- Helper function to filter out standard HTML elements from detected component tags.function isHTMLElement(tagName: string): boolean { const htmlElements = [ 'div', 'span', 'p', 'a', 'button', 'input', 'form', 'label', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'img', 'video', 'audio', 'canvas', 'svg', 'path', 'g', 'header', 'footer', 'nav', 'main', 'section', 'article', 'aside', 'details', 'summary', 'figure', 'figcaption', ]; return htmlElements.includes(tagName.toLowerCase()); }
- src/types/tools.ts:35-37 (schema)TypeScript interface defining the input shape for the tool.export interface GetComponentDependenciesInput { componentId: string; }