@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

@@ -1,72 +0,0 @@
-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/DarkModeToggle.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

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

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

@@ -1,394 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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