@pattern-stack/frontend-patterns 0.0.1

package/src/pages/ComponentShowcase/StatesShowcase.tsx

@@ -0,0 +1,485 @@
+import React, { useState } from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { EmptyState, Modal, Tooltip } from '../../atoms/composed';
+import { Skeleton, Spinner, Card } from '../../atoms/ui';
+import { Button } from '../../atoms/ui/button';
+import { Info, AlertCircle, CheckCircle, HelpCircle } from 'lucide-react';
+
+export const StatesShowcase: React.FC = () => {
+  const [isDefaultModalOpen, setIsDefaultModalOpen] = useState(false);
+  const [isDestructiveModalOpen, setIsDestructiveModalOpen] = useState(false);
+  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
+  const [isLargeModalOpen, setIsLargeModalOpen] = useState(false);
+
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="States, Modals & Tooltips"
+      description="Loading indicators, skeleton states, empty state patterns, modal dialogs, and tooltips for enhanced user experiences."
+      primaryComponent={{
+        title: "Loading Components",
+        description: "Foundation loading components including skeleton placeholders and spinners for consistent loading experiences.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Skeleton Components */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Skeleton Placeholders</h4>
+              <div className="grid md:grid-cols-2 gap-4">
+                <Card category={1} className="p-4">
+                  <h5 className="font-medium mb-3">Content Placeholders</h5>
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-4 w-2/3" />
+                  </div>
+                </Card>
+                <Card category={1} className="p-4">
+                  <h5 className="font-medium mb-3">Card Placeholders</h5>
+                  <div className="flex items-center space-x-4">
+                    <Skeleton className="h-12 w-12 rounded-full" />
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-4/5" />
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            </div>
+
+            {/* Spinner Components */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Spinners</h4>
+              <div className="grid md:grid-cols-3 gap-4">
+                <Card category={1} className="p-4 text-center">
+                  <h5 className="font-medium mb-3">Small</h5>
+                  <Spinner size="sm" />
+                </Card>
+                <Card category={1} className="p-4 text-center">
+                  <h5 className="font-medium mb-3">Medium</h5>
+                  <Spinner size="md" />
+                </Card>
+                <Card category={1} className="p-4 text-center">
+                  <h5 className="font-medium mb-3">Large</h5>
+                  <Spinner size="lg" />
+                </Card>
+              </div>
+            </div>
+
+            {/* Inline Loading */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Inline Usage</h4>
+              <Card category={1} className="p-4">
+                <div className="flex items-center gap-2">
+                  <Spinner size="sm" />
+                  <span>Loading data...</span>
+                </div>
+              </Card>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Business State Components",
+        description: "Complete user experience patterns that compose loading primitives with business logic and messaging.",
+        sections: [
+          {
+            title: "EmptyState Component",
+            description: "Contextual empty state component with support for different scenarios, custom actions, and helpful messaging.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="grid md:grid-cols-2 gap-6">
+                <Card className="p-6" category={2}>
+                  <EmptyState
+                    variant="no-data"
+                    title="No models found"
+                    description="Get started by creating your first dbt model to see analytics and insights."
+                    action={{
+                      label: "Create Model",
+                      onClick: () => alert('Create model!')
+                    }}
+                  />
+                </Card>
+                <Card className="p-6" category={2}>
+                  <EmptyState
+                    variant="no-results"
+                    title="No search results"
+                    description="Try adjusting your search terms or filters to find what you're looking for."
+                    action={{
+                      label: "Clear Filters",
+                      onClick: () => alert('Clear filters!')
+                    }}
+                    secondaryAction={{
+                      label: "Browse All",
+                      onClick: () => alert('Browse all!')
+                    }}
+                  />
+                </Card>
+                <Card className="p-6" category={2}>
+                  <EmptyState
+                    variant="error"
+                    title="Connection failed"
+                    description="Unable to connect to the database. Please check your connection and try again."
+                    action={{
+                      label: "Retry",
+                      onClick: () => alert('Retry!')
+                    }}
+                  />
+                </Card>
+                <Card className="p-6" category={2}>
+                  <EmptyState
+                    variant="loading"
+                    title="Loading data"
+                    description="Please wait while we fetch your analytics data."
+                  />
+                </Card>
+              </div>
+            )
+          },
+          {
+            title: "Modal Component",
+            description: "Accessible modal dialogs with multiple variants, sizes, and interaction patterns for forms, confirmations, and content display.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 3
+            },
+            category: 3,
+            children: (
+              <div className="space-y-6">
+                {/* Modal Triggers */}
+                <div className="grid md:grid-cols-2 gap-4">
+                  <Card className="p-4" category={3}>
+                    <h5 className="font-medium mb-3">Modal Variants</h5>
+                    <div className="flex flex-wrap gap-2">
+                      <Button onClick={() => setIsDefaultModalOpen(true)}>
+                        Default Modal
+                      </Button>
+                      <Button 
+                        variant="destructive" 
+                        onClick={() => setIsDestructiveModalOpen(true)}
+                      >
+                        Destructive Modal
+                      </Button>
+                      <Button 
+                        variant="outline" 
+                        onClick={() => setIsSuccessModalOpen(true)}
+                      >
+                        Success Modal
+                      </Button>
+                    </div>
+                  </Card>
+                  
+                  <Card className="p-4" category={3}>
+                    <h5 className="font-medium mb-3">Modal Sizes</h5>
+                    <div className="flex flex-wrap gap-2">
+                      <Button 
+                        variant="outline"
+                        onClick={() => setIsLargeModalOpen(true)}
+                      >
+                        Large Modal
+                      </Button>
+                    </div>
+                  </Card>
+                </div>
+
+                {/* Modal Examples */}
+                <Modal
+                  isOpen={isDefaultModalOpen}
+                  onClose={() => setIsDefaultModalOpen(false)}
+                  title="Create New Model"
+                  footer={
+                    <>
+                      <Button variant="outline" onClick={() => setIsDefaultModalOpen(false)}>
+                        Cancel
+                      </Button>
+                      <Button onClick={() => setIsDefaultModalOpen(false)}>
+                        Create Model
+                      </Button>
+                    </>
+                  }
+                >
+                  <div className="space-y-4">
+                    <p className="text-sm text-muted-foreground">
+                      Configure your new dbt model with the following settings.
+                    </p>
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium">Model Name</label>
+                      <input 
+                        type="text" 
+                        placeholder="customer_analytics" 
+                        className="w-full px-3 py-2 border border-border rounded-md"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-sm font-medium">Description</label>
+                      <textarea 
+                        placeholder="Describe your model..." 
+                        className="w-full px-3 py-2 border border-border rounded-md"
+                        rows={3}
+                      />
+                    </div>
+                  </div>
+                </Modal>
+
+                <Modal
+                  isOpen={isDestructiveModalOpen}
+                  onClose={() => setIsDestructiveModalOpen(false)}
+                  title="Delete Model"
+                  variant="destructive"
+                  footer={
+                    <>
+                      <Button variant="outline" onClick={() => setIsDestructiveModalOpen(false)}>
+                        Cancel
+                      </Button>
+                      <Button variant="destructive" onClick={() => setIsDestructiveModalOpen(false)}>
+                        Delete Model
+                      </Button>
+                    </>
+                  }
+                >
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <AlertCircle className="w-5 h-5 text-status-error flex-shrink-0 mt-0.5" />
+                      <div>
+                        <p className="text-sm">
+                          Are you sure you want to delete this model? This action cannot be undone.
+                        </p>
+                        <p className="text-sm text-muted-foreground mt-2">
+                          All associated data and tests will be permanently removed.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </Modal>
+
+                <Modal
+                  isOpen={isSuccessModalOpen}
+                  onClose={() => setIsSuccessModalOpen(false)}
+                  title="Model Created Successfully"
+                  variant="success"
+                  footer={
+                    <Button onClick={() => setIsSuccessModalOpen(false)}>
+                      View Model
+                    </Button>
+                  }
+                >
+                  <div className="flex items-start gap-3">
+                    <CheckCircle className="w-5 h-5 text-status-success flex-shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm">
+                        Your model has been created and is now available in the project.
+                      </p>
+                      <p className="text-sm text-muted-foreground mt-2">
+                        Model ID: <code className="bg-muted px-1 rounded">mdl_1234567890</code>
+                      </p>
+                    </div>
+                  </div>
+                </Modal>
+
+                <Modal
+                  isOpen={isLargeModalOpen}
+                  onClose={() => setIsLargeModalOpen(false)}
+                  title="Model Documentation"
+                  size="xl"
+                  footer={
+                    <Button onClick={() => setIsLargeModalOpen(false)}>
+                      Close
+                    </Button>
+                  }
+                >
+                  <div className="space-y-4">
+                    <div>
+                      <h4 className="font-medium mb-2">Overview</h4>
+                      <p className="text-sm text-muted-foreground">
+                        This model aggregates customer data from multiple sources to provide comprehensive analytics.
+                      </p>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Schema</h4>
+                      <div className="border border-border rounded p-3 bg-muted/30">
+                        <code className="text-xs">
+                          {`CREATE TABLE customer_analytics AS
+SELECT 
+  customer_id,
+  first_purchase_date,
+  total_purchases,
+  lifetime_value
+FROM staging.customers`}
+                        </code>
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Dependencies</h4>
+                      <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
+                        <li>staging.customers</li>
+                        <li>staging.orders</li>
+                        <li>staging.products</li>
+                      </ul>
+                    </div>
+                  </div>
+                </Modal>
+              </div>
+            )
+          },
+          {
+            title: "Tooltip Component",
+            description: "Contextual tooltips with smart positioning, multiple variants, and customizable triggers for enhanced user guidance.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 4
+            },
+            category: 4,
+            children: (
+              <div className="space-y-6">
+                {/* Tooltip Examples */}
+                <Card className="p-6" category={4}>
+                  <h5 className="font-medium mb-4">Tooltip Positions</h5>
+                  <div className="flex flex-wrap items-center gap-8 justify-center">
+                    <Tooltip content="Top tooltip" position="top">
+                      <Button variant="outline" size="sm">Top</Button>
+                    </Tooltip>
+                    <Tooltip content="Bottom tooltip" position="bottom">
+                      <Button variant="outline" size="sm">Bottom</Button>
+                    </Tooltip>
+                    <Tooltip content="Left tooltip" position="left">
+                      <Button variant="outline" size="sm">Left</Button>
+                    </Tooltip>
+                    <Tooltip content="Right tooltip" position="right">
+                      <Button variant="outline" size="sm">Right</Button>
+                    </Tooltip>
+                  </div>
+                </Card>
+
+                <Card className="p-6" category={4}>
+                  <h5 className="font-medium mb-4">Tooltip Variants</h5>
+                  <div className="flex flex-wrap items-center gap-4">
+                    <Tooltip content="Default tooltip with helpful information">
+                      <Button variant="ghost" size="icon">
+                        <HelpCircle className="w-4 h-4" />
+                      </Button>
+                    </Tooltip>
+                    
+                    <Tooltip 
+                      content="This is an informational tooltip" 
+                      variant="info"
+                    >
+                      <div className="inline-flex items-center gap-1 text-sm">
+                        <Info className="w-4 h-4 text-status-info" />
+                        <span>Info Tooltip</span>
+                      </div>
+                    </Tooltip>
+                    
+                    <Tooltip 
+                      content="Warning: This action may affect other models" 
+                      variant="warning"
+                    >
+                      <div className="inline-flex items-center gap-1 text-sm">
+                        <AlertCircle className="w-4 h-4 text-status-warning" />
+                        <span>Warning Tooltip</span>
+                      </div>
+                    </Tooltip>
+                    
+                    <Tooltip 
+                      content="Error: Invalid configuration detected" 
+                      variant="error"
+                    >
+                      <div className="inline-flex items-center gap-1 text-sm">
+                        <AlertCircle className="w-4 h-4 text-status-error" />
+                        <span>Error Tooltip</span>
+                      </div>
+                    </Tooltip>
+                  </div>
+                </Card>
+
+                <Card className="p-6" category={4}>
+                  <h5 className="font-medium mb-4">Tooltip Sizes & Triggers</h5>
+                  <div className="space-y-4">
+                    <div className="flex flex-wrap items-center gap-4">
+                      <Tooltip content="Small" size="sm">
+                        <Button variant="outline" size="sm">Small Tooltip</Button>
+                      </Tooltip>
+                      <Tooltip content="Medium tooltip with more content" size="md">
+                        <Button variant="outline" size="sm">Medium Tooltip</Button>
+                      </Tooltip>
+                      <Tooltip 
+                        content="Large tooltip that can contain much more detailed information and spans multiple lines when needed" 
+                        size="lg"
+                      >
+                        <Button variant="outline" size="sm">Large Tooltip</Button>
+                      </Tooltip>
+                    </div>
+                    
+                    <div className="flex flex-wrap items-center gap-4">
+                      <Tooltip content="Hover only" trigger="hover">
+                        <Button variant="outline" size="sm">Hover Only</Button>
+                      </Tooltip>
+                      <Tooltip content="Focus only" trigger="focus">
+                        <Button variant="outline" size="sm">Focus Only</Button>
+                      </Tooltip>
+                      <Tooltip content="Hover & Focus" trigger="both">
+                        <Button variant="outline" size="sm">Both Triggers</Button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </Card>
+
+                <Card className="p-6" category={4}>
+                  <h5 className="font-medium mb-4">Rich Content Tooltips</h5>
+                  <div className="flex flex-wrap items-center gap-4">
+                    <Tooltip 
+                      content={
+                        <div className="space-y-2">
+                          <div className="font-medium">Model Performance</div>
+                          <div className="text-xs space-y-1">
+                            <div>Success Rate: 99.2%</div>
+                            <div>Avg Runtime: 2.4s</div>
+                            <div>Last Run: 5 min ago</div>
+                          </div>
+                        </div>
+                      }
+                      size="lg"
+                    >
+                      <Button variant="outline">View Stats</Button>
+                    </Tooltip>
+                    
+                    <Tooltip 
+                      content={
+                        <div className="space-y-2">
+                          <div className="flex items-center gap-2">
+                            <CheckCircle className="w-4 h-4 text-status-success" />
+                            <span className="font-medium">All Tests Passing</span>
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            Click to view detailed test results
+                          </div>
+                        </div>
+                      }
+                      size="lg"
+                      delay={100}
+                    >
+                      <Button variant="outline" className="text-status-success">
+                        <CheckCircle className="w-4 h-4 mr-2" />
+                        Tests Passed
+                      </Button>
+                    </Tooltip>
+                  </div>
+                </Card>
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};

package/src/pages/ComponentShowcase/TablesShowcase.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { DataTable } from '../../atoms/composed';
+import { Card } from '../../atoms/ui';
+
+interface SampleDataItem extends Record<string, unknown> {
+  id: number;
+  name: string;
+  status: 'success' | 'warning' | 'error';
+  category: string;
+  runs: number;
+}
+
+export const TablesShowcase: React.FC = () => {
+  const sampleData: SampleDataItem[] = [
+    { id: 1, name: 'Customer Analysis', status: 'success', category: 'Analytics', runs: 24 },
+    { id: 2, name: 'Revenue Model', status: 'warning', category: 'Finance', runs: 18 },
+    { id: 3, name: 'User Behavior', status: 'error', category: 'Product', runs: 31 },
+    { id: 4, name: 'Sales Forecast', status: 'success', category: 'Sales', runs: 12 }
+  ];
+
+  const tableColumns = [
+    { key: 'name', header: 'Model Name' },
+    { key: 'status', header: 'Status', type: 'status' as const },
+    { key: 'category', header: 'Category', type: 'category' as const },
+    { key: 'runs', header: 'Runs' }
+  ];
+
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="Tables"
+      description="Flexible data tables with sorting, filtering, and pagination for displaying structured data."
+      primaryComponent={{
+        title: "Table Component",
+        description: "Base table component providing semantic HTML structure, consistent styling, and responsive behavior.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Basic Table */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Basic Table</h4>
+              <Card category={1} className="p-4">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left p-2">Name</th>
+                      <th className="text-left p-2">Status</th>
+                      <th className="text-left p-2">Category</th>
+                      <th className="text-right p-2">Runs</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b">
+                      <td className="p-2 font-medium">Customer Analysis</td>
+                      <td className="p-2">Success</td>
+                      <td className="p-2">Analytics</td>
+                      <td className="p-2 text-right">24</td>
+                    </tr>
+                    <tr className="border-b">
+                      <td className="p-2 font-medium">Revenue Model</td>
+                      <td className="p-2">Warning</td>
+                      <td className="p-2">Finance</td>
+                      <td className="p-2 text-right">18</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </Card>
+            </div>
+
+            {/* Compact Table */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Compact Styling</h4>
+              <Card category={1} className="p-4">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left p-1">Name</th>
+                      <th className="text-left p-1">Status</th>
+                      <th className="text-right p-1">Runs</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="border-b">
+                      <td className="p-1 font-medium">User Behavior</td>
+                      <td className="p-1">Error</td>
+                      <td className="p-1 text-right">31</td>
+                    </tr>
+                    <tr>
+                      <td className="p-1 font-medium">Sales Forecast</td>
+                      <td className="p-1">Success</td>
+                      <td className="p-1 text-right">12</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </Card>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Business Table Components",
+        description: "Enhanced table components with advanced functionality for data interfaces and analytics applications.",
+        sections: [
+          {
+            title: "DataTable Component",
+            description: "Feature-rich table component with built-in search, sorting, pagination, and status indicators for data interfaces.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <Card className="p-6" category={2}>
+                <DataTable
+                  data={sampleData}
+                  columns={tableColumns}
+                  searchPlaceholder="Search models..."
+                  onRowClick={(item) => alert(`Clicked: ${item.name}`)}
+                  hover={true}
+                />
+              </Card>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};