@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/pages/ComponentShowcase/BadgesShowcase.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { DataBadge } from '../../atoms/composed';
+import { Badge } from '../../atoms/ui';
+import { CheckCircle, AlertTriangle, XCircle, Info, Clock } from 'lucide-react';
+
+export const BadgesShowcase: React.FC = () => {
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="Badges"
+      description="Semantic badges for categorizing and indicating status in data interfaces."
+      primaryComponent={{
+        title: "Badge Component",
+        description: "Foundation badge component with multiple variants, sizes, and states. Base for all badge-based components.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Basic Badge Variants */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Badge Variants</h4>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="default">Default</Badge>
+                <Badge variant="secondary">Secondary</Badge>
+                <Badge variant="destructive">Destructive</Badge>
+                <Badge variant="outline">Outline</Badge>
+              </div>
+            </div>
+
+            {/* Badge Sizes */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Sizes</h4>
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="default" className="text-xs px-2 py-0.5">Small</Badge>
+                <Badge variant="default">Medium</Badge>
+                <Badge variant="default" className="text-base px-3 py-1.5">Large</Badge>
+              </div>
+            </div>
+
+            {/* Badge with Icons */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">With Icons</h4>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="default">
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Success
+                </Badge>
+                <Badge variant="destructive">
+                  <XCircle className="w-3 h-3 mr-1" />
+                  Error
+                </Badge>
+                <Badge variant="outline">
+                  <Info className="w-3 h-3 mr-1" />
+                  Info
+                </Badge>
+              </div>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Business Badge Components",
+        description: "Specialized badge components built for specific data interface use cases with enhanced functionality.",
+        sections: [
+          {
+            title: "DataBadge Component",
+            description: "Enhanced badge component with category theming, status variants, and interactive capabilities for data interfaces.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="space-y-6">
+                {/* Basic DataBadge Usage */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Basic Usage</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <DataBadge variant="category" category={1}>Category 1</DataBadge>
+                    <DataBadge variant="status" status="success">Success</DataBadge>
+                    <DataBadge variant="status" status="neutral">Neutral</DataBadge>
+                  </div>
+                </div>
+
+                {/* DataBadge Sizes */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Sizes</h4>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <DataBadge variant="category" category={2} size="sm">Small</DataBadge>
+                    <DataBadge variant="category" category={2} size="md">Medium</DataBadge>
+                    <DataBadge variant="category" category={2} size="lg">Large</DataBadge>
+                  </div>
+                </div>
+
+                {/* Interactive DataBadge */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Interactive</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <DataBadge 
+                      variant="category" 
+                      category={3} 
+                      interactive 
+                      onClick={() => alert('Badge clicked!')}
+                    >
+                      Clickable Badge
+                    </DataBadge>
+                  </div>
+                </div>
+              </div>
+            )
+          },
+          {
+            title: "Category Badges",
+            description: "Use category badges to classify and organize different types of content, data, or functionality.",
+            badge: {
+              text: "8 Categories",
+              variant: "category",
+              category: 1
+            },
+            category: 2,
+            children: (
+              <div className="space-y-4">
+                <div className="flex flex-wrap gap-2">
+                  {[1, 2, 3, 4, 5, 6, 7, 8].map(category => (
+                    <DataBadge key={category} variant="category" category={category as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}>
+                      Category {category}
+                    </DataBadge>
+                  ))}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="category" category={1} size="sm">Small</DataBadge>
+                  <DataBadge variant="category" category={2} size="md">Medium</DataBadge>
+                  <DataBadge variant="category" category={3} size="lg">Large</DataBadge>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="category" category={4} interactive onClick={() => alert('Clicked!')}>
+                    Interactive
+                  </DataBadge>
+                </div>
+              </div>
+            )
+          },
+          {
+            title: "Status Badges",
+            description: "Use status badges to communicate operational states, health indicators, and system feedback.",
+            badge: {
+              text: "5 States",
+              variant: "status",
+              status: "success"
+            },
+            category: 2,
+            children: (
+              <div className="space-y-4">
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="status" status="success">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Success
+                  </DataBadge>
+                  <DataBadge variant="status" status="warning">
+                    <AlertTriangle className="w-3 h-3 mr-1" />
+                    Warning
+                  </DataBadge>
+                  <DataBadge variant="status" status="error">
+                    <XCircle className="w-3 h-3 mr-1" />
+                    Error
+                  </DataBadge>
+                  <DataBadge variant="status" status="info">
+                    <Info className="w-3 h-3 mr-1" />
+                    Info
+                  </DataBadge>
+                  <DataBadge variant="status" status="neutral">
+                    <Clock className="w-3 h-3 mr-1" />
+                    Neutral
+                  </DataBadge>
+                </div>
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};

package/src/pages/ComponentShowcase/CardsShowcase.tsx

@@ -0,0 +1,392 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { StatCard, DetailedCard, DataBadge, FileUpload } from '../../atoms/composed';
+import { Card } from '../../atoms/ui';
+import { Database, CheckCircle, Users, Activity, TrendingUp } from 'lucide-react';
+
+export const CardsShowcase: React.FC = () => {
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="Cards"
+      description="Analytics cards for displaying key metrics, statistics, and detailed information in data interfaces."
+      primaryComponent={{
+        title: "Card Component",
+        description: "Base card component with category theming, border styling, and hover effects. Foundation for all card-based components.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Basic Card Usage */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Basic Card</h4>
+              <div className="grid md:grid-cols-3 gap-4">
+                <Card className="p-4">
+                  <h3 className="font-medium mb-2">Default Card</h3>
+                  <p className="text-sm text-muted-foreground">Basic card with standard styling, border, and shadow effects.</p>
+                </Card>
+                <Card category={1} className="p-4">
+                  <h3 className="font-medium mb-2">Category Card</h3>
+                  <p className="text-sm text-muted-foreground">Card with category theming - colored left border and background tint.</p>
+                </Card>
+                <Card category={2} className="p-4">
+                  <h3 className="font-medium mb-2">Interactive Card</h3>
+                  <p className="text-sm text-muted-foreground">Hover effects and interactive states for clickable cards.</p>
+                </Card>
+              </div>
+            </div>
+
+            {/* Category Variants */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Category Variants</h4>
+              <div className="grid md:grid-cols-4 gap-4">
+                {[1, 2, 3, 4, 5, 6, 7, 8].map(category => (
+                  <Card key={category} category={category as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8} className="p-3">
+                    <div className="text-sm font-medium">Category {category}</div>
+                    <div className="text-xs text-muted-foreground mt-1">
+                      Border: category-{category}
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Business Card Components", 
+        description: "Domain-specific card components built on the base Card component for data interfaces and analytics applications.",
+        sections: [
+          {
+            title: "StatCard Component",
+            description: "Compact analytics cards for displaying key metrics and statistics with optional trends and interactive states.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <StatCard
+                  title="Total Models"
+                  value="1,234"
+                  subtitle="Active dbt models"
+                  category={1}
+                  icon={<Database className="w-5 h-5" />}
+                  trend={{ value: 12.5, label: "vs last month" }}
+                />
+                <StatCard
+                  title="Success Rate"
+                  value="99.2%"
+                  subtitle="Test pass rate"
+                  category={2}
+                  icon={<CheckCircle className="w-5 h-5" />}
+                  trend={{ value: 2.1, label: "vs last week" }}
+                />
+                <StatCard
+                  title="Active Users"
+                  value="567"
+                  subtitle="Monthly active users"
+                  category={3}
+                  icon={<Users className="w-5 h-5" />}
+                  trend={{ value: -3.2, label: "vs last month" }}
+                />
+                <StatCard
+                  title="Data Freshness"
+                  value="4.2hrs"
+                  subtitle="Average delay"
+                  category={4}
+                  icon={<Activity className="w-5 h-5" />}
+                  onClick={() => alert('Card clicked!')}
+                />
+                <StatCard
+                  title="Query Performance"
+                  value="1.8s"
+                  subtitle="Average duration"
+                  category={5}
+                  icon={<TrendingUp className="w-5 h-5" />}
+                  trend={{ value: 0 }}
+                />
+                <StatCard
+                  title="Data Volume"
+                  value="2.4TB"
+                  subtitle="Total processed"
+                  category={6}
+                  icon={<Database className="w-5 h-5" />}
+                />
+              </div>
+            )
+          },
+          {
+            title: "DetailedCard Component", 
+            description: "Rich information cards with multiple metrics, descriptions, and interactive elements for complex data display.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="grid md:grid-cols-1 lg:grid-cols-2 gap-6">
+                <DetailedCard
+                  title="Customer Analytics Model"
+                  subtitle="Production Model"
+                  description="Advanced analytics model for customer behavior tracking and segmentation. Processes customer interactions, purchase patterns, and engagement metrics."
+                  category={1}
+                  icon={<Database className="w-5 h-5" />}
+                  primaryMetric={{
+                    label: "Success Rate",
+                    value: "98.7%",
+                    trend: { value: 5.2, label: "vs last week" }
+                  }}
+                  secondaryMetrics={[
+                    { label: "Daily Runs", value: "24", status: "success" },
+                    { label: "Avg Runtime", value: "2.4min", status: "info" },
+                    { label: "Data Quality", value: "95%", status: "warning" },
+                    { label: "Test Coverage", value: "87%", status: "success" }
+                  ]}
+                  tags={[
+                    { label: "Production", status: "success" },
+                    { label: "Analytics", category: 1 },
+                    { label: "Customer Data", category: 3 }
+                  ]}
+                  onClick={() => alert('Model details clicked!')}
+                />
+                
+                <DetailedCard
+                  title="Revenue Forecasting Pipeline"
+                  subtitle="Critical Business Model"
+                  description="Machine learning pipeline for revenue forecasting and business intelligence. Combines historical data with market trends for accurate predictions."
+                  category={2}
+                  icon={<TrendingUp className="w-5 h-5" />}
+                  primaryMetric={{
+                    label: "Accuracy Score",
+                    value: "94.3%",
+                    trend: { value: -1.2, label: "vs last month" }
+                  }}
+                  secondaryMetrics={[
+                    { label: "Predictions", value: "156", status: "info" },
+                    { label: "Model Score", value: "0.943", status: "success" },
+                    { label: "Data Freshness", value: "2hrs", status: "warning" },
+                    { label: "Dependencies", value: "12", status: "neutral" }
+                  ]}
+                  tags={[
+                    { label: "ML Model", category: 5 },
+                    { label: "Critical", status: "error" },
+                    { label: "Revenue", category: 2 },
+                    { label: "Forecasting", category: 4 }
+                  ]}
+                  onClick={() => alert('Pipeline details clicked!')}
+                />
+              </div>
+            )
+          }
+        ]
+      }}
+      ephemeralExamples={{
+        title: "Ephemeral Components",
+        description: "Application-specific components built inline for one-off use cases. Consider promoting to shared library if pattern emerges across multiple apps.",
+        sections: [
+          {
+            title: "BankAccountCard",
+            description: "Custom card for financial data display - built inline for this demo. Shows how to extend business components for specific domains.",
+            badge: {
+              text: "App-Specific",
+              variant: "category",
+              category: 3
+            },
+            category: 3,
+            children: (
+              <div className="grid md:grid-cols-2 gap-6">
+                {/* BankAccountCard - Inline ephemeral component */}
+                <Card category={1} className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded bg-category-1/20 flex items-center justify-center">
+                        <Database className="w-5 h-5 text-category-1" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold">Checking Account</h3>
+                        <p className="text-sm text-muted-foreground">Wells Fargo ••••4892</p>
+                      </div>
+                    </div>
+                    <DataBadge variant="status" status="success" size="sm">Active</DataBadge>
+                  </div>
+                  
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-baseline">
+                      <span className="text-2xl font-bold">$12,847.32</span>
+                      <span className="text-sm text-muted-foreground">Available Balance</span>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 gap-4 pt-3 border-t border-border">
+                      <div>
+                        <div className="text-xs text-muted-foreground">Last Transaction</div>
+                        <div className="text-sm font-medium">-$45.20</div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-muted-foreground">Interest Rate</div>
+                        <div className="text-sm font-medium">0.15% APY</div>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+
+                <Card category={2} className="p-6">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded bg-category-2/20 flex items-center justify-center">
+                        <TrendingUp className="w-5 h-5 text-category-2" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold">Investment Account</h3>
+                        <p className="text-sm text-muted-foreground">Vanguard ••••7361</p>
+                      </div>
+                    </div>
+                    <DataBadge variant="status" status="info" size="sm">Growth</DataBadge>
+                  </div>
+                  
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-baseline">
+                      <span className="text-2xl font-bold">$89,234.56</span>
+                      <span className="text-sm text-category-2 font-medium">+$2,341 (2.7%)</span>
+                    </div>
+                    
+                    <div className="grid grid-cols-2 gap-4 pt-3 border-t border-border">
+                      <div>
+                        <div className="text-xs text-muted-foreground">Portfolio Value</div>
+                        <div className="text-sm font-medium">$91,575.91</div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-muted-foreground">Unrealized P&L</div>
+                        <div className="text-sm font-medium text-category-2">+$4,682.45</div>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            )
+          },
+          {
+            title: "FileUpload Component",
+            description: "Drag-and-drop file upload component with progress tracking, validation, and preview support for modern file handling workflows.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="space-y-6">
+                {/* Basic File Upload */}
+                <Card className="p-6" category={2}>
+                  <h5 className="font-medium mb-4">Basic File Upload</h5>
+                  <FileUpload
+                    accept="image/*,.pdf,.doc,.docx"
+                    multiple
+                    maxSize={5 * 1024 * 1024} // 5MB
+                    maxFiles={3}
+                    uploadText="Choose files or drag and drop"
+                    dragText="Drop files here"
+                    onChange={(files) => console.log('Files changed:', files)}
+                    onUpload={async (files) => {
+                      console.log('Uploading files:', files);
+                      // Simulate upload delay
+                      await new Promise(resolve => setTimeout(resolve, 2000));
+                    }}
+                  />
+                </Card>
+
+                {/* Compact Variant */}
+                <div className="grid md:grid-cols-2 gap-6">
+                  <Card className="p-4" category={2}>
+                    <h5 className="font-medium mb-4">Compact Variant</h5>
+                    <FileUpload
+                      variant="compact"
+                      accept="image/*"
+                      maxSize={2 * 1024 * 1024} // 2MB
+                      maxFiles={1}
+                      uploadText="Upload image"
+                      onChange={(files) => console.log('Image files:', files)}
+                    />
+                  </Card>
+
+                  <Card className="p-4" category={2}>
+                    <h5 className="font-medium mb-4">Large Variant</h5>
+                    <FileUpload
+                      variant="large"
+                      accept=".zip,.tar,.gz"
+                      maxSize={50 * 1024 * 1024} // 50MB
+                      maxFiles={1}
+                      uploadText="Upload archive"
+                      dragText="Drop your archive here"
+                      onChange={(files) => console.log('Archive files:', files)}
+                    />
+                  </Card>
+                </div>
+
+                {/* Different File Types */}
+                <Card className="p-6" category={2}>
+                  <h5 className="font-medium mb-4">Different File Type Restrictions</h5>
+                  <div className="grid md:grid-cols-3 gap-4">
+                    <div>
+                      <h6 className="text-sm font-medium mb-2">Images Only</h6>
+                      <FileUpload
+                        variant="compact"
+                        accept="image/*"
+                        maxSize={10 * 1024 * 1024}
+                        maxFiles={5}
+                        showPreview
+                        uploadText="Images"
+                        onChange={(files) => console.log('Images:', files)}
+                      />
+                    </div>
+                    <div>
+                      <h6 className="text-sm font-medium mb-2">Documents</h6>
+                      <FileUpload
+                        variant="compact"
+                        accept=".pdf,.doc,.docx,.txt"
+                        maxSize={20 * 1024 * 1024}
+                        maxFiles={10}
+                        uploadText="Documents"
+                        onChange={(files) => console.log('Documents:', files)}
+                      />
+                    </div>
+                    <div>
+                      <h6 className="text-sm font-medium mb-2">CSV/Excel</h6>
+                      <FileUpload
+                        variant="compact"
+                        accept=".csv,.xlsx,.xls"
+                        maxSize={50 * 1024 * 1024}
+                        maxFiles={1}
+                        uploadText="Data files"
+                        onChange={(files) => console.log('Data files:', files)}
+                      />
+                    </div>
+                  </div>
+                </Card>
+
+                {/* Error States */}
+                <Card className="p-6" category={2}>
+                  <h5 className="font-medium mb-4">Error State Example</h5>
+                  <FileUpload
+                    accept="image/*"
+                    maxSize={100 * 1024} // Very small limit for demo
+                    maxFiles={1}
+                    error="File size too large. Please select a smaller file."
+                    uploadText="Try uploading a large image to see error"
+                    onChange={(files) => console.log('Error demo files:', files)}
+                  />
+                </Card>
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};