@etus/ui 0.1.0

package/src/components/workflow/Stepper/Stepper.types.ts

@@ -0,0 +1,73 @@
+import type { stepperVariants } from "./Stepper.variants"
+import type { VariantProps } from "class-variance-authority"
+import type { ReactNode } from "react"
+
+/**
+ * Step item data structure
+ */
+export interface StepItem {
+  /** Brief description of the step */
+  description?: string
+  /** Whether the step is disabled */
+  disabled?: boolean
+  /** Custom icon to display */
+  icon?: ReactNode
+  /** Unique identifier for the step */
+  id: string
+  /** Label/title of the step */
+  label: string
+  /** Optional click handler for the step */
+  onClick?: () => void
+  /** Step status - overrides computed status */
+  status?: "active" | "complete" | "error" | "pending"
+}
+
+/**
+ * Props for Stepper component
+ */
+export interface StepperProps
+  extends Omit<React.ComponentProps<"div">, "children">,
+    VariantProps<typeof stepperVariants> {
+  /** Custom content to render (overrides steps) */
+  children?: ReactNode
+  /** Whether steps are clickable @default false */
+  clickable?: boolean
+  /** Indices of completed steps */
+  completed?: number[]
+  /** Index of the current step (0-based) @default 0 */
+  currentStep?: number
+  /** Callback when a step is clicked */
+  onStepClick?: (index: number) => void
+  /** Show connector lines between steps @default true */
+  showConnectors?: boolean
+  /** Size of the step indicators @default "default" */
+  size?: "default" | "lg" | "sm"
+  /** Array of steps to display */
+  steps?: StepItem[]
+  /** Visual variant @default "default" */
+  variant?: "compact" | "default" | "vertical"
+}
+
+/**
+ * Props for internal StepperItem component
+ */
+export interface StepperItemProps {
+  /** Whether the step is clickable */
+  clickable?: boolean
+  /** Index of this step */
+  index: number
+  /** Whether this is the last step */
+  isLast?: boolean
+  /** Callback when step is clicked */
+  onClick?: (index: number) => void
+  /** Show connector after this step */
+  showConnector?: boolean
+  /** Size */
+  size?: "default" | "lg" | "sm"
+  /** Computed status for this step */
+  status: "active" | "complete" | "error" | "pending"
+  /** The step data */
+  step: StepItem
+  /** Visual variant */
+  variant?: "compact" | "default" | "vertical"
+}

package/src/components/workflow/Stepper/Stepper.variants.ts

