@codeimplants/ui-kit 1.0.0

package/dist/utils/client.js

@@ -0,0 +1,229 @@
+import { Platform } from 'react-native';
+let config = {
+    appVersion: '1.0.0',
+    supportPhone: '+919850929690',
+    colors: {
+        error: '#EF4444',
+        warning: '#F59E0B',
+        success: '#10B981',
+        offline: '#6B7280',
+        primary: '#3B82F6',
+    },
+};
+export const initializeUIKit = (customConfig) => {
+    config = { ...config, ...customConfig };
+};
+export const getConfig = () => config;
+export const isWeb = () => {
+    return Platform.OS === 'web';
+};
+export const isIOS = () => {
+    return Platform.OS === 'ios';
+};
+export const isAndroid = () => {
+    return Platform.OS === 'android';
+};
+export const getPlatformName = () => {
+    return Platform.OS;
+};
+export const getOSInfo = () => {
+    if (isIOS())
+        return `iOS ${Platform.Version || 'Unknown'}`;
+    if (isAndroid())
+        return `Android ${Platform.Version || 'Unknown'}`;
+    if (isWeb()) {
+        // For web, we can try to detect from user agent
+        if (typeof navigator !== 'undefined') {
+            const ua = navigator.userAgent;
+            if (/Macintosh/.test(ua))
+                return 'macOS';
+            if (/Windows/.test(ua))
+                return 'Windows';
+            if (/Linux/.test(ua))
+                return 'Linux';
+        }
+        return 'Web';
+    }
+    return 'Unknown';
+};
+export const buildErrorContext = (errorMessage, options) => {
+    return {
+        errorMessage,
+        timestamp: new Date().toISOString(),
+        appVersion: config.appVersion || '1.0.0',
+        platform: getPlatformName(),
+        os: getOSInfo(),
+        ...options,
+    };
+};
+export const formatErrorForSupport = (context) => {
+    const maskedUserId = context.userId
+        ? `${context.userId.slice(0, 4)}****${context.userId.slice(-4)}`
+        : 'Guest';
+    return `
+🚨 *Support Request*
+
+📱 *App Version:* ${context.appVersion}
+💻 *Platform:* ${context.platform}
+🖥️ *OS:* ${context.os}
+👤 *User:* ${maskedUserId}
+⏰ *Time:* ${new Date(context.timestamp).toLocaleString()}
+
+❌ *Error:* ${context.errorMessage}
+${context.errorCode ? `📋 *Code:* ${context.errorCode}` : ''}
+${context.screenName ? `📍 *Screen:* ${context.screenName}` : ''}
+${context.retryCount ? `🔄 *Retry Count:* ${context.retryCount}` : ''}
+`.trim();
+};
+export const getWhatsAppUrl = (context) => {
+    const phone = config.supportPhone?.replace(/[^0-9]/g, '') || '919850929690';
+    if (context) {
+        const message = encodeURIComponent(formatErrorForSupport(context));
+        return `https://wa.me/${phone}?text=${message}`;
+    }
+    return `https://wa.me/${phone}`;
+};
+/**
+ * Get phone URL for support
+ */
+export const getPhoneUrl = () => {
+    return `tel:${config.supportPhone || '+919850929690'}`;
+};
+// ============================================================================
+// Retry Logic Utilities
+// ============================================================================
+/**
+ * Calculate exponential backoff delay
+ */
+export const calculateBackoffDelay = (attempt, baseDelay = 1000, maxDelay = 30000) => {
+    const delay = Math.min(baseDelay * Math.pow(2, attempt), maxDelay);
+    // Add jitter (±20%)
+    const jitter = delay * 0.2 * (Math.random() - 0.5);
+    return Math.round(delay + jitter);
+};
+/**
+ * Format delay time for display
+ */
+export const formatDelayTime = (milliseconds) => {
+    const seconds = Math.ceil(milliseconds / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+};
+// ============================================================================
+// Network Utilities (UI Only - for display purposes)
+// ============================================================================
+/**
+ * Get connection speed label (UI only)
+ */
+export const getConnectionSpeedLabel = (speed) => {
+    const labels = {
+        '2G': 'Very Slow (2G)',
+        '3G': 'Slow (3G)',
+        '4G': 'Good (4G)',
+        '5G': 'Excellent (5G)',
+        slow: 'Slow Connection',
+        fast: 'Fast Connection',
+    };
+    return labels[speed] || 'Unknown';
+};
+/**
+ * Get connection tips based on speed (UI only)
+ */
+export const getConnectionTips = (speed) => {
+    const tips = {
+        '2G': [
+            'Try moving to an area with better signal',
+            'Connect to Wi-Fi if available',
+            'Close other apps using internet',
+        ],
+        '3G': [
+            'Consider switching to Wi-Fi',
+            'Some features may load slowly',
+            'Try again in a moment',
+        ],
+        slow: [
+            'Check your internet connection',
+            'Try moving closer to your router',
+            'Restart your device if needed',
+        ],
+    };
+    return tips[speed] || tips.slow;
+};
+// ============================================================================
+// Permission Utilities (UI Only)
+// ============================================================================
+/**
+ * Get permission display name
+ */
+export const getPermissionDisplayName = (permission) => {
+    const names = {
+        camera: 'Camera',
+        location: 'Location',
+        notifications: 'Notifications',
+        storage: 'Storage',
+        microphone: 'Microphone',
+        contacts: 'Contacts',
+        calendar: 'Calendar',
+    };
+    return names[permission] || permission;
+};
+/**
+ * Get permission description
+ */
+export const getPermissionDescription = (permission) => {
+    const descriptions = {
+        camera: 'Take photos and videos',
+        location: 'Access your location for better experience',
+        notifications: 'Receive important updates and alerts',
+        storage: 'Save and access files on your device',
+        microphone: 'Record audio and voice messages',
+        contacts: 'Find and connect with friends',
+        calendar: 'Sync events and reminders',
+    };
+    return descriptions[permission] || 'Required for app functionality';
+};
+// ============================================================================
+// Color Utilities
+// ============================================================================
+/**
+ * Get color by type
+ */
+export const getColor = (type) => {
+    return config.colors?.[type] || '#3B82F6';
+};
+/**
+ * Get color with opacity
+ */
+export const getColorWithOpacity = (colorOrKey, opacity) => {
+    // Check if it's a hex color (starts with #) or a color key
+    const color = colorOrKey.startsWith('#') ? colorOrKey : getColor(colorOrKey);
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+// ============================================================================
+// Dimension Utilities
+// ============================================================================
+/**
+ * Get responsive padding based on platform
+ */
+export const getResponsivePadding = () => {
+    if (isWeb())
+        return 24;
+    if (isIOS())
+        return 20;
+    return 16; // Android
+};
+/**
+ * Get responsive font size
+ */
+export const getResponsiveFontSize = (base) => {
+    if (isWeb())
+        return base;
+    return base; // Can be adjusted based on platform needs
+};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './client';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+// Utils - Barrel Export
+export * from './client';

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@codeimplants/ui-kit",
+  "version": "1.0.0",
+  "description": "Enterprise-grade cross-platform UI components for error handling, network states, and user feedback",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "clean": "rm -rf dist",
+    "start": "node dist/index.js",
+    "lint": "eslint src/",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ui-components",
+    "error-handling",
+    "network-states",
+    "cross-platform",
+    "enterprise",
+    "ui-kit",
+    "error-screens",
+    "offline-handling",
+    "permissions",
+    "maintenance-screens",
+    "typescript"
+  ],
+  "author": "Code Implants Software Technologies Pvt. Ltd.",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "react-native-reanimated": "^3.6.0",
+    "react-native-svg": "^14.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-native": "^0.73.0",
+    "react": "^19.0.0",
+    "react-native": "^0.72.0",
+    "typescript": "^5.9.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codeimplants/ui-kit.git"
+  }
+}

