@tpitre/story-ui 1.0.0

package/dist/story-generator/inMemoryStoryService.js

@@ -0,0 +1,128 @@
+/**
+ * In-memory story service for production environments
+ * Stores generated stories in memory and serves them via API
+ */
+export class InMemoryStoryService {
+    constructor(config) {
+        this.stories = new Map();
+        this.config = config;
+    }
+    /**
+     * Stores a generated story in memory
+     */
+    storeStory(story) {
+        this.stories.set(story.id, {
+            ...story,
+            createdAt: new Date(),
+            lastAccessed: new Date()
+        });
+        // Clean up old stories to prevent memory leaks
+        this.cleanupOldStories();
+    }
+    /**
+     * Retrieves a story by ID
+     */
+    getStory(id) {
+        const story = this.stories.get(id);
+        if (story) {
+            story.lastAccessed = new Date();
+            return story;
+        }
+        return null;
+    }
+    /**
+     * Gets all stored stories
+     */
+    getAllStories() {
+        return Array.from(this.stories.values()).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    /**
+     * Deletes a story by ID
+     */
+    deleteStory(id) {
+        return this.stories.delete(id);
+    }
+    /**
+     * Clears all stories
+     */
+    clearAllStories() {
+        this.stories.clear();
+    }
+    /**
+     * Gets story content for Storybook integration
+     */
+    getStoryContent(id) {
+        const story = this.stories.get(id);
+        return story ? story.content : null;
+    }
+    /**
+     * Gets story metadata for listing
+     */
+    getStoryMetadata() {
+        return Array.from(this.stories.values()).map(story => ({
+            id: story.id,
+            title: story.title,
+            description: story.description,
+            createdAt: story.createdAt,
+            lastAccessed: story.lastAccessed,
+            componentCount: this.countComponents(story.content)
+        }));
+    }
+    /**
+     * Cleans up old stories to prevent memory leaks
+     */
+    cleanupOldStories() {
+        const maxStories = 50; // Keep maximum 50 stories in memory
+        const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+        const now = Date.now();
+        // Remove stories older than maxAge
+        for (const [id, story] of this.stories.entries()) {
+            if (now - story.lastAccessed.getTime() > maxAge) {
+                this.stories.delete(id);
+            }
+        }
+        // If still too many stories, remove oldest ones
+        if (this.stories.size > maxStories) {
+            const sortedStories = Array.from(this.stories.entries())
+                .sort(([, a], [, b]) => a.lastAccessed.getTime() - b.lastAccessed.getTime());
+            const toRemove = sortedStories.slice(0, this.stories.size - maxStories);
+            for (const [id] of toRemove) {
+                this.stories.delete(id);
+            }
+        }
+    }
+    /**
+     * Counts components used in a story
+     */
+    countComponents(content) {
+        const componentMatches = content.match(/<[A-Z][A-Za-z0-9]*\s/g);
+        return componentMatches ? new Set(componentMatches).size : 0;
+    }
+    /**
+     * Gets memory usage statistics
+     */
+    getMemoryStats() {
+        const stories = Array.from(this.stories.values());
+        const totalSize = stories.reduce((sum, story) => sum + story.content.length, 0);
+        return {
+            storyCount: this.stories.size,
+            totalSizeBytes: totalSize,
+            averageSizeBytes: stories.length > 0 ? Math.round(totalSize / stories.length) : 0,
+            oldestStory: stories.reduce((oldest, story) => !oldest || story.createdAt < oldest.createdAt ? story : oldest, null)?.createdAt || null,
+            newestStory: stories.reduce((newest, story) => !newest || story.createdAt > newest.createdAt ? story : newest, null)?.createdAt || null
+        };
+    }
+}
+/**
+ * Global in-memory story service instance
+ */
+let globalStoryService = null;
+/**
+ * Gets or creates the global story service instance
+ */
+export function getInMemoryStoryService(config) {
+    if (!globalStoryService) {
+        globalStoryService = new InMemoryStoryService(config);
+    }
+    return globalStoryService;
+}

package/dist/story-generator/productionGitignoreManager.js

@@ -0,0 +1,333 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Production-ready gitignore manager that handles both development and server environments
+ */
+export class ProductionGitignoreManager {
+    constructor(config, projectRoot = process.cwd()) {
+        this.config = config;
+        this.projectRoot = projectRoot;
+        this.isProduction = this.detectProductionEnvironment();
+    }
+    /**
+     * Detects if we're running in a production/read-only environment
+     */
+    detectProductionEnvironment() {
+        // Check common production environment indicators
+        const prodIndicators = [
+            process.env.NODE_ENV === 'production',
+            process.env.VERCEL === '1',
+            process.env.NETLIFY === 'true',
+            process.env.CF_PAGES === '1', // Cloudflare Pages
+            process.env.RENDER === 'true',
+            process.env.RAILWAY_ENVIRONMENT === 'production',
+            // Check if we can't write to project root
+            !this.canWriteToProjectRoot()
+        ];
+        return prodIndicators.some(indicator => indicator);
+    }
+    /**
+     * Tests if we can write to the project root
+     */
+    canWriteToProjectRoot() {
+        try {
+            const testFile = path.join(this.projectRoot, '.story-ui-write-test');
+            fs.writeFileSync(testFile, 'test');
+            fs.unlinkSync(testFile);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Main setup method that adapts to environment
+     */
+    setupGitignoreIntegration() {
+        if (this.isProduction) {
+            this.handleProductionEnvironment();
+        }
+        else {
+            this.handleDevelopmentEnvironment();
+        }
+    }
+    /**
+     * Production environment: Use in-memory story generation
+     */
+    handleProductionEnvironment() {
+        console.log('🌐 Production environment detected - using in-memory story generation');
+        // Validate that gitignore is already set up
+        this.validateProductionSetup();
+        // Set up temporary directory for story generation if needed
+        this.setupTemporaryDirectory();
+    }
+    /**
+     * Development environment: Full gitignore management
+     */
+    handleDevelopmentEnvironment() {
+        console.log('🔧 Development environment - setting up gitignore integration');
+        this.ensureGeneratedDirectoryExists();
+        this.ensureGeneratedDirectoryIgnored();
+        this.createGeneratedDirectoryReadme();
+    }
+    /**
+     * Validates that production environment is properly configured
+     */
+    validateProductionSetup() {
+        const gitignorePath = path.join(this.projectRoot, '.gitignore');
+        if (!fs.existsSync(gitignorePath)) {
+            console.warn('⚠️  No .gitignore found in production. Stories will be generated in memory only.');
+            return;
+        }
+        const gitignoreContent = fs.readFileSync(gitignorePath, 'utf-8');
+        const generatedPath = this.getRelativeGeneratedPath();
+        if (generatedPath && !this.isPathIgnored(gitignoreContent, generatedPath)) {
+            console.warn(`⚠️  Generated path not in .gitignore: ${generatedPath}`);
+            console.warn('   Run "npx story-ui setup-gitignore" in development to fix this.');
+        }
+        else {
+            console.log('✅ Production gitignore configuration validated');
+        }
+    }
+    /**
+     * Sets up temporary directory for production story generation
+     */
+    setupTemporaryDirectory() {
+        try {
+            const tempDir = this.getProductionTempDirectory();
+            if (!fs.existsSync(tempDir)) {
+                fs.mkdirSync(tempDir, { recursive: true });
+                console.log(`✅ Created temporary directory: ${tempDir}`);
+            }
+        }
+        catch (error) {
+            console.warn('⚠️  Could not create temporary directory, using in-memory generation only');
+        }
+    }
+    /**
+     * Gets a writable temporary directory for production
+     */
+    getProductionTempDirectory() {
+        // Try various temporary directory locations
+        const tempOptions = [
+            process.env.TMPDIR,
+            process.env.TMP,
+            process.env.TEMP,
+            '/tmp',
+            path.join(process.cwd(), '.tmp')
+        ].filter(Boolean);
+        for (const tempPath of tempOptions) {
+            try {
+                const storyTempDir = path.join(tempPath, 'story-ui-generated');
+                fs.mkdirSync(storyTempDir, { recursive: true });
+                return storyTempDir;
+            }
+            catch {
+                continue;
+            }
+        }
+        throw new Error('No writable temporary directory found');
+    }
+    /**
+     * Creates the generated directory if it doesn't exist (development only)
+     */
+    ensureGeneratedDirectoryExists() {
+        const generatedDir = this.config.generatedStoriesPath;
+        if (!fs.existsSync(generatedDir)) {
+            fs.mkdirSync(generatedDir, { recursive: true });
+            console.log(`✅ Created generated stories directory: ${generatedDir}`);
+        }
+    }
+    /**
+     * Ensures the generated stories directory is added to .gitignore (development only)
+     */
+    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);
+            let relativePath = path.relative(absoluteProjectRoot, absoluteGeneratedPath);
+            relativePath = relativePath.replace(/\\/g, '/');
+            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());
+        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);
+        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 a README in the generated directory explaining its purpose (development only)
+     */
+    createGeneratedDirectoryReadme() {
+        const generatedDir = this.config.generatedStoriesPath;
+        const readmePath = path.join(generatedDir, 'README.md');
+        if (fs.existsSync(readmePath)) {
+            return; // Don't overwrite existing README
+        }
+        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.
+`;
+        try {
+            fs.writeFileSync(readmePath, readmeContent);
+            console.log(`✅ Created README in generated directory`);
+        }
+        catch (error) {
+            console.warn('⚠️  Could not create README in generated directory');
+        }
+    }
+    /**
+     * Cleans up old generated stories (safe for both environments)
+     */
+    cleanupOldStories(maxAge = 7 * 24 * 60 * 60 * 1000) {
+        const directories = [
+            this.config.generatedStoriesPath,
+            this.isProduction ? this.getProductionTempDirectory() : null
+        ].filter(Boolean);
+        for (const dir of directories) {
+            if (!dir || !fs.existsSync(dir))
+                continue;
+            try {
+                const files = fs.readdirSync(dir);
+                const now = Date.now();
+                let cleanedCount = 0;
+                for (const file of files) {
+                    if (!file.endsWith('.stories.tsx'))
+                        continue;
+                    const filePath = path.join(dir, 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 from ${dir}`);
+                }
+            }
+            catch (error) {
+                console.warn(`⚠️  Could not clean up stories in ${dir}`);
+            }
+        }
+    }
+    /**
+     * Gets the appropriate directory for story generation based on environment
+     */
+    getStoryGenerationPath() {
+        if (this.isProduction) {
+            try {
+                return this.getProductionTempDirectory();
+            }
+            catch {
+                // Fallback to in-memory only
+                return '';
+            }
+        }
+        return this.config.generatedStoriesPath;
+    }
+    /**
+     * Checks if we're in production mode
+     */
+    isProductionMode() {
+        return this.isProduction;
+    }
+}
+/**
+ * Convenience function to set up gitignore for Story UI (production-ready)
+ */
+export function setupProductionGitignore(config, projectRoot) {
+    const manager = new ProductionGitignoreManager(config, projectRoot);
+    manager.setupGitignoreIntegration();
+    return manager;
+}