@@ -0,0 +1,194 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * Stepper container variants
+ */
+export const stepperVariants = cva("flex transition-all duration-200", {
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    size: {
+      default: "gap-4",
+      lg: "gap-6",
+      sm: "gap-2",
+    },
+    variant: {
+      compact: "flex-row items-center gap-2",
+      default: "flex-row items-start",
+      vertical: "flex-col",
+    },
+  },
+})
+
+/**
+ * Step item container variants
+ */
+export const stepperItemVariants = cva("relative flex transition-all duration-200", {
+  compoundVariants: [
+    {
+      className: "flex-1",
+      variant: "default",
+    },
+    {
+      className: "flex-1",
+      variant: "compact",
+    },
+    {
+      className: "w-full",
+      variant: "vertical",
+    },
+  ],
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    size: {
+      default: "",
+      lg: "",
+      sm: "",
+    },
+    variant: {
+      compact: "flex-col items-center",
+      default: "flex-col items-center",
+      vertical: "flex-row items-start gap-3",
+    },
+  },
+})
+
+/**
+ * Step indicator (circle) variants
+ */
+export const stepperIndicatorVariants = cva(
+  "relative z-10 flex shrink-0 items-center justify-center rounded-full font-medium transition-all duration-200",
+  {
+    compoundVariants: [
+      // Active step with ring highlight
+      {
+        className: "ring-4 ring-primary/20",
+        status: "active",
+      },
+    ],
+    defaultVariants: {
+      size: "default",
+      status: "pending",
+    },
+    variants: {
+      size: {
+        default: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        sm: "h-8 w-8 text-xs",
+      },
+      status: {
+        active: "border-2 border-primary bg-primary text-primary-foreground",
+        complete: "bg-primary text-primary-foreground",
+        error: "bg-destructive text-destructive-foreground",
+        pending: "border-2 border-muted bg-muted text-muted-foreground",
+      },
+    },
+  }
+)
+
+/**
+ * Horizontal connector variants
+ */
+export const stepperConnectorHorizontalVariants = cva(
+  "absolute top-1/2 h-0.5 -translate-y-1/2 transition-all duration-200",
+  {
+    defaultVariants: {
+      size: "default",
+      status: "pending",
+    },
+    variants: {
+      size: {
+        default: "left-[calc(50%+24px)] right-[calc(-50%+24px)]",
+        lg: "left-[calc(50%+30px)] right-[calc(-50%+30px)]",
+        sm: "left-[calc(50%+20px)] right-[calc(-50%+20px)]",
+      },
+      status: {
+        active: "bg-primary/50",
+        complete: "bg-primary",
+        error: "bg-destructive/50",
+        pending: "bg-muted",
+      },
+    },
+  }
+)
+
+/**
+ * Vertical connector variants
+ */
+export const stepperConnectorVerticalVariants = cva(
+  "absolute w-0.5 transition-all duration-200",
+  {
+    defaultVariants: {
+      size: "default",
+      status: "pending",
+    },
+    variants: {
+      size: {
+        default: "left-5 top-12 h-[calc(100%-48px)]",
+        lg: "left-6 top-14 h-[calc(100%-56px)]",
+        sm: "left-4 top-10 h-[calc(100%-40px)]",
+      },
+      status: {
+        active: "bg-primary/50",
+        complete: "bg-primary",
+        error: "bg-destructive/50",
+        pending: "bg-muted",
+      },
+    },
+  }
+)
+
+/**
+ * Step label variants
+ */
+export const stepperLabelVariants = cva("font-medium transition-colors", {
+  defaultVariants: {
+    size: "default",
+    status: "pending",
+  },
+  variants: {
+    size: {
+      default: "text-sm",
+      lg: "text-base",
+      sm: "text-xs",
+    },
+    status: {
+      active: "text-foreground",
+      complete: "text-foreground",
+      error: "text-destructive",
+      pending: "text-muted-foreground",
+    },
+  },
+})
+
+/**
+ * Step description variants
+ */
+export const stepperDescriptionVariants = cva("text-muted-foreground transition-colors", {
+  defaultVariants: {
+    size: "default",
+  },
+  variants: {
+    size: {
+      default: "text-xs",
+      lg: "text-sm",
+      sm: "text-[10px]",
+    },
+  },
+})
+
+// Export variant prop types
+export type StepperVariantProps = VariantProps<typeof stepperVariants>
+export type StepperItemVariantProps = VariantProps<typeof stepperItemVariants>
+export type StepperIndicatorVariantProps = VariantProps<typeof stepperIndicatorVariants>
+export type StepperConnectorHorizontalVariantProps = VariantProps<
+  typeof stepperConnectorHorizontalVariants
+>
+export type StepperConnectorVerticalVariantProps = VariantProps<
+  typeof stepperConnectorVerticalVariants
+>

package/src/components/workflow/Stepper/index.ts

@@ -0,0 +1,16 @@
+export type { StepItem, StepperProps } from "./Stepper.types"
+export { Stepper } from "./Stepper"
+export {
+  type StepperConnectorHorizontalVariantProps,
+  stepperConnectorHorizontalVariants,
+  type StepperConnectorVerticalVariantProps,
+  stepperConnectorVerticalVariants,
+  stepperDescriptionVariants,
+  type StepperIndicatorVariantProps,
+  stepperIndicatorVariants,
+  type StepperItemVariantProps,
+  stepperItemVariants,
+  stepperLabelVariants,
+  type StepperVariantProps,
+  stepperVariants,
+} from "./Stepper.variants"

package/src/components/workflow/TaskCard/README.md

