@tpitre/story-ui 2.2.0 → 2.3.1

package/dist/cli/setup.js

@@ -144,6 +144,18 @@ function setupStorybookPreview(designSystem) {
       <MantineProvider>
         <Story />
       </MantineProvider>
+    )`
+        },
+        shadcn: {
+            imports: [
+                "import type { Preview } from '@storybook/react-vite'",
+                "import '../src/index.css'", // or globals.css for Tailwind styles
+                "import React from 'react'"
+            ],
+            decorator: `(Story) => (
+      <div className="min-h-screen bg-background text-foreground">
+        <Story />
+      </div>
     )`
         }
     };
@@ -177,25 +189,121 @@ export default preview;
     fs.writeFileSync(previewTsxPath, previewContent);
     console.log(chalk.green(`✅ Created .storybook/preview.tsx with ${designSystem} provider setup`));
 }
-// Design system installation configurations
+// Design system installation configurations (organized by framework)
 const DESIGN_SYSTEM_CONFIGS = {
+    // React design systems
     antd: {
         packages: ['antd'],
         name: 'Ant Design',
         importPath: 'antd',
-        additionalSetup: 'import "antd/dist/reset.css";'
+        additionalSetup: 'import "antd/dist/reset.css";',
+        framework: 'react'
     },
     mantine: {
         packages: ['@mantine/core', '@mantine/hooks', '@mantine/notifications'],
         name: 'Mantine',
         importPath: '@mantine/core',
-        additionalSetup: 'import "@mantine/core/styles.css";'
+        additionalSetup: 'import "@mantine/core/styles.css";',
+        framework: 'react'
     },
     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";'
+        additionalSetup: 'import { ChakraProvider } from "@chakra-ui/react";',
+        framework: 'react'
+    },
+    mui: {
+        packages: ['@mui/material', '@emotion/react', '@emotion/styled'],
+        name: 'Material UI',
+        importPath: '@mui/material',
+        additionalSetup: 'import { ThemeProvider } from "@mui/material/styles";',
+        framework: 'react'
+    },
+    shadcn: {
+        packages: ['class-variance-authority', 'clsx', 'tailwind-merge', '@radix-ui/react-slot', 'lucide-react'],
+        name: 'shadcn/ui',
+        importPath: '@/components/ui',
+        additionalSetup: '// shadcn/ui components are locally installed. Run: npx shadcn@latest init',
+        framework: 'react'
+    },
+    // Angular design systems
+    'angular-material': {
+        packages: ['@angular/material', '@angular/cdk'],
+        name: 'Angular Material',
+        importPath: '@angular/material',
+        additionalSetup: 'import { MatModule } from "@angular/material";',
+        framework: 'angular'
+    },
+    primeng: {
+        packages: ['primeng', 'primeicons'],
+        name: 'PrimeNG',
+        importPath: 'primeng',
+        additionalSetup: 'import "primeng/resources/themes/lara-light-blue/theme.css";',
+        framework: 'angular'
+    },
+    'ng-zorro': {
+        packages: ['ng-zorro-antd'],
+        name: 'NG-ZORRO',
+        importPath: 'ng-zorro-antd',
+        additionalSetup: 'import "ng-zorro-antd/ng-zorro-antd.min.css";',
+        framework: 'angular'
+    },
+    // Vue design systems
+    primevue: {
+        packages: ['primevue', 'primeicons'],
+        name: 'PrimeVue',
+        importPath: 'primevue',
+        additionalSetup: 'import "primevue/resources/themes/lara-light-blue/theme.css";',
+        framework: 'vue'
+    },
+    vuetify: {
+        packages: ['vuetify'],
+        name: 'Vuetify',
+        importPath: 'vuetify',
+        additionalSetup: 'import "vuetify/styles";',
+        framework: 'vue'
+    },
+    'element-plus': {
+        packages: ['element-plus'],
+        name: 'Element Plus',
+        importPath: 'element-plus',
+        additionalSetup: 'import "element-plus/dist/index.css";',
+        framework: 'vue'
+    },
+    // Svelte design systems
+    'skeleton-ui': {
+        packages: ['@skeletonlabs/skeleton'],
+        name: 'Skeleton UI',
+        importPath: '@skeletonlabs/skeleton',
+        framework: 'svelte'
+    },
+    smui: {
+        packages: ['svelte-material-ui'],
+        name: 'Svelte Material UI',
+        importPath: 'svelte-material-ui',
+        framework: 'svelte'
+    },
+    // Web Components design systems
+    shoelace: {
+        packages: ['@shoelace-style/shoelace'],
+        name: 'Shoelace',
+        importPath: '@shoelace-style/shoelace',
+        additionalSetup: 'import "@shoelace-style/shoelace/dist/themes/light.css";',
+        framework: 'web-components'
+    },
+    lit: {
+        packages: ['lit'],
+        name: 'Lit',
+        importPath: 'lit',
+        framework: 'web-components'
+    },
+    vaadin: {
+        packages: ['@vaadin/vaadin-core'],
+        name: 'Vaadin',
+        importPath: '@vaadin',
+        additionalSetup: 'import "@vaadin/vaadin-lumo-styles/all-imports.js";',
+        framework: 'web-components'
     }
 };
 async function installDesignSystem(systemKey) {
@@ -283,41 +391,85 @@ async function installDesignSystem(systemKey) {
         return false;
     }
 }
-export async function setupCommand() {
+export async function setupCommand(options = {}) {
     console.log(chalk.blue.bold('\n🎨 Story UI Setup\n'));
-    console.log('This will help you configure Story UI for your design system.\n');
+    // Non-interactive mode indicator
+    if (options.yes || options.designSystem) {
+        console.log(chalk.gray('Running in non-interactive mode...\n'));
+    }
+    else {
+        console.log('This will help you configure Story UI for your design system.\n');
+    }
     // Check if we're in a valid project
     const packageJsonPath = path.join(process.cwd(), 'package.json');
     if (!fs.existsSync(packageJsonPath)) {
         console.error(chalk.red('❌ No package.json found. Please run this command in your project root.'));
         process.exit(1);
     }
-    // Check if Storybook is installed
+    // Check if Storybook is installed (any framework)
     const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-    const hasStorybook = packageJson.devDependencies?.['@storybook/react'] ||
-        packageJson.dependencies?.['@storybook/react'] ||
+    const devDeps = packageJson.devDependencies || {};
+    const deps = packageJson.dependencies || {};
+    // Check for any Storybook framework
+    const storybookPackages = [
+        '@storybook/react', '@storybook/react-vite', '@storybook/react-webpack5', '@storybook/nextjs',
+        '@storybook/angular', '@storybook/vue3', '@storybook/svelte', '@storybook/web-components'
+    ];
+    const hasStorybook = storybookPackages.some(pkg => devDeps[pkg] || deps[pkg]) ||
         fs.existsSync(path.join(process.cwd(), '.storybook'));
     if (!hasStorybook) {
         console.warn(chalk.yellow('⚠️  Storybook not detected. Story UI works best with Storybook installed.'));
         console.log('Install Storybook first: npx storybook@latest init\n');
     }
-    // Detect Storybook framework (Vite vs Webpack)
+    // Detect Storybook framework and component framework type
     let storybookFramework = '@storybook/react'; // default
-    const devDeps = packageJson.devDependencies || {};
-    const deps = packageJson.dependencies || {};
-    // Check for Vite-based Storybook
+    let componentFramework = 'react';
+    // Check for React Storybook variants
     if (devDeps['@storybook/react-vite'] || deps['@storybook/react-vite']) {
         storybookFramework = '@storybook/react-vite';
-        console.log(chalk.green('✅ Detected Vite-based Storybook'));
+        componentFramework = 'react';
+        console.log(chalk.green('✅ Detected Vite-based React Storybook'));
     }
     else if (devDeps['@storybook/react-webpack5'] || deps['@storybook/react-webpack5']) {
         storybookFramework = '@storybook/react-webpack5';
-        console.log(chalk.green('✅ Detected Webpack 5-based Storybook'));
+        componentFramework = 'react';
+        console.log(chalk.green('✅ Detected Webpack 5-based React Storybook'));
     }
     else if (devDeps['@storybook/nextjs'] || deps['@storybook/nextjs']) {
         storybookFramework = '@storybook/nextjs';
+        componentFramework = 'react';
         console.log(chalk.green('✅ Detected Next.js Storybook'));
     }
+    // Check for Angular Storybook
+    else if (devDeps['@storybook/angular'] || deps['@storybook/angular']) {
+        storybookFramework = '@storybook/angular';
+        componentFramework = 'angular';
+        console.log(chalk.green('✅ Detected Angular Storybook'));
+    }
+    // Check for Vue Storybook
+    else if (devDeps['@storybook/vue3'] || deps['@storybook/vue3']) {
+        storybookFramework = '@storybook/vue3';
+        componentFramework = 'vue';
+        console.log(chalk.green('✅ Detected Vue 3 Storybook'));
+    }
+    // Check for Svelte Storybook
+    else if (devDeps['@storybook/svelte'] || deps['@storybook/svelte']) {
+        storybookFramework = '@storybook/svelte';
+        componentFramework = 'svelte';
+        console.log(chalk.green('✅ Detected Svelte Storybook'));
+    }
+    // Check for Web Components Storybook
+    else if (devDeps['@storybook/web-components'] || deps['@storybook/web-components']) {
+        storybookFramework = '@storybook/web-components';
+        componentFramework = 'web-components';
+        console.log(chalk.green('✅ Detected Web Components Storybook'));
+    }
+    // Check for generic @storybook/react (old setup)
+    else if (devDeps['@storybook/react'] || deps['@storybook/react']) {
+        storybookFramework = '@storybook/react';
+        componentFramework = 'react';
+        console.log(chalk.green('✅ Detected React Storybook'));
+    }
     // Auto-detect design system
     const autoDetected = autoDetectDesignSystem();
     if (autoDetected) {
@@ -330,93 +482,164 @@ export async function setupCommand() {
             console.log(`   📁 Components path: ${autoDetected.componentsPath}`);
         }
     }
-    const answers = await inquirer.prompt([
-        {
-            type: 'list',
-            name: 'designSystem',
-            message: 'Which design system are you using?',
-            choices: [
-                { name: '🤖 Auto-detect from package.json', value: 'auto' },
-                { name: '🐜 Ant Design (antd) - Automatic Install & Configure', value: 'antd' },
-                { name: '🎯 Mantine (@mantine/core) - Automatic Install & Configure', value: 'mantine' },
-                { name: '⚡ Chakra UI (@chakra-ui/react) - Automatic 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';
-                const config = DESIGN_SYSTEM_CONFIGS[answers.designSystem];
-                return `🚨 IMPORTANT: Would you like to install ${systemName} packages now?\n   Required packages: ${config.packages.join(', ')}\n   (Without these packages, Story UI and Storybook will not work properly)`;
+    // Build design system choices based on detected framework
+    const getDesignSystemChoices = () => {
+        const baseChoice = { name: '🤖 Auto-detect from package.json', value: 'auto' };
+        const customChoice = { name: '🔧 Custom/Other', value: 'custom' };
+        switch (componentFramework) {
+            case 'angular':
+                return [
+                    baseChoice,
+                    { name: '🅰️ Angular Material (@angular/material)', value: 'angular-material' },
+                    { name: '🎨 PrimeNG (primeng)', value: 'primeng' },
+                    { name: '🌈 NG-ZORRO (ng-zorro-antd)', value: 'ng-zorro' },
+                    customChoice
+                ];
+            case 'vue':
+                return [
+                    baseChoice,
+                    { name: '🍃 PrimeVue (primevue)', value: 'primevue' },
+                    { name: '🎯 Vuetify (vuetify)', value: 'vuetify' },
+                    { name: '🔮 Element Plus (element-plus)', value: 'element-plus' },
+                    customChoice
+                ];
+            case 'svelte':
+                return [
+                    baseChoice,
+                    { name: '🟠 Skeleton UI (skeleton)', value: 'skeleton-ui' },
+                    { name: '🌸 Svelte Material UI (svelte-material-ui)', value: 'smui' },
+                    customChoice
+                ];
+            case 'web-components':
+                return [
+                    baseChoice,
+                    { name: '👟 Shoelace (@shoelace-style/shoelace)', value: 'shoelace' },
+                    { name: '🔥 Lit (@lit/element)', value: 'lit' },
+                    { name: '🌟 Vaadin (@vaadin)', value: 'vaadin' },
+                    customChoice
+                ];
+            case 'react':
+            default:
+                return [
+                    baseChoice,
+                    { name: '🐜 Ant Design (antd) - Automatic Install & Configure', value: 'antd' },
+                    { name: '🎯 Mantine (@mantine/core) - Automatic Install & Configure', value: 'mantine' },
+                    { name: '⚡ Chakra UI (@chakra-ui/react) - Automatic Install & Configure', value: 'chakra' },
+                    { name: '🎨 Material UI (@mui/material)', value: 'mui' },
+                    { name: '✨ shadcn/ui (Tailwind + Radix) - Automatic Install & Configure', value: 'shadcn' },
+                    customChoice
+                ];
+        }
+    };
+    // Non-interactive mode: build answers from CLI options
+    let answers;
+    if (options.yes || options.designSystem) {
+        // Non-interactive mode
+        const designSystem = options.designSystem || (autoDetected ? 'auto' : 'custom');
+        const mcpPort = String(await findAvailablePort(4001));
+        // Validate design system choice
+        const validSystems = ['auto', 'custom', ...Object.keys(DESIGN_SYSTEM_CONFIGS)];
+        if (!validSystems.includes(designSystem)) {
+            console.error(chalk.red(`❌ Invalid design system: ${designSystem}`));
+            console.log(chalk.yellow(`Valid options: ${validSystems.join(', ')}`));
+            process.exit(1);
+        }
+        answers = {
+            designSystem,
+            installDesignSystem: !options.skipInstall && Object.keys(DESIGN_SYSTEM_CONFIGS).includes(designSystem),
+            generatedStoriesPath: './src/stories/generated/',
+            mcpPort,
+            hasApiKey: false,
+        };
+        console.log(chalk.blue(`📦 Design system: ${designSystem}`));
+        console.log(chalk.blue(`📁 Generated stories: ${answers.generatedStoriesPath}`));
+        console.log(chalk.blue(`🔌 MCP port: ${mcpPort}`));
+        if (options.skipInstall) {
+            console.log(chalk.yellow('⏭️  Skipping package installation'));
+        }
+    }
+    else {
+        // Interactive mode - use inquirer prompts
+        answers = await inquirer.prompt([
+            {
+                type: 'list',
+                name: 'designSystem',
+                message: `Which design system are you using? (${componentFramework} detected)`,
+                choices: getDesignSystemChoices(),
+                default: autoDetected ? 'auto' : 'custom'
             },
-            when: (answers) => ['antd', 'mantine', 'chakra'].includes(answers.designSystem),
-            default: true
-        },
-        {
-            type: 'input',
-            name: 'importPath',
-            message: 'What is the import path for your components?',
-            when: (answers) => answers.designSystem === 'custom',
-            validate: (input) => input.trim() ? true : 'Import path is required'
-        },
-        {
-            type: 'input',
-            name: 'componentPrefix',
-            message: 'Do your components have a prefix? (e.g., "AL" for ALButton)',
-            when: (answers) => answers.designSystem === 'custom',
-            default: ''
-        },
-        {
-            type: 'input',
-            name: 'generatedStoriesPath',
-            message: 'Where should generated stories be saved?',
-            default: './src/stories/generated/',
-            validate: (input) => input.trim() ? true : 'Path is required'
-        },
-        {
-            type: 'input',
-            name: 'componentsPath',
-            message: 'Where are your component files located?',
-            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);
+            {
+                type: 'confirm',
+                name: 'installDesignSystem',
+                message: (promptAnswers) => {
+                    const config = DESIGN_SYSTEM_CONFIGS[promptAnswers.designSystem];
+                    const systemName = config?.name || 'the design system';
+                    return `🚨 IMPORTANT: Would you like to install ${systemName} packages now?\n   Required packages: ${config?.packages.join(', ') || 'unknown'}\n   (Without these packages, Story UI and Storybook will not work properly)`;
+                },
+                when: (promptAnswers) => Object.keys(DESIGN_SYSTEM_CONFIGS).includes(promptAnswers.designSystem),
+                default: true
+            },
+            {
+                type: 'input',
+                name: 'importPath',
+                message: 'What is the import path for your components?',
+                when: (promptAnswers) => promptAnswers.designSystem === 'custom',
+                validate: (input) => input.trim() ? true : 'Import path is required'
+            },
+            {
+                type: 'input',
+                name: 'componentPrefix',
+                message: 'Do your components have a prefix? (e.g., "AL" for ALButton)',
+                when: (promptAnswers) => promptAnswers.designSystem === 'custom',
+                default: ''
+            },
+            {
+                type: 'input',
+                name: 'generatedStoriesPath',
+                message: 'Where should generated stories be saved?',
+                default: './src/stories/generated/',
+                validate: (input) => input.trim() ? true : 'Path is required'
             },
-            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: 'input',
+                name: 'componentsPath',
+                message: 'Where are your component files located?',
+                default: './src/components',
+                when: (promptAnswers) => promptAnswers.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',
+                message: 'Do you have a Claude API key? (You can add it later)',
+                default: false
+            },
+            {
+                type: 'password',
+                name: 'apiKey',
+                message: 'Enter your Claude API key:',
+                when: (promptAnswers) => promptAnswers.hasApiKey,
+                validate: (input) => input.trim() ? true : 'API key is required'
             }
-        },
-        {
-            type: 'confirm',
-            name: 'hasApiKey',
-            message: 'Do you have a Claude API key? (You can add it later)',
-            default: false
-        },
-        {
-            type: 'password',
-            name: 'apiKey',
-            message: 'Enter your Claude API key:',
-            when: (answers) => answers.hasApiKey,
-            validate: (input) => input.trim() ? true : 'API key is required'
-        }
-    ]);
+        ]);
+    }
     // Install design system if requested
-    if (answers.installDesignSystem && ['antd', 'mantine', 'chakra'].includes(answers.designSystem)) {
+    if (answers.installDesignSystem && Object.keys(DESIGN_SYSTEM_CONFIGS).includes(answers.designSystem)) {
         const installSuccess = await installDesignSystem(answers.designSystem);
         if (!installSuccess) {
             console.log(chalk.red('❌ Installation failed! Cannot continue without required dependencies.'));
@@ -434,25 +657,35 @@ export async function setupCommand() {
         // Set up Storybook preview file after successful installation
         setupStorybookPreview(answers.designSystem);
     }
-    else if (['antd', 'mantine', 'chakra'].includes(answers.designSystem)) {
+    else if (Object.keys(DESIGN_SYSTEM_CONFIGS).includes(answers.designSystem)) {
         // User declined installation - verify dependencies exist
         const packageJsonPath = path.join(process.cwd(), 'package.json');
         if (fs.existsSync(packageJsonPath)) {
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
             const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-            const config = DESIGN_SYSTEM_CONFIGS[answers.designSystem];
-            const missingDeps = config.packages.filter(pkg => !allDeps[pkg]);
+            const dsConfig = DESIGN_SYSTEM_CONFIGS[answers.designSystem];
+            const missingDeps = dsConfig.packages.filter(pkg => !allDeps[pkg]);
             if (missingDeps.length > 0) {
-                console.log(chalk.red('❌ Required dependencies missing:'), missingDeps.join(', '));
-                console.log(chalk.yellow('Please install them manually:'));
-                console.log(chalk.cyan(`npm install ${missingDeps.join(' ')}`));
-                // Clean up any existing preview.tsx that might cause issues
-                const previewTsxPath = path.join(process.cwd(), '.storybook', 'preview.tsx');
-                if (fs.existsSync(previewTsxPath)) {
-                    fs.unlinkSync(previewTsxPath);
-                    console.log(chalk.yellow('⚠️  Removed preview.tsx to prevent import errors'));
+                // If --skip-install was explicitly passed, just warn but continue with config generation
+                if (options.skipInstall) {
+                    console.log(chalk.yellow('⚠️  Dependencies not installed (--skip-install used):'), missingDeps.join(', '));
+                    console.log(chalk.yellow('   Install them later with:'));
+                    console.log(chalk.cyan(`   npm install ${missingDeps.join(' ')}`));
+                    // Don't set up Storybook preview since deps are missing
+                }
+                else {
+                    // Interactive mode: user declined installation
+                    console.log(chalk.red('❌ Required dependencies missing:'), missingDeps.join(', '));
+                    console.log(chalk.yellow('Please install them manually:'));
+                    console.log(chalk.cyan(`npm install ${missingDeps.join(' ')}`));
+                    // Clean up any existing preview.tsx that might cause issues
+                    const previewTsxPath = path.join(process.cwd(), '.storybook', 'preview.tsx');
+                    if (fs.existsSync(previewTsxPath)) {
+                        fs.unlinkSync(previewTsxPath);
+                        console.log(chalk.yellow('⚠️  Removed preview.tsx to prevent import errors'));
+                    }
+                    process.exit(1);
                 }
-                process.exit(1);
             }
             else {
                 // Dependencies exist, set up Storybook preview
@@ -556,6 +789,98 @@ export async function setupCommand() {
             }
         };
     }
+    else if (answers.designSystem === 'shadcn') {
+        config = {
+            importPath: '@/components/ui',
+            componentPrefix: '',
+            layoutRules: {
+                multiColumnWrapper: 'div',
+                columnComponent: 'div',
+                containerComponent: 'div',
+                layoutExamples: {
+                    twoColumn: `<div className="grid grid-cols-2 gap-4">
+  <Card>
+    <CardHeader>
+      <CardTitle>Left Card</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Left content goes here
+      </p>
+    </CardContent>
+  </Card>
+  <Card>
+    <CardHeader>
+      <CardTitle>Right Card</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Right content goes here
+      </p>
+    </CardContent>
+  </Card>
+</div>`
+                }
+            },
+            designSystemGuidelines: {
+                name: 'shadcn/ui',
+                additionalNotes: `
+shadcn/ui components are locally installed in the project.
+- Import components from "@/components/ui" (e.g., import { Button } from "@/components/ui/button")
+- Use the cn() utility from "@/lib/utils" for conditional classes
+- Components use Tailwind CSS for styling
+- Use CSS variables for theming (--primary, --secondary, --muted, etc.)
+- Prefer composition over configuration
+        `.trim()
+            }
+        };
+    }
+    else if (answers.designSystem === 'mui') {
+        config = {
+            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="h6">Left Card</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Left content goes here
+        </Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+  <Grid item xs={6}>
+    <Card>
+      <CardContent>
+        <Typography variant="h6">Right Card</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Right content goes here
+        </Typography>
+      </CardContent>
+    </Card>
+  </Grid>
+</Grid>`
+                }
+            },
+            designSystemGuidelines: {
+                name: 'Material UI',
+                additionalNotes: `
+Material UI (MUI) is a React component library implementing Material Design.
+- Import components from "@mui/material" (e.g., import { Button } from "@mui/material")
+- Use the sx prop for inline styling with theme awareness
+- Use Grid for layouts, Card for containers
+- Leverage ThemeProvider for consistent theming
+- Typography component for text with proper variants
+        `.trim()
+            }
+        };
+    }
     else {
         // Custom configuration
         config = {
@@ -579,6 +904,8 @@ export async function setupCommand() {
     config.generatedStoriesPath = path.resolve(answers.generatedStoriesPath || './src/stories/generated/');
     config.storyPrefix = 'Generated/';
     config.defaultAuthor = 'Story UI AI';
+    config.componentFramework = componentFramework; // react, angular, vue, svelte, or web-components
+    config.storybookFramework = storybookFramework; // e.g., @storybook/react-vite, @storybook/angular
     // Create configuration file
     const configContent = `module.exports = ${JSON.stringify(config, null, 2)};`;
     const configPath = path.join(process.cwd(), 'story-ui.config.js');

package/dist/mcp-server/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/mcp-server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../mcp-server/index.ts"],"names":[],"mappings":""}