package/dist/story-generator/promptGenerator.js

@@ -0,0 +1,201 @@
+/**
+ * Generates a comprehensive AI prompt based on the configuration and discovered components
+ */
+export function generatePrompt(config, components) {
+    const componentReference = generateComponentReference(components, config);
+    const layoutInstructions = generateLayoutInstructions(config);
+    const examples = generateExamples(config);
+    const systemPrompt = generateSystemPrompt(config);
+    const sampleStory = config.sampleStory || generateDefaultSampleStory(config, components);
+    return {
+        systemPrompt,
+        componentReference,
+        layoutInstructions,
+        examples,
+        sampleStory
+    };
+}
+/**
+ * Generates the system prompt based on configuration
+ */
+function generateSystemPrompt(config) {
+    if (config.systemPrompt) {
+        return config.systemPrompt;
+    }
+    const componentSystemName = config.componentPrefix ?
+        `${config.componentPrefix.replace(/^[A-Z]+/, '')} design system` :
+        'component library';
+    return `You are an expert UI developer creating Storybook stories. Use ONLY the React components from the ${componentSystemName} listed below.`;
+}
+/**
+ * Generates component reference documentation
+ */
+function generateComponentReference(components, config) {
+    let reference = '';
+    // Group components by category
+    const componentsByCategory = components.reduce((acc, component) => {
+        if (!acc[component.category]) {
+            acc[component.category] = [];
+        }
+        acc[component.category].push(component);
+        return acc;
+    }, {});
+    // Layout components first (most important for multi-column layouts)
+    if (componentsByCategory.layout) {
+        reference += 'LAYOUT COMPONENTS (for multi-column layouts, grids, etc.):\n';
+        for (const component of componentsByCategory.layout) {
+            reference += formatComponentReference(component, config);
+        }
+        reference += '\n';
+    }
+    // Other categories
+    const categoryOrder = ['content', 'form', 'navigation', 'feedback', 'other'];
+    for (const category of categoryOrder) {
+        if (componentsByCategory[category] && componentsByCategory[category].length > 0) {
+            reference += `${category.toUpperCase()} COMPONENTS:\n`;
+            for (const component of componentsByCategory[category]) {
+                reference += formatComponentReference(component, config);
+            }
+            reference += '\n';
+        }
+    }
+    return reference;
+}
+/**
+ * Formats a single component reference
+ */
+function formatComponentReference(component, config) {
+    let reference = `- ${component.name}`;
+    if (component.props.length > 0) {
+        reference += `: Props: ${component.props.join(', ')}`;
+    }
+    if (component.slots && component.slots.length > 0) {
+        reference += `. Slots: ${component.slots.join(', ')}`;
+    }
+    if (component.description && component.description !== `${component.name} component`) {
+        reference += ` - ${component.description}`;
+    }
+    // Add specific usage notes for layout components
+    if (component.category === 'layout') {
+        if (component.name.toLowerCase().includes('layout') && !component.name.toLowerCase().includes('section')) {
+            reference += ' - Use as main wrapper for multi-column layouts';
+        }
+        else if (component.name.toLowerCase().includes('section')) {
+            reference += ' - Use inside layout wrapper for individual columns';
+        }
+    }
+    reference += '\n';
+    return reference;
+}
+/**
+ * Generates layout-specific instructions
+ */
+function generateLayoutInstructions(config) {
+    const instructions = [];
+    const layoutRules = config.layoutRules;
+    if (layoutRules.multiColumnWrapper && layoutRules.columnComponent) {
+        instructions.push('CRITICAL LAYOUT RULES:');
+        instructions.push(`- For ANY multi-column layout (2, 3, or more columns), use CSS Grid with ${layoutRules.multiColumnWrapper} elements`);
+        instructions.push(`- Each column must be wrapped in its own ${layoutRules.columnComponent} element`);
+        instructions.push(`- Structure: <${layoutRules.multiColumnWrapper} style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}><${layoutRules.columnComponent}>column 1</${layoutRules.columnComponent}><${layoutRules.columnComponent}>column 2</${layoutRules.columnComponent}></${layoutRules.multiColumnWrapper}>`);
+        instructions.push(`- Use inline styles for CSS Grid layouts since the design system lacks proper multi-column layout components`);
+        instructions.push(`- The grid container ${layoutRules.multiColumnWrapper} should be the main component in your story, not individual cards`);
+    }
+    if (layoutRules.prohibitedElements && layoutRules.prohibitedElements.length > 0) {
+        instructions.push(`- Do NOT use plain HTML ${layoutRules.prohibitedElements.join(', ')} elements for layout - use the provided layout components`);
+    }
+    return instructions;
+}
+/**
+ * Generates layout examples
+ */
+function generateExamples(config) {
+    const examples = [];
+    const layoutExamples = config.layoutRules.layoutExamples;
+    if (layoutExamples) {
+        examples.push('EXAMPLES:');
+        examples.push('');
+        if (layoutExamples.twoColumn) {
+            examples.push('Two-column layout:');
+            examples.push(layoutExamples.twoColumn);
+            examples.push('');
+        }
+        if (layoutExamples.threeColumn) {
+            examples.push('Three-column layout:');
+            examples.push(layoutExamples.threeColumn);
+            examples.push('');
+        }
+        if (layoutExamples.grid) {
+            examples.push('Grid layout:');
+            examples.push(layoutExamples.grid);
+            examples.push('');
+        }
+    }
+    return examples;
+}
+/**
+ * Generates a default sample story if none provided
+ */
+function generateDefaultSampleStory(config, components) {
+    const layoutComponent = components.find(c => c.category === 'layout' && !c.name.toLowerCase().includes('section'));
+    const sectionComponent = components.find(c => c.category === 'layout' && c.name.toLowerCase().includes('section'));
+    const contentComponent = components.find(c => c.category === 'content');
+    const mainComponent = layoutComponent?.name || contentComponent?.name || components[0]?.name || 'div';
+    const imports = [mainComponent];
+    if (sectionComponent)
+        imports.push(sectionComponent.name);
+    if (contentComponent && contentComponent.name !== mainComponent)
+        imports.push(contentComponent.name);
+    const importStatement = `import { ${imports.join(', ')} } from '${config.importPath}';`;
+    let children = '';
+    if (layoutComponent && sectionComponent) {
+        children = `
+      <${layoutComponent.name}>
+        <${sectionComponent.name}>
+          ${contentComponent ? `<${contentComponent.name}>Sample content</${contentComponent.name}>` : 'Sample content'}
+        </${sectionComponent.name}>
+      </${layoutComponent.name}>`;
+    }
+    else if (contentComponent) {
+        children = `<${contentComponent.name}>Sample content</${contentComponent.name}>`;
+    }
+    else {
+        children = '<div>Sample content</div>';
+    }
+    return `import type { StoryObj } from '@storybook/react-webpack5';
+${importStatement}
+
+export default {
+  title: 'Layouts/Sample Layout',
+  component: ${mainComponent},
+  subcomponents: { ${imports.slice(1).join(', ')} },
+};
+
+export const Default: StoryObj<typeof ${mainComponent}> = {
+  args: {
+    children: (${children}
+    )
+  }
+};`;
+}
+/**
+ * Builds the complete Claude prompt
+ */
+export function buildClaudePrompt(userPrompt, config, components) {
+    const generated = generatePrompt(config, components);
+    const promptParts = [
+        generated.systemPrompt,
+        '',
+        ...generated.layoutInstructions,
+        '',
+        'Available components:',
+        generated.componentReference,
+        ...generated.examples,
+    ];
+    // Add critical structure instructions for multi-column layouts
+    if (config.layoutRules.multiColumnWrapper && config.layoutRules.columnComponent) {
+        promptParts.push(`CRITICAL: For multi-column layouts, the children prop must contain a SINGLE ${config.layoutRules.multiColumnWrapper} with CSS Grid styling wrapping all ${config.layoutRules.columnComponent} components.`, `WRONG: children: (<><${config.layoutRules.columnComponent}>...</${config.layoutRules.columnComponent}><${config.layoutRules.columnComponent}>...</${config.layoutRules.columnComponent}></>)`, `CORRECT: children: (<${config.layoutRules.multiColumnWrapper} style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}><${config.layoutRules.columnComponent}>...</${config.layoutRules.columnComponent}><${config.layoutRules.columnComponent}>...</${config.layoutRules.columnComponent}></${config.layoutRules.multiColumnWrapper}>)`, '');
+    }
+    promptParts.push(`Output a complete Storybook story file in TypeScript. Import components from "${config.importPath}". Use the following sample as a template. Respond ONLY with a single code block containing the full file, and nothing else.`, '', 'Sample story format:', generated.sampleStory, '', 'User request:', userPrompt);
+    return promptParts.join('\n');
+}