@jmruthers/pace-core 0.5.136 → 0.5.139

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,304 @@
+/**
+ * @file Badge Component
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A small, non-interactive visual label component for displaying concise information
+ * such as status indicators, tags, or labels. Acts as a visual alternative to buttons
+ * for non-interactive content.
+ *
+ * Features:
+ * - 27 combined variants (3 styles × 3 colors × 3 shades)
+ * - Non-interactive by default (renders as <span>)
+ * - Supports all pace-core color palettes (main, sec, acc)
+ * - Customizable styling via className prop
+ * - Accessible and screen reader friendly
+ *
+ * @example
+ * ```tsx
+ * // Basic badge with default variant
+ * <Badge>New</Badge>
+ *
+ * // Badge with specific variant
+ * <Badge variant="solid-main-normal">Active</Badge>
+ *
+ * // Outline variant
+ * <Badge variant="outline-sec-muted">Pending</Badge>
+ *
+ * // Soft variant with accent color
+ * <Badge variant="soft-acc-strong">Featured</Badge>
+ *
+ * // Custom styling
+ * <Badge variant="solid-main-normal" className="px-4">
+ *   Custom Badge
+ * </Badge>
+ * ```
+ *
+ * @accessibility
+ * - Renders as semantic <span> element
+ * - No focus styles (non-interactive by default)
+ * - Screen reader friendly through semantic HTML
+ * - Can be wrapped in interactive elements if needed
+ */
+
+import * as React from 'react';
+import { cn } from '../../utils/core/cn';
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+export type BadgeVariant =
+  | 'solid-main-muted' | 'solid-main-normal' | 'solid-main-strong'
+  | 'solid-sec-muted' | 'solid-sec-normal' | 'solid-sec-strong'
+  | 'solid-acc-muted' | 'solid-acc-normal' | 'solid-acc-strong'
+  | 'outline-main-muted' | 'outline-main-normal' | 'outline-main-strong'
+  | 'outline-sec-muted' | 'outline-sec-normal' | 'outline-sec-strong'
+  | 'outline-acc-muted' | 'outline-acc-normal' | 'outline-acc-strong'
+  | 'soft-main-muted' | 'soft-main-normal' | 'soft-main-strong'
+  | 'soft-sec-muted' | 'soft-sec-normal' | 'soft-sec-strong'
+  | 'soft-acc-muted' | 'soft-acc-normal' | 'soft-acc-strong';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Visual variant of the badge (style-color-shade) */
+  variant?: BadgeVariant;
+}
+
+// ============================================================================
+// VARIANT CONFIGURATION
+// ============================================================================
+
+/**
+ * Shade configuration mapping
+ * Maps shade names to background, text, border, and outline text color shades
+ */
+const shadeConfig = {
+  muted: {
+    bg: 200,
+    text: 600,
+    border: 400,
+    outlineText: 600,
+    outlineBg: 100,
+  },
+  normal: {
+    bg: 500,
+    text: 50,
+    border: 700,
+    outlineText: 700,
+    outlineBg: 200,
+  },
+  strong: {
+    bg: 700,
+    text: 50,
+    border: 800,
+    outlineText: 900,
+    outlineBg: 400,
+  },
+} as const;
+
+type Shade = keyof typeof shadeConfig;
+
+/**
+ * Color palette options
+ */
+const colors = ['main', 'sec', 'acc'] as const;
+type Color = typeof colors[number];
+
+/**
+ * Style options
+ */
+const styles = ['solid', 'outline', 'soft'] as const;
+type Style = typeof styles[number];
+
+/**
+ * Build variant class string for a given style, color, and shade
+ * Generates classes programmatically from configuration
+ */
+function buildVariantClasses(style: Style, color: Color, shade: Shade): string {
+  const cfg = shadeConfig[shade];
+  const parts: string[] = [];
+  
+  if (style === 'solid') {
+    // Solid: flat background colors
+    parts.push(`bg-${color}-${cfg.bg}`, `text-${color}-${cfg.text}`);
+  } else if (style === 'outline') {
+    // Outline: outlined with light background
+    parts.push('outline outline-1 -outline-offset-1', `outline-${color}-${cfg.border}`, `bg-${color}-${cfg.outlineBg}`, `text-${color}-${cfg.outlineText}`);
+  } else if (style === 'soft') {
+    // Soft: uses shadow-badge-soft utility with colored shadows
+    parts.push(
+      `bg-${color}-${cfg.bg}`,
+      'shadow-badge-soft',
+      `shadow-${color}-${cfg.bg}`,
+      `text-${color}-${cfg.text}`,
+      'my-1', 'mx-1', 'py-0', 'px-2'
+    );
+  }
+  
+  return parts.join(' ');
+}
+
+/**
+ * Generate all class name patterns for Tailwind scanning
+ * This ensures Tailwind can detect all dynamically generated classes
+ * 
+ * Tailwind v4 content scanning: These classes are listed here so Tailwind
+ * can detect them during content scanning, even when built dynamically.
+ * 
+ * Classes used: shadow-badge-soft shadow-main-200 shadow-main-500 shadow-main-700
+ * shadow-sec-200 shadow-sec-500 shadow-sec-700 shadow-acc-200 shadow-acc-500 shadow-acc-700
+ */
+const tailwindClassScan = [
+  // Solid background classes
+  'bg-main-100', 'bg-main-600', 'bg-main-900',
+  'bg-sec-100', 'bg-sec-600', 'bg-sec-900',
+  'bg-acc-100', 'bg-acc-600', 'bg-acc-900',
+  // Solid text classes
+  'text-main-50', 'text-main-900',
+  'text-sec-50', 'text-sec-900',
+  'text-acc-50', 'text-acc-900',
+  // Outline classes
+  'outline outline-1',
+  'outline-main-400', 'outline-main-700', 'outline-main-800',
+  'outline-sec-400', 'outline-sec-700', 'outline-sec-800',
+  'outline-acc-400', 'outline-acc-700', 'outline-acc-800',
+  // Outline background classes
+  'bg-main-100', 'bg-main-200', 'bg-main-300',
+  'bg-sec-100', 'bg-sec-200', 'bg-sec-300',
+  'bg-acc-100', 'bg-acc-200', 'bg-acc-300',
+  // Outline text classes
+  'text-main-500', 'text-main-600', 'text-main-800',
+  'text-sec-500', 'text-sec-600', 'text-sec-800',
+  'text-acc-500', 'text-acc-600', 'text-acc-800',
+  // Soft background classes (solid, no opacity)
+  'bg-main-200', 'bg-main-500', 'bg-main-700',
+  'bg-sec-200', 'bg-sec-500', 'bg-sec-700',
+  'bg-acc-200', 'bg-acc-500', 'bg-acc-700',
+  // Soft shadow utility classes - CRITICAL: These must be detected by Tailwind
+  'shadow-badge-soft',
+  'shadow-main-200', 'shadow-main-500', 'shadow-main-700',
+  'shadow-sec-200', 'shadow-sec-500', 'shadow-sec-700',
+  'shadow-acc-200', 'shadow-acc-500', 'shadow-acc-700',
+  // Soft margin/padding classes
+  'my-3', 'mx-3', 'py-0', 'px-2',
+] as const;
+
+/**
+ * Generate all variant class combinations programmatically
+ * Uses the configuration to build the lookup map dynamically
+ */
+function generateVariantClasses(): Record<BadgeVariant, string> {
+  const variantClasses = {} as Record<BadgeVariant, string>;
+  
+  for (const style of styles) {
+    for (const color of colors) {
+      for (const shade of Object.keys(shadeConfig) as Shade[]) {
+        const variant = `${style}-${color}-${shade}` as BadgeVariant;
+        variantClasses[variant] = buildVariantClasses(style, color, shade);
+      }
+    }
+  }
+  
+  return variantClasses;
+}
+
+// Pre-generate all variant classes
+const variantClassesMap = generateVariantClasses();
+
+// Ensure Tailwind detects shadow-badge-soft class
+// This string literal ensures Tailwind v4 content scanning includes the class
+const _tailwindShadowDetection = 'shadow-badge-soft';
+
+// ============================================================================
+// CLASS GENERATION FUNCTION
+// ============================================================================
+
+/**
+ * Get badge classes based on variant
+ * 
+ * Variant format: {style}-{color}-{shade}
+ * - style: solid (flat), outline (bordered), soft (blurred)
+ * - color: main, sec, acc
+ * - shade: muted (dark on light), normal (light on medium), strong (light on dark)
+ */
+function getBadgeClasses(variant: BadgeVariant = 'solid-main-normal'): string {
+  const baseClasses = 'inline-flex text-balance items-center rounded-2xl px-3 py-1 text-xs font-medium transition-colors box-border';
+  return `${baseClasses} ${variantClassesMap[variant]}`;
+}
+
+// ============================================================================
+// BADGE COMPONENT
+// ============================================================================
+
+/**
+ * Badge Component
+ * A small, non-interactive visual label for displaying concise information.
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * // Default variant
+ * <Badge>New</Badge>
+ * 
+ * // Specific variant
+ * <Badge variant="solid-main-normal">Active</Badge>
+ * 
+ * // Outline variant
+ * <Badge variant="outline-sec-muted">Pending</Badge>
+ * 
+ * // Soft variant
+ * <Badge variant="soft-acc-strong">Featured</Badge>
+ * ```
+ */
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'solid-main-normal', ...props }, ref) => {
+    const isSoftVariant = variant.startsWith('soft-');
+    
+    if (isSoftVariant) {
+      // For soft variants, we need both shadow-badge-soft and shadow color class
+      // twMerge treats all shadow-* classes as conflicting, so we need to add them after merging
+      const variantClasses = getBadgeClasses(variant);
+      // Extract the shadow color class from variantClasses (e.g., shadow-main-200)
+      const shadowColorMatch = variantClasses.match(/\bshadow-(\w+)-(\d+)\b/);
+      const shadowColorClass = shadowColorMatch ? shadowColorMatch[0] : '';
+      
+      // Remove shadow classes from variantClasses to avoid twMerge conflicts
+      const classesWithoutShadows = variantClasses
+        .replace(/\bshadow-badge-soft\b/g, '')
+        .replace(/\bshadow-\w+-\d+\b/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+      
+      // Merge non-shadow classes first, then append shadow classes to ensure both are present
+      // shadow-badge-soft first (defines shape), then shadow color (defines color)
+      const mergedClasses = cn(classesWithoutShadows, className);
+      const finalClasses = `${mergedClasses} shadow-badge-soft ${shadowColorClass}`.trim();
+      
+      return (
+        <span
+          ref={ref}
+          className={finalClasses}
+          {...props}
+        />
+      );
+    }
+    
+    return (
+      <span
+        ref={ref}
+        className={cn(getBadgeClasses(variant), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { Badge };
+

package/src/components/Badge/index.ts

@@ -0,0 +1,3 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+

package/src/components/DataTable/__tests__/DataTableCore.test-setup.ts

@@ -0,0 +1,217 @@
+/**
+ * @file DataTableCore Test Setup
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 0.4.0
+ * 
+ * Shared test setup and mocks for DataTableCore component tests.
+ * This file is imported by all DataTableCore test files to ensure consistent mocking.
+ */
+
+import { vi } from 'vitest';
+import React from 'react';
+
+// Mock the RBAC hooks
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: vi.fn(),
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: {
+      organisationId: 'test-org-id',
+      eventId: 'test-event-id',
+      appId: 'test-app-id'
+    }
+  }))
+}));
+
+// Mock the auth provider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: { id: 'test-user', email: 'test@example.com' },
+    isAuthenticated: true,
+    isLoading: false,
+    error: null,
+    selectedOrganisationId: 'test-org-id',
+    selectedEventId: 'test-event-id',
+    supabase: null,
+  })),
+}));
+
+// Mock the performance hook
+vi.mock('../../../hooks/useDataTablePerformance', () => ({
+  useDataTablePerformance: vi.fn(() => ({
+    paginationMode: 'client',
+    isVirtualized: false,
+    pageSizeOptions: [10, 25, 50],
+    processedData: [],
+    totalCount: 0,
+    isLoading: false,
+    searchQuery: '',
+    setSearchQuery: vi.fn(),
+    searchResults: [],
+    fetchServerData: vi.fn(),
+    serverData: null,
+    memoryUsage: 0,
+    errorState: {
+      hasErrors: false,
+      errorCount: 0,
+      lastError: null,
+      fallbacksActive: [],
+    },
+    retryLastOperation: vi.fn(),
+    clearErrors: vi.fn(),
+    cleanup: vi.fn(),
+    shouldUseVirtualization: false,
+    performanceMetrics: {},
+  })),
+}));
+
+// Mock the data table state hook
+vi.mock('../hooks/useDataTableState', () => ({
+  useDataTableState: vi.fn(() => ({
+    state: {
+      sorting: [],
+      columnFilters: [],
+      columnVisibility: {},
+      grouping: [],
+      expanded: {},
+      pagination: { pageIndex: 0, pageSize: 10 },
+      columnOrder: [],
+      rowSelection: {},
+      isCreating: false,
+      creationData: {},
+      editingRowId: null,
+      editingData: {},
+      showImportModal: false,
+      showFilterRow: false,
+      searchQuery: '',
+    },
+    actions: {
+      setSorting: vi.fn(),
+      setColumnFilters: vi.fn(),
+      setColumnVisibility: vi.fn(),
+      setGrouping: vi.fn(),
+      setExpanded: vi.fn(),
+      setPagination: vi.fn(),
+      setColumnOrder: vi.fn(),
+      setRowSelection: vi.fn(),
+      setCreating: vi.fn(),
+      setCreationData: vi.fn(),
+      clearCreationData: vi.fn(),
+      setEditingRow: vi.fn(),
+      clearEditing: vi.fn(),
+      setImportModal: vi.fn(),
+      setFilterRow: vi.fn(),
+      setSearchQuery: vi.fn(),
+      resetState: vi.fn(),
+    },
+  })),
+}));
+
+// Mock the hierarchical state hook
+vi.mock('../hooks/useHierarchicalState', () => ({
+  useHierarchicalState: vi.fn(() => ({
+    hierarchicalData: [],
+    setHierarchicalData: vi.fn(),
+    expandedRows: {},
+    setExpandedRows: vi.fn(),
+  })),
+}));
+
+// Mock the column order persistence hook
+vi.mock('../hooks/useColumnOrderPersistence', () => ({
+  useColumnOrderPersistence: vi.fn(() => ({
+    columnOrder: [],
+    setColumnOrder: vi.fn(),
+  })),
+}));
+
+// Mock the column factory
+vi.mock('../core/ColumnFactory', () => ({
+  ColumnFactory: {
+    createColumns: vi.fn((columns) => columns),
+    createActionColumn: vi.fn(() => ({
+      id: 'actions',
+      header: 'Actions',
+      cell: () => React.createElement('div', { 'data-testid': 'action-cell' }, 'Actions'),
+    })),
+  },
+}));
+
+// Mock the hierarchical utilities
+vi.mock('../utils/hierarchicalUtils', () => ({
+  validateHierarchicalData: vi.fn(() => true),
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+vi.mock('../utils/hierarchicalSorting', () => ({
+  sortHierarchicalData: vi.fn((data) => data),
+}));
+
+// Create a mock implementation that can be overridden
+const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
+  permissions: {
+    canRead: { can: true },
+    canCreate: { can: true },
+    canUpdate: { can: true },
+    canDelete: { can: true },
+    canExport: { can: true },
+    canImport: { can: true },
+  },
+  secureFeatures: {
+    search: true,
+    sorting: true,
+    pagination: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    export: true,
+    import: true,
+    columnVisibility: true,
+    filtering: true,
+    grouping: true,
+  },
+  effectivePageId: 'test-page',
+})));
+
+vi.mock('../hooks/useDataTablePermissions', () => ({
+  useDataTablePermissions: mockUseDataTablePermissions
+}));
+
+vi.mock('../hooks/useTableColumns', () => ({
+  useTableColumns: vi.fn(({ columns }) => ({
+    enhancedColumns: columns || []
+  }))
+}));
+
+/**
+ * Shared test data and utilities
+ */
+export const createTestSetup = () => {
+  const mockData = require('./test-utils/dataFactories').createTestData(5);
+  const mockColumns = require('./test-utils/dataFactories').createTestColumns();
+  const mockRBAC = { pageId: 'test-page' };
+  const mockPerformance = { serverSideThreshold: 10000 };
+
+  return {
+    mockData,
+    mockColumns,
+    mockRBAC,
+    mockPerformance,
+  };
+};
+
+/**
+ * Setup function to be called in beforeEach
+ */
+export const setupTestMocks = async () => {
+  vi.clearAllMocks();
+  const { useCan } = await import('../../../rbac/hooks');
+  (useCan as any).mockReturnValue({
+    can: true,
+    isLoading: false,
+    error: null,
+  });
+};
+

