@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

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

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

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

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

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

@@ -1,60 +0,0 @@
-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/src/features/auth/hooks/index.ts

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