xertica-ui 2.2.1 → 2.4.0

package/templates/package.json

@@ -1,69 +1,69 @@
-{
-  "name": "xertica-ui-template",
-  "version": "2.2.1",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "type-check": "tsc --noEmit",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "check": "npm run type-check && npm run lint"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^5.100.11",
-    "date-fns": "^4.1.0",
-    "i18next": "^26.2.0",
-    "lucide-react": "^0.469.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^17.0.8",
-    "react-router-dom": "^7.1.3",
-    "sonner": "^1.7.3",
-    "xertica-ui": "^2.2.1",
-    "zustand": "^5.0.13"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.18.0",
-    "@tailwindcss/postcss": "^4.0.0",
-    "@tailwindcss/vite": "4.1.12",
-    "@types/node": "^25.6.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@typescript-eslint/eslint-plugin": "^8.19.1",
-    "@typescript-eslint/parser": "^8.19.1",
-    "@vitejs/plugin-react": "4.7.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.18.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "prettier": "^3.4.2",
-    "postcss": "^8.4.49",
-    "tailwindcss": "4.1.12",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.19.1",
-    "vite": "6.4.2"
-  },
-  "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "pnpm": {
-    "overrides": {
-      "vite": "6.3.5"
-    }
-  }
-}
+{
+  "name": "xertica-ui-template",
+  "version": "2.4.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "check": "npm run type-check && npm run lint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.100.11",
+    "date-fns": "^4.1.0",
+    "i18next": "^26.2.0",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.8",
+    "react-router-dom": "^7.1.3",
+    "sonner": "^1.7.3",
+    "xertica-ui": "^2.4.0",
+    "zustand": "^5.0.13"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "4.1.12",
+    "@types/node": "^25.6.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@vitejs/plugin-react": "4.7.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "postcss": "^8.4.49",
+    "tailwindcss": "4.1.12",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.19.1",
+    "vite": "6.4.2"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "6.3.5"
+    }
+  }
+}

package/templates/postcss.config.js

@@ -1,6 +1,6 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};

package/templates/src/app/App.tsx

@@ -1,46 +1,46 @@
-import React, { Suspense } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { XerticaProvider } from 'xertica-ui/brand';
-import { AuthProvider } from './context/AuthContext';
-import { AuthGuard } from './components/AuthGuard';
-import { AppErrorBoundary, PageErrorBoundary } from '../shared/error-boundary';
-
-// ─── Query client ─────────────────────────────────────────────────────────────
-// Shared instance — configure defaults here.
-// To add React Query Devtools: npm i @tanstack/react-query-devtools and wrap below.
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
-// ─── App ─────────────────────────────────────────────────────────────────────
-
-export default function App() {
-  const geminiApiKey = import.meta.env.VITE_GEMINI_API_KEY;
-  const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
-
-  return (
-    <AppErrorBoundary>
-      <QueryClientProvider client={queryClient}>
-        <XerticaProvider apiKey={geminiApiKey} googleMapsApiKey={googleMapsApiKey}>
-          <Router>
-            {/* AuthProvider must be inside Router (needs useNavigate) */}
-            <AuthProvider>
-              <PageErrorBoundary>
-                <Suspense fallback={null}>
-                  <AuthGuard />
-                </Suspense>
-              </PageErrorBoundary>
-            </AuthProvider>
-          </Router>
-        </XerticaProvider>
-      </QueryClientProvider>
-    </AppErrorBoundary>
-  );
-}
+import React, { Suspense } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { XerticaProvider } from 'xertica-ui/brand';
+import { AuthProvider } from './context/AuthContext';
+import { AuthGuard } from './components/AuthGuard';
+import { AppErrorBoundary, PageErrorBoundary } from '../shared/error-boundary';
+
+// ─── Query client ─────────────────────────────────────────────────────────────
+// Shared instance — configure defaults here.
+// To add React Query Devtools: npm i @tanstack/react-query-devtools and wrap below.
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+// ─── App ─────────────────────────────────────────────────────────────────────
+
+export default function App() {
+  const geminiApiKey = import.meta.env.VITE_GEMINI_API_KEY;
+  const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
+  return (
+    <AppErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <XerticaProvider apiKey={geminiApiKey} googleMapsApiKey={googleMapsApiKey}>
+          <Router>
+            {/* AuthProvider must be inside Router (needs useNavigate) */}
+            <AuthProvider>
+              <PageErrorBoundary>
+                <Suspense fallback={null}>
+                  <AuthGuard />
+                </Suspense>
+              </PageErrorBoundary>
+            </AuthProvider>
+          </Router>
+        </XerticaProvider>
+      </QueryClientProvider>
+    </AppErrorBoundary>
+  );
+}

