@codeimplants/ui-kit 1.0.0

package/src/screens/errors/ApiErrorScreen.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  Animated,
+} from 'react-native';
+import PrimaryButton from '../../components/buttons/PrimaryButton';
+import SupportButtons from '../../components/support/SupportButtons';
+import AnimatedServerError from '../../components/icons/animated/errors/AnimatedServerError';
+import AnimatedAlert from '../../components/icons/animated/maintenance/AnimatedAlert';
+import AnimatedTimeout from '../../components/icons/animated/network/AnimatedTimeout';
+import { getColor, getColorWithOpacity } from '../../utils/client';
+import type { ApiErrorScreenProps, ApiErrorType } from '../../types';
+
+/**
+ * Error configurations matching error-ui-kit design
+ */
+const errorConfigs: Record<
+  ApiErrorType,
+  {
+    icon: React.ComponentType<{ size?: number; color?: string }>;
+    title: string;
+    description: string;
+    color: string;
+    bgColor: string;
+  }
+> = {
+  timeout: {
+    icon: AnimatedTimeout,
+    title: 'Request Timed Out',
+    description:
+      'The server is taking too long to respond. This might be due to high traffic or slow connection.',
+    color: getColor('warning'),
+    bgColor: getColorWithOpacity(getColor('warning'), 0.1),
+  },
+  server_error: {
+    icon: AnimatedServerError,
+    title: 'Server Error',
+    description:
+      'Something went wrong on our end. Our team has been notified and is working on a fix.',
+    color: getColor('error'),
+    bgColor: getColorWithOpacity(getColor('error'), 0.1),
+  },
+  client_error: {
+    icon: AnimatedAlert,
+    title: 'Request Failed',
+    description:
+      'There was an issue with your request. Please try again or contact support if the problem persists.',
+    color: getColor('error'),
+    bgColor: getColorWithOpacity(getColor('error'), 0.1),
+  },
+  invalid_response: {
+    icon: AnimatedAlert,
+    title: 'Invalid Response',
+    description:
+      'We received an unexpected response from the server. This is usually temporary.',
+    color: getColor('warning'),
+    bgColor: getColorWithOpacity(getColor('warning'), 0.1),
+  },
+  network_error: {
+    icon: AnimatedAlert,
+    title: 'Connection Error',
+    description:
+      'Unable to reach our servers. Please check your internet connection.',
+    color: getColor('offline'),
+    bgColor: getColorWithOpacity(getColor('offline'), 0.1),
+  },
+};
+
+/**
+ * ApiErrorScreen Component
+ * 100% design fidelity port from error-ui-kit
+ */
+export const ApiErrorScreen: React.FC<ApiErrorScreenProps> = ({
+  // Content customization
+  title,
+  description,
+  icon,
+  iconColor,
+  iconBackgroundColor,
+
+  // Actions
+  onRetry,
+
+  // Button configuration
+  retryButtonText = 'Try Again',
+  showRetryButton = true,
+
+  // Support
+  support,
+  supportVariant = 'icon-only',
+
+  // Additional info
+  statusCode,
+  errorCode,
+  errorType = 'server_error',
+
+  // Styling
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const config = errorConfigs[errorType];
+  const IconComponent = icon || config.icon;
+
+  const finalIconColor = iconColor || theme?.error || config.color;
+  const finalIconBgColor =
+    iconBackgroundColor || theme?.surface || config.bgColor;
+  const finalPrimaryColor = primaryColor || theme?.primary || getColor('primary');
+  const finalBgColor = backgroundColor || theme?.background || '#FFFFFF';
+
+  // Animation values
+  const scaleAnim = React.useRef(new Animated.Value(0)).current;
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    Animated.parallel([
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        tension: 50,
+        friction: 7,
+        useNativeDriver: true,
+      }),
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  return (
+    <ScrollView
+      style={[styles.container, { backgroundColor: finalBgColor }]}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <Animated.View
+        style={[
+          styles.content,
+          {
+            opacity: fadeAnim,
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      >
+        {/* Error Icon */}
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: finalIconBgColor },
+          ]}
+        >
+          {typeof IconComponent === 'function' ? (
+            <IconComponent size={40} color={finalIconColor} />
+          ) : (
+            IconComponent
+          )}
+        </View>
+
+        {/* Status Code Badge */}
+        {statusCode && (
+          <View
+            style={[
+              styles.badge,
+              { backgroundColor: finalIconBgColor },
+            ]}
+          >
+            <Text
+              style={[
+                styles.badgeText,
+                { color: finalIconColor },
+              ]}
+            >
+              Error {statusCode}
+            </Text>
+          </View>
+        )}
+
+        {/* Title */}
+        <Text style={[styles.title, theme?.textPrimary ? { color: theme.textPrimary } : undefined]}>
+          {title || config.title}
+        </Text>
+
+        {/* Description */}
+        <Text style={[styles.description, theme?.textSecondary ? { color: theme.textSecondary } : undefined]}>
+          {description || config.description}
+        </Text>
+
+        {/* Retry Button */}
+        {showRetryButton && onRetry && (
+          <View style={styles.buttonContainer}>
+            <PrimaryButton
+              onPress={onRetry}
+              backgroundColor={finalPrimaryColor}
+            >
+              {retryButtonText}
+            </PrimaryButton>
+          </View>
+        )}
+
+        {/* Support Contact */}
+        {support && (
+          <View style={styles.supportContainer}>
+            <SupportButtons
+              support={support}
+              variant={supportVariant}
+              theme={theme}
+            />
+          </View>
+        )}
+      </Animated.View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  content: {
+    maxWidth: 400,
+    width: '100%',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  badge: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    marginBottom: 16,
+  },
+  badgeText: {
+    fontSize: 14,
+    fontWeight: '600',
+    fontFamily: 'monospace',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 12,
+    color: '#111827',
+  },
+  description: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 24,
+    color: '#6B7280',
+    lineHeight: 24,
+  },
+  buttonContainer: {
+    width: '100%',
+    marginBottom: 24,
+  },
+  retryButton: {
+    width: '100%',
+  },
+  supportContainer: {
+    marginTop: 8,
+  },
+});

