@tpitre/story-ui 2.1.0 → 2.1.2

package/dist/cli/setup.js

@@ -86,6 +86,23 @@ function setupStorybookPreview(designSystem) {
         console.log(chalk.yellow('⚠️  .storybook directory not found. Please run storybook init first.'));
         return;
     }
+    // Verify required packages are installed before creating preview
+    if (['antd', 'mantine', 'chakra'].includes(designSystem)) {
+        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[designSystem];
+            if (config) {
+                const missingDeps = config.packages.filter(pkg => !allDeps[pkg]);
+                if (missingDeps.length > 0) {
+                    console.log(chalk.red(`❌ Cannot create preview.tsx - missing dependencies: ${missingDeps.join(', ')}`));
+                    console.log(chalk.yellow(`Please install them first: npm install ${missingDeps.join(' ')}`));
+                    return;
+                }
+            }
+        }
+    }
     const designSystemConfigs = {
         chakra: {
             imports: [
@@ -115,6 +132,7 @@ function setupStorybookPreview(designSystem) {
             imports: [
                 "import type { Preview } from '@storybook/react-vite'",
                 "import { MantineProvider } from '@mantine/core'",
+                "import '@mantine/core/styles.css'",
                 "import React from 'react'"
             ],
             decorator: `(Story) => (
@@ -201,11 +219,56 @@ async function installDesignSystem(systemKey) {
     try {
         console.log(chalk.gray(`Running: ${installCommand}`));
         execSync(installCommand, { stdio: 'inherit' });
+        // Verify installation was successful by re-checking package.json
+        const updatedPackageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8'));
+        const updatedDeps = { ...updatedPackageJson.dependencies, ...updatedPackageJson.devDependencies };
+        const stillMissingPackages = config.packages.filter(pkg => !updatedDeps[pkg]);
+        if (stillMissingPackages.length > 0) {
+            throw new Error(`Installation failed: packages still missing: ${stillMissingPackages.join(', ')}`);
+        }
         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}`));
+            // Try to automatically add CSS import for Mantine
+            if (systemKey === 'mantine') {
+                const cssFiles = [
+                    path.join(process.cwd(), 'src', 'index.css'),
+                    path.join(process.cwd(), 'src', 'main.css'),
+                    path.join(process.cwd(), 'src', 'App.css')
+                ];
+                let cssAdded = false;
+                for (const cssFile of cssFiles) {
+                    if (fs.existsSync(cssFile)) {
+                        try {
+                            const cssContent = fs.readFileSync(cssFile, 'utf-8');
+                            if (!cssContent.includes('@mantine/core/styles.css')) {
+                                const newContent = `@import "@mantine/core/styles.css";\n\n${cssContent}`;
+                                fs.writeFileSync(cssFile, newContent);
+                                console.log(chalk.green(`✅ Added Mantine CSS import to ${path.relative(process.cwd(), cssFile)}`));
+                                cssAdded = true;
+                                break;
+                            }
+                            else {
+                                console.log(chalk.blue(`ℹ️ Mantine CSS already imported in ${path.relative(process.cwd(), cssFile)}`));
+                                cssAdded = true;
+                                break;
+                            }
+                        }
+                        catch (error) {
+                            console.warn(chalk.yellow(`⚠️ Could not modify ${cssFile}:`, error));
+                        }
+                    }
+                }
+                if (!cssAdded) {
+                    console.log(chalk.blue('\n📋 Manual setup required:'));
+                    console.log(chalk.gray(`Add this import to your main CSS file:`));
+                    console.log(chalk.cyan(`${config.additionalSetup}`));
+                }
+            }
+            else {
+                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;
     }
@@ -356,6 +419,8 @@ export async function setupCommand() {
             console.log(chalk.cyan(`npm install ${config.packages.join(' ')}`));
             process.exit(1);
         }
+        // Set up Storybook preview file after successful installation
+        setupStorybookPreview(answers.designSystem);
     }
     else if (['antd', 'mantine', 'chakra'].includes(answers.designSystem)) {
         // User declined installation - verify dependencies exist
@@ -371,6 +436,10 @@ export async function setupCommand() {
                 console.log(chalk.cyan(`npm install ${missingDeps.join(' ')}`));
                 process.exit(1);
             }
+            else {
+                // Dependencies exist, set up Storybook preview
+                setupStorybookPreview(answers.designSystem);
+            }
         }
     }
     // Generate configuration
@@ -602,10 +671,6 @@ export async function setupCommand() {
     }
     // Clean up default Storybook template components to prevent conflicts
     cleanupDefaultStorybookComponents();
-    // Set up Storybook preview file for design systems that require JSX
-    if (['chakra', 'antd', 'mantine'].includes(answers.designSystem)) {
-        setupStorybookPreview(answers.designSystem);
-    }
     // Update package.json with convenience scripts
     if (packageJson) {
         const scripts = packageJson.scripts || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",