@squad-sports/react-native 1.3.1

package/src/components/ux/emoji-picker/EmojiReactionPicker.tsx

@@ -0,0 +1,139 @@
+import React, { memo, useCallback } from 'react';
+import { View, Text, StyleSheet, Pressable, ScrollView } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+const QUICK_REACTIONS = ['fire', 'heart', '100', 'clap', 'laugh', 'cry'];
+
+const EMOJI_MAP: Record<string, string> = {
+  fire: '\u{1F525}',
+  heart: '\u{2764}\u{FE0F}',
+  '100': '\u{1F4AF}',
+  clap: '\u{1F44F}',
+  laugh: '\u{1F602}',
+  cry: '\u{1F622}',
+  thumbsup: '\u{1F44D}',
+  thumbsdown: '\u{1F44E}',
+  mind_blown: '\u{1F92F}',
+  eyes: '\u{1F440}',
+  pray: '\u{1F64F}',
+  muscle: '\u{1F4AA}',
+};
+
+interface EmojiReactionPickerProps {
+  onSelect: (emoji: string) => void;
+  onDismiss: () => void;
+  selectedEmoji?: string;
+  compact?: boolean;
+}
+
+function EmojiReactionPicker({
+  onSelect,
+  onDismiss,
+  selectedEmoji,
+  compact = false,
+}: EmojiReactionPickerProps) {
+  const handleSelect = useCallback(
+    (key: string) => {
+      onSelect(key);
+      onDismiss();
+    },
+    [onSelect, onDismiss],
+  );
+
+  if (compact) {
+    return (
+      <View style={styles.compactContainer}>
+        {QUICK_REACTIONS.map(key => (
+          <Pressable
+            key={key}
+            style={[styles.compactEmoji, selectedEmoji === key && styles.compactEmojiSelected]}
+            onPress={() => handleSelect(key)}
+          >
+            <Text style={styles.emojiText}>{EMOJI_MAP[key] ?? key}</Text>
+          </Pressable>
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.overlay}>
+      <Pressable style={styles.backdrop} onPress={onDismiss} />
+      <View style={styles.picker}>
+        <View style={styles.handle} />
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.emojiRow}>
+          {Object.entries(EMOJI_MAP).map(([key, emoji]) => (
+            <Pressable
+              key={key}
+              style={[styles.emojiButton, selectedEmoji === key && styles.emojiButtonSelected]}
+              onPress={() => handleSelect(key)}
+            >
+              <Text style={styles.emojiTextLarge}>{emoji}</Text>
+            </Pressable>
+          ))}
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+export default memo(EmojiReactionPicker);
+
+const styles = StyleSheet.create({
+  // Compact inline row
+  compactContainer: {
+    flexDirection: 'row',
+    gap: 4,
+    backgroundColor: Colors.gray2,
+    borderRadius: 24,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
+  compactEmoji: {
+    width: 36, height: 36, borderRadius: 18,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  compactEmojiSelected: {
+    backgroundColor: 'rgba(110, 130, 231, 0.2)',
+  },
+  emojiText: { fontSize: 20 },
+
+  // Full overlay picker
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+    zIndex: 9999,
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  picker: {
+    backgroundColor: Colors.gray2,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: 32,
+    paddingTop: 12,
+  },
+  handle: {
+    width: 40, height: 4, borderRadius: 2,
+    backgroundColor: Colors.gray5,
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
+  emojiRow: {
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  emojiButton: {
+    width: 48, height: 48, borderRadius: 24,
+    justifyContent: 'center', alignItems: 'center',
+    backgroundColor: Colors.gray3,
+  },
+  emojiButtonSelected: {
+    backgroundColor: 'rgba(110, 130, 231, 0.3)',
+    borderWidth: 2,
+    borderColor: Colors.purple1,
+  },
+  emojiTextLarge: { fontSize: 24 },
+});

package/src/components/ux/errors/ErrorHint.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface ErrorHintProps {
+  hint?: string | null;
+  error?: { name: string; message: string } | null;
+  onDismiss?: () => void;
+}
+
+export function ErrorHint({ hint, error, onDismiss }: ErrorHintProps) {
+  if (!hint && !error) return null;
+
+  const message = hint ?? error?.message;
+
+  return (
+    <Pressable onPress={onDismiss} style={styles.container}>
+      <View style={styles.indicator} />
+      <Text style={styles.text}>{message}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 12,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: 'rgba(233, 120, 92, 0.14)',
+    borderRadius: 8,
+  },
+  indicator: {
+    width: 4,
+    height: 16,
+    borderRadius: 2,
+    backgroundColor: Colors.orange1,
+    marginRight: 8,
+  },
+  text: {
+    color: Colors.orange1,
+    fontSize: 14,
+    flex: 1,
+  },
+});

package/src/components/ux/inputs/CodeInput.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface CodeInputProps {
+  length?: number;
+  value: string;
+  onChangeText: (text: string) => void;
+  onComplete?: (code: string) => void;
+  style?: StyleProp<ViewStyle>;
+  autoFocus?: boolean;
+}
+
+export function CodeInput({
+  length = 6,
+  value,
+  onChangeText,
+  onComplete,
+  style,
+  autoFocus = true,
+}: CodeInputProps) {
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [autoFocus]);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const cleaned = text.replace(/[^0-9]/g, '').slice(0, length);
+      onChangeText(cleaned);
+      if (cleaned.length === length) {
+        onComplete?.(cleaned);
+      }
+    },
+    [length, onChangeText, onComplete],
+  );
+
+  const digits = value.padEnd(length, '').split('');
+
+  return (
+    <View style={[styles.container, style]}>
+      <TextInput
+        ref={inputRef}
+        value={value}
+        onChangeText={handleChange}
+        keyboardType="number-pad"
+        maxLength={length}
+        style={styles.hiddenInput}
+        caretHidden
+      />
+      <View style={styles.digits}>
+        {digits.map((digit, index) => (
+          <View
+            key={index}
+            style={[
+              styles.digitBox,
+              index < value.length && styles.digitBoxFilled,
+              index === value.length && styles.digitBoxActive,
+            ]}
+          >
+            <View style={digit ? styles.dot : styles.dotEmpty} />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    opacity: 0,
+    width: '100%',
+    height: '100%',
+  },
+  digits: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 12,
+  },
+  digitBox: {
+    width: 48,
+    height: 56,
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.black,
+  },
+  digitBoxFilled: {
+    borderColor: Colors.white,
+  },
+  digitBoxActive: {
+    borderColor: Colors.purple1,
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: Colors.white,
+  },
+  dotEmpty: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: Colors.gray5,
+  },
+});

package/src/components/ux/inputs/DatePicker.tsx

@@ -0,0 +1,76 @@
+/**
+ * Date picker for birthdate selection.
+ * Ported from squad-demo/src/components/ux/inputs/DatePicker.tsx.
+ */
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Pressable, Platform } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface DatePickerProps {
+  value?: Date;
+  onChange: (date: Date) => void;
+  label?: string;
+  minimumAge?: number;
+}
+
+export default function DatePicker({ value, onChange, label, minimumAge = 13 }: DatePickerProps) {
+  const [showPicker, setShowPicker] = useState(false);
+
+  const maxDate = new Date();
+  maxDate.setFullYear(maxDate.getFullYear() - minimumAge);
+
+  const formatDate = (date?: Date) => {
+    if (!date) return 'Select date';
+    return date.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' });
+  };
+
+  const handlePress = async () => {
+    try {
+      const DateTimePicker = (await import('react-native-date-picker')).default;
+      setShowPicker(true);
+    } catch {
+      // react-native-date-picker not installed — use simple text fallback
+    }
+  };
+
+  return (
+    <View>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <Pressable
+        style={styles.container}
+        onPress={handlePress}
+        accessibilityRole="button"
+        accessibilityLabel={label ?? 'Select date'}
+      >
+        <Text style={[styles.text, !value && styles.placeholder]}>
+          {formatDate(value)}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    color: Colors.gray6,
+    fontSize: 12,
+    marginBottom: 8,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  container: {
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+    backgroundColor: Colors.black,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  text: {
+    color: Colors.white,
+    fontSize: 16,
+  },
+  placeholder: {
+    color: Colors.gray6,
+  },
+});

package/src/components/ux/inputs/MaskedTextInput.tsx

@@ -0,0 +1,95 @@
+/**
+ * Masked text input — for phone numbers, codes, etc.
+ * Ported from squad-demo/src/components/ux/inputs/MaskedTextInput.tsx.
+ */
+import React, { useCallback, useState } from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleProp,
+  TextInput,
+  TextInputFocusEventData,
+  ViewStyle,
+  TextInputProps,
+  StyleSheet,
+} from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+type MaskedTextInputProps = TextInputProps & {
+  focusStyle?: StyleProp<ViewStyle>;
+  mask?: (RegExp | string)[];
+  placeholderFillCharacter?: string;
+};
+
+const MaskedTextInput = React.forwardRef(function MaskedTextInputComponent(
+  { style, focusStyle, onFocus, onBlur, mask, onChangeText, value, placeholderFillCharacter, ...props }: MaskedTextInputProps,
+  ref,
+) {
+  const [focused, setFocused] = useState(false);
+
+  const handleFocus = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+
+  const handleChange = useCallback(
+    (text: string) => {
+      if (mask) {
+        // Apply mask — keep only characters matching mask patterns
+        let masked = '';
+        let textIdx = 0;
+        for (let i = 0; i < mask.length && textIdx < text.length; i++) {
+          const pattern = mask[i];
+          if (pattern instanceof RegExp) {
+            if (pattern.test(text[textIdx]!)) {
+              masked += text[textIdx]!;
+            }
+            textIdx++;
+          } else {
+            masked += pattern;
+            if (text[textIdx] === pattern) textIdx++;
+          }
+        }
+        onChangeText?.(masked);
+      } else {
+        onChangeText?.(text);
+      }
+    },
+    [mask, onChangeText],
+  );
+
+  return (
+    <TextInput
+      {...props}
+      value={value}
+      onChangeText={handleChange}
+      onFocus={handleFocus as any}
+      onBlur={handleBlur as any}
+      style={[styles.input, style, focused ? focusStyle : {}]}
+      ref={ref as any}
+      accessibilityRole="text"
+    />
+  );
+});
+
+export default MaskedTextInput;
+
+const styles = StyleSheet.create({
+  input: {
+    color: Colors.white,
+    fontSize: 24,
+    fontWeight: '500',
+    letterSpacing: 8,
+    textAlign: 'center',
+  },
+});

package/src/components/ux/inputs/PhoneNumberInput.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface PhoneNumberInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSubmitEditing?: () => void;
+  style?: StyleProp<ViewStyle>;
+  countryCode?: string;
+}
+
+export function PhoneNumberInput({
+  value,
+  onChangeText,
+  onSubmitEditing,
+  style,
+  countryCode = '+1',
+}: PhoneNumberInputProps) {
+  const [focused, setFocused] = useState(false);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      const cleaned = text.replace(/[^0-9]/g, '');
+      onChangeText(cleaned);
+    },
+    [onChangeText],
+  );
+
+  return (
+    <View style={[styles.container, focused && styles.containerFocused, style]}>
+      <View style={styles.countryCode}>
+        <Text style={styles.countryCodeText}>{countryCode}</Text>
+      </View>
+      <TextInput
+        value={value}
+        onChangeText={handleChange}
+        onSubmitEditing={onSubmitEditing}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder="Phone number"
+        placeholderTextColor={Colors.gray6}
+        keyboardType="phone-pad"
+        style={styles.input}
+        maxLength={15}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+    backgroundColor: Colors.black,
+    overflow: 'hidden',
+  },
+  containerFocused: {
+    borderColor: Colors.white,
+  },
+  countryCode: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRightWidth: 1,
+    borderRightColor: Colors.gray5,
+  },
+  countryCodeText: {
+    color: Colors.white,
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    color: Colors.white,
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

package/src/components/ux/inputs/SearchTextInput.tsx

@@ -0,0 +1,70 @@
+/**
+ * Search text input with debounced updates and search icon.
+ * Ported from squad-demo/src/components/ux/inputs/SearchTextInput.tsx.
+ */
+import React, { useCallback, useRef, useState } from 'react';
+import { View, StyleSheet, TextInputProps, Text } from 'react-native';
+import { TextInput } from './TextInput';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface SearchTextInputProps extends TextInputProps {
+  debounceUpdate?: (text: string) => void;
+  inputBackgroundColor?: string;
+}
+
+export default function SearchTextInput({
+  debounceUpdate,
+  inputBackgroundColor,
+  ...props
+}: SearchTextInputProps) {
+  const [searchText, setSearchText] = useState('');
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const handleChange = useCallback(
+    (text: string) => {
+      setSearchText(text);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        debounceUpdate?.(text);
+      }, 200);
+    },
+    [debounceUpdate],
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: inputBackgroundColor ?? Colors.gray1 }]}>
+      <Text style={styles.icon} accessibilityElementsHidden>Q</Text>
+      <TextInput
+        {...props}
+        style={styles.input}
+        value={searchText}
+        onChangeText={handleChange}
+        placeholderTextColor={Colors.gray6}
+        accessibilityLabel={props.accessibilityLabel ?? 'Search'}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  icon: {
+    marginRight: 8,
+    color: Colors.gray6,
+    fontSize: 16,
+  },
+  input: {
+    color: Colors.white,
+    flex: 1,
+    fontSize: 14,
+    paddingVertical: 8,
+  },
+});

package/src/components/ux/inputs/TextInput.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback, useState } from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleProp,
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  TextInputFocusEventData,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+
+type TextInputProps = RNTextInputProps & {
+  ref?: any;
+  focusStyle?: StyleProp<ViewStyle>;
+};
+
+export const TextInput = React.forwardRef(function TextInputComponent(
+  { style, onFocus, onBlur, focusStyle, ...props }: TextInputProps,
+  ref,
+) {
+  const [focused, setFocused] = useState(false);
+
+  const handleFocus = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+
+  return (
+    <RNTextInput
+      {...props}
+      onFocus={handleFocus as any}
+      onBlur={handleBlur as any}
+      textAlignVertical="center"
+      style={[styles.input, style, focused ? focusStyle : {}]}
+      ref={ref as any}
+      autoComplete="off"
+      accessibilityRole="text"
+      accessibilityLabel={props.accessibilityLabel ?? props.placeholder}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  input: {
+    textAlignVertical: 'center',
+  },
+});