@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1 → 0.0.1-alpha.3

package/examples/sample-expo-app/app/_layout.tsx

@@ -1,53 +0,0 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { useFonts } from 'expo-font'
-import { Stack } from 'expo-router'
-import { StatusBar } from 'expo-status-bar'
-import 'react-native-reanimated'
-
-import { useColorScheme } from '@/hooks/useColorScheme'
-import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
-
-SessionRecorder.init({
-  version: '0.0.1',
-  application: 'multiplayer-web-app',
-  environment: 'development',
-  apiKey:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbnRlZ3JhdGlvbiI6IjY4NGZlMDljMjA0NmYwYjM0ZjU5ZDNjYyIsIndvcmtzcGFjZSI6IjY4NGMzYmYwYjQ2MGUzMmY3YWJmZjRlMSIsInByb2plY3QiOiI2ODRjM2M0MmI0NjBlMzJmN2FiZmY1YzgiLCJ0eXBlIjoiT1RFTCIsImlhdCI6MTc1MDA2NTMwOH0.F15dW5RUHtq4-e2FUZD_vK0FJ5USs8SRFbnPYO_0XVk',
-  apiBaseUrl: 'http://localhost',
-  exporterEndpoint: 'http://localhost/v1/traces',
-  showWidget: true,
-  ignoreUrls: [
-    /posthog\.com.*/,
-    /https:\/\/bam\.nr-data\.net\/.*/,
-    /https:\/\/cdn\.jsdelivr\.net\/.*/,
-    /https:\/\/pixel\.source\.app\/.*/
-  ]
-  // propagateTraceHeaderCorsUrls: new RegExp(
-  //   `${process.env.REACT_APP_API_BASE_URL}\.*`,
-  //   "i"
-  // ),
-})
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme()
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf')
-  })
-
-  if (!loaded) {
-    // Async font loading only occurs in development.
-    return null
-  }
-
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
-        <Stack.Screen name='post/[id]' options={{ headerShown: false }} />
-        <Stack.Screen name='user/[id]' options={{ headerShown: false }} />
-        <Stack.Screen name='+not-found' />
-      </Stack>
-      <StatusBar style='auto' />
-    </ThemeProvider>
-  )
-}

package/examples/sample-expo-app/app/post/[id].tsx

