@codeimplants/ui-kit 1.0.0

package/src/components/support/SupportButtons.tsx

@@ -0,0 +1,311 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Linking } from 'react-native';
+import type { SupportContact, SupportVariant, ThemeColors } from '../../types';
+
+interface SupportButtonsProps {
+  support: SupportContact;
+  variant?: SupportVariant;
+  theme?: ThemeColors;
+}
+
+const SupportButtons: React.FC<SupportButtonsProps> = ({
+  support,
+  variant = 'icon-only',
+  theme,
+}) => {
+  const primaryColor = theme?.primary || '#2563EB';
+  const whatsappColor = '#25D366';
+  const phoneColor = '#2563EB';
+  const emailColor = '#6B7280';
+
+  const handleWhatsApp = () => {
+    if (support.whatsapp) {
+      const url = `https://wa.me/${support.whatsapp.number.replace(/[^0-9]/g, '')}`;
+      Linking.openURL(url);
+    }
+  };
+
+  const handlePhone = () => {
+    if (support.phone) {
+      const url = `tel:${support.phone.number}`;
+      Linking.openURL(url);
+    }
+  };
+
+  const handleEmail = () => {
+    if (support.email) {
+      const url = `mailto:${support.email.address}`;
+      Linking.openURL(url);
+    }
+  };
+
+  const renderIconOnly = () => (
+    <View style={styles.iconOnlyContainer}>
+      {support.whatsapp && (
+        <TouchableOpacity
+          style={[styles.iconButton, { backgroundColor: whatsappColor }]}
+          onPress={handleWhatsApp}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.iconText}>💬</Text>
+        </TouchableOpacity>
+      )}
+      {support.phone && (
+        <TouchableOpacity
+          style={[styles.iconButton, { backgroundColor: phoneColor }]}
+          onPress={handlePhone}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.iconText}>📞</Text>
+        </TouchableOpacity>
+      )}
+      {support.email && (
+        <TouchableOpacity
+          style={[styles.iconButton, { backgroundColor: emailColor }]}
+          onPress={handleEmail}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.iconText}>✉️</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  const renderTextOnly = () => (
+    <View style={styles.textOnlyContainer}>
+      {support.whatsapp && (
+        <TouchableOpacity
+          style={[styles.textButton, { borderColor: whatsappColor }]}
+          onPress={handleWhatsApp}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.textButtonLabel, { color: whatsappColor }]}>
+            {support.whatsapp.label || 'WhatsApp'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.phone && (
+        <TouchableOpacity
+          style={[styles.textButton, { borderColor: phoneColor }]}
+          onPress={handlePhone}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.textButtonLabel, { color: phoneColor }]}>
+            {support.phone.label || 'Call'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.email && (
+        <TouchableOpacity
+          style={[styles.textButton, { borderColor: emailColor }]}
+          onPress={handleEmail}
+          activeOpacity={0.8}
+        >
+          <Text style={[styles.textButtonLabel, { color: emailColor }]}>
+            {support.email.label || 'Email'}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  const renderCombined = () => (
+    <View style={styles.combinedContainer}>
+      {support.whatsapp && (
+        <TouchableOpacity
+          style={[styles.combinedButton, { backgroundColor: whatsappColor }]}
+          onPress={handleWhatsApp}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.combinedIcon}>💬</Text>
+          <Text style={styles.combinedLabel}>
+            {support.whatsapp.label || 'WhatsApp'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.phone && (
+        <TouchableOpacity
+          style={[styles.combinedButton, { backgroundColor: phoneColor }]}
+          onPress={handlePhone}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.combinedIcon}>📞</Text>
+          <Text style={styles.combinedLabel}>
+            {support.phone.label || 'Call'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.email && (
+        <TouchableOpacity
+          style={[styles.combinedButton, { backgroundColor: emailColor }]}
+          onPress={handleEmail}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.combinedIcon}>✉️</Text>
+          <Text style={styles.combinedLabel}>
+            {support.email.label || 'Email'}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  const renderCompact = () => (
+    <View style={styles.compactContainer}>
+      {support.whatsapp && (
+        <TouchableOpacity
+          style={[styles.compactButton, { backgroundColor: whatsappColor }]}
+          onPress={handleWhatsApp}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.compactIcon}>💬</Text>
+          <Text style={styles.compactLabel}>
+            {support.whatsapp.label || 'WhatsApp'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.phone && (
+        <TouchableOpacity
+          style={[styles.compactButton, { backgroundColor: phoneColor }]}
+          onPress={handlePhone}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.compactIcon}>📞</Text>
+          <Text style={styles.compactLabel}>
+            {support.phone.label || 'Call'}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {support.email && (
+        <TouchableOpacity
+          style={[styles.compactButton, { backgroundColor: emailColor }]}
+          onPress={handleEmail}
+          activeOpacity={0.8}
+        >
+          <Text style={styles.compactIcon}>✉️</Text>
+          <Text style={styles.compactLabel}>
+            {support.email.label || 'Email'}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {variant === 'icon-only' && renderIconOnly()}
+      {variant === 'text-only' && renderTextOnly()}
+      {variant === 'combined' && renderCombined()}
+      {variant === 'compact' && renderCompact()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 20,
+  },
+  // Icon-only variant
+  iconOnlyContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 30,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+    alignSelf: 'center',
+  },
+  iconButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  iconText: {
+    fontSize: 24,
+  },
+  // Text-only variant
+  textOnlyContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+  },
+  textButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    backgroundColor: '#FFFFFF',
+  },
+  textButtonLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  // Combined variant
+  combinedContainer: {
+    gap: 12,
+  },
+  combinedButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    gap: 10,
+  },
+  combinedIcon: {
+    fontSize: 20,
+  },
+  combinedLabel: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  // Compact variant
+  compactContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 12,
+  },
+  compactButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    gap: 8,
+    flex: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  compactIcon: {
+    fontSize: 18,
+  },
+  compactLabel: {
+    color: '#FFFFFF',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});
+
+export default SupportButtons;

package/src/components/support/index.ts

@@ -0,0 +1,2 @@
+// Support - Barrel Export
+export { default as SupportButtons } from './SupportButtons';

package/src/components/timers/CountdownTimer.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+interface CountdownTimerProps {
+  estimatedEndTime: Date;
+  onComplete?: () => void;
+  backgroundColor?: string;
+  borderColor?: string;
+}
+
+const CountdownTimer: React.FC<CountdownTimerProps> = ({
+  estimatedEndTime,
+  onComplete,
+  backgroundColor = '#FFFFFF',
+  borderColor = '#E5E7EB',
+}) => {
+  const [timeRemaining, setTimeRemaining] = useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    const updateCountdown = () => {
+      const now = new Date().getTime();
+      const end = new Date(estimatedEndTime).getTime();
+      const distance = end - now;
+
+      if (distance < 0) {
+        setTimeRemaining({ hours: 0, minutes: 0, seconds: 0 });
+        onComplete?.();
+        return;
+      }
+
+      const hours = Math.floor(distance / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      setTimeRemaining({ hours, minutes, seconds });
+    };
+
+    updateCountdown();
+    const interval = setInterval(updateCountdown, 1000);
+
+    return () => clearInterval(interval);
+  }, [estimatedEndTime, onComplete]);
+
+  const formatTime = (value: number) => {
+    return value.toString().padStart(2, '0');
+  };
+
+  const formatDate = () => {
+    const date = new Date(estimatedEndTime);
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const day = date.toLocaleDateString('en-US', { weekday: 'short' });
+    const dayNum = date.getDate();
+    const month = date.toLocaleDateString('en-US', { month: 'short' });
+    
+    return `Expected to be back by ${hours}:${formatTime(minutes)} on ${day} ${dayNum} ${month}`;
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          borderColor,
+        },
+      ]}
+    >
+      <Text style={styles.title}>Estimated Time Remaining</Text>
+      <View style={styles.timerContainer}>
+        <View style={styles.timeBox}>
+          <Text style={styles.timeValue}>{formatTime(timeRemaining.hours)}</Text>
+          <Text style={styles.timeLabel}>Hours</Text>
+        </View>
+        <View style={styles.timeBox}>
+          <Text style={styles.timeValue}>{formatTime(timeRemaining.minutes)}</Text>
+          <Text style={styles.timeLabel}>Min</Text>
+        </View>
+        <View style={styles.timeBox}>
+          <Text style={styles.timeValue}>{formatTime(timeRemaining.seconds)}</Text>
+          <Text style={styles.timeLabel}>Sec</Text>
+        </View>
+      </View>
+      <Text style={styles.expectedText}>{formatDate()}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 24,
+    marginBottom: 24,
+    borderWidth: 1,
+    width: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  timerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 16,
+    marginBottom: 16,
+  },
+  timeBox: {
+    alignItems: 'center',
+    minWidth: 70,
+  },
+  timeValue: {
+    fontSize: 48,
+    fontWeight: '700',
+    color: '#1F2937',
+    lineHeight: 56,
+  },
+  timeLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginTop: 4,
+  },
+  expectedText: {
+    fontSize: 13,
+    color: '#9CA3AF',
+    textAlign: 'center',
+  },
+});
+
+export default CountdownTimer;

package/src/components/timers/RetryCounter.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { RetryInfo, ThemeColors } from '../../types';
+
+interface RetryCounterProps {
+  retryInfo: RetryInfo;
+  theme?: ThemeColors;
+}
+
+const RetryCounter: React.FC<RetryCounterProps> = ({ retryInfo, theme }) => {
+  const textColor = theme?.textSecondary || '#6B7280';
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.text, { color: textColor }]}>
+        Retry attempt {retryInfo.attempt} of {retryInfo.maxAttempts}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 12,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+});
+
+export default RetryCounter;

