@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.14

package/src/components/pagination/pagination.tsx

@@ -1,102 +1,600 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import {
   ChevronLeft,
   ChevronRight,
   ChevronsLeft,
   ChevronsRight,
+  MoreHorizontal,
 } from "lucide-react";
-import { HTMLProps } from "react";
-import { DOTS, useRangePagination, useRangePaginationProps } from "../../hooks";
-import { cn } from "../../lib";
 import {
-  PaginationOption as Option,
-  PaginationOptionProps,
-} from "./components/pagination-option";
+  ChangeEvent,
+  ComponentProps,
+  ComponentType,
+  createContext,
+  ElementType,
+  ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+import { DOTS, useRangePagination } from "../../hooks";
+import { cn } from "../../lib";
+import { Button } from "../button";
+import { PAGINATION_SIZES, PageSize } from "./pagination.model";
+
+type GetPageHref = (state: { page: number; pageSize: number }) => string;
 
-interface Props extends useRangePaginationProps {
-  optionProps?: PaginationOptionProps;
+type LinkRenderProps = {
+  href: string;
+  children?: ReactNode;
   className?: string;
-  containerProps?: HTMLProps<HTMLDivElement>;
+  onClick?: (event: React.MouseEvent) => void;
+};
+
+type LinkComponent =
+  | ElementType<LinkRenderProps>
+  | ComponentType<LinkRenderProps>;
+
+interface PaginationTexts {
+  goToFirst: string;
+  goToPrevious: string;
+  goToNext: string;
+  goToLast: string;
+  goToPage: (page: number) => string;
+  total: (n: number) => string;
+  pageInfo: (page: number, max: number) => string;
+  range: (start: number, end: number, total: number) => string;
+  morePages: string;
+}
+
+const DEFAULT_TEXTS: PaginationTexts = {
+  goToFirst: "Ir a primera página",
+  goToPrevious: "Ir a página anterior",
+  goToNext: "Ir a próxima página",
+  goToLast: "Ir a última página",
+  goToPage: (page) => `Ir a la página ${page}`,
+  total: (n) => `${n} resultados`,
+  pageInfo: (page, max) => `Página ${page} de ${max}`,
+  range: (start, end, total) => `${start} - ${end} de ${total}`,
+  morePages: "Más páginas",
+};
+
+interface PaginationContextValue {
+  currentPage: number;
+  maxPage: number;
+  pageSize: PageSize;
+  totalItems: number;
+  paginationRange: (string | number)[];
+  range: { start: number; end: number };
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  goTo: (page: number) => void;
+  next: () => void;
+  prev: () => void;
+  setPageSize: (size: PageSize) => void;
+  getPageHref?: GetPageHref;
+  linkComponent: LinkComponent;
+  texts: PaginationTexts;
 }
 
-export const Pagination = ({
-  optionProps,
+const PaginationContext = createContext<PaginationContextValue | null>(null);
+
+function usePaginationContext() {
+  const ctx = useContext(PaginationContext);
+  if (!ctx) {
+    throw new Error(
+      "Pagination primitives must be used inside <PaginationRoot>",
+    );
+  }
+  return ctx;
+}
+
+interface PaginationRootProps extends Omit<ComponentProps<"nav">, "onChange"> {
+  totalItems: number;
+  pageSize?: PageSize;
+  defaultPageSize?: PageSize;
+  onPageSizeChange?: (size: PageSize) => void;
+  currentPage?: number;
+  defaultCurrentPage?: number;
+  onCurrentPageChange?: (page: number) => void;
+  siblingCount?: number;
+  getPageHref?: GetPageHref;
+  linkComponent?: LinkComponent;
+  texts?: Partial<PaginationTexts>;
+}
+
+export function PaginationRoot({
+  totalItems,
+  pageSize: pageSizeProp,
+  defaultPageSize = PAGINATION_SIZES[0],
+  onPageSizeChange,
+  currentPage,
+  defaultCurrentPage = 1,
+  onCurrentPageChange,
+  siblingCount = 1,
+  getPageHref,
+  linkComponent = "a",
+  texts: textsProp,
   className,
-  containerProps,
-  ...rangeProps
-}: Props) => {
-  const {
-    paginationRange,
+  children,
+  ...props
+}: PaginationRootProps) {
+  const [pageSize = defaultPageSize, setPageSize] =
+    useControllableState<PageSize>({
+      prop: pageSizeProp,
+      defaultProp: defaultPageSize,
+      onChange: onPageSizeChange,
+    });
+
+  const pagination = useRangePagination({
+    totalItems,
+    pageSize,
     currentPage,
-    goTo,
-    maxPage,
-    next,
-    prev,
-    isLastPage,
-    isFirstPage,
-  } = useRangePagination(rangeProps);
+    defaultCurrentPage,
+    onCurrentPageChange,
+    siblingCount,
+  });
+
+  const texts = useMemo(
+    () => ({ ...DEFAULT_TEXTS, ...textsProp }),
+    [textsProp],
+  );
+
+  const value = useMemo<PaginationContextValue>(
+    () => ({
+      ...pagination,
+      pageSize,
+      totalItems,
+      setPageSize,
+      getPageHref,
+      linkComponent,
+      texts,
+    }),
+    [
+      pagination,
+      pageSize,
+      totalItems,
+      setPageSize,
+      getPageHref,
+      linkComponent,
+      texts,
+    ],
+  );
+
+  return (
+    <PaginationContext.Provider value={value}>
+      <nav
+        role="navigation"
+        aria-label="pagination"
+        data-slot="pagination"
+        className={cn("flex items-center gap-x-4", className)}
+        {...props}
+      >
+        {children}
+      </nav>
+    </PaginationContext.Provider>
+  );
+}
+
+type ButtonOverrides = Omit<
+  ComponentProps<typeof Button>,
+  "onClick" | "disabled" | "render" | "children" | "nativeButton"
+>;
+
+interface NavigableProps {
+  page: number;
+  isActive?: boolean;
+  disabled?: boolean;
+  ariaLabel: string;
+  dataSlot: string;
+  children: ReactNode;
+  className?: string;
+  buttonProps?: ButtonOverrides;
+}
+
+function NavigableButton({
+  page,
+  isActive,
+  disabled,
+  ariaLabel,
+  dataSlot,
+  children,
+  className,
+  buttonProps,
+}: NavigableProps) {
+  const { goTo, getPageHref, pageSize, linkComponent } = usePaginationContext();
+  const Link = linkComponent;
+  const href = getPageHref?.({ page, pageSize: Number(pageSize) });
+  const useLink = Boolean(href) && !disabled;
+
+  const handleClick = () => {
+    if (disabled) return;
+    goTo(page);
+  };
+
+  const sharedProps = {
+    "data-slot": dataSlot,
+    "data-active": isActive ? "true" : "false",
+    "aria-current": isActive ? ("page" as const) : undefined,
+    "aria-label": ariaLabel,
+    className: cn("hover:bg-accent hover:text-accent-foreground", className),
+  };
+
+  if (useLink && href) {
+    return (
+      <Button
+        variant={isActive ? "outline" : "ghost"}
+        size="icon"
+        nativeButton={false}
+        render={
+          <Link href={href} onClick={handleClick}>
+            {children}
+          </Link>
+        }
+        {...sharedProps}
+        {...buttonProps}
+      />
+    );
+  }
+
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size="icon"
+      disabled={disabled}
+      onClick={handleClick}
+      {...sharedProps}
+      {...buttonProps}
+    >
+      {children}
+    </Button>
+  );
+}
+
+interface PaginationLinkProps {
+  page: number;
+  isActive?: boolean;
+  className?: string;
+  children?: ReactNode;
+  buttonProps?: ButtonOverrides;
+}
+
+export function PaginationLink({
+  page,
+  isActive: isActiveProp,
+  className,
+  children,
+  buttonProps,
+}: PaginationLinkProps) {
+  const { currentPage, texts } = usePaginationContext();
+  const isActive = isActiveProp ?? page === currentPage;
 
+  return (
+    <NavigableButton
+      page={page}
+      isActive={isActive}
+      ariaLabel={texts.goToPage(page)}
+      dataSlot="pagination-link"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? page}
+    </NavigableButton>
+  );
+}
+
+interface PaginationNavProps {
+  className?: string;
+  buttonProps?: ButtonOverrides;
+  children?: ReactNode;
+}
+
+export function PaginationFirst({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { isFirstPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={1}
+      disabled={isFirstPage}
+      ariaLabel={texts.goToFirst}
+      dataSlot="pagination-first"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronsLeft data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationPrevious({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { currentPage, isFirstPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={Math.max(1, currentPage - 1)}
+      disabled={isFirstPage}
+      ariaLabel={texts.goToPrevious}
+      dataSlot="pagination-previous"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronLeft data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationNext({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { currentPage, maxPage, isLastPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={Math.min(maxPage, currentPage + 1)}
+      disabled={isLastPage}
+      ariaLabel={texts.goToNext}
+      dataSlot="pagination-next"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronRight data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationLast({
+  className,
+  buttonProps,
+  children,
+}: PaginationNavProps) {
+  const { maxPage, isLastPage, texts } = usePaginationContext();
+  return (
+    <NavigableButton
+      page={maxPage}
+      disabled={isLastPage}
+      ariaLabel={texts.goToLast}
+      dataSlot="pagination-last"
+      className={className}
+      buttonProps={buttonProps}
+    >
+      {children ?? <ChevronsRight data-slot="pagination-icon" />}
+    </NavigableButton>
+  );
+}
+
+export function PaginationEllipsis({
+  className,
+  ...props
+}: ComponentProps<"span">) {
+  const { texts } = usePaginationContext();
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      data-dots="true"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <MoreHorizontal />
+      <span className="sr-only">{texts.morePages}</span>
+    </span>
+  );
+}
+
+interface PaginationPagesProps {
+  className?: string;
+  linkClassName?: string;
+  ellipsisClassName?: string;
+}
+
+export function PaginationPages({
+  className,
+  linkClassName,
+  ellipsisClassName,
+}: PaginationPagesProps) {
+  const { paginationRange } = usePaginationContext();
   return (
     <div
-      {...containerProps}
+      role="list"
+      data-slot="pagination-pages"
+      className={cn("flex items-center gap-1", className)}
+    >
+      {paginationRange.map((item, index) =>
+        item === DOTS ? (
+          <PaginationEllipsis
+            key={`dots-${index}`}
+            className={ellipsisClassName}
+          />
+        ) : (
+          <PaginationLink
+            key={item}
+            page={item as number}
+            className={linkClassName}
+          />
+        ),
+      )}
+    </div>
+  );
+}
+
+interface PaginationTotalProps {
+  className?: string;
+  /**
+   * Custom content. Receives the total number of items, or pass a static ReactNode.
+   * @default `${total} resultados`
+   */
+  children?: ReactNode | ((total: number) => ReactNode);
+}
+
+export function PaginationTotal({
+  children,
+  className,
+  ...props
+}: PaginationTotalProps) {
+  const { totalItems, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children(totalItems)
+      : (children ?? texts.total(totalItems));
+  return (
+    <span
+      data-slot="pagination-total"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationPageInfoProps {
+  className?: string;
+  /**
+   * Custom content. Receives `{ page, max }`, or pass a static ReactNode.
+   * @default `Página ${page} de ${max}`
+   */
+  children?: ReactNode | ((state: { page: number; max: number }) => ReactNode);
+}
+
+export function PaginationPageInfo({
+  children,
+  className,
+  ...props
+}: PaginationPageInfoProps) {
+  const { currentPage, maxPage, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children({ page: currentPage, max: maxPage })
+      : (children ?? texts.pageInfo(currentPage, maxPage));
+  return (
+    <span
+      data-slot="pagination-page-info"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationRangeProps {
+  className?: string;
+  /**
+   * Custom content. Receives `{ start, end, total }`, or pass a static ReactNode.
+   * @default `${start} - ${end} de ${total}`
+   */
+  children?:
+    | ReactNode
+    | ((state: { start: number; end: number; total: number }) => ReactNode);
+}
+
+export function PaginationRange({
+  children,
+  className,
+  ...props
+}: PaginationRangeProps) {
+  const { range, totalItems, texts } = usePaginationContext();
+  const content =
+    typeof children === "function"
+      ? children({ ...range, total: totalItems })
+      : (children ?? texts.range(range.start, range.end, totalItems));
+  return (
+    <span
+      data-slot="pagination-range"
+      className={cn("text-sm", className)}
+      {...props}
+    >
+      {content}
+    </span>
+  );
+}
+
+interface PaginationSizeSelectProps
+  extends Omit<ComponentProps<"select">, "value" | "onChange"> {
+  sizes?: readonly PageSize[] | PageSize[];
+}
+
+export function PaginationSizeSelect({
+  sizes = PAGINATION_SIZES,
+  className,
+  ...props
+}: PaginationSizeSelectProps) {
+  const { pageSize, setPageSize, goTo } = usePaginationContext();
+
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    const next = Number(event.target.value) as PageSize;
+    setPageSize(next);
+    goTo(1);
+  };
+
+  return (
+    <select
+      data-slot="pagination-size-select"
+      value={pageSize}
+      onChange={handleChange}
       className={cn(
-        "flex items-end select-none h-10",
-        containerProps?.className,
+        "border border-input rounded-md w-fit min-w-[3rem] bg-background p-2 ring-offset-background",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className,
       )}
-      data-slot="pagination"
+      {...props}
     >
-      <Option
-        {...optionProps}
-        disabled={isFirstPage}
-        onClick={() => goTo(1)}
-        className={cn("rounded-l-md", optionProps?.className)}
-      >
-        <ChevronsLeft data-slot="pagination-option-icon" />
-        <span className="sr-only">Ir a primera página</span>
-      </Option>
-
-      <Option {...optionProps} onClick={prev} disabled={isFirstPage}>
-        <ChevronLeft data-slot="pagination-option-icon" />
-        <span className="sr-only">Ir a página anterior</span>
-      </Option>
-
-      {paginationRange.map((pageNumber) => (
-        <>
-          {pageNumber === DOTS ? (
-            <Option
-              key={pageNumber}
-              className={cn("pointer-events-none", optionProps?.className)}
-            >
-              {DOTS}
-            </Option>
-          ) : (
-            <Option
-              {...optionProps}
-              isActive={pageNumber === currentPage}
-              onClick={() => goTo(pageNumber as number)}
-              key={pageNumber}
-            >
-              {pageNumber}
-              <span className="sr-only">Ir a la página {pageNumber}</span>
-            </Option>
-          )}
-        </>
+      {sizes.map((size) => (
+        <option key={size} value={size} data-slot="pagination-size-option">
+          {size}
+        </option>
       ))}
+    </select>
+  );
+}
 
-      <Option {...optionProps} onClick={next} disabled={isLastPage}>
-        <ChevronRight data-slot="pagination-option-icon" />
-        <span className="sr-only">Ir a próxima página</span>
-      </Option>
+interface PaginationProps extends Omit<PaginationRootProps, "children"> {
+  sizes?: readonly PageSize[] | PageSize[] | false;
+  selectClassName?: string;
+  rangeClassName?: string;
+  previousClassName?: string;
+  nextClassName?: string;
+}
 
-      <Option
-        {...optionProps}
-        disabled={isLastPage}
-        onClick={() => goTo(maxPage)}
-        className={cn("rounded-r-md", optionProps?.className)}
-      >
-        <ChevronsRight data-slot="pagination-option-icon" />
-        <span className="sr-only">Ir a última página</span>
-      </Option>
-    </div>
+export function Pagination({
+  sizes = PAGINATION_SIZES,
+  selectClassName,
+  rangeClassName,
+  previousClassName,
+  nextClassName,
+  className,
+  ...rootProps
+}: PaginationProps) {
+  return (
+    <PaginationRoot className={className} {...rootProps}>
+      {sizes && (
+        <PaginationSizeSelect
+          sizes={sizes as PageSize[]}
+          className={selectClassName}
+        />
+      )}
+      <PaginationRange className={rangeClassName} />
+      <PaginationPrevious className={previousClassName} />
+      <PaginationNext className={nextClassName} />
+    </PaginationRoot>
   );
+}
+
+export type {
+  GetPageHref,
+  LinkComponent,
+  LinkRenderProps,
+  PaginationContextValue,
+  PaginationProps,
+  PaginationRootProps,
+  PaginationTexts,
 };