@pattern-stack/frontend-patterns 0.0.6 → 0.1.1

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;