@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

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/index.ts

@@ -0,0 +1,2 @@
+export { ComponentShowcase } from './ComponentShowcase';
+export * from './AdminShowcase';

package/src/templates/AuthTemplate.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { cn } from '../atoms/utils/utils';
+import { Card } from '../atoms/ui/card';
+import { SectionHeader } from '../molecules/layout/SectionHeader';
+
+export interface AuthTemplateProps {
+  /** Page title */
+  title: string;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Auth form content */
+  children: React.ReactNode;
+  /** Footer content (e.g., links to other auth pages) */
+  footer?: React.ReactNode;
+  /** Logo or brand element */
+  logo?: React.ReactNode;
+  /** Background pattern or image */
+  backgroundPattern?: 'gradient' | 'grid' | 'dots' | 'waves';
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Card width variant */
+  width?: 'sm' | 'md' | 'lg';
+}
+
+export const AuthTemplate: React.FC<AuthTemplateProps> = ({
+  title,
+  subtitle,
+  children,
+  footer,
+  logo,
+  backgroundPattern = 'gradient',
+  className,
+  category = 1,
+  width = 'md'
+}) => {
+  const backgroundPatterns = {
+    gradient: 'bg-gradient-to-br from-background via-muted/20 to-background',
+    grid: 'bg-background bg-[size:2rem_2rem] bg-[image:radial-gradient(circle,var(--muted)_1px,transparent_1px)]',
+    dots: 'bg-background bg-[size:1rem_1rem] bg-[image:radial-gradient(circle,var(--muted)_1px,transparent_1px)]',
+    waves: 'bg-background bg-[size:4rem_2rem] bg-[image:repeating-linear-gradient(45deg,transparent,transparent_1rem,var(--muted/20)_1rem,var(--muted/20)_2rem)]'
+  };
+
+  const widthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg'
+  };
+
+  return (
+    <div
+      className={cn(
+        'min-h-screen flex items-center justify-center p-4',
+        backgroundPatterns[backgroundPattern],
+        className
+      )}
+      data-component-name="AuthTemplate"
+    >
+      <div className={cn('w-full', widthClasses[width])}>
+        <Card 
+          className="p-8 backdrop-blur-sm bg-background/95"
+          category={category}
+        >
+          {/* Logo */}
+          {logo && (
+            <div className="flex justify-center mb-8">
+              {logo}
+            </div>
+          )}
+
+          {/* Header */}
+          <div className="text-center mb-8">
+            <SectionHeader
+              title={title}
+              subtitle={subtitle}
+              size="lg"
+              className="text-center"
+            />
+          </div>
+
+          {/* Form Content */}
+          <div className="space-y-6">
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div className="mt-8 pt-6 border-t border-border text-center">
+              {footer}
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Auth Form Field Component
+ * Standardized form field for auth forms
+ */
+export interface AuthFormFieldProps {
+  /** Field label */
+  label: string;
+  /** Field input */
+  children: React.ReactNode;
+  /** Error message */
+  error?: string;
+  /** Whether field is required */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const AuthFormField: React.FC<AuthFormFieldProps> = ({
+  label,
+  children,
+  error,
+  required = false,
+  className
+}) => {
+  return (
+    <div className={cn('space-y-2', className)}>
+      <label className={cn(
+        'text-sm font-medium text-foreground block',
+        required && "after:content-['*'] after:ml-0.5 after:text-status-error"
+      )}>
+        {label}
+      </label>
+      
+      <div className="relative">
+        {children}
+      </div>
+      
+      {error && (
+        <p className="text-xs text-status-error font-medium">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Auth Link Component
+ * Standardized link for auth pages
+ */
+export interface AuthLinkProps {
+  /** Link text */
+  children: React.ReactNode;
+  /** Link destination */
+  href: string;
+  /** Link variant */
+  variant?: 'primary' | 'secondary';
+  /** Additional CSS classes */
+  className?: string;
+  /** Category-based styling */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const AuthLink: React.FC<AuthLinkProps> = ({
+  children,
+  href,
+  variant = 'primary',
+  className,
+  category = 1
+}) => {
+  const variantClasses = {
+    primary: `text-category-${category} hover:text-category-${category}/80 font-medium`,
+    secondary: 'text-muted-foreground hover:text-foreground'
+  };
+
+  return (
+    <a
+      href={href}
+      className={cn(
+        'text-sm transition-colors hover:underline',
+        variantClasses[variant],
+        className
+      )}
+    >
+      {children}
+    </a>
+  );
+};
+
+/**
+ * Auth Divider Component
+ * Visual divider for auth forms (e.g., "or continue with")
+ */
+export interface AuthDividerProps {
+  /** Divider text */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const AuthDivider: React.FC<AuthDividerProps> = ({
+  children = 'or',
+  className
+}) => {
+  return (
+    <div className={cn('relative flex items-center', className)}>
+      <div className="flex-1 border-t border-border" />
+      {children && (
+        <div className="px-4">
+          <span className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+            {children}
+          </span>
+        </div>
+      )}
+      <div className="flex-1 border-t border-border" />
+    </div>
+  );
+};