xertica-ui 2.1.2 → 2.1.4

package/components/ui/tree-view/use-tree-view.ts

@@ -0,0 +1,229 @@
+import { useState, useRef, useCallback } from 'react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+}
+
+export interface UseTreeViewProps {
+    /** The tree data to manage. */
+    data: TreeNode[];
+    /** Node IDs that are expanded by default (uncontrolled). */
+    defaultExpanded?: string[];
+    /**
+     * Controlled selected node ID.
+     * When provided, selection state is managed externally.
+     */
+    selectedNodeId?: string;
+    /** Called when a node is clicked or activated via keyboard. */
+    onNodeClick?: (node: TreeNode) => void;
+    /** Called when a node becomes the selected item. */
+    onNodeSelect?: (node: TreeNode) => void;
+}
+
+export interface UseTreeViewReturn {
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Set of currently expanded node IDs. */
+    expanded: Set<string>;
+    /** The currently selected node ID (controlled or internal). */
+    effectiveSelectedId: string | undefined;
+
+    // ── Refs ──────────────────────────────────────────────────────────────────
+    /**
+     * Map of node ID → button element.
+     * Attach via the `setRef` helper returned by `getNodeRef`.
+     */
+    nodeRefs: React.MutableRefObject<Map<string, HTMLButtonElement>>;
+
+    // ── Helpers ───────────────────────────────────────────────────────────────
+    /** Returns a ref-setter callback for a given node ID. */
+    getNodeRef: (nodeId: string) => (el: HTMLButtonElement | null) => void;
+
+    // ── Handlers ──────────────────────────────────────────────────────────────
+    /** Toggle the expanded state of a node. */
+    toggleExpand: (nodeId: string) => void;
+    /** Select a node (updates internal state if uncontrolled, fires callbacks). */
+    handleSelect: (node: TreeNode) => void;
+    /**
+     * Full WAI-ARIA keyboard handler.
+     * Attach to `onKeyDown` of each tree-item button.
+     */
+    handleKeyDown: (e: React.KeyboardEvent, node: TreeNode) => void;
+
+    // ── Computed ──────────────────────────────────────────────────────────────
+    /** Returns the ordered list of all currently visible nodes (respects expand state). */
+    getVisibleNodes: () => TreeNode[];
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Headless hook for hierarchical tree-view logic.
+ *
+ * @description
+ * Manages expand/collapse state, selection (controlled or uncontrolled),
+ * WAI-ARIA keyboard navigation (Arrow keys, Home, End, Enter/Space),
+ * and focus management via node refs. Pair with any custom tree UI.
+ *
+ * @example
+ * ```tsx
+ * const { expanded, effectiveSelectedId, toggleExpand, handleSelect, handleKeyDown, getNodeRef } =
+ *   useTreeView({ data, onNodeSelect });
+ * ```
+ */
+export function useTreeView({
+    data,
+    defaultExpanded = [],
+    selectedNodeId,
+    onNodeClick,
+    onNodeSelect,
+}: UseTreeViewProps): UseTreeViewReturn {
+    const [expanded, setExpanded] = useState<Set<string>>(new Set(defaultExpanded));
+    const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(undefined);
+    const nodeRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+    const isControlled = selectedNodeId !== undefined;
+    const effectiveSelectedId = isControlled ? selectedNodeId : internalSelectedId;
+
+    // ── Helpers ───────────────────────────────────────────────────────────────
+
+    const getNodeRef = useCallback(
+        (nodeId: string) => (el: HTMLButtonElement | null) => {
+            if (el) nodeRefs.current.set(nodeId, el);
+            else nodeRefs.current.delete(nodeId);
+        },
+        []
+    );
+
+    const getVisibleNodes = useCallback((): TreeNode[] => {
+        const result: TreeNode[] = [];
+        const traverse = (nodes: TreeNode[]) => {
+            for (const node of nodes) {
+                result.push(node);
+                if (node.children?.length && expanded.has(node.id)) traverse(node.children);
+            }
+        };
+        traverse(data);
+        return result;
+    }, [data, expanded]);
+
+    const findParent = useCallback(
+        (nodes: TreeNode[], targetId: string): TreeNode | null => {
+            for (const n of nodes) {
+                if (n.children?.some(c => c.id === targetId)) return n;
+                if (n.children) {
+                    const found = findParent(n.children, targetId);
+                    if (found) return found;
+                }
+            }
+            return null;
+        },
+        // findParent is a pure recursive function over `data` — no reactive deps needed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+
+    // ── Handlers ──────────────────────────────────────────────────────────────
+
+    const toggleExpand = useCallback((nodeId: string) => {
+        setExpanded(prev => {
+            const next = new Set(prev);
+            next.has(nodeId) ? next.delete(nodeId) : next.add(nodeId);
+            return next;
+        });
+    }, []);
+
+    const handleSelect = useCallback(
+        (node: TreeNode) => {
+            if (!isControlled) setInternalSelectedId(node.id);
+            onNodeSelect?.(node);
+            onNodeClick?.(node);
+        },
+        [isControlled, onNodeClick, onNodeSelect]
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent, node: TreeNode) => {
+            const visibleNodes = getVisibleNodes();
+            const idx = visibleNodes.findIndex(n => n.id === node.id);
+            const hasChildren = !!(node.children?.length);
+            const isExpanded = expanded.has(node.id);
+
+            const focusNode = (id: string) => {
+                nodeRefs.current.get(id)?.focus();
+            };
+
+            switch (e.key) {
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    const next = visibleNodes[idx + 1];
+                    if (next) focusNode(next.id);
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    const prev = visibleNodes[idx - 1];
+                    if (prev) focusNode(prev.id);
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.preventDefault();
+                    if (hasChildren && !isExpanded) {
+                        toggleExpand(node.id);
+                    } else if (hasChildren && isExpanded && node.children?.length) {
+                        focusNode(node.children[0].id);
+                    }
+                    break;
+                }
+                case 'ArrowLeft': {
+                    e.preventDefault();
+                    if (hasChildren && isExpanded) {
+                        toggleExpand(node.id);
+                    } else {
+                        const parent = findParent(data, node.id);
+                        if (parent) focusNode(parent.id);
+                    }
+                    break;
+                }
+                case 'Home': {
+                    e.preventDefault();
+                    if (visibleNodes.length > 0) focusNode(visibleNodes[0].id);
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    const last = visibleNodes[visibleNodes.length - 1];
+                    if (last) focusNode(last.id);
+                    break;
+                }
+                case 'Enter':
+                case ' ': {
+                    e.preventDefault();
+                    if (hasChildren) toggleExpand(node.id);
+                    handleSelect(node);
+                    break;
+                }
+            }
+        },
+        [data, expanded, findParent, getVisibleNodes, handleSelect, toggleExpand]
+    );
+
+    return {
+        expanded,
+        effectiveSelectedId,
+        nodeRefs,
+        getNodeRef,
+        toggleExpand,
+        handleSelect,
+        handleKeyDown,
+        getVisibleNodes,
+    };
+}

