@djangocfg/ui-nextjs 1.4.45

package/src/components/navigation-menu.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { cn } from "@djangocfg/ui-core/lib"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import Link from "next/link"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link> & {
+    href?: string
+  }
+>(({ href, children, ...props }, ref) => {
+  if (href) {
+    return (
+      <NavigationMenuPrimitive.Link asChild ref={ref} {...props}>
+        <Link href={href}>{children}</Link>
+      </NavigationMenuPrimitive.Link>
+    )
+  }
+
+  return (
+    <NavigationMenuPrimitive.Link ref={ref} {...props}>
+      {children}
+    </NavigationMenuPrimitive.Link>
+  )
+})
+NavigationMenuLink.displayName = "NavigationMenuLink"
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn("absolute top-full flex justify-center")}
+    style={{ left: 0, right: 0 }}
+  >
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] overflow-hidden rounded-md border backdrop-blur-xl bg-popover/80 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-10 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

package/src/components/pagination-static.tsx

@@ -0,0 +1,348 @@
+/**
+ * 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 React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { Button } from '@djangocfg/ui-core/components';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+/**
+ * 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

@@ -0,0 +1,138 @@
+import * as React from "react"
+import { cn } from "@djangocfg/ui-core/lib"
+import { type ButtonProps, buttonVariants } from "@djangocfg/ui-core/components"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import Link from "next/link"
+
+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,
+}