package/templates/src/app/components/AppLayout.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Sidebar } from 'xertica-ui/layout';
-import { useLayout } from 'xertica-ui/hooks';
-import { routes } from '../../shared/config/navigation';
-import { useAuth } from '../context/AuthContext';
-
-interface AppLayoutProps {
-  children: React.ReactNode;
-  assistant?: React.ReactNode;
-  sidebarVariant?: 'default' | 'assistant';
-  sidebarProps?: Record<string, any>;
-}
-
-/**
- * `AppLayout` — shared shell for all authenticated pages.
- *
- * Auth state (user, logout) is consumed from `AuthContext` — no props needed.
- * Pass only layout-specific concerns: `children`, `assistant`, and sidebar options.
- */
-export function AppLayout({
-  children,
-  assistant,
-  sidebarVariant = 'default',
-  sidebarProps,
-}: AppLayoutProps) {
-  const { user, logout } = useAuth();
-  const { sidebarExpanded, sidebarWidth, toggleSidebar } = useLayout();
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  return (
-    <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar
-        expanded={sidebarExpanded}
-        width={sidebarWidth}
-        onToggle={toggleSidebar}
-        variant={sidebarVariant}
-        user={{
-          ...user,
-          name: 'Ariel Santos',
-          avatar: 'https://github.com/shadcn.png',
-        }}
-        onLogout={logout}
-        onSettingsClick={() => navigate('/settings')}
-        location={location}
-        navigate={navigate}
-        routes={routes}
-        {...sidebarProps}
-      />
-      {children}
-      {assistant}
-    </div>
-  );
-}
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar } from 'xertica-ui/layout';
+import { useLayout } from 'xertica-ui/hooks';
+import { routes } from '../../shared/config/navigation';
+import { useAuth } from '../context/AuthContext';
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+  assistant?: React.ReactNode;
+  sidebarVariant?: 'default' | 'assistant';
+  sidebarProps?: Record<string, any>;
+}
+
+/**
+ * `AppLayout` — shared shell for all authenticated pages.
+ *
+ * Auth state (user, logout) is consumed from `AuthContext` — no props needed.
+ * Pass only layout-specific concerns: `children`, `assistant`, and sidebar options.
+ */
+export function AppLayout({
+  children,
+  assistant,
+  sidebarVariant = 'default',
+  sidebarProps,
+}: AppLayoutProps) {
+  const { user, logout } = useAuth();
+  const { sidebarExpanded, sidebarWidth, toggleSidebar } = useLayout();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar
+        expanded={sidebarExpanded}
+        width={sidebarWidth}
+        onToggle={toggleSidebar}
+        variant={sidebarVariant}
+        user={{
+          ...user,
+          name: 'Ariel Santos',
+          avatar: 'https://github.com/shadcn.png',
+        }}
+        onLogout={logout}
+        onSettingsClick={() => navigate('/settings')}
+        location={location}
+        navigate={navigate}
+        routes={routes}
+        {...sidebarProps}
+      />
+      {children}
+      {assistant}
+    </div>
+  );
+}

package/templates/src/app/components/AuthGuard.tsx

