feat(Paging): extract paging into standalone reusable component

src/components/Paging/Paging.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'
+import { useState } from 'react'
+import { Paging } from './Paging'
+
+const meta = {
+  title: 'Components/Paging',
+  component: Paging,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    pagingControls: {
+      control: 'select',
+      options: ['STANDARD', 'ROW_COUNT'],
+    },
+  },
+} satisfies Meta<typeof Paging>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Standard: Story = {
+  args: {
+    totalCount: 50,
+    pageSize: 10,
+    currentPage: 1,
+    pagingControls: 'STANDARD',
+    onPageChange: fn(),
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage)
+    return (
+      <Paging
+        {...args}
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+      />
+    )
+  },
+}
+
+export const RowCount: Story = {
+  args: {
+    totalCount: 50,
+    pageSize: 10,
+    currentPage: 1,
+    pagingControls: 'ROW_COUNT',
+    onPageChange: fn(),
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage)
+    return (
+      <Paging
+        {...args}
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+      />
+    )
+  },
+}
+
+export const TwoPages: Story = {
+  args: {
+    totalCount: 15,
+    pageSize: 10,
+    currentPage: 1,
+    pagingControls: 'ROW_COUNT',
+    onPageChange: fn(),
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(args.currentPage)
+    return (
+      <Paging
+        {...args}
+        currentPage={currentPage}
+        onPageChange={setCurrentPage}
+      />
+    )
+  },
+}

src/components/Paging/Paging.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
+
+export interface PagingProps {
+  /** Total number of items */
+  totalCount: number
+  /** Number of items per page */
+  pageSize: number
+  /** Current page number (1-based) */
+  currentPage: number
+  /** Callback when page changes */
+  onPageChange: (page: number) => void
+  /** Determines if the paging includes the total row count. "STANDARD" hides total count; "ROW_COUNT" shows total count and first/last controls. */
+  pagingControls?: 'STANDARD' | 'ROW_COUNT'
+  /** Whether the component is displayed */
+  showWhen?: boolean
+}
+
+export const Paging: React.FC<PagingProps> = ({
+  totalCount,
+  pageSize,
+  currentPage,
+  onPageChange,
+  pagingControls = 'STANDARD',
+  showWhen = true,
+}) => {
+  if (!showWhen) return null
+
+  const totalPages = Math.ceil(totalCount / pageSize)
+  if (totalPages <= 1) return null
+
+  const startIndex = (currentPage - 1) * pageSize + 1
+  const endIndex = Math.min(currentPage * pageSize, totalCount)
+  const hasPreviousPage = currentPage > 1
+  const hasNextPage = currentPage < totalPages
+
+  return (
+    <div className="flex items-center justify-end gap-2 px-3 py-2 text-sm text-gray-700">
+      {pagingControls === 'ROW_COUNT' && totalPages >= 3 && (
+        <button
+          onClick={() => onPageChange(1)}
+          disabled={!hasPreviousPage}
+          aria-label="First page"
+          title="First page"
+          className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
+        >
+          <ChevronsLeft size={18} />
+        </button>
+      )}
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={!hasPreviousPage}
+        aria-label="Previous page"
+        title="Previous page"
+        className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
+      >
+        <ChevronLeft size={18} />
+      </button>
+      {pagingControls === 'ROW_COUNT' ? (
+        <span>
+          <span className="font-bold">{startIndex} – {endIndex}</span>
+          {' '}of {totalCount}
+        </span>
+      ) : (
+        <span>
+          <span className="font-bold">{startIndex} – {endIndex}</span>
+          {' '}of many
+        </span>
+      )}
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={!hasNextPage}
+        aria-label="Next page"
+        title="Next page"
+        className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
+      >
+        <ChevronRight size={18} />
+      </button>
+      {pagingControls === 'ROW_COUNT' && totalPages >= 3 && (
+        <button
+          onClick={() => onPageChange(totalPages)}
+          disabled={!hasNextPage}
+          aria-label="Last page"
+          title="Last page"
+          className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
+        >
+          <ChevronsRight size={18} />
+        </button>
+      )}
+    </div>
+  )
+}

