Design System

O Design System da QuettaCode está no pacote @quettacode/ui, construído com Radix UI e Tailwind CSS.

Instalação

import { Button, Input, Dialog } from '@quettacode/ui';

---

Atoms

Componentes básicos e atômicos.

Componente	Descrição	Props Principais
Avatar	Imagem de perfil	src, fallback, size
Badge	Etiqueta/Tag	variant, children
BarIcon	Ícone de barra	icon, size
Button	Botão interativo	variant, size, disabled, loading
Card	Container com borda	children, className
Checkbox	Caixa de seleção	checked, onCheckedChange
Input	Campo de texto	type, placeholder, error
Label	Rótulo de form	htmlFor, children
MessageStatusIcon	Ícone de status	status
RadioGroup	Grupo de opções	value, onValueChange, options
ScrollArea	Área com scroll	children, className
Separator	Linha divisória	orientation
SidebarItem	Item de menu	icon, label, active, href
Skeleton	Placeholder loading	className
Switch	Toggle on/off	checked, onCheckedChange
Textarea	Área de texto	rows, placeholder
Tooltip	Dica flutuante	content, children

---

Molecules

Componentes compostos.

Componente	Descrição	Props Principais
Accordion	Lista expansível	items, type
Alert	Mensagem de alerta	variant, title, children
AlertDialog	Modal de confirmação	open, onConfirm, onCancel
Calendar	Seletor de data	selected, onSelect
CalendarWidget	Widget de calendário	events
Chart	Gráficos (Recharts)	data, type
ChatInput	Input de chat	onSend, onFileSelect
ConversationItem	Item de conversa	contact, lastMessage, unread
Dialog	Modal genérico	open, onOpenChange, title
DropdownMenu	Menu suspenso	trigger, items
FileUpload	Upload de arquivos	onFileSelect, accept
Form	Wrapper de formulário	onSubmit, children
GlobalSearch	Busca global	onSearch, results
MessageBubble	Balão de mensagem	message, direction
NavItem	Item de navegação	icon, label, href
NotificationButton	Botão de notificações	count, onClick
Select	Seletor dropdown	options, value, onChange
Stepper	Passos de wizard	steps, currentStep
Tabs	Abas de conteúdo	tabs, defaultValue
ThemeSwitcher	Troca de tema	-
Toaster	Container de toasts	-
UsageChart	Gráfico de uso	data

---

Organisms

Componentes complexos e layouts.

Componente	Descrição	Props Principais
ChatLayout	Layout de chat	sidebar, content
ChatList	Lista de chats	conversations, onSelect
ContactDetailsSidebar	Sidebar de contato	contact, onClose
DocumentViewer	Visualizador de PDF	url, onClose
Footer	Rodapé da landing	-
Header	Cabeçalho principal	user, notifications
Navbar	Navegação principal	items
Sidebar	Menu lateral	items, collapsed
Table	Tabela de dados	columns, data, pagination
TemplateModal	Modal de template	templates, onSelect
Timeline	Linha do tempo	events

---

Exemplos de Uso

Button

import { Button } from '@quettacode/ui';

<Button variant="default" size="md">
  Salvar
</Button>

<Button variant="destructive" loading>
  Excluindo...
</Button>

<Button variant="outline" disabled>
  Desabilitado
</Button>

Dialog

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@quettacode/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Modal</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Título do Modal</DialogTitle>
    </DialogHeader>
    <p>Conteúdo aqui</p>
  </DialogContent>
</Dialog>

Form com Input

import { Form, Input, Button } from '@quettacode/ui';
import { useForm } from 'react-hook-form';

function ContactForm() {
  const form = useForm();
  
  return (
    <Form {...form}>
      <Input
        {...form.register('name')}
        placeholder="Nome"
        error={form.formState.errors.name?.message}
      />
      <Button type="submit">Salvar</Button>
    </Form>
  );
}

---

Storybook

Visualize todos os componentes interativamente:

cd packages/ui
pnpm storybook

Acesse: http://localhost:6006

---

Temas

O design system suporta modo claro e escuro via CSS variables:

import { ThemeProvider } from '@quettacode/ui';

<ThemeProvider defaultTheme="system">
  <App />
</ThemeProvider>

Cores Principais

Token	Uso
--background	Fundo da página
--foreground	Texto principal
--primary	Cor de destaque
--destructive	Ações destrutivas
--muted	Texto secundário
--accent	Hover/Focus
--border	Bordas