package/contexts/AssistenteContext.tsx

@@ -1,44 +1,29 @@
 import React, { createContext, useContext, useState, ReactNode } from 'react';
+import type {
+  Message,
+  SearchResult,
+  SearchSource,
+  SearchCommand,
+  MockResponse,
+} from '../components/assistant/xertica-assistant/types';
 
+// Re-export shared types for backward compatibility
+export type { Message, SearchResult, SearchSource, SearchCommand, MockResponse };
 
-
+/**
+ * @deprecated Use `Suggestion` from `xertica-assistant/types` instead.
+ * Kept for backward compatibility with existing consumers.
+ */
 export interface Sugestao {
   id: string;
   texto: string;
   icon?: ReactNode;
 }
 
-export interface Message {
-  id: string;
-  type: 'user' | 'assistant' | 'system';
-  content: string;
-  timestamp: Date;
-  isFavorite?: boolean;
-  chartData?: any[];
-  chartConfig?: any;
-  attachmentType?: 'image' | 'video' | 'audio' | 'file' | 'document' | 'podcast' | 'search';
-  attachmentName?: string;
-  documentContent?: string;
-  documentTitle?: string;
-  tableData?: {
-    caption?: string;
-    headers: string[];
-    rows: (string | ReactNode)[][];
-  };
-  audioUrl?: string;
-  searchResults?: SearchResult[];
-  searchSources?: SearchSource[];
-  searchCommands?: SearchCommand[];
-  evaluation?: 'like' | 'dislike';
-  evaluationReason?: string;
-}
-
-export interface MockResponse {
-  trigger: string | RegExp;
-  response: string | Partial<Message>;
-  delay?: number;
-}
-
+/**
+ * A saved conversation in the AssistenteContext (Portuguese naming convention).
+ * Note: `Conversation` in `xertica-assistant/types` uses English naming.
+ */
 export interface Conversa {
   id: string;
   titulo: string;
@@ -48,28 +33,6 @@ export interface Conversa {
   favorita?: boolean;
 }
 
-export interface SearchResult {
-  id: string;
-  title: string;
-  description: string;
-  type: 'document' | 'file' | 'project' | 'conversation' | 'contact';
-  path: string;
-  relevance: number;
-  lastModified?: string;
-}
-
-export interface SearchSource {
-  name: string;
-  count: number;
-}
-
-export interface SearchCommand {
-  id: string;
-  icon: string;
-  label: string;
-  description: string;
-}
-
 interface AssistenteContextType {
   historico: Message[];
   conversaAtual: string;

package/contexts/BrandColorsContext.tsx

@@ -6,6 +6,7 @@ import {
   PALETTE,
   colorThemes,
 } from './theme-data';
+import { hexToRgb } from '../utils/color-utils';
 
 interface BrandColorsContextType {
   colors: BrandColors;
@@ -26,11 +27,11 @@ interface BrandColorsProviderProps {
   useCustomTokens?: boolean;
 }
 
-export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({ 
-  children, 
-  defaultTheme, 
-  primaryColor, 
-  useCustomTokens = false 
+export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
+  children,
+  defaultTheme,
+  primaryColor,
+  useCustomTokens = false
 }) => {
   const [currentTheme, setCurrentTheme] = useState<string>(() => {
     // Se primaryColor for passado, ignoramos o nome do tema
@@ -75,18 +76,6 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
     }
   }, [currentTheme, primaryColor]);
 
-  // Função auxiliar para converter hex para rgb
-  const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-      ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-      : null;
-  };
-
   // Função para aplicar as cores baseadas no modo atual e tema
   const applyColors = React.useCallback(() => {
     if (useCustomTokens) return; // Skip if user wants to use local tokens.css

package/contexts/LayoutContext.tsx

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useState, ReactNode, useCallback, useEffect } from 'react';
+import { useIsMobile } from '../components/shared/use-mobile';
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 interface LayoutContextType {
     sidebarExpanded: boolean;
@@ -51,45 +51,19 @@ export function LayoutProvider({ children }: { children: ReactNode }) {
         const saved = getCookie(SIDEBAR_COOKIE_NAME);
         return saved === 'true';
     });
-    
+
     const [assistenteExpanded, setAssistenteExpandedState] = useState(false);
     const [sidebarWidth, setSidebarWidth] = useState(256);
-    const [isMobile, setIsMobile] = useState(false);
-
-    // Detect mobile
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-        const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768);
-        };
-        checkMobile();
-        window.addEventListener('resize', checkMobile);
-        return () => window.removeEventListener('resize', checkMobile);
-    }, []);
+    const isMobile = useIsMobile();
 
     // Persist sidebar state
     useEffect(() => {
         setCookie(SIDEBAR_COOKIE_NAME, sidebarExpanded.toString());
     }, [sidebarExpanded]);
 
-    // Keyboard shortcuts
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (
-                event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-                (event.metaKey || event.ctrlKey)
-            ) {
-                event.preventDefault();
-                toggleSidebar();
-            }
-        };
-
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [sidebarExpanded, assistenteExpanded]); // Dependencies to ensure toggleSidebar uses latest state
-
     // Função para alternar a sidebar - fecha o assistente se estiver aberto
+    // Nota: atalhos de teclado (Ctrl+B) são registrados via useLayoutShortcuts()
+    // no componente raiz da aplicação — ver components/hooks/use-layout-shortcuts.ts
     const toggleSidebar = useCallback(() => {
         setSidebarExpandedState(prev => {
             const newState = !prev;