@codeimplants/ui-kit 1.0.0

package/src/screens/system/maintenance/UnplannedOutageScreen.tsx

@@ -0,0 +1,106 @@
+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 SecondaryButton from '../../../components/buttons/SecondaryButton';
+import CheckListItem from '../../../components/lists/CheckListItem';
+import AnimatedAlert from '../../../components/icons/animated/maintenance/AnimatedAlert';
+import { getColor } from '../../../utils/client';
+import type { UnplannedOutageScreenProps } from '../../../types';
+
+/**
+ * Unplanned Outage Screen
+ * 
+ * Displayed during unplanned service disruptions.
+ */
+
+export const UnplannedOutageScreen: React.FC<UnplannedOutageScreenProps> = ({
+  title = 'Service Disruption',
+  description = 'We\'re aware of an issue affecting our services and are working urgently to fix it.',
+  onCheckAgain,
+  onNotifyWhenBack,
+  checkButtonText = 'Check Again',
+  notifyButtonText = 'Notify Me When Back',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedAlert size={48} color={warningColor} />}
+        iconBackgroundColor="#FED7AA"
+        badge={<Text style={styles.badgeIcon}>🕐</Text>}
+        badgeBackgroundColor={warningColor}
+      />
+
+      {/* Status badge */}
+      <StatusBadge
+        text="Service Alert"
+        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>
+
+      {/* What's happening card */}
+      <ContentCard title="What's happening?">
+        <CheckListItem text="Our team is actively working on this" />
+        <CheckListItem text="Your data is safe and secure" />
+        <CheckListItem text="We'll be back as soon as possible" />
+      </ContentCard>
+
+      {/* Action buttons */}
+      {onCheckAgain && (
+        <PrimaryButton onPress={onCheckAgain} backgroundColor={warningColor}>
+          {checkButtonText}
+        </PrimaryButton>
+      )}
+
+      {onNotifyWhenBack && (
+        <SecondaryButton onPress={onNotifyWhenBack}>
+          {notifyButtonText}
+        </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,
+  },
+  badgeIcon: {
+    fontSize: 16,
+  },
+});
+
+export default UnplannedOutageScreen;

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

@@ -0,0 +1,6 @@
+// Maintenance Screens - Barrel Export
+export { PlannedMaintenanceScreen } from './PlannedMaintenanceScreen';
+export { UnplannedOutageScreen } from './UnplannedOutageScreen';
+export { EmergencyOutageScreen } from './EmergencyOutageScreen';
+export { SystemMaintenanceScreen } from './SystemMaintenanceScreen';
+export { default as ServiceUnavailableScreen } from './ServiceUnavailableScreen';

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

