@tpitre/story-ui 1.0.0

package/dist/story-generator/storySync.js

@@ -0,0 +1,201 @@
+import fs from 'fs';
+import path from 'path';
+import { getInMemoryStoryService } from './inMemoryStoryService.js';
+import { setupProductionGitignore } from './productionGitignoreManager.js';
+/**
+ * Story synchronization service that keeps chat interface, file system, and memory in sync
+ */
+export class StorySyncService {
+    constructor(config) {
+        this.config = config;
+        const gitignoreManager = setupProductionGitignore(config);
+        this.isProduction = gitignoreManager.isProductionMode();
+    }
+    /**
+     * Gets all available stories from both file system and memory
+     */
+    async getAllStories() {
+        const stories = [];
+        if (this.isProduction) {
+            // Production: Get from memory
+            const memoryService = getInMemoryStoryService(this.config);
+            const memoryStories = memoryService.getAllStories();
+            stories.push(...memoryStories.map(story => ({
+                id: story.id,
+                title: story.title,
+                fileName: `${story.id}.stories.tsx`,
+                description: story.description,
+                createdAt: story.createdAt,
+                lastAccessed: story.lastAccessed,
+                source: 'memory',
+                content: story.content,
+                prompt: story.prompt
+            })));
+        }
+        else {
+            // Development: Get from file system
+            const fileSystemStories = await this.getFileSystemStories();
+            stories.push(...fileSystemStories);
+            // Also include any memory stories (for hybrid scenarios)
+            const memoryService = getInMemoryStoryService(this.config);
+            const memoryStories = memoryService.getAllStories();
+            stories.push(...memoryStories.map(story => ({
+                id: story.id,
+                title: story.title,
+                fileName: `${story.id}.stories.tsx`,
+                description: story.description,
+                createdAt: story.createdAt,
+                lastAccessed: story.lastAccessed,
+                source: 'memory',
+                content: story.content,
+                prompt: story.prompt
+            })));
+        }
+        // Sort by creation date (newest first)
+        return stories.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    /**
+     * Gets stories from the file system
+     */
+    async getFileSystemStories() {
+        const stories = [];
+        if (!fs.existsSync(this.config.generatedStoriesPath)) {
+            return stories;
+        }
+        const files = fs.readdirSync(this.config.generatedStoriesPath);
+        const storyFiles = files.filter(file => file.endsWith('.stories.tsx'));
+        for (const file of storyFiles) {
+            try {
+                const filePath = path.join(this.config.generatedStoriesPath, file);
+                const stats = fs.statSync(filePath);
+                const content = fs.readFileSync(filePath, 'utf-8');
+                // Extract title from file content - handle escaped quotes more robustly
+                let title = file.replace('.stories.tsx', ''); // fallback
+                // Find the title line - look for the pattern and extract until the closing quote + comma
+                const titleStart = content.indexOf("title: '");
+                if (titleStart !== -1) {
+                    const startPos = titleStart + "title: '".length;
+                    const endPos = content.indexOf("',", startPos);
+                    if (endPos !== -1) {
+                        title = content.substring(startPos, endPos);
+                    }
+                }
+                // Remove the story prefix and unescape characters
+                title = title
+                    .replace(this.config.storyPrefix, '')
+                    .replace(/\\"/g, '"')
+                    .replace(/\\'/g, "'")
+                    .replace(/\\\\/g, '\\');
+                // Generate ID from filename
+                const id = file.replace('.stories.tsx', '');
+                stories.push({
+                    id,
+                    title,
+                    fileName: file,
+                    description: `Generated story: ${title}`,
+                    createdAt: stats.birthtime,
+                    lastAccessed: stats.atime,
+                    source: 'filesystem',
+                    content,
+                    prompt: undefined
+                });
+            }
+            catch (error) {
+                console.warn(`Failed to read story file ${file}:`, error);
+            }
+        }
+        return stories;
+    }
+    /**
+     * Deletes a story from both file system and memory
+     */
+    async deleteStory(storyId) {
+        let deleted = false;
+        // Delete from memory
+        const memoryService = getInMemoryStoryService(this.config);
+        if (memoryService.deleteStory(storyId)) {
+            deleted = true;
+        }
+        // Delete from file system (if not production)
+        if (!this.isProduction) {
+            const files = fs.readdirSync(this.config.generatedStoriesPath);
+            const matchingFiles = files.filter(file => file.includes(storyId) || file.startsWith(storyId));
+            for (const file of matchingFiles) {
+                try {
+                    const filePath = path.join(this.config.generatedStoriesPath, file);
+                    fs.unlinkSync(filePath);
+                    deleted = true;
+                }
+                catch (error) {
+                    console.warn(`Failed to delete story file ${file}:`, error);
+                }
+            }
+        }
+        return deleted;
+    }
+    /**
+     * Gets a specific story by ID
+     */
+    async getStory(storyId) {
+        const allStories = await this.getAllStories();
+        return allStories.find(story => story.id === storyId) || null;
+    }
+    /**
+     * Clears all stories
+     */
+    async clearAllStories() {
+        // Clear memory
+        const memoryService = getInMemoryStoryService(this.config);
+        memoryService.clearAllStories();
+        // Clear file system (if not production)
+        if (!this.isProduction && fs.existsSync(this.config.generatedStoriesPath)) {
+            const files = fs.readdirSync(this.config.generatedStoriesPath);
+            const storyFiles = files.filter(file => file.endsWith('.stories.tsx'));
+            for (const file of storyFiles) {
+                try {
+                    const filePath = path.join(this.config.generatedStoriesPath, file);
+                    fs.unlinkSync(filePath);
+                }
+                catch (error) {
+                    console.warn(`Failed to delete story file ${file}:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * Syncs localStorage chat history with actual stories
+     */
+    async syncChatHistory() {
+        const actualStories = await this.getAllStories();
+        // This would be called from the frontend to sync localStorage
+        return {
+            actualStories: actualStories.map(story => ({
+                id: story.id,
+                title: story.title,
+                fileName: story.fileName,
+                lastUpdated: story.createdAt.getTime()
+            })),
+            shouldClearOrphanedChats: true
+        };
+    }
+    /**
+     * Validates that a chat session corresponds to an actual story
+     */
+    async validateChatSession(chatId) {
+        const story = await this.getStory(chatId);
+        return story !== null;
+    }
+}
+/**
+ * Global story sync service instance
+ */
+let globalStorySyncService = null;
+/**
+ * Gets or creates the global story sync service
+ */
+export function getStorySyncService(config) {
+    if (!globalStorySyncService) {
+        globalStorySyncService = new StorySyncService(config);
+    }
+    return globalStorySyncService;
+}

package/dist/story-ui.config.js

@@ -0,0 +1,114 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// Default generic configuration
+export const DEFAULT_CONFIG = {
+    generatedStoriesPath: path.resolve(process.cwd(), './src/stories/generated/'),
+    componentsPath: path.resolve(process.cwd(), './src/components'),
+    componentsMetadataPath: undefined,
+    storyPrefix: 'Generated/',
+    defaultAuthor: 'Story UI AI',
+    importPath: 'your-component-library',
+    componentPrefix: '',
+    components: [], // Will be populated dynamically
+    layoutRules: {
+        multiColumnWrapper: 'div',
+        columnComponent: 'div',
+        containerComponent: 'div',
+        layoutExamples: {
+            twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>
+    <Card>
+      <h3>Left Card</h3>
+      <p>Left content</p>
+    </Card>
+  </div>
+  <div>
+    <Card>
+      <h3>Right Card</h3>
+      <p>Right content</p>
+    </Card>
+  </div>
+</div>`,
+            threeColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+  <div>
+    <Card>
+      <h3>Column 1</h3>
+      <p>First column content</p>
+    </Card>
+  </div>
+  <div>
+    <Card>
+      <h3>Column 2</h3>
+      <p>Second column content</p>
+    </Card>
+  </div>
+  <div>
+    <Card>
+      <h3>Column 3</h3>
+      <p>Third column content</p>
+    </Card>
+  </div>
+</div>`
+        },
+        prohibitedElements: []
+    },
+    sampleStory: `import type { StoryObj } from '@storybook/react-webpack5';
+import { Card } from 'your-component-library';
+
+export default {
+  title: 'Layouts/Sample Layout',
+  component: Card,
+};
+
+export const Default: StoryObj<typeof Card> = {
+  args: {
+    children: (
+      <Card>
+        <h3>Sample Card</h3>
+        <p>Sample content</p>
+      </Card>
+    )
+  }
+};`
+};
+// Generic configuration template for other design systems
+export const GENERIC_CONFIG_TEMPLATE = {
+    storyPrefix: 'Generated/',
+    defaultAuthor: 'Story UI AI',
+    componentPrefix: '',
+    layoutRules: {
+        multiColumnWrapper: 'div',
+        columnComponent: 'div',
+        layoutExamples: {
+            twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`,
+            threeColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+  <div>Column 3 content</div>
+</div>`
+        },
+        prohibitedElements: []
+    }
+};
+// Default configuration - should be overridden by user's story-ui.config.js
+export const STORY_UI_CONFIG = DEFAULT_CONFIG;
+// Function to merge user config with defaults
+export function createStoryUIConfig(userConfig) {
+    return {
+        ...DEFAULT_CONFIG,
+        ...userConfig,
+        layoutRules: {
+            ...DEFAULT_CONFIG.layoutRules,
+            ...userConfig.layoutRules,
+            layoutExamples: {
+                ...DEFAULT_CONFIG.layoutRules.layoutExamples,
+                ...userConfig.layoutRules?.layoutExamples
+            }
+        }
+    };
+}

package/dist/story-ui.config.loader.js

@@ -0,0 +1,205 @@
+import fs from 'fs';
+import path from 'path';
+import { createStoryUIConfig, GENERIC_CONFIG_TEMPLATE } from './story-ui.config.js';
+/**
+ * Loads Story UI configuration from various sources
+ */
+export class StoryUIConfigLoader {
+    constructor() {
+        this.config = null;
+    }
+    static getInstance() {
+        if (!StoryUIConfigLoader.instance) {
+            StoryUIConfigLoader.instance = new StoryUIConfigLoader();
+        }
+        return StoryUIConfigLoader.instance;
+    }
+    /**
+     * Load configuration from a file
+     */
+    async loadFromFile(configPath) {
+        if (!fs.existsSync(configPath)) {
+            throw new Error(`Configuration file not found: ${configPath}`);
+        }
+        try {
+            // Support both .js and .json config files
+            let userConfig;
+            if (configPath.endsWith('.json')) {
+                const configContent = fs.readFileSync(configPath, 'utf-8');
+                userConfig = JSON.parse(configContent);
+            }
+            else {
+                // Dynamic import for .js/.ts files
+                const configModule = await import(configPath);
+                userConfig = configModule.default || configModule.config || configModule;
+            }
+            this.config = createStoryUIConfig(userConfig);
+            return this.config;
+        }
+        catch (error) {
+            throw new Error(`Failed to load configuration from ${configPath}: ${error}`);
+        }
+    }
+    /**
+     * Load configuration from package.json
+     */
+    loadFromPackageJson(packagePath = process.cwd()) {
+        const packageJsonPath = path.join(packagePath, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            throw new Error(`package.json not found at ${packageJsonPath}`);
+        }
+        try {
+            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+            const storyUIConfig = packageJson.storyUI || {};
+            // Auto-detect common paths if not specified
+            if (!storyUIConfig.generatedStoriesPath) {
+                const possiblePaths = [
+                    path.join(packagePath, 'src/stories/generated'),
+                    path.join(packagePath, 'stories/generated'),
+                    path.join(packagePath, '.storybook/generated'),
+                    path.join(packagePath, 'src/components/generated')
+                ];
+                for (const possiblePath of possiblePaths) {
+                    if (fs.existsSync(path.dirname(possiblePath))) {
+                        storyUIConfig.generatedStoriesPath = possiblePath;
+                        break;
+                    }
+                }
+            }
+            // Auto-detect components path
+            if (!storyUIConfig.componentsPath) {
+                const possiblePaths = [
+                    path.join(packagePath, 'src/components'),
+                    path.join(packagePath, 'lib/components'),
+                    path.join(packagePath, 'components'),
+                    path.join(packagePath, 'src')
+                ];
+                for (const possiblePath of possiblePaths) {
+                    if (fs.existsSync(possiblePath)) {
+                        storyUIConfig.componentsPath = possiblePath;
+                        break;
+                    }
+                }
+            }
+            // Auto-detect import path from package name
+            if (!storyUIConfig.importPath && packageJson.name) {
+                storyUIConfig.importPath = packageJson.name;
+            }
+            this.config = createStoryUIConfig(storyUIConfig);
+            return this.config;
+        }
+        catch (error) {
+            throw new Error(`Failed to load configuration from package.json: ${error}`);
+        }
+    }
+    /**
+     * Auto-detect configuration from project structure
+     */
+    autoDetectConfig(projectPath = process.cwd()) {
+        const config = { ...GENERIC_CONFIG_TEMPLATE };
+        // Try to detect from package.json first
+        try {
+            return this.loadFromPackageJson(projectPath);
+        }
+        catch (error) {
+            console.warn('Could not load from package.json, using auto-detection');
+        }
+        // Auto-detect paths
+        const possibleComponentPaths = [
+            path.join(projectPath, 'src/components'),
+            path.join(projectPath, 'lib/components'),
+            path.join(projectPath, 'components'),
+            path.join(projectPath, 'src')
+        ];
+        for (const possiblePath of possibleComponentPaths) {
+            if (fs.existsSync(possiblePath)) {
+                config.componentsPath = possiblePath;
+                break;
+            }
+        }
+        // Set generated stories path
+        config.generatedStoriesPath = path.join(projectPath, 'src/stories/generated');
+        // Try to detect component prefix from existing components
+        if (config.componentsPath) {
+            const componentDirs = fs.readdirSync(config.componentsPath, { withFileTypes: true })
+                .filter(d => d.isDirectory())
+                .map(d => d.name)
+                .slice(0, 5); // Check first 5 components
+            // Look for common prefixes
+            const prefixes = ['UI', 'App', 'My', 'Custom'];
+            for (const prefix of prefixes) {
+                if (componentDirs.some(name => name.startsWith(prefix))) {
+                    config.componentPrefix = prefix;
+                    break;
+                }
+            }
+        }
+        this.config = createStoryUIConfig(config);
+        return this.config;
+    }
+    /**
+     * Get current configuration
+     */
+    getConfig() {
+        return this.config;
+    }
+    /**
+     * Set configuration directly
+     */
+    setConfig(config) {
+        this.config = config;
+    }
+    /**
+     * Generate a sample configuration file
+     */
+    generateSampleConfig(outputPath, type = 'json') {
+        const sampleConfig = {
+            generatedStoriesPath: './src/stories/generated',
+            componentsPath: './src/components',
+            storyPrefix: 'Generated/',
+            defaultAuthor: 'Story UI AI',
+            importPath: 'your-component-library',
+            componentPrefix: 'UI',
+            layoutRules: {
+                multiColumnWrapper: 'div',
+                columnComponent: 'div',
+                layoutExamples: {
+                    twoColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+</div>`,
+                    threeColumn: `<div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+  <div>Column 1 content</div>
+  <div>Column 2 content</div>
+  <div>Column 3 content</div>
+</div>`
+                },
+                prohibitedElements: []
+            }
+        };
+        if (type === 'json') {
+            fs.writeFileSync(outputPath, JSON.stringify(sampleConfig, null, 2));
+        }
+        else {
+            const jsContent = `export default ${JSON.stringify(sampleConfig, null, 2)};`;
+            fs.writeFileSync(outputPath, jsContent);
+        }
+        console.log(`Sample configuration written to: ${outputPath}`);
+    }
+}
+// Convenience functions
+export const configLoader = StoryUIConfigLoader.getInstance();
+export function loadStoryUIConfig(configPath) {
+    if (configPath) {
+        return configLoader.loadFromFile(configPath);
+    }
+    else {
+        // Try auto-detection
+        try {
+            return Promise.resolve(configLoader.loadFromPackageJson());
+        }
+        catch {
+            return Promise.resolve(configLoader.autoDetectConfig());
+        }
+    }
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@tpitre/story-ui",
+  "version": "1.0.0",
+  "description": "AI-powered Storybook story generator for any React component library",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "story-ui": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    ".env.sample",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "start": "yarn build && node dist/mcp-server/index.js",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Tests coming soon\" && exit 0"
+  },
+  "keywords": [
+    "storybook",
+    "ai",
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "claude",
+    "mcp",
+    "story-generation"
+  ],
+  "author": "Story UI Contributors",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/southleft/story-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/southleft/story-ui/issues"
+  },
+  "homepage": "https://github.com/southleft/story-ui#readme",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "node-fetch": "^2.6.7",
+    "commander": "^11.0.0",
+    "chalk": "^5.3.0",
+    "inquirer": "^9.2.0",
+    "concurrently": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.4.2",
+    "@types/inquirer": "^9.0.0",
+    "@types/cors": "^2.8.17",
+    "@types/node-fetch": "^2.6.12",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "@storybook/react": ">=6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "@storybook/react": {
+      "optional": false
+    }
+  }
+}

