@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/hooks/useApi.ts

@@ -0,0 +1,80 @@
+import { useMutation, useQuery, useQueryClient, type UseQueryOptions, type UseMutationOptions } from '@tanstack/react-query';
+import { apiClient } from '../services/api/client';
+
+// Generic query hook
+export function useApiQuery<T>(
+  queryKey: (string | number)[],
+  queryFn: () => Promise<T>,
+  options?: Omit<UseQueryOptions<T>, 'queryKey' | 'queryFn'>
+) {
+  return useQuery({
+    queryKey,
+    queryFn,
+    ...options,
+  });
+}
+
+// Generic mutation hook
+export function useApiMutation<TData, TVariables = void>(
+  mutationFn: (variables: TVariables) => Promise<TData>,
+  options?: UseMutationOptions<TData, Error, TVariables>
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn,
+    onSuccess: (data, variables, context) => {
+      // Invalidate queries on successful mutation
+      queryClient.invalidateQueries();
+      options?.onSuccess?.(data, variables, context);
+    },
+    ...options,
+  });
+}
+
+// Example types for API hooks
+interface ExampleData {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface CreateExampleData {
+  name: string;
+  description?: string;
+}
+
+interface UpdateExampleData {
+  name?: string;
+  description?: string;
+}
+
+// Specific API hooks - examples with proper typing
+export function useGetExample(id: string) {
+  return useApiQuery(
+    ['example', id],
+    () => apiClient.get<ExampleData>(`/api/example/${id}`),
+    {
+      enabled: !!id,
+    }
+  );
+}
+
+export function useCreateExample() {
+  return useApiMutation(
+    (data: CreateExampleData) => apiClient.post<ExampleData>('/api/example', data)
+  );
+}
+
+export function useUpdateExample() {
+  return useApiMutation(
+    ({ id, data }: { id: string; data: UpdateExampleData }) => 
+      apiClient.put<ExampleData>(`/api/example/${id}`, data)
+  );
+}
+
+export function useDeleteExample() {
+  return useApiMutation(
+    (id: string) => apiClient.delete<void>(`/api/example/${id}`)
+  );
+}

package/src/atoms/hooks/useHealth.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { healthApi } from '../services/health';
+
+export const healthKeys = {
+  all: ['health'] as const,
+  status: () => [...healthKeys.all, 'status'] as const,
+};
+
+export function useHealth() {
+  return useQuery({
+    queryKey: healthKeys.status(),
+    queryFn: healthApi.getHealth,
+    staleTime: 2 * 60 * 1000, // 2 minutes
+    refetchInterval: 5 * 60 * 1000, // Auto-refresh every 5 minutes
+    retry: 2,
+  });
+}

package/src/atoms/index.ts

@@ -0,0 +1,13 @@
+// Foundation layer exports
+export * from './shared';
+export * from './utils/utils';
+export * from './utils/animations';
+export * from './services/api/client';
+export * from './hooks/useApi';
+export * from './types/generated';
+
+// UI primitives
+export * from './ui';
+
+// Composed components
+export * from './composed';

package/src/atoms/services/api/client.ts

@@ -0,0 +1,134 @@
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080';
+
+export interface ApiClientConfig {
+  baseURL?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+// Global auth service reference - will be set by AuthProvider
+let globalAuthService: any = null;
+
+export function setGlobalAuthService(authService: any): void {
+  globalAuthService = authService;
+}
+
+class ApiClient {
+  private instance: AxiosInstance;
+
+  constructor(config: ApiClientConfig = {}) {
+    this.instance = axios.create({
+      baseURL: config.baseURL || API_BASE_URL,
+      timeout: config.timeout || 10000,
+      headers: {
+        'Content-Type': 'application/json',
+        ...config.headers,
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    // Request interceptor for auth tokens and auto-refresh
+    this.instance.interceptors.request.use(
+      async (config) => {
+        // Add auth token if available
+        if (globalAuthService) {
+          const tokenData = globalAuthService.getTokenData();
+          if (tokenData?.token) {
+            // Check if token should be refreshed
+            if (globalAuthService.shouldRefreshToken()) {
+              try {
+                await globalAuthService.refreshToken();
+                // Get the updated token
+                const newTokenData = globalAuthService.getTokenData();
+                config.headers.Authorization = `Bearer ${newTokenData?.token}`;
+              } catch {
+                // Refresh failed, use existing token (will likely fail and trigger logout)
+                config.headers.Authorization = `Bearer ${tokenData.token}`;
+              }
+            } else {
+              config.headers.Authorization = `Bearer ${tokenData.token}`;
+            }
+          }
+        } else {
+          // Fallback to old method if no auth service
+          const token = localStorage.getItem('auth_token');
+          if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+          }
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    // Response interceptor for error handling
+    this.instance.interceptors.response.use(
+      (response) => response,
+      async (error) => {
+        if (error.response?.status === 401) {
+          if (globalAuthService) {
+            // Try to refresh token once
+            const tokenData = globalAuthService.getTokenData();
+            if (tokenData?.refreshToken && !error.config._retry) {
+              error.config._retry = true;
+              try {
+                await globalAuthService.refreshToken();
+                // Retry the original request with new token
+                const newTokenData = globalAuthService.getTokenData();
+                error.config.headers.Authorization = `Bearer ${newTokenData?.token}`;
+                return this.instance.request(error.config);
+              } catch {
+                // Refresh failed, clear auth
+                globalAuthService.clearAuth();
+                window.location.reload();
+              }
+            } else {
+              // No refresh token or retry failed, clear auth
+              globalAuthService.clearAuth();
+              window.location.reload();
+            }
+          } else {
+            // Fallback to old method
+            localStorage.removeItem('auth_token');
+            localStorage.removeItem('auth_user');
+            window.location.reload();
+          }
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.get(url, config);
+    return response.data;
+  }
+
+  async post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.post(url, data, config);
+    return response.data;
+  }
+
+  async put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.put(url, data, config);
+    return response.data;
+  }
+
+  async patch<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.patch(url, data, config);
+    return response.data;
+  }
+
+  async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.delete(url, config);
+    return response.data;
+  }
+}
+
+export const apiClient = new ApiClient();
+export default apiClient;

package/src/atoms/services/auth-service.ts

@@ -0,0 +1,248 @@
+import { apiClient } from './api/client';
+import type { 
+  AuthConfig, 
+  BaseUser, 
+  LoginCredentials, 
+  LoginResponse, 
+  RefreshResponse, 
+  TokenData 
+} from '../types';
+
+export class AuthService<T extends BaseUser = BaseUser> {
+  private config: AuthConfig;
+  private refreshPromise: Promise<void> | null = null;
+
+  constructor(config: AuthConfig) {
+    this.config = {
+      tokenStorage: 'localStorage',
+      tokenRefreshBuffer: 5, // 5 minutes before expiry
+      autoRefresh: true,
+      ...config
+    };
+  }
+
+  private getStorageKey(key: string): string {
+    return `auth_${key}`;
+  }
+
+  private setItem(key: string, value: string): void {
+    const storageKey = this.getStorageKey(key);
+    switch (this.config.tokenStorage) {
+      case 'sessionStorage':
+        sessionStorage.setItem(storageKey, value);
+        break;
+      case 'cookie':
+        // Simple cookie implementation - for production use a proper cookie library
+        document.cookie = `${storageKey}=${value}; path=/; secure; samesite=strict`;
+        break;
+      default:
+        localStorage.setItem(storageKey, value);
+    }
+  }
+
+  private getItem(key: string): string | null {
+    const storageKey = this.getStorageKey(key);
+    switch (this.config.tokenStorage) {
+      case 'sessionStorage':
+        return sessionStorage.getItem(storageKey);
+      case 'cookie':
+        // Simple cookie reading - for production use a proper cookie library
+        const match = document.cookie.match(`(?:^|;)\\s*${storageKey}=([^;]*)`);
+        return match ? decodeURIComponent(match[1]) : null;
+      default:
+        return localStorage.getItem(storageKey);
+    }
+  }
+
+  private removeItem(key: string): void {
+    const storageKey = this.getStorageKey(key);
+    switch (this.config.tokenStorage) {
+      case 'sessionStorage':
+        sessionStorage.removeItem(storageKey);
+        break;
+      case 'cookie':
+        document.cookie = `${storageKey}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+        break;
+      default:
+        localStorage.removeItem(storageKey);
+    }
+  }
+
+  getTokenData(): TokenData | null {
+    const token = this.getItem('token');
+    const refreshToken = this.getItem('refresh_token');
+    const expiresAt = this.getItem('expires_at');
+
+    if (!token) return null;
+
+    return {
+      token,
+      refreshToken: refreshToken || undefined,
+      expiresAt: expiresAt ? parseInt(expiresAt, 10) : undefined
+    };
+  }
+
+  private setTokenData(tokenData: TokenData): void {
+    this.setItem('token', tokenData.token);
+    if (tokenData.refreshToken) {
+      this.setItem('refresh_token', tokenData.refreshToken);
+    }
+    if (tokenData.expiresAt) {
+      this.setItem('expires_at', tokenData.expiresAt.toString());
+    }
+  }
+
+  getStoredUser(): T | null {
+    const userData = this.getItem('user');
+    if (!userData) return null;
+
+    try {
+      return JSON.parse(userData) as T;
+    } catch {
+      this.clearAuth();
+      return null;
+    }
+  }
+
+  private setStoredUser(user: T): void {
+    this.setItem('user', JSON.stringify(user));
+  }
+
+  clearAuth(): void {
+    this.removeItem('token');
+    this.removeItem('refresh_token');
+    this.removeItem('expires_at');
+    this.removeItem('user');
+  }
+
+  async login(credentials: LoginCredentials): Promise<T> {
+    const response = await apiClient.post<LoginResponse<T>>(
+      `${this.config.apiUrl}${this.config.endpoints.login}`,
+      credentials
+    );
+
+    const { token, refreshToken, user, expiresIn } = response;
+    
+    // Calculate expiration time
+    const expiresAt = expiresIn 
+      ? Date.now() + (expiresIn * 1000) 
+      : undefined;
+
+    // Store tokens and user
+    this.setTokenData({ token, refreshToken, expiresAt });
+    this.setStoredUser(user);
+
+    // Setup auto-refresh if enabled
+    if (this.config.autoRefresh && expiresAt) {
+      this.scheduleTokenRefresh(expiresAt);
+    }
+
+    return user;
+  }
+
+  async refreshToken(): Promise<void> {
+    // Prevent multiple simultaneous refresh attempts
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    const tokenData = this.getTokenData();
+    if (!tokenData?.refreshToken) {
+      throw new Error('No refresh token available');
+    }
+
+    this.refreshPromise = this.performTokenRefresh(tokenData.refreshToken);
+    
+    try {
+      await this.refreshPromise;
+    } finally {
+      this.refreshPromise = null;
+    }
+  }
+
+  private async performTokenRefresh(refreshToken: string): Promise<void> {
+    try {
+      const response = await apiClient.post<RefreshResponse>(
+        `${this.config.apiUrl}${this.config.endpoints.refresh}`,
+        { refreshToken }
+      );
+
+      const { token, refreshToken: newRefreshToken, expiresIn } = response;
+      
+      const expiresAt = expiresIn 
+        ? Date.now() + (expiresIn * 1000) 
+        : undefined;
+
+      // Update stored tokens
+      this.setTokenData({ 
+        token, 
+        refreshToken: newRefreshToken || refreshToken, 
+        expiresAt 
+      });
+
+      // Schedule next refresh
+      if (this.config.autoRefresh && expiresAt) {
+        this.scheduleTokenRefresh(expiresAt);
+      }
+    } catch (error) {
+      // Refresh failed, clear auth
+      this.clearAuth();
+      throw error;
+    }
+  }
+
+  private scheduleTokenRefresh(expiresAt: number): void {
+    const bufferMs = (this.config.tokenRefreshBuffer || 5) * 60 * 1000;
+    const refreshAt = expiresAt - bufferMs;
+    const delay = Math.max(0, refreshAt - Date.now());
+
+    setTimeout(() => {
+      if (this.getTokenData()) {
+        this.refreshToken().catch(() => {
+          // Silent fail - user will need to re-login
+        });
+      }
+    }, delay);
+  }
+
+  isTokenExpired(): boolean {
+    const tokenData = this.getTokenData();
+    if (!tokenData?.expiresAt) return false;
+    
+    return Date.now() >= tokenData.expiresAt;
+  }
+
+  shouldRefreshToken(): boolean {
+    const tokenData = this.getTokenData();
+    if (!tokenData?.expiresAt || !tokenData.refreshToken) return false;
+    
+    const bufferMs = (this.config.tokenRefreshBuffer || 5) * 60 * 1000;
+    return Date.now() >= (tokenData.expiresAt - bufferMs);
+  }
+
+  async getCurrentUser(): Promise<T | null> {
+    const tokenData = this.getTokenData();
+    if (!tokenData?.token) return null;
+
+    try {
+      return await apiClient.get<T>(`${this.config.apiUrl}${this.config.endpoints.me}`);
+    } catch {
+      return null;
+    }
+  }
+
+  async logout(): Promise<void> {
+    const tokenData = this.getTokenData();
+    
+    // Call logout endpoint if available
+    if (this.config.endpoints.logout && tokenData?.token) {
+      try {
+        await apiClient.post(`${this.config.apiUrl}${this.config.endpoints.logout}`);
+      } catch {
+        // Ignore logout endpoint errors
+      }
+    }
+
+    this.clearAuth();
+  }
+}

package/src/atoms/services/health.ts

@@ -0,0 +1,15 @@
+import { apiClient } from './api/client';
+import type { components } from '../types/generated';
+
+type HealthCheckResponse = components['schemas']['HealthResponse'];
+
+export const healthApi = {
+  getHealth: async (): Promise<HealthCheckResponse> => {
+    try {
+      return await apiClient.get<HealthCheckResponse>('/api/v1/health');
+    } catch (error) {
+      console.warn('Health API call failed:', error);
+      throw error;
+    }
+  }
+};

package/src/atoms/services/index.ts

@@ -0,0 +1,3 @@
+export { apiClient, setGlobalAuthService } from './api/client';
+export { AuthService } from './auth-service';
+export * from './health';

package/src/atoms/shared/config/constants.ts

@@ -0,0 +1,17 @@
+export const APP_NAME = 'Design System Showcase';
+
+export const API_ENDPOINTS = {
+  HEALTH: '/health',
+} as const;
+
+export const ROUTES = {
+  HOME: '/',
+  COMPONENTS: '/components',
+  STYLE_GUIDE: '/style-guide',
+} as const;
+
+export const UI_CONFIG = {
+  DEFAULT_PAGE_SIZE: 20,
+  DEBOUNCE_DELAY: 300,
+  TOAST_DURATION: 5000,
+} as const;

package/src/atoms/shared/config/dashboard-sizes.ts

@@ -0,0 +1,111 @@
+// Dashboard component sizing constants
+// These provide standardized heights for consistent layouts
+
+/** 
+ * Dashboard chart heights in pixels
+ * Use these constants instead of hardcoded values for consistent sizing
+ */
+export const DASHBOARD_CHART_HEIGHTS = {
+  // Compact sizes for dense layouts
+  compact: 180,      // For small charts in grids
+  small: 240,        // Standard small chart size
+  
+  // Medium sizes for primary content
+  medium: 320,       // Most common dashboard chart size
+  mediumLarge: 400,  // For detailed primary charts
+  
+  // Large sizes for feature charts
+  large: 480,        // Full-featured charts with legends
+  extraLarge: 600,   // Hero charts and detailed analytics
+  
+  // Special purpose sizes
+  sidebar: 200,      // For sidebar/secondary charts
+  mobile: 160,       // Mobile-optimized height
+} as const;
+
+/** 
+ * Dashboard container heights (includes padding)
+ * These account for padding, headers, and spacing
+ */
+export const DASHBOARD_CONTAINER_HEIGHTS = {
+  // Chart containers (chart height + padding/headers)
+  compactChart: DASHBOARD_CHART_HEIGHTS.compact + 80,    // 260px
+  smallChart: DASHBOARD_CHART_HEIGHTS.small + 80,        // 320px  
+  mediumChart: DASHBOARD_CHART_HEIGHTS.medium + 80,      // 400px
+  mediumLargeChart: DASHBOARD_CHART_HEIGHTS.mediumLarge + 80, // 480px
+  largeChart: DASHBOARD_CHART_HEIGHTS.large + 80,        // 560px
+  extraLargeChart: DASHBOARD_CHART_HEIGHTS.extraLarge + 80,  // 680px
+  
+  // Sidebar and panel heights
+  sidebarPanel: 280,    // For alert panels, activity feeds
+  sidebarChart: DASHBOARD_CHART_HEIGHTS.sidebar + 60,    // 260px
+  
+  // Grid item heights
+  statCard: 120,        // For metric/stat cards
+  miniChart: 180,       // For sparkline charts
+} as const;
+
+/** 
+ * CSS height classes mapping to our size constants
+ * Use these in className props for consistent styling
+ */
+export const DASHBOARD_HEIGHT_CLASSES = {
+  // Chart heights
+  'chart-compact': `h-[${DASHBOARD_CHART_HEIGHTS.compact}px]`,
+  'chart-small': `h-[${DASHBOARD_CHART_HEIGHTS.small}px]`,
+  'chart-medium': `h-[${DASHBOARD_CHART_HEIGHTS.medium}px]`,
+  'chart-medium-large': `h-[${DASHBOARD_CHART_HEIGHTS.mediumLarge}px]`,
+  'chart-large': `h-[${DASHBOARD_CHART_HEIGHTS.large}px]`,
+  'chart-extra-large': `h-[${DASHBOARD_CHART_HEIGHTS.extraLarge}px]`,
+  'chart-sidebar': `h-[${DASHBOARD_CHART_HEIGHTS.sidebar}px]`,
+  
+  // Container heights
+  'container-compact-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.compactChart}px]`,
+  'container-small-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.smallChart}px]`,
+  'container-medium-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.mediumChart}px]`,
+  'container-medium-large-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.mediumLargeChart}px]`,
+  'container-large-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.largeChart}px]`,
+  'container-extra-large-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.extraLargeChart}px]`,
+  
+  // Panel heights
+  'sidebar-panel': `h-[${DASHBOARD_CONTAINER_HEIGHTS.sidebarPanel}px]`,
+  'sidebar-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.sidebarChart}px]`,
+  'stat-card': `h-[${DASHBOARD_CONTAINER_HEIGHTS.statCard}px]`,
+  'mini-chart': `h-[${DASHBOARD_CONTAINER_HEIGHTS.miniChart}px]`,
+} as const;
+
+/** 
+ * Helper function to get chart height for Chart component
+ */
+export const getChartHeight = (size: keyof typeof DASHBOARD_CHART_HEIGHTS): number => {
+  return DASHBOARD_CHART_HEIGHTS[size];
+};
+
+/** 
+ * Helper function to get container height class
+ */
+export const getContainerHeightClass = (size: keyof typeof DASHBOARD_HEIGHT_CLASSES): string => {
+  return DASHBOARD_HEIGHT_CLASSES[size];
+};
+
+/**
+ * Responsive height configurations for different screen sizes
+ */
+export const RESPONSIVE_CHART_HEIGHTS = {
+  mobile: {
+    primary: DASHBOARD_CHART_HEIGHTS.mobile,
+    secondary: DASHBOARD_CHART_HEIGHTS.compact,
+  },
+  tablet: {
+    primary: DASHBOARD_CHART_HEIGHTS.small,
+    secondary: DASHBOARD_CHART_HEIGHTS.sidebar,
+  },
+  desktop: {
+    primary: DASHBOARD_CHART_HEIGHTS.medium,
+    secondary: DASHBOARD_CHART_HEIGHTS.small,
+  },
+  large: {
+    primary: DASHBOARD_CHART_HEIGHTS.large,
+    secondary: DASHBOARD_CHART_HEIGHTS.medium,
+  },
+} as const;

package/src/atoms/shared/config/environment.ts

@@ -0,0 +1,10 @@
+export const env = {
+  API_BASE_URL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
+  OPENAPI_URL: import.meta.env.OPENAPI_URL || 'http://localhost:8080/openapi.json',
+  NODE_ENV: import.meta.env.NODE_ENV || 'development',
+  IS_DEVELOPMENT: import.meta.env.NODE_ENV === 'development',
+  IS_PRODUCTION: import.meta.env.NODE_ENV === 'production',
+  // Feature flags for development
+  USE_MOCK_DATA: import.meta.env.VITE_USE_MOCK_DATA === 'true' || false,
+  MOCK_API_DELAY: parseInt(import.meta.env.VITE_MOCK_API_DELAY || '500'),
+} as const;

package/src/atoms/shared/index.ts

@@ -0,0 +1,4 @@
+// Shared infrastructure exports
+export * from './config/constants'
+export * from './config/environment'
+export * from './config/dashboard-sizes'