xertica-ui 1.4.4 → 1.4.7

package/bin/cli.ts

@@ -1,372 +1,292 @@
-#!/usr/bin/env node
-import { Command } from 'commander';
-import prompts from 'prompts';
-import chalk from 'chalk';
-import ora from 'ora';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { execa } from 'execa';
-import { colorThemes } from '../contexts/theme-data';
-import { generateTokensCss } from './generate-tokens';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const program = new Command();
-
-program
-    .name('xertica-ui')
-    .description('CLI to initialize Xertica UI projects')
-    .version('1.0.0');
-
-program
-    .command('init')
-    .description('Initialize a new Xertica UI project')
-    .argument('[directory]', 'Directory to initialize in', '.')
-    .action(async (directory) => {
-        const targetDir = path.resolve(process.cwd(), directory);
-        const sourceRoot = path.resolve(__dirname, '../');
-
-        // Scan for components
-        const uiComponentsDir = path.join(sourceRoot, 'components/ui');
-        let componentChoices = [{ title: 'All Components', value: 'all', selected: true }];
-
-        if (await fs.pathExists(uiComponentsDir)) {
-            const files = await fs.readdir(uiComponentsDir);
-            const components = files
-                .filter(f => f.endsWith('.tsx') && !f.startsWith('index'))
-                .map(f => ({ title: f.replace('.tsx', ''), value: f, selected: true }));
-
-            componentChoices = [
-                { title: 'All Components', value: 'all', selected: true },
-                ...components
-            ];
-        }
-
-
-
-        console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
-
-        const response = await prompts([
-            {
-                type: 'multiselect',
-                name: 'components',
-                message: 'Which components would you like to include?',
-                choices: componentChoices.length > 1 ? componentChoices : [
-                    { title: 'All Components', value: 'all', selected: true },
-                    // Fetch components logic was above, I'll rely on existing code for that part 
-                    // and just insert my code around existing blocks in separate steps if needed.
-                    // But replace_file_content requires me to match content.
-                ],
-                hint: '- Space to select. Return to submit',
-                min: 1
-            },
-            {
-                type: 'multiselect',
-                name: 'pages',
-                message: 'Which pages/templates to include?',
-                choices: [
-                    { title: 'Login Page', value: 'login', selected: true },
-                    { title: 'Home Page', value: 'home', selected: true },
-                    { title: 'Template Page', value: 'template', selected: true },
-                ]
-            },
-            {
-                type: 'select',
-                name: 'theme',
-                message: 'Select the default color theme for your project:',
-                choices: colorThemes.map(t => ({
-                    title: t.name,
-                    description: t.description,
-                    value: t.id
-                })),
-                initial: 0
-            },
-            {
-                type: 'confirm',
-                name: 'install',
-                message: 'Install dependencies automatically?',
-                initial: true
-            }
-        ]);
-
-        if (!response.components) return;
-
-        const spinner = ora('Initializing project...').start();
-
-        try {
-            // 1. Create Target Directory
-            await fs.ensureDir(targetDir);
-
-            // 2. Copy Base Files
-            const foldersToCopy = ['components', 'contexts', 'styles', 'hooks', 'assets', 'imports', 'utils', 'guidelines'];
-            const filesToCopy = [
-                'package.json', 'tsconfig.json', 'tsconfig.node.json', 'vite.config.ts',
-                'index.html', 'routes.tsx', 'main.tsx', 'postcss.config.js',
-                'vite-env.d.ts', 'index.css', 'eslint.config.js'
-            ];
-            // Note: App.tsx is handled separately
-
-            for (const file of filesToCopy) {
-                const srcPath = path.join(sourceRoot, file);
-                const destPath = path.join(targetDir, file);
-                if (await fs.pathExists(srcPath)) {
-                    await fs.copy(srcPath, destPath);
-                }
-            }
-
-            // Create .env.example
-            const envExampleContent = `VITE_GOOGLE_MAPS_API_KEY=
-VITE_GEMINI_API_KEY=`;
-            await fs.writeFile(path.join(targetDir, '.env.example'), envExampleContent);
-
-            // Handle App.tsx specifically
-            const pages = response.pages || [];
-            const hasLogin = pages.includes('login');
-            const hasHome = pages.includes('home');
-            const hasTemplate = pages.includes('template');
-            const hasAllPages = hasLogin && hasHome && hasTemplate;
-
-            if (hasAllPages) {
-                if (await fs.pathExists(path.join(sourceRoot, 'App.tsx'))) {
-                    await fs.copy(path.join(sourceRoot, 'App.tsx'), path.join(targetDir, 'App.tsx'));
-                }
-            } else {
-                // Minimal App.tsx
-                const minimalApp = `import React from 'react';
-import { Toaster } from './components/ui/sonner';
-
-export default function App() {
-  return (
-    <div className="min-h-screen bg-white p-8">
-      <h1 className="text-3xl font-bold mb-4">Welcome to Xertica UI</h1>
-      <p>Start building your app by editing App.tsx</p>
-      <Toaster />
-    </div>
-  );
-}
-`;
-                await fs.writeFile(path.join(targetDir, 'App.tsx'), minimalApp);
-            }
-
-            // Copy folders with filter
-            const selectedComponents = response.components;
-            const copyAllComponents = selectedComponents.includes('all');
-
-            for (const folder of foldersToCopy) {
-                const srcPath = path.join(sourceRoot, folder);
-                if (await fs.pathExists(srcPath)) {
-                    await fs.copy(srcPath, path.join(targetDir, folder), {
-                        filter: (src) => {
-                            const basename = path.basename(src);
-                            if (basename === 'node_modules') return false;
-
-                            // Component filtering
-                            const isUI = src.includes(path.join('components', 'ui'));
-
-                            if (isUI && folder === 'components') {
-                                if (basename === 'index.ts') return true;
-                                if (copyAllComponents) return true;
-
-                                // If it's a file
-                                if (path.extname(basename) === '.tsx') {
-                                    if (!selectedComponents.includes(basename)) return false;
-                                }
-                            }
-
-                            // Page filtering (in components root)
-                            const isComponentsRoot = src.endsWith('components') || path.dirname(src).endsWith('components');
-                            if (isComponentsRoot && folder === 'components') {
-                                if (!hasLogin && basename === 'LoginPage.tsx') return false;
-                                if (!hasLogin && basename === 'ForgotPasswordPage.tsx') return false;
-                                if (!hasLogin && basename === 'VerifyEmailPage.tsx') return false;
-                                if (!hasLogin && basename === 'ResetPasswordPage.tsx') return false;
-
-                                if (!hasHome && basename === 'HomePage.tsx') return false;
-                                if (!hasTemplate && basename === 'TemplatePage.tsx') return false;
-                            }
-
-                            return true;
-                        }
-                    });
-                }
-            }
-
-            // --- Apply Selected Theme ---
-            if (response.theme) {
-                // 1. Update React Context
-                const contextPath = path.join(targetDir, 'contexts', 'BrandColorsContext.tsx');
-                if (await fs.pathExists(contextPath)) {
-                    let content = await fs.readFile(contextPath, 'utf8');
-                    content = content.replace(
-                        /return saved \|\| 'xertica-original';/,
-                        `return saved || '${response.theme}';`
-                    );
-                    await fs.writeFile(contextPath, content);
-                }
-
-                // 2. Update styles/xertica/tokens.css
-                const tokensPath = path.join(targetDir, 'styles', 'xertica', 'tokens.css');
-                const selectedTheme = colorThemes.find(t => t.id === response.theme);
-
-                if (selectedTheme) {
-                    // Ensure the directory exists (it should, from copy)
-                    await fs.ensureDir(path.dirname(tokensPath));
-
-                    const newTokensCss = generateTokensCss(selectedTheme);
-                    await fs.writeFile(tokensPath, newTokensCss);
-                }
-            }
-
-            spinner.succeed('Project initialized successfully!');
-
-            if (response.install) {
-                const installSpinner = ora('Installing dependencies...').start();
-                await execa('npm', ['install'], { cwd: targetDir });
-                installSpinner.succeed('Dependencies installed!');
-            }
-
-            console.log(chalk.green('\nDone! Now run:'));
-            console.log(chalk.cyan(`  cd ${directory}`));
-            console.log(chalk.cyan('  npm run dev'));
-
-        } catch (error) {
-            spinner.fail('Failed to initialize project');
-            console.error(error);
-        }
-    });
-
-program
-    .command('update')
-    .description('Update components in your project')
-    .argument('[components...]', 'Components to update')
-    .option('-a, --all', 'Update all installed components')
-    .action(async (components, options) => {
-        const targetDir = process.cwd();
-        const sourceRoot = path.resolve(__dirname, '../');
-        const uiComponentsDir = path.join(targetDir, 'components/ui');
-        const sourceUiDir = path.join(sourceRoot, 'components/ui');
-
-        if (!await fs.pathExists(uiComponentsDir)) {
-            console.error(chalk.red('Components directory not found. Is this a Xertica UI project?'));
-            return;
-        }
-
-        if (!await fs.pathExists(sourceUiDir)) {
-            console.error(chalk.red('Source components not found. Try reinstalling the CLI package.'));
-            return;
-        }
-
-        let componentsToUpdate: string[] = [];
-
-        if (options.all) {
-            const files = await fs.readdir(uiComponentsDir);
-            componentsToUpdate = files.filter(f => f.endsWith('.tsx'));
-        } else if (components && components.length > 0) {
-            componentsToUpdate = components.map((c: string) => c.endsWith('.tsx') ? c : `${c}.tsx`);
-        } else {
-            // Interactive mode
-            const files = await fs.readdir(uiComponentsDir);
-            const installedComponents = files.filter(f => f.endsWith('.tsx'));
-
-            if (installedComponents.length === 0) {
-                console.log(chalk.yellow('No components found to update.'));
-                return;
-            }
-
-            const response = await prompts({
-                type: 'multiselect',
-                name: 'selected',
-                message: 'Select components to update',
-                choices: installedComponents.map(f => ({ title: f, value: f })),
-                min: 1
-            });
-
-            if (!response.selected) return;
-            componentsToUpdate = response.selected;
-        }
-
-
-
-        // --- Theme Update Logic ---
-        // Ask if user wants to update theme
-        const themeResponse = await prompts({
-            type: 'confirm',
-            name: 'updateTheme',
-            message: 'Do you want to update/change the project theme?',
-            initial: false
-        });
-
-        if (themeResponse.updateTheme) {
-            const themeSelection = await prompts({
-                type: 'select',
-                name: 'theme',
-                message: 'Select the new color theme:',
-                choices: colorThemes.map(t => ({
-                    title: t.name,
-                    description: t.description,
-                    value: t.id
-                })),
-                initial: 0
-            });
-
-            if (themeSelection.theme) {
-                const spinnerTheme = ora('Updating theme...').start();
-                // 1. Update React Context
-                const contextPath = path.join(targetDir, 'contexts', 'BrandColorsContext.tsx');
-                if (await fs.pathExists(contextPath)) {
-                    let content = await fs.readFile(contextPath, 'utf8');
-                    // Replace existing default. We can try to find any string like "return saved || '...';"
-                    // The regex needs to be robust to catch whatever is there currently.
-                    // It might be 'xertica-original' or previously set 'rose', etc.
-                    // Regex: /return saved \|\| '([a-zA-Z0-9-]+)';/
-                    content = content.replace(
-                        /return saved \|\| '([a-zA-Z0-9-]+)';/,
-                        `return saved || '${themeSelection.theme}';`
-                    );
-                    await fs.writeFile(contextPath, content);
-                } else {
-                    spinnerTheme.warn('BrandColorsContext.tsx not found. Skipping context update.');
-                }
-
-                // 2. Update styles/xertica/tokens.css
-                const tokensPath = path.join(targetDir, 'styles', 'xertica', 'tokens.css');
-                const selectedTheme = colorThemes.find(t => t.id === themeSelection.theme);
-
-                if (selectedTheme) {
-                    await fs.ensureDir(path.dirname(tokensPath));
-                    const newTokensCss = generateTokensCss(selectedTheme);
-                    await fs.writeFile(tokensPath, newTokensCss);
-                }
-                spinnerTheme.succeed('Theme updated successfully!');
-            }
-        }
-
-        const spinner = ora('Updating components...').start();
-
-        try {
-            let updatedCount = 0;
-            for (const component of componentsToUpdate) {
-                const srcPath = path.join(sourceUiDir, component);
-                const destPath = path.join(uiComponentsDir, component);
-
-                if (await fs.pathExists(srcPath)) {
-                    await fs.copy(srcPath, destPath);
-                    updatedCount++;
-                } else {
-                    spinner.warn(`Component ${component} not found in source.`);
-                }
-            }
-            if (updatedCount > 0) {
-                spinner.succeed(`Successfully updated ${updatedCount} components!`);
-            } else {
-                spinner.info('No components updated.');
-            }
-        } catch (error) {
-            spinner.fail('Failed to update components');
-            console.error(error);
-        }
-    });
-
-program.parse();
+#!/usr/bin/env node
+import { Command } from 'commander';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execa } from 'execa';
+import { colorThemes } from '../contexts/theme-data';
+import { generateTokensCss } from './generate-tokens';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const program = new Command();
+
+program
+    .name('xertica-ui')
+    .description('CLI to initialize Xertica UI projects')
+    .version('1.0.0');
+
+program
+    .command('init')
+    .description('Initialize a new Xertica UI project')
+    .argument('[directory]', 'Directory to initialize in', '.')
+    .action(async (directory) => {
+        const targetDir = path.resolve(process.cwd(), directory);
+        // The templates directory is bundled alongside the CLI
+        const templatesDir = path.resolve(__dirname, '../templates');
+
+        console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
+
+        const response = await prompts([
+            {
+                type: 'multiselect',
+                name: 'pages',
+                message: 'Which pages/templates to include?',
+                choices: [
+                    { title: 'Login Page (+ Forgot / Verify / Reset Password)', value: 'login', selected: true },
+                    { title: 'Home Page', value: 'home', selected: true },
+                    { title: 'Template Page (components showcase)', value: 'template', selected: true },
+                ]
+            },
+            {
+                type: 'select',
+                name: 'theme',
+                message: 'Select the default color theme for your project:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            },
+            {
+                type: 'confirm',
+                name: 'install',
+                message: 'Install dependencies automatically?',
+                initial: true
+            }
+        ]);
+
+        if (!response.pages) return;
+
+        const spinner = ora('Initializing project...').start();
+
+        try {
+            // 1. Create Target Directory
+            await fs.ensureDir(targetDir);
+
+            const pages = response.pages || [];
+            const hasLogin = pages.includes('login');
+            const hasHome = pages.includes('home');
+            const hasTemplate = pages.includes('template');
+
+            // 2. Copy root config files from templates/
+            const rootFilesToCopy = [
+                'index.html',
+                'vite.config.ts',
+                'tsconfig.json',
+                'tsconfig.node.json',
+                'postcss.config.js',
+                'vite-env.d.ts',
+                'eslint.config.js',
+                'index.css',
+                '.env.example',
+            ];
+
+            for (const file of rootFilesToCopy) {
+                const srcPath = path.join(templatesDir, file);
+                const destPath = path.join(targetDir, file);
+                if (await fs.pathExists(srcPath)) {
+                    await fs.copy(srcPath, destPath);
+                }
+            }
+
+            // 3. Copy package.json template and customize it
+            const pkgTemplatePath = path.join(templatesDir, 'package.json');
+            if (await fs.pathExists(pkgTemplatePath)) {
+                const pkgContent = await fs.readJson(pkgTemplatePath);
+                // Use directory name as project name
+                const projectName = path.basename(targetDir) || 'my-xertica-app';
+                pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
+            }
+
+            // 4. Ensure src directory exists
+            await fs.ensureDir(path.join(targetDir, 'src'));
+
+            // 5. Copy src/App.tsx
+            await fs.copy(
+                path.join(templatesDir, 'src', 'App.tsx'),
+                path.join(targetDir, 'src', 'App.tsx')
+            );
+
+            // 6. Copy src/main.tsx
+            await fs.copy(
+                path.join(templatesDir, 'src', 'main.tsx'),
+                path.join(targetDir, 'src', 'main.tsx')
+            );
+
+            // 7. Copy src/routes.tsx
+            await fs.copy(
+                path.join(templatesDir, 'src', 'routes.tsx'),
+                path.join(targetDir, 'src', 'routes.tsx')
+            );
+
+            // 8. Copy pages
+            await fs.ensureDir(path.join(targetDir, 'src', 'pages'));
+
+            // Always needed pages
+            const alwaysCopyPages = ['LoginPage.tsx', 'ForgotPasswordPage.tsx', 'VerifyEmailPage.tsx', 'ResetPasswordPage.tsx'];
+            const optionalPages: Record<string, boolean> = {
+                'LoginPage.tsx': hasLogin,
+                'ForgotPasswordPage.tsx': hasLogin,
+                'VerifyEmailPage.tsx': hasLogin,
+                'ResetPasswordPage.tsx': hasLogin,
+                'HomePage.tsx': hasHome,
+                'TemplatePage.tsx': hasTemplate,
+            };
+
+            const srcPagesDir = path.join(templatesDir, 'src', 'pages');
+            for (const [file, shouldCopy] of Object.entries(optionalPages)) {
+                if (shouldCopy) {
+                    const srcPath = path.join(srcPagesDir, file);
+                    if (await fs.pathExists(srcPath)) {
+                        await fs.copy(srcPath, path.join(targetDir, 'src', 'pages', file));
+                    }
+                }
+            }
+
+            // 9. Copy content components
+            await fs.ensureDir(path.join(targetDir, 'src', 'content'));
+            const srcContentDir = path.join(templatesDir, 'src', 'content');
+
+            if (hasHome && await fs.pathExists(path.join(srcContentDir, 'HomeContent.tsx'))) {
+                await fs.copy(
+                    path.join(srcContentDir, 'HomeContent.tsx'),
+                    path.join(targetDir, 'src', 'content', 'HomeContent.tsx')
+                );
+            }
+
+            if (hasTemplate && await fs.pathExists(path.join(srcContentDir, 'TemplateContent.tsx'))) {
+                await fs.copy(
+                    path.join(srcContentDir, 'TemplateContent.tsx'),
+                    path.join(targetDir, 'src', 'content', 'TemplateContent.tsx')
+                );
+            }
+
+            // 10. If NOT all pages selected, create a minimal App.tsx
+            if (!hasLogin || !hasHome || !hasTemplate) {
+                const imports: string[] = [];
+                const routes: string[] = [];
+
+                if (hasLogin) {
+                    imports.push(`import { LoginPage } from './pages/LoginPage';`);
+                    imports.push(`import { ForgotPasswordPage } from './pages/ForgotPasswordPage';`);
+                    imports.push(`import { VerifyEmailPage } from './pages/VerifyEmailPage';`);
+                    imports.push(`import { ResetPasswordPage } from './pages/ResetPasswordPage';`);
+                    routes.push(`        <Route path="/login" element={<LoginPage onLogin={handleLogin} />} />`);
+                    routes.push(`        <Route path="/forgot-password" element={<ForgotPasswordPage />} />`);
+                    routes.push(`        <Route path="/verify-email" element={<VerifyEmailPage />} />`);
+                    routes.push(`        <Route path="/reset-password" element={<ResetPasswordPage />} />`);
+                }
+                if (hasHome) {
+                    imports.push(`import { HomePage } from './pages/HomePage';`);
+                    routes.push(`        <Route path="/home" element={<HomePage user={user} onLogout={handleLogout} />} />`);
+                }
+                if (hasTemplate) {
+                    imports.push(`import { TemplatePage } from './pages/TemplatePage';`);
+                    routes.push(`        <Route path="/template" element={<TemplatePage user={user} onLogout={handleLogout} />} />`);
+                }
+
+                const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
+import { XerticaProvider, Toaster } from 'xertica-ui';
+import 'xertica-ui/style.css';
+${imports.join('\n')}
+
+export default function App() {
+  return (
+    <XerticaProvider>
+      <Router>
+        <Routes>
+${routes.join('\n')}
+          <Route path="/" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
+          <Route path="*" element={<Navigate to="${hasLogin ? '/login' : hasHome ? '/home' : '/template'}" replace />} />
+        </Routes>
+        <Toaster position="top-right" richColors />
+      </Router>
+    </XerticaProvider>
+  );
+}
+`;
+                await fs.writeFile(path.join(targetDir, 'src', 'App.tsx'), minimalApp);
+            }
+
+            // 11. Generate theme tokens
+            const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
+
+            // Create styles/xertica directory
+            const tokensDir = path.join(targetDir, 'styles', 'xertica');
+            await fs.ensureDir(tokensDir);
+            const newTokensCss = generateTokensCss(selectedTheme);
+            await fs.writeFile(path.join(tokensDir, 'tokens.css'), newTokensCss);
+
+            spinner.succeed('Project initialized successfully!');
+
+            if (response.install) {
+                const installSpinner = ora('Installing dependencies...').start();
+                await execa('npm', ['install'], { cwd: targetDir });
+                installSpinner.succeed('Dependencies installed!');
+            }
+
+            console.log(chalk.green('\n✅ Done! Your Xertica UI project is ready.'));
+            console.log(chalk.cyan(`\n  cd ${directory}`));
+            if (!response.install) {
+                console.log(chalk.cyan('  npm install'));
+            }
+            console.log(chalk.cyan('  npm run dev'));
+            console.log();
+            console.log(chalk.gray('  Components are imported from the xertica-ui package.'));
+            console.log(chalk.gray('  Customize the theme in styles/xertica/tokens.css'));
+
+        } catch (error) {
+            spinner.fail('Failed to initialize project');
+            console.error(error);
+        }
+    });
+
+program
+    .command('update')
+    .description('Update theme tokens in your project')
+    .action(async () => {
+        const targetDir = process.cwd();
+
+        const themeResponse = await prompts({
+            type: 'select',
+            name: 'theme',
+            message: 'Select the new color theme:',
+            choices: colorThemes.map(t => ({
+                title: t.name,
+                description: t.description,
+                value: t.id
+            })),
+            initial: 0
+        });
+
+        if (!themeResponse.theme) return;
+
+        const spinner = ora('Updating theme...').start();
+
+        try {
+            const tokensPath = path.join(targetDir, 'styles', 'xertica', 'tokens.css');
+            const selectedTheme = colorThemes.find(t => t.id === themeResponse.theme);
+
+            if (selectedTheme) {
+                await fs.ensureDir(path.dirname(tokensPath));
+                const newTokensCss = generateTokensCss(selectedTheme);
+                await fs.writeFile(tokensPath, newTokensCss);
+                spinner.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+            } else {
+                spinner.fail('Theme not found.');
+            }
+        } catch (error) {
+            spinner.fail('Failed to update theme');
+            console.error(error);
+        }
+    });
+
+program.parse();