package/src/screens/errors/ClientErrorScreen.tsx

@@ -0,0 +1,135 @@
+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 PrimaryButton from '../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../components/buttons/SecondaryButton';
+import AnimatedClientError from '../../components/icons/animated/errors/AnimatedClientError';
+import { getColor } from '../../utils/client';
+import type { ClientErrorScreenProps } from '../../types';
+
+/**
+ * Client Error Screen (4xx errors)
+ * 
+ * Displayed when the client makes an invalid request.
+ */
+
+export const ClientErrorScreen: React.FC<ClientErrorScreenProps> = ({
+  title,
+  description,
+  statusCode = 404,
+  onGoBack,
+  onHome,
+  goBackButtonText = 'Go Back',
+  homeButtonText = 'Go Home',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  // Get default content based on status code
+  const getDefaultContent = () => {
+    switch (statusCode) {
+      case 400:
+        return {
+          title: 'Bad Request',
+          description: 'The request could not be understood. Please check and try again.',
+        };
+      case 401:
+        return {
+          title: 'Unauthorized',
+          description: 'You need to sign in to access this resource.',
+        };
+      case 403:
+        return {
+          title: 'Access Denied',
+          description: 'You don\'t have permission to access this resource.',
+        };
+      case 404:
+        return {
+          title: 'Page Not Found',
+          description: 'The page you\'re looking for doesn\'t exist or has been moved.',
+        };
+      default:
+        return {
+          title: 'Client Error',
+          description: 'There was a problem with your request. Please try again.',
+        };
+    }
+  };
+
+  const defaultContent = getDefaultContent();
+  const finalTitle = title || defaultContent.title;
+  const finalDescription = description || defaultContent.description;
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedClientError size={48} color={warningColor} />}
+        iconBackgroundColor="#FED7AA"
+        badge={<Text style={styles.badgeIcon}>!</Text>}
+        badgeBackgroundColor={warningColor}
+      />
+
+      {/* Status code badge */}
+      <StatusBadge
+        text={`Error ${statusCode}`}
+        backgroundColor="#FED7AA"
+        textColor={warningColor}
+      />
+
+      {/* 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>
+
+      {/* Action buttons */}
+      {onGoBack && (
+        <PrimaryButton onPress={onGoBack} backgroundColor={warningColor}>
+          {goBackButtonText}
+        </PrimaryButton>
+      )}
+
+      {onHome && (
+        <SecondaryButton onPress={onHome}>
+          {homeButtonText}
+        </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: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default ClientErrorScreen;

package/src/screens/errors/ErrorBoundaryScreen.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 AnimatedCrash from '../../components/icons/animated/errors/AnimatedCrash';
+import { getColor } from '../../utils/client';
+import type { ErrorFallbackProps } from '../../types';
+
+/**
+ * App Crash Screen (Error Boundary Screen)
+ * 
+ * Displayed when the app encounters an unhandled error.
+ */
+
+export const ErrorBoundaryScreen: React.FC<ErrorFallbackProps> = ({
+  title = 'Something Went Wrong',
+  description = 'The app encountered an unexpected error. We apologize for the inconvenience.',
+  onReset,
+  onHome,
+  resetButtonText = 'Restart App',
+  homeButtonText = 'Go Home',
+  support,
+  theme,
+}) => {
+  const errorColor = theme?.error || getColor('error');
+
+  return (
+    <ScreenContainer backgroundColor={theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedCrash size={48} color={errorColor} />}
+        iconBackgroundColor="#FEE2E2"
+        badge={<Text style={styles.badgeIcon}>✕</Text>}
+        badgeBackgroundColor={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>
+
+      {/* What happened card */}
+      <ContentCard title="What happened?">
+        <CheckListItem text="An unexpected error occurred" />
+        <CheckListItem text="Your data is safe" />
+        <CheckListItem text="Restarting should fix the issue" />
+      </ContentCard>
+
+      {/* Action buttons */}
+      {onReset && (
+        <PrimaryButton onPress={onReset} backgroundColor={errorColor}>
+          {resetButtonText}
+        </PrimaryButton>
+      )}
+
+      {onHome && (
+        <SecondaryButton onPress={onHome}>
+          {homeButtonText}
+        </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: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default ErrorBoundaryScreen;

package/src/screens/errors/InvalidResponseScreen.tsx

@@ -0,0 +1,104 @@
+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 AnimatedInvalidData from '../../components/icons/animated/errors/AnimatedInvalidData';
+import { getColor } from '../../utils/client';
+import type { InvalidResponseScreenProps } from '../../types';
+
+/**
+ * Invalid Response Screen
+ * 
+ * Displayed when the server returns invalid or corrupted data.
+ */
+
+export const InvalidResponseScreen: React.FC<InvalidResponseScreenProps> = ({
+  title = 'Invalid Response',
+  description = 'The server returned data that couldn\'t be processed. Please try again.',
+  onRetry,
+  onReportError,
+  retryButtonText = 'Try Again',
+  reportButtonText = 'Report Issue',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const errorColor = primaryColor || theme?.error || getColor('error');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedInvalidData size={48} color={errorColor} />}
+        iconBackgroundColor="#FEE2E2"
+        badge={<Text style={styles.badgeIcon}>?</Text>}
+        badgeBackgroundColor={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>
+
+      {/* What happened card */}
+      <ContentCard title="What happened?">
+        <Text style={styles.cardText}>
+          The data received from the server was invalid or corrupted. This is usually a temporary issue.
+        </Text>
+      </ContentCard>
+
+      {/* Action buttons */}
+      {onRetry && (
+        <PrimaryButton onPress={onRetry} backgroundColor={errorColor}>
+          {retryButtonText}
+        </PrimaryButton>
+      )}
+
+      {onReportError && (
+        <SecondaryButton onPress={onReportError}>
+          {reportButtonText}
+        </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,
+  },
+  cardText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default InvalidResponseScreen;