@tpitre/story-ui 2.0.0 → 2.1.0

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

@@ -28,6 +28,132 @@ async function findAvailablePort(startPort) {
     }
     return port;
 }
+/**
+ * Clean up default Storybook template components that could conflict with design system discovery
+ */
+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 = [
+        // 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 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 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 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: {
@@ -224,7 +350,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
@@ -454,6 +600,12 @@ export async function setupCommand() {
             console.log(chalk.green(`✅ Updated .gitignore with Story UI patterns`));
         }
     }
+    // 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.0",
+  "version": "2.1.0",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",