feat: use new pagination component for product list page (#199)

* feat: use new pagination component for search * chore: changeset * feat: use pagination component for simple output
elasticpath · Feb 15, 2024 · e819f3d · e819f3d
1 parent 8dd82ff
commit e819f3d
Show file tree

Hide file tree

Showing 16 changed files with 231 additions and 125 deletions.
diff --git a/.changeset/rare-parents-return.md b/.changeset/rare-parents-return.md
@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+use new pagination component for search
diff --git a/examples/algolia/src/components/pagination/Pagination.tsx b/examples/algolia/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/algolia/src/components/search/Pagination.tsx b/examples/algolia/src/components/search/Pagination.tsx
@@ -1,29 +1,31 @@
 import React from "react";
 import { usePagination } from "react-instantsearch";
-import clsx from "clsx";
+
+import {
+  Pagination as DisplayPagination,
+  PaginationButton,
+  PaginationContent,
+  PaginationItem,
+} from "../pagination/Pagination";
 
 export const Pagination = (): JSX.Element => {
   const { pages, currentRefinement, canRefine, refine } = usePagination();
-
   return (
-    <div className={clsx(canRefine ? "block" : "none")}>
-      <div className="flex justify-center">
-        {pages.map((page) => (
-          <button
-            className={clsx(
-              currentRefinement === page ? "bg-brand-primary" : "bg-gray-100",
-              currentRefinement === page ? "text-white" : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={page}
-            onClick={() => refine(page)}
-            disabled={!canRefine}
-          >
-            {page + 1}
-          </button>
+    <DisplayPagination>
+      <PaginationContent>
+        {pages.map((pageNumber) => (
+          <PaginationItem key={pageNumber}>
+            <PaginationButton
+              isActive={currentRefinement === pageNumber}
+              onClick={() => refine(pageNumber)}
+              disabled={!canRefine}
+            >
+              {pageNumber + 1}
+            </PaginationButton>
+          </PaginationItem>
         ))}
-      </div>
-    </div>
+      </PaginationContent>
+    </DisplayPagination>
   );
 };
 

diff --git a/examples/algolia/src/components/search/SearchResults.tsx b/examples/algolia/src/components/search/SearchResults.tsx
@@ -98,7 +98,7 @@ export default function SearchResults({ lookup }: ISearchResults): JSX.Element {
         </div>
       </div>
       <hr />
-      <div className="grid grid-cols-[auto_auto_auto] gap-8">
+      <div className="grid grid-cols-[auto_1fr] gap-8">
         <div className="hidden w-[14rem] md:block lg:w-[16rem]">
           <h3 className="font-semibold">Category</h3>
           {nav && <NodeMenu nav={nav} />}

diff --git a/examples/payments/src/components/pagination/Pagination.tsx b/examples/payments/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/payments/src/components/search/Pagination.tsx b/examples/payments/src/components/search/Pagination.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import { useProducts } from "./ProductsProvider";
-import clsx from "clsx";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  Pagination as DisplayPagination,
+  PaginationContent,
+  PaginationItem, PaginationLink,
+} from "../pagination/Pagination";
+
 
 function calculateTotalPages(totalItems: number, limit: number): number {
   // Ensure both totalItems and limit are positive integers
@@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
   const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);
 
   return (
-    <div className={clsx("block")}>
-      <div className="flex justify-center gap-2 flex-wrap">
-        {[...Array(totalPages).keys()].map((currentPage) => (
-          <Link
-            href={`${pathname}?limit=${page.meta.page.limit}&offset=${
-              currentPage * page.meta.page.limit
-            }`}
-            className={clsx(
-              currentPage + 1 === page.meta.page.current
-                ? "bg-brand-primary"
-                : "bg-gray-100",
-              currentPage + 1 === page.meta.page.current
-                ? "text-white"
-                : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={currentPage + 1}
-          >
-            {currentPage + 1}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+      <DisplayPagination>
+        <PaginationContent>
+          {[...Array(totalPages).keys()].map((pageNumber) => (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                    href={`${pathname}?limit=${page.meta.page.limit}&offset=${
+                        pageNumber * page.meta.page.limit
+                    }`}
+                    isActive={pageNumber + 1 === page.meta.page.current}
+                >
+                  {pageNumber + 1}
+                </PaginationLink>
+              </PaginationItem>
+          ))}
+        </PaginationContent>
+      </DisplayPagination>
+  )
 };
 
 export default Pagination;
diff --git a/examples/payments/src/components/search/SearchResults.tsx b/examples/payments/src/components/search/SearchResults.tsx
@@ -49,7 +49,7 @@ export default function SearchResults({
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-[auto_auto_auto] gap-8">
+        <div className="grid grid-cols-[auto_1fr] gap-8">
           <div className="hidden w-[14rem] md:block lg:w-[16rem]">
             <h3 className="font-semibold">Category</h3>
             {nav && <NodeMenu nav={nav} />}

diff --git a/examples/simple/src/components/pagination/Pagination.tsx b/examples/simple/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/simple/src/components/search/Pagination.tsx b/examples/simple/src/components/search/Pagination.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import { useProducts } from "./ProductsProvider";
-import clsx from "clsx";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  Pagination as DisplayPagination,
+  PaginationContent,
+  PaginationItem, PaginationLink,
+} from "../pagination/Pagination";
+
 
 function calculateTotalPages(totalItems: number, limit: number): number {
   // Ensure both totalItems and limit are positive integers
@@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
   const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);
 
   return (
-    <div className={clsx("block")}>
-      <div className="flex justify-center gap-2 flex-wrap">
-        {[...Array(totalPages).keys()].map((currentPage) => (
-          <Link
-            href={`${pathname}?limit=${page.meta.page.limit}&offset=${
-              currentPage * page.meta.page.limit
-            }`}
-            className={clsx(
-              currentPage + 1 === page.meta.page.current
-                ? "bg-brand-primary"
-                : "bg-gray-100",
-              currentPage + 1 === page.meta.page.current
-                ? "text-white"
-                : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={currentPage + 1}
-          >
-            {currentPage + 1}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+      <DisplayPagination>
+        <PaginationContent>
+          {[...Array(totalPages).keys()].map((pageNumber) => (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                    href={`${pathname}?limit=${page.meta.page.limit}&offset=${
+                        pageNumber * page.meta.page.limit
+                    }`}
+                    isActive={pageNumber + 1 === page.meta.page.current}
+                >
+                  {pageNumber + 1}
+                </PaginationLink>
+              </PaginationItem>
+          ))}
+        </PaginationContent>
+      </DisplayPagination>
+  )
 };
 
 export default Pagination;
diff --git a/examples/simple/src/components/search/SearchResults.tsx b/examples/simple/src/components/search/SearchResults.tsx
@@ -49,7 +49,7 @@ export default function SearchResults({
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-[auto_auto_auto] gap-8">
+        <div className="grid grid-cols-[auto_1fr] gap-8">
           <div className="hidden w-[14rem] md:block lg:w-[16rem]">
             <h3 className="font-semibold">Category</h3>
             {nav && <NodeMenu nav={nav} />}

diff --git a/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap b/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap
@@ -62,9 +62,12 @@ exports[`EP New Schematic should create cart schematic files 1`] = `
   "/bar/src/app/(store)/account/AccountNavigation.tsx",
   "/bar/src/app/(store)/account/breadcrumb.tsx",
   "/bar/src/app/(store)/account/layout.tsx",
+  "/bar/src/app/(store)/account/addresses/DeleteAddressBtn.tsx",
   "/bar/src/app/(store)/account/addresses/actions.ts",
   "/bar/src/app/(store)/account/addresses/page.tsx",
+  "/bar/src/app/(store)/account/addresses/[addressId]/UpdateForm.tsx",
   "/bar/src/app/(store)/account/addresses/[addressId]/page.tsx",
+  "/bar/src/app/(store)/account/addresses/add/AddForm.tsx",
   "/bar/src/app/(store)/account/addresses/add/page.tsx",
   "/bar/src/app/(store)/account/orders/OrderItem.tsx",
   "/bar/src/app/(store)/account/orders/OrderItemWithDetails.tsx",
@@ -284,9 +287,12 @@ exports[`EP New Schematic should create files of a workspace 1`] = `
   "/bar/src/app/(store)/account/AccountNavigation.tsx",
   "/bar/src/app/(store)/account/breadcrumb.tsx",
   "/bar/src/app/(store)/account/layout.tsx",
+  "/bar/src/app/(store)/account/addresses/DeleteAddressBtn.tsx",
   "/bar/src/app/(store)/account/addresses/actions.ts",
   "/bar/src/app/(store)/account/addresses/page.tsx",
+  "/bar/src/app/(store)/account/addresses/[addressId]/UpdateForm.tsx",
   "/bar/src/app/(store)/account/addresses/[addressId]/page.tsx",
+  "/bar/src/app/(store)/account/addresses/add/AddForm.tsx",
   "/bar/src/app/(store)/account/addresses/add/page.tsx",
   "/bar/src/app/(store)/account/orders/OrderItem.tsx",
   "/bar/src/app/(store)/account/orders/OrderItemWithDetails.tsx",