@codeimplants/ui-kit 1.0.0

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

@@ -0,0 +1,113 @@
+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 AnimatedEmergency from '../../../components/icons/animated/maintenance/AnimatedEmergency';
+import { getColor } from '../../../utils/client';
+import type { EmergencyOutageScreenProps } from '../../../types';
+
+/**
+ * Emergency Outage Screen
+ * 
+ * Displayed during critical emergency outages.
+ */
+
+export const EmergencyOutageScreen: React.FC<EmergencyOutageScreenProps> = ({
+  title = 'Service Unavailable',
+  description = 'We\'re experiencing a critical issue. Our team is working around the clock to restore service.',
+  incidentDetails,
+  onCheckStatus,
+  onGetUpdates,
+  statusButtonText = 'Check Status',
+  updatesButtonText = 'Get Updates',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const errorColor = primaryColor || theme?.error || getColor('error');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedEmergency size={48} color={errorColor} />}
+        iconBackgroundColor="#FEE2E2"
+        badge={<Text style={styles.badgeIcon}>!</Text>}
+        badgeBackgroundColor={errorColor}
+      />
+
+      {/* Status badge */}
+      <StatusBadge
+        text="Critical"
+        backgroundColor="#FEE2E2"
+        textColor={errorColor}
+      />
+
+      {/* 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>
+
+      {/* Incident details card */}
+      {incidentDetails && (
+        <ContentCard title="Incident Details">
+          <Text style={styles.incidentText}>{incidentDetails}</Text>
+        </ContentCard>
+      )}
+
+      {/* Action buttons */}
+      {onCheckStatus && (
+        <PrimaryButton onPress={onCheckStatus} backgroundColor={errorColor}>
+          {statusButtonText}
+        </PrimaryButton>
+      )}
+
+      {onGetUpdates && (
+        <SecondaryButton onPress={onGetUpdates}>
+          {updatesButtonText}
+        </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,
+  },
+  incidentText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default EmergencyOutageScreen;

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

@@ -0,0 +1,98 @@
+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 CheckListItem from '../../../components/lists/CheckListItem';
+import AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import { getColor } from '../../../utils/client';
+import type { PlannedMaintenanceScreenProps } from '../../../types';
+
+/**
+ * Planned Maintenance Screen
+ * 
+ * Displayed during scheduled maintenance.
+ */
+
+export const PlannedMaintenanceScreen: React.FC<PlannedMaintenanceScreenProps> = ({
+  title = 'Service Temporarily Unavailable',
+  description = 'We\'re experiencing technical difficulties and working to resolve them.',
+  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={<AnimatedWrench size={48} color={warningColor} />}
+        iconBackgroundColor="#FEF3C7"
+        badge={<Text style={styles.badgeIcon}>🕐</Text>}
+        badgeBackgroundColor={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 PlannedMaintenanceScreen;

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

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, ScrollView, Animated } from 'react-native';
+import type { ThemeColors } from '../../../types';
+import IconWithBadge from '../../../components/icons/utilities/IconWithBadge';
+import AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import ClockBadge from '../../../components/icons/badges/ClockBadge';
+import StatusCheckList from '../../../components/lists/StatusCheckList';
+import DualButtonLayout from '../../../components/layout/DualButtonLayout';
+
+export interface ServiceUnavailableScreenProps {
+  // Content
+  title?: string;
+  description?: string;
+  
+  // Status messages
+  statusMessages?: string[];
+  
+  // Actions
+  onCheckAgain?: () => void;
+  onNotifyMe?: () => void;
+  
+  // Button text
+  checkButtonText?: string;
+  notifyButtonText?: string;
+  
+  // Styling
+  theme?: ThemeColors;
+  backgroundColor?: string;
+}
+
+const ServiceUnavailableScreen: React.FC<ServiceUnavailableScreenProps> = ({
+  title = 'Service Temporarily Unavailable',
+  description = "We're experiencing technical difficulties and working to resolve them.",
+  statusMessages,
+  onCheckAgain,
+  onNotifyMe,
+  checkButtonText = 'Check Again',
+  notifyButtonText = 'Notify Me When Back',
+  theme,
+  backgroundColor,
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 600,
+      useNativeDriver: true,
+    }).start();
+  }, []);
+
+  const defaultStatusMessages = statusMessages || [
+    'Our team is actively working on this',
+    'Your data is safe and secure',
+    "We'll be back as soon as possible",
+  ];
+
+  const bgColor = backgroundColor || theme?.background || '#FFFFFF';
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <Animated.View style={{ opacity: fadeAnim }}>
+          {/* Icon with Badge */}
+          <View style={styles.iconSection}>
+            <IconWithBadge
+              icon={<AnimatedWrench size={60} color="#F59E0B" />}
+              badge={<ClockBadge size={48} />}
+              size={120}
+              backgroundColor="#FEF3C7"
+            />
+          </View>
+
+          {/* Title */}
+          <Text style={styles.title}>{title}</Text>
+
+          {/* Description */}
+          <Text style={styles.description}>{description}</Text>
+
+          {/* Status Checklist */}
+          <StatusCheckList messages={defaultStatusMessages} />
+
+          {/* Action Buttons */}
+          {(onCheckAgain || onNotifyMe) && (
+            <DualButtonLayout
+              primaryText={checkButtonText}
+              primaryAction={onCheckAgain || (() => {})}
+              primaryIcon="🔄"
+              secondaryText={notifyButtonText}
+              secondaryAction={onNotifyMe || (() => {})}
+              secondaryIcon="🔔"
+              layout="vertical"
+              theme={theme}
+            />
+          )}
+        </Animated.View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    alignItems: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 60,
+  },
+  iconSection: {
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 32,
+  },
+});
+
+export default ServiceUnavailableScreen;

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

