@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/pages/EntityShowcase/EntityPerformanceShowcase.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { 
+  MetricsOverviewWithInsightsPanel,
+  TrendAnalysisPanel,
+  CategoryBreakdownPanel 
+} from '../../organisms/entity';
+import { financialConfig, sampleFinancialData } from '../../templates/entity/configs/financial-config';
+import { ShowcaseSection } from '../../molecules/layout/ShowcaseSection';
+import { IconBadge } from '../../atoms/composed/IconBadge';
+import { Switch } from '../../atoms/ui/Switch';
+import { BarChart3, TrendingUp, PieChart, Layers } from 'lucide-react';
+
+export const EntityPerformanceShowcase: React.FC = () => {
+  const [showInsights, setShowInsights] = useState(true);
+  const [showTrends, setShowTrends] = useState(true);
+  const [showCategories, setShowCategories] = useState(true);
+  
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex items-center justify-between mb-12">
+          <div className="flex items-center space-x-4">
+            <IconBadge 
+              variant="category" 
+              category={6} 
+              size="lg" 
+              icon={<BarChart3 className="w-6 h-6" />}
+            />
+            <div>
+              <h1 className="text-4xl font-bold text-foreground">Performance Dashboard</h1>
+              <p className="text-lg text-muted-foreground mt-2">
+                Cross-domain entity template showcasing configurable performance metrics and analytics
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
+              <Layers className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Live Data</span>
+              <Switch checked={true} disabled />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-12">
+          {showInsights && (
+            <ShowcaseSection
+              title="Metrics Overview with Insights"
+              description="Configurable KPI displays with automated insights and trend indicators"
+              badge={{
+                text: "Interactive",
+                variant: "category",
+                category: 2
+              }}
+            >
+              <MetricsOverviewWithInsightsPanel
+                metrics={financialConfig.metrics}
+                data={sampleFinancialData}
+                isLoading={false}
+                showInsights={true}
+                onMetricClick={(metric, value) => {
+                  console.log('Metric clicked:', metric.label, value);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+          
+          {showTrends && (
+            <ShowcaseSection
+              title="Trend Analysis"
+              description="Time-series visualizations with forecasting and period comparison"
+              badge={{
+                text: "Dynamic",
+                variant: "category", 
+                category: 4
+              }}
+            >
+              <TrendAnalysisPanel
+                metrics={financialConfig.metrics}
+                data={sampleFinancialData}
+                isLoading={false}
+                onTrendPeriodChange={(period) => {
+                  console.log('Trend period changed:', period);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+          
+          {showCategories && (
+            <ShowcaseSection
+              title="Category Breakdown"
+              description="Hierarchical data visualization with drill-down capabilities"
+              badge={{
+                text: "Explorable",
+                variant: "category",
+                category: 7
+              }}
+            >
+              <CategoryBreakdownPanel
+                categoryConfig={financialConfig.categories}
+                valueField="amount"
+                data={sampleFinancialData}
+                isLoading={false}
+                onCategoryClick={(category) => {
+                  console.log('Category clicked:', category);
+                }}
+              />
+            </ShowcaseSection>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EntityPerformanceShowcase;

package/src/pages/EntityShowcase/index.ts

@@ -0,0 +1,2 @@
+export { EntityPerformanceShowcase } from './EntityPerformanceShowcase';
+export { EntityManagementShowcase } from './EntityManagementShowcase';

package/src/pages/EntityTemplateExample.tsx

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import { EntityPerformanceDashboardTemplate } from '../templates/entity';
+import { DashboardWithSidePanel } from '../molecules/layout';
+import { financialConfig, sampleFinancialData } from '../templates/entity/configs/financial-config';
+import { DataTable } from '../atoms/composed/DataTable';
+import { DataBadge } from '../atoms/composed/DataBadge';
+import { Card } from '../atoms/ui/card';
+import { Button } from '../atoms/ui/button';
+import { DollarSign, TrendingUp, TrendingDown, Eye, Filter } from 'lucide-react';
+
+// Enhanced transaction data for side panel
+const recentTransactions = [
+  {
+    id: 'TXN-001',
+    description: 'Product Sale - Premium Package',
+    amount: 2499.99,
+    type: 'income',
+    category: 'Sales',
+    date: '2024-06-08',
+    status: 'completed',
+    customer: 'Acme Corp'
+  },
+  {
+    id: 'TXN-002',
+    description: 'Subscription Revenue',
+    amount: 149.99,
+    type: 'income',
+    category: 'Recurring',
+    date: '2024-06-08',
+    status: 'completed',
+    customer: 'TechStart Inc'
+  },
+  {
+    id: 'TXN-003',
+    description: 'Refund - Service Cancellation',
+    amount: -299.99,
+    type: 'expense',
+    category: 'Refunds',
+    date: '2024-06-07',
+    status: 'processed',
+    customer: 'Beta Solutions'
+  },
+  {
+    id: 'TXN-004',
+    description: 'Consulting Services',
+    amount: 1200.00,
+    type: 'income',
+    category: 'Services',
+    date: '2024-06-07',
+    status: 'completed',
+    customer: 'Global Enterprises'
+  },
+  {
+    id: 'TXN-005',
+    description: 'Platform License',
+    amount: 599.99,
+    type: 'income',
+    category: 'Licenses',
+    date: '2024-06-06',
+    status: 'pending',
+    customer: 'StartupXYZ'
+  }
+];
+
+const transactionColumns = [
+  {
+    key: 'id',
+    header: 'Transaction ID',
+    render: (value: string) => (
+      <code className="text-xs bg-muted px-2 py-1 rounded">{value}</code>
+    )
+  },
+  {
+    key: 'description',
+    header: 'Description',
+    render: (value: string) => (
+      <div className="max-w-[200px] truncate" title={value}>
+        {value}
+      </div>
+    )
+  },
+  {
+    key: 'amount',
+    header: 'Amount',
+    render: (value: number) => (
+      <div className={`font-medium ${value >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+        {value >= 0 ? '+' : ''}${Math.abs(value).toLocaleString()}
+      </div>
+    )
+  },
+  {
+    key: 'category',
+    header: 'Category',
+    render: (value: string) => (
+      <DataBadge variant="category" category={1}>
+        {value}
+      </DataBadge>
+    )
+  },
+  {
+    key: 'status',
+    header: 'Status',
+    render: (value: string) => (
+      <DataBadge variant="status" status={value === 'completed' ? 'success' : value === 'pending' ? 'warning' : 'info'}>
+        {value}
+      </DataBadge>
+    )
+  }
+];
+
+export const EntityTemplateExample: React.FC = () => {
+  const [showSidePanel, setShowSidePanel] = useState(true);
+
+  const handleTransactionClick = (transaction: any) => {
+    console.log('Transaction selected:', transaction);
+  };
+
+  return (
+    <DashboardWithSidePanel
+      showSidePanel={showSidePanel}
+      sidePanelWidth={80}
+      sidePanel={
+        <div className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-80 bg-background border-l border-border shadow-lg flex flex-col z-30">
+          {/* Side Panel Header */}
+          <div className="p-4 border-b border-border bg-muted/30">
+            <div className="flex items-center justify-between">
+              <h3 className="font-semibold">Recent Transactions</h3>
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={() => setShowSidePanel(false)}
+              >
+                ×
+              </Button>
+            </div>
+            <p className="text-sm text-muted-foreground mt-1">
+              Latest financial activity
+            </p>
+          </div>
+
+          {/* Transaction Summary Cards */}
+          <div className="p-4 space-y-3 border-b border-border">
+            <Card className="p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <TrendingUp className="w-4 h-4 text-green-600" />
+                  <span className="text-sm font-medium">Today's Income</span>
+                </div>
+                <span className="text-green-600 font-semibold">+$2,649.98</span>
+              </div>
+            </Card>
+            
+            <Card className="p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <TrendingDown className="w-4 h-4 text-red-600" />
+                  <span className="text-sm font-medium">Today's Expenses</span>
+                </div>
+                <span className="text-red-600 font-semibold">-$299.99</span>
+              </div>
+            </Card>
+          </div>
+
+          {/* Transaction List */}
+          <div className="flex-1 overflow-auto p-4">
+            <DataTable
+              data={recentTransactions}
+              columns={transactionColumns}
+              showSearch={true}
+              searchPlaceholder="Search transactions..."
+              showPagination={false}
+              onRowClick={handleTransactionClick}
+              className="text-xs"
+              compact={true}
+            />
+          </div>
+
+          {/* Side Panel Footer */}
+          <div className="p-4 border-t border-border bg-muted/30">
+            <Button variant="outline" size="sm" className="w-full">
+              <DollarSign className="w-4 h-4 mr-2" />
+              View All Transactions
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      <EntityPerformanceDashboardTemplate
+        config={financialConfig}
+        data={sampleFinancialData}
+        isLoading={false}
+        layout="standard"
+        showInsights={true}
+        showTrends={true}
+        showCategories={true}
+        onMetricClick={(metric, value) => {
+          console.log('Metric clicked:', metric.label, value);
+        }}
+        onCategoryClick={(category) => {
+          console.log('Category clicked:', category);
+        }}
+        onTrendPeriodChange={(period) => {
+          console.log('Trend period changed:', period);
+        }}
+        onExport={(type, data) => {
+          console.log('Export requested:', type, data);
+        }}
+        headerSlot={
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setShowSidePanel(!showSidePanel)}
+            >
+              <Eye className="w-4 h-4 mr-2" />
+              {showSidePanel ? 'Hide' : 'Show'} Transactions
+            </Button>
+            <Button variant="outline" size="sm">
+              <Filter className="w-4 h-4 mr-2" />
+              Filter Data
+            </Button>
+          </div>
+        }
+      />
+    </DashboardWithSidePanel>
+  );
+};
+
+export default EntityTemplateExample;

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

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

package/src/templates/AuthTemplate.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { cn } from '../atoms/utils/utils';
+import { Card } from '../atoms/ui/card';
+import { SectionHeader } from '../molecules/layout/SectionHeader';
+
+export interface AuthTemplateProps {
+  /** Page title */
+  title: string;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Auth form content */
+  children: React.ReactNode;
+  /** Footer content (e.g., links to other auth pages) */
+  footer?: React.ReactNode;
+  /** Logo or brand element */
+  logo?: React.ReactNode;
+  /** Background pattern or image */
+  backgroundPattern?: 'gradient' | 'grid' | 'dots' | 'waves';
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Card width variant */
+  width?: 'sm' | 'md' | 'lg';
+}
+
+export const AuthTemplate: React.FC<AuthTemplateProps> = ({
+  title,
+  subtitle,
+  children,
+  footer,
+  logo,
+  backgroundPattern = 'gradient',
+  className,
+  category = 1,
+  width = 'md'
+}) => {
+  const backgroundPatterns = {
+    gradient: 'bg-gradient-to-br from-background via-muted/20 to-background',
+    grid: 'bg-background bg-[size:2rem_2rem] bg-[image:radial-gradient(circle,var(--muted)_1px,transparent_1px)]',
+    dots: 'bg-background bg-[size:1rem_1rem] bg-[image:radial-gradient(circle,var(--muted)_1px,transparent_1px)]',
+    waves: 'bg-background bg-[size:4rem_2rem] bg-[image:repeating-linear-gradient(45deg,transparent,transparent_1rem,var(--muted/20)_1rem,var(--muted/20)_2rem)]'
+  };
+
+  const widthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg'
+  };
+
+  return (
+    <div
+      className={cn(
+        'min-h-screen flex items-center justify-center p-4',
+        backgroundPatterns[backgroundPattern],
+        className
+      )}
+      data-component-name="AuthTemplate"
+    >
+      <div className={cn('w-full', widthClasses[width])}>
+        <Card 
+          className="p-8 backdrop-blur-sm bg-background/95"
+          category={category}
+        >
+          {/* Logo */}
+          {logo && (
+            <div className="flex justify-center mb-8">
+              {logo}
+            </div>
+          )}
+
+          {/* Header */}
+          <div className="text-center mb-8">
+            <SectionHeader
+              title={title}
+              subtitle={subtitle}
+              size="lg"
+              className="text-center"
+            />
+          </div>
+
+          {/* Form Content */}
+          <div className="space-y-6">
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div className="mt-8 pt-6 border-t border-border text-center">
+              {footer}
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Auth Form Field Component
+ * Standardized form field for auth forms
+ */
+export interface AuthFormFieldProps {
+  /** Field label */
+  label: string;
+  /** Field input */
+  children: React.ReactNode;
+  /** Error message */
+  error?: string;
+  /** Whether field is required */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const AuthFormField: React.FC<AuthFormFieldProps> = ({
+  label,
+  children,
+  error,
+  required = false,
+  className
+}) => {
+  return (
+    <div className={cn('space-y-2', className)}>
+      <label className={cn(
+        'text-sm font-medium text-foreground block',
+        required && "after:content-['*'] after:ml-0.5 after:text-status-error"
+      )}>
+        {label}
+      </label>
+      
+      <div className="relative">
+        {children}
+      </div>
+      
+      {error && (
+        <p className="text-xs text-status-error font-medium">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Auth Link Component
+ * Standardized link for auth pages
+ */
+export interface AuthLinkProps {
+  /** Link text */
+  children: React.ReactNode;
+  /** Link destination */
+  href: string;
+  /** Link variant */
+  variant?: 'primary' | 'secondary';
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const AuthLink: React.FC<AuthLinkProps> = ({
+  children,
+  href,
+  variant = 'primary',
+  className,
+  category = 1
+}) => {
+  const variantClasses = {
+    primary: `text-category-${category} hover:text-category-${category}/80 font-medium`,
+    secondary: 'text-muted-foreground hover:text-foreground'
+  };
+
+  return (
+    <a
+      href={href}
+      className={cn(
+        'text-sm transition-colors hover:underline',
+        variantClasses[variant],
+        className
+      )}
+    >
+      {children}
+    </a>
+  );
+};
+
+/**
+ * Auth Divider Component
+ * Visual divider for auth forms (e.g., "or continue with")
+ */
+export interface AuthDividerProps {
+  /** Divider text */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const AuthDivider: React.FC<AuthDividerProps> = ({
+  children = 'or',
+  className
+}) => {
+  return (
+    <div className={cn('relative flex items-center', className)}>
+      <div className="flex-1 border-t border-border" />
+      {children && (
+        <div className="px-4">
+          <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+            {children}
+          </span>
+        </div>
+      )}
+      <div className="flex-1 border-t border-border" />
+    </div>
+  );
+};