@pattern-stack/frontend-patterns 1.0.0

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,9 @@
+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';

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/src/features/auth/components/index.ts

@@ -0,0 +1,4 @@
+export { LoginForm } from './LoginForm';
+export { ProtectedRoute } from './ProtectedRoute';
+export { LogoutButton } from './LogoutButton';
+// 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';

package/src/features/auth/hooks/useAuth.tsx

@@ -0,0 +1,205 @@
+import { useState, useEffect, createContext, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { AuthService } from '../../../atoms/services/auth-service';
+import { setGlobalAuthService } from '../../../atoms/services/api/client';
+import type { 
+  AuthConfig, 
+  BaseUser, 
+  LoginCredentials, 
+  AuthContextType 
+} from '../../../atoms/types';
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function useAuth<T extends BaseUser = BaseUser>(): AuthContextType<T> {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context as AuthContextType<T>;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+  config?: AuthConfig;
+}
+
+export function AuthProvider<T extends BaseUser = BaseUser>({ 
+  children, 
+  config 
+}: AuthProviderProps) {
+  const [user, setUser] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [permissions, setPermissions] = useState<string[]>([]);
+
+  // Create auth service with default config if none provided
+  const authService = useMemo(() => {
+    const defaultConfig: AuthConfig = {
+      apiUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
+      endpoints: {
+        login: '/auth/login',
+        register: '/auth/register',
+        refresh: '/auth/refresh',
+        me: '/auth/me',
+        logout: '/auth/logout'
+      },
+      tokenStorage: 'localStorage',
+      tokenRefreshBuffer: 5,
+      autoRefresh: true,
+      permissions: {
+        enabled: false
+      }
+    };
+
+    const mergedConfig = config ? { ...defaultConfig, ...config } : defaultConfig;
+    const service = new AuthService<T>(mergedConfig);
+    
+    // Set global reference for API client
+    setGlobalAuthService(service);
+    
+    return service;
+  }, [config]);
+
+  const isAuthenticated = !!user;
+
+  useEffect(() => {
+    // Check for existing auth on mount
+    const initAuth = async () => {
+      setIsLoading(true);
+      
+      try {
+        // Check for stored user
+        const storedUser = authService.getStoredUser();
+        const tokenData = authService.getTokenData();
+        
+        if (storedUser && tokenData?.token) {
+          if (authService.isTokenExpired()) {
+            // Token expired, try to refresh
+            if (tokenData.refreshToken) {
+              try {
+                await authService.refreshToken();
+                setUser(storedUser);
+                
+                // Load fresh user data if possible
+                try {
+                  const freshUser = await authService.getCurrentUser();
+                  if (freshUser) setUser(freshUser);
+                } catch {
+                  // Keep stored user if fresh fetch fails
+                }
+              } catch {
+                // Refresh failed, clear auth
+                authService.clearAuth();
+              }
+            } else {
+              // No refresh token, clear auth
+              authService.clearAuth();
+            }
+          } else {
+            // Token still valid
+            setUser(storedUser);
+            
+            // Optionally validate with server
+            try {
+              const freshUser = await authService.getCurrentUser();
+              if (freshUser) setUser(freshUser);
+            } catch {
+              // Keep stored user if validation fails
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Auth initialization error:', error);
+        authService.clearAuth();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initAuth();
+  }, [authService]);
+
+  const login = async (credentials: LoginCredentials) => {
+    setIsLoading(true);
+    try {
+      const user = await authService.login(credentials);
+      setUser(user);
+      
+      // Extract permissions if user has roles/permissions
+      if (config?.permissions?.enabled && 'permissions' in user) {
+        setPermissions((user as any).permissions || []);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = async () => {
+    setIsLoading(true);
+    try {
+      await authService.logout();
+      setUser(null);
+      setPermissions([]);
+    } catch (error) {
+      console.error('Logout error:', error);
+      // Clear local state anyway
+      authService.clearAuth();
+      setUser(null);
+      setPermissions([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshToken = async () => {
+    await authService.refreshToken();
+  };
+
+  const hasPermission = (permission: string): boolean => {
+    if (!config?.permissions?.enabled) return true;
+    return permissions.includes(permission);
+  };
+
+  const hasRole = (role: string): boolean => {
+    if (!config?.permissions?.enabled) return true;
+    
+    // Check if user has role property
+    if (user && 'role' in user) {
+      return (user as any).role === role;
+    }
+    
+    // Check if user has roles array
+    if (user && 'roles' in user) {
+      return ((user as any).roles || []).includes(role);
+    }
+    
+    // Fallback: check admin/user roles from config
+    const { adminRoles = ['admin'], userRoles = ['user'] } = config.permissions || {};
+    
+    if (adminRoles.includes(role)) {
+      return permissions.includes('admin') || permissions.includes('*');
+    }
+    
+    if (userRoles.includes(role)) {
+      return permissions.length > 0; // Any permissions = user role
+    }
+    
+    return false;
+  };
+
+  const value: AuthContextType<T> = {
+    user,
+    isAuthenticated,
+    isLoading,
+    permissions,
+    login,
+    logout,
+    refreshToken,
+    hasPermission,
+    hasRole,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

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

@@ -0,0 +1,35 @@
+import { useAuth } from './useAuth';
+import type { BaseUser } from '../../../atoms/types';
+
+export function usePermissions<T extends BaseUser = BaseUser>() {
+  const { hasPermission, hasRole, permissions, user } = useAuth<T>();
+
+  const can = (permission: string): boolean => hasPermission(permission);
+  
+  const canAny = (permissions: string[]): boolean => 
+    permissions.some(permission => hasPermission(permission));
+  
+  const canAll = (permissions: string[]): boolean => 
+    permissions.every(permission => hasPermission(permission));
+
+  const isRole = (role: string): boolean => hasRole(role);
+  
+  const isAnyRole = (roles: string[]): boolean => 
+    roles.some(role => hasRole(role));
+
+  const isAdmin = (): boolean => hasRole('admin');
+  
+  const isUser = (): boolean => hasRole('user');
+
+  return {
+    can,
+    canAny,
+    canAll,
+    isRole,
+    isAnyRole,
+    isAdmin,
+    isUser,
+    permissions,
+    user
+  };
+}

package/src/features/auth/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/src/features/index.ts

@@ -0,0 +1,2 @@
+// Features - Domain-specific functionality modules
+export * from './auth';