@@ -0,0 +1,440 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from 'react-native';
+import { DownloadIcon, XIcon } from '../../../components/icons/utilities';
+import { getColor, getColorWithOpacity, isWeb } from '../../../utils/client';
+import type { AppUpdateScreenProps } from '../../../types';
+
+/**
+ * App Update Screen Component
+ * 
+ * Fully customizable app update screen.
+ * All content, actions, and styling are configurable via props.
+ */
+export const AppUpdateScreen: React.FC<AppUpdateScreenProps> = ({
+  // Update type (for default config)
+  updateType,
+
+  // Content customization
+  title,
+  description,
+  icon,
+
+  // Version info (optional)
+  currentVersion,
+  newVersion,
+  showVersionInfo = true,
+
+  // Release notes (optional)
+  releaseNotes,
+  showReleaseNotes = true,
+
+  // Actions
+  onUpdate,
+  onSkip,
+  onRemindLater,
+
+  // Button text
+  updateButtonText = 'Update Now',
+  skipButtonText = 'Skip this version',
+  remindLaterButtonText = 'Remind Me Later',
+
+  // Variant
+  variant = 'fullscreen',
+
+  // Styling
+  theme,
+  primaryColor,
+}) => {
+  // Animation
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.9)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        tension: 50,
+        friction: 7,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  // Get default config based on updateType (fallback)
+  const getDefaultConfig = () => {
+    const errorColor = theme?.error || getColor('error');
+    const warningColor = theme?.warning || getColor('warning');
+    const successColor = theme?.success || getColor('success');
+    const primaryColorDefault = theme?.primary || getColor('primary');
+
+    switch (updateType) {
+      case 'critical':
+        return {
+          color: errorColor,
+          title: 'Critical Security Update',
+          description: 'A critical security update is available. Please update immediately to keep your data safe.',
+          badge: 'Security',
+          canSkip: false,
+        };
+      case 'force':
+        return {
+          color: warningColor,
+          title: 'Update Required',
+          description: 'A new version is required to continue using the app. Please update now.',
+          badge: 'Required',
+          canSkip: false,
+        };
+      case 'optional':
+        return {
+          color: successColor,
+          title: 'Update Available',
+          description: 'A new version with exciting features is available. Update now to get the latest improvements.',
+          badge: 'New Features',
+          canSkip: true,
+        };
+      case 'soft':
+      default:
+        return {
+          color: primaryColorDefault,
+          title: 'Update Available',
+          description: 'A new version is available with bug fixes and improvements.',
+          badge: null,
+          canSkip: true,
+        };
+    }
+  };
+
+  const defaultConfig = updateType ? getDefaultConfig() : null;
+
+  // Use custom values or fallback to defaults
+  const finalTitle = title || defaultConfig?.title || 'Update Available';
+  const finalDescription = description || defaultConfig?.description || 'A new version is available.';
+  const finalIcon = icon || <DownloadIcon size={48} color={primaryColor || defaultConfig?.color || theme?.primary || getColor('primary')} />;
+  const finalColor = primaryColor || defaultConfig?.color || theme?.primary || getColor('primary');
+  const canSkip = defaultConfig?.canSkip !== false; // Default to true if no updateType
+  const badge = defaultConfig?.badge;
+
+  // Format release notes
+  const formattedReleaseNotes = Array.isArray(releaseNotes)
+    ? releaseNotes.join('\n• ')
+    : releaseNotes;
+
+  if (variant === 'banner') {
+    return (
+      <View style={[styles.banner, { backgroundColor: finalColor }]}>
+        <View style={styles.bannerContent}>
+          <DownloadIcon size={20} color="#FFFFFF" />
+          <Text style={styles.bannerText}>
+            Update to {newVersion ? `v${newVersion}` : 'latest version'} available
+          </Text>
+        </View>
+        <View style={styles.bannerActions}>
+          {onUpdate && (
+            <TouchableOpacity onPress={onUpdate} activeOpacity={0.7} style={styles.bannerButton}>
+              <Text style={styles.bannerButtonText}>{updateButtonText}</Text>
+            </TouchableOpacity>
+          )}
+          {canSkip && onSkip && (
+            <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
+              <XIcon size={20} color="#FFFFFF" />
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  // Fullscreen variant
+  return (
+    <View style={[styles.container, theme?.background ? { backgroundColor: theme.background } : undefined]}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <Animated.View
+          style={[
+            styles.content,
+            {
+              opacity: fadeAnim,
+              transform: [{ scale: scaleAnim }],
+            },
+          ]}
+        >
+          {/* Icon */}
+          <View style={[styles.iconContainer, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }]}>
+            {finalIcon}
+          </View>
+
+          {/* Badge (optional) */}
+          {badge && (
+            <View style={[styles.badge, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }]}>
+              <Text style={[styles.badgeText, { color: finalColor }]}>
+                {badge}
+              </Text>
+            </View>
+          )}
+
+          {/* Title */}
+          <Text style={[styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined]}>
+            {finalTitle}
+          </Text>
+
+          {/* Description */}
+          <Text style={[styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined]}>
+            {finalDescription}
+          </Text>
+
+          {/* Version Info (optional) */}
+          {showVersionInfo && currentVersion && newVersion && (
+            <View style={styles.versionContainer}>
+              <View style={styles.versionItem}>
+                <Text style={styles.versionLabel}>Current</Text>
+                <Text style={styles.versionNumber}>{currentVersion}</Text>
+              </View>
+              <Text style={styles.versionArrow}>→</Text>
+              <View style={styles.versionItem}>
+                <Text style={styles.versionLabel}>New</Text>
+                <Text style={[styles.versionNumber, { color: finalColor }]}>
+                  {newVersion}
+                </Text>
+              </View>
+            </View>
+          )}
+
+          {/* Release Notes (optional) */}
+          {showReleaseNotes && formattedReleaseNotes && (
+            <View style={styles.releaseNotesContainer}>
+              <Text style={styles.releaseNotesTitle}>What's New:</Text>
+              <Text style={styles.releaseNotesText}>
+                {Array.isArray(releaseNotes) ? '• ' : ''}{formattedReleaseNotes}
+              </Text>
+            </View>
+          )}
+
+          {/* Action Buttons */}
+          <View style={styles.buttonsContainer}>
+            {onUpdate && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: finalColor }]}
+                onPress={onUpdate}
+                activeOpacity={0.8}
+              >
+                <DownloadIcon size={20} color="#FFFFFF" />
+                <Text style={styles.primaryButtonText}>{updateButtonText}</Text>
+              </TouchableOpacity>
+            )}
+
+            {canSkip && onRemindLater && (
+              <TouchableOpacity
+                style={[styles.button, styles.secondaryButton, { borderColor: finalColor }]}
+                onPress={onRemindLater}
+                activeOpacity={0.8}
+              >
+                <Text style={[styles.secondaryButtonText, { color: finalColor }]}>
+                  {remindLaterButtonText}
+                </Text>
+              </TouchableOpacity>
+            )}
+
+            {canSkip && onSkip && (
+              <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
+                <Text style={styles.skipText}>{skipButtonText}</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </Animated.View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Fullscreen
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 24,
+  },
+  content: {
+    alignItems: 'center',
+    maxWidth: 480,
+    width: '100%',
+    alignSelf: 'center',
+  },
+  iconContainer: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  badge: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 12,
+    marginBottom: 16,
+  },
+  badgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  versionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+  },
+  versionItem: {
+    alignItems: 'center',
+    marginHorizontal: 8,
+  },
+  versionLabel: {
+    fontSize: 12,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  versionNumber: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1F2937',
+  },
+  versionArrow: {
+    fontSize: 20,
+    color: '#6B7280',
+  },
+  releaseNotesContainer: {
+    width: '100%',
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  releaseNotesTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 8,
+  },
+  releaseNotesText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  buttonsContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    width: '100%',
+    maxWidth: 280,
+    marginBottom: 12,
+  },
+  buttonIcon: {
+    marginRight: 8,
+  },
+  primaryButton: {
+    ...(!isWeb() && {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 3,
+    }),
+  },
+  primaryButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+  secondaryButton: {
+    borderWidth: 2,
+    backgroundColor: 'transparent',
+  },
+  secondaryButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  skipText: {
+    fontSize: 14,
+    color: '#9CA3AF',
+    marginTop: 8,
+  },
+
+  // Banner
+  banner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    zIndex: 1000,
+  },
+  bannerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  bannerIcon: {
+    marginRight: 12,
+  },
+  bannerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+  bannerActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  bannerActionButton: {
+    marginLeft: 12,
+  },
+  bannerButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 6,
+  },
+  bannerButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+});

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

@@ -0,0 +1,121 @@
+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 { ForceUpdateScreenProps } from '../../../types';
+
+/**
+ * Force Update Screen
+ * 
+ * Displayed when an update is required to continue using the app.
+ */
+
+export const ForceUpdateScreen: React.FC<ForceUpdateScreenProps> = ({
+  title = 'Update Required',
+  description = 'Please update to the latest version to continue using the app.',
+  currentVersion,
+  newVersion,
+  features,
+  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={<AnimatedDownload size={48} color={warningColor} />}
+        iconBackgroundColor="#FED7AA"
+        badge={<Text style={styles.badgeIcon}>!</Text>}
+        badgeBackgroundColor={warningColor}
+      />
+
+      {/* Status badge */}
+      <StatusBadge
+        text="Required"
+        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}
+            </Text>
+          ))}
+        </ContentCard>
+      )}
+
+      {/* Action button */}
+      {onUpdate && (
+        <PrimaryButton onPress={onUpdate} backgroundColor={warningColor}>
+          {updateButtonText}
+        </PrimaryButton>
+      )}
+    </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: 20,
+    fontWeight: '700',
+  },
+});
+
+export default ForceUpdateScreen;