@jmruthers/pace-core 0.4.1 → 0.5.3

package/src/components/DataTable/components/EditableRow.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { ActionButtons } from './ActionButtons';
+import { Input } from '../../Input/Input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import { Button } from '../../Button/Button';
+import type { DataTableAction, DataRecord } from '../types';
+
+interface EditableRowProps<TData extends DataRecord> {
+  row: any;
+  editingData: Record<string, any>;
+  onEditingDataChange: (data: Record<string, any>) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  actions: DataTableAction<TData>[];
+  getRowId?: (row: TData, index: number) => string;
+  isParent?: boolean;
+  hierarchical?: boolean;
+}
+
+// Helper function to render the appropriate input type based on column configuration
+const renderEditField = (
+  column: any,
+  value: any,
+  onChange: (value: any) => void,
+  editingData: Record<string, any> = {},
+  placeholder?: string
+) => {
+  const columnDef = column.columnDef;
+  
+  // Check for custom field type
+  if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
+    // Use editAccessorKey if specified, otherwise use the column id
+    const editKey = columnDef.editAccessorKey || column.id;
+    const editValue = editingData[editKey] || value;
+    
+    return (
+      <Select
+        value={String(editValue || '')}
+        onValueChange={(newValue) => {
+          // If editAccessorKey is specified, update that field instead
+          if (columnDef.editAccessorKey) {
+            onChange({ [columnDef.editAccessorKey]: Number(newValue) });
+          } else {
+            onChange(newValue);
+          }
+        }}
+      >
+        <SelectTrigger className="w-full h-7">
+          <SelectValue placeholder={placeholder || `Select ${column.id}`} />
+        </SelectTrigger>
+        <SelectContent>
+          {columnDef.fieldOptions.map((option: any) => (
+            <SelectItem key={option.value} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+  
+  if (columnDef.fieldType === 'date') {
+    return (
+      <Input
+        type="date"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full h-7"
+      />
+    );
+  }
+  
+  // Default to text input
+  return (
+    <Input
+      type="text"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full h-7"
+      placeholder={placeholder || `Enter ${column.id}`}
+    />
+  );
+};
+
+export function EditableRow<TData extends DataRecord>({
+  row,
+  editingData,
+  onEditingDataChange,
+  onSave,
+  onCancel,
+  actions,
+  getRowId,
+  isParent = false,
+  hierarchical = false,
+}: EditableRowProps<TData>) {
+  const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
+
+  // Convert DataTableAction to ActionButtons format with proper disabled handling
+  const convertedActions = actions.map(action => ({
+    label: action.label,
+    onClick: action.onClick,
+    icon: action.icon,
+    variant: action.variant === 'destructive' ? 'destructive' as const : 'default' as const,
+    disabled: action.disabled ? ((row?: any) => action.disabled!(row)) : false,
+    testId: action.testId || `action-${action.label.toLowerCase().replace(/\s+/g, '-')}-${rowId}`,
+    visible: true,
+  }));
+
+  return (
+    <tr>
+      {row.getVisibleCells().map((cell: any) => (
+        <td key={cell.id}>
+          {cell.column.id !== 'actions' ? (
+                         renderEditField(cell.column, editingData[cell.column.id], (value) => {
+               if (typeof value === 'object' && value !== null) {
+                 // Handle editAccessorKey case
+                 onEditingDataChange({ ...editingData, ...value });
+               } else {
+                 // Handle simple value case
+                 onEditingDataChange({ ...editingData, [cell.column.id]: value });
+               }
+             }, editingData)
+          ) : (
+            <div className="flex gap-1">
+              <Button
+                onClick={onSave}
+                size="sm"
+                variant="default"
+              >
+                Save
+              </Button>
+              <Button
+                onClick={onCancel}
+                size="sm"
+                variant="outline"
+              >
+                Cancel
+              </Button>
+            </div>
+          )}
+        </td>
+      ))}
+      {actions.length > 0 && (
+        <td>
+          <ActionButtons
+            row={row.original}
+            rowId={rowId}
+            index={row.index}
+            actions={convertedActions}
+            isEditing={true}
+            isParent={isParent}
+            hierarchical={hierarchical}
+          />
+        </td>
+      )}
+    </tr>
+  );
+}

package/src/components/DataTable/components/EmptyState.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Database, Search, Plus, User } from 'lucide-react';
+import { Button } from '../../Button/Button';
+
+interface EmptyStateProps {
+  title?: string;
+  description?: string;
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  isFiltered?: boolean;
+  onClearFilters?: () => void;
+}
+
+export function EmptyState({ 
+  title,
+  description,
+  icon: Icon = Database,
+  action,
+  isFiltered = false,
+  onClearFilters
+}: EmptyStateProps) {
+  const defaultTitle = isFiltered ? "No results found" : "No data available";
+  const defaultDescription = isFiltered 
+    ? "Try adjusting your search or filter criteria"
+    : "Get started by adding your first entry";
+
+  return (
+    <div className="flex flex-col items-center justify-center p-8 text-center">
+      <Icon 
+        role="img" 
+        aria-hidden="true" 
+        className="h-12 w-12 text-muted-foreground mb-4"
+        data-testid={Icon === Database ? 'lucide-database' : Icon === User ? 'lucide-user' : 'custom-icon'}
+      />
+      <h3 className="text-lg font-semibold mb-2">
+        {title || defaultTitle}
+      </h3>
+      <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+        {description || defaultDescription}
+      </p>
+      
+      {(isFiltered && onClearFilters) || action ? (
+        <div className="flex gap-2">
+          {isFiltered && onClearFilters && (
+            <Button variant="outline" onClick={onClearFilters}>
+              <Search className="h-4 w-4 mr-2" />
+              Clear filters
+            </Button>
+          )}
+          
+          {action && (
+            <Button onClick={action.onClick}>
+              <Plus className="h-4 w-4 mr-2" />
+              {action.label}
+            </Button>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/DataTable/components/ExpandButton.tsx

@@ -0,0 +1,113 @@
+/**
+ * @file Expand/Collapse Button Component for Hierarchical DataTable
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/ExpandButton
+ * @since 0.4.35
+ */
+
+import React from 'react';
+import { ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
+import type { ExpandButtonProps } from '../types';
+
+/**
+ * Default expand/collapse button component for hierarchical rows
+ * 
+ * Provides a clean, accessible expand/collapse button with proper ARIA attributes
+ * and keyboard navigation support.
+ */
+export function ExpandButton({
+  rowId,
+  isExpanded,
+  hasChildren,
+  onClick,
+  className = '',
+}: ExpandButtonProps) {
+  if (!hasChildren) {
+    return null;
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={`
+        inline-flex items-center justify-center w-6 h-6 rounded-sm
+        hover:bg-main-100 focus:bg-main-100 focus:outline-none focus:ring-2
+        focus:ring-main-500 focus:ring-offset-1 transition-colors duration-150
+        ${className}
+      `}
+      aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+      aria-expanded={isExpanded}
+      data-testid={`expand-button-${rowId}`}
+    >
+      {isExpanded ? (
+        <ChevronDownIcon className="w-4 h-4 text-main-600" />
+      ) : (
+        <ChevronRightIcon className="w-4 h-4 text-main-600" />
+      )}
+    </button>
+  );
+}
+
+/**
+ * Alternative expand button with different styling
+ */
+export function ExpandButtonMinimal({
+  rowId,
+  isExpanded,
+  hasChildren,
+  onClick,
+  className = '',
+}: ExpandButtonProps) {
+  if (!hasChildren) {
+    return null;
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={`
+        inline-flex items-center justify-center w-5 h-5 rounded
+        hover:bg-main-50 focus:bg-main-50 focus:outline-none
+        transition-colors duration-150 text-main-500
+        ${className}
+      `}
+      aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+      aria-expanded={isExpanded}
+      data-testid={`expand-button-minimal-${rowId}`}
+    >
+      <span className="text-sm font-medium">
+        {isExpanded ? '−' : '+'}
+      </span>
+    </button>
+  );
+}

package/src/components/DataTable/components/FilterRow.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { ColumnFilter } from './ColumnFilter';
+import type { Header, Table } from '@tanstack/react-table';
+
+interface FilterRowProps<TData> {
+  table: Table<TData>;
+  visibleColumns: Header<TData, unknown>[];
+}
+
+export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData>) {
+  const { getState } = table;
+  const { columnFilters } = getState();
+
+  // Get unique values for select filters
+  const getColumnOptions = (columnId: string) => {
+    const column = table.getColumn(columnId);
+    if (!column) return [];
+
+    // Check if column has explicit field options
+    const columnDef = column.columnDef as any;
+    if (columnDef.fieldOptions && Array.isArray(columnDef.fieldOptions)) {
+      return columnDef.fieldOptions;
+    }
+
+    // Fallback to generating options from data
+    const uniqueValues = new Set<string>();
+    table.getRowModel().rows.forEach((row) => {
+      const value = row.getValue(columnId);
+      if (value !== null && value !== undefined) {
+        uniqueValues.add(String(value));
+      }
+    });
+
+    return Array.from(uniqueValues)
+      .sort()
+      .map((value) => ({ value, label: value }));
+  };
+
+  // Determine filter type based on column data
+  const getFilterType = (columnId: string) => {
+    const column = table.getColumn(columnId);
+    if (!column) return 'text';
+
+    // Check if column has explicit filter type configuration
+    const columnDef = column.columnDef as any;
+    if (columnDef.filterType) {
+      return columnDef.filterType;
+    }
+
+    // Check if it's a date column
+    if (columnId.toLowerCase().includes('date') || columnId.toLowerCase().includes('time')) {
+      return 'date';
+    }
+
+    // Check if it's a number column
+    const firstValue = table.getRowModel().rows[0]?.getValue(columnId);
+    if (typeof firstValue === 'number') {
+      return 'number';
+    }
+
+    // Check if it has limited unique values (good for select)
+    const uniqueValues = getColumnOptions(columnId);
+    if (uniqueValues.length <= 10 && uniqueValues.length > 1) {
+      return 'select';
+    }
+
+    return 'text';
+  };
+
+  return (
+    <tr className="border-b bg-sec-50/50">
+      {visibleColumns.map((header) => {
+        const column = header.column;
+        const canFilter = column.getCanFilter();
+        const filterType = getFilterType(column.id);
+        const options = filterType === 'select' ? getColumnOptions(column.id) : [];
+
+        return (
+          <td
+            key={header.id}
+            className="px-4 py-2"
+          >
+            {canFilter ? (
+              <ColumnFilter
+                column={column}
+                filterType={filterType}
+                options={options}
+                placeholder={`Filter ${column.id}...`}
+              />
+            ) : (
+              <div className="h-8 flex items-center text-sec-400 text-sm">
+                No filter
+              </div>
+            )}
+          </td>
+        );
+      })}
+    </tr>
+  );
+}

package/src/components/DataTable/components/GroupHeader.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Row } from '@tanstack/react-table';
+import { Button } from '../../Button/Button';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+interface GroupHeaderProps<TData> {
+  row: Row<TData>;
+  groupByColumn: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  subRowsCount: number;
+}
+
+export function GroupHeader<TData>({ 
+  row, 
+  groupByColumn, 
+  isExpanded, 
+  onToggle, 
+  subRowsCount 
+}: GroupHeaderProps<TData>) {
+  const groupValue = row.getValue(groupByColumn);
+  
+  return (
+    <div className="flex items-center py-2 px-4 bg-muted/50 border-b font-medium">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onToggle}
+        className="p-0 h-auto mr-2"
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
+      </Button>
+      <span className="text-sm">
+        {String(groupValue)} ({subRowsCount} items)
+      </span>
+    </div>
+  );
+}

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Button } from '../../Button/Button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+import { Group } from 'lucide-react';
+import type { DataTableColumn, DataRecord, SimpleColumn } from '../types';
+
+interface GroupingDropdownProps<TData extends DataRecord = DataRecord> {
+  columns: (DataTableColumn<TData> | SimpleColumn<TData>)[];
+  currentGroupBy: string | null;
+  onGroupByChange: (columnId: string | null) => void;
+  className?: string;
+}
+
+export function GroupingDropdown<TData extends DataRecord>({ 
+  columns, 
+  currentGroupBy, 
+  onGroupByChange,
+  className
+}: GroupingDropdownProps<TData>) {
+  // Convert columns to a consistent format for grouping
+  const convertedColumns = columns.map(col => {
+    if ('accessorKey' in col && 'header' in col) {
+      // DataTableColumn format
+      return {
+        accessorKey: col.accessorKey,
+        header: typeof col.header === 'string' ? col.header : String(col.accessorKey),
+        enableGrouping: col.enableGrouping || false,
+      };
+    } else if ('key' in col && 'label' in col) {
+      // SimpleColumn format
+      return {
+        accessorKey: col.key,
+        header: col.label,
+        enableGrouping: false, // SimpleColumn doesn't support grouping by default
+      };
+    } else {
+      // Fallback for unknown format
+      return {
+        accessorKey: 'unknown',
+        header: 'Unknown',
+        enableGrouping: false,
+      };
+    }
+  });
+
+  const groupableColumns = convertedColumns.filter(col => col.enableGrouping && col.accessorKey);
+  
+  if (groupableColumns.length === 0) {
+    return null;
+  }
+
+  return (
+    <Select className="w-40">
+      <SelectTrigger asChild>
+        <Button 
+          variant="outline" 
+          className={className || ''}
+        >
+          <Group className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span className="truncate">Grouping</span>
+        </Button>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem
+          value="no-grouping"
+          onClick={() => onGroupByChange(null)}
+          className={`px-3 py-2 text-sm ${!currentGroupBy ? "bg-main-50 text-main-700" : "hover:bg-sec-50"}`}
+        >
+          No grouping
+        </SelectItem>
+        {groupableColumns.map((column) => {
+          const columnId = String(column.accessorKey);
+          const isSelected = currentGroupBy === columnId;
+          const displayName = column.header || String(column.accessorKey);
+          
+          return (
+            <SelectItem
+              key={columnId}
+              value={columnId}
+              onClick={() => onGroupByChange(columnId)}
+              className={`px-3 py-2 text-sm ${isSelected ? "bg-main-50 text-main-700" : "hover:bg-sec-50"}`}
+            >
+              {displayName}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}