@tpitre/story-ui 1.7.0 → 2.0.0

package/dist/cli/index.js

@@ -7,6 +7,7 @@ import { fileURLToPath } from 'url';
 import { setupProductionGitignore } from '../story-generator/productionGitignoreManager.js';
 import { createStoryUIConfig } from '../story-ui.config.js';
 import { setupCommand } from './setup.js';
+import net from 'net';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const program = new Command();
@@ -25,16 +26,34 @@ program
     .description('Start the Story UI server')
     .option('-p, --port <port>', 'Port to run the server on', '4001')
     .option('-c, --config <config>', 'Path to configuration file')
-    .action((options) => {
+    .action(async (options) => {
     console.log('🚀 Starting Story UI server...');
     // Use absolute path to avoid dist/dist issue when package is linked
     const pkgRoot = path.resolve(__dirname, '..');
     const serverPath = path.join(pkgRoot, 'mcp-server/index.js');
     console.log(`✅ Using MCP server at: ${serverPath}`);
-    const env = { ...process.env };
-    if (options.port) {
-        env.PORT = options.port;
+    // FIRST_EDIT: determine an available port
+    const requestedPort = parseInt(options.port || '4001', 10);
+    const isPortFree = (port) => {
+        return new Promise((resolve) => {
+            const tester = net.createServer()
+                .once('error', () => resolve(false))
+                .once('listening', () => {
+                tester.close();
+                resolve(true);
+            })
+                .listen(port);
+        });
+    };
+    let finalPort = requestedPort;
+    // eslint-disable-next-line no-await-in-loop
+    while (!(await isPortFree(finalPort))) {
+        finalPort += 1;
     }
+    if (finalPort !== requestedPort) {
+        console.log(`⚠️  Port ${requestedPort} is in use. Using ${finalPort} instead.`);
+    }
+    const env = { ...process.env, PORT: String(finalPort) };
     if (options.config) {
         env.STORY_UI_CONFIG_PATH = options.config;
     }
@@ -131,26 +150,6 @@ async function autoDetectAndCreateConfig() {
 async function createTemplateConfig(template) {
     let config;
     switch (template) {
-        case 'material-ui':
-            config = {
-                importPath: '@mui/material',
-                componentPrefix: '',
-                layoutRules: {
-                    multiColumnWrapper: 'Grid',
-                    columnComponent: 'Grid',
-                    layoutExamples: {
-                        twoColumn: `<Grid container spacing={2}>
-  <Grid item xs={6}>
-    <Card>Left content</Card>
-  </Grid>
-  <Grid item xs={6}>
-    <Card>Right content</Card>
-  </Grid>
-</Grid>`
-                    }
-                }
-            };
-            break;
         case 'chakra-ui':
             config = {
                 importPath: '@chakra-ui/react',

package/dist/cli/setup.js

@@ -4,8 +4,91 @@ import inquirer from 'inquirer';
 import chalk from 'chalk';
 import { autoDetectDesignSystem } from '../story-generator/configLoader.js';
 import { fileURLToPath } from 'url';
+import net from 'net';
+import { execSync } from 'child_process';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+// FIRST_EDIT: helper functions to check for free ports
+async function isPortAvailable(port) {
+    return new Promise((resolve) => {
+        const tester = net.createServer()
+            .once('error', () => resolve(false))
+            .once('listening', () => {
+            tester.close();
+            resolve(true);
+        })
+            .listen(port);
+    });
+}
+async function findAvailablePort(startPort) {
+    let port = startPort;
+    // eslint-disable-next-line no-await-in-loop
+    while (!(await isPortAvailable(port))) {
+        port += 1;
+    }
+    return port;
+}
+// Design system installation configurations
+const DESIGN_SYSTEM_CONFIGS = {
+    antd: {
+        packages: ['antd'],
+        name: 'Ant Design',
+        importPath: 'antd',
+        additionalSetup: 'import "antd/dist/reset.css";'
+    },
+    mantine: {
+        packages: ['@mantine/core', '@mantine/hooks', '@mantine/notifications'],
+        name: 'Mantine',
+        importPath: '@mantine/core',
+        additionalSetup: 'import "@mantine/core/styles.css";'
+    },
+    chakra: {
+        packages: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion'],
+        name: 'Chakra UI',
+        importPath: '@chakra-ui/react',
+        additionalSetup: 'import { ChakraProvider } from "@chakra-ui/react";'
+    }
+};
+async function installDesignSystem(systemKey) {
+    const config = DESIGN_SYSTEM_CONFIGS[systemKey];
+    const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
+    // Check if packages are already installed
+    const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    const missingPackages = config.packages.filter(pkg => !dependencies[pkg]);
+    if (missingPackages.length === 0) {
+        console.log(chalk.green(`✅ ${config.name} packages already installed`));
+        return true;
+    }
+    console.log(chalk.blue(`\n📦 Installing ${config.name} packages...`));
+    console.log(chalk.gray(`Packages: ${missingPackages.join(', ')}`));
+    // Detect package manager
+    const npmLock = fs.existsSync(path.join(process.cwd(), 'package-lock.json'));
+    const yarnLock = fs.existsSync(path.join(process.cwd(), 'yarn.lock'));
+    const pnpmLock = fs.existsSync(path.join(process.cwd(), 'pnpm-lock.yaml'));
+    let installCommand = `npm install ${missingPackages.join(' ')}`;
+    if (yarnLock) {
+        installCommand = `yarn add ${missingPackages.join(' ')}`;
+    }
+    else if (pnpmLock) {
+        installCommand = `pnpm add ${missingPackages.join(' ')}`;
+    }
+    try {
+        console.log(chalk.gray(`Running: ${installCommand}`));
+        execSync(installCommand, { stdio: 'inherit' });
+        console.log(chalk.green(`✅ ${config.name} installed successfully!`));
+        if (config.additionalSetup) {
+            console.log(chalk.blue('\n📋 Additional setup required:'));
+            console.log(chalk.gray(`Add this import to your main CSS/index file:`));
+            console.log(chalk.cyan(`${config.additionalSetup}`));
+        }
+        return true;
+    }
+    catch (error) {
+        console.error(chalk.red(`❌ Failed to install ${config.name}:`), error);
+        console.log(chalk.yellow(`\n💡 You can install manually with: ${installCommand}`));
+        return false;
+    }
+}
 export async function setupCommand() {
     console.log(chalk.blue.bold('\n🎨 Story UI Setup\n'));
     console.log('This will help you configure Story UI for your design system.\n');
@@ -60,14 +143,25 @@ export async function setupCommand() {
             message: 'Which design system are you using?',
             choices: [
                 { name: '🤖 Auto-detect from package.json', value: 'auto' },
-                { name: '🎨 Material-UI (@mui/material)', value: 'mui' },
-                { name: '⚡ Chakra UI (@chakra-ui/react)', value: 'chakra' },
-                { name: '🐜 Ant Design (antd)', value: 'antd' },
-                { name: '🎯 Mantine (@mantine/core)', value: 'mantine' },
+                { name: '🐜 Ant Design (antd) - Install & Configure', value: 'antd' },
+                { name: '🎯 Mantine (@mantine/core) - Install & Configure', value: 'mantine' },
+                { name: '⚡ Chakra UI (@chakra-ui/react) - Install & Configure', value: 'chakra' },
                 { name: '🔧 Custom/Other', value: 'custom' }
             ],
             default: autoDetected ? 'auto' : 'custom'
         },
+        {
+            type: 'confirm',
+            name: 'installDesignSystem',
+            message: (answers) => {
+                const systemName = answers.designSystem === 'antd' ? 'Ant Design' :
+                    answers.designSystem === 'mantine' ? 'Mantine' :
+                        answers.designSystem === 'chakra' ? 'Chakra UI' : 'the design system';
+                return `Would you like to install ${systemName} and its dependencies now?`;
+            },
+            when: (answers) => ['antd', 'mantine', 'chakra'].includes(answers.designSystem),
+            default: true
+        },
         {
             type: 'input',
             name: 'importPath',
@@ -96,6 +190,22 @@ export async function setupCommand() {
             default: './src/components',
             when: (answers) => answers.designSystem === 'custom'
         },
+        {
+            type: 'input',
+            name: 'mcpPort',
+            message: 'Port for the Story UI MCP server',
+            default: async () => {
+                const port = await findAvailablePort(4001);
+                return String(port);
+            },
+            validate: async (input) => {
+                const value = parseInt(input, 10);
+                if (isNaN(value) || value <= 0)
+                    return 'Enter a valid port number';
+                const available = await isPortAvailable(value);
+                return available ? true : `Port ${value} is already in use`;
+            }
+        },
         {
             type: 'confirm',
             name: 'hasApiKey',
@@ -110,53 +220,53 @@ export async function setupCommand() {
             validate: (input) => input.trim() ? true : 'API key is required'
         }
     ]);
+    // Install design system if requested
+    if (answers.installDesignSystem && ['antd', 'mantine', 'chakra'].includes(answers.designSystem)) {
+        const installSuccess = await installDesignSystem(answers.designSystem);
+        if (!installSuccess) {
+            console.log(chalk.yellow('⚠️  Installation failed but continuing with configuration...'));
+        }
+    }
     // Generate configuration
     let config = {};
     if (answers.designSystem === 'auto' && autoDetected) {
         config = autoDetected;
     }
-    else if (answers.designSystem === 'mui') {
+    else if (answers.designSystem === 'chakra') {
         config = {
-            importPath: '@mui/material',
+            importPath: '@chakra-ui/react',
             componentPrefix: '',
             layoutRules: {
-                multiColumnWrapper: 'Grid',
-                columnComponent: 'Grid',
+                multiColumnWrapper: 'SimpleGrid',
+                columnComponent: 'Box',
                 containerComponent: 'Container',
                 layoutExamples: {
-                    twoColumn: `<Grid container spacing={2}>
-  <Grid item xs={6}>
+                    twoColumn: `<SimpleGrid columns={2} spacing={6}>
+  <Box>
     <Card>
-      <CardContent>
-        <Typography variant="h5">Left Card</Typography>
-        <Typography>Left content</Typography>
-      </CardContent>
+      <CardHeader>
+        <Heading size="md">Left Card</Heading>
+      </CardHeader>
+      <CardBody>
+        <Text>Left content goes here</Text>
+      </CardBody>
     </Card>
-  </Grid>
-  <Grid item xs={6}>
+  </Box>
+  <Box>
     <Card>
-      <CardContent>
-        <Typography variant="h5">Right Card</Typography>
-        <Typography>Right content</Typography>
-      </CardContent>
+      <CardHeader>
+        <Heading size="md">Right Card</Heading>
+      </CardHeader>
+      <CardBody>
+        <Text>Right content goes here</Text>
+      </CardBody>
     </Card>
-  </Grid>
-</Grid>`
+  </Box>
+</SimpleGrid>`
                 }
             }
         };
     }
-    else if (answers.designSystem === 'chakra') {
-        config = {
-            importPath: '@chakra-ui/react',
-            componentPrefix: '',
-            layoutRules: {
-                multiColumnWrapper: 'SimpleGrid',
-                columnComponent: 'Box',
-                containerComponent: 'Container'
-            }
-        };
-    }
     else if (answers.designSystem === 'antd') {
         config = {
             importPath: 'antd',
@@ -164,7 +274,21 @@ export async function setupCommand() {
             layoutRules: {
                 multiColumnWrapper: 'Row',
                 columnComponent: 'Col',
-                containerComponent: 'div'
+                containerComponent: 'div',
+                layoutExamples: {
+                    twoColumn: `<Row gutter={16}>
+  <Col span={12}>
+    <Card title="Left Card" bordered={false}>
+      <p>Left content goes here</p>
+    </Card>
+  </Col>
+  <Col span={12}>
+    <Card title="Right Card" bordered={false}>
+      <p>Right content goes here</p>
+    </Card>
+  </Col>
+</Row>`
+                }
             }
         };
     }
@@ -175,7 +299,27 @@ export async function setupCommand() {
             layoutRules: {
                 multiColumnWrapper: 'SimpleGrid',
                 columnComponent: 'div',
-                containerComponent: 'Container'
+                containerComponent: 'Container',
+                layoutExamples: {
+                    twoColumn: `<SimpleGrid cols={2} spacing="md">
+  <div>
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+      <Text fw={500} size="lg" mb="xs">Left Card</Text>
+      <Text size="sm" c="dimmed">
+        Left content goes here
+      </Text>
+    </Card>
+  </div>
+  <div>
+    <Card shadow="sm" padding="lg" radius="md" withBorder>
+      <Text fw={500} size="lg" mb="xs">Right Card</Text>
+      <Text size="sm" c="dimmed">
+        Right content goes here
+      </Text>
+    </Card>
+  </div>
+</SimpleGrid>`
+                }
             }
         };
     }
@@ -236,6 +380,38 @@ export async function setupCommand() {
             console.warn(chalk.yellow(`⚠️  Template file not found: ${file}`));
         }
     }
+    // Create considerations file
+    const considerationsTemplatePath = path.resolve(__dirname, '../../templates/story-ui-considerations.md');
+    const considerationsPath = path.join(process.cwd(), 'story-ui-considerations.md');
+    if (!fs.existsSync(considerationsPath) && fs.existsSync(considerationsTemplatePath)) {
+        let considerationsContent = fs.readFileSync(considerationsTemplatePath, 'utf-8');
+        // Customize based on selected design system
+        if (config.importPath) {
+            considerationsContent = considerationsContent.replace('[Your Component Library]', config.importPath);
+            considerationsContent = considerationsContent.replace('[your-import-path]', config.importPath);
+        }
+        fs.writeFileSync(considerationsPath, considerationsContent);
+        console.log(chalk.green('✅ Created story-ui-considerations.md for AI customization'));
+    }
+    // Create documentation directory structure
+    const docsDir = path.join(process.cwd(), 'story-ui-docs');
+    if (!fs.existsSync(docsDir)) {
+        console.log(chalk.blue('\n📚 Creating documentation directory structure...'));
+        // Create main directory and subdirectories
+        const subdirs = ['guidelines', 'tokens', 'components', 'patterns'];
+        fs.mkdirSync(docsDir, { recursive: true });
+        for (const subdir of subdirs) {
+            fs.mkdirSync(path.join(docsDir, subdir), { recursive: true });
+        }
+        // Copy README template
+        const docsReadmeTemplatePath = path.resolve(__dirname, '../../templates/story-ui-docs-README.md');
+        const docsReadmePath = path.join(docsDir, 'README.md');
+        if (fs.existsSync(docsReadmeTemplatePath)) {
+            fs.writeFileSync(docsReadmePath, fs.readFileSync(docsReadmeTemplatePath, 'utf-8'));
+        }
+        console.log(chalk.green('✅ Created story-ui-docs/ directory structure'));
+        console.log(chalk.gray('   Add your design system documentation to enhance AI story generation'));
+    }
     // Create .env file from template
     const envSamplePath = path.resolve(__dirname, '../../.env.sample');
     const envPath = path.join(process.cwd(), '.env');
@@ -246,6 +422,10 @@ export async function setupCommand() {
             if (answers.apiKey) {
                 envContent = envContent.replace('your-claude-api-key-here', answers.apiKey);
             }
+            // Update the VITE_STORY_UI_PORT with the chosen port
+            if (answers.mcpPort) {
+                envContent = envContent.replace('VITE_STORY_UI_PORT=4001', `VITE_STORY_UI_PORT=${answers.mcpPort}`);
+            }
             fs.writeFileSync(envPath, envContent);
             console.log(chalk.green(`✅ Created .env file${answers.apiKey ? ' with your API key' : ''}`));
         }
@@ -277,15 +457,55 @@ export async function setupCommand() {
     // Update package.json with convenience scripts
     if (packageJson) {
         const scripts = packageJson.scripts || {};
+        // FIRST_EDIT: include chosen port in script
+        const portFlag = `--port ${answers.mcpPort || '4001'}`;
         if (!scripts['story-ui']) {
-            scripts['story-ui'] = 'story-ui start';
+            scripts['story-ui'] = `story-ui start ${portFlag}`;
+        }
+        else if (!scripts['story-ui'].includes('--port')) {
+            scripts['story-ui'] += ` ${portFlag}`;
         }
         if (!scripts['storybook-with-ui'] && scripts['storybook']) {
             scripts['storybook-with-ui'] = 'concurrently "npm run storybook" "npm run story-ui"';
         }
         packageJson.scripts = scripts;
+        // Check and add required dependencies
+        const dependencies = packageJson.dependencies || {};
+        const devDependencies = packageJson.devDependencies || {};
+        let needsInstall = false;
+        // Check for concurrently (needed for storybook-with-ui script)
+        if (!dependencies['concurrently'] && !devDependencies['concurrently']) {
+            console.log(chalk.blue('📦 Adding concurrently dependency...'));
+            devDependencies['concurrently'] = '^8.2.0';
+            needsInstall = true;
+        }
+        packageJson.dependencies = dependencies;
+        packageJson.devDependencies = devDependencies;
         fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
         console.log(chalk.green('✅ Added convenience scripts to package.json'));
+        if (needsInstall) {
+            console.log(chalk.blue('\n📦 Installing required dependencies...'));
+            console.log(chalk.gray('This may take a moment...\n'));
+            // Detect package manager
+            const npmLock = fs.existsSync(path.join(process.cwd(), 'package-lock.json'));
+            const yarnLock = fs.existsSync(path.join(process.cwd(), 'yarn.lock'));
+            const pnpmLock = fs.existsSync(path.join(process.cwd(), 'pnpm-lock.yaml'));
+            let installCommand = 'npm install';
+            if (yarnLock) {
+                installCommand = 'yarn install';
+            }
+            else if (pnpmLock) {
+                installCommand = 'pnpm install';
+            }
+            try {
+                execSync(installCommand, { stdio: 'inherit' });
+                console.log(chalk.green('✅ Dependencies installed successfully'));
+            }
+            catch (error) {
+                console.log(chalk.yellow('⚠️  Failed to install dependencies automatically.'));
+                console.log(chalk.yellow(`   Please run "${installCommand}" manually to complete the setup.`));
+            }
+        }
     }
     console.log(chalk.green.bold('\n🎉 Setup complete!\n'));
     console.log(`📁 Configuration saved to: ${chalk.cyan(configPath)}`);

package/dist/mcp-server/index.js

@@ -17,6 +17,7 @@ import { getSyncedStories, deleteSyncedStory, clearAllSyncedStories, syncChatHis
 import { setupProductionGitignore } from '../story-generator/productionGitignoreManager.js';
 import { getInMemoryStoryService } from '../story-generator/inMemoryStoryService.js';
 import { loadUserConfig } from '../story-generator/configLoader.js';
+import fs from 'fs';
 const app = express();
 app.use(cors());
 app.use(express.json());
@@ -40,6 +41,72 @@ app.delete('/mcp/sync/stories/:id', deleteSyncedStory);
 app.delete('/mcp/sync/stories', clearAllSyncedStories);
 app.get('/mcp/sync/chat-history', syncChatHistory);
 app.get('/mcp/sync/validate/:id', validateChatSession);
+// Proxy routes for frontend compatibility (maps /story-ui/ to /mcp/)
+app.get('/story-ui/stories', getStoriesMetadata);
+app.get('/story-ui/stories/:id', getStoryById);
+app.get('/story-ui/stories/:id/content', getStoryContent);
+app.delete('/story-ui/stories/:id', deleteStory);
+app.delete('/story-ui/stories', clearAllStories);
+app.post('/story-ui/generate', generateStoryFromPrompt);
+app.post('/story-ui/claude', claudeProxy);
+app.get('/story-ui/components', getComponents);
+app.get('/story-ui/props', getProps);
+app.get('/story-ui/memory-stats', getMemoryStats);
+// Legacy delete route for backwards compatibility
+app.post('/story-ui/delete', async (req, res) => {
+    try {
+        const { chatId, storyId } = req.body;
+        const id = chatId || storyId; // Support both parameter names
+        if (!id) {
+            return res.status(400).json({ error: 'chatId or storyId is required' });
+        }
+        console.log(`🗑️ Attempting to delete story: ${id}`);
+        // First try in-memory deletion (production mode)
+        const storyService = getInMemoryStoryService(config);
+        const inMemoryDeleted = storyService.deleteStory(id);
+        if (inMemoryDeleted) {
+            console.log(`✅ Deleted story from memory: ${id}`);
+            return res.json({
+                success: true,
+                message: 'Story deleted successfully from memory'
+            });
+        }
+        // If not found in memory, try file-system deletion (development mode)
+        if (gitignoreManager && !gitignoreManager.isProductionMode()) {
+            const storiesPath = config.generatedStoriesPath;
+            console.log(`🔍 Searching for file-system story in: ${storiesPath}`);
+            if (fs.existsSync(storiesPath)) {
+                const files = fs.readdirSync(storiesPath);
+                const matchingFile = files.find(file => file.includes(id) || file.replace('.stories.tsx', '') === id);
+                if (matchingFile) {
+                    const filePath = path.join(storiesPath, matchingFile);
+                    fs.unlinkSync(filePath);
+                    console.log(`✅ Deleted story file: ${filePath}`);
+                    return res.json({
+                        success: true,
+                        message: 'Story deleted successfully from file system'
+                    });
+                }
+            }
+        }
+        console.log(`❌ Story not found: ${id}`);
+        return res.status(404).json({
+            success: false,
+            error: 'Story not found'
+        });
+    }
+    catch (error) {
+        console.error('Error in legacy delete route:', error);
+        res.status(500).json({ error: 'Failed to delete story' });
+    }
+});
+// Synchronized story proxy routes
+app.get('/story-ui/sync/stories', getSyncedStories);
+app.get('/story-ui/sync/stories/:id', getSyncedStoryById);
+app.delete('/story-ui/sync/stories/:id', deleteSyncedStory);
+app.delete('/story-ui/sync/stories', clearAllSyncedStories);
+app.get('/story-ui/sync/chat-history', syncChatHistory);
+app.get('/story-ui/sync/validate/:id', validateChatSession);
 // Set up production-ready gitignore and directory structure on startup
 const config = loadUserConfig();
 const gitignoreManager = setupProductionGitignore(config);