@@ -0,0 +1,343 @@
+# TaskCard
+
+## Visão Geral
+
+O **TaskCard** é um componente que apresenta uma tarefa individual de forma compacta e visual, exibindo informações essenciais como título, descrição, prioridade, responsável e status. É ideal para exibir tarefas em dashboards, boards de Kanban, listas de tarefas ou qualquer interface que necessite mostrar itens de trabalho.
+
+### Casos de Uso
+
+- Cards em Kanban boards
+- Tarefas em listas
+- To-do items
+- Work items em dashboards
+- Itens em backlogs
+- Tasks em timelines
+- Cartões em grids de projetos
+
+### Classificação
+
+**Categoria:** Workflow
+**Dependências:** React, Tailwind CSS, Lucide Icons, Radix UI
+
+---
+
+## Design Specs
+
+### Variantes (`variant`)
+
+| Variante | Uso | Tokens |
+|----------|-----|--------|
+| `default` | Card padrão | `bg-card border` |
+| `elevated` | Card com elevação | `shadow-md` |
+| `minimal` | Card simplificado | `bg-muted/50` |
+| `highlighted` | Card destacado | `bg-primary/10 border-primary` |
+
+### Tamanhos (`size`)
+
+| Tamanho | Padding | Uso |
+|---------|---------|-----|
+| `sm` | `p-3` | Cards compactos |
+| `default` | `p-4` | Tamanho padrão |
+| `lg` | `p-6` | Cards espaçosos |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Card em repouso |
+| Hover | `hover:shadow-lg` | Sombra aumenta |
+| Focus | `focus-within:ring` | Ring visível |
+| Selected | `bg-primary/20` | Card selecionado |
+| Done | `opacity-70` | Card completo |
+| Dragging | `data-dragging` | Durante drag |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+bg-card
+bg-primary/10
+border-border
+border-primary
+text-foreground
+
+/* Espaçamento */
+p-4
+gap-3
+
+/* Tipografia */
+text-sm
+font-medium
+
+/* Bordas */
+border
+rounded-lg
+
+/* Transições */
+transition-all
+duration-200
+```
+
+### data-slot
+
+```html
+<div data-slot="task-card">
+  <div data-slot="task-card-header">
+    <h3 data-slot="task-card-title">...</h3>
+    <div data-slot="task-card-actions">...</div>
+  </div>
+  <p data-slot="task-card-description">...</p>
+  <div data-slot="task-card-metadata">
+    <span data-slot="task-card-priority">...</span>
+    <span data-slot="task-card-assignee">...</span>
+    <span data-slot="task-card-due">...</span>
+  </div>
+  <div data-slot="task-card-footer">...</div>
+</div>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `variant` | `"default" \| "elevated" \| "minimal" \| "highlighted"` | `"default"` | Estilo visual |
+| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Tamanho |
+| `title` | `string` | - | Título da tarefa |
+| `description` | `string` | - | Descrição |
+| `priority` | `"low" \| "medium" \| "high" \| "urgent"` | - | Prioridade |
+| `status` | `"todo" \| "in-progress" \| "done"` | `"todo"` | Status |
+| `assignee` | `{ name: string; avatar?: string }` | - | Responsável |
+| `dueDate` | `Date` | - | Data limite |
+| `tags` | `string[]` | - | Tags/labels |
+| `completed` | `boolean` | `false` | Se está completo |
+| `onSelect` | `() => void` | - | Callback ao selecionar |
+| `onClick` | `() => void` | - | Callback ao clicar |
+| `className` | `string` | - | Classes CSS adicionais |
+| `children` | `ReactNode` | - | Conteúdo customizado |
+| `ref` | `Ref<HTMLDivElement>` | - | Referência ao elemento DOM |
+
+> Herda todas as props de `React.ComponentProps<"div">`
+
+### TypeScript
+
+```typescript
+import { type VariantProps } from "class-variance-authority"
+
+interface TaskCardAssignee {
+  name: string
+  avatar?: string
+  email?: string
+}
+
+interface TaskCardProps extends React.ComponentProps<"div"> {
+  title: string
+  description?: string
+  priority?: "low" | "medium" | "high" | "urgent"
+  status?: "todo" | "in-progress" | "done"
+  assignee?: TaskCardAssignee
+  dueDate?: Date
+  tags?: string[]
+  completed?: boolean
+  onSelect?: () => void
+}
+```
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `role="button"` | Se clicável |
+| `aria-selected` | Se selecionável |
+| `aria-label` | Rótulo descritivo |
+| `aria-disabled` | Se desabilitado |
+
+### Suporte a Teclado
+
+| Tecla | Ação |
+|-------|------|
+| `Tab` | Navega para o card |
+| `Enter/Space` | Ativa ações do card |
+| `Delete` | Remove card (se permitido) |
+
+### Screen Readers
+
+Anunciar "Tarefa: [título]. Prioridade: [nível]. Status: [status]". Avatar com `aria-label` descritivo.
+
+---
+
+## Exemplos
+
+### TaskCard Básico
+
+```tsx
+import { TaskCard } from "@etus/ui"
+
+function Example() {
+  return (
+    <TaskCard
+      title="Implementar login"
+      description="Adicionar autenticação com JWT"
+      priority="high"
+      status="in-progress"
+    />
+  )
+}
+```
+
+### Com Assignee e Data Limite
+
+```tsx
+import { TaskCard } from "@etus/ui"
+
+function Example() {
+  return (
+    <TaskCard
+      title="Design do dashboard"
+      description="Criar mockups no Figma"
+      priority="medium"
+      status="todo"
+      assignee={{
+        name: "Maria Silva",
+        avatar: "https://...",
+      }}
+      dueDate={new Date("2025-12-31")}
+      tags={["design", "priority"]}
+    />
+  )
+}
+```
+
+### Completo com Ações
+
+```tsx
+import { TaskCard } from "@etus/ui"
+import { Trash2, Edit2 } from "lucide-react"
+
+function Example() {
+  return (
+    <TaskCard
+      title="Code review"
+      completed
+      status="done"
+      onClick={() => console.log("Abrir tarefa")}
+    >
+      <div className="flex gap-2">
+        <button><Edit2 size={16} /></button>
+        <button><Trash2 size={16} /></button>
+      </div>
+    </TaskCard>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitários
+
+```tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { TaskCard } from "./TaskCard"
+
+describe("TaskCard", () => {
+  it("renders title and description", () => {
+    render(
+      <TaskCard
+        title="Minha Tarefa"
+        description="Descrição da tarefa"
+      />
+    )
+    expect(screen.getByText("Minha Tarefa")).toBeInTheDocument()
+    expect(screen.getByText("Descrição da tarefa")).toBeInTheDocument()
+  })
+
+  it("displays priority correctly", () => {
+    render(
+      <TaskCard title="Tarefa" priority="high" />
+    )
+    expect(screen.getByText(/high/i)).toBeInTheDocument()
+  })
+
+  it("shows assignee avatar", () => {
+    render(
+      <TaskCard
+        title="Tarefa"
+        assignee={{ name: "João", avatar: "avatar.jpg" }}
+      />
+    )
+    const avatar = screen.getByAltText(/João/i)
+    expect(avatar).toBeInTheDocument()
+  })
+
+  it("calls onClick handler", async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    render(
+      <TaskCard title="Tarefa" onClick={onClick} />
+    )
+
+    await user.click(screen.getByText("Tarefa"))
+    expect(onClick).toHaveBeenCalled()
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+### Prioridade Alta
+
+- [ ] Drag and drop para reordenar
+- [ ] Menu de contexto para ações
+- [ ] Inline editing de propriedades
+- [ ] Indicadores de progresso
+
+### Prioridade Média
+
+- [ ] Comentários inline
+- [ ] Subtarefas expansíveis
+- [ ] Attachments/files
+- [ ] Histórico de mudanças
+
+### Prioridade Baixa
+
+- [ ] Dependências entre tarefas
+- [ ] Estimativa de tempo
+- [ ] Timers de progresso
+- [ ] Notificações inline
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentação | GitHub |
+|---------------|--------------|--------|
+| **Shadcn/ui** | [Card](https://ui.shadcn.com/docs/components/card) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Chakra UI** | [Box](https://chakra-ui.com/docs/components/box) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **Trello** | [Card UI](https://trello.com) | Referência de mercado |
+
+### Especificações e Padrões
+
+- [WAI-ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - Card Component](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role)
+
+### Ferramentas Utilizadas
+
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/icons/)