Componentes UI

Inventario de componentes reutilizables del proyecto.

Button

apps/web/components/ui/Button.tsx

Botón polimórfico con variantes visuales y tamaños.

Prop	Tipo	Default	Descripción
variant	"primary" | "secondary" | "ghost" | "danger" | "dashed"	"primary"	Estilo visual
size	"sm" | "md" | "lg"	"md"	Tamaño
icon	ReactNode	—	Icono opcional al inicio
(heredadas)	ComponentProps<"button">	—	Props nativas de <button>

<Button size="lg">{t("hero.cta")}</Button>
<Button variant="secondary" size="lg">{t("hero.demo")}</Button>
<Button variant="secondary" icon={<GoogleIcon />}>Sign in with Google</Button>
<Button variant="danger" size="sm">Eliminar</Button>
<Button variant="dashed" icon={<Plus size={18} />}>Añadir columna</Button>

Badge

apps/web/components/ui/Badge.tsx

Etiqueta de estado para el roadmap.

Prop	Tipo	Descripción
variant	"planned" | "building" | "ready"	Estado
label	string	Texto a mostrar

<Badge variant="building" label="Building" />

Card

apps/web/components/ui/Card.tsx

Contenedor tipo tarjeta con borde gradient interactivo.

Prop	Tipo	Default	Descripción
children	ReactNode	—	Contenido
className	string	—	Clases adicionales
hover	boolean	false	Activa borde glow al hover

<Card hover className="flex flex-col h-full">
  <h3>Título</h3>
  <p>Descripción</p>
</Card>

Header

apps/web/components/layout/Header.tsx

Barra de navegación superior fija. Incluye logo, links, locale switcher y menú hamburguesa en mobile.

Prop	Tipo	Default	Descripción
variant	"home" | "auth"	"home"	Variante: landing o dashboard

<Header variant="home" />
<Header variant="auth" />

Footer

apps/web/components/layout/Footer.tsx

Footer simple con copyright, contacto y GitHub. Sin props.

<Footer />

ThemeProvider

apps/web/components/ThemeProvider.tsx

Provider de contexto para el tema oscuro/claro. Persiste en localStorage y detecta prefers-color-scheme.

<ThemeProvider>{children}</ThemeProvider>

ThemeToggle

apps/web/components/ThemeToggle.tsx

Botón que alterna entre tema oscuro y claro con iconos de sol/luna animados.

<ThemeToggle />

KanbanBoard

apps/web/components/kanban/KanbanBoard.tsx

Componente principal del tablero Kanban. Orquesta el estado, el drag & drop con @dnd-kit, y las server actions.

Prop	Tipo	Descripción
params	Promise<{ workspaceId: string }>	Parámetros de ruta del workspace

<KanbanBoard params={params} />

KanbanColumn

apps/web/components/kanban/KanbanColumn.tsx

Columna del tablero Kanban con soporte de droppable, nombre editable, selector de color, ordenación y contador de tareas.

Prop	Tipo	Descripción
id	string	ID de la columna
name	string	Nombre visible
color	string | null	Color de fondo del header
tasks	TaskData[]	Array de tareas
members	Member[]	Miembros del workspace
sortBy / sortDir	—	Ordenación actual
onSortChange	(columnId, field, dir) => void	Cambiar ordenación
onEdit	(taskId) => void	Abrir edición de tarea
onMoveToBacklog	(taskId) => void	Mover tarea al backlog

<KanbanColumn
  id={column.id}
  name={column.name}
  color={column.color}
  tasks={column.tasks}
  onNameChange={handleColumnNameChange}
  onDeleteColumn={handleDeleteColumn}
/>

TaskCard

apps/web/components/kanban/TaskCard.tsx

Card de tarea arrastrable con prioridad, asignaciones, descripción markdown y acciones.

Prop	Tipo	Descripción
id	string	ID de la tarea
title	string	Título
description	string | null	Descripción (markdown) expandible
priority	"LOW" | "MEDIUM" | "HIGH" | "URGENT"	Prioridad
creatorName	string | null	Creador de la tarea
createdAt	Date | string | null	Fecha de creación
assigneeNames	string[]	Nombres de asignados
assigneeIds	string[] (opcional)	IDs de asignados
members	Member[] (opcional)	Miembros del workspace
workspaceId	string (opcional)	Para server actions
isOverlay	boolean	Modo copia visual (DragOverlay)
showDescriptions	boolean	Mostrar/ocultar descripción
density	"compact" | "normal" | "roomy"	Densidad de la tarjeta
fontSize	"compact" | "normal" | "large" | "extraLarge"	Tamaño de letra
onEdit	(taskId) => void	Abrir edición
onMoveToBacklog	(taskId) => void	Mover al backlog

