Pagination

SSR-only pagination for listing pages (e.g. /products/) — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.

Navigation

First page

Middle page (both-side ellipsis)

Last page

Single page (renders null)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the NEW-tree (src/) SSR Pagination — new coverage (epic #1647, wave 6 / #1660). // // TWIN NOTE: `components/list/pagination.tsx` (old tree, also newly storied this batch) // is a near-identical presentational port with the same page-number/ellipsis math, but // its page-1 URL omits the trailing slash (`basePath`) while this one appends one // (`${basePath}/`) — a real behavioral difference, not just an export-style diff — so // both get their own story. Both twins share the `Navigation` category (#2082 // recategorization) — an identical `meta.title` across categories is fine // since each renders on its own detail-page slug; no collision. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import Pagination from './pagination'; const meta: StoryMeta = { title: 'Pagination', category: 'Navigation', description: 'SSR-only pagination for listing pages (e.g. /products/) — plain <a> links with page-number math, ellipsis collapsing, and prev/next labels.', usage: `import Pagination from '@/src/components/shared/pagination';\n\n<Pagination currentPage={1} totalPages={12} basePath="/products" />`, }; export default meta; export const FirstPage = defineStory({ name: 'First page', render: () => <Pagination currentPage={1} totalPages={12} basePath="/products" />, }); export const MiddlePageWithEllipsis = defineStory({ name: 'Middle page (both-side ellipsis)', render: () => <Pagination currentPage={6} totalPages={12} basePath="/products" />, }); export const LastPage = defineStory({ name: 'Last page', render: () => <Pagination currentPage={12} totalPages={12} basePath="/products" />, }); export const SinglePage = defineStory({ name: 'Single page (renders null)', render: () => <Pagination currentPage={1} totalPages={1} basePath="/products" />, });