package/src/adapters/index.ts

@@ -0,0 +1,2 @@
+// Adapters - Barrel Export
+export * from './supportAdapter';

package/src/adapters/supportAdapter.ts

@@ -0,0 +1,167 @@
+/**
+ * Support Adapter
+ * 
+ * Clean adapter layer that connects UI Kit screens to Support package.
+ * UI screens remain agnostic of support implementation details.
+ */
+
+/**
+ * Error Context Type
+ * Shared between ui-kit and support packages
+ */
+export interface ErrorContext {
+  errorMessage: string;
+  errorCode?: string;
+  screenName?: string;
+  timestamp: string;
+  appVersion: string;
+  platform: 'web' | 'ios' | 'android';
+  os: string;
+  userId?: string;
+  retryCount?: number;
+}
+
+/**
+ * Retry Handler Type
+ * 
+ * Future-proof interface for retry logic.
+ * Even if retry implementation changes internally, UI remains stable.
+ */
+export type RetryHandler = () => Promise<void>;
+
+/**
+ * Support Callback Handler
+ * 
+ * Returns a callback function that can be passed to UI screens.
+ * The callback will be invoked with the support hook methods.
+ * 
+ * @example
+ * ```tsx
+ * const supportHandler = createSupportHandler('ApiErrorScreen', errorContext);
+ * 
+ * <ApiErrorScreen
+ *   onRetry={retryHandler}
+ *   support={{
+ *     onWhatsApp: () => supportHandler((support) => support.openWhatsApp()),
+ *     onEmail: () => supportHandler((support) => support.sendEmail()),
+ *     onCall: () => supportHandler((support) => support.makeCall()),
+ *   }}
+ * />
+ * ```
+ */
+export interface SupportHandler {
+  /**
+   * Execute a support action using the support hook
+   * @param action - Function that receives the support hook and executes an action
+   */
+  (action: (support: any) => Promise<any>): Promise<void>;
+}
+
+/**
+ * Create a support handler for a specific screen
+ * 
+ * This function is meant to be used in test apps to connect UI screens
+ * to the support package. In production apps, you would implement this
+ * based on your specific requirements.
+ * 
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param errorContext - Error context to pass to support methods
+ * @returns A handler function that can execute support actions
+ */
+export function createSupportHandler(
+  screenName: string,
+  errorContext: ErrorContext
+): SupportHandler {
+  return async (action: (support: any) => Promise<any>) => {
+    try {
+      // In a real implementation, you would get the support hook here
+      // For now, this is a placeholder that test apps will override
+      console.log(`[${screenName}] Support action triggered`, {
+        errorContext,
+        timestamp: new Date().toISOString(),
+      });
+      
+      // The test app will provide the actual support hook
+      await action({ errorContext });
+    } catch (error) {
+      console.error(`[${screenName}] Support action failed:`, error);
+      throw error;
+    }
+  };
+}
+
+/**
+ * Create a retry handler for a specific screen
+ * 
+ * Placeholder for future retry logic implementation.
+ * UI screens can use this type without knowing retry implementation details.
+ * 
+ * @param screenName - Name of the screen (for logging/debugging)
+ * @param retryAction - The actual retry logic to execute
+ * @returns A retry handler function
+ */
+export function createRetryHandler(
+  screenName: string,
+  retryAction: () => Promise<void>
+): RetryHandler {
+  return async () => {
+    try {
+      console.log(`[${screenName}] Retry triggered`, {
+        timestamp: new Date().toISOString(),
+      });
+      
+      await retryAction();
+      
+      console.log(`[${screenName}] Retry completed successfully`);
+    } catch (error) {
+      console.error(`[${screenName}] Retry failed:`, error);
+      throw error;
+    }
+  };
+}
+
+/**
+ * Utility to create error context from screen data
+ * 
+ * @param screenName - Name of the screen
+ * @param errorMessage - Error message to include
+ * @param errorCode - Optional error code
+ * @returns ErrorContext object
+ */
+export function createErrorContext(
+  screenName: string,
+  errorMessage: string,
+  errorCode?: string
+): ErrorContext {
+  return {
+    errorMessage,
+    errorCode,
+    screenName,
+    timestamp: new Date().toISOString(),
+    appVersion: '1.0.0', // Should be replaced with actual app version
+    platform: getPlatform(),
+    os: getOS(),
+  };
+}
+
+/**
+ * Get current platform
+ */
+function getPlatform(): 'web' | 'ios' | 'android' {
+  // This is a simplified version - in production use proper platform detection
+  if (typeof window !== 'undefined') {
+    return 'web';
+  }
+  // For React Native, you would use Platform.OS
+  return 'web';
+}
+
+/**
+ * Get OS information
+ */
+function getOS(): string {
+  if (typeof window !== 'undefined' && window.navigator) {
+    return window.navigator.userAgent;
+  }
+  return 'Unknown';
+}

