@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/templates/entity/EntityManagementTemplate.tsx

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

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