@pattern-stack/frontend-patterns 0.0.4 → 0.0.6

package/src/pages/TestEntityTemplate.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+// Simple test component to verify the entity templates work
+export const TestEntityTemplate: React.FC = () => {
+  const testData = [
+    {
+      id: '1',
+      amount: 1000,
+      category: 'Test',
+      date: '2024-01-01'
+    }
+  ];
+
+  const testConfig = {
+    entityType: 'transactional' as const,
+    display: {
+      title: 'Test Dashboard',
+      category: 1 as const
+    },
+    metrics: [
+      {
+        key: 'amount',
+        label: 'Total Amount',
+        type: 'currency' as const
+      }
+    ]
+  };
+
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl font-bold mb-4">Entity Template Test</h1>
+      <div className="bg-muted p-4 rounded-lg">
+        <p>Config: {JSON.stringify(testConfig, null, 2)}</p>
+        <p>Data: {JSON.stringify(testData, null, 2)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default TestEntityTemplate;

package/src/pages/index.ts

@@ -1,2 +1,3 @@
 export { ComponentShowcase } from './ComponentShowcase';
-export * from './AdminShowcase';
+export * from './AdminShowcase';
+export * from './EntityShowcase';

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>
+  );
+};