package/src/components/buttons/PrimaryButton.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native';
+
+/**
+ * PrimaryButton Component
+ * 
+ * Blue primary action button with icon support.
+ * Full width with consistent styling across all screens.
+ */
+
+interface PrimaryButtonProps {
+  children: React.ReactNode;
+  onPress: () => void;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  backgroundColor?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  children,
+  onPress,
+  icon,
+  disabled = false,
+  backgroundColor = '#3B82F6',
+  style,
+  textStyle,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        { backgroundColor: disabled ? '#9CA3AF' : backgroundColor },
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.8}
+    >
+      {icon && <>{icon}</>}
+      <Text style={[styles.text, icon ? styles.textWithIcon : undefined, textStyle]}>
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+      },
+      android: {
+        elevation: 2,
+      },
+    }),
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+    textAlign: 'center',
+  },
+  textWithIcon: {
+    marginLeft: 8,
+  },
+});
+
+export default PrimaryButton;

package/src/components/buttons/SecondaryButton.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+
+/**
+ * SecondaryButton Component
+ * 
+ * White/outline secondary action button with icon support.
+ * Full width with consistent styling across all screens.
+ */
+
+interface SecondaryButtonProps {
+  children: React.ReactNode;
+  onPress: () => void;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  borderColor?: string;
+  textColor?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export const SecondaryButton: React.FC<SecondaryButtonProps> = ({
+  children,
+  onPress,
+  icon,
+  disabled = false,
+  borderColor = '#E5E7EB',
+  textColor = '#1F2937',
+  style,
+  textStyle,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        { borderColor: disabled ? '#E5E7EB' : borderColor },
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.8}
+    >
+      {icon && <>{icon}</>}
+      <Text
+        style={[
+          styles.text,
+          { color: disabled ? '#9CA3AF' : textColor },
+          icon ? styles.textWithIcon : undefined,
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    marginBottom: 12,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  textWithIcon: {
+    marginLeft: 8,
+  },
+});
+
+export default SecondaryButton;

package/src/components/buttons/index.ts

@@ -0,0 +1,3 @@
+// Buttons - Barrel Export
+export { default as PrimaryButton } from './PrimaryButton';
+export { default as SecondaryButton } from './SecondaryButton';

package/src/components/cards/ContentCard.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+
+/**
+ * ContentCard Component
+ * 
+ * White card container with border for content sections.
+ * Used for grouping related information on screens.
+ */
+
+interface ContentCardProps {
+  children: React.ReactNode;
+  title?: string;
+  style?: ViewStyle;
+  titleStyle?: TextStyle;
+}
+
+export const ContentCard: React.FC<ContentCardProps> = ({
+  children,
+  title,
+  style,
+  titleStyle,
+}) => {
+  return (
+    <View style={[styles.card, style]}>
+      {title && (
+        <Text style={[styles.title, titleStyle]}>{title}</Text>
+      )}
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 20,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 12,
+    lineHeight: 24,
+  },
+});
+
+export default ContentCard;