<TaskCard
  id={task.id}
  title={task.title}
  description={task.description}
  priority={task.priority}
  creatorName={task.creator.name}
  assigneeNames={task.assignees.map((a) => a.user.name)}
  onEdit={handleEdit}
  onMoveToBacklog={handleMoveToBacklog}
/>

KanbanToolbar

apps/web/components/kanban/KanbanToolbar.tsx

Barra de filtros y controles de vista del tablero. Sin estado propio: todo llega por props.

Prop	Tipo	Descripción
searchQuery / onSearchChange	string / (v) => void	Búsqueda por título y descripción
priorityFilter / onPriorityFilterChange	Set<Priority> / fn	Filtro de prioridades
assigneeFilter / onAssigneeFilterChange	Set<string> / fn	Filtro de asignados
members	Member[]	Miembros para el filtro
hasActiveFilters / onClearFilters	boolean / fn	Botón limpiar filtros
columnWidth / onColumnWidthChange	ColumnWidth / fn	Ancho de columna
cardDensity / onCardDensityChange	CardDensity / fn	Densidad
cardFontSize / onCardFontSizeChange	CardFontSize / fn	Tamaño de letra
showDescriptions / onShowDescriptionsChange	boolean / fn	Mostrar descripciones
fillWidth / onFillWidthChange	boolean / fn	Columnas a todo el ancho

Los dropdowns usan createPortal con posicionamiento fixed. Incluye el componente interno ViewSelect.

<KanbanToolbar
  searchQuery={searchQuery}
  onSearchChange={setSearchQuery}
  priorityFilter={priorityFilter}
  onPriorityFilterChange={setPriorityFilter}
  members={members}
  ...
/>

KanbanSkeleton

apps/web/components/kanban/KanbanSkeleton.tsx

Skeleton de carga del tablero. Sin props.

<KanbanSkeleton />

TaskActivityDialog

apps/web/components/kanban/TaskActivityDialog.tsx

Modal con el historial de actividad de una tarea.

Prop	Tipo	Descripción
taskId	string	Tarea cuyo historial se consulta
taskTitle	string	Título (cabecera)
workspaceId	string	Para getTaskActivityAction
onClose	() => void	Cerrar modal

<TaskActivityDialog
  taskId={task.id}
  taskTitle={task.title}
  workspaceId={workspaceId}
  onClose={close}
/>

AddBacklogTaskDialog

apps/web/components/kanban/AddBacklogTaskDialog.tsx

Modal para añadir tareas del backlog a una columna.

Prop	Tipo	Descripción
workspaceId	string	Para server actions
columnId	string	Columna destino
columnName	string	Nombre de la columna (contexto)
onClose	() => void	Cerrar
onAdded	() => void	Refrescar tablero

TaskFormDialog

apps/web/components/tasks/TaskFormDialog.tsx

Modal de crear/editar tareas (sustituye al antiguo CreateTaskDialog).

Prop	Tipo	Descripción
mode	"create" | "edit"	Modo del modal
workspaceId	string	Para server action
columnId	string (create)	Columna destino
task	Task (edit)	Tarea a editar
members	Member[]	Miembros para asignación
onClose	() => void	Cerrar
onSaved	() => void	Refrescar tras guardar

Campos: título, descripción (markdown), prioridad, asignado, fecha inicio, fecha límite y horas estimadas.

<TaskFormDialog
  mode="create"
  workspaceId={workspaceId}
  columnId={column.id}
  members={members}
  onClose={() => setShow(false)}
  onSaved={fetchBoard}
/>

ConfirmDialog

apps/web/components/kanban/ConfirmDialog.tsx

Modal de confirmación reutilizable con variante destructiva.

Prop	Tipo	Default	Descripción
title	string	—	Título
message	string	—	Mensaje
confirmLabel	string	"Eliminar"	Texto del botón
destructive	boolean	true	Estilo rojo
onConfirm	() => void	—	Acción al confirmar
onCancel	() => void	—	Acción al cancelar

