@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/components/ActionButtons.tsx

@@ -1,190 +0,0 @@
-import React, { useMemo } from 'react';
-import { MoreHorizontal } from 'lucide-react';
-import type { Row } from '@tanstack/react-table';
-
-import { Button } from '../../Button/Button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-} from '../../Select/Select';
-import type { ActionCondition, DataRecord, DataTableAction } from '../types';
-
-interface ActionButtonsProps<TData extends DataRecord = DataRecord> {
-  row: Row<TData>;
-  rowId?: string;
-  index?: number;
-  actions?: DataTableAction<TData>[];
-  isEditing?: boolean;
-  className?: string;
-  // Hierarchical context
-  isParent?: boolean;
-  hierarchical?: boolean;
-  // MANDATORY RBAC
-  rbac?: {
-    pageId?: string;
-    pageName?: string;
-  };
-  permissions?: {
-    canRead: { can: boolean; isLoading: boolean };
-    canCreate: { can: boolean; isLoading: boolean };
-    canUpdate: { can: boolean; isLoading: boolean };
-    canDelete: { can: boolean; isLoading: boolean };
-    canExport: { can: boolean; isLoading: boolean };
-    canImport: { can: boolean; isLoading: boolean };
-  };
-}
-
-const evaluateCondition = <TData extends DataRecord>(
-  condition: ActionCondition<TData> | undefined,
-  row: TData,
-  defaultValue: boolean
-): boolean => {
-  if (typeof condition === 'boolean') {
-    return condition;
-  }
-
-  if (typeof condition === 'function') {
-    return condition(row);
-  }
-
-  return defaultValue;
-};
-
-function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
-  row,
-  actions = [],
-  isEditing = false,
-  isParent = false,
-  hierarchical = false,
-  permissions,
-}: ActionButtonsProps<TData>) {
-  const rowData = row.original;
-
-  // Call hooks before any early returns
-  const visibleActions = useMemo(() => {
-    if (actions.length === 0) {
-      return [];
-    }
-    return actions.filter(action => {
-    if (action.hidden) return false;
-
-    if (permissions) {
-      if (action.label === 'Edit' && !permissions.canUpdate.can) return false;
-      if (action.label === 'Delete' && !permissions.canDelete.can) return false;
-    }
-
-    if (hierarchical) {
-      if (action.showForParent && !isParent) return false;
-      if (action.showForChild && isParent) return false;
-    }
-
-    if (!evaluateCondition(action.visible, rowData, true)) {
-      return false;
-    }
-
-    if (isEditing) {
-      return action.showInEditMode !== false;
-    }
-
-    return action.hideInViewMode !== true && action.showInViewMode !== false;
-    });
-  }, [actions, permissions, hierarchical, isParent, rowData, isEditing]);
-
-  // Early return check after hooks
-  if (visibleActions.length === 0) {
-    return null;
-  }
-
-  const renderAction = (action: DataTableAction<TData>, actionIndex: number) => {
-    let Icon = action.icon;
-    let label = action.label;
-
-    if (hierarchical) {
-      if (isParent && action.parentIcon) {
-        Icon = action.parentIcon;
-      } else if (!isParent && action.childIcon) {
-        Icon = action.childIcon;
-      }
-
-      if (isParent && action.parentLabel) {
-        label = action.parentLabel;
-      } else if (!isParent && action.childLabel) {
-        label = action.childLabel;
-      }
-    }
-
-    return { Icon, label } as const;
-  };
-
-  if (visibleActions.length <= 6) {
-    return (
-      <>
-        {visibleActions.map((action, actionIndex) => {
-          const { Icon, label } = renderAction(action, actionIndex);
-          const isDisabled = evaluateCondition(action.disabled, rowData, false);
-
-          return (
-            <Button
-              key={actionIndex}
-              variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
-              size="sm"
-              onClick={() => {
-                if (!isDisabled) {
-                  action.onClick(rowData);
-                }
-              }}
-              disabled={isDisabled}
-              aria-disabled={isDisabled}
-              data-testid={action.testId}
-              aria-label={label}
-              className="size-8 p-0"
-            >
-              {Icon && <Icon className="size-4" />}
-            </Button>
-          );
-        })}
-      </>
-    );
-  }
-
-  return (
-    <Select>
-      <SelectTrigger asChild>
-        <Button variant="ghost" className="size-8 p-0">
-          <span className="sr-only">Open menu</span>
-          <MoreHorizontal className="size-4" />
-        </Button>
-      </SelectTrigger>
-      <SelectContent className="!bg-main-50 border border-sec-200 shadow-lg z-[9999]">
-        {visibleActions.map((action, actionIndex) => {
-          const { Icon, label } = renderAction(action, actionIndex);
-          const isDisabled = evaluateCondition(action.disabled, rowData, false);
-
-          return (
-            <SelectItem
-              key={actionIndex}
-              value={`action-${actionIndex}`}
-              onClick={() => {
-                if (!isDisabled) {
-                  action.onClick(rowData);
-                }
-              }}
-              data-testid={action.testId}
-              className="flex items-center gap-2"
-              aria-disabled={isDisabled}
-            >
-              {Icon && <Icon className="size-4" />}
-              <span>{label}</span>
-            </SelectItem>
-          );
-        })}
-      </SelectContent>
-    </Select>
-  );
-}
-
-const ActionButtons = React.memo(ActionButtonsComponent) as typeof ActionButtonsComponent;
-
-export { ActionButtons };

