@pattern-stack/frontend-patterns 1.0.0

package/src/templates/DataTemplate.tsx

@@ -0,0 +1,319 @@
+import React from 'react';
+import { cn } from '../atoms/utils/utils';
+import { SectionHeader } from '../molecules/layout/SectionHeader';
+import { DataTable, type Column } from '../atoms/composed/DataTable';
+import { SearchInput, type SearchResult } from '../molecules/forms/SearchInput';
+import { Pagination } from '../molecules/navigation/Pagination';
+import { Card } from '../atoms/ui/card';
+import { Button } from '../atoms/ui/button';
+import { Plus, Download, Filter } from 'lucide-react';
+
+export interface DataTemplateProps {
+  /** Page title */
+  title: string;
+  /** Page description */
+  description?: string;
+  /** Search functionality */
+  searchConfig?: {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    results?: SearchResult[];
+  };
+  /** Filter functionality */
+  filterConfig?: {
+    onFilter?: () => void;
+    filterCount?: number;
+  };
+  /** Data table configuration */
+  tableConfig: {
+    data: Record<string, unknown>[];
+    columns: Column<Record<string, unknown>>[];
+    loading?: boolean;
+    onRowClick?: (item: Record<string, unknown>) => void;
+  };
+  /** Pagination configuration */
+  paginationConfig?: {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+  };
+  /** Action buttons */
+  actions?: {
+    primary?: {
+      label: string;
+      onClick: () => void;
+      icon?: React.ReactNode;
+    };
+    secondary?: Array<{
+      label: string;
+      onClick: () => void;
+      icon?: React.ReactNode;
+    }>;
+  };
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Empty state content */
+  emptyState?: React.ReactNode;
+}
+
+export const DataTemplate: React.FC<DataTemplateProps> = ({
+  title,
+  description,
+  searchConfig,
+  filterConfig,
+  tableConfig,
+  paginationConfig,
+  actions,
+  className,
+  category = 1,
+  emptyState
+}) => {
+  const hasData = tableConfig.data && tableConfig.data.length > 0;
+  const showControls = searchConfig || filterConfig || actions;
+
+  return (
+    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
+      {/* Header Section */}
+      <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-6 py-6">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              <SectionHeader
+                title={title}
+                description={description}
+                size="lg"
+                className="text-left"
+              />
+            </div>
+            
+            {actions?.primary && (
+              <div className="ml-6 flex-shrink-0">
+                <Button
+                  onClick={actions.primary.onClick}
+                  className={cn(
+                    `bg-category-${category} hover:bg-category-${category}/90`,
+                    'text-white'
+                  )}
+                >
+                  {actions.primary.icon || <Plus className="w-4 h-4 mr-2" />}
+                  {actions.primary.label}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Controls Section */}
+      {showControls && (
+        <div className="flex-shrink-0 border-b border-border bg-muted/30">
+          <div className="container mx-auto px-6 py-4">
+            <div className="flex items-center gap-4">
+              {/* Search */}
+              {searchConfig && (
+                <div className="flex-1 max-w-md">
+                  <SearchInput
+                    placeholder={searchConfig.placeholder}
+                    value={searchConfig.value}
+                    onChange={searchConfig.onChange}
+                    results={searchConfig.results}
+                    category={category}
+                  />
+                </div>
+              )}
+
+              <div className="flex items-center gap-2">
+                {/* Filter Button */}
+                {filterConfig && (
+                  <Button
+                    variant="outline"
+                    onClick={filterConfig.onFilter}
+                    className="relative"
+                  >
+                    <Filter className="w-4 h-4 mr-2" />
+                    Filters
+                    {filterConfig.filterCount && filterConfig.filterCount > 0 && (
+                      <span className={cn(
+                        'absolute -top-2 -right-2 w-5 h-5 rounded-full text-xs font-bold',
+                        'flex items-center justify-center text-white',
+                        `bg-category-${category}`
+                      )}>
+                        {filterConfig.filterCount}
+                      </span>
+                    )}
+                  </Button>
+                )}
+
+                {/* Secondary Actions */}
+                {actions?.secondary?.map((action, index) => (
+                  <Button
+                    key={index}
+                    variant="outline"
+                    onClick={action.onClick}
+                  >
+                    {action.icon || <Download className="w-4 h-4 mr-2" />}
+                    {action.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <div className="flex-1 min-h-0 overflow-auto">
+        <div className="container mx-auto px-6 py-6">
+          {hasData ? (
+            <div className="space-y-6">
+              {/* Data Table */}
+              <Card category={category}>
+                <DataTable
+                  data={tableConfig.data}
+                  columns={tableConfig.columns}
+                  isLoading={tableConfig.loading}
+                  onRowClick={tableConfig.onRowClick}
+                  hover={true}
+                />
+              </Card>
+
+              {/* Pagination */}
+              {paginationConfig && paginationConfig.totalPages > 1 && (
+                <div className="flex justify-center">
+                  <Pagination
+                    currentPage={paginationConfig.currentPage}
+                    totalPages={paginationConfig.totalPages}
+                    onPageChange={paginationConfig.onPageChange}
+                    category={category}
+                  />
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex items-center justify-center min-h-96">
+              {emptyState || (
+                <div className="text-center space-y-4">
+                  <div className="text-muted-foreground text-lg">
+                    No data available
+                  </div>
+                  <p className="text-sm text-muted-foreground max-w-md">
+                    {actions?.primary ? (
+                      <>Get started by creating your first {title.toLowerCase()}.</>
+                    ) : (
+                      <>There's no data to display at the moment.</>
+                    )}
+                  </p>
+                  {actions?.primary && (
+                    <Button
+                      onClick={actions.primary.onClick}
+                      className={cn(
+                        `bg-category-${category} hover:bg-category-${category}/90`,
+                        'text-white'
+                      )}
+                    >
+                      {actions.primary.icon || <Plus className="w-4 h-4 mr-2" />}
+                      {actions.primary.label}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Data Detail Template
+ * Template for displaying detailed information about a single data item
+ */
+export interface DataDetailTemplateProps {
+  /** Page title */
+  title: string;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Back navigation */
+  onBack?: () => void;
+  /** Detail content */
+  children: React.ReactNode;
+  /** Action buttons */
+  actions?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Sidebar content */
+  sidebar?: React.ReactNode;
+}
+
+export const DataDetailTemplate: React.FC<DataDetailTemplateProps> = ({
+  title,
+  subtitle,
+  onBack,
+  children,
+  actions,
+  className,
+  sidebar
+}) => {
+  return (
+    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
+      {/* Header */}
+      <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto px-6 py-6">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 min-w-0">
+              {onBack && (
+                <Button
+                  variant="ghost"
+                  onClick={onBack}
+                  className="mb-4 -ml-3"
+                >
+                  ← Back
+                </Button>
+              )}
+              <SectionHeader
+                title={title}
+                subtitle={subtitle}
+                size="lg"
+                className="text-left"
+              />
+            </div>
+            
+            {actions && (
+              <div className="ml-6 flex-shrink-0">
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-h-0 overflow-auto">
+        <div className="container mx-auto px-6 py-6">
+          <div className={cn(
+            'grid gap-6',
+            sidebar ? 'grid-cols-1 lg:grid-cols-3' : 'grid-cols-1'
+          )}>
+            {/* Main Content */}
+            <div className={sidebar ? 'lg:col-span-2' : 'col-span-1'}>
+              {children}
+            </div>
+
+            {/* Sidebar */}
+            {sidebar && (
+              <div className="lg:col-span-1">
+                {sidebar}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};