@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

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

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

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

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

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

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

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

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

package/src/features/index.ts

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