@codeimplants/ui-kit 1.0.0

package/src/screens/system/updates/OptionalUpdateScreen.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../../components/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import ContentCard from '../../../components/cards/ContentCard';
+import PrimaryButton from '../../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../../components/buttons/SecondaryButton';
+import VersionDisplay from '../../../components/status/VersionDisplay';
+import AnimatedDownload from '../../../components/icons/animated/general/AnimatedDownload';
+import { getColor } from '../../../utils/client';
+import type { OptionalUpdateScreenProps } from '../../../types';
+
+/**
+ * Optional Update Screen
+ * 
+ * Displayed when an optional update with new features is available.
+ */
+
+export const OptionalUpdateScreen: React.FC<OptionalUpdateScreenProps> = ({
+  title = 'New Features Available',
+  description = 'Update now to enjoy exciting new capabilities and improvements.',
+  currentVersion,
+  newVersion,
+  features,
+  onUpdate,
+  onMaybeLater,
+  updateButtonText = 'Update Now',
+  laterButtonText = 'Maybe Later',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const infoColor = primaryColor || theme?.primary || getColor('primary');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedDownload size={48} color={infoColor} />}
+        iconBackgroundColor="#DBEAFE"
+        badge={<Text style={styles.badgeIcon}>✨</Text>}
+        badgeBackgroundColor={infoColor}
+      />
+
+      {/* Title */}
+      <Text style={[styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined]}>
+        {title}
+      </Text>
+
+      {/* Description */}
+      <Text style={[styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined]}>
+        {description}
+      </Text>
+
+      {/* Version display */}
+      {currentVersion && newVersion && (
+        <VersionDisplay
+          currentVersion={currentVersion}
+          newVersion={newVersion}
+          primaryColor={infoColor}
+        />
+      )}
+
+      {/* What's New card */}
+      {features && features.length > 0 && (
+        <ContentCard title="What's New">
+          {features.map((feature, index) => (
+            <Text key={index} style={styles.featureText}>
+              • {feature}
+            </Text>
+          ))}
+        </ContentCard>
+      )}
+
+      {/* Action buttons */}
+      {onUpdate && (
+        <PrimaryButton onPress={onUpdate} backgroundColor={infoColor}>
+          {updateButtonText}
+        </PrimaryButton>
+      )}
+
+      {onMaybeLater && (
+        <SecondaryButton onPress={onMaybeLater}>
+          {laterButtonText}
+        </SecondaryButton>
+      )}
+    </ScreenContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+    lineHeight: 32,
+  },
+  description: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  featureText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  badgeIcon: {
+    fontSize: 16,
+  },
+});
+
+export default OptionalUpdateScreen;

package/src/screens/system/updates/SecurityUpdateScreen.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import ScreenContainer from '../../../components/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import StatusBadge from '../../../components/feedback/StatusBadge';
+import ContentCard from '../../../components/cards/ContentCard';
+import PrimaryButton from '../../../components/buttons/PrimaryButton';
+import VersionDisplay from '../../../components/status/VersionDisplay';
+import AnimatedDownload from '../../../components/icons/animated/general/AnimatedDownload';
+import { getColor } from '../../../utils/client';
+import type { SecurityUpdateScreenProps } from '../../../types';
+
+/**
+ * Critical Security Update Screen
+ * 
+ * Displayed when a critical security update is required.
+ */
+
+export const SecurityUpdateScreen: React.FC<SecurityUpdateScreenProps> = ({
+  title = 'Critical Security Update',
+  description = 'This update is required for your security',
+  currentVersion,
+  newVersion,
+  features,
+  releaseNotes,
+  onUpdate,
+  updateButtonText = 'Update Now',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<Text style={styles.shieldIcon}>🛡️</Text>}
+        iconBackgroundColor="#FED7AA"
+        badge={<AnimatedDownload size={20} color="#FFFFFF" />}
+        badgeBackgroundColor="#3B82F6"
+      />
+
+      {/* Status badge */}
+      <StatusBadge
+        text="Security"
+        backgroundColor="#FED7AA"
+        textColor={warningColor}
+      />
+
+      {/* Title */}
+      <Text style={[styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined]}>
+        {title}
+      </Text>
+
+      {/* Description */}
+      <Text style={[styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined]}>
+        {description}
+      </Text>
+
+      {/* Version display */}
+      {currentVersion && newVersion && (
+        <VersionDisplay
+          currentVersion={currentVersion}
+          newVersion={newVersion}
+          primaryColor={warningColor}
+        />
+      )}
+
+      {/* What's New card */}
+      {features && features.length > 0 && (
+        <ContentCard title="What's New">
+          {features.map((feature, index) => (
+            <Text key={index} style={styles.featureText}>
+              {feature.icon || '•'} {feature.title}
+              {feature.description && (
+                <Text style={styles.featureDescription}>{'\n'}{feature.description}</Text>
+              )}
+            </Text>
+          ))}
+        </ContentCard>
+      )}
+
+      {/* Release notes */}
+      {releaseNotes && (
+        <ContentCard title="Release Notes">
+          <Text style={styles.releaseNotesText}>{releaseNotes}</Text>
+        </ContentCard>
+      )}
+
+      {/* Action button */}
+      {onUpdate && (
+        <PrimaryButton onPress={onUpdate} backgroundColor={warningColor}>
+          {updateButtonText}
+        </PrimaryButton>
+      )}
+
+      {/* Footer text */}
+      <Text style={styles.footerText}>
+        This update is required to continue using the app
+      </Text>
+    </ScreenContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+    lineHeight: 32,
+  },
+  description: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  shieldIcon: {
+    fontSize: 48,
+  },
+  featureText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1F2937',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  featureDescription: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#6B7280',
+  },
+  releaseNotesText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  footerText: {
+    fontSize: 12,
+    color: '#9CA3AF',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+});
+
+export default SecurityUpdateScreen;

