@jmruthers/pace-core 0.4.1 → 0.5.3

package/src/components/DataTable/components/AccessDeniedPage.tsx

@@ -0,0 +1,168 @@
+/**
+ * @file Access Denied Page Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 2.0.0
+ *
+ * A component displayed when users lack permission to access DataTable data.
+ * Provides clear messaging about access restrictions and next steps.
+ *
+ * Features:
+ * - Clear access denied messaging
+ * - Resource-specific error information
+ * - Consistent styling with pace-core design system
+ * - Accessibility compliant
+ * - Actionable next steps for users
+ *
+ * @example
+ * ```tsx
+ * <AccessDeniedPage 
+ *   resource="users" 
+ *   operation="read"
+ *   message="You don't have permission to view user data"
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Proper ARIA labels and roles
+ * - High contrast support
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ *
+ * @dependencies
+ * - Card component for layout
+ * - Button component for actions
+ * - Lucide React icons
+ * - React 18+ hooks
+ */
+
+import React from 'react';
+import { Card } from '../../Card/Card';
+import { Button } from '../../Button/Button';
+import { ShieldX, ArrowLeft, RefreshCw } from 'lucide-react';
+
+/**
+ * Props for the AccessDeniedPage component
+ */
+export interface AccessDeniedPageProps {
+  /** Resource that was denied access to */
+  resource: string;
+  /** Operation that was denied */
+  operation?: string;
+  /** Custom error message */
+  message?: string;
+  /** Callback when retry is clicked */
+  onRetry?: () => void;
+  /** Callback when back is clicked */
+  onBack?: () => void;
+  /** Custom class names */
+  className?: string;
+}
+
+/**
+ * Access denied page for DataTable when users lack permissions
+ * 
+ * This component is displayed when a user attempts to access DataTable data
+ * but lacks the necessary permissions. It provides clear messaging about
+ * the access restriction and offers actionable next steps.
+ * 
+ * @param props - Component configuration
+ * @returns JSX.Element - The rendered access denied page
+ * 
+ * @example
+ * ```tsx
+ * <AccessDeniedPage 
+ *   resource="users" 
+ *   operation="read"
+ *   onRetry={() => window.location.reload()}
+ *   onBack={() => navigate('/dashboard')}
+ * />
+ * ```
+ */
+export function AccessDeniedPage({
+  resource,
+  operation = 'access',
+  message,
+  onRetry,
+  onBack,
+  className,
+}: AccessDeniedPageProps) {
+  const defaultMessage = message || `You don't have permission to ${operation} ${resource} data`;
+  
+  const handleRetry = () => {
+    if (onRetry) {
+      onRetry();
+    } else {
+      window.location.reload();
+    }
+  };
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      window.history.back();
+    }
+  };
+
+  return (
+    <div className={`flex items-center justify-center min-h-[400px] p-8 ${className || ''}`}>
+      <Card className="max-w-md w-full text-center">
+        <div className="flex flex-col items-center space-y-6 p-8">
+          {/* Icon */}
+          <div className="flex items-center justify-center w-16 h-16 rounded-full bg-acc-100">
+            <ShieldX className="w-8 h-8 text-acc-600" />
+          </div>
+
+          {/* Title */}
+          <div className="space-y-2">
+            <h2 className="text-xl font-semibold text-sec-900">
+              Access Denied
+            </h2>
+            <p className="text-sec-600">
+              {defaultMessage}
+            </p>
+          </div>
+
+          {/* Resource info */}
+          <div className="text-sm text-sec-500 bg-sec-50 rounded-lg p-3 w-full">
+            <strong>Resource:</strong> {resource}
+            {operation && (
+              <>
+                <br />
+                <strong>Operation:</strong> {operation}
+              </>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col sm:flex-row gap-3 w-full">
+            {onRetry && (
+              <Button
+                variant="outline"
+                onClick={handleRetry}
+                className="flex-1"
+              >
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Retry
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              onClick={handleBack}
+              className="flex-1"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Go Back
+            </Button>
+          </div>
+
+          {/* Help text */}
+          <div className="text-xs text-sec-400">
+            If you believe this is an error, please contact your administrator.
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { MoreHorizontal } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+
+interface ActionButtonsProps {
+  row: any;
+  rowId?: string;
+  index?: number;
+  actions?: Array<{
+    label: string;
+    onClick: (row: any) => void;
+    icon?: any;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+    disabled?: boolean | ((row?: any) => boolean);
+    visible?: boolean | ((row?: any) => boolean);
+    testId?: string;
+    showInEditMode?: boolean;
+    hideInViewMode?: boolean;
+    showInViewMode?: boolean;
+    hidden?: boolean;
+    // Hierarchical action properties
+    showForParent?: boolean;
+    showForChild?: boolean;
+    parentIcon?: any;
+    childIcon?: any;
+    parentLabel?: string;
+    childLabel?: string;
+  }>;
+  isEditing?: boolean;
+  className?: string;
+  // Hierarchical context
+  isParent?: boolean;
+  hierarchical?: boolean;
+  // MANDATORY RBAC
+  rbac?: {
+    resource: string;
+    pageId?: string;
+  };
+  permissions?: {
+    canUpdate: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+  };
+}
+
+export function ActionButtons({ 
+  row, 
+  actions = [],
+  isEditing = false,
+  isParent = false,
+  hierarchical = false,
+  rbac,
+  permissions,
+}: ActionButtonsProps) {
+  // Return null if no actions are provided
+  if (actions.length === 0) {
+    return null;
+  }
+
+  // Use provided actions
+  const allActions = actions;
+
+  // Filter actions based on current mode, visibility, hierarchical context, and RBAC
+  const visibleActions = allActions.filter(action => {
+    if (action.hidden) return false;
+    
+    // MANDATORY: Check RBAC permissions for standard actions
+    if (permissions) {
+      if (action.label === 'Edit' && !permissions.canUpdate.can) return false;
+      if (action.label === 'Delete' && !permissions.canDelete.can) return false;
+    }
+    
+    // Check hierarchical visibility
+    if (hierarchical) {
+      if (action.showForParent && !isParent) return false;
+      if (action.showForChild && isParent) return false;
+    }
+    
+    // Check visible function/boolean if provided
+    if (typeof action.visible === 'function') {
+      return action.visible(row);
+    } else if (typeof action.visible === 'boolean') {
+      return action.visible;
+    }
+    
+    if (isEditing) {
+      return action.showInEditMode !== false;
+    } else {
+      return action.hideInViewMode !== true && action.showInViewMode !== false;
+    }
+  });
+
+  // Return null if no visible actions
+  if (visibleActions.length === 0) {
+    return null;
+  }
+
+  // If only a few actions, render them as individual icon-only buttons
+  if (visibleActions.length <= 6) {
+    return (
+      <>
+        {visibleActions.map((action, actionIndex) => {
+          // Determine the appropriate icon and label based on hierarchical context
+          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;
+            }
+          }
+          
+          const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : action.disabled;
+          
+          return (
+            <Button
+              key={actionIndex}
+              variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
+              size="sm"
+              onClick={() => action.onClick(row.original)}
+              disabled={isDisabled}
+              aria-disabled={isDisabled}
+              data-testid={action.testId}
+              aria-label={label}
+              className="h-8 w-8 p-0"
+            >
+              {Icon && <Icon className="h-4 w-4" />}
+            </Button>
+          );
+        })}
+      </>
+    );
+  }
+
+  // For many actions, use dropdown menu
+  return (
+    <Select>
+      <SelectTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </SelectTrigger>
+      <SelectContent className="!bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
+        {visibleActions.map((action, actionIndex) => {
+          // Determine the appropriate icon and label based on hierarchical context
+          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 (
+            <SelectItem
+              key={actionIndex}
+              value={`action-${actionIndex}`}
+              onClick={() => action.onClick(row.original)}
+              className={action.variant === 'destructive' ? 'text-acc-600' : ''}
+            >
+              {Icon && <Icon className="mr-2 h-4 w-4" />}
+              {label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}
+

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

@@ -0,0 +1,160 @@
+/**
+ * @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 18+ 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="h-4 w-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]" style={{ backgroundColor: 'white' }}>
+        {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="h-4 w-4" />
+              <span>{label}</span>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Input } from '../../Input/Input';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../Select/Select';
+import { Button } from '../../Button/Button';
+import { X, Filter } from 'lucide-react';
+import type { Column } from '@tanstack/react-table';
+
+interface ColumnFilterProps {
+  column: Column<any, unknown>;
+  placeholder?: string;
+  filterType?: 'text' | 'select' | 'number' | 'date';
+  options?: Array<{ value: string; label: string }>;
+}
+
+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 !== '';
+
+  const renderFilterInput = () => {
+    switch (filterType) {
+      case 'select':
+        return (
+          <Select
+            value={columnFilterValue as string || ''}
+            onValueChange={handleFilterChange}
+          >
+            <SelectTrigger className="h-8">
+              <SelectValue placeholder={placeholder || `Filter ${column.id}...`} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">All</SelectItem>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+      
+      case 'number':
+        return (
+          <Input
+            type="number"
+            value={columnFilterValue as string || ''}
+            onChange={(e) => handleFilterChange(e.target.value ? Number(e.target.value) : undefined)}
+            placeholder={placeholder || `Filter ${column.id}...`}
+            className="h-8"
+          />
+        );
+      
+      case 'date':
+        return (
+          <Input
+            type="date"
+            value={columnFilterValue as string || ''}
+            onChange={(e) => handleFilterChange(e.target.value || undefined)}
+            placeholder={placeholder || `Filter ${column.id}...`}
+            className="h-8"
+          />
+        );
+      
+      default: // text
+        return (
+          <Input
+            value={columnFilterValue as string || ''}
+            onChange={(e) => handleFilterChange(e.target.value || undefined)}
+            placeholder={placeholder || `Filter ${column.id}...`}
+            className="h-8"
+          />
+        );
+    }
+  };
+
+  return (
+    <div className="relative flex items-center gap-1">
+      {renderFilterInput()}
+      {hasFilter && (
+        <Button
+          variant="ghost"
+          onClick={clearFilter}
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      )}
+      {hasFilter && (
+        <div className="absolute -top-1 -right-1 h-2 w-2 bg-main-500 rounded-full" />
+      )}
+    </div>
+  );
+}