@@ -1,199 +0,0 @@
-import React from 'react'
-import { ScrollView, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
-import { useLocalSearchParams, router } from 'expo-router'
-import { ThemedView } from '@/components/ThemedView'
-import { ThemedText } from '@/components/ThemedText'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { ErrorView } from '@/components/ErrorView'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import { useApi } from '@/hooks/useApi'
-import { apiService, Comment } from '@/services/api'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function PostDetailScreen() {
-  const { id } = useLocalSearchParams<{ id: string }>()
-  const postId = parseInt(id!)
-  const colorScheme = useColorScheme()
-
-  const {
-    data: post,
-    loading: postLoading,
-    error: postError,
-    refetch: refetchPost
-  } = useApi(() => apiService.getPost(postId), [postId])
-
-  const {
-    data: comments,
-    loading: commentsLoading,
-    error: commentsError,
-    refetch: refetchComments
-  } = useApi(() => apiService.getPostComments(postId), [postId])
-
-  const handleUserPress = (userId: number) => {
-    router.push(`/user/${userId}`)
-  }
-
-  const renderComment = ({ item }: { item: Comment }) => (
-    <ThemedView style={styles.commentCard}>
-      <ThemedView style={styles.commentHeader}>
-        <ThemedText type='defaultSemiBold' style={styles.commentName}>
-          {item.name}
-        </ThemedText>
-        <ThemedText style={styles.commentEmail}>{item.email}</ThemedText>
-      </ThemedView>
-      <ThemedText style={styles.commentBody}>{item.body}</ThemedText>
-    </ThemedView>
-  )
-
-  if (postLoading) {
-    return <LoadingSpinner message='Loading post...' />
-  }
-
-  if (postError) {
-    return <ErrorView message={postError} onRetry={refetchPost} />
-  }
-
-  if (!post) {
-    return <ErrorView message='Post not found' />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      {/* Header */}
-      <ThemedView style={styles.header}>
-        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-          <IconSymbol name='chevron.left' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-        <ThemedText type='title' style={styles.headerTitle}>
-          Post Details
-        </ThemedText>
-      </ThemedView>
-
-      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-        {/* Post Content */}
-        <ThemedView style={styles.postCard}>
-          <ThemedText type='title' style={styles.postTitle}>
-            {post.title}
-          </ThemedText>
-          <ThemedText style={styles.postBody}>{post.body}</ThemedText>
-
-          <TouchableOpacity style={styles.userButton} onPress={() => handleUserPress(post.userId)}>
-            <IconSymbol name='person.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-            <ThemedText style={styles.userButtonText}>View User {post.userId}</ThemedText>
-            <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-          </TouchableOpacity>
-        </ThemedView>
-
-        {/* Comments Section */}
-        <ThemedView style={styles.commentsSection}>
-          <ThemedText type='subtitle' style={styles.commentsTitle}>
-            Comments ({comments?.length || 0})
-          </ThemedText>
-
-          {commentsLoading ? (
-            <LoadingSpinner message='Loading comments...' />
-          ) : commentsError ? (
-            <ErrorView message={commentsError} onRetry={refetchComments} />
-          ) : comments && comments.length > 0 ? (
-            <FlatList
-              data={comments}
-              renderItem={renderComment}
-              keyExtractor={(item) => item.id.toString()}
-              scrollEnabled={false}
-              showsVerticalScrollIndicator={false}
-            />
-          ) : (
-            <ThemedText style={styles.noComments}>No comments yet</ThemedText>
-          )}
-        </ThemedView>
-      </ScrollView>
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  backButton: {
-    marginRight: 16
-  },
-  headerTitle: {
-    flex: 1
-  },
-  content: {
-    flex: 1,
-    padding: 20
-  },
-  postCard: {
-    padding: 20,
-    marginBottom: 20,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  postTitle: {
-    marginBottom: 16,
-    lineHeight: 28
-  },
-  postBody: {
-    marginBottom: 20,
-    lineHeight: 22
-  },
-  userButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  userButtonText: {
-    flex: 1,
-    marginLeft: 8,
-    marginRight: 8
-  },
-  commentsSection: {
-    marginBottom: 20
-  },
-  commentsTitle: {
-    marginBottom: 16
-  },
-  commentCard: {
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)'
-  },
-  commentHeader: {
-    marginBottom: 8
-  },
-  commentName: {
-    marginBottom: 2
-  },
-  commentEmail: {
-    fontSize: 12,
-    opacity: 0.6
-  },
-  commentBody: {
-    lineHeight: 18
-  },
-  noComments: {
-    textAlign: 'center',
-    opacity: 0.6,
-    fontStyle: 'italic',
-    padding: 20
-  }
-})

package/examples/sample-expo-app/app/user/[id].tsx

@@ -1,270 +0,0 @@
-import React from 'react'
-import { ScrollView, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
-import { useLocalSearchParams, router } from 'expo-router'
-import { ThemedView } from '@/components/ThemedView'
-import { ThemedText } from '@/components/ThemedText'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { ErrorView } from '@/components/ErrorView'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import { useApi } from '@/hooks/useApi'
-import { apiService, Post } from '@/services/api'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function UserDetailScreen() {
-  const { id } = useLocalSearchParams<{ id: string }>()
-  const userId = parseInt(id!)
-  const colorScheme = useColorScheme()
-
-  const {
-    data: user,
-    loading: userLoading,
-    error: userError,
-    refetch: refetchUser
-  } = useApi(() => apiService.getUser(userId), [userId])
-
-  const {
-    data: posts,
-    loading: postsLoading,
-    error: postsError,
-    refetch: refetchPosts
-  } = useApi(() => apiService.getUserPosts(userId), [userId])
-
-  const handlePostPress = (post: Post) => {
-    router.push(`/post/${post.id}`)
-  }
-
-  const renderPost = ({ item }: { item: Post }) => (
-    <TouchableOpacity style={styles.postCard} onPress={() => handlePostPress(item)} activeOpacity={0.7}>
-      <ThemedText type='subtitle' style={styles.postTitle}>
-        {item.title}
-      </ThemedText>
-      <ThemedText style={styles.postBody} numberOfLines={2}>
-        {item.body}
-      </ThemedText>
-      <ThemedText style={styles.postMeta}>Post ID: {item.id}</ThemedText>
-    </TouchableOpacity>
-  )
-
-  if (userLoading) {
-    return <LoadingSpinner message='Loading user...' />
-  }
-
-  if (userError) {
-    return <ErrorView message={userError} onRetry={refetchUser} />
-  }
-
-  if (!user) {
-    return <ErrorView message='User not found' />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      {/* Header */}
-      <ThemedView style={styles.header}>
-        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
-          <IconSymbol name='chevron.left' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-        <ThemedText type='title' style={styles.headerTitle}>
-          User Profile
-        </ThemedText>
-      </ThemedView>
-
-      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-        {/* User Info Card */}
-        <ThemedView style={styles.userCard}>
-          <ThemedView style={styles.userAvatar}>
-            <IconSymbol name='person.fill' size={32} color={Colors[colorScheme ?? 'light'].tint} />
-          </ThemedView>
-
-          <ThemedText type='title' style={styles.userName}>
-            {user.name}
-          </ThemedText>
-          <ThemedText style={styles.userUsername}>@{user.username}</ThemedText>
-
-          <ThemedView style={styles.userDetails}>
-            <ThemedView style={styles.detailRow}>
-              <IconSymbol name='envelope.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-              <ThemedText style={styles.detailText}>{user.email}</ThemedText>
-            </ThemedView>
-
-            <ThemedView style={styles.detailRow}>
-              <IconSymbol name='phone.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-              <ThemedText style={styles.detailText}>{user.phone}</ThemedText>
-            </ThemedView>
-
-            <ThemedView style={styles.detailRow}>
-              <IconSymbol name='globe' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-              <ThemedText style={styles.detailText}>{user.website}</ThemedText>
-            </ThemedView>
-          </ThemedView>
-
-          <ThemedView style={styles.companySection}>
-            <ThemedText type='subtitle' style={styles.sectionTitle}>
-              Company
-            </ThemedText>
-            <ThemedText style={styles.companyName}>{user.company.name}</ThemedText>
-            <ThemedText style={styles.companyCatchPhrase}>&ldquo;{user.company.catchPhrase}&rdquo;</ThemedText>
-          </ThemedView>
-
-          <ThemedView style={styles.addressSection}>
-            <ThemedText type='subtitle' style={styles.sectionTitle}>
-              Address
-            </ThemedText>
-            <ThemedText style={styles.addressText}>
-              {user.address.street}, {user.address.suite}
-            </ThemedText>
-            <ThemedText style={styles.addressText}>
-              {user.address.city}, {user.address.zipcode}
-            </ThemedText>
-          </ThemedView>
-        </ThemedView>
-
-        {/* Posts Section */}
-        <ThemedView style={styles.postsSection}>
-          <ThemedText type='subtitle' style={styles.postsTitle}>
-            Posts ({posts?.length || 0})
-          </ThemedText>
-
-          {postsLoading ? (
-            <LoadingSpinner message='Loading posts...' />
-          ) : postsError ? (
-            <ErrorView message={postsError} onRetry={refetchPosts} />
-          ) : posts && posts.length > 0 ? (
-            <FlatList
-              data={posts}
-              renderItem={renderPost}
-              keyExtractor={(item) => item.id.toString()}
-              scrollEnabled={false}
-              showsVerticalScrollIndicator={false}
-            />
-          ) : (
-            <ThemedText style={styles.noPosts}>No posts yet</ThemedText>
-          )}
-        </ThemedView>
-      </ScrollView>
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  backButton: {
-    marginRight: 16
-  },
-  headerTitle: {
-    flex: 1
-  },
-  content: {
-    flex: 1,
-    padding: 20
-  },
-  userCard: {
-    padding: 20,
-    marginBottom: 20,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)',
-    alignItems: 'center'
-  },
-  userAvatar: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 16
-  },
-  userName: {
-    marginBottom: 4,
-    textAlign: 'center'
-  },
-  userUsername: {
-    fontSize: 16,
-    opacity: 0.7,
-    marginBottom: 20
-  },
-  userDetails: {
-    width: '100%',
-    marginBottom: 20
-  },
-  detailRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8
-  },
-  detailText: {
-    marginLeft: 8,
-    flex: 1
-  },
-  companySection: {
-    width: '100%',
-    marginBottom: 16,
-    padding: 16,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)'
-  },
-  sectionTitle: {
-    marginBottom: 8
-  },
-  companyName: {
-    marginBottom: 4,
-    fontWeight: '600'
-  },
-  companyCatchPhrase: {
-    fontSize: 14,
-    opacity: 0.8,
-    fontStyle: 'italic'
-  },
-  addressSection: {
-    width: '100%',
-    padding: 16,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)'
-  },
-  addressText: {
-    marginBottom: 2
-  },
-  postsSection: {
-    marginBottom: 20
-  },
-  postsTitle: {
-    marginBottom: 16
-  },
-  postCard: {
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)'
-  },
-  postTitle: {
-    marginBottom: 8
-  },
-  postBody: {
-    marginBottom: 8,
-    lineHeight: 18
-  },
-  postMeta: {
-    fontSize: 12,
-    opacity: 0.6
-  },
-  noPosts: {
-    textAlign: 'center',
-    opacity: 0.6,
-    fontStyle: 'italic',
-    padding: 20
-  }
-})

