@sudobility/entity-components-rn 1.0.1

package/src/MemberList.tsx

@@ -0,0 +1,254 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  Pressable,
+  Image,
+  ActivityIndicator,
+  RefreshControl,
+} from 'react-native';
+import type { MemberListProps, Member, 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 indicator color
+ */
+const getStatusColor = (status?: string): string => {
+  switch (status) {
+    case 'active':
+      return 'bg-green-500';
+    case 'inactive':
+      return 'bg-gray-400';
+    case 'pending':
+      return 'bg-yellow-500';
+    default:
+      return 'bg-green-500';
+  }
+};
+
+/**
+ * MemberList - List of entity members with role badges
+ */
+export const MemberList: React.FC<MemberListProps> = ({
+  members,
+  onMemberPress,
+  onRoleChange,
+  onRemoveMember,
+  currentUserRole,
+  canEditRoles = false,
+  canRemoveMembers = false,
+  emptyMessage = 'No members found',
+  emptyIcon,
+  loading = false,
+  refreshing = false,
+  onRefresh,
+  ListHeaderComponent,
+  ListFooterComponent,
+  className = '',
+  style,
+  testID,
+}) => {
+  const canEditMember = (member: Member): boolean => {
+    if (!canEditRoles) return false;
+    if (!currentUserRole) return false;
+
+    // Owners can edit anyone except other owners
+    if (currentUserRole === 'owner' && member.role !== 'owner') return true;
+
+    // Admins can edit members, viewers, and guests
+    if (
+      currentUserRole === 'admin' &&
+      ['member', 'viewer', 'guest'].includes(member.role)
+    )
+      return true;
+
+    return false;
+  };
+
+  const canRemoveMember = (member: Member): boolean => {
+    if (!canRemoveMembers) return false;
+    if (!currentUserRole) return false;
+
+    // Cannot remove owners
+    if (member.role === 'owner') return false;
+
+    // Owners can remove anyone except other owners
+    if (currentUserRole === 'owner') return true;
+
+    // Admins can remove members, viewers, and guests
+    if (
+      currentUserRole === 'admin' &&
+      ['member', 'viewer', 'guest'].includes(member.role)
+    )
+      return true;
+
+    return false;
+  };
+
+  const renderItem = ({ item }: { item: Member }) => (
+    <Pressable
+      onPress={() => onMemberPress?.(item)}
+      disabled={!onMemberPress}
+      className={`
+        flex-row items-center p-4 rounded-xl mb-3
+        bg-white dark:bg-gray-800
+        border border-gray-200 dark:border-gray-700
+        active:opacity-80
+      `}
+      accessibilityRole='button'
+      accessibilityLabel={`Member: ${item.name}, Role: ${item.role}`}
+    >
+      {/* Avatar with status indicator */}
+      <View className='mr-3 relative'>
+        {item.avatarUrl ? (
+          <Image
+            source={{ uri: item.avatarUrl }}
+            className='w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600'
+            accessibilityIgnoresInvertColors
+          />
+        ) : (
+          <View className='w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-600 items-center justify-center'>
+            <Text className='text-lg font-semibold text-gray-600 dark:text-gray-300'>
+              {item.name.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        )}
+        {/* Status indicator */}
+        <View
+          className={`absolute bottom-0 right-0 w-3 h-3 rounded-full ${getStatusColor(item.status)} border-2 border-white dark:border-gray-800`}
+        />
+      </View>
+
+      {/* Content */}
+      <View className='flex-1'>
+        <View className='flex-row items-center flex-wrap'>
+          <Text
+            className='text-base font-semibold text-gray-900 dark:text-white mr-2'
+            numberOfLines={1}
+          >
+            {item.name}
+          </Text>
+          <View
+            className={`px-2 py-0.5 rounded-full ${getRoleBadgeClasses(item.role)}`}
+          >
+            <Text className='text-xs font-medium'>
+              {getRoleLabel(item.role)}
+            </Text>
+          </View>
+        </View>
+        <Text
+          className='text-sm text-gray-600 dark:text-gray-400'
+          numberOfLines={1}
+        >
+          {item.email}
+        </Text>
+        {item.joinedAt && (
+          <Text className='text-xs text-gray-500 dark:text-gray-500 mt-1'>
+            Joined {new Date(item.joinedAt).toLocaleDateString()}
+          </Text>
+        )}
+      </View>
+
+      {/* Actions */}
+      <View className='flex-row items-center ml-2'>
+        {canEditMember(item) && onRoleChange && (
+          <Pressable
+            onPress={() => {}}
+            className='p-2 mr-1 active:opacity-60'
+            accessibilityRole='button'
+            accessibilityLabel='Edit role'
+          >
+            <Text className='text-blue-500 dark:text-blue-400 text-sm'>
+              Edit
+            </Text>
+          </Pressable>
+        )}
+        {canRemoveMember(item) && onRemoveMember && (
+          <Pressable
+            onPress={() => onRemoveMember(item)}
+            className='p-2 active:opacity-60'
+            accessibilityRole='button'
+            accessibilityLabel='Remove member'
+          >
+            <Text className='text-red-500 dark:text-red-400 text-sm'>
+              Remove
+            </Text>
+          </Pressable>
+        )}
+      </View>
+    </Pressable>
+  );
+
+  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={members}
+        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 MemberList;

package/src/MemberRoleSelector.tsx

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { View, Text, Pressable, Modal } from 'react-native';
+import type { MemberRoleSelectorProps, 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;
+};
+
+/**
+ * MemberRoleSelector - Role selection component
+ */
+export const MemberRoleSelector: React.FC<MemberRoleSelectorProps> = ({
+  selectedRole,
+  onRoleChange,
+  availableRoles = ['admin', 'member', 'viewer', 'guest'],
+  disabled = false,
+  showDescriptions = true,
+  className = '',
+  style,
+  testID,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    if (!disabled) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleSelect = (role: EntityRole) => {
+    onRoleChange(role);
+    handleClose();
+  };
+
+  const selectedConfig = DEFAULT_ROLE_CONFIGS.find(
+    c => c.role === selectedRole
+  );
+  const availableConfigs = DEFAULT_ROLE_CONFIGS.filter(c =>
+    availableRoles.includes(c.role)
+  );
+
+  return (
+    <View className={className} style={style} testID={testID}>
+      {/* Trigger Button */}
+      <Pressable
+        onPress={handleOpen}
+        disabled={disabled}
+        className={`
+          flex-row items-center justify-between 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={`Selected role: ${selectedConfig?.label || selectedRole}`}
+        accessibilityState={{ disabled }}
+      >
+        <View className='flex-row items-center'>
+          <View
+            className={`px-3 py-1 rounded-full mr-2 ${getRoleBadgeClasses(selectedRole)}`}
+          >
+            <Text className='text-sm font-medium'>
+              {selectedConfig?.label || selectedRole}
+            </Text>
+          </View>
+          {showDescriptions && selectedConfig && (
+            <Text
+              className='text-sm text-gray-500 dark:text-gray-400 flex-1'
+              numberOfLines={1}
+            >
+              {selectedConfig.description}
+            </Text>
+          )}
+        </View>
+        <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'
+          >
+            {/* 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 Role
+              </Text>
+            </View>
+
+            {/* Role Options */}
+            {availableConfigs.map(config => (
+              <Pressable
+                key={config.role}
+                onPress={() => handleSelect(config.role)}
+                className={`
+                  px-4 py-4 border-b border-gray-100 dark:border-gray-700
+                  ${selectedRole === config.role ? 'bg-blue-50 dark:bg-blue-900/30' : ''}
+                  active:bg-gray-100 dark:active:bg-gray-700
+                `}
+                accessibilityRole='button'
+                accessibilityLabel={`${config.label}: ${config.description}`}
+                accessibilityState={{ selected: selectedRole === config.role }}
+              >
+                <View className='flex-row items-center justify-between'>
+                  <View className='flex-1'>
+                    <View className='flex-row items-center'>
+                      <View
+                        className={`px-3 py-1 rounded-full ${getRoleBadgeClasses(config.role)}`}
+                      >
+                        <Text className='text-sm font-medium'>
+                          {config.label}
+                        </Text>
+                      </View>
+                    </View>
+                    {showDescriptions && (
+                      <Text className='text-sm text-gray-500 dark:text-gray-400 mt-2'>
+                        {config.description}
+                      </Text>
+                    )}
+                  </View>
+                  {selectedRole === config.role && (
+                    <Text className='text-blue-500 dark:text-blue-400 text-lg ml-2'>
+                      ✓
+                    </Text>
+                  )}
+                </View>
+              </Pressable>
+            ))}
+
+            {/* Cancel Button */}
+            <Pressable
+              onPress={handleClose}
+              className='px-4 py-3 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 MemberRoleSelector;

package/src/__tests__/EntityCard.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { EntityCard } from '../EntityCard';
+import type { Entity } from '../types';
+
+const baseEntity: Entity = {
+  id: '1',
+  name: 'Acme Corp',
+  description: 'A test organization',
+  role: 'admin',
+  memberCount: 5,
+};
+
+describe('EntityCard', () => {
+  it('renders entity name', () => {
+    render(<EntityCard entity={baseEntity} />);
+    expect(screen.getByText('Acme Corp')).toBeTruthy();
+  });
+
+  it('renders avatar initial when no avatarUrl', () => {
+    render(<EntityCard entity={baseEntity} />);
+    expect(screen.getByText('A')).toBeTruthy();
+  });
+
+  it('renders description when showDescription is true', () => {
+    render(<EntityCard entity={baseEntity} showDescription />);
+    expect(screen.getByText('A test organization')).toBeTruthy();
+  });
+
+  it('hides description when showDescription is false', () => {
+    render(<EntityCard entity={baseEntity} showDescription={false} />);
+    expect(screen.queryByText('A test organization')).toBeNull();
+  });
+
+  it('renders role badge when showRole is true and entity has role', () => {
+    render(<EntityCard entity={baseEntity} showRole />);
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+
+  it('hides role badge when showRole is false', () => {
+    render(<EntityCard entity={baseEntity} showRole={false} />);
+    expect(screen.queryByText('Admin')).toBeNull();
+  });
+
+  it('renders member count when showMemberCount is true', () => {
+    render(<EntityCard entity={baseEntity} showMemberCount />);
+    expect(screen.getByText(/5\s+members/)).toBeTruthy();
+  });
+
+  it('shows singular "member" for count of 1', () => {
+    const entity = { ...baseEntity, memberCount: 1 };
+    render(<EntityCard entity={entity} showMemberCount />);
+    expect(screen.getByText(/1\s+member$/)).toBeTruthy();
+  });
+
+  it('calls onPress with entity when pressed', () => {
+    const onPress = jest.fn();
+    render(<EntityCard entity={baseEntity} onPress={onPress} />);
+    fireEvent.press(screen.getByRole('button'));
+    expect(onPress).toHaveBeenCalledWith(baseEntity);
+  });
+
+  it('calls onLongPress with entity when long-pressed', () => {
+    const onLongPress = jest.fn();
+    render(<EntityCard entity={baseEntity} onLongPress={onLongPress} />);
+    fireEvent(screen.getByRole('button'), 'longPress');
+    expect(onLongPress).toHaveBeenCalledWith(baseEntity);
+  });
+
+  it('sets selected accessibility state when selected', () => {
+    render(<EntityCard entity={baseEntity} selected onPress={jest.fn()} />);
+    const button = screen.getByRole('button');
+    expect(button.props.accessibilityState).toEqual(
+      expect.objectContaining({ selected: true })
+    );
+  });
+
+  it('sets accessibility label with entity name', () => {
+    render(<EntityCard entity={baseEntity} onPress={jest.fn()} />);
+    const button = screen.getByRole('button');
+    expect(button.props.accessibilityLabel).toBe('Entity: Acme Corp');
+  });
+
+  it('renders chevron when onPress is provided', () => {
+    render(<EntityCard entity={baseEntity} onPress={jest.fn()} />);
+    expect(screen.getByText('\u203A')).toBeTruthy();
+  });
+
+  it('does not render chevron when no onPress', () => {
+    render(<EntityCard entity={baseEntity} />);
+    expect(screen.queryByText('\u203A')).toBeNull();
+  });
+
+  it('renders all role types without crashing', () => {
+    const roles = ['owner', 'admin', 'member', 'viewer', 'guest'] as const;
+    roles.forEach(role => {
+      const entity = { ...baseEntity, role };
+      const { unmount } = render(<EntityCard entity={entity} showRole />);
+      expect(screen.getByText('Acme Corp')).toBeTruthy();
+      unmount();
+    });
+  });
+});

package/src/__tests__/InvitationForm.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react-native';
+import { InvitationForm } from '../InvitationForm';
+
+describe('InvitationForm', () => {
+  it('renders email input and submit button', () => {
+    render(<InvitationForm onSubmit={jest.fn()} />);
+    expect(screen.getByLabelText('Email address input')).toBeTruthy();
+    expect(screen.getByText('Send Invitation')).toBeTruthy();
+  });
+
+  it('renders custom placeholder text', () => {
+    render(
+      <InvitationForm onSubmit={jest.fn()} placeholder='user@example.com' />
+    );
+    expect(screen.getByPlaceholderText('user@example.com')).toBeTruthy();
+  });
+
+  it('renders custom submit label', () => {
+    render(<InvitationForm onSubmit={jest.fn()} submitLabel='Invite' />);
+    expect(screen.getByText('Invite')).toBeTruthy();
+  });
+
+  it('disables submit button when email is empty', () => {
+    render(<InvitationForm onSubmit={jest.fn()} />);
+    const button = screen.getByLabelText('Send Invitation');
+    expect(button.props.accessibilityState).toEqual(
+      expect.objectContaining({ disabled: true })
+    );
+  });
+
+  it('shows error for invalid email on submit', async () => {
+    render(<InvitationForm onSubmit={jest.fn()} />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'notanemail'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(
+        screen.getByText('Please enter a valid email address')
+      ).toBeTruthy();
+    });
+  });
+
+  it('clears error when user types after validation failure', async () => {
+    render(<InvitationForm onSubmit={jest.fn()} />);
+    // Type invalid email and submit to trigger error
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'notanemail'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(
+        screen.getByText('Please enter a valid email address')
+      ).toBeTruthy();
+    });
+    // Type something new to clear error
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'new-text'
+    );
+    expect(
+      screen.queryByText('Please enter a valid email address')
+    ).toBeNull();
+  });
+
+  it('calls onSubmit with email and default role on valid submission', async () => {
+    const onSubmit = jest.fn();
+    render(<InvitationForm onSubmit={onSubmit} />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'test@example.com'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith('test@example.com', 'member');
+    });
+  });
+
+  it('uses defaultRole when specified', async () => {
+    const onSubmit = jest.fn();
+    render(<InvitationForm onSubmit={onSubmit} defaultRole='viewer' />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'test@example.com'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith('test@example.com', 'viewer');
+    });
+  });
+
+  it('clears form after successful submission', async () => {
+    const onSubmit = jest.fn().mockResolvedValue(undefined);
+    render(<InvitationForm onSubmit={onSubmit} />);
+    const input = screen.getByLabelText('Email address input');
+    fireEvent.changeText(input, 'test@example.com');
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(input.props.value).toBe('');
+    });
+  });
+
+  it('shows error message when onSubmit throws', async () => {
+    const onSubmit = jest.fn().mockRejectedValue(new Error('Network error'));
+    render(<InvitationForm onSubmit={onSubmit} />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'test@example.com'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(screen.getByText('Network error')).toBeTruthy();
+    });
+  });
+
+  it('shows generic error when onSubmit throws non-Error', async () => {
+    const onSubmit = jest.fn().mockRejectedValue('unknown');
+    render(<InvitationForm onSubmit={onSubmit} />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      'test@example.com'
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(screen.getByText('Failed to send invitation')).toBeTruthy();
+    });
+  });
+
+  it('trims email before submitting', async () => {
+    const onSubmit = jest.fn();
+    render(<InvitationForm onSubmit={onSubmit} />);
+    fireEvent.changeText(
+      screen.getByLabelText('Email address input'),
+      '  test@example.com  '
+    );
+    fireEvent.press(screen.getByLabelText('Send Invitation'));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith('test@example.com', 'member');
+    });
+  });
+
+  it('renders help text', () => {
+    render(<InvitationForm onSubmit={jest.fn()} />);
+    expect(
+      screen.getByText(
+        'The invitee will receive an email with instructions to join.'
+      )
+    ).toBeTruthy();
+  });
+});