refactor(list): extract Pagination → @dar/ui and ListSkeleton → @dar/list (#428, #303)#532
Merged
Merged
Conversation
…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>
e3ebbce to
e660ab2
Compare
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.
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.tsxinto 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/uiPagination— the generic prev/next pager (page/totalPages/onChange, + optionalclassName). It has zero business knowledge, so per CLAUDE.md §7 its home is@dar/ui(next toTable), not@dar/list.@dar/listListSkeleton— 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 optionalrows/columnscounts; defaults match the prior inline layout.ListPageimports both back and drops the local definitions plus the now-unusedSkeletonimport.Why this split
Paginationis generic UI (→@dar/ui);ListSkeletonmirrors the list page's specific layout (→@dar/list, the home for list building blocks per #303). The@dar/listREADME note is updated to point generic primitives at@dar/uiso the boundary stays clear for the next extractions.Verification (matches CI gate #506)
pnpm -r typecheckclean ·pnpm lintclean (eslint--max-warnings 0+ stylelint + dark-mode coverage guard) ·pnpm -r buildok.pnpm test→ 132 passed (22 files), incl. newPagination(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