@codeimplants/ui-kit 1.0.0

package/src/screens/permissions/PermissionRequestScreen.tsx

@@ -0,0 +1,506 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from 'react-native';
+import { ShieldIcon, SettingsIcon, CheckCircleIcon, AlertTriangleIcon } from '../../components/icons/utilities';
+import { getColor, getColorWithOpacity, isWeb } from '../../utils/client';
+import type { PermissionScreenProps, MultiPermissionScreenProps } from '../../types';
+
+/**
+ * Permission Request Screen Component
+ * 
+ * Fully customizable permission request screen.
+ * All content, icons, actions, and reasons are configurable via props.
+ */
+export const PermissionRequestScreen: React.FC<PermissionScreenProps> = ({
+  // Permission type (for default config)
+  permissionType,
+  
+  // Content customization
+  title,
+  description,
+  icon,
+
+  // Reasons (optional)
+  reasons,
+  showReasons = true,
+
+  // Actions
+  onAllow,
+  onDeny,
+  onOpenSettings,
+  onSkip,
+
+  // Button text
+  allowButtonText = 'Allow',
+  denyButtonText = 'Not Now',
+  settingsButtonText = 'Open Settings',
+  skipButtonText = 'Skip',
+
+  // State
+  status = 'not_requested',
+  isOptional = false,
+
+  // Styling
+  theme,
+}) => {
+  // 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 status and permission
+  const getDefaultConfig = () => {
+    const successColor = theme?.success || getColor('success');
+    const errorColor = theme?.error || getColor('error');
+    const primaryColor = theme?.primary || getColor('primary');
+
+    switch (status) {
+      case 'granted':
+        return {
+          icon: <CheckCircleIcon size={48} color={successColor} />,
+          iconBg: getColorWithOpacity(successColor, 0.1),
+          title: 'Permission Granted',
+          description: `You've granted ${permissionType || 'the requested'} permission.`,
+          color: successColor,
+        };
+      case 'denied':
+      case 'blocked':
+        return {
+          icon: <AlertTriangleIcon size={48} color={errorColor} />,
+          iconBg: getColorWithOpacity(errorColor, 0.1),
+          title: 'Permission Denied',
+          description: `${permissionType || 'This'} permission is required. Please enable it in settings.`,
+          color: errorColor,
+        };
+      default: // not_requested
+        return {
+          icon: <ShieldIcon size={48} color={primaryColor} />,
+          iconBg: getColorWithOpacity(primaryColor, 0.1),
+          title: `${permissionType ? permissionType.charAt(0).toUpperCase() + permissionType.slice(1) : 'Permission'} Required`,
+          description: `We need ${permissionType || 'this'} permission to provide you with the best experience.`,
+          color: primaryColor,
+        };
+    }
+  };
+
+  const defaultConfig = getDefaultConfig();
+
+  // Use custom values or fallback to defaults
+  const finalTitle = title || defaultConfig.title;
+  const finalDescription = description || defaultConfig.description;
+  const finalIcon = icon || defaultConfig.icon;
+  const finalColor = defaultConfig.color;
+
+  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: defaultConfig.iconBg }]}>
+            {finalIcon}
+          </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>
+
+          {/* Optional Badge */}
+          {isOptional && status === 'not_requested' && (
+            <View style={styles.optionalBadge}>
+              <Text style={styles.optionalText}>Optional</Text>
+            </View>
+          )}
+
+          {/* Reasons (optional) */}
+          {showReasons && reasons && reasons.length > 0 && (
+            <View style={styles.reasonsContainer}>
+              <Text style={styles.reasonsTitle}>Why we need this:</Text>
+              {reasons.map((reason, index) => (
+                <View key={index} style={styles.reasonItem}>
+                  <Text style={styles.reasonBullet}>•</Text>
+                  <Text style={styles.reasonText}>{reason}</Text>
+                </View>
+              ))}
+            </View>
+          )}
+
+          {/* Action Buttons */}
+          <View style={styles.buttonsContainer}>
+            {status === 'not_requested' && onAllow && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: finalColor }]}
+                onPress={onAllow}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.primaryButtonText}>{allowButtonText}</Text>
+              </TouchableOpacity>
+            )}
+
+            {(status === 'denied' || status === 'blocked') && onOpenSettings && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: finalColor }]}
+                onPress={onOpenSettings}
+                activeOpacity={0.8}
+              >
+                <SettingsIcon size={20} color="#FFFFFF" />
+                <Text style={styles.primaryButtonText}>{settingsButtonText}</Text>
+              </TouchableOpacity>
+            )}
+
+            {status === 'not_requested' && (onDeny || onSkip) && (
+              <TouchableOpacity
+                style={[styles.button, styles.secondaryButton, { borderColor: finalColor }]}
+                onPress={onDeny || onSkip}
+                activeOpacity={0.8}
+              >
+                <Text style={[styles.secondaryButtonText, { color: finalColor }]}>
+                  {isOptional ? skipButtonText : denyButtonText}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </Animated.View>
+      </ScrollView>
+    </View>
+  );
+};
+
+/**
+ * Multi Permission Request Screen Component
+ * 
+ * Fully customizable multi-permission screen.
+ * All content and permissions are configurable via props.
+ */
+export const MultiPermissionRequestScreen: React.FC<MultiPermissionScreenProps> = ({
+  // Permissions list
+  permissions,
+
+  // Content
+  title = 'Permissions Required',
+  description = 'We need the following permissions to provide you with the best experience',
+
+  // Actions
+  onContinue,
+  onOpenSettings,
+
+  // Button text
+  continueButtonText = 'Continue',
+  settingsButtonText = 'Grant Permissions',
+
+  // Styling
+  theme,
+}) => {
+  // 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();
+  }, []);
+
+  const allGranted = permissions.every(p => p.status === 'granted');
+  const hasRequired = permissions.some(p => p.required && p.status !== 'granted');
+
+  const primaryColor = theme?.primary || getColor('primary');
+  const successColor = theme?.success || getColor('success');
+  const errorColor = theme?.error || getColor('error');
+  const warningColor = theme?.warning || getColor('warning');
+
+  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(primaryColor, 0.1) }]}>
+            <ShieldIcon size={48} color={primaryColor} />
+          </View>
+
+          {/* 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>
+
+          {/* Permissions List */}
+          <View style={styles.permissionsList}>
+            {permissions.map((perm, index) => (
+              <View key={index} style={styles.permissionItem}>
+                <View style={styles.permissionInfo}>
+                  {perm.icon || (
+                    <Text style={styles.permissionName}>
+                      {perm.title || (perm.type ? perm.type.charAt(0).toUpperCase() + perm.type.slice(1) : 'Permission')}
+                    </Text>
+                  )}
+                  {perm.description && (
+                    <Text style={styles.permissionDesc}>{perm.description}</Text>
+                  )}
+                  {!perm.required && (
+                    <Text style={styles.permissionOptional}>Optional</Text>
+                  )}
+                </View>
+                <View style={styles.permissionStatus}>
+                  {perm.status === 'granted' ? (
+                    <CheckCircleIcon size={24} color={successColor} />
+                  ) : (
+                    <View style={[styles.permissionBadge, { backgroundColor: perm.required ? getColorWithOpacity(errorColor, 0.1) : getColorWithOpacity(warningColor, 0.1) }]}>
+                      <Text style={[styles.permissionBadgeText, { color: perm.required ? errorColor : warningColor }]}>
+                        {perm.status === 'denied' || perm.status === 'blocked' ? 'Denied' : 'Required'}
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              </View>
+            ))}
+          </View>
+
+          {/* Action Buttons */}
+          <View style={styles.buttonsContainer}>
+            {!allGranted && hasRequired && onOpenSettings && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: primaryColor }]}
+                onPress={onOpenSettings}
+                activeOpacity={0.8}
+              >
+                <SettingsIcon size={20} color="#FFFFFF" />
+                <Text style={styles.primaryButtonText}>{settingsButtonText}</Text>
+              </TouchableOpacity>
+            )}
+
+            {onContinue && !hasRequired && (
+              <TouchableOpacity
+                style={[styles.button, styles.primaryButton, { backgroundColor: primaryColor }]}
+                onPress={onContinue}
+                activeOpacity={0.8}
+              >
+                <Text style={styles.primaryButtonText}>{continueButtonText}</Text>
+              </TouchableOpacity>
+            )}
+          </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: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#1F2937',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    color: '#6B7280',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 24,
+  },
+  optionalBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  optionalText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+  },
+  reasonsContainer: {
+    width: '100%',
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  reasonsTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 12,
+  },
+  reasonItem: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  reasonBullet: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginRight: 8,
+  },
+  reasonText: {
+    flex: 1,
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  buttonsContainer: {
+    width: '100%',
+  },
+  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',
+  },
+
+  // Multi Permission
+  permissionsList: {
+    width: '100%',
+    marginBottom: 24,
+  },
+  permissionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    backgroundColor: '#F9FAFB',
+    borderRadius: 12,
+    marginBottom: 12,
+  },
+  permissionInfo: {
+    flex: 1,
+    marginRight: 12,
+  },
+  permissionName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    marginBottom: 4,
+  },
+  permissionDesc: {
+    fontSize: 14,
+    color: '#6B7280',
+    lineHeight: 20,
+  },
+  permissionOptional: {
+    fontSize: 12,
+    color: '#9CA3AF',
+    marginTop: 4,
+  },
+  permissionStatus: {
+    alignItems: 'center',
+  },
+  permissionBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  permissionBadgeText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/src/screens/permissions/PermissionScreen.tsx