src/components/Paging/index.ts

@@ -0,0 +1,2 @@
+export { Paging } from './Paging'
+export type { PagingProps } from './Paging'

src/components/ReadOnlyGrid/ReadOnlyGrid.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoveUp, MoveDown } from "lucide-react";
+import { MoveUp, MoveDown } from "lucide-react";
+import { Paging } from "../Paging";
 import { isPaletteColor, resolveColorClass } from '../../utils/colorResolver'
 import { FieldWrapper } from "../shared/FieldWrapper";
 import { GridColumn, type GridColumnProps } from "./GridColumn";
@@ -283,8 +284,6 @@ export const ReadOnlyGrid: React.FC<ReadOnlyGridProps> = ({
   const totalPages = Math.ceil(sortedRows.length / pageSize);
   const startIndex = (currentPage - 1) * pageSize;
   const endIndex = Math.min(startIndex + pageSize, sortedRows.length);
-  const hasPreviousPage = currentPage > 1;
-  const hasNextPage = currentPage < totalPages;
 
   // Slice sorted data for current page
   const pageRows = sortedRows.slice(startIndex, endIndex);
@@ -503,61 +502,13 @@ export const ReadOnlyGrid: React.FC<ReadOnlyGridProps> = ({
           ) : (
             renderTable()
           )}
-          {totalPages > 1 && (
-            <div className="flex items-center justify-end gap-2 px-3 py-2 text-sm text-gray-700">
-              {pagingControls === "ROW_COUNT" && totalPages >= 3 && (
-                <button
-                  onClick={() => setCurrentPage(1)}
-                  disabled={!hasPreviousPage}
-                  aria-label="First page"
-                  title="First page"
-                  className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
-                >
-                  <ChevronsLeft size={18} />
-                </button>
-              )}
-              <button
-                onClick={() => setCurrentPage(p => p - 1)}
-                disabled={!hasPreviousPage}
-                aria-label="Previous page"
-                title="Previous page"
-                className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
-              >
-                <ChevronLeft size={18} />
-              </button>
-              {pagingControls === "ROW_COUNT" ? (
-                <span>
-                  <span className="font-bold">{startIndex + 1} – {endIndex}</span>
-                  {" "}of {sortedRows.length}
-                </span>
-              ) : (
-                <span>
-                  <span className="font-bold">{startIndex + 1} – {endIndex}</span>
-                  {" "}of many
-                </span>
-              )}
-              <button
-                onClick={() => setCurrentPage(p => p + 1)}
-                disabled={!hasNextPage}
-                aria-label="Next page"
-                title="Next page"
-                className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
-              >
-                <ChevronRight size={18} />
-              </button>
-              {pagingControls === "ROW_COUNT" && totalPages >= 3 && (
-                <button
-                  onClick={() => setCurrentPage(totalPages)}
-                  disabled={!hasNextPage}
-                  aria-label="Last page"
-                  title="Last page"
-                  className="px-1 py-1 disabled:text-gray-400 disabled:cursor-not-allowed text-blue-700 hover:text-blue-900 cursor-pointer"
-                >
-                  <ChevronsRight size={18} />
-                </button>
-              )}
-            </div>
-          )}
+          <Paging
+            totalCount={sortedRows.length}
+            pageSize={pageSize}
+            currentPage={currentPage}
+            pagingControls={pagingControls}
+            onPageChange={setCurrentPage}
+          />
         </>
       )}
     </FieldWrapper>

src/components/index.ts

@@ -70,6 +70,9 @@ export * from './SideNavAdmin'
 // ReadOnlyGrid components
 export * from './ReadOnlyGrid'
 
+// Paging components
+export * from './Paging'
+
 // SiteNav component
 export * from './SiteNav'