@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/atoms/hooks/useApi.ts

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

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

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

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

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

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

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

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

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

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

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

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