xertica-ui 2.0.0 → 2.0.2

package/dist/cli.js

@@ -528,7 +528,7 @@ var generateTokensCss = (theme) => {
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
-program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("1.7.0");
+program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.0.2");
 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 templatesDir = path.resolve(__dirname, "../templates");
@@ -583,9 +583,8 @@ program.command("init").description("Initialize a new Xertica UI project").argum
     ];
     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);
+        await fs.copy(srcPath, path.join(targetDir, file));
       }
     }
     const pkgTemplatePath = path.join(templatesDir, "package.json");
@@ -595,86 +594,136 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
       await fs.writeJson(path.join(targetDir, "package.json"), pkgContent, { spaces: 2 });
     }
+    await fs.copy(
+      path.join(templatesDir, "src", "main.tsx"),
+      path.join(targetDir, "src", "main.tsx")
+    );
     await fs.ensureDir(path.join(targetDir, "src", "app"));
     await fs.copy(
       path.join(templatesDir, "src", "app", "App.tsx"),
       path.join(targetDir, "src", "app", "App.tsx")
     );
+    await fs.ensureDir(path.join(targetDir, "src", "app", "components"));
     await fs.copy(
-      path.join(templatesDir, "src", "main.tsx"),
-      path.join(targetDir, "src", "main.tsx")
+      path.join(templatesDir, "src", "app", "components", "AppLayout.tsx"),
+      path.join(targetDir, "src", "app", "components", "AppLayout.tsx")
     );
     await fs.copy(
-      path.join(templatesDir, "src", "app", "routes.tsx"),
-      path.join(targetDir, "src", "app", "routes.tsx")
+      path.join(templatesDir, "src", "shared"),
+      path.join(targetDir, "src", "shared")
     );
