Skip to content

refactor(list): extract Pagination → @dar/ui and ListSkeleton → @dar/list (#428, #303)#532

Merged
MartinCastroAlvarez merged 1 commit into
mainfrom
refactor/extract-list-chrome-428
May 28, 2026
Merged

refactor(list): extract Pagination → @dar/ui and ListSkeleton → @dar/list (#428, #303)#532
MartinCastroAlvarez merged 1 commit into
mainfrom
refactor/extract-list-chrome-428

Conversation

@MartinCastroAlvarez
Copy link
Copy Markdown
Owner

Summary

Continues the ListPage god-component decomposition (#428) and the package-boundary realization (#303) by extracting two self-contained, business-free chunks out of apps/web/src/pages/ListPage.tsx into their proper packages — so each is individually unit-tested and reusable, and the page becomes a thinner composition layer. No behaviour change.

Tier 4 (frontend only, no backend/contract/security surface).

What

  • @dar/ui Pagination — the generic prev/next pager (page / totalPages / onChange, + optional className). It has zero business knowledge, so per CLAUDE.md §7 its home is @dar/ui (next to Table), not @dar/list.
  • @dar/list ListSkeleton — the list page's first-paint placeholder (title + count, toolbar row, then a card of rows), shown before the real columns are known. Now accepts optional rows / columns counts; defaults match the prior inline layout.
  • ListPage imports both back and drops the local definitions plus the now-unused Skeleton import.

Why this split

Pagination is generic UI (→ @dar/ui); ListSkeleton mirrors the list page's specific layout (→ @dar/list, the home for list building blocks per #303). The @dar/list README note is updated to point generic primitives at @dar/ui so the boundary stays clear for the next extractions.

Verification (matches CI gate #506)

  • pnpm -r typecheck clean · pnpm lint clean (eslint --max-warnings 0 + stylelint + dark-mode coverage guard) · pnpm -r build ok.
  • pnpm test132 passed (22 files), incl. new Pagination (5) + ListSkeleton (3) suites.

Role / autonomy

Author / Architect. Tier 4 → agent-mergeable per autonomy-policy.md. Advances #428 and #303 (both trackers — not closed by this PR).

🤖 Generated with Claude Code

…list (#428, #303)

Shrinks the ListPage god-component (#428) by moving two self-contained,
business-free chunks into their proper packages (#303), so each is
individually unit-tested and reusable and the page is a thinner
composition layer.

- @dar/ui `Pagination` — generic prev/next pager (page/totalPages/onChange
  + optional className). Lives in @dar/ui per CLAUDE.md §7 (generic, no
  business knowledge), alongside `Table`.
- @dar/list `ListSkeleton` — the list page's first-paint placeholder
  (title + count, toolbar, card of rows). Now takes optional `rows` /
  `columns` counts; defaults match the prior inline layout.
- ListPage imports both back; drops the local definitions and the now-
  unused `Skeleton` import. No behaviour change.

Tests: @dar/ui Pagination (5: page display, edge-disable both ends, click
→ neighbour, no-op on disabled edge) + @dar/list ListSkeleton (3: busy +
status role, shimmer present, honours row/column counts). Full vitest 132
passed; typecheck + eslint + stylelint + dark-mode guard clean; build ok.

Advances #428 and #303.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@MartinCastroAlvarez MartinCastroAlvarez force-pushed the refactor/extract-list-chrome-428 branch from e3ebbce to e660ab2 Compare May 28, 2026 00:16
@MartinCastroAlvarez MartinCastroAlvarez merged commit 139a241 into main May 28, 2026
5 checks passed
@MartinCastroAlvarez MartinCastroAlvarez deleted the refactor/extract-list-chrome-428 branch May 28, 2026 00:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants