@pattern-stack/frontend-patterns 0.1.2 → 0.1.3

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

package/src/pages/ComponentShowcase/PalettesShowcase.tsx

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