feat: búsqueda de artículos en tiempo real (issue #7)#12
Open
claude[bot] wants to merge 5 commits into
Open
Conversation
Add a controlled `<input aria-label="Buscar artículos">` on the homepage
that filters the post grid by title or excerpt as the user types.
Filtering is case-insensitive and diacritic-insensitive (NFD + combining
mark strip). When nothing matches, render "No se encontraron artículos"
in place of the grid.
- specs/article-search/{spec,plan,tasks}.md — SDD docs following the
existing project convention.
- app/_components/SearchablePostList.tsx — new client component with
useState + useMemo and the normalize() helper.
- app/page.tsx — drop the hardcoded `slice(0,3)`, pass full posts list
into SearchablePostList so the search has all entries to filter over.
- e2e/article-search.spec.ts — Playwright golden path (filter, empty
state, clear) + accent-insensitive search assertion.
- playwright.config.ts — supply placeholder Supabase env to the dev
server so the homepage renders without the Next.js dev-mode error
overlay when env secrets are absent.
- vitest.config.ts — exclude e2e/ from Vitest collection so Playwright
specs don't get picked up as unit tests.
- .gitignore — ignore Playwright local artifacts (e2e/.results,
e2e/.report, playwright-report).
Closes #7
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Añade un campo de búsqueda sobre la lista de artículos en `/` que filtra en tiempo real por título y excerpt, con normalización de acentos y mayúsculas. Incluye spec SDD, tests e2e Playwright, y correcciones de bugs preexistentes (lint, test unitario DELETE 404, Supabase sin credenciales). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ctualizada Mantiene ArticleSearch.tsx y correcciones de Supabase nulo. Incorpora .gitignore y playwright.config.ts con env vars de placeholder. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a client-side search input on the home page (/) that filters articles by title and excerpt as the user types, with accent-insensitive comparison. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tion Combines useMemo-based filtering, Unicode diacritic normalization, Search icon, and type="search" input from both branches. Updates e2e specs to use searchbox role. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Author
Reporte de implementación — Issue #7Spec SDD creadoNuevo directorio
Feature implementado
Specs E2E añadidos
Limitaciones y supuestos
|
Reporte de tests (generado por el workflow)✅ E2E en verde
Resultado producido por un step determinístico del workflow corriendo |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resumen
Implementa la búsqueda de artículos en tiempo real en la página principal (
/) descrita en el issue #7.Cambios
Spec SDD
specs/real-time-article-search/— spec.md, plan.md y tasks.md nuevos con la metodología SDD completa para este feature.Implementación
app/_components/ArticleSearch.tsx— componente cliente nuevo con:useStatepara el valor del inputuseMemopara el filtrado eficienteString.normalize("NFD")+/\p{Diacritic}/gutype="search"conaria-label="Buscar artículos"e icono de lupaapp/page.tsx— modificado para pasar todos los posts a<ArticleSearch posts={posts} />(mantiene Server Component)vitest.config.ts— exclude dee2e/**para que Vitest no recoja los specs de PlaywrightTests E2E
e2e/article-search.spec.ts— 5 specs que ejercitan el golden path:Supuestos
app/lib/api.ts.Closes #7