package/src/components/DataTable/components/BulkOperationsDropdown.tsx

@@ -1,160 +0,0 @@
-/**
- * @file Bulk Operations Dropdown Component
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components
- * @since 0.4.0
- * 
- * A dropdown component for bulk operations on selected rows in the DataTable.
- * Provides a clean interface for performing actions on multiple selected rows.
- * 
- * Features:
- * - Dynamic operation list based on configuration
- * - Disabled state when no rows are selected
- * - Consistent styling with other toolbar components
- * - Accessible dropdown interface
- * - Clear operation feedback
- * 
- * @example
- * ```tsx
- * <BulkOperationsDropdown
- *   operations={['export', 'delete']}
- *   selectedRows={rowSelection}
- *   onOperation={(operation, rows) => {
- *     switch (operation) {
- *       case 'export': exportRows(rows); break;
- *       case 'delete': deleteRows(rows); break;
- *     }
- *   }}
- * />
- * ```
- * 
- * @accessibility
- * - Proper ARIA labels and descriptions
- * - Keyboard navigation support
- * - Screen reader friendly
- * - High contrast support
- * 
- * @dependencies
- * - Select components (formerly DropdownMenu)
- * - Button component
- * - Lucide React icons
- * - React 19+ hooks
- */
-
-import React from 'react';
-import { 
-  Select, 
-  SelectContent, 
-  SelectItem, 
-  SelectTrigger 
-} from '../../Select/Select';
-import { Button } from '../../Button/Button';
-import { 
-  MoreHorizontal, 
-  Download, 
-  Trash 
-} from 'lucide-react';
-
-/**
- * Props for the BulkOperationsDropdown component
- */
-export interface BulkOperationsDropdownProps {
-  /** Available bulk operations */
-  operations: ('delete' | 'export')[];
-  /** Currently selected rows */
-  selectedRows: Record<string, boolean>;
-  /** Handler for bulk operations */
-  onOperation?: (operation: string, selectedRows: any[]) => void;
-  /** Custom class names */
-  className?: string;
-}
-
-/**
- * Bulk operations dropdown for DataTable toolbar
- * 
- * This component provides a dropdown menu for performing bulk operations
- * on selected rows. It automatically disables when no rows are selected
- * and provides clear visual feedback for each operation type.
- * 
- * @param props - Component configuration
- * @returns JSX.Element - The rendered dropdown component
- */
-export function BulkOperationsDropdown({
-  operations,
-  selectedRows = {},
-  onOperation,
-  className,
-}: BulkOperationsDropdownProps) {
-  // Handle null/undefined selectedRows gracefully
-  const safeSelectedRows = selectedRows || {};
-  const hasSelection = Object.values(safeSelectedRows).some(Boolean);
-  const selectedCount = Object.values(safeSelectedRows).filter(Boolean).length;
-
-  // Icon mapping for operations
-  const operationIcons = {
-    export: Download,
-    delete: Trash,
-  };
-
-  // Label mapping for operations
-  const operationLabels = {
-    export: 'Export Selected',
-    delete: 'Delete',
-  };
-
-  // Variant mapping for operations
-  const operationVariants = {
-    export: 'outline',
-    delete: 'destructive',
-  } as const;
-
-  const handleOperation = (operation: string) => {
-    if (onOperation && hasSelection) {
-      // Convert selectedRows to array of selected data
-      const selectedData = Object.entries(selectedRows)
-        .filter(([_, selected]) => selected)
-        .map(([key, _]) => key);
-      onOperation(operation, selectedData);
-    }
-  };
-
-  return (
-    <Select disabled={!hasSelection}>
-      <SelectTrigger asChild>
-        <Button 
-          variant="outline" 
-          size="sm"
-          disabled={!hasSelection}
-          className={`min-w-[140px] h-9 px-3 py-2 text-sm font-medium ${className || ''}`}
-        >
-          <MoreHorizontal className="size-4 mr-2 flex-shrink-0" />
-          <span className="truncate">
-            Bulk Actions ({selectedCount})
-          </span>
-        </Button>
-      </SelectTrigger>
-      <SelectContent className="w-48 !bg-main-50 border border-sec-200 shadow-lg z-[9999]">
-        {operations.map((operation) => {
-          const Icon = operationIcons[operation];
-          const label = operationLabels[operation];
-          const variant = operationVariants[operation];
-
-          return (
-            <SelectItem
-              key={operation}
-              value={operation}
-              onClick={() => handleOperation(operation)}
-              disabled={!hasSelection}
-              className={`flex items-center gap-2 ${
-                variant === 'destructive' ? 'text-destructive focus:text-destructive' : ''
-              }`}
-            >
-              <Icon className="size-4" />
-              <span>{label}</span>
-            </SelectItem>
-          );
-        })}
-      </SelectContent>
-    </Select>
-  );
-}

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import { Input } from '../../Input/Input';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../Select/Select';
-import type { Column } from '@tanstack/react-table';
-import { getColumnHeaderText } from '../utils/columnUtils';
-import { Filter } from 'lucide-react';
-
-/**
- * Props for the ColumnFilter component.
- */
-interface ColumnFilterProps {
-  column: Column<any, unknown>;
-  placeholder?: string;
-  filterType?: 'text' | 'select' | 'number' | 'date';
-  options?: Array<{ value: string; label: string }>;
-}
-
-/**
- * Column filter component for DataTable.
- * Provides filtering UI for individual columns with support for text, select, number, and date filters.
- * 
- * @param props - Filter configuration
- * @returns The rendered filter input or null if column cannot be filtered
- */
-export function ColumnFilter({ 
-  column, 
-  placeholder, 
-  filterType = 'text',
-  options = []
-}: ColumnFilterProps) {
-  const columnFilterValue = column.getFilterValue();
-  const canFilter = column.getCanFilter();
-
-  if (!canFilter) {
-    return null;
-  }
-
-  const handleFilterChange = (value: string | number | undefined) => {
-    if (value === '' || value === undefined) {
-      column.setFilterValue(undefined);
-    } else {
-      column.setFilterValue(value);
-    }
-  };
-
-  const clearFilter = () => {
-    column.setFilterValue(undefined);
-  };
-
-  const hasFilter = columnFilterValue !== undefined && columnFilterValue !== '';
-  
-  // Get the default placeholder using column header text (for Input components)
-  const defaultPlaceholder = `Filter ${getColumnHeaderText(column)}...`;
-  // For Select components, use just the column name (icon will replace "Filter" text)
-  const selectColumnName = `${getColumnHeaderText(column)}...`;
-
-  return (
-    (() => {
-      switch (filterType) {
-        case 'select':
-          return (
-            <Select
-              value={columnFilterValue as string || ''}
-              onValueChange={handleFilterChange}
-            >
-              <SelectTrigger className="h-8">
-                <SelectValue>
-                  <Filter className="size-4 inline-block mr-2"/>
-                  <span className="truncate">{selectColumnName}</span>
-                </SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="">All</SelectItem>
-                {options.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          );
-        
-        case 'number':
-          // Always hide spinner arrows for number filter inputs (cleaner UX)
-          return (
-            <Input
-              type="number"
-              value={columnFilterValue as string || ''}
-              onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
-              placeholder={placeholder || defaultPlaceholder}
-              className="h-8 datatable-number-no-spinners"
-            />
-          );
-        
-        case 'date':
-          return (
-            <Input
-              type="date"
-              value={columnFilterValue as string || ''}
-              onChange={(e) => handleFilterChange(e.target.value || undefined)}
-              placeholder={placeholder || defaultPlaceholder}
-              className="h-8"
-            />
-          );
-        
-        default: // text
-          return (
-            <Input
-              value={columnFilterValue as string || ''}
-              onChange={(e) => handleFilterChange(e.target.value || undefined)}
-              placeholder={placeholder || defaultPlaceholder}
-              className="h-8"
-            />
-          );
-      }
-    })()
-  );
-}

package/src/components/DataTable/components/ColumnVisibilityDropdown.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { Column } from '@tanstack/react-table';
-import { Button } from '../../Button/Button';
-import { 
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectGroup,
-  SelectSeparator,
-  SelectTrigger,
-} from '../../Select/Select';
-import { Label } from '../../Label/Label';
-import { Checkbox } from '../../Checkbox/Checkbox';
-import { Settings2, Eye, EyeOff } from 'lucide-react';
-
-/**
- * Props for the ColumnVisibilityDropdown component.
- * @template TData - The type of data records in the table
- */
-interface ColumnVisibilityDropdownProps<TData> {
-  columns: Column<TData, unknown>[];
-  onColumnVisibilityChange: (columnId: string, visible: boolean) => void;
-}
-
-/**
- * Dropdown component for managing column visibility in DataTable.
- * Allows users to show/hide columns and provides bulk actions.
- * 
- * @template TData - The type of data records in the table
- * @param props - Column visibility configuration
- * @returns The rendered column visibility dropdown
- */
-export function ColumnVisibilityDropdown<TData>({ 
-  columns, 
-  onColumnVisibilityChange 
-}: ColumnVisibilityDropdownProps<TData>) {
-  const toggleableColumns = columns.filter(
-    (column) => column.getCanHide() && column.id !== 'actions'
-  );
-
-  return (
-    <Select className="w-52" showCheckmark={false}>
-      <SelectTrigger asChild>
-        <Button 
-          variant="outline" 
-        >
-          <Settings2 className="size-4 mr-2 flex-shrink-0" />
-          <span className="truncate">Columns</span>
-        </Button>
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup className="flex flex-row gap-1 p-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-7 px-2 text-xs flex-1"
-            onClick={() => {
-              toggleableColumns.forEach(column => {
-                if (!column.getIsVisible()) {
-                  onColumnVisibilityChange(column.id, true);
-                }
-              });
-            }}
-          >
-            <Eye className="size-3 mr-1" />
-            Show All
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-7 px-2 text-xs flex-1"
-            onClick={() => {
-              toggleableColumns.forEach(column => {
-                if (column.getIsVisible()) {
-                  onColumnVisibilityChange(column.id, false);
-                }
-              });
-            }}
-          >
-            <EyeOff className="size-3 mr-1" />
-            Hide All
-          </Button>
-        </SelectGroup>
-        <SelectSeparator />
-        <SelectGroup>
-          {toggleableColumns.map((column) => (
-            <SelectItem 
-              key={column.id} 
-              value={column.id}
-              className="flex items-center space-x-2 cursor-pointer px-3 py-2 text-sm hover:bg-sec-50"
-              onClick={(e) => e.preventDefault()}
-            >
-                            <Label htmlFor={column.id}
-               // className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-              >
-              <Checkbox
-              className="mr-2 align-middle"
-                id={column.id}
-                checked={column.getIsVisible()}
-                onCheckedChange={(checked) =>
-                  onColumnVisibilityChange(column.id, !!checked)
-                }
-              />
-                {typeof column.columnDef?.header === 'string'
-                  ? column.columnDef.header
-                  : column.id}
-              </Label>
-            </SelectItem>
-          ))}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-}