@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/pages/ComponentShowcase/TypographyShowcase.tsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { DataBadge } from '../../atoms/composed';
+import { SectionHeader } from '../../molecules/layout';
+import { Card } from '../../atoms/ui';
+import { Database, Users, TrendingUp } from 'lucide-react';
+
+export const TypographyShowcase: React.FC = () => {
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="Typography"
+      description="Data-focused typography system optimized for readability and hierarchy."
+      primaryComponent={{
+        title: "Typography Utilities",
+        description: "Foundation typography classes and utilities for consistent text styling across all applications.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Display Typography */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Display Typography</h4>
+              <Card category={1} className="p-6">
+                <div className="space-y-4">
+                  <div>
+                    <div className="text-display-lg font-bold">Display Large</div>
+                    <code className="text-xs text-muted-foreground">.text-display-lg</code>
+                  </div>
+                  <div>
+                    <div className="text-display-md font-bold">Display Medium</div>
+                    <code className="text-xs text-muted-foreground">.text-display-md</code>
+                  </div>
+                  <div>
+                    <div className="text-display-sm font-bold">Display Small</div>
+                    <code className="text-xs text-muted-foreground">.text-display-sm</code>
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            {/* Heading Typography */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Heading Typography</h4>
+              <Card category={1} className="p-6">
+                <div className="space-y-3">
+                  <div>
+                    <h1 className="text-heading-xl">Heading XL</h1>
+                    <code className="text-xs text-muted-foreground">.text-heading-xl</code>
+                  </div>
+                  <div>
+                    <h2 className="text-heading-lg">Heading Large</h2>
+                    <code className="text-xs text-muted-foreground">.text-heading-lg</code>
+                  </div>
+                  <div>
+                    <h3 className="text-heading-md">Heading Medium</h3>
+                    <code className="text-xs text-muted-foreground">.text-heading-md</code>
+                  </div>
+                  <div>
+                    <h4 className="text-heading-sm">Heading Small</h4>
+                    <code className="text-xs text-muted-foreground">.text-heading-sm</code>
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            {/* Body Typography */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Body Typography</h4>
+              <Card category={1} className="p-6">
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-body-lg">Large body text for emphasis and important content.</p>
+                    <code className="text-xs text-muted-foreground">.text-body-lg</code>
+                  </div>
+                  <div>
+                    <p className="text-body-md">Medium body text for standard content and descriptions.</p>
+                    <code className="text-xs text-muted-foreground">.text-body-md</code>
+                  </div>
+                  <div>
+                    <p className="text-body-sm">Small body text for secondary information and metadata.</p>
+                    <code className="text-xs text-muted-foreground">.text-body-sm</code>
+                  </div>
+                </div>
+              </Card>
+            </div>
+
+            {/* Supporting Typography */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Supporting Typography</h4>
+              <Card category={1} className="p-6">
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-caption">Caption text for labels and annotations</p>
+                    <code className="text-xs text-muted-foreground">.text-caption</code>
+                  </div>
+                  <div>
+                    <p className="text-overline uppercase tracking-wider">Overline Text</p>
+                    <code className="text-xs text-muted-foreground">.text-overline</code>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Composed Typography Patterns",
+        description: "Business-specific typography components and patterns that combine foundation utilities for data interfaces.",
+        sections: [
+          {
+            title: "Data Typography",
+            description: "Specialized typography patterns optimized for displaying data values, labels, and metadata in analytics interfaces.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="grid gap-6">
+                <Card className="p-6" category={2}>
+                  <h3 className="text-lg font-medium mb-4">Data Typography Patterns</h3>
+                  <div className="space-y-4">
+                    <div className="border rounded p-4">
+                      <div className="text-data-label">TOTAL REVENUE</div>
+                      <div className="text-data-value">$2,847,392</div>
+                      <div className="text-data-meta">+12.5% from last month</div>
+                    </div>
+                    <div className="border rounded p-4">
+                      <div className="text-data-label">MODEL ACCURACY</div>
+                      <div className="text-data-value">94.7%</div>
+                      <div className="text-data-meta">Based on 10,000 predictions</div>
+                    </div>
+                    <div className="border rounded p-4">
+                      <div className="text-data-label">PROCESSING TIME</div>
+                      <div className="text-data-value">1.24s</div>
+                      <div className="text-data-meta">Average query duration</div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            )
+          },
+          {
+            title: "SectionHeader Component",
+            description: "Composed typography component combining headings, icons, and badges for consistent section headers.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="grid gap-6">
+                <Card className="p-6" category={2}>
+                  <div className="space-y-6">
+                    <SectionHeader
+                      title="Data Models"
+                      subtitle="Analytics and machine learning models"
+                      icon={<Database className="w-5 h-5" />}
+                      badge={{ text: "24 Active", variant: "category", category: 1 }}
+                      size="lg"
+                    />
+                    <SectionHeader
+                      title="User Analytics"
+                      subtitle="User behavior and engagement metrics"
+                      icon={<Users className="w-5 h-5" />}
+                      badge={{ text: "Live", variant: "status", status: "success" }}
+                      size="md"
+                    />
+                    <SectionHeader
+                      title="Performance Metrics"
+                      subtitle="System and query performance data"
+                      icon={<TrendingUp className="w-5 h-5" />}
+                      badge={{ text: "Updated", variant: "status", status: "info" }}
+                      size="sm"
+                    />
+                  </div>
+                </Card>
+              </div>
+            )
+          },
+          {
+            title: "Complex Layout Typography",
+            description: "Advanced typography patterns for complex layouts combining multiple elements and hierarchies.",
+            badge: {
+              text: "App-Specific/Ephemeral",
+              variant: "category",
+              category: 3
+            },
+            category: 3,
+            children: (
+              <div className="grid gap-6">
+                <Card className="p-6" category={3}>
+                  <div className="space-y-6">
+                    {/* Complex Header Pattern */}
+                    <div className="border-b pb-4">
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <h2 className="text-2xl font-bold flex items-center gap-2">
+                            Revenue Dashboard
+                            <DataBadge variant="status" status="success" size="sm">Live</DataBadge>
+                          </h2>
+                          <p className="text-muted-foreground mt-1">
+                            Real-time revenue analytics and forecasting
+                          </p>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-2xl font-bold text-category-2">$2.4M</div>
+                          <div className="text-sm text-muted-foreground">This month</div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Metric Cards Layout */}
+                    <div className="grid md:grid-cols-3 gap-4">
+                      <div className="border rounded p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <h3 className="font-medium">Daily Revenue</h3>
+                          <DataBadge variant="category" category={1} size="sm">Analytics</DataBadge>
+                        </div>
+                        <div className="text-xl font-bold">$82,394</div>
+                        <div className="text-sm text-category-2">+5.2% vs yesterday</div>
+                      </div>
+                      <div className="border rounded p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <h3 className="font-medium">Conversion Rate</h3>
+                          <DataBadge variant="category" category={2} size="sm">Metrics</DataBadge>
+                        </div>
+                        <div className="text-xl font-bold">3.24%</div>
+                        <div className="text-sm text-category-6">-0.1% vs yesterday</div>
+                      </div>
+                      <div className="border rounded p-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <h3 className="font-medium">Customer LTV</h3>
+                          <DataBadge variant="category" category={3} size="sm">Business</DataBadge>
+                        </div>
+                        <div className="text-xl font-bold">$1,247</div>
+                        <div className="text-sm text-category-2">+12.4% vs last month</div>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};

package/src/pages/ComponentShowcase/index.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../atoms/ui';
+import { IconBadge, StatCard, DataBadge } from '../../atoms/composed';
+import { Database, Activity, CheckCircle, Palette, Grid3X3 } from 'lucide-react';
+
+// Import showcase components
+import { BadgesShowcase } from './BadgesShowcase';
+import { CardsShowcase } from './CardsShowcase';
+import { TablesShowcase } from './TablesShowcase';
+import { StatesShowcase } from './StatesShowcase';
+import { PalettesShowcase } from './PalettesShowcase';
+import { TypographyShowcase } from './TypographyShowcase';
+
+export const ComponentShowcase: React.FC = () => {
+  const [activeSection, setActiveSection] = useState('badges');
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Hero Section */}
+      <div className="bg-gradient-to-br from-category-1/5 via-category-2/5 to-category-3/5 border-b border-border/50">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <IconBadge 
+                variant="category" 
+                category={1} 
+                size="lg" 
+                icon={<Grid3X3 className="w-6 h-6" />}
+              />
+              <div>
+                <h1 className="text-4xl font-bold text-foreground">Component Showcase</h1>
+                <p className="text-lg text-muted-foreground mt-2">
+                  Explore our comprehensive design system and component library built for data analytics interfaces
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          {/* Quick Stats */}
+          <div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
+            <StatCard
+              title="Components"
+              value="20+"
+              subtitle="Design system components"
+              category={1}
+              icon={<Database className="w-4 h-4" />}
+            />
+            <StatCard
+              title="Colors"
+              value="20+"
+              subtitle="System colors & variants"
+              category={2}
+              icon={<Palette className="w-4 h-4" />}
+            />
+            <StatCard
+              title="Variants"
+              value="50+"
+              subtitle="Component variations"
+              category={3}
+              icon={<CheckCircle className="w-4 h-4" />}
+            />
+            <StatCard
+              title="Interactive"
+              value="100%"
+              subtitle="Fully interactive components"
+              category={4}
+              icon={<Activity className="w-4 h-4" />}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
+        <div className="space-y-8">
+          
+          {/* Component Level Legend */}
+          <div className="bg-card border border-border rounded p-6">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              Component Architecture Legend
+              <DataBadge variant="status" status="info" size="sm">Reference</DataBadge>
+            </h2>
+            <p className="text-sm text-muted-foreground mb-6">
+              This design system supports multiple applications (Data Modeling, Restaurant POS, Analytics Tools). 
+              Understanding component levels helps determine reusability and promotion to shared libraries.
+            </p>
+            
+            <div className="grid md:grid-cols-3 gap-4">
+              {/* UI Level */}
+              <div className="border border-border rounded p-4 bg-category-1/5">
+                <div className="flex items-center gap-2 mb-3">
+                  <DataBadge variant="category" category={1} size="sm">UI Foundation</DataBadge>
+                </div>
+                <h3 className="font-medium text-sm mb-2">@/atoms/ui/ Components</h3>
+                <p className="text-xs text-muted-foreground mb-3">
+                  Base building blocks. Highly reusable across all applications.
+                </p>
+                <div className="text-xs font-mono bg-background/50 rounded px-2 py-1">
+                  Card, Button, Table, Badge
+                </div>
+              </div>
+
+              {/* Business Level */}
+              <div className="border border-border rounded p-4 bg-category-2/5">
+                <div className="flex items-center gap-2 mb-3">
+                  <DataBadge variant="category" category={2} size="sm">Business Components</DataBadge>
+                </div>
+                <h3 className="font-medium text-sm mb-2">@/atoms/composed/ Components</h3>
+                <p className="text-xs text-muted-foreground mb-3">
+                  Domain-specific components. Reusable across data-focused apps.
+                </p>
+                <div className="text-xs font-mono bg-background/50 rounded px-2 py-1">
+                  StatCard, DataTable, DataBadge
+                </div>
+              </div>
+
+              {/* Application Level */}
+              <div className="border border-border rounded p-4 bg-category-3/5">
+                <div className="flex items-center gap-2 mb-3">
+                  <DataBadge variant="category" category={3} size="sm">App-Specific</DataBadge>
+                </div>
+                <h3 className="font-medium text-sm mb-2">Ephemeral Components</h3>
+                <p className="text-xs text-muted-foreground mb-3">
+                  Inline customizations. Consider promoting if reused across apps.
+                </p>
+                <div className="text-xs font-mono bg-background/50 rounded px-2 py-1">
+                  BankAccountCard, OrderSummary
+                </div>
+              </div>
+            </div>
+
+            {/* Promotion Guidelines */}
+            <div className="mt-6 pt-4 border-t border-border">
+              <h4 className="text-sm font-medium mb-2">Promotion Guidelines</h4>
+              <div className="grid md:grid-cols-2 gap-4 text-xs">
+                <div>
+                  <span className="font-medium text-category-2">Promote to Business Layer:</span>
+                  <p className="text-muted-foreground">When pattern appears in 2+ applications</p>
+                </div>
+                <div>
+                  <span className="font-medium text-category-1">Promote to UI Foundation:</span>
+                  <p className="text-muted-foreground">When behavior is purely presentational</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <Tabs value={activeSection} onValueChange={setActiveSection} className="w-full">
+            <TabsList className="grid w-full grid-cols-6 lg:w-fit lg:mx-auto mb-8">
+              <TabsTrigger value="badges" category={1}>Badges</TabsTrigger>
+              <TabsTrigger value="cards" category={2}>Cards</TabsTrigger>
+              <TabsTrigger value="tables" category={3}>Tables</TabsTrigger>
+              <TabsTrigger value="states" category={4}>States</TabsTrigger>
+              <TabsTrigger value="palettes" category={5}>Palettes</TabsTrigger>
+              <TabsTrigger value="typography" category={6}>Typography</TabsTrigger>
+            </TabsList>
+
+            {/* Component Showcases */}
+            <TabsContent value="badges" className="space-y-6">
+              <BadgesShowcase />
+            </TabsContent>
+
+            <TabsContent value="cards" className="space-y-6">
+              <CardsShowcase />
+            </TabsContent>
+
+            <TabsContent value="tables" className="space-y-6">
+              <TablesShowcase />
+            </TabsContent>
+
+            <TabsContent value="states" className="space-y-6">
+              <StatesShowcase />
+            </TabsContent>
+
+            <TabsContent value="palettes" className="space-y-6">
+              <PalettesShowcase />
+            </TabsContent>
+
+            <TabsContent value="typography" className="space-y-6">
+              <TypographyShowcase />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/pages/EntityShowcase/EntityManagementShowcase.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import { EntityListPanel } from '../../organisms/entity';
+import { financialConfig, sampleFinancialData, type FinancialTransaction } from '../../templates/entity/configs/financial-config';
+import { ShowcaseSection } from '../../molecules/layout/ShowcaseSection';
+import { IconBadge } from '../../atoms/composed/IconBadge';
+import { Switch } from '../../atoms/ui/Switch';
+import { Button } from '../../atoms/ui/button';
+import { Database, Filter, Search, Download, Plus, Layers } from 'lucide-react';
+
+export const EntityManagementShowcase: React.FC = () => {
+  const [enableSearch, setEnableSearch] = useState(true);
+  const [enableFiltering, setEnableFiltering] = useState(true);
+  const [enableBulkActions, setEnableBulkActions] = useState(true);
+  const [enableExport, setEnableExport] = useState(true);
+  
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
+        <div className="flex items-center justify-between mb-12">
+          <div className="flex items-center space-x-4">
+            <IconBadge 
+              variant="category" 
+              category={7} 
+              size="lg" 
+              icon={<Database className="w-6 h-6" />}
+            />
+            <div>
+              <h1 className="text-4xl font-bold text-foreground">Entity Management</h1>
+              <p className="text-lg text-muted-foreground mt-2">
+                Cross-domain template for CRUD operations with intelligent search, filtering, and bulk actions
+              </p>
+            </div>
+          </div>
+          
+          <div className="flex items-center space-x-3">
+            <Button variant="outline" size="sm">
+              <Plus className="w-4 h-4 mr-2" />
+              Add Transaction
+            </Button>
+            <div className="flex items-center gap-3 bg-card/80 backdrop-blur-sm border border-border/50 rounded px-3 py-2">
+              <Layers className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Demo Mode</span>
+              <Switch checked={true} disabled />
+            </div>
+          </div>
+        </div>
+
+        {/* Feature Toggles */}
+        <div className="mb-8">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Search className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Search</span>
+              <Switch
+                checked={enableSearch}
+                onCheckedChange={setEnableSearch}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Filter className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Filters</span>
+              <Switch
+                checked={enableFiltering}
+                onCheckedChange={setEnableFiltering}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Database className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Bulk Actions</span>
+              <Switch
+                checked={enableBulkActions}
+                onCheckedChange={setEnableBulkActions}
+              />
+            </div>
+            <div className="flex items-center gap-3 bg-card/50 backdrop-blur-sm border border-border/30 rounded px-3 py-2">
+              <Download className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium text-foreground">Export</span>
+              <Switch
+                checked={enableExport}
+                onCheckedChange={setEnableExport}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-12">
+          <ShowcaseSection
+            title="Entity List with Advanced Features"
+            description="Smart data table with domain-aware column rendering, search, filtering, and bulk operations"
+            badge={{
+              text: "Full Featured",
+              variant: "category",
+              category: 3
+            }}
+          >
+            <EntityListPanel
+              config={financialConfig}
+              data={sampleFinancialData}
+              isLoading={false}
+              enableSearch={enableSearch}
+              enableFiltering={enableFiltering}
+              enableBulkActions={enableBulkActions}
+              enableExport={enableExport}
+              onItemClick={(item: FinancialTransaction) => {
+                console.log('Item clicked:', item);
+              }}
+              onItemEdit={(item: FinancialTransaction) => {
+                console.log('Item edit:', item);
+              }}
+              onItemDelete={(item: FinancialTransaction) => {
+                console.log('Item delete:', item);
+              }}
+              onBulkAction={(action: string, items: FinancialTransaction[]) => {
+                console.log('Bulk action:', action, items);
+              }}
+              onSearch={(query: string) => {
+                console.log('Search:', query);
+              }}
+              onFilter={(filters: Record<string, any>) => {
+                console.log('Filter:', filters);
+              }}
+              onSort={(field: string, direction: 'asc' | 'desc') => {
+                console.log('Sort:', field, direction);
+              }}
+              onExport={(format: 'csv' | 'json' | 'xlsx') => {
+                console.log('Export:', format);
+                return Promise.resolve();
+              }}
+            />
+          </ShowcaseSection>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EntityManagementShowcase;