@tpitre/story-ui 1.0.0

package/dist/story-generator/componentDiscovery.js

@@ -0,0 +1,222 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Discovers components from a directory structure
+ */
+export function discoverComponentsFromDirectory(componentsPath, componentPrefix = '') {
+    if (!fs.existsSync(componentsPath)) {
+        console.warn(`Components path does not exist: ${componentsPath}`);
+        return [];
+    }
+    const components = [];
+    const dirs = fs.readdirSync(componentsPath, { withFileTypes: true })
+        .filter(d => d.isDirectory() && d.name !== 'generated' && !d.name.startsWith('.'));
+    for (const dir of dirs) {
+        const componentName = componentPrefix + dir.name;
+        const componentPath = path.join(componentsPath, dir.name);
+        // Look for story files to extract component information
+        const storyFile = path.join(componentPath, `${dir.name}.stories.tsx`);
+        const componentFile = path.join(componentPath, `${dir.name}.tsx`);
+        let props = [];
+        let description = '';
+        let category = 'other';
+        let slots = [];
+        // Extract information from story file
+        if (fs.existsSync(storyFile)) {
+            const storyContent = fs.readFileSync(storyFile, 'utf-8');
+            props = extractPropsFromStory(storyContent);
+            description = extractDescriptionFromStory(storyContent);
+        }
+        // Extract information from component file
+        if (fs.existsSync(componentFile)) {
+            const componentContent = fs.readFileSync(componentFile, 'utf-8');
+            if (!description) {
+                description = extractDescriptionFromComponent(componentContent);
+            }
+            slots = extractSlotsFromComponent(componentContent);
+        }
+        // Categorize component based on name and content
+        category = categorizeComponent(componentName, description);
+        components.push({
+            name: componentName,
+            filePath: componentPath,
+            props,
+            description: description || `${componentName} component`,
+            category,
+            slots,
+            examples: []
+        });
+    }
+    return components;
+}
+/**
+ * Discovers components from custom-elements.json (Web Components)
+ */
+export function discoverComponentsFromCustomElements(customElementsPath, componentPrefix = '') {
+    if (!fs.existsSync(customElementsPath)) {
+        console.warn(`Custom elements file does not exist: ${customElementsPath}`);
+        return [];
+    }
+    try {
+        const customElements = JSON.parse(fs.readFileSync(customElementsPath, 'utf-8'));
+        const components = [];
+        if (customElements.modules) {
+            for (const module of customElements.modules) {
+                if (module.declarations) {
+                    for (const declaration of module.declarations) {
+                        if (declaration.kind === 'class' && declaration.customElement) {
+                            const componentName = componentPrefix + declaration.name;
+                            const props = declaration.members
+                                ?.filter((m) => m.kind === 'field' && m.privacy !== 'private')
+                                ?.map((m) => m.name) || [];
+                            components.push({
+                                name: componentName,
+                                filePath: module.path || '',
+                                props,
+                                description: declaration.description || `${componentName} component`,
+                                category: categorizeComponent(componentName, declaration.description || ''),
+                                slots: declaration.slots?.map((s) => s.name) || [],
+                                examples: []
+                            });
+                        }
+                    }
+                }
+            }
+        }
+        return components;
+    }
+    catch (error) {
+        console.error('Error parsing custom-elements.json:', error);
+        return [];
+    }
+}
+/**
+ * Discovers components from package.json exports or index files
+ */
+export function discoverComponentsFromPackage(packagePath, componentPrefix = '') {
+    const components = [];
+    // Try to find index file
+    const indexFiles = ['index.ts', 'index.tsx', 'index.js', 'index.jsx'];
+    let indexPath = null;
+    for (const indexFile of indexFiles) {
+        const fullPath = path.join(packagePath, indexFile);
+        if (fs.existsSync(fullPath)) {
+            indexPath = fullPath;
+            break;
+        }
+    }
+    if (indexPath) {
+        const indexContent = fs.readFileSync(indexPath, 'utf-8');
+        const exportMatches = indexContent.match(/export\s+{\s*([^}]+)\s*}/g);
+        if (exportMatches) {
+            for (const match of exportMatches) {
+                const exports = match.match(/export\s+{\s*([^}]+)\s*}/)?.[1];
+                if (exports) {
+                    const exportItems = exports
+                        .split(',')
+                        .map(item => item.trim())
+                        .filter(Boolean);
+                    for (const item of exportItems) {
+                        // Handle export aliases like "Input as TextInput"
+                        if (item.includes(' as ')) {
+                            const [, alias] = item.split(' as ').map(part => part.trim());
+                            if (alias && (!componentPrefix || alias.startsWith(componentPrefix))) {
+                                components.push({
+                                    name: alias,
+                                    filePath: indexPath,
+                                    props: [],
+                                    description: `${alias} component`,
+                                    category: categorizeComponent(alias, ''),
+                                    examples: []
+                                });
+                            }
+                        }
+                        else {
+                            // Regular export
+                            if (!componentPrefix || item.startsWith(componentPrefix)) {
+                                components.push({
+                                    name: item,
+                                    filePath: indexPath,
+                                    props: [],
+                                    description: `${item} component`,
+                                    category: categorizeComponent(item, ''),
+                                    examples: []
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return components;
+}
+/**
+ * Main discovery function that tries multiple methods
+ */
+export function discoverComponents(config) {
+    let components = [];
+    // Try directory-based discovery first
+    if (config.componentsPath) {
+        components = discoverComponentsFromDirectory(config.componentsPath, config.componentPrefix);
+    }
+    // Fallback to custom elements if no components found
+    if (components.length === 0 && config.componentsMetadataPath) {
+        components = discoverComponentsFromCustomElements(config.componentsMetadataPath, config.componentPrefix);
+    }
+    // Fallback to package-based discovery
+    if (components.length === 0 && config.componentsPath) {
+        components = discoverComponentsFromPackage(config.componentsPath, config.componentPrefix);
+    }
+    return components;
+}
+// Helper functions
+function extractPropsFromStory(content) {
+    const argTypesMatch = content.match(/argTypes:\s*{([\s\S]*?)}[,\n]/);
+    if (argTypesMatch) {
+        const argTypesBlock = argTypesMatch[1];
+        return Array.from(argTypesBlock.matchAll(/([a-zA-Z0-9_]+):/g)).map(m => m[1]);
+    }
+    return [];
+}
+function extractDescriptionFromStory(content) {
+    const descMatch = content.match(/\/\*\*([\s\S]*?)\*\//);
+    if (descMatch) {
+        return descMatch[1].replace(/\*/g, '').trim();
+    }
+    return '';
+}
+function extractDescriptionFromComponent(content) {
+    const descMatch = content.match(/\/\*\*([\s\S]*?)\*\//);
+    if (descMatch) {
+        return descMatch[1].replace(/\*/g, '').trim();
+    }
+    return '';
+}
+function extractSlotsFromComponent(content) {
+    const slotMatches = content.match(/slot=['"]([^'"]+)['"]/g);
+    if (slotMatches) {
+        return slotMatches.map(match => match.match(/slot=['"]([^'"]+)['"]/)?.[1]).filter(Boolean);
+    }
+    return [];
+}
+function categorizeComponent(name, description) {
+    const lowerName = name.toLowerCase();
+    const lowerDesc = description.toLowerCase();
+    if (lowerName.includes('layout') || lowerName.includes('grid') || lowerName.includes('container') || lowerName.includes('section')) {
+        return 'layout';
+    }
+    if (lowerName.includes('input') || lowerName.includes('form') || lowerName.includes('field') || lowerName.includes('select')) {
+        return 'form';
+    }
+    if (lowerName.includes('nav') || lowerName.includes('menu') || lowerName.includes('breadcrumb') || lowerName.includes('tab')) {
+        return 'navigation';
+    }
+    if (lowerName.includes('toast') || lowerName.includes('alert') || lowerName.includes('notification') || lowerName.includes('modal')) {
+        return 'feedback';
+    }
+    if (lowerName.includes('button') || lowerName.includes('card') || lowerName.includes('heading') || lowerName.includes('text')) {
+        return 'content';
+    }
+    return 'other';
+}