@sudobility/entity-components-rn 1.0.1

package/src/__tests__/MemberRoleSelector.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { MemberRoleSelector } from '../MemberRoleSelector';
+
+describe('MemberRoleSelector', () => {
+  it('renders the selected role label', () => {
+    render(
+      <MemberRoleSelector selectedRole='admin' onRoleChange={jest.fn()} />
+    );
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+
+  it('renders role description when showDescriptions is true', () => {
+    render(
+      <MemberRoleSelector
+        selectedRole='admin'
+        onRoleChange={jest.fn()}
+        showDescriptions
+      />
+    );
+    expect(
+      screen.getByText('Can manage members and settings')
+    ).toBeTruthy();
+  });
+
+  it('has correct accessibility label for trigger', () => {
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={jest.fn()} />
+    );
+    const trigger = screen.getByLabelText('Selected role: Member');
+    expect(trigger).toBeTruthy();
+  });
+
+  it('opens modal when trigger is pressed', () => {
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={jest.fn()} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    expect(screen.getByText('Select Role')).toBeTruthy();
+  });
+
+  it('does not open modal when disabled', () => {
+    render(
+      <MemberRoleSelector
+        selectedRole='member'
+        onRoleChange={jest.fn()}
+        disabled
+      />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    expect(screen.queryByText('Select Role')).toBeNull();
+  });
+
+  it('shows only available roles in modal', () => {
+    render(
+      <MemberRoleSelector
+        selectedRole='member'
+        onRoleChange={jest.fn()}
+        availableRoles={['member', 'viewer']}
+      />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    // Should show member and viewer
+    expect(screen.getByLabelText(/^Member:/)).toBeTruthy();
+    expect(screen.getByLabelText(/^Viewer:/)).toBeTruthy();
+    // Should not show admin, owner, or guest
+    expect(screen.queryByLabelText(/^Admin:/)).toBeNull();
+    expect(screen.queryByLabelText(/^Owner:/)).toBeNull();
+    expect(screen.queryByLabelText(/^Guest:/)).toBeNull();
+  });
+
+  it('calls onRoleChange when a role is selected', () => {
+    const onRoleChange = jest.fn();
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={onRoleChange} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    fireEvent.press(screen.getByLabelText(/^Viewer:/));
+    expect(onRoleChange).toHaveBeenCalledWith('viewer');
+  });
+
+  it('closes modal after selecting a role', () => {
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={jest.fn()} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    expect(screen.getByText('Select Role')).toBeTruthy();
+    fireEvent.press(screen.getByLabelText(/^Viewer:/));
+    expect(screen.queryByText('Select Role')).toBeNull();
+  });
+
+  it('closes modal when Cancel is pressed', () => {
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={jest.fn()} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    expect(screen.getByText('Select Role')).toBeTruthy();
+    fireEvent.press(screen.getByText('Cancel'));
+    expect(screen.queryByText('Select Role')).toBeNull();
+  });
+
+  it('shows checkmark next to the currently selected role', () => {
+    render(
+      <MemberRoleSelector selectedRole='admin' onRoleChange={jest.fn()} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Admin'));
+    // The admin option should have selected state
+    const adminOption = screen.getByLabelText(/^Admin:/);
+    expect(adminOption.props.accessibilityState).toEqual(
+      expect.objectContaining({ selected: true })
+    );
+  });
+
+  it('defaults availableRoles to admin, member, viewer, guest', () => {
+    render(
+      <MemberRoleSelector selectedRole='member' onRoleChange={jest.fn()} />
+    );
+    fireEvent.press(screen.getByLabelText('Selected role: Member'));
+    expect(screen.getByLabelText(/^Admin:/)).toBeTruthy();
+    expect(screen.getByLabelText(/^Member:/)).toBeTruthy();
+    expect(screen.getByLabelText(/^Viewer:/)).toBeTruthy();
+    expect(screen.getByLabelText(/^Guest:/)).toBeTruthy();
+    expect(screen.queryByLabelText(/^Owner:/)).toBeNull();
+  });
+});

package/src/index.ts

@@ -0,0 +1,29 @@
+// Entity Components for React Native
+// @sudobility/entity-components-rn
+
+// Types
+export type {
+  Entity,
+  Member,
+  Invitation,
+  EntityRole,
+  RoleConfig,
+  EntityCardProps,
+  EntityListProps,
+  EntitySelectorProps,
+  MemberListProps,
+  MemberRoleSelectorProps,
+  InvitationFormProps,
+  InvitationListProps,
+} from './types';
+
+export { DEFAULT_ROLE_CONFIGS } from './types';
+
+// Components
+export { EntityCard } from './EntityCard';
+export { EntityList } from './EntityList';
+export { EntitySelector } from './EntitySelector';
+export { MemberList } from './MemberList';
+export { MemberRoleSelector } from './MemberRoleSelector';
+export { InvitationForm } from './InvitationForm';
+export { InvitationList } from './InvitationList';

package/src/nativewind.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="nativewind/types" />
+
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+}

package/src/types.ts

@@ -0,0 +1,226 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { ViewStyle } from 'react-native';
+
+/** Type matching FlatList's ListHeaderComponent/ListFooterComponent */
+type ListComponentProp = ComponentType<any> | ReactElement | null;
+
+/**
+ * Entity role types
+ */
+export type EntityRole = 'owner' | 'admin' | 'member' | 'viewer' | 'guest';
+
+/**
+ * Entity type
+ */
+export interface Entity {
+  id: string;
+  name: string;
+  description?: string;
+  avatarUrl?: string;
+  role?: EntityRole;
+  memberCount?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/**
+ * Member type
+ */
+export interface Member {
+  id: string;
+  name: string;
+  email: string;
+  avatarUrl?: string;
+  role: EntityRole;
+  joinedAt?: string;
+  status?: 'active' | 'inactive' | 'pending';
+}
+
+/**
+ * Invitation type
+ */
+export interface Invitation {
+  id: string;
+  email: string;
+  role: EntityRole;
+  status: 'pending' | 'accepted' | 'declined' | 'expired';
+  invitedBy?: string;
+  invitedAt: string;
+  expiresAt?: string;
+}
+
+/**
+ * EntityCard props
+ */
+export interface EntityCardProps {
+  entity: Entity;
+  onPress?: (entity: Entity) => void;
+  onLongPress?: (entity: Entity) => void;
+  selected?: boolean;
+  showRole?: boolean;
+  showMemberCount?: boolean;
+  showDescription?: boolean;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * EntityList props
+ */
+export interface EntityListProps {
+  entities: Entity[];
+  onEntityPress?: (entity: Entity) => void;
+  onEntityLongPress?: (entity: Entity) => void;
+  selectedEntityId?: string;
+  showRoles?: boolean;
+  showMemberCounts?: boolean;
+  showDescriptions?: boolean;
+  emptyMessage?: string;
+  emptyIcon?: ReactNode;
+  loading?: boolean;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  ListHeaderComponent?: ListComponentProp;
+  ListFooterComponent?: ListComponentProp;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * EntitySelector props
+ */
+export interface EntitySelectorProps {
+  entities: Entity[];
+  selectedEntity?: Entity | null;
+  onSelect: (entity: Entity) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  showAvatars?: boolean;
+  showRoles?: boolean;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * MemberList props
+ */
+export interface MemberListProps {
+  members: Member[];
+  onMemberPress?: (member: Member) => void;
+  onRoleChange?: (member: Member, newRole: EntityRole) => void;
+  onRemoveMember?: (member: Member) => void;
+  currentUserRole?: EntityRole;
+  canEditRoles?: boolean;
+  canRemoveMembers?: boolean;
+  emptyMessage?: string;
+  emptyIcon?: ReactNode;
+  loading?: boolean;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  ListHeaderComponent?: ListComponentProp;
+  ListFooterComponent?: ListComponentProp;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * MemberRoleSelector props
+ */
+export interface MemberRoleSelectorProps {
+  selectedRole: EntityRole;
+  onRoleChange: (role: EntityRole) => void;
+  availableRoles?: EntityRole[];
+  disabled?: boolean;
+  showDescriptions?: boolean;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * InvitationForm props
+ */
+export interface InvitationFormProps {
+  onSubmit: (email: string, role: EntityRole) => void | Promise<void>;
+  availableRoles?: EntityRole[];
+  defaultRole?: EntityRole;
+  loading?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  submitLabel?: string;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * InvitationList props
+ */
+export interface InvitationListProps {
+  invitations: Invitation[];
+  onResend?: (invitation: Invitation) => void;
+  onCancel?: (invitation: Invitation) => void;
+  canResend?: boolean;
+  canCancel?: boolean;
+  emptyMessage?: string;
+  emptyIcon?: ReactNode;
+  loading?: boolean;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+  ListHeaderComponent?: ListComponentProp;
+  ListFooterComponent?: ListComponentProp;
+  className?: string;
+  style?: ViewStyle;
+  testID?: string;
+}
+
+/**
+ * Role configuration
+ */
+export interface RoleConfig {
+  role: EntityRole;
+  label: string;
+  description: string;
+  color: string;
+}
+
+/**
+ * Default role configurations
+ */
+export const DEFAULT_ROLE_CONFIGS: RoleConfig[] = [
+  {
+    role: 'owner',
+    label: 'Owner',
+    description: 'Full access and ownership rights',
+    color: 'purple',
+  },
+  {
+    role: 'admin',
+    label: 'Admin',
+    description: 'Can manage members and settings',
+    color: 'blue',
+  },
+  {
+    role: 'member',
+    label: 'Member',
+    description: 'Can view and contribute',
+    color: 'green',
+  },
+  {
+    role: 'viewer',
+    label: 'Viewer',
+    description: 'Can only view content',
+    color: 'gray',
+  },
+  {
+    role: 'guest',
+    label: 'Guest',
+    description: 'Limited access',
+    color: 'yellow',
+  },
+];