@boxcustodia/library 2.0.0-alpha.22 → 2.0.0-alpha.24

package/src/hooks/use-pagination/use-pagination.stories.tsx

@@ -1,14 +1,8 @@
-import { Meta } from "@storybook/react-vite";
+import type { Meta } from "@storybook/react-vite";
 import { useState } from "react";
-import { action } from "storybook/actions";
-import { Button } from "../../components";
+import { Button, type ColumnDef, Pagination, Table } from "../../components";
 import { usePagination } from "../use-pagination";
 
-const TABLE_PAGE_SIZES = [5, 10, 20, 50, 100];
-/**
- * Hook que facilita el manejo de paginaciones, recibe como param la cantidad de elementos, la cantidad de elementos por página y una función
- * que se ejecuta cuando cambia la pagina
- */
 const meta: Meta = {
   title: "hooks/usePagination",
   tags: ["autodocs"],
@@ -16,57 +10,726 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default = () => {
-  const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZES[0]);
-  const { currentPage, maxPage, isLastPage, isFirstPage, prev, next, goTo } =
-    usePagination({
+// ---------------------------------------------------------------------------
+// Story 1 — Default (uncontrolled)
+// Shows all returned values and all 6 action buttons.
+// ---------------------------------------------------------------------------
+
+export const Default = {
+  render: () => {
+    const {
+      page,
+      pageSize,
+      pageCount,
+      isFirstPage,
+      isLastPage,
+      hasPrevPage,
+      hasNextPage,
+      range,
+      next,
+      prev,
+      firstPage,
+      lastPage,
+      goTo,
+      setPageSize,
+    } = usePagination({ totalItems: 100, defaultPageSize: 10, defaultPage: 1 });
+
+    return (
+      <div className="space-y-4">
+        <pre className="rounded-md bg-slate-950 p-4 text-sm text-white font-mono">
+          <code className="block">
+            page: <span className="text-blue-300">{page}</span>
+          </code>
+          <code className="block">
+            pageSize: <span className="text-blue-300">{pageSize}</span>
+          </code>
+          <code className="block">
+            pageCount: <span className="text-blue-300">{pageCount}</span>
+          </code>
+          <code className="block">
+            isFirstPage:{" "}
+            <span className={isFirstPage ? "text-green-400" : "text-red-400"}>
+              {String(isFirstPage)}
+            </span>
+          </code>
+          <code className="block">
+            isLastPage:{" "}
+            <span className={isLastPage ? "text-green-400" : "text-red-400"}>
+              {String(isLastPage)}
+            </span>
+          </code>
+          <code className="block">
+            hasPrevPage:{" "}
+            <span className={hasPrevPage ? "text-green-400" : "text-red-400"}>
+              {String(hasPrevPage)}
+            </span>
+          </code>
+          <code className="block">
+            hasNextPage:{" "}
+            <span className={hasNextPage ? "text-green-400" : "text-red-400"}>
+              {String(hasNextPage)}
+            </span>
+          </code>
+          <code className="block">
+            range:{" "}
+            <span className="text-yellow-300">{`{ start: ${range.start}, end: ${range.end} }`}</span>
+          </code>
+        </pre>
+        <div className="flex flex-wrap gap-2">
+          <Button size="sm" onClick={firstPage} disabled={isFirstPage}>
+            First
+          </Button>
+          <Button size="sm" onClick={prev} disabled={!hasPrevPage}>
+            Prev
+          </Button>
+          <Button size="sm" onClick={next} disabled={!hasNextPage}>
+            Next
+          </Button>
+          <Button size="sm" onClick={lastPage} disabled={isLastPage}>
+            Last
+          </Button>
+          <Button size="sm" onClick={() => goTo(5)}>
+            Go to 5
+          </Button>
+          <Button size="sm" onClick={() => setPageSize(20)}>
+            Set size 20
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Story 2 — Controlled
+// page + onPageChange wired to local useState.
+// ---------------------------------------------------------------------------
+
+export const Controlled = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const pagination = usePagination({
+      totalItems: 50,
+      defaultPageSize: 10,
+      page,
+      onPageChange: setPage,
+    });
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Page controlled by parent <code>useState</code>. Current:{" "}
+          <strong>{page}</strong>
+        </p>
+        <pre className="rounded-md bg-slate-950 p-4 text-sm text-white font-mono">
+          <code className="block">
+            page: <span className="text-blue-300">{pagination.page}</span>
+          </code>
+          <code className="block">
+            pageCount:{" "}
+            <span className="text-blue-300">{pagination.pageCount}</span>
+          </code>
+          <code className="block">
+            isFirstPage:{" "}
+            <span
+              className={
+                pagination.isFirstPage ? "text-green-400" : "text-red-400"
+              }
+            >
+              {String(pagination.isFirstPage)}
+            </span>
+          </code>
+          <code className="block">
+            isLastPage:{" "}
+            <span
+              className={
+                pagination.isLastPage ? "text-green-400" : "text-red-400"
+              }
+            >
+              {String(pagination.isLastPage)}
+            </span>
+          </code>
+        </pre>
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            onClick={pagination.firstPage}
+            disabled={pagination.isFirstPage}
+          >
+            First
+          </Button>
+          <Button
+            size="sm"
+            onClick={pagination.prev}
+            disabled={!pagination.hasPrevPage}
+          >
+            Prev
+          </Button>
+          <Button
+            size="sm"
+            onClick={pagination.next}
+            disabled={!pagination.hasNextPage}
+          >
+            Next
+          </Button>
+          <Button
+            size="sm"
+            onClick={pagination.lastPage}
+            disabled={pagination.isLastPage}
+          >
+            Last
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Story 3 — ControllablePageSize
+// pageSize + onPageSizeChange with a dropdown. Shows auto-reset to page 1.
+// ---------------------------------------------------------------------------
+
+export const ControllablePageSize = {
+  render: () => {
+    const [pageSize, setPageSize] = useState(10);
+    const [page, setPage] = useState(3);
+    // Single fetch-trigger log. onPaginationChange fires ONCE with both final
+    // values, even when changing the page size resets the page to 1 — so there
+    // is never a duplicate fetch.
+    const [fetchLog, setFetchLog] = useState<string[]>([]);
+
+    const pagination = usePagination({
       totalItems: 100,
-      pageSize: pageSize,
-      onChange: action("change"),
-      initialCurrentPage: 1,
+      pageSize,
+      onPageSizeChange: setPageSize,
+      page,
+      onPageChange: setPage,
+      onPaginationChange: ({ page, pageSize }) => {
+        setFetchLog((prev) => [
+          `fetch → page ${page}, pageSize ${pageSize}`,
+          ...prev.slice(0, 4),
+        ]);
+      },
+    });
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          Change page size — page resets to 1 automatically, and{" "}
+          <code>onPaginationChange</code> fires exactly once with both final
+          values (a single fetch).
+        </p>
+        <div className="flex items-center gap-2">
+          <label htmlFor="page-size" className="text-sm font-medium">
+            Page size:
+          </label>
+          <select
+            id="page-size"
+            value={pageSize}
+            onChange={(e) => pagination.setPageSize(Number(e.target.value))}
+            className="border rounded px-2 py-1 text-sm"
+          >
+            {[5, 10, 20, 50].map((s) => (
+              <option key={s} value={s}>
+                {s}
+              </option>
+            ))}
+          </select>
+        </div>
+        <pre className="rounded-md bg-slate-950 p-4 text-sm text-white font-mono">
+          <code className="block">
+            page: <span className="text-blue-300">{pagination.page}</span>
+          </code>
+          <code className="block">
+            pageSize:{" "}
+            <span className="text-blue-300">{pagination.pageSize}</span>
+          </code>
+          <code className="block">
+            pageCount:{" "}
+            <span className="text-blue-300">{pagination.pageCount}</span>
+          </code>
+          <code className="block">
+            range:{" "}
+            <span className="text-yellow-300">{`{ start: ${pagination.range.start}, end: ${pagination.range.end} }`}</span>
+          </code>
+        </pre>
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            onClick={pagination.prev}
+            disabled={!pagination.hasPrevPage}
+          >
+            Prev
+          </Button>
+          <Button
+            size="sm"
+            onClick={pagination.next}
+            disabled={!pagination.hasNextPage}
+          >
+            Next
+          </Button>
+        </div>
+        {fetchLog.length > 0 && (
+          <div className="space-y-1">
+            <p className="text-xs font-medium text-slate-500">
+              onPaginationChange log:
+            </p>
+            {fetchLog.map((entry, i) => (
+              <p key={i} className="font-mono text-xs text-slate-600">
+                {entry}
+              </p>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Story 4 — EdgeCases
+// totalItems=0, last partial page, single-page scenario shown side by side.
+// ---------------------------------------------------------------------------
+
+export const EdgeCases = {
+  render: () => {
+    const empty = usePagination({ totalItems: 0 });
+    const partial = usePagination({
+      totalItems: 25,
+      defaultPageSize: 10,
+      defaultPage: 3,
     });
+    const single = usePagination({ totalItems: 8, defaultPageSize: 10 });
+
+    const StateBlock = ({
+      label,
+      state,
+    }: {
+      label: string;
+      state: ReturnType<typeof usePagination>;
+    }) => (
+      <div className="flex-1 min-w-48">
+        <p className="text-sm font-semibold mb-2">{label}</p>
+        <pre className="rounded-md bg-slate-950 p-3 text-xs text-white font-mono">
+          <code className="block">page: {state.page}</code>
+          <code className="block">pageCount: {state.pageCount}</code>
+          <code className="block">pageSize: {state.pageSize}</code>
+          <code className="block">isFirst: {String(state.isFirstPage)}</code>
+          <code className="block">isLast: {String(state.isLastPage)}</code>
+          <code className="block">
+            range: {`{${state.range.start}…${state.range.end}}`}
+          </code>
+        </pre>
+      </div>
+    );
+
+    return (
+      <div className="flex flex-wrap gap-4">
+        <StateBlock label="Empty (totalItems=0)" state={empty} />
+        <StateBlock
+          label="Last partial page (25 items, page 3 of 3)"
+          state={partial}
+        />
+        <StateBlock label="Single page (8 items, pageSize=10)" state={single} />
+      </div>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Story 5 — Integration
+// usePagination is the single source of truth: it drives both the Table slice
+// and the Pagination component (controlled via currentPage / onCurrentPageChange).
+// ---------------------------------------------------------------------------
+
+type Employee = {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  status: "Active" | "On leave" | "Inactive";
+};
+
+const EMPLOYEES: Employee[] = [
+  {
+    id: 1,
+    name: "Ana García",
+    department: "Engineering",
+    role: "Senior Frontend",
+    status: "Active",
+  },
+  {
+    id: 2,
+    name: "Carlos Méndez",
+    department: "Engineering",
+    role: "Backend Lead",
+    status: "Active",
+  },
+  {
+    id: 3,
+    name: "Sofía Torres",
+    department: "Design",
+    role: "Product Designer",
+    status: "Active",
+  },
+  {
+    id: 4,
+    name: "Matías Romero",
+    department: "Engineering",
+    role: "DevOps Engineer",
+    status: "On leave",
+  },
+  {
+    id: 5,
+    name: "Valentina Cruz",
+    department: "Product",
+    role: "Product Manager",
+    status: "Active",
+  },
+  {
+    id: 6,
+    name: "Ignacio Ruiz",
+    department: "Engineering",
+    role: "Mobile Engineer",
+    status: "Active",
+  },
+  {
+    id: 7,
+    name: "Lucía Fernández",
+    department: "Design",
+    role: "UX Researcher",
+    status: "Active",
+  },
+  {
+    id: 8,
+    name: "Facundo López",
+    department: "Engineering",
+    role: "Staff Engineer",
+    status: "Inactive",
+  },
+  {
+    id: 9,
+    name: "Camila Vargas",
+    department: "Marketing",
+    role: "Growth Manager",
+    status: "Active",
+  },
+  {
+    id: 10,
+    name: "Tomás Jiménez",
+    department: "Engineering",
+    role: "Frontend Engineer",
+    status: "Active",
+  },
+  {
+    id: 11,
+    name: "Martina Sosa",
+    department: "Product",
+    role: "Product Analyst",
+    status: "Active",
+  },
+  {
+    id: 12,
+    name: "Agustín Herrera",
+    department: "Engineering",
+    role: "Data Engineer",
+    status: "On leave",
+  },
+  {
+    id: 13,
+    name: "Florencia Ríos",
+    department: "Design",
+    role: "Brand Designer",
+    status: "Active",
+  },
+  {
+    id: 14,
+    name: "Sebastián Morales",
+    department: "Engineering",
+    role: "Security Engineer",
+    status: "Active",
+  },
+  {
+    id: 15,
+    name: "Julieta Vega",
+    department: "Marketing",
+    role: "Content Strategist",
+    status: "Active",
+  },
+  {
+    id: 16,
+    name: "Rodrigo Blanco",
+    department: "Engineering",
+    role: "Backend Engineer",
+    status: "Active",
+  },
+  {
+    id: 17,
+    name: "Emilia Reyes",
+    department: "Product",
+    role: "Product Designer",
+    status: "Active",
+  },
+  {
+    id: 18,
+    name: "Nicolás Acosta",
+    department: "Engineering",
+    role: "Frontend Lead",
+    status: "Active",
+  },
+  {
+    id: 19,
+    name: "Bianca Molina",
+    department: "Marketing",
+    role: "SEO Specialist",
+    status: "Inactive",
+  },
+  {
+    id: 20,
+    name: "Esteban Peralta",
+    department: "Engineering",
+    role: "Platform Engineer",
+    status: "Active",
+  },
+  {
+    id: 21,
+    name: "Aldana Castillo",
+    department: "Design",
+    role: "Motion Designer",
+    status: "Active",
+  },
+  {
+    id: 22,
+    name: "Bruno Campos",
+    department: "Engineering",
+    role: "QA Engineer",
+    status: "Active",
+  },
+  {
+    id: 23,
+    name: "Xiomara Navarro",
+    department: "Product",
+    role: "Head of Product",
+    status: "Active",
+  },
+  {
+    id: 24,
+    name: "Gonzalo Ibáñez",
+    department: "Engineering",
+    role: "iOS Engineer",
+    status: "On leave",
+  },
+  {
+    id: 25,
+    name: "Renata Suárez",
+    department: "Marketing",
+    role: "Performance Marketer",
+    status: "Active",
+  },
+  {
+    id: 26,
+    name: "Hernán Delgado",
+    department: "Engineering",
+    role: "Android Engineer",
+    status: "Active",
+  },
+  {
+    id: 27,
+    name: "Pilar Guzmán",
+    department: "Design",
+    role: "Design Systems Lead",
+    status: "Active",
+  },
+  {
+    id: 28,
+    name: "Diego Ponce",
+    department: "Engineering",
+    role: "Tech Lead",
+    status: "Active",
+  },
+  {
+    id: 29,
+    name: "Violeta Medina",
+    department: "Product",
+    role: "Product Strategist",
+    status: "Active",
+  },
+  {
+    id: 30,
+    name: "Mauricio Arias",
+    department: "Engineering",
+    role: "Backend Engineer",
+    status: "Active",
+  },
+  {
+    id: 31,
+    name: "Catalina Flores",
+    department: "Marketing",
+    role: "Brand Manager",
+    status: "Active",
+  },
+  {
+    id: 32,
+    name: "Leandro Ortiz",
+    department: "Engineering",
+    role: "ML Engineer",
+    status: "Active",
+  },
+  {
+    id: 33,
+    name: "Inés Carrillo",
+    department: "Design",
+    role: "UX Designer",
+    status: "On leave",
+  },
+  {
+    id: 34,
+    name: "Pablo Montoya",
+    department: "Engineering",
+    role: "Infrastructure Lead",
+    status: "Active",
+  },
+  {
+    id: 35,
+    name: "Verónica Sandoval",
+    department: "Product",
+    role: "Product Owner",
+    status: "Active",
+  },
+  {
+    id: 36,
+    name: "Ramiro Espinoza",
+    department: "Engineering",
+    role: "Fullstack Engineer",
+    status: "Active",
+  },
+  {
+    id: 37,
+    name: "Cecilia Contreras",
+    department: "Marketing",
+    role: "CRM Manager",
+    status: "Active",
+  },
+  {
+    id: 38,
+    name: "Adrián Guerrero",
+    department: "Engineering",
+    role: "Site Reliability Eng.",
+    status: "Inactive",
+  },
+  {
+    id: 39,
+    name: "Gabriela Miranda",
+    department: "Design",
+    role: "Interaction Designer",
+    status: "Active",
+  },
+  {
+    id: 40,
+    name: "Claudio Fuentes",
+    department: "Engineering",
+    role: "API Architect",
+    status: "Active",
+  },
+  {
+    id: 41,
+    name: "Luciana Rojas",
+    department: "Product",
+    role: "Data Product Manager",
+    status: "Active",
+  },
+  {
+    id: 42,
+    name: "Marcos Benítez",
+    department: "Engineering",
+    role: "Frontend Engineer",
+    status: "Active",
+  },
+  {
+    id: 43,
+    name: "Daniela Castro",
+    department: "Marketing",
+    role: "Social Media Lead",
+    status: "On leave",
+  },
+  {
+    id: 44,
+    name: "Fernando Vera",
+    department: "Engineering",
+    role: "Platform Architect",
+    status: "Active",
+  },
+  {
+    id: 45,
+    name: "Antonella Ramos",
+    department: "Design",
+    role: "Visual Designer",
+    status: "Active",
+  },
+  {
+    id: 46,
+    name: "Julio Pereira",
+    department: "Engineering",
+    role: "Security Researcher",
+    status: "Active",
+  },
+  {
+    id: 47,
+    name: "Belén Alvarado",
+    department: "Product",
+    role: "Growth Product Manager",
+    status: "Active",
+  },
+];
+
+const STATUS_STYLES: Record<Employee["status"], string> = {
+  Active: "bg-green-100 text-green-800",
+  "On leave": "bg-yellow-100 text-yellow-800",
+  Inactive: "bg-slate-100 text-slate-600",
+};
+
+const EMPLOYEE_COLUMNS: ColumnDef<Employee>[] = [
+  { key: "name", header: "Name" },
+  { key: "department", header: "Department" },
+  { key: "role", header: "Role" },
+  {
+    key: "status",
+    header: "Status",
+    cell: (row) => (
+      <span
+        className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_STYLES[row.status]}`}
+      >
+        {row.status}
+      </span>
+    ),
+  },
+];
+
+export const Integration = {
+  render: () => {
+    const { page, pageSize, range, goTo, setPageSize } = usePagination({
+      totalItems: EMPLOYEES.length,
+      defaultPageSize: 10,
+    });
+
+    const pageData = EMPLOYEES.slice(range.start - 1, range.end);
 
-  return (
-    <div className="space-y-2">
-      <pre className="rounded-md bg-slate-950 p-4 text-white">
-        <code className="block">
-          CurrentPage:{" "}
-          <span className="text-blue-300">
-            {JSON.stringify(currentPage, null, 2)}
-          </span>
-        </code>
-        <code className="block">PageSize: {pageSize}</code>
-        <code className="block">Maxpage: {maxPage}</code>
-        <code className="block">
-          isLastPage:{" "}
-          <span className={isLastPage ? "text-green-500" : "text-red-500"}>
-            {JSON.stringify(isLastPage)}
-          </span>
-        </code>
-        <code className="block">
-          IsFirstPage:{" "}
-          <span className={isFirstPage ? "text-green-500" : "text-red-500"}>
-            {JSON.stringify(isFirstPage)}
-          </span>
-        </code>
-      </pre>
-
-      <div className="flex gap-2">
-        <select
-          className="border rounded w-24 px-2"
-          value={pageSize}
-          onChange={(event) => setPageSize(Number(event.target.value))}
-        >
-          {TABLE_PAGE_SIZES.map((option: number, index) => (
-            <option key={index} value={option}>
-              {option}
-            </option>
-          ))}
-        </select>
-        <Button onClick={prev}>Página anterior</Button>
-        <Button onClick={next}>Siguiente pagina</Button>
-        <Button onClick={() => goTo(10)}>Ir a la pagina 10</Button>
+    return (
+      <div className="space-y-4">
+        <Table
+          data={pageData}
+          columns={EMPLOYEE_COLUMNS}
+          getRowKey={(row) => row.id}
+        />
+        <Pagination
+          totalItems={EMPLOYEES.length}
+          currentPage={page}
+          onCurrentPageChange={goTo}
+          pageSize={pageSize}
+          onPageSizeChange={setPageSize}
+        />
       </div>
-    </div>
-  );
+    );
+  },
 };