package/src/components/timers/index.ts

@@ -0,0 +1,3 @@
+// Timers - Barrel Export
+export { default as CountdownTimer } from './CountdownTimer';
+export { default as RetryCounter } from './RetryCounter';

package/src/index.ts

@@ -0,0 +1,125 @@
+// ============================================================================
+// Cross-Platform UI Kit - Main Export
+// ============================================================================
+
+// Export all types
+export * from './types';
+
+// Export all client utilities
+export * from './utils';
+
+// ============================================================================
+// Error Handling Screens
+// ============================================================================
+export { ErrorBoundaryScreen } from './screens/errors/ErrorBoundaryScreen';
+export { ServerErrorScreen } from './screens/errors/ServerErrorScreen';
+export { ClientErrorScreen } from './screens/errors/ClientErrorScreen';
+export { InvalidResponseScreen } from './screens/errors/InvalidResponseScreen';
+export { ApiErrorScreen } from './screens/errors/ApiErrorScreen';
+
+// ============================================================================
+// Network & Connectivity Screens
+// ============================================================================
+export { NetworkOfflineScreen } from './screens/network/NetworkOfflineScreen';
+export { NetworkSlowConnectionScreen } from './screens/network/NetworkSlowConnectionScreen';
+export { ApiTimeoutScreen } from './screens/network/ApiTimeoutScreen';
+
+// ============================================================================
+// Permission Screens
+// ============================================================================
+export { PermissionScreen } from './screens/permissions/PermissionScreen';
+export { PermissionDeniedScreen } from './screens/permissions/PermissionDeniedScreen';
+export { PermissionRequestScreen, MultiPermissionRequestScreen } from './screens/permissions/PermissionRequestScreen';
+
+// ============================================================================
+// System Screens
+// ============================================================================
+// Update Screens
+export { SoftUpdateScreen } from './screens/system/updates/SoftUpdateScreen';
+export { OptionalUpdateScreen } from './screens/system/updates/OptionalUpdateScreen';
+export { ForceUpdateScreen } from './screens/system/updates/ForceUpdateScreen';
+export { SecurityUpdateScreen } from './screens/system/updates/SecurityUpdateScreen';
+export { AppUpdateScreen } from './screens/system/updates/AppUpdateScreen';
+
+// Maintenance Screens
+export { PlannedMaintenanceScreen } from './screens/system/maintenance/PlannedMaintenanceScreen';
+export { UnplannedOutageScreen } from './screens/system/maintenance/UnplannedOutageScreen';
+export { EmergencyOutageScreen } from './screens/system/maintenance/EmergencyOutageScreen';
+export { SystemMaintenanceScreen } from './screens/system/maintenance/SystemMaintenanceScreen';
+export { default as ServiceUnavailableScreen } from './screens/system/maintenance/ServiceUnavailableScreen';
+
+// ============================================================================
+// Shared Design System Components
+// ============================================================================
+export { default as ScreenContainer } from './components/layout/ScreenContainer';
+export { default as IconWithBadge } from './components/icons/utilities/IconWithBadge';
+export { default as ContentCard } from './components/cards/ContentCard';
+export { default as PrimaryButton } from './components/buttons/PrimaryButton';
+export { default as SecondaryButton } from './components/buttons/SecondaryButton';
+export { default as CheckListItem } from './components/lists/CheckListItem';
+export { default as StatusBadge } from './components/feedback/StatusBadge';
+export { default as VersionDisplay } from './components/status/VersionDisplay';
+
+// Other Shared Components
+export { default as SupportButtons } from './components/support/SupportButtons';
+export { default as RetryCounter } from './components/timers/RetryCounter';
+export { default as DualButtonLayout } from './components/layout/DualButtonLayout';
+export { default as TopBanner } from './components/feedback/TopBanner';
+export { default as ExpandableSection } from './components/feedback/ExpandableSection';
+export { default as WhatsNewCard } from './components/cards/WhatsNewCard';
+export { default as StatusCheckList } from './components/lists/StatusCheckList';
+export { default as CountdownTimer } from './components/timers/CountdownTimer';
+export { default as InfoCard } from './components/cards/InfoCard';
+export { default as WarningCard } from './components/cards/WarningCard';
+export { default as SecurityBanner } from './components/feedback/SecurityBanner';
+
+// ============================================================================
+// Animated Icons
+// ============================================================================
+// Network Icons
+export { default as AnimatedWifiOff } from './components/icons/animated/network/AnimatedWifiOff';
+export { default as AnimatedSpeedGauge } from './components/icons/animated/network/AnimatedSpeedGauge';
+export { default as AnimatedTimeout } from './components/icons/animated/network/AnimatedTimeout';
+
+// Error Icons
+export { default as AnimatedCrash } from './components/icons/animated/errors/AnimatedCrash';
+export { default as AnimatedServerError } from './components/icons/animated/errors/AnimatedServerError';
+export { default as AnimatedClientError } from './components/icons/animated/errors/AnimatedClientError';
+export { default as AnimatedInvalidData } from './components/icons/animated/errors/AnimatedInvalidData';
+
+// Permission Icons
+export { default as AnimatedPermission } from './components/icons/animated/permissions/AnimatedPermission';
+export { default as AnimatedPermissionDenied } from './components/icons/animated/permissions/AnimatedPermissionDenied';
+
+// Maintenance Icons
+export { default as AnimatedAlert } from './components/icons/animated/maintenance/AnimatedAlert';
+export { default as AnimatedEmergency } from './components/icons/animated/maintenance/AnimatedEmergency';
+export { default as AnimatedWrench } from './components/icons/animated/maintenance/AnimatedWrench';
+
+// Other Icons
+export { default as AnimatedClock } from './components/icons/animated/general/AnimatedClock';
+export { default as AnimatedWarning } from './components/icons/animated/general/AnimatedWarning';
+export { default as AnimatedShield } from './components/icons/animated/general/AnimatedShield';
+export { default as AnimatedCalendar } from './components/icons/animated/general/AnimatedCalendar';
+export { default as AnimatedDocument } from './components/icons/animated/general/AnimatedDocument';
+export { default as AnimatedCamera } from './components/icons/animated/general/AnimatedCamera';
+export { default as AnimatedLightning } from './components/icons/animated/general/AnimatedLightning';
+export { default as AnimatedLocationPin } from './components/icons/animated/general/AnimatedLocationPin';
+export { default as AnimatedSparkle } from './components/icons/animated/general/AnimatedSparkle';
+export { default as AnimatedDownload } from './components/icons/animated/general/AnimatedDownload';
+
+// Icon Badges
+export { default as DownloadBadge } from './components/icons/badges/DownloadBadge';
+export { default as ClockBadge } from './components/icons/badges/ClockBadge';
+export { default as XBadge } from './components/icons/badges/XBadge';
+
+// ============================================================================
+// Adapter Layer
+// ============================================================================
+export {
+  createSupportHandler,
+  createRetryHandler,
+  createErrorContext,
+  type RetryHandler,
+  type SupportHandler,
+} from './adapters/supportAdapter';