diff --git a/.gitignore b/.gitignore index 5ef6a52..b1b85e0 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +.playwright-mcp/* diff --git a/AGENTS.md b/AGENTS.md index af3b7c8..2129ca7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -7,3 +7,8 @@ This version has breaking changes — APIs, conventions, and file structure may This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean. + +## MCPs + +- Playwright Scheenshots y cualquier cosa relacionada a Playwright tiene que estar en la carpeta .playwright-mcp. +- Context7 Usaremos este MCP para traer la documentación actualizada del framework. diff --git a/app/layout.tsx b/app/layout.tsx index 9852c15..2532a7f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,27 +1,27 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Fredoka, Nunito } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const fredoka = Fredoka({ + variable: "--font-fredoka", subsets: ["latin"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const nunito = Nunito({ + variable: "--font-nunito", subsets: ["latin"], }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "OpenDayCare", + description: "Feed de la guardería OpenDayCare · Sala Soles", }; export default function RootLayout({ children }: LayoutProps<"/">) { return ( {children} diff --git a/specs/.spec-config.yml b/specs/.spec-config.yml new file mode 100644 index 0000000..6878570 --- /dev/null +++ b/specs/.spec-config.yml @@ -0,0 +1,6 @@ +# spec workflow configuration +# +# AutoCreateBranch — controls whether /spec-impl creates the git branch automatically. +# true (default) → /spec-impl creates and switches to spec-NN-slug without asking +# false → /spec-impl asks for [y/N] confirmation before creating the branch +AutoCreateBranch: true diff --git a/specs/01-feed-home.md b/specs/01-feed-home.md new file mode 100644 index 0000000..4b3ab58 --- /dev/null +++ b/specs/01-feed-home.md @@ -0,0 +1,98 @@ +# SPEC 01 — Home: feed de la guardería (plantilla feed.dc.html) + +> **Estado:** Aprobada +> **Depende de:** — +> **Fecha:** 2026-10-19 +> **Objetivo:** Implementar la plantilla `references/pantallas/feed.dc.html` como página home (`/`) en Next.js, visualmente idéntica al original, sin autenticación ni base de datos. + +## Alcance + +**In:** + +- Página `/` (`app/page.tsx`) con: sidebar fijo de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio). +- Datos mock tipados en `app/data/feed.ts` con los 3 posts exactos de la plantilla. +- Componentes en `app/components/`: `Sidebar.tsx`, `FeedHeader.tsx`, `ShareBox.tsx`, `PostCard.tsx`. +- Cambio de fuentes en `app/layout.tsx` (Fredoka + Nunito vía `next/font/google`), `lang="es"` y metadata "OpenDayCare". +- Estilos base en `app/globals.css` (fondo #F6ECDF, texto #3F362E, scrollbar custom, tema claro fijo). +- Todos los links como `` a rutas futuras (`/crear-publicacion`, `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion`, `/login`). + +**Out of scope (para specs futuras):** + +- Las páginas destino del nav y sus funcionalidades (hoy darán 404 y está bien). +- Autenticación y logout funcional. +- Base de datos y persistencia. +- Interactividad real de likes, comentarios y editar (solo visual, contadores fijos). +- Responsive móvil. +- Dark mode. +- Foto real en el post de actividad (se mantiene el placeholder dashed de la plantilla). + +## Modelo de datos + +```ts +// app/data/feed.ts +export type PostCategory = "logro" | "actividad" | "anuncio"; + +export interface Post { + id: string; + authorName: string; // "Mateo" | "Anuncio general" + authorInitial: string; // "M" (solo posts de niño) + authorColors: { bg: string; text: string }; // p.ej. { bg: "#A9D9E8", text: "#1F7A93" } + timeLabel: string; // "14:20" + publishedBy: string; // "publicado por vos" + category: PostCategory; // define badge y colores vía mapa en PostCard + audience: string; // "familia de Mateo" | "toda la sala" + body: string; + photoLabel?: string; // "pintando con témperas" → placeholder dashed + likes: number; + comments: number; +} + +export const posts: Post[] = [ + // Los 3 posts de la plantilla: logro (3/1), actividad con foto (5/2), anuncio (8/0) +]; +``` + +Convenciones: los colores van como hex exactos de la plantilla; el mapa `category → colores del badge` vive en `PostCard.tsx`. + +## Plan de implementación + +1. **Fuentes y layout** — `app/layout.tsx`: reemplazar Geist por Fredoka y Nunito como fuentes variables con `next/font/google` (variables `--font-fredoka` / `--font-nunito`), `lang="es"`, title "OpenDayCare". Test manual: `npm run dev` sigue compilando. +2. **Estilos globales** — `app/globals.css`: body con `background:#F6ECDF`, `color:#3F362E`, `font-family: var(--font-nunito), system-ui, sans-serif`; scrollbar custom (thumb `#E4D6C4`); eliminar el bloque `prefers-color-scheme` y las variables Geist. Test manual: la app ya se ve crema. +3. **Mock del feed** — crear `app/data/feed.ts` con el tipo `Post` y los 3 posts de la plantilla. +4. **Sidebar** — crear `app/components/Sidebar.tsx` con logo, botón "Nueva publicación" (→ `/crear-publicacion`), nav (Feed activo, Niños, Avisos, Mi cuenta) y usuario + logout (→ `/login`). +5. **Componentes del feed** — crear `FeedHeader.tsx`, `ShareBox.tsx` y `PostCard.tsx` con utilities Tailwind de valores exactos. +6. **Página home** — reemplazar `app/page.tsx`: flex con Sidebar + `
` de scroll propio, contenido centrado `max-width:760px`, mapeando `posts`. Test manual: `http://localhost:3000` muestra el feed completo. +7. **Fidelidad visual** — comparación lado a lado con `references/pantallas/feed.dc.html` a ancho ≥1280px; ajustar diferencias. Captura de verificación en `.playwright-mcp/`. + +## Criterios de aceptación + +- [ ] `npm run dev` levanta sin errores y `/` muestra el feed completo: sidebar + saludo + caja + separador + 3 posts. +- [ ] `npm run build` completa sin errores. +- [ ] A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px. +- [ ] Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto. +- [ ] Post 1: badge LOGRO (fondo `#CFEBD8`, texto `#3E9B6C`), ♥ 3, 💬 1, link "Editar". +- [ ] Post 2: badge ACTIVIDAD (fondo `#C7E7F1`, texto `#2E89A6`), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2. +- [ ] Post 3: avatar megáfono (fondo `#CCD8F4`), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0. +- [ ] Todos los links navegan con ``: `/crear-publicacion` (botón, caja y Editar), `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion` (íconos de comentarios), `/login` (logout). +- [ ] Colores base exactos: fondo `#F6ECDF`, tarjetas `#FFFDF9` con borde `#ECE0D0`, sombras y radios según plantilla. +- [ ] Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode). +- [ ] Los componentes nuevos no usan atributos `style`; todo está en utilities Tailwind con valores arbitrarios exactos. + +## Decisiones + +- **Sí:** Tailwind 4 con valores arbitrarios exactos (`bg-[#F6ECDF]`, `shadow-[0_4px_16px_-12px_rgba(120,90,60,.5)]`…) — consistente con el proyecto y pixel-perfect. +- **No:** estilos inline literales ni CSS Modules — divergen de la convención del repo. +- **Sí:** componentes separados en `app/components/` — el sidebar se reutiliza en Niños, Avisos y Mi cuenta. +- **Sí:** mock tipado en `app/data/feed.ts` — deja el terreno listo para la BD futura. +- **Sí:** `` a rutas futuras aunque hoy den 404 — la navegación queda cableada desde el día uno. +- **Sí:** solo desktop, réplica exacta — el móvil merece decisiones de diseño propias (otra spec). +- **Sí:** `next/font/google` para Fredoka y Nunito como fuentes variables — misma familia y pesos que el `` de la plantilla, self-hosted y sin FOUT. +- **Sí:** tema claro fijo, eliminando el dark mode automático de `globals.css` — la plantilla no define modo oscuro. +- **No:** autenticación, BD, likes/comentarios/editar funcionales ni foto real — excluidos explícitamente por el usuario. + +## Qué **no** está en esta spec + +- Otras páginas (Niños, Avisos, Mi cuenta, crear/editar publicación, detalle, login) — cada una irá en su propia spec. +- Autenticación y base de datos. +- Likes, comentarios y edición funcionales. +- Responsive móvil y dark mode.