package/src/components/DataTable/__tests__/styles.test.ts

@@ -18,7 +18,7 @@ import {
 } from '../styles';
 
 // Mock the cn utility
-vi.mock('../../../utils/cn', () => ({
+vi.mock('../../../utils/core/cn', () => ({
   cn: (...classes: (string | undefined | null | false)[]) => 
     classes.filter(Boolean).join(' '),
 }));

package/src/components/DataTable/components/ColumnFilter.tsx

@@ -4,6 +4,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '.
 import { Button } from '../../Button/Button';
 import { X, Filter } from 'lucide-react';
 import type { Column } from '@tanstack/react-table';
+import { getColumnHeaderText } from '../utils/columnUtils';
 
 interface ColumnFilterProps {
   column: Column<any, unknown>;
@@ -38,6 +39,9 @@ export function ColumnFilter({
   };
 
   const hasFilter = columnFilterValue !== undefined && columnFilterValue !== '';
+  
+  // Get the default placeholder using column header text
+  const defaultPlaceholder = `Filter ${getColumnHeaderText(column)}...`;
 
   const renderFilterInput = () => {
     switch (filterType) {
@@ -48,7 +52,7 @@ export function ColumnFilter({
             onValueChange={handleFilterChange}
           >
             <SelectTrigger className="h-8">
-              <SelectValue placeholder={placeholder || `Filter ${column.id}...`} />
+              <SelectValue placeholder={placeholder || defaultPlaceholder} />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="">All</SelectItem>
@@ -68,7 +72,7 @@ export function ColumnFilter({
             type="number"
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8 datatable-number-no-spinners"
           />
         );
@@ -79,7 +83,7 @@ export function ColumnFilter({
             type="date"
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8"
           />
         );
@@ -89,7 +93,7 @@ export function ColumnFilter({
           <Input
             value={columnFilterValue as string || ''}
             onChange={(e) => handleFilterChange(e.target.value || undefined)}
-            placeholder={placeholder || `Filter ${column.id}...`}
+            placeholder={placeholder || defaultPlaceholder}
             className="h-8"
           />
         );