@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/templates/entity/configs/financial-config.ts

@@ -0,0 +1,141 @@
+import type { EntityTemplateConfig, EntityData } from '../../../atoms/types';
+import { DollarSign, Target, TrendingUp, Wallet } from 'lucide-react';
+
+export interface FinancialTransaction extends EntityData {
+  id: string;
+  amount: number;
+  category: string;
+  account: string;
+  date: string;
+  description: string;
+  type: 'income' | 'expense' | 'transfer';
+  status: 'completed' | 'pending' | 'failed';
+}
+
+export const financialConfig: EntityTemplateConfig<FinancialTransaction> = {
+  entityType: 'transactional',
+  display: {
+    title: 'Financial Dashboard',
+    description: 'Personal finance overview and transaction management',
+    category: 2 // Green theme for financial success
+  },
+  metrics: [
+    {
+      key: 'totalBalance',
+      label: 'Total Balance',
+      type: 'currency',
+      trend: true,
+      icon: DollarSign,
+      aggregation: 'sum'
+    },
+    {
+      key: 'monthlyIncome',
+      label: 'Monthly Income',
+      type: 'currency',
+      trend: true,
+      icon: TrendingUp,
+      aggregation: 'sum'
+    },
+    {
+      key: 'monthlyExpenses',
+      label: 'Monthly Expenses', 
+      type: 'currency',
+      trend: true,
+      icon: Wallet,
+      aggregation: 'sum'
+    },
+    {
+      key: 'savingsRate',
+      label: 'Savings Rate',
+      type: 'percentage',
+      target: 20,
+      icon: Target
+    }
+  ],
+  temporal: {
+    cycles: ['monthly', 'quarterly', 'yearly'],
+    defaultCycle: 'monthly',
+    enableComparisons: true,
+    forecasting: {
+      enabled: true,
+      periods: 3,
+      algorithm: 'seasonal'
+    }
+  },
+  categories: {
+    hierarchy: ['account', 'category', 'type'],
+    defaultGroupBy: 'category',
+    enableDrillDown: true,
+    colorCoding: true
+  },
+  actions: [
+    {
+      label: 'Add Transaction',
+      type: 'primary',
+      onClick: ({ data, config }) => {
+        console.log('Adding new transaction', { data, config });
+      }
+    },
+    {
+      label: 'Generate Report',
+      type: 'secondary', 
+      onClick: ({ selectedItems, data, config }) => {
+        console.log('Generating report', { selectedItems, data, config });
+      }
+    }
+  ]
+};
+
+// Sample financial data for testing
+export const sampleFinancialData: FinancialTransaction[] = [
+  {
+    id: '1',
+    amount: 5000,
+    category: 'Salary',
+    account: 'Checking',
+    date: '2024-01-15',
+    description: 'Monthly salary',
+    type: 'income',
+    status: 'completed'
+  },
+  {
+    id: '2', 
+    amount: -1200,
+    category: 'Rent',
+    account: 'Checking',
+    date: '2024-01-01',
+    description: 'Monthly rent payment',
+    type: 'expense',
+    status: 'completed'
+  },
+  {
+    id: '3',
+    amount: -300,
+    category: 'Groceries',
+    account: 'Checking', 
+    date: '2024-01-10',
+    description: 'Weekly groceries',
+    type: 'expense',
+    status: 'completed'
+  },
+  {
+    id: '4',
+    amount: -80,
+    category: 'Utilities',
+    account: 'Checking',
+    date: '2024-01-05',
+    description: 'Electric bill',
+    type: 'expense', 
+    status: 'completed'
+  },
+  {
+    id: '5',
+    amount: -45,
+    category: 'Entertainment',
+    account: 'Checking',
+    date: '2024-01-12',
+    description: 'Movie tickets',
+    type: 'expense',
+    status: 'completed'
+  }
+];

package/src/templates/entity/configs/index.ts

@@ -0,0 +1 @@
+export * from './financial-config';

package/src/templates/entity/index.ts

@@ -0,0 +1,3 @@
+export * from './EntityPerformanceDashboardTemplate';
+export * from './EntityManagementTemplate';
+export * from './configs';

