@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/pages/ComponentShowcase/StatesShowcase.tsx

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

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