@squad-sports/react-native 1.3.1

package/src/components/feed/PollCard.tsx

@@ -0,0 +1,158 @@
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import { TitleSmall, BodyRegular, BodySmall } from '../ux/text/Typography';
+
+interface PollOption {
+  id: string;
+  text: string;
+  percentage?: number;
+}
+
+interface PollCardProps {
+  id: string;
+  question: string;
+  options: PollOption[];
+  hasVoted: boolean;
+  selectedOptionId?: string;
+  totalVotes?: number;
+  onPress?: () => void;
+  primaryColor?: string;
+  sponsorBrandName?: string;
+  sponsorBrandImageUrl?: string;
+  sponsorPlacementId?: string;
+}
+
+function PollCard({
+  id,
+  question,
+  options,
+  hasVoted,
+  selectedOptionId,
+  totalVotes,
+  onPress,
+  primaryColor = Colors.purple1,
+  sponsorBrandName,
+}: PollCardProps) {
+  return (
+    <Pressable style={styles.card} onPress={onPress}>
+      {sponsorBrandName && (
+        <BodySmall style={styles.sponsorLabel}>
+          Presented by {sponsorBrandName}
+        </BodySmall>
+      )}
+      <TitleSmall style={styles.question}>{question}</TitleSmall>
+
+      <View style={styles.options}>
+        {options.slice(0, 4).map(option => {
+          const isSelected = selectedOptionId === option.id;
+          return (
+            <View key={option.id} style={styles.option}>
+              <View style={styles.optionHeader}>
+                <BodyRegular
+                  style={[styles.optionText, isSelected && { color: primaryColor }]}
+                >
+                  {option.text}
+                </BodyRegular>
+                {hasVoted && option.percentage !== undefined && (
+                  <BodySmall style={styles.percentage}>
+                    {Math.round(option.percentage)}%
+                  </BodySmall>
+                )}
+              </View>
+              {hasVoted && option.percentage !== undefined && (
+                <View style={styles.progressBg}>
+                  <View
+                    style={[
+                      styles.progressFill,
+                      {
+                        width: `${option.percentage}%`,
+                        backgroundColor: isSelected ? primaryColor : Colors.gray5,
+                      },
+                    ]}
+                  />
+                </View>
+              )}
+            </View>
+          );
+        })}
+      </View>
+
+      {totalVotes !== undefined && (
+        <BodySmall style={styles.totalVotes}>
+          {totalVotes} {totalVotes === 1 ? 'vote' : 'votes'}
+        </BodySmall>
+      )}
+
+      {!hasVoted && (
+        <View style={[styles.voteCta, { backgroundColor: primaryColor }]}>
+          <Text style={styles.voteCtaText}>Vote</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export default memo(PollCard);
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: Colors.gray2,
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 12,
+  },
+  sponsorLabel: {
+    color: Colors.gray6,
+    fontSize: 11,
+    marginBottom: 8,
+  },
+  question: {
+    color: Colors.white,
+    marginBottom: 16,
+  },
+  options: {
+    gap: 8,
+  },
+  option: {
+    gap: 6,
+  },
+  optionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  optionText: {
+    color: Colors.white,
+    flex: 1,
+  },
+  percentage: {
+    color: Colors.gray6,
+    fontWeight: '600',
+  },
+  progressBg: {
+    height: 4,
+    backgroundColor: Colors.gray3,
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  totalVotes: {
+    color: Colors.gray6,
+    marginTop: 12,
+    textAlign: 'center',
+  },
+  voteCta: {
+    marginTop: 12,
+    paddingVertical: 10,
+    borderRadius: 20,
+    alignItems: 'center',
+  },
+  voteCtaText: {
+    color: Colors.gray1,
+    fontWeight: '600',
+    fontSize: 14,
+  },
+});

package/src/components/feed/SponsoredContentCard.tsx

@@ -0,0 +1,118 @@
+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 { BodyRegular, BodySmall, SubtitleSmall } from '../ux/text/Typography';
+
+interface SponsoredContentCardProps {
+  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;
+}
+
+function SponsoredContentCard({
+  placementId,
+  brandName,
+  brandImageUrl,
+  headline,
+  bodyText,
+  ctaText,
+  ctaUrl,
+  onImpression,
+  onCtaPress,
+}: SponsoredContentCardProps) {
+  const viewStartRef = useRef<number>(Date.now());
+
+  useEffect(() => {
+    viewStartRef.current = Date.now();
+    const timer = setTimeout(() => {
+      const duration = Date.now() - viewStartRef.current;
+      onImpression?.(placementId, duration);
+    }, 1000); // 1 second threshold for sponsored content
+
+    return () => clearTimeout(timer);
+  }, [placementId, onImpression]);
+
+  const handleCtaPress = () => {
+    onCtaPress?.(placementId);
+    if (ctaUrl) {
+      Linking.openURL(ctaUrl).catch(() => {});
+    }
+  };
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <UserImage imageUrl={brandImageUrl} displayName={brandName} size={36} />
+        <View style={styles.headerText}>
+          <SubtitleSmall style={styles.brandName}>{brandName}</SubtitleSmall>
+          <BodySmall style={styles.sponsoredLabel}>Sponsored</BodySmall>
+        </View>
+      </View>
+
+      <BodyRegular style={styles.headline}>{headline}</BodyRegular>
+
+      {bodyText && (
+        <BodySmall style={styles.bodyText}>{bodyText}</BodySmall>
+      )}
+
+      {ctaText && (
+        <Pressable style={styles.ctaButton} onPress={handleCtaPress}>
+          <Text style={styles.ctaText}>{ctaText}</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+export default memo(SponsoredContentCard);
+
+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,
+  },
+  brandName: { color: Colors.white },
+  sponsoredLabel: { color: Colors.gray6, fontSize: 11 },
+  headline: {
+    color: Colors.white,
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  bodyText: {
+    color: Colors.gray8,
+    marginBottom: 12,
+  },
+  ctaButton: {
+    backgroundColor: Colors.gray3,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignSelf: 'flex-start',
+    marginTop: 4,
+  },
+  ctaText: {
+    color: Colors.white,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/components/freestyle/FreestyleComponents.tsx

@@ -0,0 +1,148 @@
+/**
+ * Full freestyle component system.
+ * Ported from squad-demo/src/components/freestyle/*.
+ * Components: FeedItem, FeedSectionHeader, UserListen, UserReaction,
+ *             UserReactionDetailed, CommunityUserReaction, card/ButtonWrapper, card/EmojiReactions.
+ */
+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 { AudioPlayerRow } from '../audio/AudioPlayerRow';
+import { BodySmall, BodyRegular, SubtitleSmall, TitleSmall } from '../ux/text/Typography';
+
+// --- FeedSectionHeader ---
+export function FreestyleFeedSectionHeader({ title, count }: { title: string; count?: number }) {
+  return (
+    <View style={styles.sectionHeader}>
+      <TitleSmall style={styles.sectionTitle}>{title}</TitleSmall>
+      {count !== undefined && <BodySmall style={styles.sectionCount}>{count}</BodySmall>}
+    </View>
+  );
+}
+
+// --- FeedItem (full freestyle card) ---
+export interface FreestyleFeedItemProps {
+  id: string;
+  audioUrl?: string;
+  duration?: number;
+  creatorName?: string;
+  creatorImageUrl?: string;
+  createdAt?: string;
+  listenCount?: number;
+  reactionCount?: number;
+  promptText?: string;
+  onPress?: () => void;
+  onReact?: (emoji: string) => void;
+  onListen?: () => void;
+  primaryColor?: string;
+}
+
+export const FreestyleFeedItem = memo(function FreestyleFeedItem({
+  audioUrl, duration, creatorName, creatorImageUrl, createdAt,
+  listenCount, reactionCount, promptText, onPress, onReact, primaryColor = Colors.purple1,
+}: FreestyleFeedItemProps) {
+  const formatTime = (date?: string) => {
+    if (!date) return '';
+    const d = new Date(date);
+    const diff = Date.now() - d.getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h`;
+    return `${Math.floor(hrs / 24)}d`;
+  };
+
+  return (
+    <Pressable style={styles.card} onPress={onPress}>
+      <View style={styles.cardHeader}>
+        <UserImage imageUrl={creatorImageUrl} displayName={creatorName} size={40} />
+        <View style={styles.cardHeaderText}>
+          <SubtitleSmall style={styles.cardCreatorName}>{creatorName}</SubtitleSmall>
+          <BodySmall style={styles.cardTimestamp}>{formatTime(createdAt)}</BodySmall>
+        </View>
+      </View>
+
+      {promptText && <BodyRegular style={styles.cardPrompt}>{promptText}</BodyRegular>}
+
+      {audioUrl && <AudioPlayerRow audioUrl={audioUrl} duration={duration} />}
+
+      <View style={styles.cardFooter}>
+        <Pressable style={styles.cardStat} onPress={() => onReact?.('fire')}>
+          <Text style={styles.cardStatIcon}>fire</Text>
+          <BodySmall style={styles.cardStatText}>{reactionCount ?? 0}</BodySmall>
+        </Pressable>
+        <View style={styles.cardStat}>
+          <Text style={styles.cardStatIcon}>ear</Text>
+          <BodySmall style={styles.cardStatText}>{listenCount ?? 0}</BodySmall>
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+// --- UserListen ---
+export function FreestyleUserListen({ userName, userImageUrl, listenedAt }: {
+  userName: string; userImageUrl?: string; listenedAt?: string;
+}) {
+  return (
+    <View style={styles.userListenRow}>
+      <UserImage imageUrl={userImageUrl} displayName={userName} size={36} />
+      <BodyRegular style={styles.userListenName}>{userName}</BodyRegular>
+      <BodySmall style={styles.userListenTime}>listened</BodySmall>
+    </View>
+  );
+}
+
+// --- UserReaction ---
+export function FreestyleUserReaction({ userName, userImageUrl, emoji }: {
+  userName: string; userImageUrl?: string; emoji: string;
+}) {
+  return (
+    <View style={styles.userListenRow}>
+      <UserImage imageUrl={userImageUrl} displayName={userName} size={36} />
+      <BodyRegular style={styles.userListenName}>{userName}</BodyRegular>
+      <Text style={styles.reactionEmoji}>{emoji}</Text>
+    </View>
+  );
+}
+
+// --- EmojiReactions bar (for cards) ---
+export function FreestyleEmojiReactions({
+  reactions, onReact,
+}: { reactions: Array<{ emoji: string; count: number }>; onReact?: (emoji: string) => void }) {
+  return (
+    <View style={styles.emojiBar}>
+      {reactions.map((r, i) => (
+        <Pressable key={i} style={styles.emojiItem} onPress={() => onReact?.(r.emoji)}>
+          <Text style={styles.emojiText}>{r.emoji}</Text>
+          <BodySmall style={styles.emojiCount}>{r.count}</BodySmall>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 24, paddingVertical: 8 },
+  sectionTitle: { color: Colors.white },
+  sectionCount: { color: Colors.gray6 },
+  card: { backgroundColor: Colors.gray2, borderRadius: 16, padding: 16, marginBottom: 12 },
+  cardHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
+  cardHeaderText: { marginLeft: 10, flex: 1 },
+  cardCreatorName: { color: Colors.white },
+  cardTimestamp: { color: Colors.gray6 },
+  cardPrompt: { color: Colors.gray8, marginBottom: 12, fontStyle: 'italic' },
+  cardFooter: { flexDirection: 'row', gap: 16, marginTop: 12, paddingTop: 12, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: Colors.gray3 },
+  cardStat: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  cardStatIcon: { color: Colors.gray6, fontSize: 14 },
+  cardStatText: { color: Colors.gray6 },
+  userListenRow: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 8, paddingHorizontal: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  userListenName: { color: Colors.white, flex: 1 },
+  userListenTime: { color: Colors.gray6 },
+  reactionEmoji: { fontSize: 20 },
+  emojiBar: { flexDirection: 'row', gap: 8, paddingVertical: 8 },
+  emojiItem: { flexDirection: 'row', alignItems: 'center', gap: 4, backgroundColor: Colors.gray3, borderRadius: 16, paddingVertical: 4, paddingHorizontal: 8 },
+  emojiText: { fontSize: 16 },
+  emojiCount: { color: Colors.gray6 },
+});

package/src/components/index.ts

@@ -0,0 +1,42 @@
+// Buttons
+export { default as Button } from './ux/buttons/Button';
+export type { ButtonProps } from './ux/buttons/Button';
+export { default as XButton } from './ux/buttons/XButton';
+
+// Inputs
+export { TextInput } from './ux/inputs/TextInput';
+export { PhoneNumberInput } from './ux/inputs/PhoneNumberInput';
+export { CodeInput } from './ux/inputs/CodeInput';
+
+// Layout
+export { default as Screen } from './ux/layout/Screen';
+export { default as ScreenHeader } from './ux/layout/ScreenHeader';
+export { default as LoadingOverlay } from './ux/layout/LoadingOverlay';
+export { default as AvoidKeyboardScreen } from './ux/layout/AvoidKeyboardScreen';
+export { Toast } from './ux/layout/Toast';
+export type { ToastType } from './ux/layout/Toast';
+
+// Typography
+export {
+  TitleLarge,
+  TitleRegular,
+  TitleMedium,
+  TitleSmall,
+  TitleTiny,
+  SubtitleSmall,
+  BodyRegular,
+  BodyMedium,
+  BodySmall,
+  ButtonLarge,
+  ButtonSmall,
+} from './ux/text/Typography';
+
+// Errors
+export { ErrorHint } from './ux/errors/ErrorHint';
+export { ScreenErrorBoundary } from './ErrorBoundary';
+
+// User Image
+export { default as UserImage } from './ux/user-image/UserImage';
+
+// Navigation
+export { default as BackButton } from './ux/navigation/BackButton';

package/src/components/message/MessageCard.tsx

@@ -0,0 +1,166 @@
+import React, { memo } 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 } from '../ux/text/Typography';
+
+interface MessageCardProps {
+  id: string;
+  text?: string;
+  audioUrl?: string;
+  audioDuration?: number;
+  isOwn: boolean;
+  senderName?: string;
+  senderImageUrl?: string;
+  timestamp?: string;
+  reactions?: Array<{ emoji: string; count: number }>;
+  primaryColor?: string;
+  onLongPress?: () => void;
+  onReact?: (emoji: string) => void;
+}
+
+function MessageCard({
+  id,
+  text,
+  audioUrl,
+  audioDuration,
+  isOwn,
+  senderName,
+  senderImageUrl,
+  timestamp,
+  reactions,
+  primaryColor = Colors.purple1,
+  onLongPress,
+  onReact,
+}: MessageCardProps) {
+  const formatTime = (ts?: string) => {
+    if (!ts) return '';
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  return (
+    <View style={[styles.container, isOwn && styles.containerOwn]}>
+      {!isOwn && (
+        <UserImage
+          imageUrl={senderImageUrl}
+          displayName={senderName}
+          size={32}
+        />
+      )}
+
+      <Pressable
+        style={[
+          styles.bubble,
+          isOwn
+            ? [styles.bubbleOwn, { backgroundColor: primaryColor }]
+            : styles.bubbleOther,
+        ]}
+        onLongPress={onLongPress}
+      >
+        {text && (
+          <BodyRegular
+            style={[
+              styles.text,
+              { color: isOwn ? Colors.gray1 : Colors.white },
+            ]}
+          >
+            {text}
+          </BodyRegular>
+        )}
+
+        {audioUrl && (
+          <View style={styles.audioContainer}>
+            <AudioPlayerRow audioUrl={audioUrl} duration={audioDuration} />
+          </View>
+        )}
+
+        {timestamp && (
+          <BodySmall style={[styles.time, { color: isOwn ? 'rgba(0,0,0,0.4)' : Colors.gray6 }]}>
+            {formatTime(timestamp)}
+          </BodySmall>
+        )}
+      </Pressable>
+
+      {reactions && reactions.length > 0 && (
+        <View style={styles.reactions}>
+          {reactions.map((r, i) => (
+            <Pressable
+              key={i}
+              style={styles.reaction}
+              onPress={() => onReact?.(r.emoji)}
+            >
+              <Text style={styles.reactionEmoji}>{r.emoji}</Text>
+              {r.count > 1 && (
+                <BodySmall style={styles.reactionCount}>{r.count}</BodySmall>
+              )}
+            </Pressable>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+export default memo(MessageCard);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 8,
+    maxWidth: '85%',
+    marginBottom: 4,
+  },
+  containerOwn: {
+    alignSelf: 'flex-end',
+    flexDirection: 'row-reverse',
+  },
+  bubble: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 18,
+    maxWidth: '100%',
+  },
+  bubbleOwn: {
+    borderBottomRightRadius: 4,
+  },
+  bubbleOther: {
+    backgroundColor: Colors.gray2,
+    borderBottomLeftRadius: 4,
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 20,
+  },
+  audioContainer: {
+    minWidth: 200,
+  },
+  time: {
+    marginTop: 4,
+    textAlign: 'right',
+    fontSize: 11,
+  },
+  reactions: {
+    flexDirection: 'row',
+    gap: 4,
+    marginTop: -4,
+    marginBottom: 4,
+  },
+  reaction: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.gray3,
+    borderRadius: 12,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+  },
+  reactionEmoji: {
+    fontSize: 14,
+  },
+  reactionCount: {
+    color: Colors.gray6,
+    marginLeft: 2,
+  },
+});