@@ -0,0 +1,104 @@
+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 AnimatedPermission from '../../components/icons/animated/permissions/AnimatedPermission';
+import { getColor } from '../../utils/client';
+import type { PermissionScreenProps } from '../../types';
+
+/**
+ * Permission Request Screen
+ * 
+ * Displayed when requesting a permission from the user.
+ */
+
+export const PermissionScreen: React.FC<PermissionScreenProps> = ({
+  title = 'Permission Required',
+  description = 'We need your permission to provide you with the best experience.',
+  permissionType = 'location',
+  reason,
+  onAllow,
+  onDeny,
+  allowButtonText = 'Allow',
+  denyButtonText = 'Not Now',
+  support,
+  theme,
+  primaryColor,
+  backgroundColor,
+}) => {
+  const infoColor = primaryColor || theme?.primary || getColor('primary');
+
+  return (
+    <ScreenContainer backgroundColor={backgroundColor || theme?.background}>
+      {/* Icon with badge */}
+      <IconWithBadge
+        icon={<AnimatedPermission 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>
+
+      {/* 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>
+
+      {/* Action buttons */}
+      {onAllow && (
+        <PrimaryButton onPress={onAllow} backgroundColor={infoColor}>
+          {allowButtonText}
+        </PrimaryButton>
+      )}
+
+      {onDeny && (
+        <SecondaryButton onPress={onDeny}>
+          {denyButtonText}
+        </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: {
+    fontSize: 16,
+  },
+});
+
+export default PermissionScreen;

package/src/screens/permissions/index.ts

@@ -0,0 +1,4 @@
+// Permission Screens - Barrel Export
+export { PermissionScreen } from './PermissionScreen';
+export { PermissionDeniedScreen } from './PermissionDeniedScreen';
+export { PermissionRequestScreen, MultiPermissionRequestScreen } from './PermissionRequestScreen';

package/src/screens/system/index.ts

@@ -0,0 +1,3 @@
+// System Screens - Barrel Export
+export * from './updates';
+export * from './maintenance';