@tpitre/story-ui 2.1.1 → 2.1.3

package/dist/cli/setup.js

@@ -86,6 +86,28 @@ 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(' ')}`));
+                    // Clean up existing preview.tsx if it has broken imports
+                    if (fs.existsSync(previewTsxPath)) {
+                        fs.unlinkSync(previewTsxPath);
+                        console.log(chalk.yellow('⚠️  Removed existing preview.tsx with broken imports'));
+                    }
+                    return;
+                }
+            }
+        }
+    }
     const designSystemConfigs = {
         chakra: {
             imports: [
@@ -329,7 +351,7 @@ export async function setupCommand() {
                 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?`;
+                return `🚨 IMPORTANT: Would you like to install ${systemName} packages now?\n   (Required for Storybook to work properly)`;
             },
             when: (answers) => ['antd', 'mantine', 'chakra'].includes(answers.designSystem),
             default: true
@@ -400,8 +422,16 @@ export async function setupCommand() {
             console.log(chalk.yellow('Please install manually and run setup again:'));
             const config = DESIGN_SYSTEM_CONFIGS[answers.designSystem];
             console.log(chalk.cyan(`npm install ${config.packages.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);
         }
+        // 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
@@ -415,8 +445,18 @@ export async function setupCommand() {
                 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);
             }
+            else {
+                // Dependencies exist, set up Storybook preview
+                setupStorybookPreview(answers.designSystem);
+            }
         }
     }
     // Generate configuration
@@ -648,10 +688,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.1",
+  "version": "2.1.3",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",