@tpitre/story-ui 2.2.0 → 2.3.1

package/templates/production-app/vite.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  // Load env file based on mode
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [react()],
+
+    // Define environment variables to expose to the client
+    define: {
+      // Backend API URL - required for production
+      'import.meta.env.VITE_BACKEND_URL': JSON.stringify(
+        env.VITE_BACKEND_URL || 'http://localhost:4001'
+      ),
+      // App title customization
+      'import.meta.env.VITE_APP_TITLE': JSON.stringify(
+        env.VITE_APP_TITLE || 'Story UI'
+      ),
+    },
+
+    // Resolve aliases for cleaner imports
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@components': path.resolve(__dirname, './src/components'),
+      },
+    },
+
+    // Server configuration for development
+    server: {
+      port: 5173,
+      strictPort: false,
+      host: true, // Listen on all addresses
+      // Proxy API requests to backend in development
+      proxy: {
+        '/mcp': {
+          target: env.VITE_BACKEND_URL || 'http://localhost:4001',
+          changeOrigin: true,
+        },
+        '/story-ui': {
+          target: env.VITE_BACKEND_URL || 'http://localhost:4001',
+          changeOrigin: true,
+        },
+      },
+    },
+
+    // Build configuration
+    build: {
+      outDir: 'dist',
+      sourcemap: mode === 'development',
+      // Optimize chunk size
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            // Split vendor chunks for better caching
+            'vendor-react': ['react', 'react-dom'],
+            'vendor-babel': ['@babel/standalone'],
+          },
+        },
+      },
+      // Target modern browsers
+      target: 'es2020',
+      // Minification
+      minify: 'esbuild',
+    },
+
+    // Optimize dependencies
+    optimizeDeps: {
+      include: ['react', 'react-dom', '@babel/standalone'],
+    },
+
+    // Preview server configuration (for testing production build locally)
+    preview: {
+      port: 4173,
+      strictPort: false,
+      host: true,
+    },
+  };
+});

package/templates/react-import-rule.json

@@ -13,11 +13,11 @@
           "correct": [
             "import React from 'react';",
             "import type { Meta, StoryObj } from '@storybook/react-webpack5';",
-            "import { Button, Card } from 'antd';"
+            "import { Button, Card } from 'your-component-library';"
           ],
           "incorrect": [
             "import type { Meta, StoryObj } from '@storybook/react-webpack5';",
-            "import { Button, Card } from 'antd';",
+            "import { Button, Card } from 'your-component-library';",
             "// Missing React import!"
           ]
         }

package/dist/index.js

@@ -1,12 +0,0 @@
-// Main exports for Story UI package
-export * from './story-ui.config.js';
-export * from './story-ui.config.loader.js';
-export * from './story-generator/componentDiscovery.js';
-export * from './story-generator/promptGenerator.js';
-export { createStoryUIConfig, DEFAULT_CONFIG, GENERIC_CONFIG_TEMPLATE } from './story-ui.config.js';
-export { configLoader, loadStoryUIConfig } from './story-ui.config.loader.js';
-export { discoverComponents, discoverComponentsFromDirectory, discoverComponentsFromCustomElements, discoverComponentsFromPackage } from './story-generator/componentDiscovery.js';
-export { generatePrompt, buildClaudePrompt } from './story-generator/promptGenerator.js';
-export { ProductionGitignoreManager, setupProductionGitignore } from './story-generator/productionGitignoreManager.js';
-export { InMemoryStoryService, getInMemoryStoryService } from './story-generator/inMemoryStoryService.js';
-export { StorySyncService, getStorySyncService } from './story-generator/storySync.js';

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

@@ -1,205 +0,0 @@
-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());
-        }
-    }
-}