@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/atoms/utils/metric-engine.ts

@@ -0,0 +1,236 @@
+import type { MetricConfig, MetricValue, EntityData, FormatConfig, TrendDataPoint } from '../types';
+
+export class MetricCalculationEngine {
+  static calculateMetric(
+    config: MetricConfig,
+    data: EntityData[],
+    previousData?: EntityData[]
+  ): MetricValue {
+    const currentValue = this.aggregateValue(config, data);
+    const previousValue = previousData ? this.aggregateValue(config, previousData) : undefined;
+    
+    const trend = this.calculateTrend(currentValue, previousValue);
+    const formattedValue = this.formatValue(currentValue, config.format, config.type);
+    
+    const target = typeof config.target === 'function' 
+      ? config.target(data) 
+      : config.target;
+
+    return {
+      current: currentValue,
+      previous: previousValue,
+      trend,
+      target,
+      formattedValue
+    };
+  }
+
+  private static aggregateValue(config: MetricConfig, data: EntityData[]): number {
+    if (!data.length) return 0;
+
+    const values = data
+      .map(item => {
+        const value = this.extractValue(item, config.key);
+        return typeof value === 'number' ? value : 0;
+      })
+      .filter(value => !isNaN(value));
+
+    if (!values.length) return 0;
+
+    switch (config.aggregation || 'sum') {
+      case 'sum':
+        return values.reduce((sum, value) => sum + value, 0);
+      case 'avg':
+        return values.reduce((sum, value) => sum + value, 0) / values.length;
+      case 'count':
+        return values.length;
+      case 'min':
+        return Math.min(...values);
+      case 'max':
+        return Math.max(...values);
+      default:
+        return values.reduce((sum, value) => sum + value, 0);
+    }
+  }
+
+  private static extractValue(item: EntityData, key: string): unknown {
+    return key.split('.').reduce((obj: any, k: string) => obj?.[k], item);
+  }
+
+  private static calculateTrend(current: number, previous?: number): 'up' | 'down' | 'neutral' {
+    if (previous === undefined || previous === 0) return 'neutral';
+    
+    const change = ((current - previous) / Math.abs(previous)) * 100;
+    
+    if (change > 1) return 'up';
+    if (change < -1) return 'down';
+    return 'neutral';
+  }
+
+  private static formatValue(value: number, format?: FormatConfig, type?: string): string {
+    let formatted = value;
+
+    if (format?.decimals !== undefined) {
+      formatted = Number(value.toFixed(format.decimals));
+    }
+
+    let result = formatted.toString();
+
+    if (format?.thousands !== false && Math.abs(formatted) >= 1000) {
+      result = formatted.toLocaleString();
+    }
+
+    switch (type) {
+      case 'currency':
+        result = new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+          minimumFractionDigits: format?.decimals ?? 2,
+          maximumFractionDigits: format?.decimals ?? 2
+        }).format(formatted);
+        break;
+      case 'percentage':
+        result = `${formatted.toFixed(format?.decimals ?? 1)}%`;
+        break;
+      case 'duration':
+        result = this.formatDuration(formatted);
+        break;
+      case 'ratio':
+        result = `${formatted.toFixed(format?.decimals ?? 2)}:1`;
+        break;
+      default:
+        if (format?.prefix) result = format.prefix + result;
+        if (format?.suffix) result = result + format.suffix;
+    }
+
+    return result;
+  }
+
+  private static formatDuration(minutes: number): string {
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.floor(minutes % 60);
+    
+    if (hours > 0) {
+      return `${hours}h ${mins}m`;
+    }
+    return `${mins}m`;
+  }
+
+  static calculateTrendData(
+    config: MetricConfig,
+    data: EntityData[],
+    dateField: string = 'date',
+    periods: number = 12
+  ): TrendDataPoint[] {
+    const groupedData = this.groupByPeriod(data, dateField);
+    const sortedDates = Object.keys(groupedData).sort();
+    
+    return sortedDates.slice(-periods).map(date => ({
+      date,
+      value: this.aggregateValue(config, groupedData[date]),
+      label: this.formatDateLabel(date)
+    }));
+  }
+
+  private static groupByPeriod(data: EntityData[], dateField: string): Record<string, EntityData[]> {
+    return data.reduce((groups, item) => {
+      const date = this.extractValue(item, dateField);
+      if (!date) return groups;
+      
+      const period = new Date(date as string | number | Date).toISOString().split('T')[0];
+      
+      if (!groups[period]) groups[period] = [];
+      groups[period].push(item);
+      
+      return groups;
+    }, {} as Record<string, EntityData[]>);
+  }
+
+  private static formatDateLabel(dateString: string): string {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    });
+  }
+
+  static calculateCategoryBreakdown(
+    data: EntityData[],
+    categoryField: string,
+    valueField: string,
+    maxCategories: number = 8
+  ) {
+    const groups = data.reduce((acc, item) => {
+      const category = String(this.extractValue(item, categoryField) || 'Unknown');
+      const value = this.extractValue(item, valueField) || 0;
+      
+      if (!acc[category]) acc[category] = 0;
+      acc[category] += typeof value === 'number' ? value : 0;
+      
+      return acc;
+    }, {} as Record<string, number>);
+
+    const total = Object.values(groups).reduce((sum, value) => sum + value, 0);
+    
+    let categories = Object.entries(groups)
+      .map(([category, value]) => ({
+        category,
+        value,
+        percentage: total > 0 ? (value / total) * 100 : 0
+      }))
+      .sort((a, b) => b.value - a.value);
+
+    if (categories.length > maxCategories) {
+      const topCategories = categories.slice(0, maxCategories - 1);
+      const otherValue = categories.slice(maxCategories - 1)
+        .reduce((sum, cat) => sum + cat.value, 0);
+      
+      topCategories.push({
+        category: 'Other',
+        value: otherValue,
+        percentage: total > 0 ? (otherValue / total) * 100 : 0
+      });
+      
+      categories = topCategories;
+    }
+
+    return categories;
+  }
+
+  static detectInsights(
+    metrics: Record<string, MetricValue>,
+    thresholds: Record<string, { warning: number; critical: number }> = {}
+  ) {
+    const insights = [];
+
+    for (const [key, metric] of Object.entries(metrics)) {
+      const threshold = thresholds[key];
+      
+      if (metric.target && metric.current < metric.target * 0.8) {
+        insights.push({
+          type: 'negative' as const,
+          message: `${key} is significantly below target`,
+          value: metric.current
+        });
+      }
+      
+      if (metric.trend === 'up' && metric.previous && metric.current > metric.previous * 1.2) {
+        insights.push({
+          type: 'positive' as const,
+          message: `${key} showing strong growth`,
+          value: metric.current
+        });
+      }
+      
+      if (threshold && metric.current >= threshold.critical) {
+        insights.push({
+          type: 'negative' as const,
+          message: `${key} has reached critical threshold`,
+          value: metric.current
+        });
+      }
+    }
+
+    return insights.slice(0, 5);
+  }
+}

