UI Design System: shadcn/ui + Tailwind 4 + layout shell #2

dmolinari · 2026-04-14T14:45:01Z

dmolinari commented

2026-04-14 14:45:01 +00:00

Resumen

Infraestructura transversal de frontend. Sistema de diseño moderno para que todas las UDTs futuras tengan componentes consistentes y estéticos.

Alcance

shadcn/ui init + 13 componentes base

Instalados en src/web/src/components/ui/: button, input, label, card, form (react-hook-form + zod), alert, badge, avatar, separator, skeleton, sheet, dropdown-menu, navigation-menu.

Fonts self-hosted

@fontsource/inter (UI) + @fontsource/jetbrains-mono (código) — evita depender de Google CDN en prod.

Design tokens

CSS variables de shadcn (base color neutral) + @theme inline de Tailwind 4 para exponer como utilidades. Dark/light mode persistido en localStorage.

Layout shell (`src/web/src/components/layout/`)

AppSidebar — NavigationMenu con módulos del sistema (Dashboard habilitado, Ventas/Tasación/Integraciones/Administración con badge "Próximamente"), Sheet en mobile
AppHeader — hamburger mobile + ThemeToggle + Avatar con DropdownMenu (placeholder logout — funcional llega con UDT-002)
ThemeToggle — Sun/Moon toggle
useTheme hook persist en localStorage

Refactor

ProtectedLayout — grid con Sidebar + Header
PublicLayout — centrado con bg-muted/40
HomePage — grid responsivo de Cards con iconos lucide-react
LoginPage + LoginForm — Card + shadcn Form + zod + Alert destructive

Tests

11/11 Vitest verdes (selectores ajustados, assertions lógicos intactos)
Build npm run build exit 0, TS strict clean

Convención guardada

sig-cm2/conventions/ui-system en engram — documenta shadcn elegido, componentes instalados, cómo agregar nuevos, ubicaciones, reglas (iconos lucide-react only, forms con zod+react-hook-form, no Material UI/Mantine/etc.).

Out of scope

Logout funcional (UDT-002)
Dashboard con data real (UDTs posteriores)
i18n, Storybook

Test plan

cd src/web && npm run build → exit 0
cd src/web && npm test -- --run → 11/11
npx tsc --noEmit → sin errores
Smoke visual: login estilado, dashboard con sidebar + header + grid de módulos, theme toggle funcional, responsive

## Resumen Infraestructura transversal de frontend. Sistema de diseño moderno para que todas las UDTs futuras tengan componentes consistentes y estéticos. ## Alcance ### shadcn/ui init + 13 componentes base Instalados en `src/web/src/components/ui/`: `button`, `input`, `label`, `card`, `form` (react-hook-form + zod), `alert`, `badge`, `avatar`, `separator`, `skeleton`, `sheet`, `dropdown-menu`, `navigation-menu`. ### Fonts self-hosted `@fontsource/inter` (UI) + `@fontsource/jetbrains-mono` (código) — evita depender de Google CDN en prod. ### Design tokens CSS variables de shadcn (base color `neutral`) + `@theme inline` de Tailwind 4 para exponer como utilidades. Dark/light mode persistido en localStorage. ### Layout shell (`src/web/src/components/layout/`) - `AppSidebar` — NavigationMenu con módulos del sistema (Dashboard habilitado, Ventas/Tasación/Integraciones/Administración con badge "Próximamente"), `Sheet` en mobile - `AppHeader` — hamburger mobile + `ThemeToggle` + `Avatar` con `DropdownMenu` (placeholder logout — funcional llega con UDT-002) - `ThemeToggle` — Sun/Moon toggle - `useTheme` hook persist en localStorage ### Refactor - `ProtectedLayout` — grid con Sidebar + Header - `PublicLayout` — centrado con `bg-muted/40` - `HomePage` — grid responsivo de Cards con iconos `lucide-react` - `LoginPage` + `LoginForm` — `Card` + shadcn `Form` + zod + `Alert` destructive ### Tests - 11/11 Vitest verdes (selectores ajustados, assertions lógicos intactos) - Build `npm run build` exit 0, TS strict clean ## Convención guardada `sig-cm2/conventions/ui-system` en engram — documenta shadcn elegido, componentes instalados, cómo agregar nuevos, ubicaciones, reglas (iconos lucide-react only, forms con zod+react-hook-form, no Material UI/Mantine/etc.). ## Out of scope - Logout funcional (UDT-002) - Dashboard con data real (UDTs posteriores) - i18n, Storybook ## Test plan - [x] `cd src/web && npm run build` → exit 0 - [x] `cd src/web && npm test -- --run` → 11/11 - [x] `npx tsc --noEmit` → sin errores - [x] Smoke visual: login estilado, dashboard con sidebar + header + grid de módulos, theme toggle funcional, responsive

dmolinari added 3 commits 2026-04-14 14:45:01 +00:00

feat(ui): shadcn/ui setup con componentes base, fonts y design tokens 8acd2975ba

feat(ui): app shell con Sidebar, Header, ThemeToggle y HomePage grid de modulos 7eea0fd17c

refactor(web): LoginPage con shadcn Form, zod validation y Alert destructive 5e1e979377

dmolinari merged commit cc532ff319 into main

2026-04-14 14:45:08 +00:00

dmolinari referenced this issue from a commit

2026-04-14 14:45:09 +00:00

Merge pull request 'UI Design System: shadcn/ui + Tailwind 4 + layout shell' (#2) from feature/UI-DESIGN-SYSTEM into main

Sign in to join this conversation.