@tpitre/story-ui 1.0.0

package/dist/story-generator/configLoader.js

@@ -0,0 +1,482 @@
+import fs from 'fs';
+import path from 'path';
+import { DEFAULT_CONFIG, createStoryUIConfig } from '../story-ui.config.js';
+// Config cache to prevent excessive loading
+let cachedConfig = null;
+let configLoadTime = 0;
+const CONFIG_CACHE_TTL = 30000; // 30 seconds
+/**
+ * Loads Story UI configuration from the user's project
+ * Looks for story-ui.config.js in the current working directory
+ * Uses caching to prevent excessive loading
+ */
+export function loadUserConfig() {
+    const now = Date.now();
+    // Return cached config if still valid
+    if (cachedConfig && (now - configLoadTime) < CONFIG_CACHE_TTL) {
+        return cachedConfig;
+    }
+    const configPaths = [
+        path.join(process.cwd(), 'story-ui.config.js'),
+        path.join(process.cwd(), 'story-ui.config.ts'),
+        path.join(process.cwd(), '.storybook', 'story-ui.config.js'),
+        path.join(process.cwd(), '.storybook', 'story-ui.config.ts')
+    ];
+    for (const configPath of configPaths) {
+        if (fs.existsSync(configPath)) {
+            try {
+                console.log(`Loading Story UI config from: ${configPath}`);
+                // Read and evaluate the config file
+                const configContent = fs.readFileSync(configPath, 'utf-8');
+                // Simple evaluation for CommonJS modules
+                if (configContent.includes('module.exports')) {
+                    // Create a temporary module context
+                    const module = { exports: {} };
+                    const exports = module.exports;
+                    // Evaluate the config file content
+                    eval(configContent);
+                    const userConfig = module.exports;
+                    const config = createStoryUIConfig(userConfig.default || userConfig);
+                    // Cache the loaded config
+                    cachedConfig = config;
+                    configLoadTime = now;
+                    return config;
+                }
+            }
+            catch (error) {
+                console.warn(`Failed to load config from ${configPath}:`, error);
+            }
+        }
+    }
+    // Only log warnings once per cache period
+    if (!cachedConfig || (now - configLoadTime) >= CONFIG_CACHE_TTL) {
+        console.warn('No story-ui.config.js found. Using default configuration.');
+        console.warn('Please create a story-ui.config.js file in your project root to configure Story UI for your design system.');
+    }
+    // Cache the default config
+    cachedConfig = DEFAULT_CONFIG;
+    configLoadTime = now;
+    return DEFAULT_CONFIG;
+}
+/**
+ * Validates that the configuration has the necessary paths and components
+ */
+export function validateConfig(config) {
+    const errors = [];
+    // Check if generated stories path exists or can be created
+    if (!config.generatedStoriesPath) {
+        errors.push('generatedStoriesPath is required');
+    }
+    else {
+        const dir = path.dirname(config.generatedStoriesPath);
+        if (!fs.existsSync(dir)) {
+            try {
+                fs.mkdirSync(dir, { recursive: true });
+            }
+            catch (error) {
+                errors.push(`Cannot create generated stories directory: ${dir}`);
+            }
+        }
+    }
+    // Check if components can be discovered
+    if (!config.componentsPath && !config.componentsMetadataPath) {
+        errors.push('Either componentsPath or componentsMetadataPath must be specified');
+    }
+    if (config.componentsPath && !fs.existsSync(config.componentsPath)) {
+        errors.push(`Components path does not exist: ${config.componentsPath}`);
+    }
+    if (config.componentsMetadataPath && !fs.existsSync(config.componentsMetadataPath)) {
+        errors.push(`Components metadata path does not exist: ${config.componentsMetadataPath}`);
+    }
+    // Check import path
+    if (!config.importPath || config.importPath === 'your-component-library' || config.importPath.trim() === '') {
+        errors.push('importPath must be configured to point to your component library');
+    }
+    return {
+        isValid: errors.length === 0,
+        errors
+    };
+}
+/**
+ * Analyzes existing Storybook files to detect design system patterns
+ */
+export function analyzeExistingStories(projectRoot = process.cwd()) {
+    const storyFiles = [];
+    const componentDirs = [];
+    const importPaths = [];
+    const componentPrefixes = [];
+    const layoutPatterns = [];
+    // Find all .stories.tsx/.stories.ts files
+    function findStoryFiles(dir, depth = 0) {
+        if (depth > 4)
+            return; // Limit recursion depth
+        try {
+            const entries = fs.readdirSync(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                if (entry.name.startsWith('.') || entry.name === 'node_modules')
+                    continue;
+                const fullPath = path.join(dir, entry.name);
+                if (entry.isDirectory()) {
+                    findStoryFiles(fullPath, depth + 1);
+                }
+                else if (entry.name.match(/\.stories\.(tsx?|jsx?)$/)) {
+                    storyFiles.push(fullPath);
+                    // Track component directory (parent of story file)
+                    const componentDir = path.dirname(fullPath);
+                    if (!componentDirs.includes(componentDir)) {
+                        componentDirs.push(componentDir);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            // Skip directories we can't read
+        }
+    }
+    findStoryFiles(projectRoot);
+    // Analyze story files for patterns
+    for (const storyFile of storyFiles) {
+        try {
+            const content = fs.readFileSync(storyFile, 'utf-8');
+            // Extract import statements
+            const importMatches = content.match(/import\s+{[^}]+}\s+from\s+['"]([^'"]+)['"]/g);
+            if (importMatches) {
+                for (const importMatch of importMatches) {
+                    const pathMatch = importMatch.match(/from\s+['"]([^'"]+)['"]/);
+                    if (pathMatch) {
+                        const importPath = pathMatch[1];
+                        // Skip relative imports and focus on package imports
+                        if (!importPath.startsWith('.') && !importPath.startsWith('/')) {
+                            if (!importPaths.includes(importPath)) {
+                                importPaths.push(importPath);
+                            }
+                        }
+                    }
+                }
+            }
+            // Extract component names to detect prefixes
+            const componentMatches = content.match(/<([A-Z][A-Za-z0-9]*)/g);
+            if (componentMatches) {
+                for (const match of componentMatches) {
+                    const componentName = match.slice(1); // Remove '<'
+                    // Detect common prefixes (2-3 characters)
+                    const prefixMatch = componentName.match(/^([A-Z]{1,3})[A-Z]/);
+                    if (prefixMatch) {
+                        const prefix = prefixMatch[1];
+                        if (!componentPrefixes.includes(prefix)) {
+                            componentPrefixes.push(prefix);
+                        }
+                    }
+                }
+            }
+            // Look for layout patterns
+            const layoutMatches = content.match(/<(Grid|Row|Col|Box|Stack|Flex|Layout|Container|Section)[^>]*>/g);
+            if (layoutMatches) {
+                for (const match of layoutMatches) {
+                    if (!layoutPatterns.includes(match)) {
+                        layoutPatterns.push(match);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            // Skip files we can't read
+        }
+    }
+    return {
+        storyFiles,
+        componentDirs,
+        importPaths,
+        componentPrefixes,
+        layoutPatterns
+    };
+}
+/**
+ * Auto-detects design system configuration by analyzing the project structure
+ */
+export function autoDetectDesignSystem() {
+    const cwd = process.cwd();
+    const packageJsonPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+        return null;
+    }
+    try {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+        // First, try to detect known design systems from package.json
+        const knownSystems = detectKnownDesignSystems(dependencies);
+        if (knownSystems) {
+            console.log(`🎨 Detected known design system: ${knownSystems.importPath}`);
+        }
+        // Analyze existing Storybook files for patterns
+        const analysis = analyzeExistingStories(cwd);
+        console.log(`📊 Analysis found: ${analysis.storyFiles.length} story files, ${analysis.componentDirs.length} component directories`);
+        // Determine the most likely component directory
+        const componentPath = findMostLikelyComponentDirectory(analysis.componentDirs, cwd);
+        // Determine the most likely import path
+        const importPath = findMostLikelyImportPath(analysis.importPaths, packageJson.name);
+        // Determine component prefix
+        const componentPrefix = findMostLikelyPrefix(analysis.componentPrefixes);
+        // Determine layout patterns
+        const layoutRules = detectLayoutPatterns(analysis.layoutPatterns, componentPrefix);
+        // Build configuration
+        const config = {
+            generatedStoriesPath: path.join(cwd, 'src/stories/generated/'),
+            componentsPath: componentPath,
+            importPath: importPath,
+            componentPrefix: componentPrefix,
+            layoutRules: layoutRules
+        };
+        // Merge with known system config if available
+        if (knownSystems) {
+            return { ...knownSystems, ...config };
+        }
+        return config;
+    }
+    catch (error) {
+        console.warn('Failed to auto-detect design system:', error);
+        return null;
+    }
+}
+/**
+ * Detects known design systems from package.json dependencies
+ */
+function detectKnownDesignSystems(dependencies) {
+    // Material-UI detection
+    if (dependencies['@mui/material']) {
+        return {
+            importPath: '@mui/material',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'Grid',
+                columnComponent: 'Grid',
+                containerComponent: 'Container',
+                layoutExamples: {
+                    twoColumn: `<Grid container spacing={2}>
+  <Grid item xs={6}>
+    <Card>
+      <CardContent>
+        <Typography variant="h5">Left Card</Typography>
+        <Typography>Left content</Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+  <Grid item xs={6}>
+    <Card>
+      <CardContent>
+        <Typography variant="h5">Right Card</Typography>
+        <Typography>Right content</Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+</Grid>`
+                }
+            }
+        };
+    }
+    // Chakra UI detection
+    if (dependencies['@chakra-ui/react']) {
+        return {
+            importPath: '@chakra-ui/react',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'SimpleGrid',
+                columnComponent: 'Box',
+                containerComponent: 'Container'
+            }
+        };
+    }
+    // Ant Design detection
+    if (dependencies['antd']) {
+        return {
+            importPath: 'antd',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'Row',
+                columnComponent: 'Col',
+                containerComponent: 'div'
+            }
+        };
+    }
+    // Mantine detection
+    if (dependencies['@mantine/core']) {
+        return {
+            importPath: '@mantine/core',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'SimpleGrid',
+                columnComponent: 'div',
+                containerComponent: 'Container'
+            }
+        };
+    }
+    // ShadCN/UI detection
+    if (dependencies['@radix-ui/react-slot'] || dependencies['class-variance-authority']) {
+        return {
+            importPath: '@/components/ui',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'div',
+                columnComponent: 'div',
+                containerComponent: 'div',
+                layoutExamples: {
+                    twoColumn: `<div className="grid grid-cols-2 gap-4">
+  <div>
+    <Card>
+      <CardHeader>
+        <CardTitle>Left Card</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Left content</p>
+      </CardContent>
+    </Card>
+  </div>
+  <div>
+    <Card>
+      <CardHeader>
+        <CardTitle>Right Card</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Right content</p>
+      </CardContent>
+    </Card>
+  </div>
+</div>`
+                }
+            }
+        };
+    }
+    return null;
+}
+/**
+ * Finds the most likely component directory based on story file locations
+ */
+function findMostLikelyComponentDirectory(componentDirs, projectRoot) {
+    if (componentDirs.length === 0) {
+        // Fallback to common patterns
+        const commonPaths = [
+            path.join(projectRoot, 'src/components'),
+            path.join(projectRoot, 'components'),
+            path.join(projectRoot, 'lib/components'),
+            path.join(projectRoot, 'src/ui'),
+            path.join(projectRoot, 'ui')
+        ];
+        for (const commonPath of commonPaths) {
+            if (fs.existsSync(commonPath)) {
+                return commonPath;
+            }
+        }
+        return path.join(projectRoot, 'src/components');
+    }
+    // Find the common parent directory of most story files
+    const dirCounts = {};
+    for (const dir of componentDirs) {
+        // Count occurrences of parent directories
+        let currentDir = dir;
+        while (currentDir !== projectRoot && currentDir !== path.dirname(currentDir)) {
+            dirCounts[currentDir] = (dirCounts[currentDir] || 0) + 1;
+            currentDir = path.dirname(currentDir);
+        }
+    }
+    // Find the directory with the most story files
+    let maxCount = 0;
+    let bestDir = path.join(projectRoot, 'src/components');
+    for (const [dir, count] of Object.entries(dirCounts)) {
+        if (count > maxCount) {
+            maxCount = count;
+            bestDir = dir;
+        }
+    }
+    return bestDir;
+}
+/**
+ * Finds the most likely import path based on import analysis
+ */
+function findMostLikelyImportPath(importPaths, packageName) {
+    if (importPaths.length === 0) {
+        return packageName || 'your-component-library';
+    }
+    // Count frequency of import paths
+    const pathCounts = {};
+    for (const importPath of importPaths) {
+        // Skip common non-component libraries
+        if (importPath.includes('react') || importPath.includes('storybook') ||
+            importPath.includes('testing') || importPath.includes('jest')) {
+            continue;
+        }
+        pathCounts[importPath] = (pathCounts[importPath] || 0) + 1;
+    }
+    // Find the most common import path
+    let maxCount = 0;
+    let bestPath = packageName || 'your-component-library';
+    for (const [importPath, count] of Object.entries(pathCounts)) {
+        if (count > maxCount) {
+            maxCount = count;
+            bestPath = importPath;
+        }
+    }
+    return bestPath;
+}
+/**
+ * Finds the most likely component prefix
+ */
+function findMostLikelyPrefix(componentPrefixes) {
+    if (componentPrefixes.length === 0) {
+        return '';
+    }
+    // Count frequency of prefixes
+    const prefixCounts = {};
+    for (const prefix of componentPrefixes) {
+        prefixCounts[prefix] = (prefixCounts[prefix] || 0) + 1;
+    }
+    // Find the most common prefix
+    let maxCount = 0;
+    let bestPrefix = '';
+    for (const [prefix, count] of Object.entries(prefixCounts)) {
+        if (count > maxCount && count > 2) { // Only consider prefixes used multiple times
+            maxCount = count;
+            bestPrefix = prefix;
+        }
+    }
+    return bestPrefix;
+}
+/**
+ * Detects layout patterns from existing components
+ */
+function detectLayoutPatterns(layoutPatterns, componentPrefix) {
+    const rules = {
+        multiColumnWrapper: 'div',
+        columnComponent: 'div',
+        containerComponent: 'div',
+        layoutExamples: {
+            twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`
+        },
+        prohibitedElements: []
+    };
+    // Analyze layout patterns to determine best components
+    for (const pattern of layoutPatterns) {
+        if (pattern.includes('Grid')) {
+            rules.multiColumnWrapper = componentPrefix ? `${componentPrefix}Grid` : 'Grid';
+            rules.columnComponent = componentPrefix ? `${componentPrefix}Grid` : 'Grid';
+        }
+        else if (pattern.includes('Row') && pattern.includes('Col')) {
+            rules.multiColumnWrapper = componentPrefix ? `${componentPrefix}Row` : 'Row';
+            rules.columnComponent = componentPrefix ? `${componentPrefix}Col` : 'Col';
+        }
+        else if (pattern.includes('Stack')) {
+            rules.multiColumnWrapper = componentPrefix ? `${componentPrefix}Stack` : 'Stack';
+            rules.columnComponent = componentPrefix ? `${componentPrefix}Box` : 'Box';
+        }
+        else if (pattern.includes('Layout')) {
+            rules.multiColumnWrapper = componentPrefix ? `${componentPrefix}Layout` : 'Layout';
+            rules.columnComponent = componentPrefix ? `${componentPrefix}LayoutSection` : 'LayoutSection';
+        }
+        if (pattern.includes('Container')) {
+            rules.containerComponent = componentPrefix ? `${componentPrefix}Container` : 'Container';
+        }
+    }
+    return rules;
+}

package/dist/story-generator/generateStory.js

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import path from 'path';
+import { STORY_UI_CONFIG } from '../story-ui.config.js';
+function slugify(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+export function generateStory({ fileContents, fileName }) {
+    const outPath = path.join(STORY_UI_CONFIG.generatedStoriesPath, fileName);
+    fs.writeFileSync(outPath, fileContents, 'utf-8');
+    return outPath;
+}
+// Mock usage:
+// generateStory({
+//   title: 'Login Form',
+//   jsx: '<al-input label="Email"></al-input>\n<al-input label="Password" type="password"></al-input>\n<al-button>Login</al-button>'
+// });

package/dist/story-generator/gitignoreManager.js

@@ -0,0 +1,182 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Manages .gitignore entries for Story UI generated content
+ */
+export class GitignoreManager {
+    constructor(config, projectRoot = process.cwd()) {
+        this.config = config;
+        this.projectRoot = projectRoot;
+    }
+    /**
+     * Ensures the generated stories directory is added to .gitignore
+     */
+    ensureGeneratedDirectoryIgnored() {
+        const gitignorePath = path.join(this.projectRoot, '.gitignore');
+        const generatedPath = this.getRelativeGeneratedPath();
+        if (!generatedPath) {
+            console.warn('Could not determine relative path for generated stories directory');
+            return;
+        }
+        // Create .gitignore if it doesn't exist
+        if (!fs.existsSync(gitignorePath)) {
+            this.createGitignore(gitignorePath, generatedPath);
+            return;
+        }
+        // Check if the path is already ignored
+        const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8');
+        if (this.isPathIgnored(gitignoreContent, generatedPath)) {
+            console.log(`✅ Generated stories directory already ignored: ${generatedPath}`);
+            return;
+        }
+        // Add the ignore rule
+        this.addIgnoreRule(gitignorePath, generatedPath);
+    }
+    /**
+     * Gets the relative path from project root to generated stories directory
+     */
+    getRelativeGeneratedPath() {
+        try {
+            const absoluteGeneratedPath = path.resolve(this.config.generatedStoriesPath);
+            const absoluteProjectRoot = path.resolve(this.projectRoot);
+            // Get relative path from project root to generated directory
+            let relativePath = path.relative(absoluteProjectRoot, absoluteGeneratedPath);
+            // Normalize path separators for cross-platform compatibility
+            relativePath = relativePath.replace(/\\/g, '/');
+            // Ensure it starts with ./ if it's a relative path
+            if (!relativePath.startsWith('../') && !relativePath.startsWith('/')) {
+                relativePath = './' + relativePath;
+            }
+            return relativePath;
+        }
+        catch (error) {
+            console.error('Error calculating relative path:', error);
+            return null;
+        }
+    }
+    /**
+     * Creates a new .gitignore file with Story UI section
+     */
+    createGitignore(gitignorePath, generatedPath) {
+        const content = this.generateGitignoreSection(generatedPath);
+        fs.writeFileSync(gitignorePath, content);
+        console.log(`✅ Created .gitignore with Story UI generated directory: ${generatedPath}`);
+    }
+    /**
+     * Checks if the generated path is already ignored
+     */
+    isPathIgnored(gitignoreContent, generatedPath) {
+        const lines = gitignoreContent.split('\n').map(line => line.trim());
+        // Check for exact match or parent directory match
+        const pathVariations = [
+            generatedPath,
+            generatedPath.replace(/^\.\//, ''),
+            generatedPath + '/',
+            generatedPath.replace(/^\.\//, '') + '/',
+            generatedPath + '/**',
+            generatedPath.replace(/^\.\//, '') + '/**'
+        ];
+        return pathVariations.some(variation => lines.includes(variation) ||
+            lines.includes(variation.replace(/\/$/, '')));
+    }
+    /**
+     * Adds ignore rule to existing .gitignore
+     */
+    addIgnoreRule(gitignorePath, generatedPath) {
+        const existingContent = fs.readFileSync(gitignorePath, 'utf-8');
+        const newSection = this.generateGitignoreSection(generatedPath);
+        // Add with proper spacing
+        const separator = existingContent.endsWith('\n') ? '\n' : '\n\n';
+        const updatedContent = existingContent + separator + newSection;
+        fs.writeFileSync(gitignorePath, updatedContent);
+        console.log(`✅ Added Story UI generated directory to .gitignore: ${generatedPath}`);
+    }
+    /**
+     * Generates the gitignore section for Story UI
+     */
+    generateGitignoreSection(generatedPath) {
+        return `# Story UI - AI Generated Stories (ephemeral, not for version control)
+# These are temporary stories for testing layouts and should not be committed
+${generatedPath}/
+${generatedPath}/**`;
+    }
+    /**
+     * Creates the generated directory if it doesn't exist
+     */
+    ensureGeneratedDirectoryExists() {
+        const generatedDir = this.config.generatedStoriesPath;
+        if (!fs.existsSync(generatedDir)) {
+            fs.mkdirSync(generatedDir, { recursive: true });
+            console.log(`✅ Created generated stories directory: ${generatedDir}`);
+            // Create a README to explain the purpose
+            this.createGeneratedDirectoryReadme(generatedDir);
+        }
+    }
+    /**
+     * Creates a README in the generated directory explaining its purpose
+     */
+    createGeneratedDirectoryReadme(generatedDir) {
+        const readmePath = path.join(generatedDir, 'README.md');
+        const readmeContent = `# AI Generated Stories
+
+This directory contains stories generated by Story UI for testing and iteration purposes.
+
+## ⚠️ Important Notes
+
+- **These stories are ephemeral** - they are meant for testing layouts and sharing with stakeholders
+- **Do not commit these files** - they are automatically ignored by git
+- **Stories are regenerated** - feel free to delete and regenerate as needed
+
+## Purpose
+
+These stories are designed for:
+- 🎨 **Layout Testing** - Test different component arrangements
+- 👥 **Stakeholder Review** - Share layouts with product owners, designers, and project managers
+- 🔄 **Rapid Iteration** - Quickly generate and modify layouts
+- 📱 **Design Validation** - Validate designs before implementation
+
+## Usage
+
+Stories in this directory will appear in Storybook under the "${this.config.storyPrefix}" section.
+
+Generated by [Story UI](https://github.com/your-org/story-ui) - AI-powered Storybook story generator.
+`;
+        fs.writeFileSync(readmePath, readmeContent);
+        console.log(`✅ Created README in generated directory`);
+    }
+    /**
+     * Cleans up old generated stories (optional utility)
+     */
+    cleanupOldStories(maxAge = 7 * 24 * 60 * 60 * 1000) {
+        const generatedDir = this.config.generatedStoriesPath;
+        if (!fs.existsSync(generatedDir)) {
+            return;
+        }
+        const files = fs.readdirSync(generatedDir);
+        const now = Date.now();
+        let cleanedCount = 0;
+        for (const file of files) {
+            if (!file.endsWith('.stories.tsx')) {
+                continue;
+            }
+            const filePath = path.join(generatedDir, file);
+            const stats = fs.statSync(filePath);
+            const age = now - stats.mtime.getTime();
+            if (age > maxAge) {
+                fs.unlinkSync(filePath);
+                cleanedCount++;
+            }
+        }
+        if (cleanedCount > 0) {
+            console.log(`🧹 Cleaned up ${cleanedCount} old generated stories`);
+        }
+    }
+}
+/**
+ * Convenience function to set up gitignore for Story UI
+ */
+export function setupGitignoreForStoryUI(config, projectRoot) {
+    const manager = new GitignoreManager(config, projectRoot);
+    manager.ensureGeneratedDirectoryExists();
+    manager.ensureGeneratedDirectoryIgnored();
+}