-    await fs.ensureDir(path.join(targetDir, "src", "app", "pages"));
-    const optionalPages = {
-      login: { file: "LoginPage.tsx", dir: "Login", shouldCopy: hasLogin },
-      forgot: { file: "ForgotPasswordPage.tsx", dir: "ForgotPassword", shouldCopy: hasLogin },
-      verify: { file: "VerifyEmailPage.tsx", dir: "VerifyEmail", shouldCopy: hasLogin },
-      reset: { file: "ResetPasswordPage.tsx", dir: "ResetPassword", shouldCopy: hasLogin },
-      home: { file: "HomePage.tsx", dir: "Home", shouldCopy: hasHome },
-      template: { file: "TemplatePage.tsx", dir: "Template", shouldCopy: hasTemplate }
-    };
-    const srcPagesDir = path.join(templatesDir, "src", "app", "pages");
-    for (const key in optionalPages) {
-      const { file, dir, shouldCopy } = optionalPages[key];
-      if (shouldCopy) {
-        const srcFilePath = path.join(srcPagesDir, file);
-        if (await fs.pathExists(srcFilePath)) {
-          await fs.copy(srcFilePath, path.join(targetDir, "src", "app", "pages", file));
-        }
-        if (dir) {
-          const srcDirPath = path.join(srcPagesDir, dir);
-          if (await fs.pathExists(srcDirPath)) {
-            await fs.copy(srcDirPath, path.join(targetDir, "src", "app", "pages", dir));
-          }
-        }
-      }
+    if (hasLogin) {
+      await fs.copy(
+        path.join(templatesDir, "src", "features", "auth"),
+        path.join(targetDir, "src", "features", "auth")
+      );
     }
-    if (!hasLogin || !hasHome || !hasTemplate) {
-      const imports = [];
-      const routes = [];
-      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} />} />`);
+    if (hasHome) {
+      await fs.copy(
+        path.join(templatesDir, "src", "features", "home"),
+        path.join(targetDir, "src", "features", "home")
+      );
+    }
+    if (hasTemplate) {
+      await fs.copy(
+        path.join(templatesDir, "src", "features", "template"),
+        path.join(targetDir, "src", "features", "template")
+      );
+    }
+    await fs.ensureDir(path.join(targetDir, "src", "pages"));
+    const pagesToCopy = [];
+    if (hasLogin) pagesToCopy.push("LoginPage.tsx", "ForgotPasswordPage.tsx", "VerifyEmailPage.tsx", "ResetPasswordPage.tsx");
+    if (hasHome) pagesToCopy.push("HomePage.tsx");
+    if (hasTemplate) pagesToCopy.push("TemplatePage.tsx");
+    for (const pageFile of pagesToCopy) {
+      const src = path.join(templatesDir, "src", "pages", pageFile);
+      if (await fs.pathExists(src)) {
+        await fs.copy(src, path.join(targetDir, "src", "pages", pageFile));
       }
-      const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
-import { XerticaProvider } from 'xertica-ui';
-${imports.join("\n")}
+    }
+    const firstProtectedPath = hasHome ? "/home" : hasTemplate ? "/template" : "/login";
+    const authGuardImports = [
+      `import React, { useState, useEffect } from 'react';`,
+      `import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';`
+    ];
+    if (hasLogin) {
+      authGuardImports.push(`import { getStoredUser, storeUser, clearStoredUser } from '../../shared/lib/auth';`);
+      authGuardImports.push(`import type { User } from '../../shared/types/auth';`);
+      authGuardImports.push(`import { LoginPage } from '../../pages/LoginPage';`);
+      authGuardImports.push(`import { ForgotPasswordPage } from '../../pages/ForgotPasswordPage';`);
+      authGuardImports.push(`import { VerifyEmailPage } from '../../pages/VerifyEmailPage';`);
+      authGuardImports.push(`import { ResetPasswordPage } from '../../pages/ResetPasswordPage';`);
+    } else {
+      authGuardImports.push(`import { getStoredUser, storeUser, clearStoredUser } from '../../shared/lib/auth';`);
+      authGuardImports.push(`import type { User } from '../../shared/types/auth';`);
+    }
+    if (hasHome) authGuardImports.push(`import { HomePage } from '../../pages/HomePage';`);
+    if (hasTemplate) authGuardImports.push(`import { TemplatePage } from '../../pages/TemplatePage';`);
+    const protectedRoutes = [];
+    if (hasHome) protectedRoutes.push(`        <Route path="/home" element={<ProtectedRoute user={user}><HomePage user={user} onLogout={handleLogout} /></ProtectedRoute>} />`);
+    if (hasTemplate) protectedRoutes.push(`        <Route path="/template" element={<ProtectedRoute user={user}><TemplatePage user={user} onLogout={handleLogout} /></ProtectedRoute>} />`);
+    const authRoutes = [];
+    if (hasLogin) {
+      authRoutes.push(`        <Route path="/login" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <LoginPage onLogin={handleLogin} />} />`);
+      authRoutes.push(`        <Route path="/forgot-password" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <ForgotPasswordPage />} />`);
+      authRoutes.push(`        <Route path="/verify-email" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <VerifyEmailPage />} />`);
+      authRoutes.push(`        <Route path="/reset-password" element={user ? <Navigate to="${firstProtectedPath}" replace /> : <ResetPasswordPage />} />`);
+    }
+    const handleLoginFn = hasLogin ? `
+  const handleLogin = (email: string, password: string): boolean => {
+    if (!email.trim() || !password.trim()) return false;
+    const userData: User = { email };
+    storeUser(userData);
+    setUser(userData);
+    navigate('${firstProtectedPath}');
+    return true;
+  };` : "";
+    const authPathsRedirect = hasLogin ? `
+  useEffect(() => {
+    const authPaths = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
+    if (user && authPaths.includes(location.pathname)) {
+      navigate('${firstProtectedPath}', { replace: true });
+    }
+  }, [user, location.pathname, navigate]);` : "";
+    const authGuardContent = `${authGuardImports.join("\n")}
+
+function ProtectedRoute({ children, user }: { children: React.ReactNode; user: User | null }) {
+  if (!user) return <Navigate to="${hasLogin ? "/login" : firstProtectedPath}" replace />;
+  return <>{children}</>;
+}
+
+export function AuthGuard() {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();${hasLogin ? `
+  const location = useLocation();` : ""}
+
+  useEffect(() => {
+    setUser(getStoredUser());
+  }, []);
+${authPathsRedirect}${handleLoginFn}
+
+  const handleLogout = () => {
+    clearStoredUser();
+    setUser(null);
+    navigate('${hasLogin ? "/login" : firstProtectedPath}');
+  };
 
-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>
-      </Router>
-    </XerticaProvider>
+    <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
+      <Routes>
+${authRoutes.join("\n")}
+${protectedRoutes.join("\n")}
+        <Route path="/" element={<Navigate to="${hasLogin ? firstProtectedPath === "/login" ? "/login" : firstProtectedPath : firstProtectedPath}" replace />} />
+        <Route path="*" element={<Navigate to="${hasLogin ? "/login" : firstProtectedPath}" replace />} />
+      </Routes>
+    </div>
   );
 }
 `;