package/templates/README.md

@@ -0,0 +1,32 @@
+# Story UI Templates
+
+This directory contains template files that are copied to your project during the Story UI setup process.
+
+## Contents
+
+### StoryUI/
+- `StoryUIPanel.tsx` - The main Story UI interface component
+- `StoryUIPanel.stories.tsx` - Storybook story configuration
+- `index.tsx` - Export file for cleaner imports
+
+## Installation
+
+These files are automatically copied to your project when you run:
+
+```bash
+npx story-ui init
+```
+
+They will be installed to your configured stories directory (default: `./src/stories/generated/StoryUI/`).
+
+## Customization
+
+After installation, you can customize these components to match your design system:
+
+1. Update the styles in `StoryUIPanel.tsx` to match your theme
+2. Modify the story configuration in `StoryUIPanel.stories.tsx`
+3. Add additional features or integrations as needed
+
+## Note
+
+These files are automatically added to your `.gitignore` during setup since they're part of the Story UI installation and can be regenerated.

package/templates/StoryUI/StoryUIPanel.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import StoryUIPanel from './StoryUIPanel';
+
+export default {
+  title: 'Story UI/Story Generator',
+  component: StoryUIPanel,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'AI-powered story generator for creating complex UI layouts using your component library.'
+      }
+    }
+  }
+} as Meta<typeof StoryUIPanel>;
+
+const Template: StoryFn<typeof StoryUIPanel> = (args) => <StoryUIPanel {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Use natural language prompts to generate Storybook stories with your components.'
+    }
+  }
+};