@djangocfg/ui-core 2.1.320 → 2.1.322

package/src/components/navigation/breadcrumb/breadcrumb-navigation.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import { Link } from '../link';
+import {
+    Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
+    BreadcrumbSeparator
+} from './breadcrumb';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  /**
+   * Force render as current page (non-interactive, aria-current="page").
+   * By default only the last item without href is treated as current page.
+   */
+  isCurrentPage?: boolean;
+  icon?: React.ReactNode;
+}
+
+export interface BreadcrumbNavigationProps {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+  /**
+   * Max visible items (excluding the ellipsis slot) before collapsing.
+   * Must be >= 2. Defaults to 5.
+   */
+  maxItems?: number;
+  className?: string;
+}
+
+type DisplayEntry =
+  | { type: 'item'; item: BreadcrumbItem; originalIndex: number }
+  | { type: 'ellipsis' };
+
+export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
+  items,
+  separator,
+  maxItems = 5,
+  className,
+}) => {
+  if (!items || items.length === 0) return null;
+
+  const clampedMax = Math.max(2, maxItems);
+
+  const entries: DisplayEntry[] = (() => {
+    if (items.length <= clampedMax) {
+      return items.map((item, i) => ({ type: 'item' as const, item, originalIndex: i }));
+    }
+    const tailCount = Math.max(1, clampedMax - 2);
+    const tail = items.slice(-tailCount).map((item, i) => ({
+      type: 'item' as const,
+      item,
+      originalIndex: items.length - tailCount + i,
+    }));
+    return [
+      { type: 'item' as const, item: items[0]!, originalIndex: 0 },
+      { type: 'ellipsis' as const },
+      ...tail,
+    ];
+  })();
+
+  const resolveIsCurrentPage = (item: BreadcrumbItem, originalIndex: number): boolean => {
+    if (item.isCurrentPage !== undefined) return item.isCurrentPage;
+    return originalIndex === items.length - 1;
+  };
+
+  const renderItem = (item: BreadcrumbItem, originalIndex: number) => {
+    const current = resolveIsCurrentPage(item, originalIndex);
+
+    const content = (
+      <>
+        {item.icon && <span className="mr-1">{item.icon}</span>}
+        {item.label}
+      </>
+    );
+
+    if (current) {
+      return (
+        <BreadcrumbItem key={`item-${originalIndex}`}>
+          <BreadcrumbPage>{content}</BreadcrumbPage>
+        </BreadcrumbItem>
+      );
+    }
+
+    return (
+      <BreadcrumbItem key={`item-${originalIndex}`}>
+        {item.href ? (
+          <BreadcrumbLink asChild>
+            <Link href={item.href}>{content}</Link>
+          </BreadcrumbLink>
+        ) : (
+          <BreadcrumbLink>{content}</BreadcrumbLink>
+        )}
+      </BreadcrumbItem>
+    );
+  };
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {entries.map((entry, displayIndex) => {
+          const isFirst = displayIndex === 0;
+
+          if (entry.type === 'ellipsis') {
+            return (
+              <React.Fragment key="ellipsis">
+                <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
+                <BreadcrumbItem>
+                  <BreadcrumbEllipsis />
+                </BreadcrumbItem>
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <React.Fragment key={`fragment-${entry.originalIndex}`}>
+              {!isFirst && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+              {renderItem(entry.item, entry.originalIndex)}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+BreadcrumbNavigation.displayName = 'BreadcrumbNavigation';

package/src/components/navigation/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib';
+import { Slot } from '@radix-ui/react-slot';
+import { Link } from '../link';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li"> & { key?: React.Key }
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+    href?: string
+  }
+>(({ asChild, className, href, children, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={cn("transition-colors hover:text-foreground", className)}
+        ref={ref}
+      >
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li"> & { key?: React.Key }) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/navigation/breadcrumb/index.ts

@@ -0,0 +1,15 @@
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb';
+
+export { BreadcrumbNavigation } from './breadcrumb-navigation';
+export type {
+  BreadcrumbItem as BreadcrumbNavigationItem,
+  BreadcrumbNavigationProps,
+} from './breadcrumb-navigation';

package/src/components/navigation/pagination/index.ts

@@ -0,0 +1,18 @@
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+
+export {
+  StaticPagination,
+  useDRFPagination,
+  useDRFPaginationInfo,
+} from './pagination-static';
+export type { DRFPaginatedResponse } from './pagination-static';
+
+export { SSRPagination } from './ssr-pagination';

package/src/components/navigation/pagination/pagination-static.tsx

@@ -0,0 +1,249 @@
+/**
+ * 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.
+ */
+
+"use client"
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../../../lib';
+import { Button } from '../../forms/button';
+import { useIsMobile } from '../../../hooks';
+
+import {
+    Pagination, PaginationContent, PaginationEllipsis, PaginationItem
+} from './pagination';
+
+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 {
+  data?: DRFPaginatedResponse | null;
+  onPageChange: (page: number) => void;
+  className?: string;
+  showInfo?: boolean;
+  maxVisiblePages?: number;
+}
+
+export const StaticPagination: React.FC<StaticPaginationProps> = ({
+  data,
+  onPageChange,
+  className,
+  showInfo = true,
+  maxVisiblePages = 7,
+}) => {
+  const isMobile = useIsMobile();
+
+  if (!data || !('count' in data) || !('page' in data) || !('pages' in data)) {
+    return null;
+  }
+
+  const {
+    count: totalItems,
+    page: currentPage,
+    pages: totalPages,
+    page_size: itemsPerPage,
+    has_next: hasNextPage,
+    has_previous: hasPreviousPage,
+  } = data;
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const getVisiblePages = (): (number | 'ellipsis')[] => {
+    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) {
+      if (currentPage > 1) {
+        pages.push(currentPage - 1);
+      }
+      pages.push(currentPage);
+      if (currentPage < totalPages) {
+        pages.push(currentPage + 1);
+      }
+    } else {
+      pages.push(1);
+
+      let start = Math.max(2, currentPage - halfVisible);
+      let end = Math.min(totalPages - 1, currentPage + halfVisible);
+
+      if (currentPage <= halfVisible + 1) {
+        end = Math.min(totalPages - 1, effectiveMaxVisible - 1);
+      } else if (currentPage >= totalPages - halfVisible) {
+        start = Math.max(2, totalPages - effectiveMaxVisible + 2);
+      }
+
+      if (start > 2) {
+        pages.push('ellipsis');
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (end < totalPages - 1) {
+        pages.push('ellipsis');
+      }
+
+      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)}>
+      {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>
+        <PaginationContent>
+          <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>
+
+          {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>
+          ))}
+
+          <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';
+
+export function useDRFPagination(initialPage = 1, initialPageSize = 10) {
+  const [page, setPage] = React.useState(initialPage);
+  const [pageSize, setPageSize] = React.useState(initialPageSize);
+
+  const handlePageSizeChange = React.useCallback((newPageSize: number) => {
+    setPageSize(newPageSize);
+    setPage(1);
+  }, []);
+
+  const params = React.useMemo(() => ({
+    page,
+    page_size: pageSize,
+  }), [page, pageSize]);
+
+  return {
+    page,
+    pageSize,
+    setPage,
+    setPageSize: handlePageSizeChange,
+    params,
+    reset: () => {
+      setPage(initialPage);
+      setPageSize(initialPageSize);
+    },
+  };
+}
+
+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/navigation/pagination/pagination.tsx

@@ -0,0 +1,139 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '../../../lib';
+import { type ButtonProps, buttonVariants } from '../../forms/button';
+import { Link } from '../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,
+}