package/src/atoms/utils/tooltip-helpers.ts

@@ -0,0 +1,140 @@
+import { useRef, useState, useEffect } from 'react';
+
+/**
+ * Hook to detect if an element's text is truncated/overflowing
+ * Useful for conditionally showing tooltips only when needed
+ */
+export const useTextOverflow = () => {
+  const ref = useRef<HTMLElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      const element = ref.current;
+      if (!element) return;
+
+      // Check if text is truncated
+      const isOverflow = element.scrollWidth > element.clientWidth || 
+                        element.scrollHeight > element.clientHeight;
+      setIsOverflowing(isOverflow);
+    };
+
+    checkOverflow();
+    
+    // Re-check on resize
+    window.addEventListener('resize', checkOverflow);
+    
+    // Use ResizeObserver if available for more accurate detection
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(checkOverflow);
+      if (ref.current) {
+        resizeObserver.observe(ref.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+        window.removeEventListener('resize', checkOverflow);
+      };
+    }
+
+    return () => window.removeEventListener('resize', checkOverflow);
+  }, []);
+
+  return { ref, isOverflowing };
+};
+
+/**
+ * Formats large numbers with abbreviations
+ * Useful for StatCard values with tooltips showing full numbers
+ */
+export const formatNumberWithTooltip = (value: number): { display: string; tooltip: string } => {
+  const formatter = new Intl.NumberFormat('en-US');
+  const fullNumber = formatter.format(value);
+
+  if (value >= 1_000_000_000) {
+    return {
+      display: `${(value / 1_000_000_000).toFixed(1)}B`,
+      tooltip: fullNumber
+    };
+  } else if (value >= 1_000_000) {
+    return {
+      display: `${(value / 1_000_000).toFixed(1)}M`,
+      tooltip: fullNumber
+    };
+  } else if (value >= 10_000) {
+    return {
+      display: `${(value / 1_000).toFixed(1)}K`,
+      tooltip: fullNumber
+    };
+  }
+
+  return {
+    display: fullNumber,
+    tooltip: '' // No tooltip needed for small numbers
+  };
+};
+
+/**
+ * Standard tooltip content for common UI patterns
+ */
+export const tooltipContent = {
+  // Icon button tooltips
+  refresh: 'Refresh data',
+  download: 'Download',
+  upload: 'Upload file',
+  edit: 'Edit',
+  delete: 'Delete',
+  view: 'View details',
+  filter: 'Filter',
+  search: 'Search',
+  settings: 'Settings',
+  help: 'Help',
+  export: 'Export data',
+  import: 'Import data',
+  add: 'Add new',
+  create: 'Create new',
+  back: 'Go back',
+  forward: 'Go forward',
+  menu: 'Open menu',
+  more: 'More options',
+  copy: 'Copy',
+  paste: 'Paste',
+  share: 'Share',
+  print: 'Print',
+  
+  // Status tooltips
+  success: 'Operation completed successfully',
+  warning: 'Requires attention',
+  error: 'Error occurred',
+  info: 'Information',
+  pending: 'Pending',
+  
+  // Common actions
+  save: 'Save changes',
+  cancel: 'Cancel',
+  close: 'Close',
+  expand: 'Expand',
+  collapse: 'Collapse',
+  minimize: 'Minimize',
+  maximize: 'Maximize',
+  
+  // Navigation
+  previous: 'Previous',
+  next: 'Next',
+  first: 'Go to first',
+  last: 'Go to last',
+  home: 'Home',
+  
+  // Data operations
+  sort: 'Sort',
+  sortAsc: 'Sort ascending',
+  sortDesc: 'Sort descending',
+  clearSort: 'Clear sorting',
+  clearFilters: 'Clear all filters',
+  clearSearch: 'Clear search',
+  
+  // Authentication
+  login: 'Sign in',
+  logout: 'Sign out',
+  profile: 'Profile',
+  account: 'Account settings',
+};

