@djangocfg/ui-nextjs 2.1.319 → 2.1.321

package/src/components/pagination-static.tsx

@@ -1,344 +0,0 @@
-/**
- * DRF Static Pagination Component
- *
- * Universal pagination component that works with Django REST Framework pagination format.
- * Manages page state internally and provides callbacks for page changes.
- *
- * DRF Pagination Response Format:
- * {
- *   "count": 150,           // Total number of items
- *   "page": 1,              // Current page number
- *   "pages": 15,            // Total number of pages
- *   "page_size": 10,        // Items per page
- *   "has_next": true,       // Whether there's a next page
- *   "has_previous": false,  // Whether there's a previous page
- *   "next_page": 2,         // Next page number (or null)
- *   "previous_page": null,  // Previous page number (or null)
- *   "results": [...]        // Array of items
- * }
- *
- * Usage with SWR:
- * ```tsx
- * import { StaticPagination, useDRFPagination } from '@djangocfg/ui-nextjs';
- *
- * function MyComponent() {
- *   const pagination = useDRFPagination();
- *   const { data, isLoading } = useMyAPI(pagination.params);
- *
- *   return (
- *     <div>
- *       {data?.results?.map(item => <Item key={item.id} {...item} />)}
- *       <StaticPagination data={data} onPageChange={pagination.setPage} />
- *     </div>
- *   );
- * }
- * ```
- */
-
-"use client"
-
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import React from 'react';
-
-import { Button } from '@djangocfg/ui-core/components';
-import { useIsMobile } from '@djangocfg/ui-core/hooks';
-import { cn } from '@djangocfg/ui-core/lib';
-
-import {
-    Pagination, PaginationContent, PaginationEllipsis, PaginationItem
-} from './pagination';
-
-/**
- * DRF Pagination Response type
- */
-export interface DRFPaginatedResponse<T = any> {
-  count: number;
-  page: number;
-  pages: number;
-  page_size: number;
-  has_next: boolean;
-  has_previous: boolean;
-  next_page?: number | null;
-  previous_page?: number | null;
-  results: T[];
-}
-
-interface StaticPaginationProps {
-  /** The DRF paginated response data */
-  data?: DRFPaginatedResponse | null;
-  /** Callback when page changes */
-  onPageChange: (page: number) => void;
-  /** Additional CSS class */
-  className?: string;
-  /** Show pagination info (default: true) */
-  showInfo?: boolean;
-  /** Maximum visible page numbers (default: 7) */
-  maxVisiblePages?: number;
-}
-
-export const StaticPagination: React.FC<StaticPaginationProps> = ({
-  data,
-  onPageChange,
-  className,
-  showInfo = true,
-  maxVisiblePages = 7,
-}) => {
-  const isMobile = useIsMobile();
-
-  // Don't render if no data or not paginated
-  if (!data || !('count' in data) || !('page' in data) || !('pages' in data)) {
-    return null;
-  }
-
-  // Extract pagination metadata
-  const {
-    count: totalItems,
-    page: currentPage,
-    pages: totalPages,
-    page_size: itemsPerPage,
-    has_next: hasNextPage,
-    has_previous: hasPreviousPage,
-  } = data;
-
-  // Don't render if only one page
-  if (totalPages <= 1) {
-    return null;
-  }
-
-  // Generate array of page numbers to display
-  const getVisiblePages = (): (number | 'ellipsis')[] => {
-    // On mobile, show fewer pages
-    const mobileMaxVisible = 3;
-    const effectiveMaxVisible = isMobile ? mobileMaxVisible : maxVisiblePages;
-
-    if (totalPages <= effectiveMaxVisible) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-
-    const pages: (number | 'ellipsis')[] = [];
-    const halfVisible = Math.floor(effectiveMaxVisible / 2);
-
-    if (isMobile) {
-      // Mobile: Show only current page and adjacent pages
-      if (currentPage > 1) {
-        pages.push(currentPage - 1);
-      }
-      pages.push(currentPage);
-      if (currentPage < totalPages) {
-        pages.push(currentPage + 1);
-      }
-    } else {
-      // Desktop: Full pagination logic
-      // Always show first page
-      pages.push(1);
-
-      let start = Math.max(2, currentPage - halfVisible);
-      let end = Math.min(totalPages - 1, currentPage + halfVisible);
-
-      // Adjust range if we're near the beginning or end
-      if (currentPage <= halfVisible + 1) {
-        end = Math.min(totalPages - 1, effectiveMaxVisible - 1);
-      } else if (currentPage >= totalPages - halfVisible) {
-        start = Math.max(2, totalPages - effectiveMaxVisible + 2);
-      }
-
-      // Add ellipsis after first page if needed
-      if (start > 2) {
-        pages.push('ellipsis');
-      }
-
-      // Add middle pages
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      // Add ellipsis before last page if needed
-      if (end < totalPages - 1) {
-        pages.push('ellipsis');
-      }
-
-      // Always show last page (if more than 1 page)
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
-  const visiblePages = getVisiblePages();
-  const startItem = (currentPage - 1) * itemsPerPage + 1;
-  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-
-  const handlePageClick = (page: number) => {
-    if (page !== currentPage && page >= 1 && page <= totalPages) {
-      onPageChange(page);
-    }
-  };
-
-  return (
-    <div className={cn("space-y-4", className)}>
-      {/* Pagination Info */}
-      {showInfo && (
-        <div className="text-sm text-muted-foreground text-center">
-          {isMobile ? (
-            `Page ${currentPage} of ${totalPages}`
-          ) : (
-            `Showing ${startItem.toLocaleString()} to ${endItem.toLocaleString()} of ${totalItems.toLocaleString()} results`
-          )}
-        </div>
-      )}
-
-      {/* Pagination Controls */}
-      <Pagination>
-        <PaginationContent>
-          {/* Previous Button */}
-          <PaginationItem>
-            <Button
-              variant="ghost"
-              size="default"
-              onClick={() => handlePageClick(currentPage - 1)}
-              disabled={!hasPreviousPage}
-              className={cn(
-                "gap-1 pl-2.5",
-                !hasPreviousPage && "pointer-events-none opacity-50"
-              )}
-              aria-label="Go to previous page"
-            >
-              <ChevronLeft className="h-4 w-4" />
-              <span>Previous</span>
-            </Button>
-          </PaginationItem>
-
-          {/* Page Numbers */}
-          {visiblePages.map((page, index) => (
-            <PaginationItem key={index}>
-              {page === 'ellipsis' ? (
-                <PaginationEllipsis />
-              ) : (
-                <Button
-                  variant={page === currentPage ? "outline" : "ghost"}
-                  size="icon"
-                  onClick={() => handlePageClick(page)}
-                  aria-current={page === currentPage ? "page" : undefined}
-                  className={cn(
-                    page === currentPage && "pointer-events-none"
-                  )}
-                >
-                  {page}
-                </Button>
-              )}
-            </PaginationItem>
-          ))}
-
-          {/* Next Button */}
-          <PaginationItem>
-            <Button
-              variant="ghost"
-              size="default"
-              onClick={() => handlePageClick(currentPage + 1)}
-              disabled={!hasNextPage}
-              className={cn(
-                "gap-1 pr-2.5",
-                !hasNextPage && "pointer-events-none opacity-50"
-              )}
-              aria-label="Go to next page"
-            >
-              <span>Next</span>
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </div>
-  );
-};
-
-StaticPagination.displayName = 'StaticPagination';
-
-/**
- * Hook to manage DRF pagination state
- *
- * Manages page and page_size state and provides methods to change them.
- * Works seamlessly with SWR hooks that accept params.
- *
- * Usage:
- * ```tsx
- * import { useDRFPagination } from '@djangocfg/ui-nextjs';
- * import { useMyPaginatedAPI } from './api/hooks';
- *
- * function MyComponent() {
- *   const pagination = useDRFPagination();
- *   const { data, isLoading } = useMyPaginatedAPI(pagination.params);
- *
- *   return (
- *     <div>
- *       {data?.results?.map(item => <Item key={item.id} {...item} />)}
- *       <StaticPagination data={data} onPageChange={pagination.setPage} />
- *     </div>
- *   );
- * }
- * ```
- */
-export function useDRFPagination(initialPage = 1, initialPageSize = 10) {
-  const [page, setPage] = React.useState(initialPage);
-  const [pageSize, setPageSize] = React.useState(initialPageSize);
-
-  // Reset to page 1 when page size changes
-  const handlePageSizeChange = React.useCallback((newPageSize: number) => {
-    setPageSize(newPageSize);
-    setPage(1);
-  }, []);
-
-  // Params object that can be passed directly to SWR hooks
-  const params = React.useMemo(() => ({
-    page,
-    page_size: pageSize,
-  }), [page, pageSize]);
-
-  return {
-    page,
-    pageSize,
-    setPage,
-    setPageSize: handlePageSizeChange,
-    params,
-    reset: () => {
-      setPage(initialPage);
-      setPageSize(initialPageSize);
-    },
-  };
-}
-
-/**
- * Hook to extract pagination info from DRF response
- *
- * Useful when you need pagination metadata in your component logic.
- *
- * Usage:
- * ```tsx
- * const paginationInfo = useDRFPaginationInfo(data);
- * if (paginationInfo) {
- *   console.log(`Page ${paginationInfo.currentPage} of ${paginationInfo.totalPages}`);
- * }
- * ```
- */
-export function useDRFPaginationInfo(data?: DRFPaginatedResponse | null) {
-  return React.useMemo(() => {
-    if (!data || !('count' in data) || !('page' in data)) {
-      return null;
-    }
-
-    return {
-      totalItems: data.count,
-      currentPage: data.page,
-      totalPages: data.pages,
-      itemsPerPage: data.page_size,
-      hasNext: data.has_next,
-      hasPrevious: data.has_previous,
-      nextPage: data.next_page,
-      previousPage: data.previous_page,
-      results: data.results || [],
-      resultsCount: data.results?.length || 0,
-    };
-  }, [data]);
-}

package/src/components/pagination.tsx

@@ -1,138 +0,0 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
-
-import { ButtonProps, Link, buttonVariants } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-)
-Pagination.displayName = "Pagination"
-
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
-
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li"> & { key?: React.Key }
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
-
-type PaginationLinkProps = {
-  isActive?: boolean
-  href?: string
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
-
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  href,
-  children,
-  ...props
-}: PaginationLinkProps) => {
-  const classes = cn(
-    buttonVariants({
-      variant: isActive ? "outline" : "ghost",
-      size,
-    }),
-    className
-  )
-
-  if (href) {
-    return (
-      <Link
-        href={href}
-        aria-current={isActive ? "page" : undefined}
-        className={classes}
-      >
-        {children}
-      </Link>
-    )
-  }
-
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      className={classes}
-      {...props}
-    >
-      {children}
-    </a>
-  )
-}
-PaginationLink.displayName = "PaginationLink"
-
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
-
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
-
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}