@squad-sports/react-native 1.3.1

package/src/__tests__/VerificationCooldown.test.ts

@@ -0,0 +1,153 @@
+/**
+ * Tests for the verification code resend cooldown logic.
+ * This tests the pure timing logic extracted from EnterCodeScreen
+ * without requiring a full React Native rendering environment.
+ */
+
+describe('Verification Cooldown Logic', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const COOLDOWN_SECONDS = 60;
+
+  /**
+   * Simulates the cooldown logic from EnterCodeScreen:
+   * - startCooldown sets countdown to 60
+   * - An interval decrements every second
+   * - At 0, the interval is cleared
+   */
+  function createCooldownController() {
+    let resendCooldown = 0;
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    function startCooldown() {
+      resendCooldown = COOLDOWN_SECONDS;
+      if (intervalId) clearInterval(intervalId);
+      intervalId = setInterval(() => {
+        resendCooldown -= 1;
+        if (resendCooldown <= 0) {
+          resendCooldown = 0;
+          if (intervalId) clearInterval(intervalId);
+          intervalId = null;
+        }
+      }, 1000);
+    }
+
+    function cleanup() {
+      if (intervalId) clearInterval(intervalId);
+      intervalId = null;
+    }
+
+    return {
+      startCooldown,
+      cleanup,
+      getCooldown: () => resendCooldown,
+      isIntervalActive: () => intervalId !== null,
+    };
+  }
+
+  test('cooldown starts at 60 seconds', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+    expect(ctrl.getCooldown()).toBe(60);
+    ctrl.cleanup();
+  });
+
+  test('cooldown decrements each second', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    jest.advanceTimersByTime(1000);
+    expect(ctrl.getCooldown()).toBe(59);
+
+    jest.advanceTimersByTime(1000);
+    expect(ctrl.getCooldown()).toBe(58);
+
+    ctrl.cleanup();
+  });
+
+  test('cooldown reaches 0 and stops', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    jest.advanceTimersByTime(60 * 1000);
+    expect(ctrl.getCooldown()).toBe(0);
+    expect(ctrl.isIntervalActive()).toBe(false);
+  });
+
+  test('button is disabled while cooldown > 0', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    const isDisabled = () => ctrl.getCooldown() > 0;
+
+    expect(isDisabled()).toBe(true);
+
+    jest.advanceTimersByTime(30_000);
+    expect(isDisabled()).toBe(true);
+    expect(ctrl.getCooldown()).toBe(30);
+
+    jest.advanceTimersByTime(30_000);
+    expect(isDisabled()).toBe(false);
+
+    ctrl.cleanup();
+  });
+
+  test('cleanup stops the interval', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    jest.advanceTimersByTime(5000);
+    expect(ctrl.getCooldown()).toBe(55);
+
+    ctrl.cleanup();
+
+    // After cleanup, advancing time should not change the cooldown
+    const cooldownAtCleanup = ctrl.getCooldown();
+    jest.advanceTimersByTime(10_000);
+    expect(ctrl.getCooldown()).toBe(cooldownAtCleanup);
+  });
+
+  test('restarting cooldown resets to 60', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    jest.advanceTimersByTime(20_000);
+    expect(ctrl.getCooldown()).toBe(40);
+
+    // Restart
+    ctrl.startCooldown();
+    expect(ctrl.getCooldown()).toBe(60);
+
+    jest.advanceTimersByTime(1000);
+    expect(ctrl.getCooldown()).toBe(59);
+
+    ctrl.cleanup();
+  });
+
+  test('countdown display format', () => {
+    const ctrl = createCooldownController();
+    ctrl.startCooldown();
+
+    // Mimics the display logic from EnterCodeScreen
+    const getDisplayText = () => {
+      const cd = ctrl.getCooldown();
+      return cd > 0 ? ` Resend (${cd}s)` : ' Resend';
+    };
+
+    expect(getDisplayText()).toBe(' Resend (60s)');
+
+    jest.advanceTimersByTime(45_000);
+    expect(getDisplayText()).toBe(' Resend (15s)');
+
+    jest.advanceTimersByTime(15_000);
+    expect(getDisplayText()).toBe(' Resend');
+
+    ctrl.cleanup();
+  });
+});

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,129 @@
+import React, { Component, type ErrorInfo, type ReactNode } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Colors } from '../theme/ThemeContext';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  screenName?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches React rendering errors and shows a recovery UI.
+ * Wrap individual screens so one crash doesn't kill the whole app.
+ *
+ * Usage:
+ * ```tsx
+ * <ScreenErrorBoundary screenName="Home">
+ *   <HomeScreen />
+ * </ScreenErrorBoundary>
+ * ```
+ */
+export class ScreenErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error(`[ErrorBoundary:${this.props.screenName ?? 'unknown'}]`, error, errorInfo);
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View style={styles.container} accessibilityRole="alert">
+          <View style={styles.content}>
+            <Text style={styles.icon} accessibilityLabel="Error icon">!</Text>
+            <Text style={styles.title} accessibilityRole="header">
+              Something went wrong
+            </Text>
+            <Text style={styles.message}>
+              {this.props.screenName
+                ? `There was a problem loading ${this.props.screenName}.`
+                : 'An unexpected error occurred.'}
+            </Text>
+            <Pressable
+              style={styles.retryButton}
+              onPress={this.handleRetry}
+              accessibilityRole="button"
+              accessibilityLabel="Try again"
+            >
+              <Text style={styles.retryText}>Try Again</Text>
+            </Pressable>
+          </View>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.gray9,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 32,
+  },
+  content: {
+    alignItems: 'center',
+    maxWidth: 300,
+  },
+  icon: {
+    fontSize: 40,
+    fontWeight: '700',
+    color: Colors.orange1,
+    width: 64,
+    height: 64,
+    lineHeight: 64,
+    textAlign: 'center',
+    backgroundColor: 'rgba(233, 120, 92, 0.14)',
+    borderRadius: 32,
+    overflow: 'hidden',
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: Colors.white,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 14,
+    color: Colors.gray6,
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 20,
+  },
+  retryButton: {
+    paddingVertical: 12,
+    paddingHorizontal: 32,
+    borderRadius: 20,
+    backgroundColor: Colors.purple1,
+  },
+  retryText: {
+    color: Colors.gray1,
+    fontWeight: '600',
+    fontSize: 15,
+  },
+});

