@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/pages/EntityShowcase/EntityPerformanceShowcase.tsx

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

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

package/src/pages/EntityTemplateExample.tsx

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

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

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

package/src/templates/AuthTemplate.tsx

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