@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

package/src/atoms/composed/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { cn } from '../../utils/utils';
+
+export interface ColorSwatchProps {
+  /** CSS color value (hex, hsl, rgb, or CSS variable) */
+  color: string;
+  /** Display name for the color */
+  name: string;
+  /** Optional size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Optional label to show below the swatch */
+  label?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the swatch is interactive */
+  interactive?: boolean;
+  /** Click handler for interactive swatches */
+  onClick?: () => void;
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({
+  color,
+  name,
+  size = 'md',
+  label,
+  className,
+  interactive = false,
+  onClick
+}) => {
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-16 h-16', 
+    lg: 'w-24 h-24'
+  };
+
+  const labelSizes = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base'
+  };
+
+  return (
+    <div 
+      className={cn(
+        'flex flex-col items-center space-y-2',
+        interactive && 'cursor-pointer group',
+        className
+      )}
+      data-component-name="ColorSwatch"
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          'rounded border border-border/20 flex items-center justify-center text-white font-medium',
+          sizeClasses[size],
+          interactive && 'transition-all hover:scale-105 hover:shadow group-hover:border-border'
+        )}
+        style={{ backgroundColor: color }}
+        title={`${name}: ${color}`}
+      >
+        {size === 'lg' && <span className="text-sm">{name}</span>}
+      </div>
+      
+      {label && (
+        <div className={cn('text-center space-y-1', labelSizes[size])}>
+          <div className="font-medium text-foreground">{label}</div>
+          <div className="text-muted-foreground font-mono text-xs">{color}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/atoms/composed/ColorSwatch/index.ts

@@ -0,0 +1 @@
+export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch';

package/src/atoms/composed/DarkModeToggle.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { cn } from '../utils/utils';
+
+export const DarkModeToggle = ({ className }: { className?: string }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check for saved preference or system preference
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+      setIsDark(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      setIsDark(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+      setIsDark(false);
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+      setIsDark(true);
+    }
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className={cn(
+        "relative inline-flex h-10 w-20 items-center justify-center rounded-full",
+        "bg-muted dark:bg-muted",
+        "transition-all",
+        "hover:bg-muted/80 dark:hover:bg-muted/80",
+        "focus:outline-none focus:ring-2 focus:ring-primary",
+        className
+      )}
+      data-component-name="DarkModeToggle"
+      data-state={isDark ? 'dark' : 'light'}
+      aria-label="Toggle dark mode"
+    >
+      <span
+        className={cn(
+          "absolute left-1 inline-flex h-8 w-8 items-center justify-center rounded-full",
+          "bg-background dark:bg-background",
+          "shadow transition-transform",
+          isDark && "translate-x-10"
+        )}
+        data-component-name="DarkModeToggleThumb"
+      >
+        {isDark ? (
+          <Moon className="h-4 w-4 text-category-4" data-component-name="DarkModeToggleIcon" />
+        ) : (
+          <Sun className="h-4 w-4 text-category-3" data-component-name="DarkModeToggleIcon" />
+        )}
+      </span>
+    </button>
+  );
+};

package/src/atoms/composed/DataBadge/DataBadge.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { cn, useTextOverflow } from '../../utils/utils';
+import { Tooltip } from '../Tooltip';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface DataBadgeProps {
+  children: React.ReactNode;
+  variant?: 'category' | 'status';
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  size?: 'sm' | 'md' | 'lg';
+  interactive?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const DataBadge = ({  
+  children,
+  variant = 'category',
+  category = 1,
+  status = 'neutral',
+  size = 'md',
+  interactive = false,
+  onClick,
+  className
+}: DataBadgeProps) => {
+  const { ref, isOverflowing } = useTextOverflow();
+
+  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
+    sm: 'px-2 py-0.5 text-xs h-5 min-w-[1.5rem] max-w-[150px]',
+    md: 'px-2.5 py-1 text-sm h-7 min-w-[2rem] max-w-[200px]',
+    lg: 'px-3 py-1.5 text-base h-9 min-w-[2.5rem] max-w-[250px]',
+  };
+
+  const baseClasses = cn(
+    'inline-flex items-center font-medium rounded-lg border truncate',
+    sizeClasses[size],
+    interactive && [
+      'cursor-pointer',
+      getAnimationClasses({
+        ...animationPresets.dataBadge,
+        size: size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'
+      })
+    ],
+    className
+  );
+
+  const variantClasses = variant === 'category' 
+    ? `badge-category-${category}`
+    : `status-${status}`;
+
+  const badge = (
+    <span 
+      ref={ref as React.RefObject<HTMLSpanElement>}
+      className={cn(baseClasses, variantClasses, 'animate-fade-in')}
+      onClick={onClick}
+      role={interactive ? 'button' : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      onKeyDown={interactive ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      } : undefined}
+      data-component-name="DataBadge"
+    >
+      {children}
+    </span>
+  );
+
+  // Show tooltip when text is truncated
+  if (isOverflowing && typeof children === 'string') {
+    return (
+      <Tooltip content={children} position="top" size="sm">
+        {badge}
+      </Tooltip>
+    );
+  }
+
+  return badge;
+};

package/src/atoms/composed/DataBadge/index.ts

@@ -0,0 +1 @@
+export * from './DataBadge';

package/src/atoms/composed/DataTable/DataTable.tsx

@@ -0,0 +1,394 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../ui/table';
+import { Input } from '../../ui/input';
+import { Button } from '../../ui/button';
+import { Skeleton } from '../../ui/skeleton';
+import { DataBadge } from '../DataBadge';
+import { cn, tooltipContent } from '../../utils/utils';
+import type { IListLoadable } from '../../types';
+import { 
+  ChevronDown, 
+  ChevronUp, 
+  ChevronsUpDown,
+  Search,
+  X
+} from 'lucide-react';
+
+export interface Column<T> {
+  key: string;
+  header: string | React.ReactNode;
+  cell?: (item: T) => React.ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+  width?: string;
+  /** Auto-render badges for status/category columns */
+  type?: 'status' | 'category' | 'default';
+}
+
+interface DataTableProps<T> extends IListLoadable {
+  data: T[];
+  columns: Column<T>[];
+  searchPlaceholder?: string;
+  pageSize?: number;
+  showPagination?: boolean;
+  showSearch?: boolean;
+  onRowClick?: (item: T) => void;
+  emptyMessage?: string;
+  className?: string;
+  /** Enable hover effects on table rows */
+  hover?: boolean;
+}
+
+type SortDirection = 'asc' | 'desc' | null;
+
+export function DataTable<T extends Record<string, unknown>>({
+  data,
+  columns,
+  searchPlaceholder = "Search...",
+  pageSize = 10,
+  showPagination = true,
+  showSearch = true,
+  onRowClick,
+  emptyMessage = "No data available",
+  className = "",
+  hover = false,
+  isLoading = false,
+  loadingItemCount = 5
+}: DataTableProps<T>) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Filter data based on search term
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return data;
+    
+    return data.filter(item => {
+      const searchableColumns = columns.filter(col => col.filterable !== false);
+      return searchableColumns.some(col => {
+        const value = item[col.key];
+        if (value === null || value === undefined) return false;
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    });
+  }, [data, searchTerm, columns]);
+
+  // Sort data
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) return filteredData;
+    
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortColumn];
+      const bVal = b[sortColumn];
+      
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+      
+      const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredData, sortColumn, sortDirection]);
+
+  // Paginate data
+  const paginatedData = useMemo(() => {
+    if (!showPagination) return sortedData;
+    
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return sortedData.slice(start, end);
+  }, [sortedData, currentPage, pageSize, showPagination]);
+
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+
+  const handleSort = (columnKey: string) => {
+    if (sortColumn === columnKey) {
+      if (sortDirection === 'asc') {
+        setSortDirection('desc');
+      } else if (sortDirection === 'desc') {
+        setSortDirection(null);
+        setSortColumn(null);
+      }
+    } else {
+      setSortColumn(columnKey);
+      setSortDirection('asc');
+    }
+  };
+
+  const getSortIcon = (columnKey: string) => {
+    if (sortColumn !== columnKey) {
+      return <ChevronsUpDown className="w-4 h-4 text-muted-foreground" />;
+    }
+    if (sortDirection === 'asc') {
+      return <ChevronUp className="w-4 h-4" />;
+    }
+    return <ChevronDown className="w-4 h-4" />;
+  };
+
+  // Smart cell renderer that auto-detects and renders badges
+  const renderCell = (column: Column<T>, item: T) => {
+    // If custom cell renderer is provided, use it
+    if (column.cell) {
+      return column.cell(item);
+    }
+
+    const value = item[column.key];
+    
+    // Auto-detect column type from key name if not specified
+    const columnType = column.type || (
+      column.key.toLowerCase().includes('status') ? 'status' :
+      column.key.toLowerCase().includes('category') ? 'category' :
+      'default'
+    );
+
+    // Render badges for status and category columns
+    if (columnType === 'status' && typeof value === 'string') {
+      const status = value as 'success' | 'warning' | 'error' | 'info' | 'neutral';
+      return (
+        <DataBadge variant="status" status={status} size="sm">
+          {value.toString()}
+        </DataBadge>
+      );
+    }
+
+    if (columnType === 'category') {
+      // For category, try to map value to category number (1-8)
+      const categoryMap: Record<string, number> = {
+        'Analytics': 1, 'Finance': 2, 'Product': 3, 'Sales': 4,
+        'Marketing': 5, 'Operations': 6, 'Engineering': 7, 'Data': 8
+      };
+      const categoryNum = typeof value === 'string' ? categoryMap[value] || 1 : 1;
+      
+      return (
+        <DataBadge variant="category" category={categoryNum as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8} size="sm">
+          {value?.toString()}
+        </DataBadge>
+      );
+    }
+
+    // Default rendering
+    return value?.toString() || '-';
+  };
+
+  // Loading state skeleton that matches DataTable dimensions
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} data-component-name="DataTable">
+        {/* Search bar skeleton */}
+        {showSearch && (
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1 max-w-sm">
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </div>
+        )}
+
+        {/* Table skeleton */}
+        <div className="rounded border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {columns.map(column => (
+                  <TableHead key={column.key} style={{ width: column.width }}>
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: loadingItemCount }, (_, index) => (
+                <TableRow key={index}>
+                  {columns.map(column => (
+                    <TableCell key={column.key}>
+                      <Skeleton className="h-4 w-full max-w-32" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Pagination skeleton */}
+        {showPagination && (
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-4 w-48" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-20" />
+              <div className="flex items-center gap-1">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-8 w-8" />
+                ))}
+              </div>
+              <Skeleton className="h-8 w-16" />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-4", className)} data-component-name="DataTable">
+      {/* Search bar */}
+      {showSearch && (
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" data-component-name="DataTableSearch" />
+            <Input
+              type="text"
+              placeholder={searchPlaceholder}
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-10 pr-10"
+            />
+            {searchTerm && (
+              <Button
+                onClick={() => {
+                  setSearchTerm('');
+                  setCurrentPage(1);
+                }}
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8"
+                tooltip={tooltipContent.clearSearch}
+              >
+                <X className="w-4 h-4" data-component-name="DataTableClear" />
+              </Button>
+            )}
+          </div>
+          {searchTerm && (
+            <div className="text-muted-foreground text-sm">
+              {sortedData.length} result{sortedData.length !== 1 ? 's' : ''}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="rounded border overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map(column => (
+                <TableHead 
+                  key={column.key}
+                  style={{ width: column.width }}
+                  className={column.sortable !== false && typeof column.header === 'string' ? 'cursor-pointer select-none' : ''}
+                  onClick={() => column.sortable !== false && typeof column.header === 'string' && handleSort(column.key)}
+                >
+                  <div className="flex items-center gap-2">
+                    {typeof column.header === 'string' ? (
+                      <>
+                        <span>{column.header}</span>
+                        {column.sortable !== false && getSortIcon(column.key)}
+                      </>
+                    ) : (
+                      column.header
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell 
+                  colSpan={columns.length} 
+                  className="text-center py-8 text-muted-foreground"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((item, index) => (
+                <TableRow 
+                  key={index}
+                  className={cn(
+                    onRowClick && 'cursor-pointer',
+                    (hover || onRowClick) && 'hover:bg-muted/50'
+                  )}
+                  onClick={() => onRowClick?.(item)}
+                >
+                  {columns.map(column => (
+                    <TableCell key={column.key}>
+                      {renderCell(column, item)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {showPagination && totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">
+            Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, sortedData.length)} of {sortedData.length} entries
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+              disabled={currentPage === 1}
+              tooltip={tooltipContent.previous}
+            >
+              Previous
+            </Button>
+            <div className="flex items-center gap-1">
+              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                let pageNum;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (currentPage <= 3) {
+                  pageNum = i + 1;
+                } else if (currentPage >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = currentPage - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={currentPage === pageNum ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(pageNum)}
+                    className="w-8 h-8"
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+              disabled={currentPage === totalPages}
+              tooltip={tooltipContent.next}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/atoms/composed/DataTable/TableCellWithTooltip.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TableCell } from '../../ui/table';
+import { Tooltip } from '../Tooltip';
+import { useTextOverflow } from '../../utils/utils';
+
+interface TableCellWithTooltipProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Maximum width before truncating */
+  maxWidth?: string;
+}
+
+export const TableCellWithTooltip: React.FC<TableCellWithTooltipProps> = ({
+  children,
+  className,
+  maxWidth = '200px'
+}) => {
+  const { ref, isOverflowing } = useTextOverflow();
+  
+  const cellContent = (
+    <div 
+      ref={ref as React.RefObject<HTMLDivElement>}
+      className="truncate"
+      style={{ maxWidth }}
+    >
+      {children}
+    </div>
+  );
+
+  return (
+    <TableCell className={className}>
+      {isOverflowing && typeof children === 'string' ? (
+        <Tooltip content={children} position="top" size="sm">
+          {cellContent}
+        </Tooltip>
+      ) : (
+        cellContent
+      )}
+    </TableCell>
+  );
+};

package/src/atoms/composed/DataTable/index.ts

@@ -0,0 +1,2 @@
+export * from './DataTable';
+export * from './TableCellWithTooltip';