@@ -1,82 +1,131 @@
-import React from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-// ─── Lazy page imports ────────────────────────────────────────────────────────
-// Each route bundle is loaded only when the route is first visited.
-
-const LoginPage = React.lazy(() =>
-  import('../../pages/LoginPage').then(m => ({ default: m.LoginPage }))
-);
-const ForgotPasswordPage = React.lazy(() =>
-  import('../../pages/ForgotPasswordPage').then(m => ({ default: m.ForgotPasswordPage }))
-);
-const VerifyEmailPage = React.lazy(() =>
-  import('../../pages/VerifyEmailPage').then(m => ({ default: m.VerifyEmailPage }))
-);
-const ResetPasswordPage = React.lazy(() =>
-  import('../../pages/ResetPasswordPage').then(m => ({ default: m.ResetPasswordPage }))
-);
-const HomePage = React.lazy(() =>
-  import('../../pages/HomePage').then(m => ({ default: m.HomePage }))
-);
-const TemplatePage = React.lazy(() =>
-  import('../../pages/TemplatePage').then(m => ({ default: m.TemplatePage }))
-);
-const AssistantPage = React.lazy(() =>
-  import('../../pages/AssistantPage').then(m => ({ default: m.AssistantPage }))
-);
-
-// ─── Route guards ─────────────────────────────────────────────────────────────
-
-/** Redirects unauthenticated visitors to /login. */
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { user, isLoading } = useAuth();
-  if (isLoading) return null;
-  if (!user) return <Navigate to="/login" replace />;
-  return <>{children}</>;
-}
-
-/** Redirects authenticated users away from auth-only pages. */
-function GuestRoute({ children }: { children: React.ReactNode }) {
-  const { user, isLoading } = useAuth();
-  if (isLoading) return null;
-  if (user) return <Navigate to="/home" replace />;
-  return <>{children}</>;
-}
-
-// ─── Bridge for LoginPage ─────────────────────────────────────────────────────
-// LoginPage expects an onLogin prop — this bridge wires AuthContext.login to it,
-// keeping the LoginPage component decoupled from the AuthContext.
-
-function LoginPageWithAuth() {
-  const { login } = useAuth();
-  return <LoginPage onLogin={login} />;
-}
-
-// ─── Route tree ───────────────────────────────────────────────────────────────
-
-export function AuthGuard() {
-  const { user } = useAuth();
-
-  return (
-    <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
-      <Routes>
-        {/* Auth pages — redirect to /home when already signed in */}
-        <Route path="/login" element={<GuestRoute><LoginPageWithAuth /></GuestRoute>} />
-        <Route path="/forgot-password" element={<GuestRoute><ForgotPasswordPage /></GuestRoute>} />
-        <Route path="/verify-email" element={<GuestRoute><VerifyEmailPage /></GuestRoute>} />
-        <Route path="/reset-password" element={<GuestRoute><ResetPasswordPage /></GuestRoute>} />
-
-        {/* Protected pages */}
-        <Route path="/home" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
-        <Route path="/template" element={<ProtectedRoute><TemplatePage /></ProtectedRoute>} />
-        <Route path="/assistente" element={<ProtectedRoute><AssistantPage /></ProtectedRoute>} />
-
-        {/* Fallback */}
-        <Route path="/" element={<Navigate to={user ? '/home' : '/login'} replace />} />
-        <Route path="*" element={<Navigate to={user ? '/home' : '/login'} replace />} />
-      </Routes>
-    </div>
-  );
-}
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+// ─── Lazy page imports ────────────────────────────────────────────────────────
+// Each route bundle is loaded only when the route is first visited.
+
+const LoginPage = React.lazy(() =>
+  import('../../pages/LoginPage').then(m => ({ default: m.LoginPage }))
+);
+const ForgotPasswordPage = React.lazy(() =>
+  import('../../pages/ForgotPasswordPage').then(m => ({ default: m.ForgotPasswordPage }))
+);
+const VerifyEmailPage = React.lazy(() =>
+  import('../../pages/VerifyEmailPage').then(m => ({ default: m.VerifyEmailPage }))
+);
+const ResetPasswordPage = React.lazy(() =>
+  import('../../pages/ResetPasswordPage').then(m => ({ default: m.ResetPasswordPage }))
+);
+const HomePage = React.lazy(() =>
+  import('../../pages/HomePage').then(m => ({ default: m.HomePage }))
+);
+const TemplatePage = React.lazy(() =>
+  import('../../pages/TemplatePage').then(m => ({ default: m.TemplatePage }))
+);
+const AssistantPage = React.lazy(() =>
+  import('../../pages/AssistantPage').then(m => ({ default: m.AssistantPage }))
+);
+
+// ─── Route guards ─────────────────────────────────────────────────────────────
+
+/** Redirects unauthenticated visitors to /login. */
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return null;
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+}
+
+/** Redirects authenticated users away from auth-only pages. */
+function GuestRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return null;
+  if (user) return <Navigate to="/home" replace />;
+  return <>{children}</>;
+}
+
+// ─── Bridge for LoginPage ─────────────────────────────────────────────────────
+// LoginPage expects an onLogin prop — this bridge wires AuthContext.login to it,
+// keeping the LoginPage component decoupled from the AuthContext.
+
+function LoginPageWithAuth() {
+  const { login } = useAuth();
+  return <LoginPage onLogin={login} />;
+}
+
+// ─── Route tree ───────────────────────────────────────────────────────────────
+
+export function AuthGuard() {
+  const { user } = useAuth();
+
+  return (
+    <div className="h-screen bg-muted overflow-hidden max-w-full">
+      <Routes>
+        {/* Auth pages — redirect to /home when already signed in */}
+        <Route
+          path="/login"
+          element={
+            <GuestRoute>
+              <LoginPageWithAuth />
+            </GuestRoute>
+          }
+        />
+        <Route
+          path="/forgot-password"
+          element={
+            <GuestRoute>
+              <ForgotPasswordPage />
+            </GuestRoute>
+          }
+        />
+        <Route
+          path="/verify-email"
+          element={
+            <GuestRoute>
+              <VerifyEmailPage />
+            </GuestRoute>
+          }
+        />
+        <Route
+          path="/reset-password"
+          element={
+            <GuestRoute>
+              <ResetPasswordPage />
+            </GuestRoute>
+          }
+        />
+
+        {/* Protected pages */}
+        <Route
+          path="/home"
+          element={
+            <ProtectedRoute>
+              <HomePage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/template"
+          element={
+            <ProtectedRoute>
+              <TemplatePage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/assistente"
+          element={
+            <ProtectedRoute>
+              <AssistantPage />
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Fallback */}
+        <Route path="/" element={<Navigate to={user ? '/home' : '/login'} replace />} />
+        <Route path="*" element={<Navigate to={user ? '/home' : '/login'} replace />} />
+      </Routes>
+    </div>
+  );
+}