@sudobility/entity-components-rn 1.0.1

package/src/EntitySelector.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, Modal, FlatList, Image } from 'react-native';
+import type { EntitySelectorProps, Entity } from './types';
+
+/**
+ * EntitySelector - Dropdown/Pressable selector for switching entities
+ */
+export const EntitySelector: React.FC<EntitySelectorProps> = ({
+  entities,
+  selectedEntity,
+  onSelect,
+  placeholder = 'Select an entity',
+  disabled = false,
+  loading = false,
+  showAvatars = true,
+  showRoles = false,
+  className = '',
+  style,
+  testID,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    if (!disabled && !loading) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleSelect = (entity: Entity) => {
+    onSelect(entity);
+    handleClose();
+  };
+
+  const renderAvatar = (entity: Entity, size: 'sm' | 'md' = 'md') => {
+    const sizeClasses = size === 'sm' ? 'w-8 h-8' : 'w-10 h-10';
+    const textSize = size === 'sm' ? 'text-sm' : 'text-base';
+
+    if (entity.avatarUrl) {
+      return (
+        <Image
+          source={{ uri: entity.avatarUrl }}
+          className={`${sizeClasses} rounded-full bg-gray-200 dark:bg-gray-600`}
+          accessibilityIgnoresInvertColors
+        />
+      );
+    }
+
+    return (
+      <View
+        className={`${sizeClasses} rounded-full bg-gray-200 dark:bg-gray-600 items-center justify-center`}
+      >
+        <Text
+          className={`${textSize} font-semibold text-gray-600 dark:text-gray-300`}
+        >
+          {entity.name.charAt(0).toUpperCase()}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderItem = ({ item }: { item: Entity }) => (
+    <Pressable
+      onPress={() => handleSelect(item)}
+      className={`
+        flex-row items-center px-4 py-3
+        ${selectedEntity?.id === item.id ? 'bg-blue-50 dark:bg-blue-900/30' : ''}
+        active:bg-gray-100 dark:active:bg-gray-700
+      `}
+      accessibilityRole='button'
+      accessibilityLabel={`Select ${item.name}`}
+      accessibilityState={{ selected: selectedEntity?.id === item.id }}
+    >
+      {showAvatars && <View className='mr-3'>{renderAvatar(item, 'sm')}</View>}
+      <View className='flex-1'>
+        <Text
+          className='text-base text-gray-900 dark:text-white'
+          numberOfLines={1}
+        >
+          {item.name}
+        </Text>
+        {showRoles && item.role && (
+          <Text className='text-xs text-gray-500 dark:text-gray-400 capitalize'>
+            {item.role}
+          </Text>
+        )}
+      </View>
+      {selectedEntity?.id === item.id && (
+        <Text className='text-blue-500 dark:text-blue-400 text-lg'>✓</Text>
+      )}
+    </Pressable>
+  );
+
+  return (
+    <View className={className} style={style} testID={testID}>
+      {/* Trigger Button */}
+      <Pressable
+        onPress={handleOpen}
+        disabled={disabled || loading}
+        className={`
+          flex-row items-center px-4 py-3 rounded-xl
+          bg-white dark:bg-gray-800
+          border border-gray-200 dark:border-gray-700
+          ${disabled ? 'opacity-50' : ''}
+          active:opacity-80
+        `}
+        accessibilityRole='button'
+        accessibilityLabel={
+          selectedEntity ? `Selected: ${selectedEntity.name}` : placeholder
+        }
+        accessibilityState={{ disabled }}
+      >
+        {loading ? (
+          <View className='flex-row items-center'>
+            <Text className='text-gray-500 dark:text-gray-400'>Loading...</Text>
+          </View>
+        ) : selectedEntity ? (
+          <>
+            {showAvatars && (
+              <View className='mr-3'>{renderAvatar(selectedEntity)}</View>
+            )}
+            <View className='flex-1'>
+              <Text
+                className='text-base font-medium text-gray-900 dark:text-white'
+                numberOfLines={1}
+              >
+                {selectedEntity.name}
+              </Text>
+              {showRoles && selectedEntity.role && (
+                <Text className='text-xs text-gray-500 dark:text-gray-400 capitalize'>
+                  {selectedEntity.role}
+                </Text>
+              )}
+            </View>
+          </>
+        ) : (
+          <Text className='flex-1 text-gray-500 dark:text-gray-400'>
+            {placeholder}
+          </Text>
+        )}
+        <Text className='text-gray-400 dark:text-gray-500 text-lg ml-2'>▼</Text>
+      </Pressable>
+
+      {/* Dropdown Modal */}
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType='fade'
+        onRequestClose={handleClose}
+      >
+        <Pressable
+          onPress={handleClose}
+          className='flex-1 bg-black/50 justify-center px-4'
+        >
+          <Pressable
+            onPress={e => e.stopPropagation()}
+            className='bg-white dark:bg-gray-800 rounded-2xl overflow-hidden max-h-96'
+          >
+            {/* Header */}
+            <View className='px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
+              <Text className='text-lg font-semibold text-gray-900 dark:text-white'>
+                Select Entity
+              </Text>
+            </View>
+
+            {/* List */}
+            <FlatList
+              data={entities}
+              renderItem={renderItem}
+              keyExtractor={item => item.id}
+              showsVerticalScrollIndicator={false}
+              ListEmptyComponent={
+                <View className='py-8 items-center'>
+                  <Text className='text-gray-500 dark:text-gray-400'>
+                    No entities available
+                  </Text>
+                </View>
+              }
+            />
+
+            {/* Cancel Button */}
+            <Pressable
+              onPress={handleClose}
+              className='px-4 py-3 border-t border-gray-200 dark:border-gray-700 items-center active:bg-gray-100 dark:active:bg-gray-700'
+            >
+              <Text className='text-blue-500 dark:text-blue-400 font-medium'>
+                Cancel
+              </Text>
+            </Pressable>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+};
+
+export default EntitySelector;

package/src/InvitationForm.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ActivityIndicator,
+} from 'react-native';
+import type { InvitationFormProps, EntityRole } from './types';
+import { MemberRoleSelector } from './MemberRoleSelector';
+
+/**
+ * Validate email format
+ */
+const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * InvitationForm - Form for inviting members with email input and role selector
+ */
+export const InvitationForm: React.FC<InvitationFormProps> = ({
+  onSubmit,
+  availableRoles = ['admin', 'member', 'viewer', 'guest'],
+  defaultRole = 'member',
+  loading = false,
+  disabled = false,
+  placeholder = 'Enter email address',
+  submitLabel = 'Send Invitation',
+  className = '',
+  style,
+  testID,
+}) => {
+  const [email, setEmail] = useState('');
+  const [selectedRole, setSelectedRole] = useState<EntityRole>(defaultRole);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleEmailChange = (text: string) => {
+    setEmail(text);
+    if (error) {
+      setError(null);
+    }
+  };
+
+  const handleSubmit = async () => {
+    // Validate email
+    const trimmedEmail = email.trim();
+
+    if (!trimmedEmail) {
+      setError('Email address is required');
+      return;
+    }
+
+    if (!isValidEmail(trimmedEmail)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await onSubmit(trimmedEmail, selectedRole);
+      // Clear form on success
+      setEmail('');
+      setSelectedRole(defaultRole);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to send invitation'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const isDisabled = disabled || loading || isSubmitting;
+  const canSubmit = email.trim().length > 0 && !isDisabled;
+
+  return (
+    <View className={`${className}`} style={style} testID={testID}>
+      {/* Email Input */}
+      <View className='mb-4'>
+        <Text className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+          Email Address
+        </Text>
+        <TextInput
+          value={email}
+          onChangeText={handleEmailChange}
+          placeholder={placeholder}
+          placeholderTextColor='#9CA3AF'
+          keyboardType='email-address'
+          autoCapitalize='none'
+          autoCorrect={false}
+          autoComplete='email'
+          editable={!isDisabled}
+          className={`
+            px-4 py-3 rounded-xl
+            bg-white dark:bg-gray-800
+            border ${error ? 'border-red-500' : 'border-gray-200 dark:border-gray-700'}
+            text-gray-900 dark:text-white
+            ${isDisabled ? 'opacity-50' : ''}
+          `}
+          accessibilityLabel='Email address input'
+          accessibilityHint='Enter the email address of the person you want to invite'
+        />
+        {error && (
+          <Text className='text-sm text-red-500 dark:text-red-400 mt-1'>
+            {error}
+          </Text>
+        )}
+      </View>
+
+      {/* Role Selector */}
+      <View className='mb-4'>
+        <Text className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+          Role
+        </Text>
+        <MemberRoleSelector
+          selectedRole={selectedRole}
+          onRoleChange={setSelectedRole}
+          availableRoles={availableRoles}
+          disabled={isDisabled}
+          showDescriptions
+        />
+      </View>
+
+      {/* Submit Button */}
+      <Pressable
+        onPress={handleSubmit}
+        disabled={!canSubmit}
+        className={`
+          flex-row items-center justify-center px-6 py-4 rounded-xl
+          ${canSubmit ? 'bg-blue-500 dark:bg-blue-600 active:bg-blue-600 dark:active:bg-blue-700' : 'bg-gray-300 dark:bg-gray-600'}
+        `}
+        accessibilityRole='button'
+        accessibilityLabel={submitLabel}
+        accessibilityState={{ disabled: !canSubmit }}
+      >
+        {isSubmitting ? (
+          <>
+            <ActivityIndicator size='small' color='#FFFFFF' />
+            <Text className='text-white font-semibold ml-2'>Sending...</Text>
+          </>
+        ) : (
+          <Text
+            className={`font-semibold ${canSubmit ? 'text-white' : 'text-gray-500 dark:text-gray-400'}`}
+          >
+            {submitLabel}
+          </Text>
+        )}
+      </Pressable>
+
+      {/* Help Text */}
+      <Text className='text-xs text-gray-500 dark:text-gray-400 mt-3 text-center'>
+        The invitee will receive an email with instructions to join.
+      </Text>
+    </View>
+  );
+};
+
+export default InvitationForm;

package/src/InvitationList.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  Pressable,
+  ActivityIndicator,
+  RefreshControl,
+} from 'react-native';
+import type { InvitationListProps, Invitation, EntityRole } from './types';
+import { DEFAULT_ROLE_CONFIGS } from './types';
+
+/**
+ * Get role badge color classes
+ */
+const getRoleBadgeClasses = (role: EntityRole): string => {
+  const colorMap: Record<EntityRole, string> = {
+    owner:
+      'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200',
+    admin: 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
+    member: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
+    viewer: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200',
+    guest:
+      'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
+  };
+  return colorMap[role] || colorMap.member;
+};
+
+/**
+ * Get role label
+ */
+const getRoleLabel = (role: EntityRole): string => {
+  const config = DEFAULT_ROLE_CONFIGS.find(c => c.role === role);
+  return config?.label || role;
+};
+
+/**
+ * Get status badge classes
+ */
+const getStatusBadgeClasses = (status: Invitation['status']): string => {
+  const colorMap: Record<Invitation['status'], string> = {
+    pending:
+      'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
+    accepted:
+      'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
+    declined: 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200',
+    expired: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200',
+  };
+  return colorMap[status] || colorMap.pending;
+};
+
+/**
+ * Get status label
+ */
+const getStatusLabel = (status: Invitation['status']): string => {
+  return status.charAt(0).toUpperCase() + status.slice(1);
+};
+
+/**
+ * Format relative time
+ */
+const formatRelativeTime = (dateString: string): string => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+
+  if (diffDays > 0) {
+    return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  } else if (diffHours > 0) {
+    return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  } else if (diffMinutes > 0) {
+    return `${diffMinutes} minute${diffMinutes > 1 ? 's' : ''} ago`;
+  } else {
+    return 'Just now';
+  }
+};
+
+/**
+ * InvitationList - List of pending invitations
+ */
+export const InvitationList: React.FC<InvitationListProps> = ({
+  invitations,
+  onResend,
+  onCancel,
+  canResend = true,
+  canCancel = true,
+  emptyMessage = 'No pending invitations',
+  emptyIcon,
+  loading = false,
+  refreshing = false,
+  onRefresh,
+  ListHeaderComponent,
+  ListFooterComponent,
+  className = '',
+  style,
+  testID,
+}) => {
+  const renderItem = ({ item }: { item: Invitation }) => {
+    const isPending = item.status === 'pending';
+    const showResend = canResend && onResend && isPending;
+    const showCancel = canCancel && onCancel && isPending;
+
+    return (
+      <View
+        className={`
+          p-4 rounded-xl mb-3
+          bg-white dark:bg-gray-800
+          border border-gray-200 dark:border-gray-700
+        `}
+        accessibilityLabel={`Invitation to ${item.email}, Status: ${item.status}`}
+      >
+        {/* Header */}
+        <View className='flex-row items-center justify-between mb-2'>
+          <Text
+            className='text-base font-semibold text-gray-900 dark:text-white flex-1'
+            numberOfLines={1}
+          >
+            {item.email}
+          </Text>
+          <View
+            className={`px-2 py-0.5 rounded-full ${getStatusBadgeClasses(item.status)}`}
+          >
+            <Text className='text-xs font-medium'>
+              {getStatusLabel(item.status)}
+            </Text>
+          </View>
+        </View>
+
+        {/* Role and Time */}
+        <View className='flex-row items-center mb-2'>
+          <View
+            className={`px-2 py-0.5 rounded-full mr-2 ${getRoleBadgeClasses(item.role)}`}
+          >
+            <Text className='text-xs font-medium'>
+              {getRoleLabel(item.role)}
+            </Text>
+          </View>
+          <Text className='text-xs text-gray-500 dark:text-gray-400'>
+            Invited {formatRelativeTime(item.invitedAt)}
+          </Text>
+        </View>
+
+        {/* Invited by */}
+        {item.invitedBy && (
+          <Text className='text-xs text-gray-500 dark:text-gray-400 mb-2'>
+            by {item.invitedBy}
+          </Text>
+        )}
+
+        {/* Expiration warning */}
+        {item.expiresAt && isPending && (
+          <Text className='text-xs text-yellow-600 dark:text-yellow-400 mb-2'>
+            Expires: {new Date(item.expiresAt).toLocaleDateString()}
+          </Text>
+        )}
+
+        {/* Actions */}
+        {(showResend || showCancel) && (
+          <View className='flex-row items-center mt-2 pt-2 border-t border-gray-100 dark:border-gray-700'>
+            {showResend && (
+              <Pressable
+                onPress={() => onResend(item)}
+                className='flex-row items-center mr-4 py-1 active:opacity-60'
+                accessibilityRole='button'
+                accessibilityLabel='Resend invitation'
+              >
+                <Text className='text-blue-500 dark:text-blue-400 text-sm font-medium'>
+                  Resend
+                </Text>
+              </Pressable>
+            )}
+            {showCancel && (
+              <Pressable
+                onPress={() => onCancel(item)}
+                className='flex-row items-center py-1 active:opacity-60'
+                accessibilityRole='button'
+                accessibilityLabel='Cancel invitation'
+              >
+                <Text className='text-red-500 dark:text-red-400 text-sm font-medium'>
+                  Cancel
+                </Text>
+              </Pressable>
+            )}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const renderEmpty = () => {
+    if (loading) {
+      return (
+        <View className='flex-1 items-center justify-center py-12'>
+          <ActivityIndicator size='large' color='#3B82F6' />
+          <Text className='text-gray-500 dark:text-gray-400 mt-4'>
+            Loading...
+          </Text>
+        </View>
+      );
+    }
+
+    return (
+      <View className='flex-1 items-center justify-center py-12'>
+        {emptyIcon}
+        <Text className='text-gray-500 dark:text-gray-400 text-center mt-2'>
+          {emptyMessage}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <View className={`flex-1 ${className}`} style={style} testID={testID}>
+      <FlatList
+        data={invitations}
+        renderItem={renderItem}
+        keyExtractor={item => item.id}
+        ListHeaderComponent={ListHeaderComponent}
+        ListFooterComponent={ListFooterComponent}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={{ flexGrow: 1, padding: 16 }}
+        showsVerticalScrollIndicator={false}
+        refreshControl={
+          onRefresh ? (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor='#3B82F6'
+            />
+          ) : undefined
+        }
+      />
+    </View>
+  );
+};
+
+export default InvitationList;