-      await fs.writeFile(path.join(targetDir, "src", "app", "App.tsx"), minimalApp);
-    }
+    await fs.writeFile(
+      path.join(targetDir, "src", "app", "components", "AuthGuard.tsx"),
+      authGuardContent
+    );
     const selectedTheme = colorThemes.find((t) => t.id === response.theme) || colorThemes[0];
     const tokensDir = path.join(targetDir, "src", "styles", "xertica");
     await fs.ensureDir(tokensDir);
@@ -682,8 +731,7 @@ ${routes.join("\n")}
       path.join(templatesDir, "src", "styles", "index.css"),
       path.join(targetDir, "src", "styles", "index.css")
     );
-    const newTokensCss = generateTokensCss(selectedTheme);
-    await fs.writeFile(path.join(tokensDir, "tokens.css"), newTokensCss);
+    await fs.writeFile(path.join(tokensDir, "tokens.css"), generateTokensCss(selectedTheme));
     spinner.succeed("Project initialized successfully!");
     if (response.install) {
       const installSpinner = ora("Installing dependencies...").start();
@@ -705,34 +753,151 @@ ${routes.join("\n")}
     console.error(error);
   }
 });
-program.command("update").alias("update-theme").description("Update theme tokens in your project").action(async () => {
+program.command("update").alias("update-theme").description("Update theme or project files to the latest version").action(async () => {
   const targetDir = process.cwd();
-  const themeResponse = await prompts({
+  const { updateType } = await prompts({
+    type: "select",
+    name: "updateType",
+    message: "What do you want to update?",
+    choices: [
+      { title: "Theme only", description: "Change the color tokens (tokens.css)", value: "theme" },
+      { title: "Project files", description: "Update app shell, shared, features and pages to a specific version", value: "project" }
+    ]
+  });
+  if (!updateType) return;
+  if (updateType === "theme") {
+    const { theme } = 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 (!theme) return;
+    const spinner2 = ora("Updating theme...").start();
+    try {
+      const tokensPath = path.join(targetDir, "src", "styles", "xertica", "tokens.css");
+      const selectedTheme = colorThemes.find((t) => t.id === theme);
+      if (selectedTheme) {
+        await fs.ensureDir(path.dirname(tokensPath));
+        await fs.writeFile(tokensPath, generateTokensCss(selectedTheme));
+        spinner2.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+      } else {
+        spinner2.fail("Theme not found.");
+      }
+    } catch (error) {
+      spinner2.fail("Failed to update theme");
+      console.error(error);
+    }
+    return;
+  }
+  const { versionType } = 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
+    name: "versionType",
+    message: "Which version do you want to update to?",
+    choices: [
+      { title: "Latest", description: "Install the latest published version", value: "latest" },
+      { title: "Specific version", description: "Enter a version number (e.g. 2.0.2)", value: "specific" }
+    ]
+  });
+  if (!versionType) return;
+  let targetVersion = "latest";
+  if (versionType === "specific") {
+    const { version } = await prompts({
+      type: "text",
+      name: "version",
+      message: "Enter the version (e.g. 2.0.2):",
+      validate: (v) => /^\d+\.\d+\.\d+/.test(v.trim()) ? true : "Enter a valid semver (e.g. 2.0.2)"
+    });
+    if (!version) return;
+    targetVersion = version.trim();
+  }
+  const { filesToUpdate } = await prompts({
+    type: "multiselect",
+    name: "filesToUpdate",
+    message: "Select which parts of the project to update:",
+    choices: [
+      { title: "App shell (src/app/)", description: "App.tsx, AppLayout.tsx", value: "app", selected: true },
+      { title: "Shared utilities (src/shared/)", description: "auth.ts, navigation.ts, types", value: "shared", selected: true },
+      { title: "Features (src/features/)", description: "auth, home, template UI components", value: "features", selected: true },
+      { title: "Pages (src/pages/)", description: "Thin page wrapper components", value: "pages", selected: true },
+      { title: "Root config files", description: "vite.config.ts, tsconfig.json, etc.", value: "config", selected: false }
+    ]
   });
-  if (!themeResponse.theme) return;
-  const spinner = ora("Updating theme...").start();
+  if (!filesToUpdate || filesToUpdate.length === 0) return;
+  const { confirmed } = await prompts({
+    type: "confirm",
+    name: "confirmed",
+    message: chalk.yellow(`\u26A0\uFE0F  This will overwrite the selected files. Local changes will be lost. Continue?`),
+    initial: false
+  });
+  if (!confirmed) {
+    console.log(chalk.gray("Update cancelled."));
+    return;
+  }
+  const spinner = ora(`Installing xertica-ui@${targetVersion}...`).start();
   try {
-    const tokensPath = path.join(targetDir, "src", "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.");
+    await execa("npm", ["install", `xertica-ui@${targetVersion}`], { cwd: targetDir });
+    spinner.text = "Copying updated files...";
+    const updatedTemplatesDir = path.join(targetDir, "node_modules", "xertica-ui", "templates");
+    if (filesToUpdate.includes("app")) {
+      await fs.copy(
+        path.join(updatedTemplatesDir, "src", "app", "App.tsx"),
+        path.join(targetDir, "src", "app", "App.tsx"),
+        { overwrite: true }
+      );
+      await fs.copy(
+        path.join(updatedTemplatesDir, "src", "app", "components", "AppLayout.tsx"),
+        path.join(targetDir, "src", "app", "components", "AppLayout.tsx"),
+        { overwrite: true }
+      );
+    }
+    if (filesToUpdate.includes("shared")) {
+      await fs.copy(
+        path.join(updatedTemplatesDir, "src", "shared"),
+        path.join(targetDir, "src", "shared"),
+        { overwrite: true }
+      );
+    }
+    if (filesToUpdate.includes("features")) {
+      for (const feature of ["auth", "home", "template"]) {
+        const destFeature = path.join(targetDir, "src", "features", feature);
+        const srcFeature = path.join(updatedTemplatesDir, "src", "features", feature);
+        if (await fs.pathExists(destFeature) && await fs.pathExists(srcFeature)) {
+          await fs.copy(srcFeature, destFeature, { overwrite: true });
+        }
+      }
+    }
+    if (filesToUpdate.includes("pages")) {
+      const pagesDir = path.join(targetDir, "src", "pages");
+      const srcPagesDir = path.join(updatedTemplatesDir, "src", "pages");
+      if (await fs.pathExists(pagesDir) && await fs.pathExists(srcPagesDir)) {
+        const existingPages = await fs.readdir(pagesDir);
+        for (const pageFile of existingPages) {
+          const src = path.join(srcPagesDir, pageFile);
+          if (await fs.pathExists(src)) {
+            await fs.copy(src, path.join(pagesDir, pageFile), { overwrite: true });
+          }
+        }
+      }
+    }
+    if (filesToUpdate.includes("config")) {
+      const configFiles = ["vite.config.ts", "tsconfig.json", "tsconfig.node.json", "postcss.config.js"];
+      for (const file of configFiles) {
+        const src = path.join(updatedTemplatesDir, "..", file);
+        if (await fs.pathExists(src)) {
+          await fs.copy(src, path.join(targetDir, file), { overwrite: true });
+        }
+      }
     }
+    spinner.succeed(`Project updated to xertica-ui@${targetVersion} successfully!`);
+    console.log(chalk.gray("\n  Run npm run dev to start the development server."));
   } catch (error) {
-    spinner.fail("Failed to update theme");
+    spinner.fail("Failed to update project");
     console.error(error);
   }
 });

package/dist/components/assistant/index.d.ts

@@ -3,3 +3,4 @@ export { CodeBlock } from './code-block';
 export { MarkdownMessage } from './markdown-message';
 export { ModernChatInput } from './modern-chat-input';
 export { FormattedDocument } from './formatted-document';
+export { generateDemoResponse } from '../../utils/demo-responses';

package/dist/utils/demo-responses.d.ts

@@ -0,0 +1,3 @@
+import { Message } from '../components/assistant/xertica-assistant';
+export declare const generateDemoResponse: (mensagemUsuario: string) => string | Partial<Message>;
+export declare const getDemoResponse: (mensagemUsuario: string) => string | Partial<Message>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-xertica-app",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.0.0"
+    "xertica-ui": "^2.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",