@sudobility/auth-components-rn 1.0.1

package/src/__tests__/Avatar.test.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Avatar } from '../Avatar';
+
+// Mock @sudobility/components-rn
+jest.mock('@sudobility/components-rn', () => ({
+  cn: function () {
+    var args = Array.prototype.slice.call(arguments);
+    return args.filter(Boolean).join(' ');
+  },
+}));
+
+function createUser(overrides) {
+  return Object.assign(
+    {
+      uid: 'user-1',
+      email: 'john@example.com',
+      displayName: 'John Doe',
+      photoURL: null,
+      isAnonymous: false,
+      emailVerified: true,
+      providerId: 'password',
+    },
+    overrides
+  );
+}
+
+describe('Avatar', () => {
+  describe('initials display', () => {
+    it('shows two-letter initials from full display name', () => {
+      var user = createUser({ displayName: 'John Doe', photoURL: null });
+      render(<Avatar user={user} />);
+
+      expect(screen.getByText('JD')).toBeTruthy();
+    });
+
+    it('shows first two chars when display name is single word', () => {
+      var user = createUser({ displayName: 'Alice', photoURL: null });
+      render(<Avatar user={user} />);
+
+      expect(screen.getByText('AL')).toBeTruthy();
+    });
+
+    it('uses first and last name initials for multi-word names', () => {
+      var user = createUser({
+        displayName: 'Mary Jane Watson',
+        photoURL: null,
+      });
+      render(<Avatar user={user} />);
+
+      expect(screen.getByText('MW')).toBeTruthy();
+    });
+
+    it('falls back to email initials when no display name', () => {
+      var user = createUser({
+        displayName: null,
+        email: 'alice@example.com',
+        photoURL: null,
+      });
+      render(<Avatar user={user} />);
+
+      expect(screen.getByText('AL')).toBeTruthy();
+    });
+
+    it('shows "?" when no name or email', () => {
+      var user = createUser({
+        displayName: null,
+        email: null,
+        photoURL: null,
+      });
+      render(<Avatar user={user} />);
+
+      expect(screen.getByText('?')).toBeTruthy();
+    });
+  });
+
+  describe('photo display', () => {
+    it('renders an Image when photoURL is provided', () => {
+      var user = createUser({
+        photoURL: 'https://example.com/photo.jpg',
+      });
+      var result = render(<Avatar user={user} />);
+      var tree = JSON.stringify(result.toJSON());
+
+      expect(tree).toContain('https://example.com/photo.jpg');
+    });
+  });
+
+  describe('size prop', () => {
+    it('applies default size of 32', () => {
+      var user = createUser({ photoURL: null });
+      var result = render(<Avatar user={user} />);
+      var tree = JSON.stringify(result.toJSON());
+
+      expect(tree).toContain('"width":32');
+      expect(tree).toContain('"height":32');
+    });
+
+    it('applies custom size', () => {
+      var user = createUser({ photoURL: null });
+      var result = render(<Avatar user={user} size={64} />);
+      var tree = JSON.stringify(result.toJSON());
+
+      expect(tree).toContain('"width":64');
+      expect(tree).toContain('"height":64');
+      expect(tree).toContain('"borderRadius":32');
+    });
+
+    it('scales font size based on avatar size', () => {
+      var user = createUser({ photoURL: null });
+      var result = render(<Avatar user={user} size={100} />);
+      var tree = JSON.stringify(result.toJSON());
+
+      // fontSize should be size * 0.4 = 40
+      expect(tree).toContain('"fontSize":40');
+    });
+  });
+
+  describe('onPress', () => {
+    it('renders as Pressable when onPress is provided', () => {
+      var onPress = jest.fn();
+      var user = createUser({ photoURL: null });
+      render(<Avatar user={user} onPress={onPress} />);
+
+      var button = screen.getByRole('button');
+      expect(button).toBeTruthy();
+    });
+
+    it('calls onPress when pressed', () => {
+      var onPress = jest.fn();
+      var user = createUser({ photoURL: null });
+      render(<Avatar user={user} onPress={onPress} />);
+
+      fireEvent.press(screen.getByRole('button'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders as View (not Pressable) when onPress is not provided', () => {
+      var user = createUser({ photoURL: null });
+      render(<Avatar user={user} />);
+
+      expect(screen.queryByRole('button')).toBeNull();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('uses display name for accessibility label on pressable', () => {
+      var onPress = jest.fn();
+      var user = createUser({ displayName: 'Jane Smith' });
+      render(<Avatar user={user} onPress={onPress} />);
+
+      var button = screen.getByRole('button');
+      expect(button.props.accessibilityLabel).toBe('Jane Smith');
+    });
+
+    it('falls back to "User avatar" when no display name', () => {
+      var onPress = jest.fn();
+      var user = createUser({ displayName: null });
+      render(<Avatar user={user} onPress={onPress} />);
+
+      var button = screen.getByRole('button');
+      expect(button.props.accessibilityLabel).toBe('User avatar');
+    });
+  });
+});

package/src/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @sudobility/auth-components-rn
+ * React Native Authentication components with Firebase Auth support
+ */
+
+// Context and hooks
+export {
+  AuthProvider,
+  useAuthStatus,
+  createDefaultErrorTexts,
+} from './AuthProvider';
+
+// Components
+export { AuthScreen } from './AuthScreen';
+export { AuthInline } from './AuthInline';
+export { AuthAction } from './AuthAction';
+export { Avatar } from './Avatar';
+export { ProviderButtons } from './ProviderButtons';
+export { EmailSignInForm } from './EmailSignInForm';
+export { EmailSignUpForm } from './EmailSignUpForm';
+export { ForgotPasswordForm } from './ForgotPasswordForm';
+
+// Types
+export type {
+  // Provider types
+  AuthProviderType,
+  AuthProvidersConfig,
+  // User types
+  AuthUser,
+  // Text types (i18n)
+  AuthTexts,
+  AuthErrorTexts,
+  // Callbacks
+  AuthCallbacks,
+  // Context value
+  AuthContextValue,
+  // Component props
+  AuthProviderProps,
+  AuthMode,
+  AuthScreenProps,
+  AuthInlineProps,
+  AuthMenuItem,
+  AuthActionProps,
+  AvatarProps,
+  AuthContentProps,
+  EmailSignInFormProps,
+  EmailSignUpFormProps,
+  ForgotPasswordFormProps,
+  ProviderButtonsProps,
+  // Tracking
+  AuthTrackingData,
+} from './types';

package/src/nativewind.d.ts

@@ -0,0 +1,30 @@
+// Type declarations for NativeWind className prop
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+    contentContainerClassName?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface SafeAreaViewProps {
+    className?: string;
+  }
+}

package/src/types.ts

@@ -0,0 +1,383 @@
+/**
+ * Type definitions for auth-components-rn
+ * React Native authentication components with Firebase Auth support
+ */
+
+import type { ReactNode } from 'react';
+
+// ============ Auth Provider Types ============
+
+/**
+ * Available authentication providers
+ */
+export type AuthProviderType = 'google' | 'apple' | 'email';
+
+/**
+ * Configuration for enabled auth providers
+ */
+export interface AuthProvidersConfig {
+  /** Which providers to enable */
+  providers: AuthProviderType[];
+  /** Enable anonymous sign-in fallback */
+  enableAnonymous?: boolean;
+}
+
+// ============ User Types ============
+
+/**
+ * User information exposed by the auth context
+ */
+export interface AuthUser {
+  uid: string;
+  email: string | null;
+  displayName: string | null;
+  photoURL: string | null;
+  isAnonymous: boolean;
+  emailVerified: boolean;
+  providerId: string | null;
+}
+
+// ============ Text Types (i18n) ============
+
+/**
+ * All text strings for auth components.
+ * Consumer provides these for full i18n support.
+ */
+export interface AuthTexts {
+  // Titles
+  signInTitle: string;
+  signInWithEmail: string;
+  createAccount: string;
+  resetPassword: string;
+
+  // Buttons
+  signIn: string;
+  signUp: string;
+  logout: string;
+  login: string;
+  continueWithGoogle: string;
+  continueWithApple: string;
+  continueWithEmail: string;
+  sendResetLink: string;
+  backToSignIn: string;
+  close: string;
+
+  // Labels
+  email: string;
+  password: string;
+  confirmPassword: string;
+  displayName: string;
+
+  // Placeholders
+  emailPlaceholder: string;
+  passwordPlaceholder: string;
+  confirmPasswordPlaceholder: string;
+  displayNamePlaceholder: string;
+
+  // Links
+  forgotPassword: string;
+  noAccount: string;
+  haveAccount: string;
+  or: string;
+
+  // Messages
+  resetEmailSent: string;
+  resetEmailSentDesc: string;
+  passwordMismatch: string;
+  passwordTooShort: string;
+  loading: string;
+}
+
+/**
+ * Firebase error messages - parameterized for i18n
+ */
+export interface AuthErrorTexts {
+  'auth/user-not-found': string;
+  'auth/wrong-password': string;
+  'auth/invalid-email': string;
+  'auth/invalid-credential': string;
+  'auth/email-already-in-use': string;
+  'auth/weak-password': string;
+  'auth/too-many-requests': string;
+  'auth/network-request-failed': string;
+  'auth/popup-closed-by-user': string;
+  'auth/popup-blocked': string;
+  'auth/account-exists-with-different-credential': string;
+  'auth/operation-not-allowed': string;
+  default: string;
+}
+
+// ============ Callbacks ============
+
+/**
+ * Event callbacks for auth operations
+ */
+export interface AuthCallbacks {
+  /** Called after successful sign in */
+  onSignIn?: (user: AuthUser) => void;
+  /** Called after sign out */
+  onSignOut?: () => void;
+  /** Called on auth error */
+  onError?: (error: Error, code?: string) => void;
+}
+
+// ============ Context Value ============
+
+/**
+ * Value provided by AuthProvider context
+ */
+export interface AuthContextValue {
+  user: AuthUser | null;
+  loading: boolean;
+  error: string | null;
+  isAuthenticated: boolean;
+  isAnonymous: boolean;
+
+  // Auth methods
+  signInWithGoogle: () => Promise<void>;
+  signInWithApple: () => Promise<void>;
+  signInWithEmail: (email: string, password: string) => Promise<void>;
+  signUpWithEmail: (
+    email: string,
+    password: string,
+    displayName?: string
+  ) => Promise<void>;
+  resetPassword: (email: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  signInAnonymously: () => Promise<void>;
+
+  // Error management
+  clearError: () => void;
+
+  // Texts (for child components)
+  texts: AuthTexts;
+
+  // Provider config (for child components)
+  providerConfig: AuthProvidersConfig;
+}
+
+// ============ Component Props ============
+
+/**
+ * Props for AuthProvider component
+ */
+export interface AuthProviderProps {
+  children: ReactNode;
+  /** Provider configuration */
+  providerConfig: AuthProvidersConfig;
+  /** All text strings for i18n */
+  texts: AuthTexts;
+  /** Firebase error messages for i18n */
+  errorTexts: AuthErrorTexts;
+  /** Event callbacks */
+  callbacks?: AuthCallbacks;
+  /** Custom error message resolver (takes precedence over errorTexts) */
+  resolveErrorMessage?: (code: string) => string;
+}
+
+/**
+ * Auth UI mode
+ */
+export type AuthMode =
+  | 'select'
+  | 'email-signin'
+  | 'email-signup'
+  | 'forgot-password';
+
+/**
+ * Props for AuthScreen component (full-screen auth flow)
+ */
+export interface AuthScreenProps {
+  /** Initial mode to show */
+  initialMode?: AuthMode;
+  /** Custom class name */
+  className?: string;
+  /** Which providers to show (defaults to providerConfig) */
+  providers?: AuthProviderType[];
+  /** Show title header (default: true) */
+  showTitle?: boolean;
+  /** Custom title (overrides texts) */
+  title?: string;
+  /** Callback when auth mode changes */
+  onModeChange?: (mode: AuthMode) => void;
+  /** Callback when auth succeeds */
+  onSuccess?: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+/**
+ * Props for AuthInline component (inline auth flow)
+ */
+export interface AuthInlineProps {
+  /** Initial mode to show */
+  initialMode?: AuthMode;
+  /** Custom class name */
+  className?: string;
+  /** Which providers to show (defaults to providerConfig) */
+  providers?: AuthProviderType[];
+  /** Show title header (default: true) */
+  showTitle?: boolean;
+  /** Custom title (overrides texts) */
+  title?: string;
+  /** Callback when auth mode changes */
+  onModeChange?: (mode: AuthMode) => void;
+  /** Callback when auth succeeds */
+  onSuccess?: () => void;
+  /** Card style variant */
+  variant?: 'card' | 'flat' | 'bordered';
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+/**
+ * Custom menu item for AuthAction dropdown
+ */
+export interface AuthMenuItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Press handler */
+  onPress: () => void;
+  /** Optional icon */
+  icon?: ReactNode;
+  /** Show divider after this item */
+  dividerAfter?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * Props for AuthAction component (header component)
+ */
+export interface AuthActionProps {
+  /** Custom class name */
+  className?: string;
+  /** Button variant when not logged in */
+  loginButtonVariant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Custom login button content */
+  loginButtonContent?: ReactNode;
+  /** Avatar size in pixels (default: 32) */
+  avatarSize?: number;
+  /** Custom menu items (rendered above logout) */
+  menuItems?: AuthMenuItem[];
+  /** Show user info section in menu (default: true) */
+  showUserInfo?: boolean;
+  /** Custom user info renderer */
+  renderUserInfo?: (user: AuthUser) => ReactNode;
+  /** Custom avatar renderer */
+  renderAvatar?: (user: AuthUser) => ReactNode;
+  /** Callback when login button pressed */
+  onLoginPress?: () => void | boolean;
+  /** Callback when logout pressed */
+  onLogoutPress?: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+/**
+ * Props for Avatar component
+ */
+export interface AvatarProps {
+  /** User to display avatar for */
+  user: AuthUser;
+  /** Size in pixels (default: 32) */
+  size?: number;
+  /** Custom class name */
+  className?: string;
+  /** Press handler */
+  onPress?: () => void;
+}
+
+/**
+ * Props for internal AuthContent component
+ */
+export interface AuthContentProps {
+  /** Current auth mode */
+  mode: AuthMode;
+  /** Mode change handler */
+  onModeChange: (mode: AuthMode) => void;
+  /** Override providers */
+  providers?: AuthProviderType[];
+  /** Success callback */
+  onSuccess?: () => void;
+}
+
+/**
+ * Props for form components
+ */
+export interface EmailSignInFormProps {
+  onSwitchToSignUp: () => void;
+  onSwitchToForgotPassword: () => void;
+  onSuccess?: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+export interface EmailSignUpFormProps {
+  onSwitchToSignIn: () => void;
+  onSuccess?: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+export interface ForgotPasswordFormProps {
+  onSwitchToSignIn: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+/**
+ * Props for ProviderButtons component
+ */
+export interface ProviderButtonsProps {
+  providers: AuthProviderType[];
+  onEmailPress: () => void;
+  /** Optional tracking callback */
+  onTrack?: (data: AuthTrackingData) => void;
+  /** Optional tracking label */
+  trackingLabel?: string;
+  /** Optional component name for tracking */
+  componentName?: string;
+}
+
+// ============ Tracking Types ============
+
+/** Tracking data for auth component actions */
+export interface AuthTrackingData {
+  action:
+    | 'login_press'
+    | 'logout_press'
+    | 'provider_press'
+    | 'form_submit'
+    | 'switch_mode';
+  trackingLabel?: string;
+  componentName?: string;
+}