@codeimplants/ui-kit 1.0.0

package/src/screens/errors/ServerErrorScreen.tsx

@@ -0,0 +1,139 @@
+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 AnimatedServerError from '../../components/icons/animated/errors/AnimatedServerError';
+import { getColor } from '../../utils/client';
+import type { ServerErrorScreenProps } from '../../types';
+
+/**
+ * Server Error Screen (5xx errors)
+ * 
+ * Displayed when the server encounters an error.
+ */
+
+export const ServerErrorScreen: React.FC<ServerErrorScreenProps> = ({
+  title,
+  description,
+  statusCode = 500,
+  onRetry,
+  onHome,
+  retryButtonText = 'Try Again',
+  homeButtonText = 'Go Home',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const errorColor = primaryColor || theme?.error || getColor('error');
+
+  // Get default content based on status code
+  const getDefaultContent = () => {
+    switch (statusCode) {
+      case 502:
+        return {
+          title: 'Bad Gateway',
+          description: 'The server received an invalid response. Please try again in a moment.',
+        };
+      case 503:
+        return {
+          title: 'Service Unavailable',
+          description: 'The server is temporarily unable to handle your request. Please try again later.',
+        };
+      case 504:
+        return {
+          title: 'Gateway Timeout',
+          description: 'The server took too long to respond. Please try again.',
+        };
+      default:
+        return {
+          title: 'Server Error',
+          description: 'Something went wrong on our end. We\'re working to fix it.',
+        };
+    }
+  };
+
+  const defaultContent = getDefaultContent();
+  const finalTitle = title || defaultContent.title;
+  const finalDescription = description || defaultContent.description;
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedServerError size={48} color={errorColor} />}
+        iconBackgroundColor="#FEE2E2"
+        badge={<Text style={styles.badgeIcon}>!</Text>}
+        badgeBackgroundColor={errorColor}
+      />
+
+      {/* Status code badge */}
+      <StatusBadge
+        text={`Error ${statusCode}`}
+        backgroundColor="#FEE2E2"
+        textColor={errorColor}
+      />
+
+      {/* 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>
+
+      {/* 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 */}
+      {onRetry && (
+        <PrimaryButton onPress={onRetry} backgroundColor={errorColor}>
+          {retryButtonText}
+        </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 ServerErrorScreen;

package/src/screens/errors/index.ts

@@ -0,0 +1,6 @@
+// Error Screens - Barrel Export
+export { ErrorBoundaryScreen } from './ErrorBoundaryScreen';
+export { ServerErrorScreen } from './ServerErrorScreen';
+export { ClientErrorScreen } from './ClientErrorScreen';
+export { InvalidResponseScreen } from './InvalidResponseScreen';
+export { ApiErrorScreen } from './ApiErrorScreen';

package/src/screens/index.ts

@@ -0,0 +1,5 @@
+// All Screens - Barrel Export
+export * from './errors';
+export * from './network';
+export * from './permissions';
+export * from './system';

package/src/screens/network/ApiTimeoutScreen.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 AnimatedTimeout from '../../components/icons/animated/network/AnimatedTimeout';
+import { getColor } from '../../utils/client';
+import type { ApiTimeoutScreenProps } from '../../types';
+
+/**
+ * API Timeout Screen
+ * 
+ * Displayed when an API request times out.
+ */
+
+export const ApiTimeoutScreen: React.FC<ApiTimeoutScreenProps> = ({
+  title = 'Request Timed Out',
+  description = 'The server took too long to respond. Please try again.',
+  onRetry,
+  onHome,
+  retryButtonText = 'Try Again',
+  homeButtonText = 'Go Home',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedTimeout size={48} color={warningColor} />}
+        iconBackgroundColor="#FED7AA"
+        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 happened card */}
+      <ContentCard title="What happened?">
+        <Text style={styles.cardText}>
+          The request took longer than expected. This could be due to slow network or server issues.
+        </Text>
+      </ContentCard>
+
+      {/* Action buttons */}
+      {onRetry && (
+        <PrimaryButton onPress={onRetry} backgroundColor={warningColor}>
+          {retryButtonText}
+        </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,
+  },
+  cardText: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default ApiTimeoutScreen;

package/src/screens/network/NetworkOfflineScreen.tsx

@@ -0,0 +1,92 @@
+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 AnimatedWifiOff from '../../components/icons/animated/network/AnimatedWifiOff';
+import { getColor } from '../../utils/client';
+import type { NetworkOfflineScreenProps } from '../../types';
+
+/**
+ * Network Offline Screen
+ * 
+ * Displayed when the device has no internet connection.
+ */
+
+export const NetworkOfflineScreen: React.FC<NetworkOfflineScreenProps> = ({
+  title = 'No Internet Connection',
+  description = 'Please check your connection and try again.',
+  onRetry,
+  retryButtonText = 'Try Again',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedWifiOff 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>
+
+      {/* Quick tips card */}
+      <ContentCard title="Quick tips">
+        <CheckListItem text="Check your WiFi or mobile data" />
+        <CheckListItem text="Try turning airplane mode off" />
+        <CheckListItem text="Move to an area with better signal" />
+      </ContentCard>
+
+      {/* Action button */}
+      {onRetry && (
+        <PrimaryButton onPress={onRetry} backgroundColor={warningColor}>
+          {retryButtonText}
+        </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,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default NetworkOfflineScreen;

package/src/screens/network/NetworkSlowConnectionScreen.tsx

@@ -0,0 +1,92 @@
+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 AnimatedSpeedGauge from '../../components/icons/animated/network/AnimatedSpeedGauge';
+import { getColor } from '../../utils/client';
+import type { NetworkSlowConnectionScreenProps } from '../../types';
+
+/**
+ * Network Slow Connection Screen
+ * 
+ * Displayed when the network connection is slow.
+ */
+
+export const NetworkSlowConnectionScreen: React.FC<NetworkSlowConnectionScreenProps> = ({
+  title = 'Slow Connection Detected',
+  description = 'Your internet connection is slower than usual. You can continue or wait for a better connection.',
+  onContinue,
+  onRetry,
+  continueButtonText = 'Continue Anyway',
+  retryButtonText = 'Try Again',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedSpeedGauge 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>
+
+      {/* Action buttons */}
+      {onContinue && (
+        <PrimaryButton onPress={onContinue} backgroundColor={warningColor}>
+          {continueButtonText}
+        </PrimaryButton>
+      )}
+
+      {onRetry && (
+        <SecondaryButton onPress={onRetry}>
+          {retryButtonText}
+        </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 NetworkSlowConnectionScreen;

package/src/screens/network/index.ts

@@ -0,0 +1,4 @@
+// Network Screens - Barrel Export
+export { NetworkOfflineScreen } from './NetworkOfflineScreen';
+export { NetworkSlowConnectionScreen } from './NetworkSlowConnectionScreen';
+export { ApiTimeoutScreen } from './ApiTimeoutScreen';

package/src/screens/permissions/PermissionDeniedScreen.tsx

@@ -0,0 +1,176 @@
+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 ContentCard from '../../components/cards/ContentCard';
+import PrimaryButton from '../../components/buttons/PrimaryButton';
+import SecondaryButton from '../../components/buttons/SecondaryButton';
+import AnimatedPermissionDenied from '../../components/icons/animated/permissions/AnimatedPermissionDenied';
+import { getColor } from '../../utils/client';
+import type { PermissionDeniedScreenProps } from '../../types';
+
+/**
+ * Permission Denied Screen
+ * 
+ * Displayed when a permission has been denied and needs to be enabled from settings.
+ */
+
+export const PermissionDeniedScreen: React.FC<PermissionDeniedScreenProps> = ({
+  title = 'Location Access Blocked',
+  description = 'Find nearby services and stores',
+  permissionType = 'location',
+  reason,
+  steps,
+  onOpenSettings,
+  onContinueWithout,
+  settingsButtonText = 'Open Settings',
+  continueButtonText = 'Continue Without This Feature',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const warningColor = primaryColor || theme?.warning || getColor('warning');
+
+  const defaultSteps = [
+    'Open your device Settings',
+    'Go to Apps or Application Manager',
+    'Find and select this app',
+    `Tap Permissions and enable ${permissionType}`,
+  ];
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedPermissionDenied size={48} color={warningColor} />}
+        iconBackgroundColor="#FED7AA"
+        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>
+
+      {/* Why we need this card */}
+      <ContentCard title="Why we need this permission">
+        <Text style={styles.cardText}>
+          {reason || `We use your ${permissionType} to show nearby options and provide location-based features.`}
+        </Text>
+      </ContentCard>
+
+      {/* Permission Denied card */}
+      <ContentCard style={styles.warningCard}>
+        <View style={styles.warningHeader}>
+          <Text style={styles.warningIcon}>⚠️</Text>
+          <Text style={styles.warningTitle}>Permission Denied</Text>
+        </View>
+        <Text style={styles.warningText}>
+          You previously denied this permission. Please enable it from your device settings:
+        </Text>
+        {(steps || defaultSteps).map((step, index) => (
+          <Text key={index} style={styles.stepText}>
+            {index + 1}. {step}
+          </Text>
+        ))}
+      </ContentCard>
+
+      {/* Security assurance card */}
+      <ContentCard style={styles.securityCard}>
+        <Text style={styles.securityText}>
+          ✓ Your data is secure. We only use this permission for the stated purpose and never share it with third parties.
+        </Text>
+      </ContentCard>
+
+      {/* Action buttons */}
+      {onOpenSettings && (
+        <PrimaryButton onPress={onOpenSettings} backgroundColor={warningColor}>
+          {settingsButtonText}
+        </PrimaryButton>
+      )}
+
+      {onContinueWithout && (
+        <SecondaryButton onPress={onContinueWithout}>
+          {continueButtonText}
+        </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,
+  },
+  warningCard: {
+    backgroundColor: '#FEF3C7',
+    borderColor: '#FCD34D',
+  },
+  warningHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  warningIcon: {
+    fontSize: 20,
+    marginRight: 8,
+  },
+  warningTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#92400E',
+  },
+  warningText: {
+    fontSize: 14,
+    color: '#92400E',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  stepText: {
+    fontSize: 14,
+    color: '#92400E',
+    lineHeight: 20,
+    marginBottom: 4,
+  },
+  securityCard: {
+    backgroundColor: '#D1FAE5',
+    borderColor: '#6EE7B7',
+  },
+  securityText: {
+    fontSize: 14,
+    color: '#065F46',
+    lineHeight: 20,
+  },
+  badgeIcon: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '700',
+  },
+});
+
+export default PermissionDeniedScreen;