@tpitre/story-ui 2.0.1 → 2.1.1

package/dist/cli/index.js

@@ -6,7 +6,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { setupProductionGitignore } from '../story-generator/productionGitignoreManager.js';
 import { createStoryUIConfig } from '../story-ui.config.js';
-import { setupCommand } from './setup.js';
+import { setupCommand, cleanupDefaultStorybookComponents } from './setup.js';
 import net from 'net';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -249,4 +249,12 @@ function writeConfig(config, type, filename) {
         fs.writeFileSync(outputFile, jsContent);
     }
 }
+program
+    .command('cleanup')
+    .description('Remove default Storybook template files that conflict with component discovery')
+    .action(() => {
+    console.log('🧹 Cleaning up default Storybook template files...');
+    cleanupDefaultStorybookComponents();
+    console.log('✅ Cleanup complete! Component discovery should now work properly.');
+});
 program.parse(process.argv);

package/dist/cli/setup.js

@@ -31,40 +31,130 @@ async function findAvailablePort(startPort) {
 /**
  * Clean up default Storybook template components that could conflict with design system discovery
  */
-function cleanupDefaultStorybookComponents() {
-    const storiesDir = path.join(process.cwd(), 'src', 'stories');
-    // Common default Storybook files that cause conflicts
+export function cleanupDefaultStorybookComponents() {
+    const possibleDirs = [
+        path.join(process.cwd(), 'src', 'stories'),
+        path.join(process.cwd(), 'stories'),
+        path.join(process.cwd(), '.storybook', 'stories')
+    ];
+    // Comprehensive list of default Storybook files that cause conflicts
     const defaultFiles = [
-        'Button.stories.ts',
-        'Button.stories.tsx',
-        'Header.stories.ts',
-        'Header.stories.tsx',
-        'Page.stories.ts',
-        'Page.stories.tsx',
-        'button.css',
-        'header.css',
-        'page.css',
-        'Button.tsx',
-        'Header.tsx',
-        'Page.tsx'
+        // Component files
+        'Button.stories.ts', 'Button.stories.tsx', 'Button.stories.js', 'Button.stories.jsx',
+        'Header.stories.ts', 'Header.stories.tsx', 'Header.stories.js', 'Header.stories.jsx',
+        'Page.stories.ts', 'Page.stories.tsx', 'Page.stories.js', 'Page.stories.jsx',
+        'Introduction.stories.ts', 'Introduction.stories.tsx', 'Introduction.stories.js', 'Introduction.stories.jsx',
+        'Configure.stories.ts', 'Configure.stories.tsx', 'Configure.stories.js', 'Configure.stories.jsx',
+        // Component implementation files
+        'Button.tsx', 'Button.ts', 'Button.jsx', 'Button.js',
+        'Header.tsx', 'Header.ts', 'Header.jsx', 'Header.js',
+        'Page.tsx', 'Page.ts', 'Page.jsx', 'Page.js',
+        // CSS files
+        'button.css', 'header.css', 'page.css', 'introduction.css',
+        // MDX files
+        'Introduction.stories.mdx', 'Configure.stories.mdx'
     ];
     let cleanedFiles = 0;
-    for (const fileName of defaultFiles) {
-        const filePath = path.join(storiesDir, fileName);
-        if (fs.existsSync(filePath)) {
-            try {
-                fs.unlinkSync(filePath);
-                cleanedFiles++;
-            }
-            catch (error) {
-                console.warn(`Could not remove ${fileName}: ${error}`);
+    for (const storiesDir of possibleDirs) {
+        if (!fs.existsSync(storiesDir))
+            continue;
+        for (const fileName of defaultFiles) {
+            const filePath = path.join(storiesDir, fileName);
+            if (fs.existsSync(filePath)) {
+                try {
+                    fs.unlinkSync(filePath);
+                    cleanedFiles++;
+                }
+                catch (error) {
+                    console.warn(`Could not remove ${fileName}: ${error}`);
+                }
             }
         }
     }
     if (cleanedFiles > 0) {
-        console.log(chalk.green(`✅ Cleaned up ${cleanedFiles} default Storybook template files to prevent conflicts`));
+        console.log(chalk.green(`✅ Cleaned up ${cleanedFiles} default Storybook template files to prevent component discovery conflicts`));
     }
 }
+/**
+ * Set up Storybook preview file with appropriate providers for design systems
+ */
+function setupStorybookPreview(designSystem) {
+    const storybookDir = path.join(process.cwd(), '.storybook');
+    const previewTsPath = path.join(storybookDir, 'preview.ts');
+    const previewTsxPath = path.join(storybookDir, 'preview.tsx');
+    if (!fs.existsSync(storybookDir)) {
+        console.log(chalk.yellow('⚠️  .storybook directory not found. Please run storybook init first.'));
+        return;
+    }
+    const designSystemConfigs = {
+        chakra: {
+            imports: [
+                "import type { Preview } from '@storybook/react-vite'",
+                "import { ChakraProvider, defaultSystem } from '@chakra-ui/react'",
+                "import React from 'react'"
+            ],
+            decorator: `(Story) => (
+      <ChakraProvider value={defaultSystem}>
+        <Story />
+      </ChakraProvider>
+    )`
+        },
+        antd: {
+            imports: [
+                "import type { Preview } from '@storybook/react-vite'",
+                "import { ConfigProvider } from 'antd'",
+                "import React from 'react'"
+            ],
+            decorator: `(Story) => (
+      <ConfigProvider>
+        <Story />
+      </ConfigProvider>
+    )`
+        },
+        mantine: {
+            imports: [
+                "import type { Preview } from '@storybook/react-vite'",
+                "import { MantineProvider } from '@mantine/core'",
+                "import '@mantine/core/styles.css'",
+                "import React from 'react'"
+            ],
+            decorator: `(Story) => (
+      <MantineProvider>
+        <Story />
+      </MantineProvider>
+    )`
+        }
+    };
+    const config = designSystemConfigs[designSystem];
+    if (!config)
+        return;
+    // Create the preview content
+    const previewContent = `${config.imports.join('\n')}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    ${config.decorator},
+  ],
+};
+
+export default preview;
+`;
+    // Remove existing preview.ts if it exists
+    if (fs.existsSync(previewTsPath)) {
+        fs.unlinkSync(previewTsPath);
+    }
+    // Create preview.tsx with JSX support
+    fs.writeFileSync(previewTsxPath, previewContent);
+    console.log(chalk.green(`✅ Created .storybook/preview.tsx with ${designSystem} provider setup`));
+}
 // Design system installation configurations
 const DESIGN_SYSTEM_CONFIGS = {
     antd: {
@@ -112,11 +202,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;
     }
@@ -261,7 +396,27 @@ export async function setupCommand() {
     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...'));
+            console.log(chalk.red('❌ Installation failed! Cannot continue without required dependencies.'));
+            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(' ')}`));
+            process.exit(1);
+        }
+    }
+    else if (['antd', 'mantine', 'chakra'].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]);
+            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(' ')}`));
+                process.exit(1);
+            }
         }
     }
     // Generate configuration
@@ -493,6 +648,10 @@ 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/dist/story-generator/dynamicPackageDiscovery.js

@@ -233,14 +233,24 @@ export class DynamicPackageDiscovery {
      * Get the type of an export
      */
     getExportType(value) {
+        // Handle undefined/null values
+        if (value === undefined || value === null) {
+            return 'unknown';
+        }
         const type = typeof value;
         if (type === 'function') {
-            // Try to distinguish between function and class
-            const fnString = value.toString();
-            if (fnString.startsWith('class ') || /^function [A-Z]/.test(fnString)) {
-                return 'class';
+            try {
+                // Try to distinguish between function and class
+                const fnString = value.toString();
+                if (fnString.startsWith('class ') || /^function [A-Z]/.test(fnString)) {
+                    return 'class';
+                }
+                return 'function';
+            }
+            catch (error) {
+                // Some functions might not have toString() available
+                return 'function';
             }
-            return 'function';
         }
         if (type === 'object' && value !== null) {
             return 'object';

package/package.json

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