xertica-ui 1.0.0

package/components/DocumentEditor.tsx

@@ -0,0 +1,504 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Save, Download, FileText, Undo, Redo, Bold, Italic, List, ListOrdered, Type } from 'lucide-react';
+import { Button } from './ui/button';
+import { Separator } from './ui/separator';
+
+interface DocumentEditorProps {
+  initialContent: string;
+  initialTitle?: string;
+  onClose: () => void;
+}
+
+export function DocumentEditor({ initialContent, initialTitle = 'Novo Documento', onClose }: DocumentEditorProps) {
+  // Converter Markdown para HTML formatado
+  const convertMarkdownToHtml = (markdown: string): string => {
+    let html = markdown;
+    
+    // Headers
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+    
+    // Bold
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    
+    // Italic
+    html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    
+    // Lists (remover marcadores markdown, manter como texto)
+    html = html.replace(/^\- (.*$)/gim, '• $1');
+    html = html.replace(/^\d+\. (.*$)/gim, '$1');
+    
+    // Checkboxes (converter para texto)
+    html = html.replace(/- \[ \] (.*$)/gim, '☐ $1');
+    html = html.replace(/- \[x\] (.*$)/gim, '☑ $1');
+    
+    // Horizontal rule
+    html = html.replace(/^---$/gim, '─────────────────────');
+    
+    // Line breaks
+    html = html.replace(/\n/g, '<br/>');
+    
+    return html;
+  };
+
+  const formattedInitialContent = convertMarkdownToHtml(initialContent);
+
+  const [title, setTitle] = useState(initialTitle);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isUserEditing, setIsUserEditing] = useState(false);
+  const [lastSavedContent, setLastSavedContent] = useState(initialContent);
+  const [isActivelyTyping, setIsActivelyTyping] = useState(false);
+  const [history, setHistory] = useState<string[]>([initialContent]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  
+  const editorRef = useRef<HTMLDivElement>(null);
+  const typingTimer = useRef<NodeJS.Timeout | null>(null);
+  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+  const highlightTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastContentRef = useRef(initialContent);
+  const isComposingRef = useRef(false);
+  const isProcessingRef = useRef(false);
+
+  // Handler para input
+  const handleInput = () => {
+    if (!editorRef.current || isComposingRef.current || isProcessingRef.current) return;
+
+    const newContent = editorRef.current.innerText;
+    const oldContent = lastContentRef.current;
+
+    if (newContent !== oldContent) {
+      lastContentRef.current = newContent;
+      setIsUserEditing(true);
+      setIsActivelyTyping(true);
+
+      // Adicionar ao histórico com debounce
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+      
+      debounceTimer.current = setTimeout(() => {
+        setHistory(prev => {
+          const newHistory = prev.slice(0, historyIndex + 1);
+          return [...newHistory, newContent];
+        });
+        setHistoryIndex(prev => prev + 1);
+      }, 500);
+
+      // Aplicar destaque temporário
+      applyTemporaryHighlight();
+
+      // Timer para parar indicador de digitação
+      if (typingTimer.current) {
+        clearTimeout(typingTimer.current);
+      }
+      
+      typingTimer.current = setTimeout(() => {
+        setIsActivelyTyping(false);
+      }, 1500);
+    }
+  };
+
+  // Aplicar destaque temporário ao fundo
+  const applyTemporaryHighlight = () => {
+    if (!editorRef.current) return;
+    
+    isProcessingRef.current = true;
+    
+    // Adicionar cor de destaque usando variável do sistema
+    editorRef.current.style.backgroundColor = 'var(--accent)';
+    
+    // Remover destaque após 2 segundos
+    if (highlightTimer.current) {
+      clearTimeout(highlightTimer.current);
+    }
+    
+    highlightTimer.current = setTimeout(() => {
+      if (editorRef.current) {
+        editorRef.current.style.backgroundColor = '';
+      }
+      isProcessingRef.current = false;
+    }, 2000);
+  };
+
+  // Undo
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      const content = history[newIndex];
+      if (editorRef.current) {
+        isProcessingRef.current = true;
+        editorRef.current.innerText = content;
+        lastContentRef.current = content;
+        setTimeout(() => {
+          isProcessingRef.current = false;
+        }, 100);
+      }
+    }
+  };
+
+  // Redo
+  const handleRedo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      const content = history[newIndex];
+      if (editorRef.current) {
+        isProcessingRef.current = true;
+        editorRef.current.innerText = content;
+        lastContentRef.current = content;
+        setTimeout(() => {
+          isProcessingRef.current = false;
+        }, 100);
+      }
+    }
+  };
+
+  // Aplicar formatação
+  const applyFormat = (command: string, value?: string) => {
+    document.execCommand(command, false, value);
+    editorRef.current?.focus();
+  };
+
+  // Handlers para composição (IME)
+  const handleCompositionStart = () => {
+    isComposingRef.current = true;
+  };
+
+  const handleCompositionEnd = () => {
+    isComposingRef.current = false;
+    handleInput();
+  };
+
+  // Atalhos de teclado
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        handleUndo();
+      } else if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+        e.preventDefault();
+        handleRedo();
+      } else if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+        e.preventDefault();
+        applyFormat('bold');
+      } else if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
+        e.preventDefault();
+        applyFormat('italic');
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [historyIndex, history]);
+
+  // Carregar conteúdo formatado inicialmente
+  useEffect(() => {
+    if (editorRef.current && !editorRef.current.innerHTML) {
+      editorRef.current.innerHTML = formattedInitialContent;
+      lastContentRef.current = initialContent;
+    }
+  }, []);
+
+  // Limpar timers
+  useEffect(() => {
+    return () => {
+      if (typingTimer.current) clearTimeout(typingTimer.current);
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+      if (highlightTimer.current) clearTimeout(highlightTimer.current);
+    };
+  }, []);
+
+  const handleSave = () => {
+    setIsSaving(true);
+    setIsActivelyTyping(false);
+    
+    if (typingTimer.current) {
+      clearTimeout(typingTimer.current);
+    }
+    if (highlightTimer.current) {
+      clearTimeout(highlightTimer.current);
+    }
+    
+    setTimeout(() => {
+      setIsSaving(false);
+      setLastSavedContent(editorRef.current?.innerText || '');
+      setIsUserEditing(false);
+      
+      // Remover destaque
+      if (editorRef.current) {
+        editorRef.current.style.backgroundColor = '';
+      }
+    }, 1000);
+  };
+
+  const handleDownload = () => {
+    const content = editorRef.current?.innerText || '';
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${title}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const getWordCount = () => {
+    const content = editorRef.current?.innerText || '';
+    return content.split(/\s+/).filter(word => word.length > 0).length;
+  };
+
+  const hasUnsavedChanges = () => {
+    return (editorRef.current?.innerText || '') !== lastSavedContent;
+  };
+
+  const canUndo = historyIndex > 0;
+  const canRedo = historyIndex < history.length - 1;
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex-shrink-0 border-b border-border">
+        <div className="flex items-center justify-between px-[10px] py-[16px]">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[var(--chart-4)] to-[var(--chart-4)]/80 flex items-center justify-center flex-shrink-0">
+              <FileText className="w-4 h-4 text-white" />
+            </div>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="flex-1 bg-transparent border-none outline-none text-sm font-medium text-foreground min-w-0"
+              placeholder="Título do documento"
+            />
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0 ml-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleUndo}
+              disabled={!canUndo}
+              className="h-8 w-8 p-0"
+              title="Desfazer (Ctrl+Z)"
+            >
+              <Undo className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRedo}
+              disabled={!canRedo}
+              className="h-8 w-8 p-0"
+              title="Refazer (Ctrl+Y)"
+            >
+              <Redo className="w-4 h-4" />
+            </Button>
+            <Separator orientation="vertical" className="h-5 mx-1" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="h-8 w-8 p-0"
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Toolbar */}
+        <div className="px-3 pb-2 border-t border-border bg-muted">
+          <div className="flex items-center gap-1 py-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('bold')}
+              className="h-8 w-8 p-0"
+              title="Negrito (Ctrl+B)"
+            >
+              <Bold className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('italic')}
+              className="h-8 w-8 p-0"
+              title="Itálico (Ctrl+I)"
+            >
+              <Italic className="w-4 h-4" />
+            </Button>
+            <Separator orientation="vertical" className="h-5 mx-1" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('formatBlock', 'h1')}
+              className="h-8 px-2"
+              title="Título 1"
+            >
+              <span className="text-xs font-medium">H1</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('formatBlock', 'h2')}
+              className="h-8 px-2"
+              title="Título 2"
+            >
+              <span className="text-xs font-medium">H2</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('formatBlock', 'p')}
+              className="h-8 px-2"
+              title="Parágrafo"
+            >
+              <Type className="w-4 h-4" />
+            </Button>
+            <Separator orientation="vertical" className="h-5 mx-1" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('insertUnorderedList')}
+              className="h-8 w-8 p-0"
+              title="Lista com marcadores"
+            >
+              <List className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => applyFormat('insertOrderedList')}
+              className="h-8 w-8 p-0"
+              title="Lista numerada"
+            >
+              <ListOrdered className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Editor */}
+      <div className="flex-1 overflow-auto">
+        <div
+          ref={editorRef}
+          contentEditable
+          onInput={handleInput}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+          className="p-4 min-h-full outline-none text-foreground leading-relaxed text-sm transition-colors duration-300 editor-content font-sans whitespace-pre-wrap break-word"
+          suppressContentEditableWarning
+          data-placeholder="Comece a escrever seu documento..."
+        />
+      </div>
+
+      {/* Footer Actions */}
+      <div className="flex-shrink-0 border-t border-border p-3">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <div className="text-xs text-muted-foreground">
+              {getWordCount()} palavras
+            </div>
+            {isActivelyTyping ? (
+              <div className="flex items-center gap-1 text-xs text-[var(--toast-success-icon)]">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--toast-success-icon)] animate-pulse" />
+                <span>Digitando...</span>
+              </div>
+            ) : isUserEditing && hasUnsavedChanges() ? (
+              <div className="flex items-center gap-1 text-xs text-[var(--toast-warning-icon)]">
+                <span className="w-1.5 h-1.5 rounded-full bg-[var(--toast-warning-icon)] animate-pulse" />
+                <span>Alterações não salvas</span>
+              </div>
+            ) : null}
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleDownload}
+              className="h-8"
+            >
+              <Download className="w-3.5 h-3.5 mr-1.5" />
+              Baixar
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSave}
+              disabled={isSaving}
+              className="bg-primary hover:bg-primary/90 text-primary-foreground h-8"
+            >
+              <Save className="w-3.5 h-3.5 mr-1.5" />
+              {isSaving ? 'Salvando...' : 'Salvar'}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <style>{`
+        [contenteditable]:empty:before {
+          content: attr(data-placeholder);
+          color: var(--muted-foreground);
+          pointer-events: none;
+        }
+        .dark [contenteditable]:empty:before {
+          color: var(--muted-foreground);
+        }
+        
+        /* Estilos do editor sem margens extras */
+        .editor-content h1,
+        .editor-content h2,
+        .editor-content h3,
+        .editor-content h4,
+        .editor-content h5,
+        .editor-content h6 {
+          margin: 0;
+          padding: 0;
+          font-weight: 600;
+        }
+        
+        .editor-content h1 {
+          font-size: 2em;
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        
+        .editor-content h2 {
+          font-size: 1.5em;
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        
+        .editor-content h3 {
+          font-size: 1.25em;
+          margin-top: 0.5em;
+          margin-bottom: 0.5em;
+        }
+        
+        .editor-content p {
+          margin: 0;
+          padding: 0;
+        }
+        
+        .editor-content ul,
+        .editor-content ol {
+          margin: 0.5em 0;
+          padding-left: 1.5em;
+        }
+        
+        .editor-content li {
+          margin: 0.25em 0;
+        }
+        
+        .editor-content strong {
+          font-weight: 600;
+        }
+        
+        .editor-content em {
+          font-style: italic;
+        }
+      `}</style>
+    </div>
+  );
+}

