@etus/ui 0.1.0 → 0.1.2

package/src/components/advanced/RichTextEditor/RichTextEditor.types.ts

@@ -1,77 +0,0 @@
-import type { Extension } from "@tiptap/core"
-import type { Editor, JSONContent } from "@tiptap/react"
-
-export interface RichTextEditorProps {
-  /** ARIA label for accessibility */
-  "aria-label"?: string
-  /** Auto focus behavior */
-  autofocus?: "all" | "end" | "start" | boolean
-  /** Additional CSS class names */
-  className?: string
-  /** Initial content (HTML string or JSON) */
-  content?: JSONContent | string
-  /** Default content for uncontrolled usage */
-  defaultContent?: JSONContent | string
-  /** Whether the editor is editable */
-  editable?: boolean
-  /** Additional Tiptap extensions */
-  extensions?: Extension[]
-  /** Callback fired when editor loses focus */
-  onBlur?: (props: { editor: Editor }) => void
-  /** Callback fired when content changes */
-  onChange?: (content: JSONContent) => void
-  /** Callback fired when editor gains focus */
-  onFocus?: (props: { editor: Editor }) => void
-  /** Custom image upload handler */
-  onImageUpload?: (file: File) => Promise<string>
-  /** Callback fired on editor update */
-  onUpdate?: (props: { editor: Editor }) => void
-  /** Placeholder text when editor is empty */
-  placeholder?: string
-  /** Whether to show bubble menu on selection */
-  showBubbleMenu?: boolean
-  /** Whether to show floating menu on empty lines */
-  showFloatingMenu?: boolean
-  /** Whether to show the toolbar */
-  showToolbar?: boolean
-  /** Position of the toolbar */
-  toolbarPosition?: "bottom" | "floating" | "top"
-}
-
-export interface RichTextEditorRef {
-  /** Blur the editor */
-  blur: () => void
-  /** The Tiptap editor instance */
-  editor: Editor | null
-  /** Focus the editor */
-  focus: () => void
-  /** Get content as HTML string */
-  getHTML: () => string
-  /** Get content as JSON */
-  getJSON: () => JSONContent
-  /** Get content as plain text */
-  getText: () => string
-  /** Set editor content */
-  setContent: (content: JSONContent | string) => void
-}
-
-export interface RichTextToolbarProps {
-  /** Additional CSS class names */
-  className?: string
-  /** The Tiptap editor instance */
-  editor: Editor | null
-}
-
-export interface RichTextBubbleMenuProps {
-  /** Additional CSS class names */
-  className?: string
-  /** The Tiptap editor instance */
-  editor: Editor | null
-}
-
-export interface RichTextFloatingMenuProps {
-  /** Additional CSS class names */
-  className?: string
-  /** The Tiptap editor instance */
-  editor: Editor | null
-}

package/src/components/advanced/RichTextEditor/RichTextEditor.variants.ts

