@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

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>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};

package/src/pages/ComponentShowcase/PalettesShowcase.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { ColorSwatch } from '../../atoms/composed';
+
+export const PalettesShowcase: React.FC = () => {
+  return (
+    <ComponentShowcaseTemplate
+      category={2}
+      title="Color System & Palettes"
+      description="Complete color system including individual color swatches and predefined palette combinations for data visualization and interface design."
+      primaryComponent={{
+        title: "ColorSwatch Component",
+        description: "Individual color swatch component for displaying colors with names, labels, and interactive features.",
+        badge: {
+          text: "Business Component",
+          variant: "category",
+          category: 2
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Basic Color Swatches */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Basic Swatches</h4>
+              <div className="grid grid-cols-4 gap-4">
+                <ColorSwatch
+                  color="hsl(var(--category-1))"
+                  name="Blue"
+                  label="Primary"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-2))"
+                  name="Teal"
+                  label="Secondary"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--status-success))"
+                  name="Success"
+                  label="Status"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--status-error))"
+                  name="Error"
+                  label="Status"
+                  interactive
+                />
+              </div>
+            </div>
+
+            {/* Size Variants */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Size Variants</h4>
+              <div className="flex items-end gap-4">
+                <ColorSwatch
+                  color="hsl(var(--category-3))"
+                  name="Small"
+                  size="sm"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-3))"
+                  name="Medium"
+                  size="md"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-3))"
+                  name="Large"
+                  size="lg"
+                  interactive
+                />
+              </div>
+            </div>
+
+            {/* Interactive States */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Interactive States</h4>
+              <div className="grid grid-cols-4 gap-4">
+                <ColorSwatch
+                  color="hsl(var(--category-4))"
+                  name="Static"
+                  label="Default state"
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-4))"
+                  name="Hover"
+                  label="Hover effects"
+                  interactive
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-4))"
+                  name="Clickable"
+                  label="Click handlers"
+                  interactive
+                  onClick={() => alert('Swatch clicked!')}
+                />
+                <ColorSwatch
+                  color="hsl(var(--category-4))"
+                  name="Selected"
+                  label="Active state"
+                  interactive
+                  className="ring-2 ring-category-4"
+                />
+              </div>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Color Palettes & Combinations",
+        description: "Predefined color palettes and systematic color combinations for data visualization and interface design.",
+        sections: [
+          {
+            title: "Category Colors",
+            description: "Primary colors for categorizing different types of data, models, and content sections.",
+            badge: {
+              text: "Data Classification",
+              variant: "category",
+              category: 1
+            },
+            category: 1,
+            children: (
+              <div className="grid grid-cols-4 md:grid-cols-8 gap-4">
+                {[
+                  { num: 1, name: 'Blue', usage: 'Primary data' },
+                  { num: 2, name: 'Teal', usage: 'Models' },
+                  { num: 3, name: 'Orange', usage: 'Tests' },
+                  { num: 4, name: 'Purple', usage: 'Sources' },
+                  { num: 5, name: 'Pink', usage: 'Analytics' },
+                  { num: 6, name: 'Green', usage: 'Jobs' },
+                  { num: 7, name: 'Yellow', usage: 'Documentation' },
+                  { num: 8, name: 'Red', usage: 'Issues' }
+                ].map(category => (
+                  <ColorSwatch
+                    key={category.num}
+                    color={`hsl(var(--category-${category.num}))`}
+                    name={category.name}
+                    label={category.usage}
+                    interactive
+                  />
+                ))}
+              </div>
+            )
+          },
+          {
+            title: "Category Palette",
+            description: "Complete 8-color palette for data categorization with excellent contrast and accessibility.",
+            badge: {
+              text: "8 Colors",
+              variant: "category",
+              category: 6
+            },
+            category: 2,
+            children: (
+              <div className="flex gap-1 rounded overflow-hidden border border-border">
+                {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
+                  <div 
+                    key={num}
+                    className="flex-1 h-24 group relative cursor-pointer"
+                    style={{ backgroundColor: `hsl(var(--category-${num}))` }}
+                  >
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 flex items-center justify-center">
+                      <span className="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                        {num}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )
+          },
+          {
+            title: "Status Colors",
+            description: "Semantic colors for indicating status, health, and operational states across the system.",
+            badge: {
+              text: "System States",
+              variant: "status",
+              status: "success"
+            },
+            category: 2,
+            children: (
+              <div className="grid grid-cols-5 gap-4">
+                {[
+                  { name: 'Success', usage: 'Completed', cssVar: '--status-success' },
+                  { name: 'Warning', usage: 'Attention', cssVar: '--status-warning' },
+                  { name: 'Error', usage: 'Failed', cssVar: '--status-error' },
+                  { name: 'Info', usage: 'Information', cssVar: '--status-info' },
+                  { name: 'Neutral', usage: 'Pending', cssVar: '--status-neutral' }
+                ].map(color => (
+                  <ColorSwatch
+                    key={color.name}
+                    color={`hsl(var(${color.cssVar}))`}
+                    name={color.name}
+                    label={color.usage}
+                    interactive
+                  />
+                ))}
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};