@djangocfg/ui-nextjs 1.4.45

package/src/components/breadcrumb-navigation.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import Link from 'next/link';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './breadcrumb';
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface BreadcrumbItem {
+  /** Display text for the breadcrumb */
+  label: string;
+  /** URL to navigate to. If not provided, item will be rendered as current page */
+  href?: string;
+  /** Whether this item is the current page (will be rendered as BreadcrumbPage) */
+  isCurrentPage?: boolean;
+  /** Optional icon to display before the label */
+  icon?: React.ReactNode;
+}
+
+export interface BreadcrumbNavigationProps {
+  /** Array of breadcrumb items */
+  items: BreadcrumbItem[];
+  /** Custom separator between items */
+  separator?: React.ReactNode;
+  /** Maximum number of items to show before collapsing with ellipsis */
+  maxItems?: number;
+  /** Custom className for the breadcrumb container */
+  className?: string;
+  /** Whether to use Next.js Link component for navigation */
+  useNextLink?: boolean;
+}
+
+export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
+  items,
+  separator,
+  maxItems = 5,
+  className,
+  useNextLink = true,
+}) => {
+  // Handle empty or single item cases
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  // Determine which items to show based on maxItems
+  const shouldCollapse = items.length > maxItems;
+  let displayItems: BreadcrumbItem[] = items;
+
+  if (shouldCollapse && items.length > 0) {
+    // Show first item, ellipsis, and last few items
+    if(items.length > 0) {
+        const firstItem = items[0]!;
+        const lastItems = items.slice(-(maxItems - 2)).filter(Boolean);
+        displayItems = [firstItem, ...lastItems];
+    }
+  }
+
+  const renderBreadcrumbItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
+    const isCurrentPage = item.isCurrentPage || isLast || !item.href;
+
+    const content = (
+      <>
+        {item.icon && <span className="mr-1">{item.icon}</span>}
+        {item.label}
+      </>
+    );
+
+    if (isCurrentPage) {
+      return (
+        <BreadcrumbItem key={`${item.label}-${index}`}>
+          <BreadcrumbPage>{content}</BreadcrumbPage>
+        </BreadcrumbItem>
+      );
+    }
+
+    return (
+      <BreadcrumbItem key={`${item.label}-${index}`}>
+        <BreadcrumbLink asChild={useNextLink}>
+          {useNextLink ? (
+            <Link href={item.href!}>{content}</Link>
+          ) : (
+            <a href={item.href!}>{content}</a>
+          )}
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+    );
+  };
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {displayItems.map((item, index) => {
+          const isLast = index === displayItems.length - 1;
+          const isFirst = index === 0;
+          
+          // Show ellipsis after first item if we collapsed items
+          if (shouldCollapse && isFirst && displayItems.length > 2) {
+            return (
+              <React.Fragment key={`fragment-${index}`}>
+                {renderBreadcrumbItem(item, index, isLast)}
+                <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
+                <BreadcrumbItem>
+                  <BreadcrumbEllipsis />
+                </BreadcrumbItem>
+                {!isLast && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <React.Fragment key={`fragment-${index}`}>
+              {renderBreadcrumbItem(item, index, isLast)}
+              {!isLast && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+BreadcrumbNavigation.displayName = 'BreadcrumbNavigation';

package/src/components/breadcrumb.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cn } from "@djangocfg/ui-core/lib"
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import Link from "next/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 ?? <ChevronRightIcon />}
+  </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}
+  >
+    <DotsHorizontalIcon 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/button-download.tsx

@@ -0,0 +1,275 @@
+"use client"
+
+import * as React from "react"
+import { Loader2, Download, CheckCircle2, AlertCircle } from "lucide-react"
+import { Button, type ButtonProps } from "@djangocfg/ui-core/components"
+import { cn } from "@djangocfg/ui-core/lib"
+import { useLocalStorage } from "../hooks/useLocalStorage"
+
+// Token key used by the API client
+const TOKEN_KEY = "auth_token"
+
+export interface DownloadButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /**
+   * URL to download from
+   */
+  url: string
+
+  /**
+   * Optional filename override. If not provided, will try to extract from Content-Disposition header
+   */
+  filename?: string
+
+  /**
+   * Optional callback when download starts
+   */
+  onDownloadStart?: () => void
+
+  /**
+   * Optional callback when download completes
+   */
+  onDownloadComplete?: (filename: string) => void
+
+  /**
+   * Optional callback when download fails
+   */
+  onDownloadError?: (error: Error) => void
+
+  /**
+   * Use fetch API for download (allows progress tracking and auth headers)
+   * Default: true
+   */
+  useFetch?: boolean
+
+  /**
+   * Show download status icons (loading, success, error)
+   * Default: true
+   */
+  showStatus?: boolean
+
+  /**
+   * Auto-reset status after success/error (in ms)
+   * Default: 2000
+   */
+  statusResetDelay?: number
+
+  /**
+   * Method for download (GET or POST)
+   * Default: GET
+   */
+  method?: 'GET' | 'POST'
+
+  /**
+   * Optional request body for POST requests
+   */
+  body?: any
+}
+
+type DownloadStatus = 'idle' | 'downloading' | 'success' | 'error'
+
+const DownloadButton = React.forwardRef<HTMLButtonElement, DownloadButtonProps>(
+  (
+    {
+      url,
+      filename,
+      onDownloadStart,
+      onDownloadComplete,
+      onDownloadError,
+      useFetch = true,
+      showStatus = true,
+      statusResetDelay = 2000,
+      method = 'GET',
+      body,
+      children,
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [status, setStatus] = React.useState<DownloadStatus>('idle')
+    const resetTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
+
+    // Get auth token from localStorage
+    const [token] = useLocalStorage<string>(TOKEN_KEY, '')
+
+    // Clean up timeout on unmount
+    React.useEffect(() => {
+      return () => {
+        if (resetTimeoutRef.current) {
+          clearTimeout(resetTimeoutRef.current)
+        }
+      }
+    }, [])
+
+    /**
+     * Extract filename from Content-Disposition header
+     */
+    const extractFilename = (headers: Headers): string | null => {
+      const disposition = headers.get('Content-Disposition')
+      if (!disposition) return null
+
+      // Try to match: filename*=UTF-8''example.txt or filename="example.txt"
+      const filenameMatch = disposition.match(/filename\*?=(?:UTF-8'')?["']?([^"';]+)["']?/i)
+      if (filenameMatch && filenameMatch[1]) {
+        return decodeURIComponent(filenameMatch[1])
+      }
+
+      return null
+    }
+
+    /**
+     * Trigger browser download for blob
+     */
+    const triggerDownload = (blob: Blob, downloadFilename: string) => {
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = downloadFilename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+    }
+
+    /**
+     * Reset status after delay
+     */
+    const scheduleStatusReset = () => {
+      if (resetTimeoutRef.current) {
+        clearTimeout(resetTimeoutRef.current)
+      }
+      resetTimeoutRef.current = setTimeout(() => {
+        setStatus('idle')
+      }, statusResetDelay)
+    }
+
+    /**
+     * Download using fetch API (supports auth, progress, error handling)
+     */
+    const downloadWithFetch = async () => {
+      try {
+        setStatus('downloading')
+        onDownloadStart?.()
+
+        const headers: HeadersInit = {}
+
+        // Add authorization header if token is available
+        if (token) {
+          headers['Authorization'] = `Bearer ${token}`
+        }
+
+        const options: RequestInit = {
+          method,
+          headers,
+        }
+
+        if (method === 'POST' && body) {
+          options.body = JSON.stringify(body)
+          options.headers = {
+            ...options.headers,
+            'Content-Type': 'application/json',
+          }
+        }
+
+        const response = await fetch(url, options)
+
+        if (!response.ok) {
+          throw new Error(`Download failed: ${response.status} ${response.statusText}`)
+        }
+
+        const blob = await response.blob()
+
+        // Determine filename
+        const downloadFilename =
+          filename ||
+          extractFilename(response.headers) ||
+          `download-${Date.now()}.bin`
+
+        // Trigger download
+        triggerDownload(blob, downloadFilename)
+
+        setStatus('success')
+        onDownloadComplete?.(downloadFilename)
+        scheduleStatusReset()
+      } catch (error) {
+        console.error('Download error:', error)
+        setStatus('error')
+        onDownloadError?.(error as Error)
+        scheduleStatusReset()
+      }
+    }
+
+    /**
+     * Simple download using window.open (fallback)
+     */
+    const downloadWithWindowOpen = () => {
+      try {
+        setStatus('downloading')
+        onDownloadStart?.()
+        window.open(url, '_blank')
+
+        // We can't really track success/failure with window.open
+        // So just assume success after a short delay
+        setTimeout(() => {
+          setStatus('success')
+          onDownloadComplete?.(filename || 'file')
+          scheduleStatusReset()
+        }, 500)
+      } catch (error) {
+        console.error('Download error:', error)
+        setStatus('error')
+        onDownloadError?.(error as Error)
+        scheduleStatusReset()
+      }
+    }
+
+    /**
+     * Handle download click
+     */
+    const handleDownload = () => {
+      if (status === 'downloading') return
+
+      if (useFetch) {
+        downloadWithFetch()
+      } else {
+        downloadWithWindowOpen()
+      }
+    }
+
+    /**
+     * Render status icon
+     */
+    const renderStatusIcon = () => {
+      if (!showStatus) return null
+
+      switch (status) {
+        case 'downloading':
+          return <Loader2 className="animate-spin" />
+        case 'success':
+          return <CheckCircle2 className="text-green-600" />
+        case 'error':
+          return <AlertCircle className="text-red-600" />
+        default:
+          return <Download />
+      }
+    }
+
+    return (
+      <Button
+        ref={ref}
+        onClick={handleDownload}
+        disabled={disabled || status === 'downloading'}
+        className={cn(className)}
+        {...props}
+      >
+        {renderStatusIcon()}
+        {children}
+      </Button>
+    )
+  }
+)
+
+DownloadButton.displayName = "DownloadButton"
+
+export { DownloadButton }