@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/templates/entity/EntityManagementTemplate.tsx

@@ -0,0 +1,430 @@
+import React, { useState } from 'react';
+import { AppLayout } from '../../molecules/layout/AppLayout';
+import { PageTemplate } from '../../molecules/layout/PageTemplate';
+import { SectionHeader } from '../../molecules/layout/SectionHeader';
+import { EntityListPanel } from '../../organisms/entity';
+import { Modal } from '../../atoms/composed/Modal';
+import { Button } from '../../atoms/ui/button';
+import { Card } from '../../atoms/ui/card';
+import { Badge } from '../../atoms/ui/Badge';
+import type { EntityTemplateConfig, EntityData, ActionConfig } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+import { Plus, Trash2, Filter, Download } from 'lucide-react';
+
+export interface EntityManagementTemplateProps<T extends EntityData> {
+  config: EntityTemplateConfig<T>;
+  data: T[];
+  isLoading?: boolean;
+  className?: string;
+  
+  // View configuration
+  defaultView?: 'list' | 'grid' | 'cards';
+  enableViews?: boolean;
+  enableSearch?: boolean;
+  enableFiltering?: boolean;
+  enableBulkActions?: boolean;
+  enableExport?: boolean;
+  pageSize?: number;
+  
+  // CRUD operations
+  onCreate?: (item: Partial<T>) => Promise<T> | T;
+  onUpdate?: (id: string | number, item: Partial<T>) => Promise<T> | T;
+  onDelete?: (id: string | number) => Promise<void> | void;
+  onBulkDelete?: (ids: (string | number)[]) => Promise<void> | void;
+  onView?: (item: T) => void;
+  
+  // Extension points - Render Props
+  renderCreateForm?: (onSubmit: (item: Partial<T>) => void, onCancel: () => void) => React.ReactNode;
+  renderEditForm?: (item: T, onSubmit: (item: Partial<T>) => void, onCancel: () => void) => React.ReactNode;
+  renderDetailView?: (item: T, onEdit: () => void, onClose: () => void) => React.ReactNode;
+  renderCustomActions?: (item?: T) => React.ReactNode;
+  renderEmptyState?: () => React.ReactNode;
+  renderFilterPanel?: (onFilter: (filters: Record<string, unknown>) => void) => React.ReactNode;
+  
+  // Extension points - Slots
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  toolbarSlot?: React.ReactNode;
+  listHeaderSlot?: React.ReactNode;
+  listFooterSlot?: React.ReactNode;
+  
+  // Event handlers
+  onRefresh?: () => void;
+  onFilter?: (filters: Record<string, unknown>) => void;
+  onExport?: (data: T[], format: 'csv' | 'json') => void;
+  onSelectionChange?: (selectedItems: T[]) => void;
+}
+
+export const EntityManagementTemplate = <T extends EntityData>({
+  config,
+  data,
+  isLoading = false,
+  className,
+  enableSearch = true,
+  enableFiltering = true,
+  enableBulkActions = true,
+  enableExport = true,
+  pageSize = 10,
+  onCreate,
+  onUpdate,
+  onDelete,
+  onBulkDelete,
+  onView,
+  renderCreateForm,
+  renderEditForm,
+  renderDetailView,
+  renderCustomActions,
+  renderEmptyState,
+  renderFilterPanel,
+  headerSlot,
+  footerSlot,
+  toolbarSlot,
+  listHeaderSlot,
+  listFooterSlot,
+  onRefresh,
+  onFilter,
+  onExport
+}: EntityManagementTemplateProps<T>) => {
+  
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [showFilterPanel, setShowFilterPanel] = useState(false);
+  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+  const [selectedItems, setSelectedItems] = useState<T[]>([]);
+
+  const handleCreate = async (item: Partial<T>) => {
+    if (onCreate) {
+      try {
+        await onCreate(item);
+        setShowCreateModal(false);
+        onRefresh?.();
+      } catch (error) {
+        console.error('Create failed:', error);
+      }
+    }
+  };
+
+  const handleUpdate = async (item: Partial<T>) => {
+    if (onUpdate && selectedItem) {
+      try {
+        await onUpdate(selectedItem.id, item);
+        setShowEditModal(false);
+        setSelectedItem(null);
+        onRefresh?.();
+      } catch (error) {
+        console.error('Update failed:', error);
+      }
+    }
+  };
+
+
+  const handleBulkDelete = async () => {
+    if (onBulkDelete && selectedItems.length > 0 && confirm(`Are you sure you want to delete ${selectedItems.length} ${config.display.title.toLowerCase()}?`)) {
+      try {
+        const ids = selectedItems.map(item => item.id);
+        await onBulkDelete(ids);
+        setSelectedItems([]);
+        onRefresh?.();
+      } catch (error) {
+        console.error('Bulk delete failed:', error);
+      }
+    }
+  };
+
+  const handleView = (item: T) => {
+    if (onView) {
+      onView(item);
+    } else {
+      setSelectedItem(item);
+      setShowDetailModal(true);
+    }
+  };
+
+  const handleEdit = (item: T) => {
+    setSelectedItem(item);
+    setShowEditModal(true);
+  };
+
+  const handleRowClick = (item: T) => {
+    handleView(item);
+  };
+
+  const handleAction = (action: ActionConfig, selectedItems: T[]) => {
+    action.onClick({ selectedItems, config });
+  };
+
+  const generateDefaultActions = (): ActionConfig[] => {
+    const actions: ActionConfig[] = [];
+
+    if (onCreate) {
+      actions.push({
+        label: `Add ${config.display.title.slice(0, -1)}`,
+        type: 'primary',
+        icon: Plus,
+        onClick: () => setShowCreateModal(true)
+      });
+    }
+
+    return actions;
+  };
+
+
+  const renderPageHeader = () => {
+    const actions = [
+      ...generateDefaultActions(),
+      ...(config.actions || [])
+    ];
+
+    return (
+      <SectionHeader
+        title={config.display.title}
+        description={config.display.description}
+        category={config.display.category}
+        actions={
+          <div className="flex items-center gap-2">
+            {renderCustomActions && renderCustomActions()}
+            
+            {enableFiltering && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowFilterPanel(!showFilterPanel)}
+                className={cn(showFilterPanel && "bg-muted")}
+              >
+                <Filter className="w-4 h-4 mr-2" />
+                Filters
+              </Button>
+            )}
+            
+            {enableExport && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onExport?.(selectedItems.length > 0 ? selectedItems : data, 'csv')}
+                disabled={data.length === 0}
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Export
+              </Button>
+            )}
+            
+            {actions.map(action => (
+              <Button
+                key={action.label}
+                variant={action.type === 'primary' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => action.onClick({ data, config })}
+              >
+                {action.icon && <action.icon className="w-4 h-4 mr-2" />}
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        }
+      />
+    );
+  };
+
+  const renderToolbar = () => {
+    if (selectedItems.length === 0) return null;
+
+    return (
+      <div className="bg-muted/50 p-4 rounded-lg mb-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">
+              {selectedItems.length} selected
+            </Badge>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setSelectedItems([])}
+            >
+              Clear selection
+            </Button>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            {onBulkDelete && (
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={handleBulkDelete}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete Selected
+              </Button>
+            )}
+            
+            {enableExport && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onExport?.(selectedItems, 'csv')}
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Export Selected
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderFilterPanelSection = () => {
+    if (!showFilterPanel) return null;
+
+    return (
+      <Card className="p-4 mb-4">
+        {renderFilterPanel ? (
+          renderFilterPanel(onFilter || (() => {}))
+        ) : (
+          <div className="text-center text-muted-foreground py-4">
+            Filter functionality not implemented yet
+          </div>
+        )}
+      </Card>
+    );
+  };
+
+  const renderCreateModal = () => {
+    if (!showCreateModal) return null;
+
+    return (
+      <Modal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        title={`Create ${config.display.title.slice(0, -1)}`}
+        category={config.display.category}
+      >
+        {renderCreateForm ? (
+          renderCreateForm(handleCreate, () => setShowCreateModal(false))
+        ) : (
+          <div className="p-6 text-center text-muted-foreground">
+            Create form not implemented yet
+          </div>
+        )}
+      </Modal>
+    );
+  };
+
+  const renderEditModal = () => {
+    if (!showEditModal || !selectedItem) return null;
+
+    return (
+      <Modal
+        isOpen={showEditModal}
+        onClose={() => {
+          setShowEditModal(false);
+          setSelectedItem(null);
+        }}
+        title={`Edit ${config.display.title.slice(0, -1)}`}
+        category={config.display.category}
+      >
+        {renderEditForm ? (
+          renderEditForm(
+            selectedItem,
+            handleUpdate,
+            () => {
+              setShowEditModal(false);
+              setSelectedItem(null);
+            }
+          )
+        ) : (
+          <div className="p-6 text-center text-muted-foreground">
+            Edit form not implemented yet
+          </div>
+        )}
+      </Modal>
+    );
+  };
+
+  const renderDetailModal = () => {
+    if (!showDetailModal || !selectedItem) return null;
+
+    return (
+      <Modal
+        isOpen={showDetailModal}
+        onClose={() => {
+          setShowDetailModal(false);
+          setSelectedItem(null);
+        }}
+        title={`${config.display.title.slice(0, -1)} Details`}
+        category={config.display.category}
+        size="large"
+      >
+        {renderDetailView ? (
+          renderDetailView(
+            selectedItem,
+            () => {
+              setShowDetailModal(false);
+              handleEdit(selectedItem);
+            },
+            () => {
+              setShowDetailModal(false);
+              setSelectedItem(null);
+            }
+          )
+        ) : (
+          <div className="p-6">
+            <div className="space-y-4">
+              {Object.entries(selectedItem).map(([key, value]) => (
+                <div key={key} className="flex justify-between">
+                  <span className="font-medium capitalize">{key}:</span>
+                  <span>{value?.toString() || '-'}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </Modal>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <PageTemplate
+        className={cn('container mx-auto px-4 py-6', className)}
+        data-component-name="EntityManagementTemplate"
+      >
+        {headerSlot}
+        {renderPageHeader()}
+        {toolbarSlot}
+        {renderFilterPanelSection()}
+        {renderToolbar()}
+        
+        <div className="space-y-4">
+          {listHeaderSlot}
+          
+          <EntityListPanel
+            config={config}
+            data={data}
+            isLoading={isLoading}
+            onRowClick={handleRowClick}
+            onAction={handleAction}
+            enableSelection={enableBulkActions}
+            enableBulkActions={enableBulkActions}
+            enableExport={enableExport}
+            enableRefresh={!!onRefresh}
+            showSearch={enableSearch}
+            showPagination={true}
+            pageSize={pageSize}
+            renderEmptyState={renderEmptyState}
+            onExport={onExport}
+            onRefresh={onRefresh}
+          />
+          
+          {listFooterSlot}
+        </div>
+        
+        {renderCreateModal()}
+        {renderEditModal()}
+        {renderDetailModal()}
+        
+        {footerSlot}
+      </PageTemplate>
+    </AppLayout>
+  );
+};

package/src/templates/entity/EntityPerformanceDashboardTemplate.tsx

@@ -0,0 +1,277 @@
+import React from 'react';
+import { AppLayout } from '../../molecules/layout/AppLayout';
+import { PageTemplate } from '../../molecules/layout/PageTemplate';
+import { SectionHeader } from '../../molecules/layout/SectionHeader';
+import { 
+  MetricsOverviewPanel, 
+  MetricsOverviewWithInsightsPanel,
+  TrendAnalysisPanel,
+  CategoryBreakdownPanel 
+} from '../../organisms/entity';
+import type { EntityTemplateConfig, EntityData, MetricValue, ActionConfig, MetricConfig } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+
+export interface EntityPerformanceDashboardTemplateProps<T extends EntityData> {
+  config: EntityTemplateConfig<T>;
+  data: T[];
+  previousData?: T[];
+  isLoading?: boolean;
+  className?: string;
+  
+  // Layout configuration
+  layout?: 'standard' | 'compact' | 'detailed';
+  showInsights?: boolean;
+  showTrends?: boolean;
+  showCategories?: boolean;
+  
+  // Extension points - Render Props
+  renderCustomActions?: () => React.ReactNode;
+  renderAdditionalMetrics?: () => React.ReactNode;
+  renderCustomTrendChart?: (config: EntityTemplateConfig<T>, data: T[]) => React.ReactNode;
+  renderCustomCategoryView?: (config: EntityTemplateConfig<T>, data: T[]) => React.ReactNode;
+  
+  // Extension points - Slots
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  metricsHeaderSlot?: React.ReactNode;
+  metricsFooterSlot?: React.ReactNode;
+  trendsHeaderSlot?: React.ReactNode;
+  trendsFooterSlot?: React.ReactNode;
+  categoriesHeaderSlot?: React.ReactNode;
+  categoriesFooterSlot?: React.ReactNode;
+  
+  // Event handlers
+  onMetricClick?: (metric: MetricConfig, value: MetricValue) => void;
+  onCategoryClick?: (category: unknown) => void;
+  onTrendPeriodChange?: (period: string) => void;
+  onActionClick?: (action: ActionConfig, context: T[]) => void;
+  onRefresh?: () => void;
+  onExport?: (type: 'metrics' | 'trends' | 'categories', data: unknown) => void;
+}
+
+export const EntityPerformanceDashboardTemplate = <T extends EntityData>({
+  config,
+  data,
+  previousData,
+  isLoading = false,
+  className,
+  layout = 'standard',
+  showInsights = true,
+  showTrends = true,
+  showCategories = true,
+  renderCustomActions,
+  renderAdditionalMetrics,
+  renderCustomTrendChart,
+  renderCustomCategoryView,
+  headerSlot,
+  footerSlot,
+  metricsHeaderSlot,
+  metricsFooterSlot,
+  trendsHeaderSlot,
+  trendsFooterSlot,
+  categoriesHeaderSlot,
+  categoriesFooterSlot,
+  onMetricClick,
+  onCategoryClick,
+  onTrendPeriodChange,
+  onExport
+}: EntityPerformanceDashboardTemplateProps<T>) => {
+  
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case 'compact':
+        return 'space-y-4';
+      case 'detailed':
+        return 'space-y-8';
+      case 'standard':
+      default:
+        return 'space-y-6';
+    }
+  };
+
+  const renderPageHeader = () => {
+    return (
+      <SectionHeader
+        title={config.display.title}
+        description={config.display.description}
+        category={config.display.category}
+        actions={renderCustomActions ? renderCustomActions() : undefined}
+      />
+    );
+  };
+
+  const renderMetricsSection = () => {
+    if (!config.metrics.length) return null;
+
+    const MetricsComponent = showInsights ? MetricsOverviewWithInsightsPanel : MetricsOverviewPanel;
+
+    return (
+      <section className="space-y-4">
+        {metricsHeaderSlot}
+        <MetricsComponent
+          metrics={config.metrics}
+          data={data}
+          previousData={previousData}
+          isLoading={isLoading}
+          onMetricClick={onMetricClick}
+          category={config.display.category}
+          columns={layout === 'compact' ? 2 : layout === 'detailed' ? 4 : 3}
+          headerSlot={renderAdditionalMetrics ? renderAdditionalMetrics() : undefined}
+        />
+        {metricsFooterSlot}
+      </section>
+    );
+  };
+
+  const renderTrendsSection = () => {
+    if (!showTrends || !config.temporal || !config.metrics.length) return null;
+
+    if (renderCustomTrendChart) {
+      const customChart = renderCustomTrendChart(config, data);
+      if (customChart) {
+        return (
+          <section className="space-y-4">
+            {trendsHeaderSlot}
+            {customChart}
+            {trendsFooterSlot}
+          </section>
+        );
+      }
+    }
+
+    return (
+      <section className="space-y-4">
+        {trendsHeaderSlot}
+        <TrendAnalysisPanel
+          metrics={config.metrics}
+          data={data}
+          temporal={config.temporal}
+          isLoading={isLoading}
+          category={config.display.category}
+          enablePeriodSelection={true}
+          enableChartTypeSelection={layout === 'detailed'}
+          showComparisons={layout !== 'compact'}
+          onPeriodChange={onTrendPeriodChange}
+          onExport={(chartData, metric) => onExport?.('trends', { chartData, metric })}
+        />
+        {trendsFooterSlot}
+      </section>
+    );
+  };
+
+  const renderCategoriesSection = () => {
+    if (!showCategories || !config.categories || !data.length) return null;
+
+    // Find a suitable value field from metrics or use first numeric field
+    const valueField = config.metrics.find(m => m.type === 'currency' || m.type === 'count')?.key || 
+                     Object.keys(data[0]).find(key => typeof data[0][key] === 'number') || 
+                     'value';
+
+    if (renderCustomCategoryView) {
+      const customView = renderCustomCategoryView(config, data);
+      if (customView) {
+        return (
+          <section className="space-y-4">
+            {categoriesHeaderSlot}
+            {customView}
+            {categoriesFooterSlot}
+          </section>
+        );
+      }
+    }
+
+    return (
+      <section className="space-y-4">
+        {categoriesHeaderSlot}
+        <CategoryBreakdownPanel
+          data={data}
+          categoryConfig={config.categories}
+          valueField={valueField}
+          isLoading={isLoading}
+          category={config.display.category}
+          title={`${config.display.title} by ${config.categories.defaultGroupBy}`}
+          defaultView={layout === 'compact' ? 'list' : 'both'}
+          enableDrillDown={config.categories.enableDrillDown}
+          onCategoryClick={onCategoryClick}
+          onExport={(categoryData) => onExport?.('categories', categoryData)}
+        />
+        {categoriesFooterSlot}
+      </section>
+    );
+  };
+
+  const renderLayoutContent = () => {
+    const sections = [
+      renderMetricsSection(),
+      renderTrendsSection(),
+      renderCategoriesSection()
+    ].filter(Boolean);
+
+    if (layout === 'detailed' && sections.length > 1) {
+      // For detailed layout, use a grid for trends and categories
+      const [metricsSection, ...otherSections] = sections;
+      
+      return (
+        <div className={getLayoutClasses()}>
+          {metricsSection}
+          
+          {otherSections.length > 0 && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              {otherSections}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className={getLayoutClasses()}>
+        {sections}
+      </div>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <PageTemplate
+        className={cn('container mx-auto px-4 py-6', className)}
+        data-component-name="EntityPerformanceDashboardTemplate"
+      >
+        {headerSlot}
+        {renderPageHeader()}
+        {renderLayoutContent()}
+        {footerSlot}
+      </PageTemplate>
+    </AppLayout>
+  );
+};
+
+// Enhanced version with real-time updates
+export interface EntityPerformanceDashboardTemplateWithRealTimeProps<T extends EntityData> 
+  extends EntityPerformanceDashboardTemplateProps<T> {
+  enableRealTime?: boolean;
+  refreshInterval?: number;
+  onDataUpdate?: (newData: T[]) => void;
+}
+
+export const EntityPerformanceDashboardTemplateWithRealTime = <T extends EntityData>({
+  enableRealTime = false,
+  refreshInterval = 30000, // 30 seconds
+  onDataUpdate,
+  ...props
+}: EntityPerformanceDashboardTemplateWithRealTimeProps<T>) => {
+  React.useEffect(() => {
+    if (!enableRealTime) return;
+
+    const interval = setInterval(() => {
+      if (onDataUpdate) {
+        // This would typically fetch new data from an API
+        onDataUpdate(props.data);
+      }
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [enableRealTime, refreshInterval, onDataUpdate, props.data]);
+
+  return <EntityPerformanceDashboardTemplate {...props} />;
+};