package/src/components/SOTD/SOTDComponents.tsx

@@ -0,0 +1,101 @@
+/**
+ * Squaddie of the Day (SOTD) components.
+ * Ported from squad-demo/src/components/SOTD/*.
+ */
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, Pressable, Animated } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { TitleSmall, BodyRegular, BodySmall } from '../ux/text/Typography';
+import Button from '../ux/buttons/Button';
+
+// --- SotdButton (locked/unlocked states) ---
+export function SotdButton({
+  isUnlocked, userName, userImageUrl, onPress, primaryColor = Colors.purple1,
+}: { isUnlocked: boolean; userName?: string; userImageUrl?: string; onPress: () => void; primaryColor?: string }) {
+  return (
+    <Pressable style={[styles.sotdButton, { borderColor: primaryColor }]} onPress={onPress} accessibilityRole="button" accessibilityLabel="Squaddie of the Day">
+      {isUnlocked && userImageUrl ? (
+        <UserImage imageUrl={userImageUrl} displayName={userName} size={44} />
+      ) : (
+        <View style={[styles.sotdLocked, { backgroundColor: primaryColor }]}>
+          <Text style={styles.sotdLockedText}>SOTD</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+// --- CurrentSotdUser ---
+export function CurrentSotdUser({ userName, userImageUrl }: { userName: string; userImageUrl?: string }) {
+  return (
+    <View style={styles.currentSotd}>
+      <UserImage imageUrl={userImageUrl} displayName={userName} size={64} />
+      <TitleSmall style={styles.currentSotdName}>{userName}</TitleSmall>
+      <BodySmall style={styles.currentSotdLabel}>Squaddie of the Day</BodySmall>
+    </View>
+  );
+}
+
+// --- SOTD Intro Bottom Sheet ---
+export function SOTDIntroBottomSheet({ onStart, onDismiss }: { onStart: () => void; onDismiss: () => void }) {
+  return (
+    <View style={styles.introSheet}>
+      <Text style={styles.introEmoji}>trophy</Text>
+      <TitleSmall style={styles.introTitle}>Squaddie of the Day</TitleSmall>
+      <BodyRegular style={styles.introDesc}>
+        Each day, one member of your squad gets the spotlight. Claim your moment!
+      </BodyRegular>
+      <Button style={styles.introButton} onPress={onStart}>
+        <Text style={styles.introButtonText}>Let's Go!</Text>
+      </Button>
+    </View>
+  );
+}
+
+// --- SOTD Selecting Bottom Sheet ---
+export function SOTDSelectingBottomSheet({
+  connections, onSelect, onDismiss,
+}: { connections: Array<{ id: string; name: string; imageUrl?: string }>; onSelect: (id: string) => void; onDismiss: () => void }) {
+  return (
+    <View style={styles.selectSheet}>
+      <TitleSmall style={styles.selectTitle}>Choose your Squaddie</TitleSmall>
+      {connections.map(c => (
+        <Pressable key={c.id} style={styles.selectRow} onPress={() => onSelect(c.id)}>
+          <UserImage imageUrl={c.imageUrl} displayName={c.name} size={44} />
+          <BodyRegular style={styles.selectName}>{c.name}</BodyRegular>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+// --- SOTDTag ---
+export function SOTDTag() {
+  return (
+    <View style={styles.sotdTag}>
+      <Text style={styles.sotdTagText}>SOTD</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  sotdButton: { width: 52, height: 52, borderRadius: 26, borderWidth: 2, justifyContent: 'center', alignItems: 'center', overflow: 'hidden' },
+  sotdLocked: { width: 44, height: 44, borderRadius: 22, justifyContent: 'center', alignItems: 'center' },
+  sotdLockedText: { color: Colors.white, fontSize: 10, fontWeight: '800' },
+  currentSotd: { alignItems: 'center', padding: 16 },
+  currentSotdName: { color: Colors.white, marginTop: 8 },
+  currentSotdLabel: { color: Colors.gold, marginTop: 2 },
+  introSheet: { padding: 24, alignItems: 'center' },
+  introEmoji: { fontSize: 48, marginBottom: 16, color: Colors.gold },
+  introTitle: { color: Colors.white, marginBottom: 8 },
+  introDesc: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  introButton: { paddingVertical: 14, paddingHorizontal: 32, borderRadius: 24, backgroundColor: Colors.purple1 },
+  introButtonText: { color: Colors.gray1, fontWeight: '600', fontSize: 15 },
+  selectSheet: { padding: 16 },
+  selectTitle: { color: Colors.white, marginBottom: 16 },
+  selectRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  selectName: { color: Colors.white, flex: 1 },
+  sotdTag: { backgroundColor: Colors.gold, borderRadius: 6, paddingHorizontal: 6, paddingVertical: 2 },
+  sotdTagText: { color: Colors.gray1, fontSize: 8, fontWeight: '800' },
+});

package/src/components/audio/AudioPlayerRow.tsx

@@ -0,0 +1,189 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Pressable, Animated } from 'react-native';
+import { Audio, AVPlaybackStatus } from 'expo-av';
+import { Colors } from '../../theme/ThemeContext';
+import { BodySmall } from '../ux/text/Typography';
+
+interface AudioPlayerRowProps {
+  audioUrl: string;
+  duration?: number;
+}
+
+function AudioPlayerRow({ audioUrl, duration: initialDuration }: AudioPlayerRowProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [position, setPosition] = useState(0);
+  const [duration, setDuration] = useState(initialDuration ?? 0);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const soundRef = useRef<Audio.Sound | null>(null);
+  const progressAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    return () => {
+      soundRef.current?.unloadAsync().catch(() => {});
+    };
+  }, []);
+
+  const loadSound = useCallback(async () => {
+    if (soundRef.current) return soundRef.current;
+
+    const { sound } = await Audio.Sound.createAsync(
+      { uri: audioUrl },
+      { shouldPlay: false },
+      onPlaybackStatusUpdate,
+    );
+    soundRef.current = sound;
+    setIsLoaded(true);
+    return sound;
+  }, [audioUrl]);
+
+  const onPlaybackStatusUpdate = useCallback((status: AVPlaybackStatus) => {
+    if (!status.isLoaded) return;
+
+    setPosition(status.positionMillis);
+    if (status.durationMillis) {
+      setDuration(status.durationMillis);
+    }
+
+    const progress = status.durationMillis
+      ? status.positionMillis / status.durationMillis
+      : 0;
+
+    progressAnim.setValue(progress);
+
+    if (status.didJustFinish) {
+      setIsPlaying(false);
+      setPosition(0);
+      progressAnim.setValue(0);
+    }
+  }, [progressAnim]);
+
+  const togglePlayback = useCallback(async () => {
+    try {
+      const sound = await loadSound();
+
+      if (isPlaying) {
+        await sound.pauseAsync();
+        setIsPlaying(false);
+      } else {
+        await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
+        await sound.playAsync();
+        setIsPlaying(true);
+      }
+    } catch (err) {
+      console.error('[AudioPlayer] Error:', err);
+    }
+  }, [isPlaying, loadSound]);
+
+  const formatMs = (ms: number) => {
+    const totalSec = Math.floor(ms / 1000);
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.playButton} onPress={togglePlayback}>
+        <View style={[styles.playIcon, isPlaying && styles.pauseIcon]}>
+          {isPlaying ? (
+            <View style={styles.pauseBars}>
+              <View style={styles.pauseBar} />
+              <View style={styles.pauseBar} />
+            </View>
+          ) : (
+            <View style={styles.playTriangle} />
+          )}
+        </View>
+      </Pressable>
+
+      <View style={styles.waveformContainer}>
+        <View style={styles.waveformBg}>
+          <Animated.View
+            style={[
+              styles.waveformFill,
+              {
+                width: progressAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0%', '100%'],
+                }),
+              },
+            ]}
+          />
+        </View>
+      </View>
+
+      <BodySmall style={styles.duration}>
+        {formatMs(isPlaying ? position : duration)}
+      </BodySmall>
+    </View>
+  );
+}
+
+export { AudioPlayerRow };
+export default memo(AudioPlayerRow);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.gray3,
+    borderRadius: 24,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    gap: 10,
+  },
+  playButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: Colors.white,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  pauseIcon: {},
+  playTriangle: {
+    width: 0,
+    height: 0,
+    borderLeftWidth: 10,
+    borderTopWidth: 6,
+    borderBottomWidth: 6,
+    borderLeftColor: Colors.gray1,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    marginLeft: 2,
+  },
+  pauseBars: {
+    flexDirection: 'row',
+    gap: 3,
+  },
+  pauseBar: {
+    width: 3,
+    height: 14,
+    backgroundColor: Colors.gray1,
+    borderRadius: 1,
+  },
+  waveformContainer: {
+    flex: 1,
+    height: 4,
+  },
+  waveformBg: {
+    flex: 1,
+    backgroundColor: Colors.gray5,
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  waveformFill: {
+    height: '100%',
+    backgroundColor: Colors.white,
+    borderRadius: 2,
+  },
+  duration: {
+    color: Colors.gray6,
+    minWidth: 32,
+    textAlign: 'right',
+  },
+});