<ConfirmDialog
  title="¿Eliminar columna?"
  message="Esta columna tiene 3 tareas"
  onConfirm={handleDelete}
  onCancel={() => setShow(false)}
/>

Sidebar

apps/web/components/layout/Sidebar.tsx

Barra lateral de navegación del workspace. Colapsable en desktop y overlay en mobile.

Característica	Descripción
Colapsable	Botón para colapsar/expandir con animación
Indicador activo	Ruta actual resaltada
Mobile	Overlay con hamburger button y backdrop
Iconos	lucide-react para cada sección

<Sidebar />

TopBar

apps/web/components/layout/TopBar.tsx

Barra superior con breadcrumbs y menú de usuario.

<TopBar />

Breadcrumbs

apps/web/components/layout/Breadcrumbs.tsx

Navegación jerárquica que muestra la ruta actual.

<Breadcrumbs />

WorkspacePlaceholder

apps/web/components/layout/WorkspacePlaceholder.tsx

Placeholder para páginas del workspace que están en construcción.

<WorkspacePlaceholder />

WelcomeBanner

apps/web/components/dashboard/WelcomeBanner.tsx

Sección hero del dashboard con saludo personalizado y badge de estado.

Prop	Tipo	Descripción
userName	string (opcional)	Nombre del usuario autenticado

<WelcomeBanner userName={session?.user?.name} />

RoadmapSection

apps/web/components/dashboard/RoadmapSection.tsx

Grid de features planificadas del proyecto. Sin props. Usa internamente RoadmapCard y Badge.

<RoadmapSection />

RoadmapCard

apps/web/components/dashboard/RoadmapCard.tsx

Tarjeta individual del roadmap con icono, título, descripción y badge de estado.

<RoadmapCard icon={...} title="..." description="..." status="building" />

Otros componentes UI

DropdownSelect (components/ui/DropdownSelect.tsx)

Select desplegable con portal y posicionamiento fixed.

Prop	Tipo	Descripción
value	string	Valor actual
onChange	(value: string) => void	Cambio de valor
options	{ value; label; hint? }[]	Opciones
placeholder / title	string	Placeholder y tooltip
width	number	Ancho del menú

AvatarStack (components/ui/AvatarStack.tsx)

Pila de avatares superpuestos para mostrar asignados. Recibe una lista de { name, image }.

Markdown (components/markdown/)

• MarkdownEditor — editor con barra de herramientas, vista previa y atajos (negrita, cursiva, listas, tablas, código)
• MarkdownView — render de descripciones con react-markdown + remark-gfm + rehype-raw
• MarkdownHelpModal — modal con la sintaxis markdown soportada

Skeleton / Spinner / SubmitButton (components/ui/)

• Skeleton — bloque de carga con shimmer (clases animate-pulse)
• Spinner — loader circular reutilizable
• SubmitButton — botón de formulario con estado de envío (loading deshabilita y muestra spinner)

Layout: UserControls, UserMenu, LanguageSwitcher

• UserControls — controles superiores unificados de la TopBar (tema + idioma + usuario)
• UserMenu — dropdown del usuario (perfil, ajustes, cerrar sesión)
• LanguageSwitcher — selector es/en

Dashboard (components/dashboard/)

• HomeSkeleton — skeleton de carga del home
• UserGreeting — saludo con el nombre del usuario
• WorkspaceStats — tarjetas de estadísticas (miembros, boards, tareas tablero/backlog)
• WorkspaceTips — consejos de uso
• QuickAccess — accesos rápidos a secciones

Calendario (components/calendar/)

• CalendarGrid — grid mensual del equipo (heatmap de prioridad, chips de tareas, horas por día)
• DayDetail — detalle de un día: tareas programadas + horas imputadas + métricas
• MyTimeView — vista personal: formulario de imputación, semana y resumen

Equipos (components/workspace/MemberList.tsx)

Lista de miembros con avatar, email, estadísticas (tasksCreated/tasksAssigned), selector de rol (RoleBadgeSelect) y acción de eliminar. Ver la sección Teams en Workspace Layout.

Perfil (components/profile/ProfileEditForm.tsx)

Formulario de edición de perfil (nombre, bio, teléfono). Usa editProfileAction.