@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/templates/DataTemplate.tsx

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