package/src/templates/factory.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { AuthProvider } from '../features/auth'
+import { SidebarProvider } from '../molecules/layout'
+import { AppLayout } from '../molecules/layout'
+import { DashboardTemplate } from './DashboardTemplate'
+import type { AuthConfig } from '../atoms/types'
+
+// App configuration interface
+export interface AppConfig {
+  title: string
+  description?: string
+  version?: string
+  enableAuth?: boolean
+  enableQuery?: boolean
+  enableTheming?: boolean
+  enableRouting?: boolean
+  apiUrl?: string
+  apiTimeout?: number
+  theme?: string
+  darkMode?: boolean
+  auth?: AuthConfig
+  customProviders?: React.ComponentType<{ children: ReactNode }>[]
+}
+
+// App instance interface
+export interface AppInstance {
+  render: () => ReactNode
+  addRoutes: (path: string, component: ReactNode) => void
+  mount: (elementId?: string) => void
+}
+
+// Main app factory function
+export function createReactApp(config: AppConfig | string): AppInstance {
+  // Handle simple string config
+  const appConfig: AppConfig = typeof config === 'string' 
+    ? { title: config }
+    : config
+
+  // Set defaults
+  const {
+    title,
+    description = `${title} Application`,
+    version = '1.0.0',
+    enableAuth = true,
+    enableQuery = true,
+    enableRouting = true,
+    auth,
+    customProviders = []
+  } = appConfig
+
+  // Initialize query client
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        refetchOnWindowFocus: false,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+      },
+    },
+  })
+
+  // Store routes
+  const routes: Array<{ path: string; component: ReactNode }> = []
+
+  // Default home page
+  const DefaultHome = () => (
+    <DashboardTemplate title={title} description={description}>
+      <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">🌿 {title}</h1>
+        <p className="text-lg text-gray-600 mb-6">{description}</p>
+        <div className="space-y-2 text-sm text-gray-500">
+          <p>✅ Template integration successful</p>
+          <p>🔧 Version: {version}</p>
+          <p>🚀 Ready for development</p>
+        </div>
+      </div>
+    </DashboardTemplate>
+  )
+
+  // Build provider tree
+  const createProviderTree = (children: ReactNode): ReactNode => {
+    let tree = children
+
+    // Wrap with custom providers (in reverse order)
+    customProviders.reverse().forEach((Provider) => {
+      tree = <Provider key={Provider.name}>{tree}</Provider>
+    })
+
+    // Wrap with layout providers
+    if (enableRouting) {
+      tree = (
+        <SidebarProvider>
+          {tree}
+        </SidebarProvider>
+      )
+    }
+
+    // Wrap with auth provider
+    if (enableAuth) {
+      tree = <AuthProvider config={auth}>{tree}</AuthProvider>
+    }
+
+    // Wrap with query provider
+    if (enableQuery) {
+      tree = (
+        <QueryClientProvider client={queryClient}>
+          {tree}
+          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        </QueryClientProvider>
+      )
+    }
+
+    // Wrap with router
+    if (enableRouting) {
+      tree = <BrowserRouter>{tree}</BrowserRouter>
+    }
+
+    return tree
+  }
+
+  // Create app instance
+  const appInstance: AppInstance = {
+    addRoutes(path: string, component: ReactNode) {
+      routes.push({ path, component })
+    },
+
+    render() {
+      const AppContent = () => (
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<DefaultHome />} />
+            {routes.map(({ path, component }, index) => (
+              <Route key={index} path={path} element={component} />
+            ))}
+          </Route>
+        </Routes>
+      )
+
+      return createProviderTree(<AppContent />)
+    },
+
+    mount(elementId = 'root') {
+      const element = document.getElementById(elementId)
+      if (!element) {
+        throw new Error(`Element with id "${elementId}" not found`)
+      }
+
+      const root = createRoot(element)
+      root.render(
+        <React.StrictMode>
+          {this.render()}
+        </React.StrictMode>
+      )
+    }
+  }
+
+  return appInstance
+}
+
+// Convenience function for simple apps
+export function createSimpleApp(title: string): AppInstance {
+  return createReactApp({ title })
+}
+

package/src/templates/financial/FinancialDashboardTemplate.tsx

