@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/organisms/entity/EntityListPanel.tsx

@@ -1,339 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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}
-        </>
-      }
-    />
-  );
-};