@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/organisms/entity/EntityListPanel.tsx

@@ -0,0 +1,339 @@
+import React, { useMemo } from 'react';
+import { DataTable } from '../../atoms/composed/DataTable';
+import type { Column } from '../../atoms/composed/DataTable';
+import { Button } from '../../atoms/ui/button';
+import { Badge } from '../../atoms/ui/Badge';
+import { Card } from '../../atoms/ui/card';
+import type { EntityData, EntityTemplateConfig, ActionConfig } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+import { Download, Filter, Plus, RefreshCw } from 'lucide-react';
+
+export interface EntityListPanelProps<T extends EntityData> {
+  config: EntityTemplateConfig<T>;
+  data: T[];
+  isLoading?: boolean;
+  onRowClick?: (item: T) => void;
+  onAction?: (action: ActionConfig, selectedItems: T[]) => void;
+  className?: string;
+  
+  // Table configuration
+  columns?: Column<T>[];
+  showSearch?: boolean;
+  showPagination?: boolean;
+  pageSize?: number;
+  searchPlaceholder?: string;
+  
+  // Business logic features
+  enableSelection?: boolean;
+  enableBulkActions?: boolean;
+  enableExport?: boolean;
+  enableFiltering?: boolean;
+  enableRefresh?: boolean;
+  
+  // Extension points
+  renderToolbar?: () => React.ReactNode;
+  renderBulkActions?: (selectedItems: T[]) => React.ReactNode;
+  renderCustomColumn?: (column: Column<T>, item: T) => React.ReactNode;
+  renderEmptyState?: () => React.ReactNode;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  
+  // Event handlers
+  onExport?: (data: T[]) => void;
+  onRefresh?: () => void;
+  onFilter?: (filters: Record<string, unknown>) => void;
+}
+
+export const EntityListPanel = <T extends EntityData>({
+  config,
+  data,
+  isLoading = false,
+  onRowClick,
+  onAction,
+  className,
+  columns: customColumns,
+  showSearch = true,
+  showPagination = true,
+  pageSize = 10,
+  searchPlaceholder,
+  enableSelection = false,
+  enableBulkActions = false,
+  enableExport = true,
+  enableFiltering = false,
+  enableRefresh = true,
+  renderToolbar,
+  renderBulkActions,
+  renderCustomColumn,
+  renderEmptyState,
+  headerSlot,
+  footerSlot,
+  onExport,
+  onRefresh
+}: EntityListPanelProps<T>) => {
+  const [selectedItems, setSelectedItems] = React.useState<T[]>([]);
+  const [showFilters, setShowFilters] = React.useState(false);
+
+  // Generate columns based on config if not provided
+  const tableColumns = useMemo(() => {
+    if (customColumns) return customColumns;
+
+    const generatedColumns: Column<T>[] = [];
+
+    // Add selection column if enabled
+    if (enableSelection) {
+      generatedColumns.push({
+        key: '__selection',
+        header: (
+          <input
+            type="checkbox"
+            checked={selectedItems.length === data.length && data.length > 0}
+            onChange={(e) => {
+              if (e.target.checked) {
+                setSelectedItems([...data]);
+              } else {
+                setSelectedItems([]);
+              }
+            }}
+          />
+        ),
+        cell: (item: T) => (
+          <input
+            type="checkbox"
+            checked={selectedItems.some(selected => selected.id === item.id)}
+            onChange={(e) => {
+              if (e.target.checked) {
+                setSelectedItems(prev => [...prev, item]);
+              } else {
+                setSelectedItems(prev => prev.filter(selected => selected.id !== item.id));
+              }
+            }}
+          />
+        ),
+        sortable: false,
+        width: '50px'
+      });
+    }
+
+    // Auto-generate columns from first data item
+    if (data.length > 0) {
+      const sampleItem = data[0];
+      Object.keys(sampleItem).forEach(key => {
+        if (key === 'id') return; // Skip ID column usually
+
+        const isStatus = key.toLowerCase().includes('status');
+        const isCategory = key.toLowerCase().includes('category') || key.toLowerCase().includes('type');
+        const isDate = key.toLowerCase().includes('date') || key.toLowerCase().includes('time');
+        const isAmount = key.toLowerCase().includes('amount') || key.toLowerCase().includes('price') || key.toLowerCase().includes('cost');
+
+        generatedColumns.push({
+          key,
+          header: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
+          type: isStatus ? 'status' : isCategory ? 'category' : 'default',
+          sortable: true,
+          cell: renderCustomColumn ? (item: T) => {
+            const column = { key, header: '', type: isStatus ? 'status' : isCategory ? 'category' : 'default' } as Column<T>;
+            const customContent = renderCustomColumn(column, item);
+            if (customContent) return customContent;
+            
+            // Default rendering with smart formatting
+            const value = item[key];
+            if (isDate && value) {
+              return new Date(value as string).toLocaleDateString();
+            }
+            if (isAmount && typeof value === 'number') {
+              return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD'
+              }).format(value);
+            }
+            return value?.toString() || '-';
+          } : undefined
+        });
+      });
+    }
+
+    return generatedColumns;
+  }, [customColumns, data, enableSelection, selectedItems, renderCustomColumn]);
+
+  const handleExport = () => {
+    if (onExport) {
+      onExport(selectedItems.length > 0 ? selectedItems : data);
+    } else {
+      // Default CSV export
+      const headers = tableColumns.filter(col => col.key !== '__selection').map(col => col.key);
+      const csvContent = [
+        headers.join(','),
+        ...(selectedItems.length > 0 ? selectedItems : data).map(item =>
+          headers.map(header => item[header] || '').join(',')
+        )
+      ].join('\n');
+      
+      const blob = new Blob([csvContent], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${config.display.title.toLowerCase().replace(/\s+/g, '-')}-export.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const renderToolbarSection = () => {
+    return (
+      <div className="flex items-center justify-between gap-4 mb-4">
+        <div className="flex items-center gap-2">
+          <h3 className="text-lg font-semibold text-foreground">
+            {config.display.title}
+          </h3>
+          {config.display.description && (
+            <Badge variant="outline" className="text-xs">
+              {data.length} items
+            </Badge>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {renderToolbar && renderToolbar()}
+          
+          {enableFiltering && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowFilters(!showFilters)}
+              className={cn(showFilters && "bg-muted")}
+            >
+              <Filter className="w-4 h-4 mr-2" />
+              Filters
+            </Button>
+          )}
+          
+          {enableRefresh && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw className={cn("w-4 h-4 mr-2", isLoading && "animate-spin")} />
+              Refresh
+            </Button>
+          )}
+          
+          {enableExport && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExport}
+              disabled={data.length === 0}
+            >
+              <Download className="w-4 h-4 mr-2" />
+              Export
+            </Button>
+          )}
+          
+          {config.actions?.filter(action => action.type === 'primary').map(action => (
+            <Button
+              key={action.label}
+              size="sm"
+              onClick={() => onAction?.(action, [])}
+              disabled={isLoading}
+            >
+              {action.icon && <action.icon className="w-4 h-4 mr-2" />}
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderBulkActionsSection = () => {
+    if (!enableBulkActions || selectedItems.length === 0) return null;
+
+    return (
+      <div className="flex items-center justify-between bg-muted/50 p-3 rounded-md mb-4">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            {selectedItems.length} items selected
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setSelectedItems([])}
+          >
+            Clear selection
+          </Button>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {renderBulkActions && renderBulkActions(selectedItems)}
+          
+          {config.actions?.filter(action => action.type !== 'primary').map(action => (
+            <Button
+              key={action.label}
+              variant={action.type === 'danger' ? 'destructive' : 'outline'}
+              size="sm"
+              onClick={() => onAction?.(action, selectedItems)}
+            >
+              {action.icon && <action.icon className="w-4 h-4 mr-2" />}
+              {action.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderEmptyStateSection = () => {
+    if (data.length > 0) return null;
+
+    if (renderEmptyState) {
+      return renderEmptyState();
+    }
+
+    return (
+      <div className="text-center py-12">
+        <div className="text-muted-foreground mb-4">
+          No {config.display.title.toLowerCase()} found
+        </div>
+        {config.actions?.find(action => action.type === 'primary') && (
+          <Button onClick={() => {
+            const primaryAction = config.actions?.find(action => action.type === 'primary');
+            if (primaryAction) onAction?.(primaryAction, []);
+          }}>
+            <Plus className="w-4 h-4 mr-2" />
+            Add {config.display.title.slice(0, -1)}
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cn('p-6', className)} category={config.display.category} data-component-name="EntityListPanel">
+      {headerSlot}
+      
+      {renderToolbarSection()}
+      {renderBulkActionsSection()}
+      
+      {data.length === 0 ? (
+        renderEmptyStateSection()
+      ) : (
+        <DataTable
+          data={data}
+          columns={tableColumns}
+          isLoading={isLoading}
+          showSearch={showSearch}
+          showPagination={showPagination}
+          pageSize={pageSize}
+          searchPlaceholder={searchPlaceholder || `Search ${config.display.title.toLowerCase()}...`}
+          onRowClick={onRowClick}
+          hover={!!onRowClick}
+          emptyMessage={`No ${config.display.title.toLowerCase()} found`}
+        />
+      )}
+      
+      {footerSlot}
+    </Card>
+  );
+};

package/src/organisms/entity/MetricsOverviewPanel.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { StatCard } from '../../atoms/composed/StatCard';
+import { MetricCalculationEngine } from '../../atoms/utils/metric-engine';
+import type { MetricConfig, EntityData, MetricValue } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+
+export interface MetricsOverviewPanelProps {
+  metrics: MetricConfig[];
+  data: EntityData[];
+  previousData?: EntityData[];
+  isLoading?: boolean;
+  onMetricClick?: (metric: MetricConfig, value: MetricValue) => void;
+  className?: string;
+  layout?: 'grid' | 'horizontal' | 'vertical';
+  columns?: 2 | 3 | 4;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  
+  // Extension points
+  renderCustomMetric?: (metric: MetricConfig, value: MetricValue, index: number) => React.ReactNode;
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+}
+
+export const MetricsOverviewPanel: React.FC<MetricsOverviewPanelProps> = ({
+  metrics,
+  data,
+  previousData,
+  isLoading = false,
+  onMetricClick,
+  className,
+  layout = 'grid',
+  columns = 4,
+  category,
+  renderCustomMetric,
+  renderHeader,
+  renderFooter,
+  headerSlot,
+  footerSlot
+}) => {
+  const calculatedMetrics = React.useMemo(() => {
+    if (isLoading || !data?.length || !metrics?.length) return {};
+    
+    return metrics.reduce((acc, metric) => {
+      acc[metric.key] = MetricCalculationEngine.calculateMetric(
+        metric,
+        data,
+        previousData
+      );
+      return acc;
+    }, {} as Record<string, MetricValue>);
+  }, [metrics, data, previousData, isLoading]);
+
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case 'horizontal':
+        return 'flex flex-wrap gap-4';
+      case 'vertical':
+        return 'flex flex-col gap-4';
+      case 'grid':
+      default:
+        return cn(
+          'grid gap-4',
+          {
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4': columns === 4,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3': columns === 3,
+            'grid-cols-1 sm:grid-cols-2': columns === 2
+          }
+        );
+    }
+  };
+
+  const renderMetricCard = (metric: MetricConfig, index: number) => {
+    if (renderCustomMetric) {
+      const customContent = renderCustomMetric(metric, calculatedMetrics[metric.key], index);
+      if (customContent) return customContent;
+    }
+
+    const metricValue = calculatedMetrics[metric.key];
+    
+    if (isLoading || !metricValue) {
+      return (
+        <StatCard
+          key={metric.key}
+          title={metric.label}
+          value=""
+          isLoading={true}
+          category={category}
+          icon={metric.icon ? <metric.icon /> : undefined}
+        />
+      );
+    }
+
+    const trend = metricValue.trend !== 'neutral' && metricValue.previous 
+      ? {
+          value: Number(((metricValue.current - metricValue.previous) / Math.abs(metricValue.previous) * 100).toFixed(1)),
+          label: 'vs last period'
+        }
+      : undefined;
+
+    const formatTargetValue = (value: number) => {
+      switch (metric.type) {
+        case 'currency':
+          return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD'
+          }).format(value);
+        case 'percentage':
+          return `${value}%`;
+        default:
+          return value.toString();
+      }
+    };
+
+    const subtitle = metricValue.target 
+      ? `Target: ${formatTargetValue(metricValue.target)}`
+      : undefined;
+
+    return (
+      <StatCard
+        key={metric.key}
+        title={metric.label}
+        value={metricValue.formattedValue}
+        subtitle={subtitle}
+        trend={trend}
+        category={category}
+        icon={metric.icon ? <metric.icon /> : undefined}
+        onClick={onMetricClick ? () => onMetricClick(metric, metricValue) : undefined}
+        valueTooltip={`Current: ${metricValue.formattedValue}${metricValue.previous ? ` | Previous: ${formatTargetValue(metricValue.previous)}` : ''}`}
+        iconTooltip={`View ${metric.label} details`}
+      />
+    );
+  };
+
+  return (
+    <div className={cn('space-y-4', className)} data-component-name="MetricsOverviewPanel">
+      {/* Header Extension Point */}
+      {headerSlot}
+      {renderHeader && renderHeader()}
+      
+      {/* Metrics Grid */}
+      <div className={getLayoutClasses()}>
+        {metrics.map((metric, index) => renderMetricCard(metric, index))}
+      </div>
+      
+      {/* Footer Extension Point */}
+      {renderFooter && renderFooter()}
+      {footerSlot}
+    </div>
+  );
+};
+
+// Enhanced version with insights
+export interface MetricsOverviewWithInsightsPanelProps extends MetricsOverviewPanelProps {
+  showInsights?: boolean;
+  insightThresholds?: Record<string, { warning: number; critical: number }>;
+  renderInsight?: (insight: { type: 'positive' | 'negative' | 'neutral'; message: string; value?: number }, index: number) => React.ReactNode;
+}
+
+export const MetricsOverviewWithInsightsPanel: React.FC<MetricsOverviewWithInsightsPanelProps> = ({
+  showInsights = true,
+  insightThresholds,
+  renderInsight,
+  ...props
+}) => {
+  // Ensure metrics is always an array
+  const safeMetrics = props.metrics || [];
+  const safeData = props.data || [];
+  
+  const calculatedMetrics = React.useMemo(() => {
+    if (props.isLoading || !safeData.length || !safeMetrics.length) return {};
+    
+    return safeMetrics.reduce((acc, metric) => {
+      acc[metric.key] = MetricCalculationEngine.calculateMetric(
+        metric,
+        safeData,
+        props.previousData
+      );
+      return acc;
+    }, {} as Record<string, MetricValue>);
+  }, [safeMetrics, safeData, props.previousData, props.isLoading]);
+
+  const insights = React.useMemo(() => {
+    if (!showInsights || props.isLoading || Object.keys(calculatedMetrics).length === 0) {
+      return [];
+    }
+    
+    return MetricCalculationEngine.detectInsights(calculatedMetrics, insightThresholds);
+  }, [calculatedMetrics, showInsights, insightThresholds, props.isLoading]);
+
+  const renderInsightsSection = () => {
+    if (!showInsights || insights.length === 0) return null;
+
+    return (
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-foreground">Key Insights</h3>
+        <div className="space-y-1">
+          {insights.map((insight, index) => {
+            if (renderInsight) {
+              const customInsight = renderInsight(insight, index);
+              if (customInsight) return customInsight;
+            }
+
+            const colorClass = {
+              positive: 'text-status-success',
+              negative: 'text-status-error',
+              neutral: 'text-muted-foreground'
+            }[insight.type];
+
+            return (
+              <div 
+                key={index}
+                className={cn('text-sm', colorClass)}
+              >
+                • {insight.message}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <MetricsOverviewPanel
+      {...props}
+      footerSlot={
+        <>
+          {renderInsightsSection()}
+          {props.footerSlot}
+        </>
+      }
+    />
+  );
+};