package/src/atoms/utils/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+// Re-export tooltip helpers
+export * from './tooltip-helpers';
+export * from './metric-engine';

package/src/features/auth/components/LoginForm.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { useAuth } from '../hooks/useAuth';
+import { Button } from '../../../atoms/ui/button';
+import { Input } from '../../../atoms/ui/input';
+import { Label } from '../../../atoms/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../atoms/ui/card';
+import { cn } from '../../../atoms/utils/utils';
+import { Database, Shield, TrendingUp, Mail, Lock, Sparkles } from 'lucide-react';
+
+export function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const { login, isLoading } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    
+    try {
+      await login({ email, password });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    }
+  };
+
+  return (
+    <div className="min-h-screen relative overflow-hidden bg-gradient-to-br from-muted/20 via-background to-muted/40">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-muted/5 opacity-5" />
+      
+      {/* Floating Elements */}
+      <div className="absolute top-20 left-20 w-32 h-32 bg-primary/10 rounded-full blur-xl animate-pulse" />
+      <div className="absolute top-40 right-32 w-24 h-24 bg-secondary/10 rounded-full blur-lg animate-pulse delay-1000" />
+      <div className="absolute bottom-40 left-32 w-40 h-40 bg-accent/10 rounded-full blur-2xl animate-pulse delay-500" />
+      
+      <div className="min-h-screen flex items-center justify-center p-4 relative z-10">
+        <div className="w-full max-w-md space-y-8">
+          {/* Header */}
+          <div className="text-center space-y-6 animate-slide-up">
+            <div className="flex justify-center">
+              <div className="relative">
+                <div className="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded flex items-center justify-center shadow">
+                  <Database className="w-8 h-8 text-primary-foreground" />
+                </div>
+                <div className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-br from-accent to-accent-foreground rounded-full flex items-center justify-center">
+                  <Sparkles className="w-3 h-3 text-accent-foreground" />
+                </div>
+              </div>
+            </div>
+            
+            <div className="space-y-2">
+              <h1 className="text-3xl font-bold bg-gradient-to-r from-foreground via-primary to-secondary bg-clip-text text-transparent">
+                Data Trust Navigator
+              </h1>
+              <p className="text-muted-foreground text-lg">
+                Explore, analyze, and trust your data ecosystem
+              </p>
+            </div>
+          </div>
+
+          {/* Login Card */}
+          <Card className="card-container animate-slide-up border-0 shadow bg-background/80 backdrop-blur-sm">
+            <CardHeader className="text-center pb-4">
+              <CardTitle className="text-xl font-semibold">Welcome Back</CardTitle>
+              <CardDescription>
+                Sign in to access your analytics dashboard
+              </CardDescription>
+            </CardHeader>
+            
+            <CardContent className="space-y-6">
+              <form onSubmit={handleSubmit} className="space-y-5">
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-data-label">Email Address</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      placeholder="Enter your email"
+                      className="pl-10 h-11 transition-all duration-200 focus:ring-2 focus:ring-ring focus:border-ring"
+                    />
+                  </div>
+                </div>
+                
+                <div className="space-y-2">
+                  <Label htmlFor="password" className="text-data-label">Password</Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                    <Input
+                      id="password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      placeholder="Enter your password"
+                      className="pl-10 h-11 transition-all duration-200 focus:ring-2 focus:ring-ring focus:border-ring"
+                    />
+                  </div>
+                </div>
+                
+                {error && (
+                  <div className="bg-destructive/10 border border-destructive/20 text-destructive text-sm p-3 rounded animate-shake">
+                    {error}
+                  </div>
+                )}
+                
+                <Button 
+                  type="submit" 
+                  className={cn(
+                    "w-full h-11 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-primary-foreground font-medium transition-all duration-200 hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
+                  )}
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <div className="flex items-center gap-2">
+                      <div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                      Signing in...
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2">
+                      <Shield className="w-4 h-4" />
+                      Sign In
+                    </div>
+                  )}
+                </Button>
+              </form>
+              
+              {/* Demo Notice */}
+              <div className="bg-muted/50 border border-border rounded p-4">
+                <div className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <TrendingUp className="w-3 h-3 text-primary-foreground" />
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground">Demo Environment</p>
+                    <p className="text-xs text-muted-foreground">
+                      Use any email and password to explore the analytics platform
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Features */}
+          <div className="grid grid-cols-3 gap-4 animate-slide-up">
+            {[
+              { icon: Database, label: 'Data Models', bgClass: 'bg-primary/10', textClass: 'text-primary' },
+              { icon: Shield, label: 'Quality Tests', bgClass: 'bg-secondary/10', textClass: 'text-secondary-foreground' },
+              { icon: TrendingUp, label: 'Analytics', bgClass: 'bg-accent/10', textClass: 'text-accent-foreground' }
+            ].map((feature) => (
+              <div key={feature.label} className="text-center space-y-2">
+                <div className={cn('w-10 h-10 rounded-lg flex items-center justify-center mx-auto', feature.bgClass)}>
+                  <feature.icon className={cn('w-5 h-5', feature.textClass)} />
+                </div>
+                <p className="text-xs text-muted-foreground font-medium">{feature.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/auth/components/LogoutButton.tsx

@@ -0,0 +1,19 @@
+import { useAuth } from '../hooks/useAuth';
+import { Button } from '../../../atoms/ui/button';
+
+export function LogoutButton() {
+  const { logout, user } = useAuth();
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-muted-foreground">Welcome, {(user as any)?.name || user?.email}</span>
+      <Button 
+        variant="outline" 
+        size="sm" 
+        onClick={logout}
+      >
+        Logout
+      </Button>
+    </div>
+  );
+}

package/src/features/auth/components/ProtectedRoute.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { useAuth } from '../hooks/useAuth';
+import { LoginForm } from './LoginForm';
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+  requirePermission?: string;
+  requireRole?: string;
+  fallback?: ReactNode;
+}
+
+export function ProtectedRoute({ 
+  children, 
+  requirePermission, 
+  requireRole, 
+  fallback 
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading, hasPermission, hasRole } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+          <p className="mt-2 text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <LoginForm />;
+  }
+
+  // Check permission if required
+  if (requirePermission && !hasPermission(requirePermission)) {
+    return fallback || (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-destructive mb-2">Access Denied</h2>
+          <p className="text-muted-foreground">You don't have permission to access this resource.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Check role if required
+  if (requireRole && !hasRole(requireRole)) {
+    return fallback || (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-destructive mb-2">Access Denied</h2>
+          <p className="text-muted-foreground">Your role doesn't have access to this resource.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

package/{dist/features/auth/components/index.d.ts → src/features/auth/components/index.ts}

@@ -1,4 +1,4 @@
 export { LoginForm } from './LoginForm';
 export { ProtectedRoute } from './ProtectedRoute';
 export { LogoutButton } from './LogoutButton';
-//# sourceMappingURL=index.d.ts.map
+// AuthProvider is exported from ../hooks/useAuth

package/src/features/auth/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useAuth, AuthProvider } from './useAuth';
+export { usePermissions } from './usePermissions';