Skip to content

feat: add Pagination component - #23

Open
patrickkuei wants to merge 1 commit into
masterfrom
feat/pagination
Open

feat: add Pagination component#23
patrickkuei wants to merge 1 commit into
masterfrom
feat/pagination

Conversation

@patrickkuei

Copy link
Copy Markdown
Owner

Closes #11

Summary

  • Adds a Pagination component: a cyberpunk-styled page control for list/table views with more results than fit on one page, always controlled via currentPage/totalPages/onPageChange.
  • API decisions: compact (default true) collapses distant page numbers behind an ellipsis using a standard boundary/sibling-window algorithm (siblingCount/boundaryCount, both tunable), falling back to rendering every page when the total already fits — compact={false} forces the full list regardless of count. variant (primary/secondary/accent) reuses Button/Badge/Tooltip's existing palette vocabulary for the active-page highlight and hover glow rather than inventing new colors. Page/Previous/Next controls are plain native <button>s in normal tab order (not a roving-tabindex widget, since pagination isn't a single-selection group the way RadioGroup/Accordion are) with aria-current="page" on the active page; Home/End jump to the first/last page from anywhere inside the control as an added convenience.
  • No scope was deferred — the issue's full ask (controlled currentPage/totalPages/onPageChange, compact ellipsis mode for large page counts, prev/next controls, responsive size, neon active-page highlight with hover glow matching Button/Badge) is covered in this PR.

Changes

  • Added Pagination (src/components/Pagination.tsx) — currentPage, totalPages, onPageChange, compact, siblingCount, boundaryCount, showPrevNext, variant, responsive size, disabled, ariaLabel, className.
  • Added a pagination entry to RESPONSIVE_SIZE_MAPS in src/utils/responsive.ts.
  • Exported Pagination/PaginationProps from src/components/index.ts.
  • Stories (Pagination.stories.tsx): Default (controlled demo), Secondary, Accent, Sizes, Disabled, CompactCollapsing (200-page archive), ExpandedMode (compact={false}), NoPrevNext, Controlled, and an AllVariants render story (cyberpunk copy throughout, e.g. "Loading archive shard 3 of 30…").
  • Tests (Pagination.test.tsx, 17 cases): renders without crashing, full page list for small totals, aria-current="page" wiring, page-click onPageChange, no-op click on the already-current page, controlled behavior (state only changes when the prop does), Previous/Next click advancing/retreating, Previous/Next disabled at the boundaries, showPrevNext={false} omits the controls, ellipsis collapsing for large totals, full list with compact={false}, custom siblingCount/boundaryCount, Home/End keyboard jumps, disabled state blocks every control, renders nothing for totalPages < 1, custom ariaLabel/className, responsive size.
  • Wired Pagination into scripts/generate-manifest.js (CATEGORY_MAP → Navigation, alongside DropdownMenu; DOC_SUMMARIES) and regenerated docs via npm run docs:generate — diff reviewed, only Pagination-related lines changed.
  • Added a CHANGELOG entry under [Unreleased].

Test plan

  • npm run lint / type-check / test -- --project=unit all pass (312 tests, including 17 new for Pagination)
  • Storybook: Default + variants + sizes + disabled + AllVariants render correctly
  • Keyboard nav + screen reader smoke test

Generated by Claude Code

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.

New component: Pagination

2 participants