xertica-ui 1.2.6 → 1.2.8

package/App.tsx

@@ -10,6 +10,7 @@ import { ThemeProvider } from './contexts/ThemeContext';
 import { LanguageProvider } from './contexts/LanguageContext';
 import { ApiKeyProvider } from './contexts/ApiKeyContext';
 import { AssistenteProvider } from './contexts/AssistenteContext';
+import { LayoutProvider } from './contexts/LayoutContext';
 import { BrandColorsProvider } from './contexts/BrandColorsContext';
 import { GoogleMapsLoaderProvider } from './components/ui/google-maps-loader';
 import { Toaster } from './components/ui/sonner';
@@ -19,7 +20,7 @@ import { XerticaAssistant } from './components/ui/xertica-assistant';
 if (typeof window !== 'undefined') {
   // Remover classe dark imediatamente
   document.documentElement.classList.remove('dark');
-  
+
   // Se não há tema salvo, definir light mode
   const savedTheme = localStorage.getItem('xertica-theme');
   if (!savedTheme) {
@@ -78,69 +79,69 @@ function AuthWrapper() {
   return (
     <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
       <Routes>
-        <Route 
-          path="/login" 
+        <Route
+          path="/login"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <LoginPage onLogin={handleLogin} />
             )
-          } 
+          }
         />
-        <Route 
-          path="/forgot-password" 
+        <Route
+          path="/forgot-password"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <ForgotPasswordPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/verify-email" 
+        <Route
+          path="/verify-email"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <VerifyEmailPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/reset-password" 
+        <Route
+          path="/reset-password"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <ResetPasswordPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/home" 
+        <Route
+          path="/home"
           element={
             <ProtectedRoute user={user}>
               <HomePage user={user} onLogout={handleLogout} />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/template" 
+        <Route
+          path="/template"
           element={
             <ProtectedRoute user={user}>
               <TemplatePage user={user} onLogout={handleLogout} />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/" 
-          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        <Route
+          path="/"
+          element={<Navigate to={user ? "/home" : "/login"} replace />}
         />
-        <Route 
-          path="*" 
-          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        <Route
+          path="*"
+          element={<Navigate to={user ? "/home" : "/login"} replace />}
         />
       </Routes>
 
@@ -154,7 +155,7 @@ export default function App() {
   useLayoutEffect(() => {
     const root = document.documentElement;
     const savedTheme = localStorage.getItem('xertica-theme');
-    
+
     if (!savedTheme || savedTheme === 'light') {
       root.classList.remove('dark');
       localStorage.setItem('xertica-theme', 'light');
@@ -168,10 +169,12 @@ export default function App() {
           <BrandColorsProvider>
             <ThemeProvider>
               <AssistenteProvider>
-                <Router>
-                  <AuthWrapper />
-                  <Toaster position="top-right" richColors />
-                </Router>
+                <LayoutProvider>
+                  <Router>
+                    <AuthWrapper />
+                    <Toaster position="top-right" richColors />
+                  </Router>
+                </LayoutProvider>
               </AssistenteProvider>
             </ThemeProvider>
           </BrandColorsProvider>

package/README.md

@@ -39,6 +39,43 @@ O método recomendado é usar o CLI:
 npx xertica-ui init meu-app
 ```
 
+### Instalação como Biblioteca
+
+Se você deseja usar os componentes em um projeto React existente:
+
+1. Instale o pacote:
+```bash
+npm install xertica-ui
+```
+
+2. Importe o CSS (obrigatório) no seu arquivo `main.tsx` ou `App.tsx`:
+```tsx
+import 'xertica-ui/style.css';
+```
+
+3. Envolva sua aplicação com o `XerticaProvider`:
+```tsx
+import { XerticaProvider } from 'xertica-ui';
+
+function App() {
+  return (
+    <XerticaProvider>
+      <SeuApp />
+    </XerticaProvider>
+  );
+}
+```
+
+4. Comece a usar os componentes:
+```tsx
+import { Button } from 'xertica-ui';
+
+export function MeuComponente() {
+  return <Button>Clique aqui</Button>;
+}
+```
+
+### Desenvolvimento do Projeto (Contribuição)
 Para desenvolvimento do próprio pacote/biblioteca:
 1. Clone o repositório:
 ```bash

package/components/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Menu, ChevronRight } from 'lucide-react';
+import { Button } from './ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSelector } from './LanguageSelector';
+
+import { useLayout } from '../contexts/LayoutContext';
+
+interface HeaderProps {
+    title: string;
+    showLanguageSelector?: boolean;
+    showThemeToggle?: boolean;
+    className?: string;
+}
+
+export function Header({
+    title,
+    showLanguageSelector = true,
+    showThemeToggle = true,
+    className
+}: HeaderProps) {
+    const { sidebarExpanded, toggleSidebar } = useLayout();
+
+
+    return (
+        <header className={`bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0 ${className || ''}`}>
+            <div className="flex items-center justify-between p-[0px]">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                    {/* Botão menu para mobile */}
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={toggleSidebar}
+                        className="md:hidden mr-2 p-2"
+                    >
+                        <Menu className="w-5 h-5" />
+                    </Button>
+                    <span className="text-primary font-medium">Xertica.ai</span>
+                    <ChevronRight className="w-4 h-4" />
+                    <span className="text-foreground font-medium">{title}</span>
+                </div>
+
+                {/* Controles do usuário */}
+                <div className="flex items-center gap-3">
+                    {/* Seletor de idioma */}
+                    {showLanguageSelector && (
+                        <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
+                    )}
+
+                    {/* Toggle de tema */}
+                    {showThemeToggle && (
+                        <ThemeToggle className="hover:bg-accent" />
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

package/components/HomeContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
+import { Header } from './Header';
 import { Button } from './ui/button';
 import { ChevronRight, Menu, FileText } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
@@ -9,17 +10,17 @@ import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 import { Badge } from './ui/badge';
 
+import { useLayout } from '../contexts/LayoutContext';
+
 interface HomeContentProps {
-  sidebarExpanded: boolean;
-  assistenteExpanded?: boolean;
-  onToggleSidebar?: () => void;
-  onToggleAssistente?: () => void;
+  // Props de layout removidas em favor do LayoutContext
 }
 
-export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: HomeContentProps) {
+export function HomeContent({ }: HomeContentProps) {
+  const { sidebarExpanded, assistenteExpanded } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
-  
+
   // Tradução direta para português
   const labelTranslations: Record<string, string> = {
     'home': 'Início',
@@ -28,48 +29,21 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
 
   // Get current route info
   const currentRoute = getRouteByPath(location.pathname);
-  const breadcrumbLabel = currentRoute?.label 
+  const breadcrumbLabel = currentRoute?.label
     ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label
     : 'Início';
 
 
 
   return (
-    <div 
-      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${
-        sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
-      } ${
-        assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
-      }`}
+    <div
+      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
+        } ${assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
+        }`}
     >
-      {/* Header fixo */}
-      <header className="bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0">
-        <div className="flex items-center justify-between p-[0px]">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            {/* Botão menu para mobile */}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onToggleSidebar}
-              className="md:hidden mr-2 p-2"
-            >
-              <Menu className="w-5 h-5" />
-            </Button>
-            <span className="text-primary font-medium">Xertica.ai</span>
-            <ChevronRight className="w-4 h-4" />
-            <span className="text-foreground font-medium">{breadcrumbLabel}</span>
-          </div>
-          
-          {/* Controles do usuário */}
-          <div className="flex items-center gap-3">
-            {/* Seletor de idioma */}
-            <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
-            
-            {/* Toggle de tema */}
-            <ThemeToggle className="hover:bg-accent" />
-          </div>
-        </div>
-      </header>
+      <Header
+        title={breadcrumbLabel}
+      />
 
       {/* Área de conteúdo */}
       <main className="flex-1 overflow-hidden bg-muted">
@@ -104,7 +78,7 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
                     </p>
                   </CardContent>
                   <CardFooter>
-                    <Button 
+                    <Button
                       variant="outline"
                       className="w-full"
                       onClick={() => navigate('/template')}

package/components/HomePage.tsx

@@ -1,8 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { HomeContent } from './HomeContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
+
+interface HomePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
+import { useLayout } from '../contexts/LayoutContext';
 
 interface HomePageProps {
   user: { email: string } | null;
@@ -10,60 +18,26 @@ interface HomePageProps {
 }
 
 export function HomePage({ user, onLogout }: HomePageProps) {
-  const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar, toggleAssistente, toggleAssistenteWithTab } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
 
-  // Função para alternar a sidebar - fecha o assistente se estiver aberto
-  const handleToggleSidebar = () => {
-    if (!sidebarExpanded && assistenteExpanded) {
-      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
-      setAssistenteExpanded(false);
-    }
-    setSidebarExpanded(!sidebarExpanded);
-  };
-
-  // Função para alternar o assistente - fecha a sidebar se estiver aberta
-  const handleToggleAssistente = () => {
-    if (!assistenteExpanded && sidebarExpanded) {
-      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-      setSidebarExpanded(false);
-    }
-    setAssistenteExpanded(!assistenteExpanded);
-  };
-
-  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
-  const handleToggleAssistenteWithTab = (tab: string) => {
-    if (!assistenteExpanded) {
-      if (sidebarExpanded) {
-        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-        setSidebarExpanded(false);
-      }
-      setAssistenteExpanded(true);
-    }
-  };
-
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
-        onToggle={handleToggleSidebar}
+        onToggle={toggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <HomeContent 
-        sidebarExpanded={sidebarExpanded}
-        assistenteExpanded={assistenteExpanded}
-        onToggleSidebar={handleToggleSidebar}
-        onToggleAssistente={handleToggleAssistente}
-      />
+      <HomeContent />
       <AssistenteXertica
         isExpanded={assistenteExpanded}
-        onToggle={handleToggleAssistente}
-        onToggleWithTab={handleToggleAssistenteWithTab}
+        onToggle={toggleAssistente}
+        onToggleWithTab={toggleAssistenteWithTab}
       />
     </div>
   );

package/components/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
   MoreHorizontal,
   ChevronRight,
 } from "lucide-react";
-import { routes } from "../routes";
+// routes import removed to make it reusable
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
@@ -15,8 +15,9 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "./ui/utils";
 import { XerticaLogo } from "./XerticaLogo";
 import { XerticaXLogo } from "./XerticaXLogo";
+import { Button } from "./ui/button";
 
-// TooltipContent customizado para a Sidebar com seta branca
+// Validar se SidebarTooltipContent já existe em outro lugar ou manter aqui
 function SidebarTooltipContent({
   className,
   sideOffset = 0,
@@ -34,15 +35,23 @@ function SidebarTooltipContent({
       {...props}
     >
       {children}
-      <TooltipPrimitive.Arrow 
-        className="fill-popover z-50 drop-shadow-sm" 
-        width={8} 
+      <TooltipPrimitive.Arrow
+        className="fill-popover z-50 drop-shadow-sm"
+        width={8}
         height={4}
       />
     </TooltipPrimitive.Content>
   );
 }
 
+// Interface for Route Config (copied/imported type)
+export interface RouteConfig {
+  path: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  component?: React.ComponentType<any>;
+}
+
 interface SubMenuItem {
   id: string;
   label: string;
@@ -64,6 +73,7 @@ interface SidebarProps {
   onLogout: () => void;
   location: { pathname: string };
   navigate: (path: string) => void;
+  routes: RouteConfig[];
 }
 
 export function Sidebar({
@@ -73,6 +83,7 @@ export function Sidebar({
   onLogout,
   location,
   navigate,
+  routes,
 }: SidebarProps) {
   const navRef = useRef<HTMLDivElement>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -154,9 +165,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -210,7 +221,7 @@ export function Sidebar({
                   <span className="truncate">{item.label}</span>
                 </button>
               )}
-              
+
               {/* Subitens */}
               {hasSubItems && item.subItems && (
                 <>
@@ -246,9 +257,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -281,11 +292,10 @@ export function Sidebar({
     <TooltipProvider delayDuration={300}>
       {/* Sidebar */}
       <div
-        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${
-          expanded
-            ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
-            : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
-        }`}
+        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${expanded
+          ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
+          : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
+          }`}
       >
         {/* Botão Toggle Menu */}
         <div className="p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">

package/components/TemplateContent.tsx

@@ -21,14 +21,14 @@ import { ScrollArea } from './ui/scroll-area';
 import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 
+import { useLayout } from '../contexts/LayoutContext';
+
 interface TemplateContentProps {
-  sidebarExpanded: boolean;
-  assistenteExpanded?: boolean;
-  onToggleSidebar?: () => void;
-  onToggleAssistente?: () => void;
+  // Props de layout removidas
 }
 
-export function TemplateContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: TemplateContentProps) {
+export function TemplateContent({ }: TemplateContentProps) {
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar } = useLayout();
   const [progress, setProgress] = useState(45);
   const [sliderValue, setSliderValue] = useState([50]);
   const [switchEnabled, setSwitchEnabled] = useState(false);
@@ -52,7 +52,7 @@ export function TemplateContent({ sidebarExpanded, assistenteExpanded = false, o
             <Button
               variant="ghost"
               size="sm"
-              onClick={onToggleSidebar}
+              onClick={toggleSidebar}
               className="md:hidden mr-2 p-2"
             >
               <Menu className="w-5 h-5" />

package/components/TemplatePage.tsx

@@ -1,8 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { TemplateContent } from './TemplateContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
+
+interface TemplatePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
+import { useLayout } from '../contexts/LayoutContext';
 
 interface TemplatePageProps {
   user: { email: string } | null;
@@ -10,60 +18,26 @@ interface TemplatePageProps {
 }
 
 export function TemplatePage({ user, onLogout }: TemplatePageProps) {
-  const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar, toggleAssistente, toggleAssistenteWithTab } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
 
-  // Função para alternar a sidebar - fecha o assistente se estiver aberto
-  const handleToggleSidebar = () => {
-    if (!sidebarExpanded && assistenteExpanded) {
-      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
-      setAssistenteExpanded(false);
-    }
-    setSidebarExpanded(!sidebarExpanded);
-  };
-
-  // Função para alternar o assistente - fecha a sidebar se estiver aberta
-  const handleToggleAssistente = () => {
-    if (!assistenteExpanded && sidebarExpanded) {
-      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-      setSidebarExpanded(false);
-    }
-    setAssistenteExpanded(!assistenteExpanded);
-  };
-
-  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
-  const handleToggleAssistenteWithTab = (tab: string) => {
-    if (!assistenteExpanded) {
-      if (sidebarExpanded) {
-        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-        setSidebarExpanded(false);
-      }
-      setAssistenteExpanded(true);
-    }
-  };
-
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
-        onToggle={handleToggleSidebar}
+        onToggle={toggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <TemplateContent 
-        sidebarExpanded={sidebarExpanded}
-        assistenteExpanded={assistenteExpanded}
-        onToggleSidebar={handleToggleSidebar}
-        onToggleAssistente={handleToggleAssistente}
-      />
+      <TemplateContent />
       <AssistenteXertica
         isExpanded={assistenteExpanded}
-        onToggle={handleToggleAssistente}
-        onToggleWithTab={handleToggleAssistenteWithTab}
+        onToggle={toggleAssistente}
+        onToggleWithTab={toggleAssistenteWithTab}
       />
     </div>
   );