@@ -0,0 +1,334 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from 'react-native';
+import SupportButtons from '../../../components/support/SupportButtons';
+import AnimatedWrench from '../../../components/icons/animated/maintenance/AnimatedWrench';
+import { getColor, getColorWithOpacity, isWeb } from '../../../utils/client';
+import type { MaintenanceScreenProps } from '../../../types';
+
+/**
+ * System Maintenance Screen Component
+ * 
+ * Fully customizable maintenance screen.
+ * All content, countdown, actions, and support are configurable via props.
+ */
+export const SystemMaintenanceScreen: React.FC<MaintenanceScreenProps> = ({
+  // Maintenance type (for default config)
+  type,
+
+  // Content customization
+  title,
+  description,
+  icon,
+
+  // Time info (optional)
+  estimatedEndTime,
+  showCountdown = true,
+
+  // Actions
+  onRetry,
+  onNotifyMe,
+
+  // Button text
+  retryButtonText = 'Check Again',
+  notifyButtonText = 'Notify Me When Ready',
+
+  // Support (optional)
+  support,
+  supportVariant,
+  
+  // Styling
+  theme,
+}) => {
+  const [timeRemaining, setTimeRemaining] = useState<string>('');
+
+  // 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();
+  }, []);
+
+  useEffect(() => {
+    if (estimatedEndTime && showCountdown) {
+      const updateCountdown = () => {
+        const now = new Date().getTime();
+        const end = estimatedEndTime.getTime();
+        const diff = end - now;
+
+        if (diff <= 0) {
+          setTimeRemaining('Maintenance should be complete');
+          return;
+        }
+
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+        if (hours > 0) {
+          setTimeRemaining(`${hours}h ${minutes}m ${seconds}s`);
+        } else if (minutes > 0) {
+          setTimeRemaining(`${minutes}m ${seconds}s`);
+        } else {
+          setTimeRemaining(`${seconds}s`);
+        }
+      };
+
+      updateCountdown();
+      const interval = setInterval(updateCountdown, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [estimatedEndTime, showCountdown]);
+
+  // Get default config based on type (fallback)
+  const getDefaultConfig = () => {
+    const errorColor = theme?.error || getColor('error');
+    const warningColor = theme?.warning || getColor('warning');
+    const primaryColorDefault = theme?.primary || getColor('primary');
+
+    switch (type) {
+      case 'emergency':
+        return {
+          color: errorColor,
+          title: 'Emergency Maintenance',
+          description: 'We are performing emergency maintenance to fix critical issues. We apologize for the inconvenience.',
+          badge: 'Critical',
+        };
+      case 'unplanned':
+        return {
+          color: warningColor,
+          title: 'Unplanned Outage',
+          description: 'We are experiencing unexpected issues and working to resolve them as quickly as possible.',
+          badge: 'Unexpected',
+        };
+      case 'planned':
+      default:
+        return {
+          color: primaryColorDefault,
+          title: 'Scheduled Maintenance',
+          description: 'We are performing scheduled maintenance to improve your experience. We will be back shortly.',
+          badge: 'Scheduled',
+        };
+    }
+  };
+
+  const defaultConfig = type ? getDefaultConfig() : null;
+
+  // Use custom values or fallback to defaults
+  const finalTitle = title || defaultConfig?.title || 'Under Maintenance';
+  const finalDescription = description || defaultConfig?.description || 'We are currently performing maintenance.';
+  const finalIcon = icon || <AnimatedWrench size={48} color={defaultConfig?.color || theme?.primary || getColor('primary')} />;
+  const finalColor = defaultConfig?.color || theme?.primary || getColor('primary');
+  const badge = defaultConfig?.badge;
+
+  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>
+
+          {/* Countdown (optional) */}
+          {timeRemaining && showCountdown && (
+            <View style={[styles.countdownContainer, { backgroundColor: getColorWithOpacity(finalColor, 0.1) }]}>
+              <Text style={styles.countdownLabel}>Estimated time remaining</Text>
+              <Text style={[styles.countdownTime, { color: finalColor }]}>
+                {timeRemaining}
+              </Text>
+            </View>
+          )}
+
+          {/* Action Buttons */}
+          <View style={styles.buttonsContainer}>
+            {onRetry && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: finalColor }]}
+                onPress={onRetry}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.primaryButtonText}>{retryButtonText}</Text>
+              </TouchableOpacity>
+            )}
+
+            {onNotifyMe && (
+              <TouchableOpacity
+                style={[styles.button, styles.secondaryButton, { borderColor: finalColor }]}
+                onPress={onNotifyMe}
+                activeOpacity={0.8}
+              >
+                <Text style={[styles.secondaryButtonText, { color: finalColor }]}>
+                  {notifyButtonText}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {/* Support Contact (optional) */}
+          {support && (
+            <View style={styles.supportContainer}>
+              <SupportButtons
+                support={support}
+                variant={supportVariant || 'combined'}
+                theme={theme}
+              />
+            </View>
+          )}
+        </Animated.View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  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,
+  },
+  countdownContainer: {
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 24,
+    alignItems: 'center',
+    width: '100%',
+  },
+  countdownLabel: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 8,
+  },
+  countdownTime: {
+    fontSize: 32,
+    fontWeight: '700',
+  },
+  buttonsContainer: {
+    width: '100%',
+    marginBottom: 16,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    width: '100%',
+    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',
+  },
+  supportContainer: {
+    width: '100%',
+    marginTop: 8,
+  },
+});