@@ -1,151 +0,0 @@
-import { cva } from "class-variance-authority"
-
-/**
- * RichTextEditor container variants
- */
-export const richTextEditorVariants = cva(
-  "relative flex flex-col rounded-lg border border-border bg-background overflow-hidden",
-  {
-    variants: {
-      size: {
-        sm: "min-h-[200px]",
-        md: "min-h-[300px]",
-        lg: "min-h-[400px]",
-        full: "h-full min-h-[300px]",
-      },
-      disabled: {
-        true: "opacity-50 cursor-not-allowed",
-        false: "",
-      },
-      focused: {
-        true: "ring-2 ring-ring ring-offset-2",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      disabled: false,
-      focused: false,
-    },
-  }
-)
-
-/**
- * RichTextEditor toolbar variants
- */
-export const richTextEditorToolbarVariants = cva(
-  "flex items-center gap-1 flex-wrap border-b border-border bg-muted/30 p-2",
-  {
-    variants: {
-      position: {
-        top: "order-first",
-        bottom: "order-last border-b-0 border-t",
-        floating: "absolute top-2 left-2 right-2 z-10 rounded-md shadow-md border bg-background",
-      },
-      compact: {
-        true: "p-1 gap-0.5",
-        false: "p-2 gap-1",
-      },
-    },
-    defaultVariants: {
-      position: "top",
-      compact: false,
-    },
-  }
-)
-
-/**
- * RichTextEditor toolbar button variants
- */
-export const richTextEditorToolbarButtonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-accent hover:text-accent-foreground",
-        active: "bg-accent text-accent-foreground",
-      },
-      size: {
-        sm: "h-7 w-7",
-        md: "h-8 w-8",
-        lg: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
-  }
-)
-
-/**
- * RichTextEditor content area variants
- */
-export const richTextEditorContentVariants = cva(
-  "flex-1 overflow-auto p-4 prose prose-sm dark:prose-invert max-w-none focus:outline-none",
-  {
-    variants: {
-      editable: {
-        true: "",
-        false: "pointer-events-none",
-      },
-    },
-    defaultVariants: {
-      editable: true,
-    },
-  }
-)
-
-/**
- * RichTextEditor bubble menu variants
- */
-export const richTextEditorBubbleMenuVariants = cva(
-  "flex items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-md",
-  {
-    variants: {
-      visible: {
-        true: "opacity-100",
-        false: "opacity-0 pointer-events-none",
-      },
-    },
-    defaultVariants: {
-      visible: true,
-    },
-  }
-)
-
-/**
- * RichTextEditor floating menu variants
- */
-export const richTextEditorFloatingMenuVariants = cva(
-  "flex items-center gap-1 rounded-md border border-border bg-background p-1 shadow-md",
-  {
-    variants: {
-      visible: {
-        true: "opacity-100",
-        false: "opacity-0 pointer-events-none",
-      },
-    },
-    defaultVariants: {
-      visible: true,
-    },
-  }
-)
-
-/**
- * RichTextEditor placeholder variants
- */
-export const richTextEditorPlaceholderVariants = cva(
-  "absolute top-4 left-4 text-muted-foreground pointer-events-none select-none",
-  {
-    variants: {
-      visible: {
-        true: "opacity-100",
-        false: "opacity-0",
-      },
-    },
-    defaultVariants: {
-      visible: true,
-    },
-  }
-)

package/src/components/advanced/RichTextEditor/index.ts

@@ -1,24 +0,0 @@
-export type {
-  RichTextBubbleMenuProps,
-  RichTextEditorProps,
-  RichTextEditorRef,
-  RichTextFloatingMenuProps,
-  RichTextToolbarProps,
-} from "./RichTextEditor.types"
-
-export {
-  RichTextBubbleMenu,
-  RichTextEditor,
-  RichTextFloatingMenu,
-  RichTextToolbar,
-} from "./RichTextEditor"
-
-export {
-  richTextEditorBubbleMenuVariants,
-  richTextEditorContentVariants,
-  richTextEditorFloatingMenuVariants,
-  richTextEditorPlaceholderVariants,
-  richTextEditorToolbarButtonVariants,
-  richTextEditorToolbarVariants,
-  richTextEditorVariants,
-} from "./RichTextEditor.variants"

package/src/components/advanced/Search/README.md