package/components/ForgotPasswordPage.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { XerticaLogo } from './XerticaLogo';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { LanguageSelector } from './LanguageSelector';
+import { ArrowLeft, Lock } from 'lucide-react';
+import { useNavigate } from 'react-router';
+
+export function ForgotPasswordPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    // Simula envio de email
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    // Navega para a tela de verificação
+    navigate('/verify-email', { state: { email } });
+    
+    setIsLoading(false);
+  };
+
+  const handleSocialLogin = (provider: string) => {
+    // Simula login social/SSO
+    console.log(`Login com ${provider}`);
+    // Aqui seria implementada a integração real com cada provedor
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Lado esquerdo - Imagem de fundo completa */}
+      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+        {/* Imagem de fundo preenchendo todo o espaço */}
+        <ImageWithFallback
+          src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format"
+          alt="Segurança e tecnologia"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        
+        {/* Overlay com gradiente */}
+        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+      </div>
+
+      {/* Lado direito - Formulário */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
+        {/* Seletor de idioma no canto superior direito */}
+        <div className="absolute top-4 right-4 z-20">
+          <LanguageSelector variant="minimal" showIcon={false} />
+        </div>
+        
+        {/* Gradiente de fundo para mobile */}
+        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
+        
+        <div className="w-full max-w-sm space-y-6 relative z-10">
+          {/* Header do formulário */}
+          <div className="text-center">
+            <div className="flex items-center justify-center mb-4">
+              <XerticaLogo 
+                className="h-12 w-auto text-primary dark:text-foreground" 
+                variant="theme"
+              />
+            </div>
+            <h2 className="text-sm text-muted-foreground">Recuperar senha</h2>
+            <p className="mt-2 text-muted-foreground">
+              Digite seu email e enviaremos instruções para redefinir sua senha
+            </p>
+          </div>
+
+          {/* Formulário */}
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div className="form-group space-y-2">
+              <Label htmlFor="email" className="form-label">
+                E-mail
+              </Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full"
+                placeholder="seu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-3">
+              <Button 
+                type="submit" 
+                className="w-full"
+                disabled={isLoading}
+              >
+                {isLoading ? 'Enviando...' : 'Enviar instruções'}
+              </Button>
+
+              <Button
+                type="button"
+                onClick={() => navigate('/login')}
+                variant="outline"
+                className="w-full text-muted-foreground hover:text-foreground"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" />
+                Voltar para login
+              </Button>
+            </div>
+          </form>
+
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-muted px-2 text-muted-foreground">
+                ou continuar com
+              </span>
+            </div>
+          </div>
+
+          {/* Opções de login social/SSO */}
+          <div className="space-y-3">
+            {/* Google */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('Google')}
+            >
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                <path fill="none" d="M0 0h48v48H0z"></path>
+              </svg>
+              <span>Entrar com Google</span>
+            </Button>
+
+            {/* MT Login */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('MT Login')}
+            >
+              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
+              <span>Entrar com MT Login</span>
+            </Button>
+
+            {/* gov.br */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center font-normal"
+              onClick={() => handleSocialLogin('gov.br')}
+            >
+              <span>Entrar com <strong className="font-semibold">gov.br</strong></span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}