@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/pages/ComponentShowcase/BadgesShowcase.tsx

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

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