@@ -1,391 +0,0 @@
-# Search
-
-## Visão Geral
-
-O Search e um componente de busca avancada com suporte a autocomplete, filtros, resultados agrupados e historico de buscas. Oferece uma experiencia de busca completa com feedback visual e navegacao por teclado.
-
-### Classificacao Atomica
-- **Categoria**: Organisms
-- **Subcategoria**: Navigation / Form
-
-### Casos de Uso Comuns
-- Busca global de aplicacao
-- Pesquisa em tabelas de dados
-- Autocomplete de campos
-- Busca com filtros avancados
-- Spotlight search (Cmd+K)
-
-### Relacao com Outros Componentes
-- **Command**: Versao command palette
-- **Input**: Campo base de entrada
-- **Popover**: Dropdown de resultados
-- **Badge**: Tags de filtros ativos
-
-## Design Specs
-
-### Subcomponentes
-
-- **Search**: Container principal
-- **SearchInput**: Campo de entrada
-- **SearchResults**: Lista de resultados
-- **SearchResultItem**: Item individual
-- **SearchResultGroup**: Agrupamento de resultados
-- **SearchFilters**: Filtros de busca
-- **SearchHistory**: Historico de buscas
-
-### Variantes
-- **inline**: Busca inline com dropdown
-- **fullscreen**: Busca em tela cheia (mobile)
-- **command**: Estilo command palette
-
-### Estados
-
-- **Idle**: Aguardando input
-- **Loading**: Buscando resultados
-- **Results**: Exibindo resultados
-- **Empty**: Nenhum resultado
-- **Error**: Erro na busca
-
-### Tokens de Design
-
-#### Cores
-- Input background: `bg-muted`
-- Results background: `bg-popover`
-- Highlight: `bg-accent`
-- Match highlight: `text-primary`, `font-semibold`
-
-#### Espacamento
-- Input padding: `px-4`, `py-2`
-- Results padding: `p-2`
-- Item padding: `px-3`, `py-2`
-
-#### Tipografia
-- Query: `text-sm`
-- Results: `text-sm`
-- Group heading: `text-xs`, `font-medium`
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `value` | `string` | `""` | Valor da busca (controlled) |
-| `onChange` | `(value: string) => void` | - | Callback de mudanca |
-| `onSearch` | `(query: string) => void \| Promise<SearchResult[]>` | - | Funcao de busca |
-| `results` | `SearchResult[]` | `[]` | Resultados da busca |
-| `loading` | `boolean` | `false` | Estado de carregamento |
-| `placeholder` | `string` | `"Search..."` | Texto placeholder |
-| `filters` | `SearchFilter[]` | `[]` | Filtros disponiveis |
-| `activeFilters` | `string[]` | `[]` | Filtros ativos |
-| `onFilterChange` | `(filters: string[]) => void` | - | Callback de filtros |
-| `showHistory` | `boolean` | `true` | Exibe historico |
-| `debounce` | `number` | `300` | Debounce em ms |
-| `minChars` | `number` | `1` | Caracteres minimos |
-
-### Interfaces TypeScript
-
-```typescript
-export interface SearchResult {
-  id: string
-  title: string
-  description?: string
-  icon?: React.ReactNode
-  href?: string
-  group?: string
-  keywords?: string[]
-  action?: () => void
-}
-
-export interface SearchFilter {
-  id: string
-  label: string
-  icon?: React.ReactNode
-}
-
-export interface SearchGroup {
-  id: string
-  label: string
-  results: SearchResult[]
-}
-
-export interface SearchProps {
-  value?: string
-  defaultValue?: string
-  onChange?: (value: string) => void
-  onSearch?: (query: string) => void | Promise<SearchResult[]>
-  results?: SearchResult[]
-  loading?: boolean
-  placeholder?: string
-  filters?: SearchFilter[]
-  activeFilters?: string[]
-  onFilterChange?: (filters: string[]) => void
-  onSelect?: (result: SearchResult) => void
-  showHistory?: boolean
-  debounce?: number
-  minChars?: number
-  className?: string
-}
-```
-
-### Comparacao com Referencias
-
-| Design System | Caracteristicas |
-|---------------|-----------------|
-| **Algolia** | InstantSearch com highlighting |
-| **Command** | cmdk para command palette |
-| **Spotlight** | macOS Spotlight style |
-| **Meilisearch** | Fast search UI |
-| **Typesense** | Typo-tolerant search |
-| **Fuse.js** | Fuzzy search client-side |
-
-## Acessibilidade (A11y)
-
-### Atributos ARIA
-- `role="combobox"`: Input como combobox
-- `role="listbox"`: Lista de resultados
-- `role="option"`: Cada resultado
-- `aria-expanded`: Estado de abertura
-- `aria-activedescendant`: Item ativo
-
-### Navegacao por Teclado
-- `Arrow Up/Down`: Navega resultados
-- `Enter`: Seleciona resultado
-- `Escape`: Fecha resultados
-- `Tab`: Move foco
-- `Ctrl/Cmd + K`: Foca na busca (global)
-
-### Conformidade WCAG
-- **Nivel alvo**: WCAG 2.1 AA
-- Anuncio de quantidade de resultados
-- Highlight nao depende apenas de cor
-- Loading state anunciado
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import { Search } from "@etus/ui"
-
-export function BasicSearch() {
-  const [results, setResults] = React.useState([])
-
-  const handleSearch = async (query: string) => {
-    const data = await fetchResults(query)
-    setResults(data)
-  }
-
-  return (
-    <Search
-      placeholder="Search..."
-      onSearch={handleSearch}
-      results={results}
-      onSelect={(result) => navigate(result.href)}
-    />
-  )
-}
-```
-
-### Com Filtros
-
-```tsx
-import { Search } from "@etus/ui"
-
-const filters = [
-  { id: "all", label: "All" },
-  { id: "users", label: "Users" },
-  { id: "docs", label: "Documents" },
-  { id: "settings", label: "Settings" },
-]
-
-export function FilteredSearch() {
-  const [activeFilters, setActiveFilters] = React.useState(["all"])
-
-  return (
-    <Search
-      filters={filters}
-      activeFilters={activeFilters}
-      onFilterChange={setActiveFilters}
-      onSearch={(query) => search(query, activeFilters)}
-    />
-  )
-}
-```
-
-### Com Grupos
-
-```tsx
-import { Search } from "@etus/ui"
-
-export function GroupedSearch() {
-  const results = [
-    { id: "1", title: "John Doe", group: "Users" },
-    { id: "2", title: "Jane Smith", group: "Users" },
-    { id: "3", title: "Getting Started", group: "Docs" },
-    { id: "4", title: "API Reference", group: "Docs" },
-  ]
-
-  return (
-    <Search
-      results={results}
-      onSearch={handleSearch}
-    />
-  )
-}
-```
-
-### Global Search (Cmd+K)
-
-```tsx
-import { Search } from "@etus/ui"
-
-export function GlobalSearch() {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  return (
-    <Search
-      open={open}
-      onOpenChange={setOpen}
-      variant="command"
-      placeholder="Search or type a command..."
-    />
-  )
-}
-```
-
-### Com Highlight de Match
-
-```tsx
-import { Search, SearchHighlight } from "@etus/ui"
-
-function ResultItem({ result, query }) {
-  return (
-    <div>
-      <SearchHighlight text={result.title} query={query} />
-      <p className="text-muted-foreground text-sm">
-        <SearchHighlight text={result.description} query={query} />
-      </p>
-    </div>
-  )
-}
-```
-
-### Busca Client-Side
-
-```tsx
-import { Search } from "@etus/ui"
-import Fuse from "fuse.js"
-
-const data = [/* ... */]
-const fuse = new Fuse(data, { keys: ["title", "description"] })
-
-export function ClientSearch() {
-  const [results, setResults] = React.useState([])
-
-  const handleSearch = (query: string) => {
-    if (!query) {
-      setResults([])
-      return
-    }
-    const results = fuse.search(query).map((r) => r.item)
-    setResults(results)
-  }
-
-  return (
-    <Search
-      onSearch={handleSearch}
-      results={results}
-      debounce={100}
-    />
-  )
-}
-```
-
-## Testes
-
-### Estrategias de Teste
-
-```typescript
-describe("Search", () => {
-  it("renders search input", () => {})
-  it("calls onSearch with debounce", () => {})
-  it("displays results", () => {})
-  it("navigates with keyboard", () => {})
-  it("selects result on enter", () => {})
-  it("shows empty state", () => {})
-  it("filters results", () => {})
-})
-```
-
-### Exemplo de Teste
-
-```typescript
-import { render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { Search } from "./Search"
-
-describe("Search", () => {
-  it("debounces search calls", async () => {
-    const onSearch = vi.fn()
-    render(<Search onSearch={onSearch} debounce={300} />)
-
-    const input = screen.getByRole("combobox")
-    await userEvent.type(input, "test")
-
-    // Should not call immediately
-    expect(onSearch).not.toHaveBeenCalled()
-
-    // Wait for debounce
-    await waitFor(() => {
-      expect(onSearch).toHaveBeenCalledWith("test")
-    }, { timeout: 400 })
-
-    // Should only call once
-    expect(onSearch).toHaveBeenCalledTimes(1)
-  })
-
-  it("navigates results with keyboard", async () => {
-    const results = [
-      { id: "1", title: "Result 1" },
-      { id: "2", title: "Result 2" },
-    ]
-
-    render(<Search results={results} />)
-
-    const input = screen.getByRole("combobox")
-    await userEvent.click(input)
-    await userEvent.keyboard("{ArrowDown}")
-
-    expect(screen.getByText("Result 1").closest("[role='option']"))
-      .toHaveAttribute("data-selected", "true")
-  })
-})
-```
-
-## Roadmap / Features Futuras
-
-- Debounce configuravel para performance
-- Suporte a busca assincrona
-- Highlight de matches via regex
-- Cache de resultados recentes
-- Historico persistido em localStorage
-
-## Referências
-
-- [Algolia InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/)
-- [cmdk](https://cmdk.paco.me/)
-- [Fuse.js](https://fusejs.io/)
-- [WAI-ARIA Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)