@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

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

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

package/src/templates/entity/index.ts

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

package/src/templates/factory.tsx

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

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

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

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