package/src/screens/system/updates/SoftUpdateScreen.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import ScreenContainer from '../../../components/layout/ScreenContainer';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import StatusBadge from '../../../components/feedback/StatusBadge';
+import ContentCard from '../../../components/cards/ContentCard';
+import PrimaryButton from '../../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../../components/buttons/SecondaryButton';
+import VersionDisplay from '../../../components/status/VersionDisplay';
+import AnimatedDownload from '../../../components/icons/animated/general/AnimatedDownload';
+import { getColor } from '../../../utils/client';
+import type { SoftUpdateScreenProps } from '../../../types';
+
+/**
+ * Soft Update Screen
+ * 
+ * Displayed when a soft update is available (user can skip).
+ */
+
+export const SoftUpdateScreen: React.FC<SoftUpdateScreenProps> = ({
+  title = 'Update Available',
+  description = 'A new version is available with improvements and bug fixes.',
+  currentVersion,
+  newVersion,
+  features,
+  onUpdate,
+  onRemindLater,
+  onSkip,
+  updateButtonText = 'Update Now',
+  remindButtonText = 'Remind Later',
+  skipButtonText = 'Skip',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const infoColor = primaryColor || theme?.primary || getColor('primary');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedDownload size={48} color={infoColor} />}
+        iconBackgroundColor="#DBEAFE"
+        badge={<Text style={styles.badgeIcon}>ℹ</Text>}
+        badgeBackgroundColor={infoColor}
+      />
+
+      {/* Title */}
+      <Text style={[styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined]}>
+        {title}
+      </Text>
+
+      {/* Description */}
+      <Text style={[styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined]}>
+        {description}
+      </Text>
+
+      {/* Version display */}
+      {currentVersion && newVersion && (
+        <VersionDisplay
+          currentVersion={currentVersion}
+          newVersion={newVersion}
+          primaryColor={infoColor}
+        />
+      )}
+
+      {/* What's New card */}
+      {features && features.length > 0 && (
+        <ContentCard title="What's New">
+          {features.map((feature, index) => (
+            <Text key={index} style={styles.featureText}>
+              • {feature}
+            </Text>
+          ))}
+        </ContentCard>
+      )}
+
+      {/* Action buttons */}
+      {onUpdate && (
+        <PrimaryButton onPress={onUpdate} backgroundColor={infoColor}>
+          {updateButtonText}
+        </PrimaryButton>
+      )}
+
+      {onRemindLater && (
+        <SecondaryButton onPress={onRemindLater}>
+          {remindButtonText}
+        </SecondaryButton>
+      )}
+
+      {onSkip && (
+        <Text style={styles.skipText} onPress={onSkip}>
+          {skipButtonText}
+        </Text>
+      )}
+    </ScreenContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+    lineHeight: 32,
+  },
+  description: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  featureText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  skipText: {
+    fontSize: 14,
+    color: '#6B7280',
+    textAlign: 'center',
+    textDecorationLine: 'underline',
+  },
+});
+
+export default SoftUpdateScreen;

package/src/screens/system/updates/index.ts

@@ -0,0 +1,6 @@
+// Update Screens - Barrel Export
+export { SoftUpdateScreen } from './SoftUpdateScreen';
+export { OptionalUpdateScreen } from './OptionalUpdateScreen';
+export { ForceUpdateScreen } from './ForceUpdateScreen';
+export { SecurityUpdateScreen } from './SecurityUpdateScreen';
+export { AppUpdateScreen } from './AppUpdateScreen';

package/src/types/common.ts

@@ -0,0 +1,203 @@
+// ============================================================================
+// Common Type Definitions
+// ============================================================================
+
+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;
+}
+
+/**
+ * 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
+ */
+export interface RetryInfo {
+  attempt: number;
+  maxAttempts: number;
+}
+
+/**
+ * Banner Configuration
+ */
+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';
+
+/**
+ * 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
+ */
+export type SupportVariant = 
+  | 'icon-only'
+  | 'text-only'
+  | 'combined'
+  | 'compact';
+
+/**
+ * Button Style Variant
+ */
+export type ButtonStyleVariant = 
+  | 'icon-only'
+  | 'text-only'
+  | 'combined';
+
+/**
+ * UI Kit Configuration
+ */
+export interface UIKitConfig {
+  appVersion?: string;
+  supportPhone?: string;
+  defaultSupport?: SupportContact;
+  colors?: ThemeColors;
+}

package/src/types/components.ts

@@ -0,0 +1,65 @@
+// ============================================================================
+// Component Props
+// ============================================================================
+
+import type { ReactNode } from 'react';
+import type {
+  ErrorContext,
+  SupportContactVariant,
+  ThemeColors,
+} from './common';
+
+/**
+ * SupportContact Component Props
+ */
+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;
+}

package/src/types/index.ts

@@ -0,0 +1,9 @@
+// ============================================================================
+// Type Definitions - Barrel Export
+// ============================================================================
+
+// Re-export all types from subdirectories
+export * from './common';
+export * from './screens';
+export * from './components';
+export * from './support';