package/examples/sample-expo-app/app.json

@@ -1,42 +0,0 @@
-{
-  "expo": {
-    "name": "sample-expo-app",
-    "slug": "sample-expo-app",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "sampleexpoapp",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
-      "edgeToEdgeEnabled": true
-    },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-splash-screen",
-        {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
-          "backgroundColor": "#ffffff"
-        }
-      ]
-    ],
-    "experiments": {
-      "typedRoutes": true
-    }
-  }
-}

package/examples/sample-expo-app/components/Collapsible.tsx

@@ -1,45 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const theme = useColorScheme() ?? 'light';
-
-  return (
-    <ThemedView>
-      <TouchableOpacity
-        style={styles.heading}
-        onPress={() => setIsOpen((value) => !value)}
-        activeOpacity={0.8}>
-        <IconSymbol
-          name="chevron.right"
-          size={18}
-          weight="medium"
-          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
-          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
-        />
-
-        <ThemedText type="defaultSemiBold">{title}</ThemedText>
-      </TouchableOpacity>
-      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  content: {
-    marginTop: 6,
-    marginLeft: 24,
-  },
-});

package/examples/sample-expo-app/components/ErrorView.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-import { ThemedView } from './ThemedView'
-import { ThemedText } from './ThemedText'
-import { IconSymbol } from './ui/IconSymbol'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-interface ErrorViewProps {
-  message: string
-  onRetry?: () => void
-}
-
-export function ErrorView({ message, onRetry }: ErrorViewProps) {
-  const colorScheme = useColorScheme()
-
-  return (
-    <ThemedView style={styles.container}>
-      <IconSymbol name='exclamationmark.triangle.fill' size={48} color={Colors[colorScheme ?? 'light'].tint} />
-      <ThemedText style={styles.message}>{message}</ThemedText>
-      {onRetry && (
-        <TouchableOpacity style={styles.retryButton} onPress={onRetry}>
-          <ThemedText style={styles.retryText}>Try Again</ThemedText>
-        </TouchableOpacity>
-      )}
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20
-  },
-  message: {
-    marginTop: 16,
-    textAlign: 'center',
-    marginBottom: 20
-  },
-  retryButton: {
-    backgroundColor: Colors.light.tint,
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 8
-  },
-  retryText: {
-    color: 'white',
-    fontWeight: '600'
-  }
-})