@@ -0,0 +1,326 @@
+import React from 'react';
+import { cn } from '../../atoms/utils/utils';
+import { SectionHeader } from '../../molecules/layout/SectionHeader';
+import { Card } from '../../atoms/ui/card';
+import { StatCard } from '../../atoms/composed/StatCard';
+import { DashboardGrid } from '../DashboardTemplate';
+import { DataBadge } from '../../atoms/composed/DataBadge';
+import { TrendingUp, TrendingDown, DollarSign, PiggyBank, Target, AlertTriangle } from 'lucide-react';
+
+export interface FinancialOverviewProps {
+  /** Total account balance */
+  totalBalance: number;
+  /** Monthly income */
+  monthlyIncome?: number;
+  /** Monthly expenses */
+  monthlyExpenses?: number;
+  /** Net worth change */
+  netWorthChange?: {
+    amount: number;
+    percentage: number;
+    period: string;
+  };
+  /** Savings rate */
+  savingsRate?: number;
+  /** Budget utilization */
+  budgetUtilization?: number;
+}
+
+export interface AccountSummary {
+  id: string;
+  name: string;
+  type: 'checking' | 'savings' | 'credit' | 'investment' | 'loan';
+  balance: number;
+  change?: {
+    amount: number;
+    percentage: number;
+  };
+  status?: 'healthy' | 'warning' | 'critical';
+}
+
+export interface BudgetAlert {
+  id: string;
+  category: string;
+  spent: number;
+  budget: number;
+  severity: 'warning' | 'critical';
+}
+
+export interface FinancialGoal {
+  id: string;
+  name: string;
+  target: number;
+  current: number;
+  deadline?: string;
+  status: 'on-track' | 'behind' | 'achieved';
+}
+
+export interface FinancialDashboardTemplateProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Financial overview metrics */
+  overview: FinancialOverviewProps;
+  /** Account summaries */
+  accounts?: AccountSummary[];
+  /** Budget alerts */
+  budgetAlerts?: BudgetAlert[];
+  /** Financial goals */
+  goals?: FinancialGoal[];
+  /** Recent transactions preview */
+  recentTransactions?: Array<{
+    id: string;
+    description: string;
+    amount: number;
+    category: string;
+    date: string;
+  }>;
+  /** Header actions */
+  actions?: React.ReactNode;
+  /** Additional content */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Loading state */
+  isLoading?: boolean;
+}
+
+export const FinancialDashboardTemplate: React.FC<FinancialDashboardTemplateProps> = ({
+  title = "Financial Dashboard",
+  description = "Your complete financial overview",
+  overview,
+  accounts = [],
+  budgetAlerts = [],
+  goals = [],
+  recentTransactions = [],
+  actions,
+  children,
+  className,
+  category = 2, // Green theme for financial
+  isLoading = false
+}) => {
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount);
+  };
+
+  const getAccountIcon = (type: AccountSummary['type']) => {
+    switch (type) {
+      case 'savings': return <PiggyBank className="w-4 h-4" />;
+      case 'investment': return <TrendingUp className="w-4 h-4" />;
+      case 'credit': return <AlertTriangle className="w-4 h-4" />;
+      default: return <DollarSign className="w-4 h-4" />;
+    }
+  };
+
+  const getAccountStatus = (account: AccountSummary) => {
+    if (account.type === 'credit' && account.balance > 0) return 'warning';
+    if (account.type === 'loan' && account.balance > 0) return 'error';
+    return account.status || 'success';
+  };
+
+  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 && (
+              <div className="ml-6 flex-shrink-0">
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 min-h-0 overflow-auto">
+        <div className="container mx-auto px-6 py-6 space-y-6">
+          {/* Financial Overview */}
+          <div>
+            <h2 className="text-lg font-semibold mb-4">Financial Overview</h2>
+            <DashboardGrid columns={4} gap="md">
+              <StatCard
+                title="Total Balance"
+                value={formatCurrency(overview.totalBalance)}
+                icon={<DollarSign className="w-5 h-5" />}
+                category={category}
+                isLoading={isLoading}
+              />
+              
+              {overview.monthlyIncome && (
+                <StatCard
+                  title="Monthly Income"
+                  value={formatCurrency(overview.monthlyIncome)}
+                  icon={<TrendingUp className="w-5 h-5" />}
+                  category={category}
+                  isLoading={isLoading}
+                />
+              )}
+              
+              {overview.monthlyExpenses && (
+                <StatCard
+                  title="Monthly Expenses"
+                  value={formatCurrency(overview.monthlyExpenses)}
+                  icon={<TrendingDown className="w-5 h-5" />}
+                  category={category}
+                  isLoading={isLoading}
+                />
+              )}
+              
+              {overview.savingsRate && (
+                <StatCard
+                  title="Savings Rate"
+                  value={`${overview.savingsRate}%`}
+                  icon={<Target className="w-5 h-5" />}
+                  category={category}
+                  isLoading={isLoading}
+                />
+              )}
+            </DashboardGrid>
+          </div>
+
+          {/* Accounts Overview */}
+          {accounts.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-4">Accounts</h2>
+              <DashboardGrid columns={2} gap="md">
+                {accounts.map((account) => (
+                  <Card key={account.id} category={category} className="p-4">
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        {getAccountIcon(account.type)}
+                        <div>
+                          <h3 className="font-medium">{account.name}</h3>
+                          <p className="text-sm text-muted-foreground capitalize">{account.type}</p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <p className="font-semibold">{formatCurrency(account.balance)}</p>
+                        {account.change && (
+                          <div className="flex items-center gap-1 text-sm">
+                            {account.change.amount > 0 ? (
+                              <TrendingUp className="w-3 h-3 text-green-500" />
+                            ) : (
+                              <TrendingDown className="w-3 h-3 text-red-500" />
+                            )}
+                            <span className={account.change.amount > 0 ? 'text-green-500' : 'text-red-500'}>
+                              {Math.abs(account.change.percentage)}%
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <DataBadge 
+                        variant="status" 
+                        status={getAccountStatus(account)}
+                      >
+                        {account.status || 'healthy'}
+                      </DataBadge>
+                    </div>
+                  </Card>
+                ))}
+              </DashboardGrid>
+            </div>
+          )}
+
+          {/* Budget Alerts */}
+          {budgetAlerts.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-4">Budget Alerts</h2>
+              <div className="space-y-3">
+                {budgetAlerts.map((alert) => (
+                  <Card key={alert.id} className="p-4">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <AlertTriangle className={cn(
+                          "w-5 h-5",
+                          alert.severity === 'critical' ? 'text-red-500' : 'text-yellow-500'
+                        )} />
+                        <div>
+                          <h3 className="font-medium">{alert.category}</h3>
+                          <p className="text-sm text-muted-foreground">
+                            {formatCurrency(alert.spent)} of {formatCurrency(alert.budget)} spent
+                          </p>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <DataBadge 
+                          variant="status" 
+                          status={alert.severity === 'critical' ? 'error' : 'warning'}
+                        >
+                          {Math.round((alert.spent / alert.budget) * 100)}% used
+                        </DataBadge>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Financial Goals */}
+          {goals.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold mb-4">Financial Goals</h2>
+              <DashboardGrid columns={1} gap="md">
+                {goals.map((goal) => {
+                  const progress = (goal.current / goal.target) * 100;
+                  return (
+                    <Card key={goal.id} category={category} className="p-4">
+                      <div className="flex items-start justify-between mb-3">
+                        <div>
+                          <h3 className="font-medium">{goal.name}</h3>
+                          <p className="text-sm text-muted-foreground">
+                            {formatCurrency(goal.current)} of {formatCurrency(goal.target)}
+                          </p>
+                        </div>
+                        <DataBadge 
+                          variant="status" 
+                          status={goal.status === 'achieved' ? 'success' : goal.status === 'behind' ? 'warning' : 'info'}
+                        >
+                          {goal.status}
+                        </DataBadge>
+                      </div>
+                      <div className="w-full bg-muted rounded-full h-2">
+                        <div 
+                          className={cn(
+                            'h-2 rounded-full transition-all',
+                            `bg-category-${category}`
+                          )}
+                          style={{ width: `${Math.min(progress, 100)}%` }}
+                        />
+                      </div>
+                      <p className="text-sm text-muted-foreground mt-2">
+                        {Math.round(progress)}% complete
+                      </p>
+                    </Card>
+                  );
+                })}
+              </DashboardGrid>
+            </div>
+          )}
+
+          {/* Additional Content */}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/templates/index.ts

@@ -0,0 +1,40 @@
+// Page templates for common layout patterns
+export { ComponentShowcaseTemplate } from './ComponentShowcaseTemplate';
+export { 
+  DashboardTemplate, 
+  DashboardGrid, 
+  DashboardCard,
+  type DashboardTemplateProps,
+  type DashboardGridProps,
+  type DashboardCardProps 
+} from './DashboardTemplate';
+export { 
+  AuthTemplate, 
+  AuthFormField, 
+  AuthLink, 
+  AuthDivider,
+  type AuthTemplateProps,
+  type AuthFormFieldProps,
+  type AuthLinkProps,
+  type AuthDividerProps 
+} from './AuthTemplate';
+export { 
+  DataTemplate, 
+  DataDetailTemplate,
+  type DataTemplateProps,
+  type DataDetailTemplateProps 
+} from './DataTemplate';
+
+// Admin templates for administrative interfaces
+export * from './admin';
+
+// Entity templates for cross-domain configurable layouts
+export * from './entity';
+
+// React App Factory
+export { 
+  createReactApp, 
+  createSimpleApp,
+  type AppConfig,
+  type AppInstance 
+} from './factory';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />