@codeimplants/ui-kit 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,580 @@
+import type { ReactNode } from 'react';
+/**
+ * Error context for support requests and debugging
+ */
+export interface ErrorContext {
+    errorMessage: string;
+    errorCode?: string;
+    screenName?: string;
+    timestamp: string;
+    appVersion: string;
+    platform: 'web' | 'ios' | 'android';
+    os: string;
+    userId?: string;
+    retryCount?: number;
+}
+/**
+ * Support contact configuration
+ */
+export interface SupportContact {
+    whatsapp?: {
+        number: string;
+        label?: string;
+    };
+    phone?: {
+        number: string;
+        label?: string;
+    };
+    email?: {
+        address: string;
+        label?: string;
+    };
+    title?: string;
+    description?: string;
+}
+/**
+ * Theme colors for customization
+ */
+export interface ThemeColors {
+    primary?: string;
+    error?: string;
+    warning?: string;
+    success?: string;
+    info?: string;
+    offline?: string;
+    background?: string;
+    surface?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+}
+/**
+ * API Error Types (for default configurations)
+ */
+export type ApiErrorType = 'timeout' | 'server_error' | 'client_error' | 'invalid_response' | 'network_error';
+/**
+ * System Permission Types
+ */
+export type PermissionType = 'camera' | 'location' | 'notifications' | 'storage' | 'microphone' | 'contacts' | 'calendar' | 'custom';
+/**
+ * Permission Status
+ */
+export type PermissionStatus = 'not_requested' | 'granted' | 'denied' | 'blocked';
+/**
+ * App Update Types
+ */
+export type UpdateType = 'soft' | 'optional' | 'force' | 'critical';
+/**
+ * Maintenance Types
+ */
+export type MaintenanceType = 'planned' | 'unplanned' | 'emergency';
+/**
+ * Support Contact Variant
+ */
+export type SupportContactVariant = 'icon-only' | 'compact' | 'full';
+/**
+ * Connection Speed
+ */
+export type ConnectionSpeed = '2G' | '3G' | '4G' | '5G' | 'slow' | 'fast';
+/**
+ * Support Button Variant - NEW
+ */
+export type SupportVariant = 'icon-only' | 'text-only' | 'combined' | 'compact';
+/**
+ * Button Style Variant
+ */
+export type ButtonStyleVariant = 'icon-only' | 'text-only' | 'combined';
+/**
+ * SafeArea Edge Configuration
+ */
+export type SafeAreaEdge = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * SafeArea Configuration
+ */
+export interface SafeAreaConfig {
+    edges?: SafeAreaEdge[];
+    enabled?: boolean;
+}
+/**
+ * Color Customization for Buttons
+ */
+export interface ColorCustomization {
+    backgroundColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    iconColor?: string;
+}
+/**
+ * Retry Tracking Information - NEW
+ */
+export interface RetryInfo {
+    attempt: number;
+    maxAttempts: number;
+}
+/**
+ * Banner Configuration - NEW
+ */
+export interface BannerConfig {
+    message: string;
+    type: 'warning' | 'error' | 'info' | 'success';
+    dismissible: boolean;
+    onDismiss?: () => void;
+    icon?: ReactNode;
+}
+/**
+ * HTTP Status Code Type
+ */
+export type HttpStatusCode = number;
+/**
+ * Error Severity Level
+ */
+export type ErrorSeverity = 'low' | 'medium' | 'high' | 'critical';
+/**
+ * ErrorBoundaryScreen Component Props
+ * Fully customizable error boundary screen
+ */
+export interface ErrorFallbackProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    onReset?: () => void;
+    onHome?: () => void;
+    resetButtonText?: string;
+    homeButtonText?: string;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    error?: Error;
+    errorContext?: Partial<ErrorContext>;
+    showErrorDetails?: boolean;
+    errorDetailsExpanded?: boolean;
+    theme?: ThemeColors;
+}
+/**
+ * ApiErrorScreen Component Props
+ * Fully customizable API error screen
+ */
+export interface ApiErrorScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    iconColor?: string;
+    iconBackgroundColor?: string;
+    onRetry?: () => void;
+    onHome?: () => void;
+    retryButtonText?: string;
+    homeButtonText?: string;
+    showRetryButton?: boolean;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    retryInfo?: RetryInfo;
+    statusCode?: number;
+    errorCode?: string;
+    errorType?: ApiErrorType;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * NetworkOfflineScreen Component Props
+ */
+export interface NetworkOfflineScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    showWaitingIndicator?: boolean;
+    waitingText?: string;
+    onRetry?: () => void;
+    retryButtonText?: string;
+    tips?: string[];
+    showTips?: boolean;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    variant?: 'fullscreen' | 'banner';
+    position?: 'top' | 'bottom';
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * SlowConnectionScreen Component Props
+ */
+export interface NetworkSlowConnectionScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    connectionSpeed?: ConnectionSpeed;
+    banner?: BannerConfig;
+    onRetry?: () => void;
+    onContinue?: () => void;
+    onDismiss?: () => void;
+    retryButtonText?: string;
+    continueButtonText?: string;
+    tips?: string[];
+    showTips?: boolean;
+    variant?: 'fullscreen' | 'banner';
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * PermissionScreen Component Props
+ */
+export interface PermissionScreenProps {
+    permissionType?: PermissionType;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    reason?: string;
+    reasons?: string[];
+    showReasons?: boolean;
+    onAllow?: () => void;
+    onDeny?: () => void;
+    onOpenSettings?: () => void;
+    onSkip?: () => void;
+    allowButtonText?: string;
+    denyButtonText?: string;
+    settingsButtonText?: string;
+    skipButtonText?: string;
+    status?: PermissionStatus;
+    isOptional?: boolean;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+    support?: SupportContact;
+}
+/**
+ * PermissionDeniedScreen Component Props
+ */
+export interface PermissionDeniedScreenProps {
+    title?: string;
+    description?: string;
+    permissionType?: PermissionType;
+    reason?: string;
+    steps?: string[];
+    onOpenSettings?: () => void;
+    onContinueWithout?: () => void;
+    settingsButtonText?: string;
+    continueButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * MultiPermissionScreen Component Props
+ */
+export interface MultiPermissionScreenProps {
+    permissions: Array<{
+        type: PermissionType;
+        status: PermissionStatus;
+        required: boolean;
+        title?: string;
+        description?: string;
+        icon?: ReactNode;
+    }>;
+    title?: string;
+    description?: string;
+    onContinue?: () => void;
+    onOpenSettings?: () => void;
+    continueButtonText?: string;
+    settingsButtonText?: string;
+    theme?: ThemeColors;
+}
+/**
+ * AppUpdateScreen Component Props
+ */
+export interface AppUpdateScreenProps {
+    updateType?: UpdateType;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    currentVersion?: string;
+    newVersion?: string;
+    showVersionInfo?: boolean;
+    releaseNotes?: string | string[];
+    showReleaseNotes?: boolean;
+    onUpdate?: () => void;
+    onSkip?: () => void;
+    onRemindLater?: () => void;
+    updateButtonText?: string;
+    skipButtonText?: string;
+    remindLaterButtonText?: string;
+    variant?: 'fullscreen' | 'banner';
+    theme?: ThemeColors;
+    primaryColor?: string;
+}
+/**
+ * MaintenanceScreen Component Props
+ */
+export interface MaintenanceScreenProps {
+    type?: MaintenanceType;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    estimatedEndTime?: Date;
+    showCountdown?: boolean;
+    onRetry?: () => void;
+    onNotifyMe?: () => void;
+    retryButtonText?: string;
+    notifyButtonText?: string;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    theme?: ThemeColors;
+}
+/**
+ * ServerErrorScreen Component Props (5xx errors)
+ */
+export interface ServerErrorScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    statusCode?: number;
+    onRetry?: () => void;
+    onHome?: () => void;
+    retryButtonText?: string;
+    homeButtonText?: string;
+    retryInfo?: RetryInfo;
+    support?: SupportContact;
+    supportVariant?: SupportContactVariant;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * ClientErrorScreen Component Props (4xx errors)
+ */
+export interface ClientErrorScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    statusCode?: number;
+    onGoBack?: () => void;
+    onHome?: () => void;
+    goBackButtonText?: string;
+    homeButtonText?: string;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * InvalidResponseScreen Component Props
+ */
+export interface InvalidResponseScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    errorDetails?: string;
+    showErrorDetails?: boolean;
+    onRetry?: () => void;
+    onReportError?: () => void;
+    retryButtonText?: string;
+    reportButtonText?: string;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * ApiTimeoutScreen Component Props
+ */
+export interface ApiTimeoutScreenProps {
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    timeoutDuration?: number;
+    onRetry?: () => void;
+    onHome?: () => void;
+    retryButtonText?: string;
+    homeButtonText?: string;
+    retryInfo?: RetryInfo;
+    support?: SupportContact;
+    supportVariant?: SupportVariant;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * SupportContact Component Props - REFACTORED
+ */
+export interface SupportContactProps {
+    whatsapp?: {
+        number: string;
+        label?: string;
+        onPress?: () => void;
+    };
+    phone?: {
+        number: string;
+        label?: string;
+        onPress?: () => void;
+    };
+    email?: {
+        address: string;
+        label?: string;
+        onPress?: () => void;
+    };
+    title?: string;
+    description?: string;
+    variant?: SupportContactVariant;
+    errorContext?: Partial<ErrorContext>;
+    theme?: ThemeColors;
+}
+/**
+ * @deprecated Use ApiErrorScreenProps with custom props instead
+ */
+export interface RetryIndicatorProps {
+    isRetrying: boolean;
+    retryCount: number;
+    maxRetries: number;
+    retryDelay?: number;
+    status?: 'idle' | 'retrying' | 'success' | 'failed';
+    onCancel?: () => void;
+}
+/**
+ * Retry Progress Bar Component Props
+ */
+export interface RetryProgressBarProps {
+    retryCount: number;
+    maxRetries: number;
+    isActive: boolean;
+}
+/**
+ * Backoff Visualizer Component Props
+ */
+export interface BackoffVisualizerProps {
+    attempt: number;
+    baseDelay?: number;
+}
+/**
+ * UI Kit Configuration
+ */
+export interface UIKitConfig {
+    appVersion?: string;
+    supportPhone?: string;
+    defaultSupport?: SupportContact;
+    colors?: ThemeColors;
+}
+/**
+ * SoftUpdateScreen Component Props
+ */
+export interface SoftUpdateScreenProps {
+    title?: string;
+    description?: string;
+    currentVersion?: string;
+    newVersion?: string;
+    features?: string[];
+    onUpdate?: () => void;
+    onRemindLater?: () => void;
+    onSkip?: () => void;
+    updateButtonText?: string;
+    remindButtonText?: string;
+    skipButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * OptionalUpdateScreen Component Props
+ */
+export interface OptionalUpdateScreenProps {
+    title?: string;
+    description?: string;
+    currentVersion?: string;
+    newVersion?: string;
+    features?: string[];
+    onUpdate?: () => void;
+    onMaybeLater?: () => void;
+    updateButtonText?: string;
+    laterButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * ForceUpdateScreen Component Props
+ */
+export interface ForceUpdateScreenProps {
+    title?: string;
+    description?: string;
+    currentVersion?: string;
+    newVersion?: string;
+    features?: string[];
+    onUpdate?: () => void;
+    updateButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * SecurityUpdateScreen Component Props
+ */
+export interface SecurityUpdateScreenProps {
+    title?: string;
+    description?: string;
+    currentVersion?: string;
+    newVersion?: string;
+    features?: Array<{
+        icon?: string;
+        title: string;
+        description?: string;
+    }>;
+    releaseNotes?: string;
+    onUpdate?: () => void;
+    updateButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * PlannedMaintenanceScreen Component Props
+ */
+export interface PlannedMaintenanceScreenProps {
+    title?: string;
+    description?: string;
+    onCheckAgain?: () => void;
+    onNotifyWhenBack?: () => void;
+    checkButtonText?: string;
+    notifyButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * UnplannedOutageScreen Component Props
+ */
+export interface UnplannedOutageScreenProps {
+    title?: string;
+    description?: string;
+    onCheckAgain?: () => void;
+    onNotifyWhenBack?: () => void;
+    checkButtonText?: string;
+    notifyButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}
+/**
+ * EmergencyOutageScreen Component Props
+ */
+export interface EmergencyOutageScreenProps {
+    title?: string;
+    description?: string;
+    incidentDetails?: string;
+    onCheckStatus?: () => void;
+    onGetUpdates?: () => void;
+    statusButtonText?: string;
+    updatesButtonText?: string;
+    support?: SupportContact;
+    theme?: ThemeColors;
+    primaryColor?: string;
+    backgroundColor?: string;
+}

package/dist/types.js

@@ -0,0 +1,4 @@
+// ============================================================================
+// Type Definitions for Cross-Platform Error UI Screens
+// ============================================================================
+export {};

package/dist/utils/client.d.ts

@@ -0,0 +1,55 @@
+import type { ErrorContext, UIKitConfig } from '../types';
+export declare const initializeUIKit: (customConfig: UIKitConfig) => void;
+export declare const getConfig: () => UIKitConfig;
+export declare const isWeb: () => boolean;
+export declare const isIOS: () => boolean;
+export declare const isAndroid: () => boolean;
+export declare const getPlatformName: () => "web" | "ios" | "android";
+export declare const getOSInfo: () => string;
+export declare const buildErrorContext: (errorMessage: string, options?: Partial<ErrorContext>) => ErrorContext;
+export declare const formatErrorForSupport: (context: ErrorContext) => string;
+export declare const getWhatsAppUrl: (context?: ErrorContext) => string;
+/**
+ * Get phone URL for support
+ */
+export declare const getPhoneUrl: () => string;
+/**
+ * Calculate exponential backoff delay
+ */
+export declare const calculateBackoffDelay: (attempt: number, baseDelay?: number, maxDelay?: number) => number;
+/**
+ * Format delay time for display
+ */
+export declare const formatDelayTime: (milliseconds: number) => string;
+/**
+ * Get connection speed label (UI only)
+ */
+export declare const getConnectionSpeedLabel: (speed: string) => string;
+/**
+ * Get connection tips based on speed (UI only)
+ */
+export declare const getConnectionTips: (speed: string) => string[];
+/**
+ * Get permission display name
+ */
+export declare const getPermissionDisplayName: (permission: string) => string;
+/**
+ * Get permission description
+ */
+export declare const getPermissionDescription: (permission: string) => string;
+/**
+ * Get color by type
+ */
+export declare const getColor: (type: keyof NonNullable<UIKitConfig["colors"]>) => string;
+/**
+ * Get color with opacity
+ */
+export declare const getColorWithOpacity: (colorOrKey: keyof NonNullable<UIKitConfig["colors"]> | string, opacity: number) => string;
+/**
+ * Get responsive padding based on platform
+ */
+export declare const getResponsivePadding: () => number;
+/**
+ * Get responsive font size
+ */
+export declare const getResponsiveFontSize: (base: number) => number;