@squad-sports/react-native 1.3.1

package/src/components/dragAndDrop/DragAndDrop.tsx

@@ -0,0 +1,56 @@
+/**
+ * Drag and drop components for squad circle reordering.
+ * Ported from squad-demo/src/components/dragAndDrop/*.
+ */
+import React, { useRef, useState } from 'react';
+import { View, Text, StyleSheet, PanResponder, Animated, Dimensions } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+
+interface DraggableItem {
+  id: string;
+  displayName?: string;
+  imageUrl?: string;
+}
+
+// --- DragViewContainer ---
+export function DragViewContainer({
+  items, onReorder, renderItem,
+}: { items: DraggableItem[]; onReorder: (items: DraggableItem[]) => void; renderItem: (item: DraggableItem, index: number) => React.ReactNode }) {
+  return (
+    <View style={styles.container}>
+      {items.map((item, index) => (
+        <View key={item.id} style={styles.dragItem}>
+          {renderItem(item, index)}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// --- ProfilePlus (add button in drag grid) ---
+export function ProfilePlus({ onPress, color = Colors.purple1 }: { onPress: () => void; color?: string }) {
+  return (
+    <View style={[styles.profilePlus, { borderColor: color }]}>
+      <Text style={[styles.profilePlusIcon, { color }]}>+</Text>
+    </View>
+  );
+}
+
+// --- DragViewWarning ---
+export function DragViewWarning({ message }: { message: string }) {
+  return (
+    <View style={styles.warning}>
+      <Text style={styles.warningText}>{message}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 12, padding: 16 },
+  dragItem: { position: 'relative' },
+  profilePlus: { width: 56, height: 56, borderRadius: 28, borderWidth: 2, borderStyle: 'dashed', justifyContent: 'center', alignItems: 'center' },
+  profilePlusIcon: { fontSize: 24, fontWeight: '300' },
+  warning: { padding: 12, backgroundColor: 'rgba(233,120,92,0.14)', borderRadius: 8, marginHorizontal: 16 },
+  warningText: { color: Colors.orange1, fontSize: 13, textAlign: 'center' },
+});

package/src/components/events/EventComponents.tsx

@@ -0,0 +1,93 @@
+/**
+ * Event components.
+ * Ported from squad-demo/src/components/events/*.
+ */
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { TitleSmall, BodyRegular, BodyMedium, BodySmall } from '../ux/text/Typography';
+import Button from '../ux/buttons/Button';
+
+// --- EventCard ---
+export const EventCard = memo(function EventCard({
+  id, title, date, location, attendeeCount, isAttending, imageUrl,
+  onPress, onToggleAttend, primaryColor = Colors.purple1,
+}: {
+  id: string; title: string; date?: string; location?: string;
+  attendeeCount: number; isAttending: boolean; imageUrl?: string;
+  onPress?: () => void; onToggleAttend?: () => void; primaryColor?: string;
+}) {
+  return (
+    <Pressable style={styles.card} onPress={onPress}>
+      {imageUrl && <View style={styles.cardImage}><BodySmall style={styles.cardImageText}>Event</BodySmall></View>}
+      <View style={styles.cardContent}>
+        <TitleSmall style={styles.cardTitle}>{title}</TitleSmall>
+        {date && <BodyMedium style={[styles.cardDate, { color: primaryColor }]}>{date}</BodyMedium>}
+        {location && <BodySmall style={styles.cardLocation}>{location}</BodySmall>}
+        <View style={styles.cardFooter}>
+          <BodySmall style={styles.attendeeCount}>{attendeeCount} attending</BodySmall>
+          <Button
+            style={[styles.attendBtn, isAttending ? styles.attendBtnActive : { backgroundColor: primaryColor }]}
+            onPress={onToggleAttend}
+          >
+            <Text style={[styles.attendBtnText, isAttending && styles.attendBtnTextActive]}>
+              {isAttending ? 'Going' : 'Attend'}
+            </Text>
+          </Button>
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+// --- EventsHeader ---
+export function EventsHeader({ title = 'Events' }: { title?: string }) {
+  return (
+    <View style={styles.header}>
+      <TitleSmall style={styles.headerTitle}>{title}</TitleSmall>
+    </View>
+  );
+}
+
+// --- EventsAttendeesBottomSheet ---
+export function EventsAttendeesBottomSheet({
+  attendees, title = 'Attendees',
+}: { attendees: Array<{ id: string; name: string; imageUrl?: string }>; title?: string }) {
+  return (
+    <View>
+      <TitleSmall style={styles.attendeesTitle}>{title} ({attendees.length})</TitleSmall>
+      <FlatList
+        data={attendees}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => (
+          <View style={styles.attendeeRow}>
+            <UserImage imageUrl={item.imageUrl} displayName={item.name} size={40} />
+            <BodyRegular style={styles.attendeeName}>{item.name}</BodyRegular>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { backgroundColor: Colors.gray2, borderRadius: 16, overflow: 'hidden', marginBottom: 16 },
+  cardImage: { height: 140, backgroundColor: Colors.gray3, justifyContent: 'center', alignItems: 'center' },
+  cardImageText: { color: Colors.gray6 },
+  cardContent: { padding: 16 },
+  cardTitle: { color: Colors.white, marginBottom: 4 },
+  cardDate: { marginBottom: 2 },
+  cardLocation: { color: Colors.gray6, marginBottom: 12 },
+  cardFooter: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  attendeeCount: { color: Colors.gray6 },
+  attendBtn: { paddingVertical: 8, paddingHorizontal: 20, borderRadius: 16 },
+  attendBtnActive: { backgroundColor: 'transparent', borderWidth: 1, borderColor: Colors.green },
+  attendBtnText: { color: Colors.gray1, fontSize: 13, fontWeight: '600' },
+  attendBtnTextActive: { color: Colors.green },
+  header: { paddingHorizontal: 24, paddingVertical: 12 },
+  headerTitle: { color: Colors.white },
+  attendeesTitle: { color: Colors.white, paddingHorizontal: 16, paddingVertical: 12 },
+  attendeeRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8, paddingHorizontal: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  attendeeName: { color: Colors.white },
+});

package/src/components/feed/ChatBannerCard.tsx

@@ -0,0 +1,94 @@
+import React, { memo, useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Pressable, Linking } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { BodySmall } from '../ux/text/Typography';
+
+interface ChatBannerCardProps {
+  placementId: string;
+  brandName: string;
+  brandImageUrl?: string;
+  headline: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  onImpression?: (placementId: string, durationMs: number) => void;
+  onCtaPress?: (placementId: string) => void;
+}
+
+function ChatBannerCard({
+  placementId,
+  brandName,
+  brandImageUrl,
+  headline,
+  ctaText,
+  ctaUrl,
+  onImpression,
+  onCtaPress,
+}: ChatBannerCardProps) {
+  const viewStartRef = useRef<number>(Date.now());
+
+  useEffect(() => {
+    viewStartRef.current = Date.now();
+    const timer = setTimeout(() => {
+      const duration = Date.now() - viewStartRef.current;
+      onImpression?.(placementId, duration);
+    }, 5000); // 5 second threshold for chat banners
+
+    return () => clearTimeout(timer);
+  }, [placementId, onImpression]);
+
+  const handlePress = () => {
+    onCtaPress?.(placementId);
+    if (ctaUrl) {
+      Linking.openURL(ctaUrl).catch(() => {});
+    }
+  };
+
+  return (
+    <Pressable style={styles.banner} onPress={handlePress}>
+      <UserImage imageUrl={brandImageUrl} displayName={brandName} size={28} />
+      <View style={styles.content}>
+        <BodySmall style={styles.headline} numberOfLines={1}>{headline}</BodySmall>
+      </View>
+      {ctaText && (
+        <View style={styles.ctaBadge}>
+          <Text style={styles.ctaText}>{ctaText}</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export default memo(ChatBannerCard);
+
+const styles = StyleSheet.create({
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.gray2,
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginHorizontal: 16,
+    marginBottom: 8,
+    gap: 10,
+  },
+  content: {
+    flex: 1,
+  },
+  headline: {
+    color: Colors.white,
+    fontWeight: '500',
+  },
+  ctaBadge: {
+    backgroundColor: Colors.gray3,
+    borderRadius: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+  },
+  ctaText: {
+    color: Colors.white,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/src/components/feed/FeedLoadingSkeleton.tsx

@@ -0,0 +1,43 @@
+/**
+ * Feed loading skeleton.
+ * Ported from squad-demo/src/components/feed/FeedLoadingSkeleton.tsx.
+ */
+import React from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+
+function SkeletonBar({ width, height = 12, marginBottom = 8 }: { width: string | number; height?: number; marginBottom?: number }) {
+  return <View style={[styles.bar, { width: width as any, height, marginBottom }]} />;
+}
+
+export default function FeedLoadingSkeleton({ count = 3 }: { count?: number }) {
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: count }, (_, i) => (
+        <View key={i} style={styles.card}>
+          <View style={styles.header}>
+            <View style={styles.avatar} />
+            <View>
+              <SkeletonBar width={100} height={14} />
+              <SkeletonBar width={60} height={10} />
+            </View>
+          </View>
+          <SkeletonBar width="100%" height={48} marginBottom={12} />
+          <View style={styles.footer}>
+            <SkeletonBar width={60} height={10} />
+            <SkeletonBar width={60} height={10} />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { paddingHorizontal: 24, gap: 12 },
+  card: { backgroundColor: Colors.gray2, borderRadius: 16, padding: 16 },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 12 },
+  avatar: { width: 40, height: 40, borderRadius: 20, backgroundColor: Colors.gray3 },
+  bar: { backgroundColor: Colors.gray3, borderRadius: 4 },
+  footer: { flexDirection: 'row', gap: 16, paddingTop: 12, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: Colors.gray3 },
+});

package/src/components/feed/FreestyleCard.tsx

@@ -0,0 +1,119 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { AudioPlayerRow } from '../audio/AudioPlayerRow';
+import { BodyRegular, BodySmall, SubtitleSmall } from '../ux/text/Typography';
+
+interface FreestyleCardProps {
+  id: string;
+  audioUrl?: string;
+  duration?: number;
+  creatorName?: string;
+  creatorImageUrl?: string;
+  createdAt?: string;
+  listenCount?: number;
+  reactionCount?: number;
+  prompt?: string;
+  onPress?: () => void;
+  onReact?: (emoji: string) => void;
+}
+
+function FreestyleCard({
+  id,
+  audioUrl,
+  duration,
+  creatorName,
+  creatorImageUrl,
+  createdAt,
+  listenCount,
+  reactionCount,
+  prompt,
+  onPress,
+  onReact,
+}: FreestyleCardProps) {
+  const formatTime = (date?: string) => {
+    if (!date) return '';
+    const d = new Date(date);
+    const now = new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    if (diffMins < 60) return `${diffMins}m`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h`;
+    return `${Math.floor(diffHours / 24)}d`;
+  };
+
+  return (
+    <Pressable style={styles.card} onPress={onPress}>
+      <View style={styles.header}>
+        <UserImage imageUrl={creatorImageUrl} displayName={creatorName} size={40} />
+        <View style={styles.headerText}>
+          <SubtitleSmall style={styles.creatorName}>{creatorName}</SubtitleSmall>
+          <BodySmall style={styles.timestamp}>{formatTime(createdAt)}</BodySmall>
+        </View>
+      </View>
+
+      {prompt && (
+        <BodyRegular style={styles.prompt}>{prompt}</BodyRegular>
+      )}
+
+      {audioUrl && (
+        <AudioPlayerRow audioUrl={audioUrl} duration={duration} />
+      )}
+
+      <View style={styles.footer}>
+        <Pressable style={styles.stat} onPress={() => onReact?.('fire')}>
+          <Text style={styles.statIcon}>{'fire'}</Text>
+          <BodySmall style={styles.statText}>{reactionCount ?? 0}</BodySmall>
+        </Pressable>
+        <View style={styles.stat}>
+          <Text style={styles.statIcon}>{'ear'}</Text>
+          <BodySmall style={styles.statText}>{listenCount ?? 0}</BodySmall>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export default memo(FreestyleCard);
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 12,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  headerText: {
+    marginLeft: 10,
+    flex: 1,
+  },
+  creatorName: { color: Colors.white },
+  timestamp: { color: Colors.gray6 },
+  prompt: {
+    color: Colors.gray8,
+    marginBottom: 12,
+    fontStyle: 'italic',
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: 16,
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: Colors.gray3,
+  },
+  stat: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  statIcon: { color: Colors.gray6, fontSize: 14 },
+  statText: { color: Colors.gray6 },
+});

package/src/components/feed/InterstitialOverlay.tsx

@@ -0,0 +1,190 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, Linking, Modal, Dimensions } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { BodyRegular, BodySmall, SubtitleSmall, TitleMedium } from '../ux/text/Typography';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+const AUTO_DISMISS_MS = 5000;
+
+interface InterstitialOverlayProps {
+  placementId: string;
+  brandName: string;
+  brandImageUrl?: string;
+  headline: string;
+  bodyText?: string;
+  imageUrl?: string;
+  ctaText?: string;
+  ctaUrl?: string;
+  onImpression?: (placementId: string, durationMs: number) => void;
+  onCtaPress?: (placementId: string) => void;
+  onDismiss?: (placementId: string) => void;
+  visible: boolean;
+}
+
+function InterstitialOverlay({
+  placementId,
+  brandName,
+  brandImageUrl,
+  headline,
+  bodyText,
+  ctaText,
+  ctaUrl,
+  onImpression,
+  onCtaPress,
+  onDismiss,
+  visible,
+}: InterstitialOverlayProps) {
+  const viewStartRef = useRef<number>(0);
+  const [countdown, setCountdown] = useState(5);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    viewStartRef.current = Date.now();
+    setCountdown(5);
+
+    // Impression after 1 second
+    const impressionTimer = setTimeout(() => {
+      onImpression?.(placementId, 1000);
+    }, 1000);
+
+    // Countdown ticker
+    const tickInterval = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(tickInterval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    // Auto-dismiss after 5 seconds
+    const dismissTimer = setTimeout(() => {
+      onDismiss?.(placementId);
+    }, AUTO_DISMISS_MS);
+
+    return () => {
+      clearTimeout(impressionTimer);
+      clearInterval(tickInterval);
+      clearTimeout(dismissTimer);
+    };
+  }, [visible, placementId, onImpression, onDismiss]);
+
+  const handleCtaPress = () => {
+    onCtaPress?.(placementId);
+    if (ctaUrl) {
+      Linking.openURL(ctaUrl).catch(() => {});
+    }
+    onDismiss?.(placementId);
+  };
+
+  const handleDismiss = () => {
+    onDismiss?.(placementId);
+  };
+
+  return (
+    <Modal visible={visible} transparent animationType="fade">
+      <View style={styles.overlay}>
+        <View style={styles.card}>
+          {/* Dismiss button */}
+          <Pressable style={styles.dismissButton} onPress={handleDismiss}>
+            <Text style={styles.dismissText}>
+              {countdown > 0 ? String(countdown) : 'X'}
+            </Text>
+          </Pressable>
+
+          {/* Brand header */}
+          <View style={styles.brandRow}>
+            <UserImage imageUrl={brandImageUrl} displayName={brandName} size={32} />
+            <BodySmall style={styles.brandName}>{brandName}</BodySmall>
+          </View>
+
+          {/* Content */}
+          <TitleMedium style={styles.headline}>{headline}</TitleMedium>
+
+          {bodyText && (
+            <BodyRegular style={styles.bodyText}>{bodyText}</BodyRegular>
+          )}
+
+          {/* CTA */}
+          {ctaText && (
+            <Pressable style={styles.ctaButton} onPress={handleCtaPress}>
+              <Text style={styles.ctaText}>{ctaText}</Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+export default memo(InterstitialOverlay);
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 32,
+  },
+  card: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 20,
+    padding: 28,
+    width: SCREEN_WIDTH - 64,
+    maxHeight: SCREEN_HEIGHT * 0.7,
+    alignItems: 'center',
+  },
+  dismissButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: Colors.gray3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  dismissText: {
+    color: Colors.white,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  brandRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 20,
+    marginTop: 8,
+  },
+  brandName: {
+    color: Colors.gray6,
+  },
+  headline: {
+    color: Colors.white,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  bodyText: {
+    color: Colors.gray8,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  ctaButton: {
+    backgroundColor: '#6E82E7',
+    borderRadius: 10,
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    marginTop: 8,
+  },
+  ctaText: {
+    color: Colors.white,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});