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

package/examples/sample-expo-app/README.md

@@ -1,142 +0,0 @@
-# Enhanced Sample Expo React Native App
-
-This is an enhanced sample Expo React Native app that demonstrates multiple pages, navigation, and API integration with JSONPlaceholder.
-
-## Features
-
-### 🏠 Home Screen
-
-- Welcome page with feature overview
-- Quick navigation to Posts and Users sections
-- Information about the app's capabilities
-
-### 📝 Posts Tab
-
-- Displays posts from JSONPlaceholder API
-- Pull-to-refresh functionality
-- Tap to view post details with comments
-- Loading states and error handling
-
-### 👥 Users Tab
-
-- Shows user profiles from JSONPlaceholder API
-- User avatars and basic information
-- Tap to view detailed user profiles
-- Displays user's posts
-
-### 📄 Post Details
-
-- Full post content with title and body
-- Comments section with all post comments
-- Navigation to user profile
-- Back navigation
-
-### 👤 User Details
-
-- Complete user profile information
-- Contact details (email, phone, website)
-- Company information
-- Address details
-- User's posts list
-- Navigation to individual posts
-
-## API Integration
-
-The app integrates with [JSONPlaceholder](https://jsonplaceholder.typicode.com/) API to demonstrate:
-
-- **Posts API**: Fetch all posts, individual posts, and post comments
-- **Users API**: Fetch all users, individual users, and user posts
-- **Error Handling**: Proper error states with retry functionality
-- **Loading States**: Loading spinners and progress indicators
-- **Data Management**: Custom hooks for API state management
-
-## Technical Stack
-
-- **Expo Router**: File-based navigation
-- **React Native**: Cross-platform mobile development
-- **TypeScript**: Type-safe development
-- **Axios**: HTTP client for API requests
-- **Custom Hooks**: Reusable API state management
-- **Themed Components**: Consistent UI with dark/light mode support
-
-## Project Structure
-
-```
-app/
-├── (tabs)/
-│   ├── index.tsx          # Home screen
-│   ├── posts.tsx          # Posts list
-│   ├── users.tsx          # Users list
-│   ├── explore.tsx        # Original explore screen
-│   └── _layout.tsx        # Tab navigation layout
-├── post/
-│   └── [id].tsx           # Post detail page
-├── user/
-│   └── [id].tsx           # User detail page
-└── _layout.tsx            # Root layout
-
-components/
-├── LoadingSpinner.tsx     # Loading component
-├── ErrorView.tsx          # Error display component
-└── ...                    # Other UI components
-
-services/
-└── api.ts                # API service with JSONPlaceholder integration
-
-hooks/
-└── useApi.ts             # Custom hook for API state management
-```
-
-## Getting Started
-
-1. Install dependencies:
-
-   ```bash
-   npm install
-   ```
-
-2. Start the development server:
-
-   ```bash
-   npm start
-   ```
-
-3. Run on your preferred platform:
-   ```bash
-   npm run ios     # iOS simulator
-   npm run android # Android emulator
-   npm run web     # Web browser
-   ```
-
-## API Endpoints Used
-
-- `GET /posts` - Fetch all posts
-- `GET /posts/:id` - Fetch specific post
-- `GET /posts/:id/comments` - Fetch post comments
-- `GET /users` - Fetch all users
-- `GET /users/:id` - Fetch specific user
-- `GET /users/:id/posts` - Fetch user's posts
-
-## Navigation Flow
-
-1. **Home** → **Posts** → **Post Detail** → **User Detail**
-2. **Home** → **Users** → **User Detail** → **Post Detail**
-3. **Posts** → **Post Detail** → **User Detail**
-4. **Users** → **User Detail** → **Post Detail**
-
-## Customization
-
-The app is designed to be easily customizable:
-
-- **API Service**: Modify `services/api.ts` to integrate with different APIs
-- **UI Components**: Update components in the `components/` directory
-- **Navigation**: Add new routes in the `app/` directory
-- **Styling**: Modify styles in individual component files
-
-## Session Recording Integration
-
-This sample app includes the session recorder integration, demonstrating how to capture user interactions and API calls for debugging and analytics purposes.
-
-## Contributing
-
-Feel free to enhance this sample app with additional features, better error handling, or different API integrations.

package/examples/sample-expo-app/app/(tabs)/_layout.tsx

@@ -1,60 +0,0 @@
-import { Tabs } from 'expo-router'
-import React from 'react'
-import { Platform } from 'react-native'
-
-import { HapticTab } from '@/components/HapticTab'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import TabBarBackground from '@/components/ui/TabBarBackground'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme()
-
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute'
-          },
-          default: {}
-        })
-      }}
-    >
-      <Tabs.Screen
-        name='index'
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='house.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='posts'
-        options={{
-          title: 'Posts',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='doc.text.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='users'
-        options={{
-          title: 'Users',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='person.2.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='explore'
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />
-        }}
-      />
-    </Tabs>
-  )
-}

package/examples/sample-expo-app/app/(tabs)/explore.tsx

@@ -1,110 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

package/examples/sample-expo-app/app/(tabs)/index.tsx

@@ -1,125 +0,0 @@
-import { Image } from 'expo-image'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-
-import { HelloWave } from '@/components/HelloWave'
-import ParallaxScrollView from '@/components/ParallaxScrollView'
-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 default function HomeScreen() {
-  const colorScheme = useColorScheme()
-
-  const handleNavigateToPosts = () => {
-    // Navigate to posts tab
-  }
-
-  const handleNavigateToUsers = () => {
-    // Navigate to users tab
-  }
-
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={<Image source={require('@/assets/images/partial-react-logo.png')} style={styles.reactLogo} />}
-    >
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type='title'>Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>Enhanced Sample App</ThemedText>
-        <ThemedText>
-          This sample app now includes multiple pages, navigation, and API integration with JSONPlaceholder.
-        </ThemedText>
-      </ThemedView>
-
-      <ThemedView style={styles.featuresContainer}>
-        <ThemedText type='subtitle' style={styles.featuresTitle}>
-          Features
-        </ThemedText>
-
-        <TouchableOpacity style={styles.featureCard} onPress={handleNavigateToPosts} activeOpacity={0.7}>
-          <IconSymbol name='doc.text.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-          <ThemedView style={styles.featureContent}>
-            <ThemedText type='defaultSemiBold'>Posts</ThemedText>
-            <ThemedText style={styles.featureDescription}>Browse posts from JSONPlaceholder API with comments</ThemedText>
-          </ThemedView>
-          <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-
-        <TouchableOpacity style={styles.featureCard} onPress={handleNavigateToUsers} activeOpacity={0.7}>
-          <IconSymbol name='person.2.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-          <ThemedView style={styles.featureContent}>
-            <ThemedText type='defaultSemiBold'>Users</ThemedText>
-            <ThemedText style={styles.featureDescription}>View user profiles with their posts and details</ThemedText>
-          </ThemedView>
-          <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>Navigation</ThemedText>
-        <ThemedText>
-          Use the bottom tabs to navigate between different sections, or tap the feature cards above to explore the new
-          functionality.
-        </ThemedText>
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>API Integration</ThemedText>
-        <ThemedText>
-          The app demonstrates real API calls to JSONPlaceholder with proper loading states, error handling, and data management.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
-  )
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8
-  },
-  featuresContainer: {
-    marginBottom: 16
-  },
-  featuresTitle: {
-    marginBottom: 12
-  },
-  featureCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  featureContent: {
-    flex: 1,
-    marginLeft: 12,
-    marginRight: 12
-  },
-  featureDescription: {
-    fontSize: 14,
-    opacity: 0.7,
-    marginTop: 2
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute'
-  }
-})

package/examples/sample-expo-app/app/(tabs)/posts.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import { FlatList, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native'
-import { 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 { useApi } from '@/hooks/useApi'
-import { apiService, Post } from '@/services/api'
-
-export default function PostsScreen() {
-  const { data: posts, loading, error, refetch } = useApi(() => apiService.getPosts())
-
-  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={3}>
-        {item.body}
-      </ThemedText>
-      <ThemedText style={styles.postMeta}>
-        Post ID: {item.id} • User ID: {item.userId}
-      </ThemedText>
-    </TouchableOpacity>
-  )
-
-  if (loading) {
-    return <LoadingSpinner message='Loading posts...' />
-  }
-
-  if (error) {
-    return <ErrorView message={error} onRetry={refetch} />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.header}>
-        <ThemedText type='title'>Posts</ThemedText>
-        <ThemedText style={styles.subtitle}>Latest posts from JSONPlaceholder API</ThemedText>
-      </ThemedView>
-
-      <FlatList
-        data={posts}
-        renderItem={renderPost}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.listContainer}
-        refreshControl={<RefreshControl refreshing={loading} onRefresh={refetch} />}
-        showsVerticalScrollIndicator={false}
-      />
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  subtitle: {
-    marginTop: 4,
-    opacity: 0.7
-  },
-  listContainer: {
-    padding: 20,
-    paddingTop: 10
-  },
-  postCard: {
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  postTitle: {
-    marginBottom: 8,
-    fontWeight: '600'
-  },
-  postBody: {
-    marginBottom: 12,
-    lineHeight: 20
-  },
-  postMeta: {
-    fontSize: 12,
-    opacity: 0.6
-  }
-})

package/examples/sample-expo-app/app/(tabs)/users.tsx

@@ -1,131 +0,0 @@
-import React from 'react'
-import { FlatList, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native'
-import { 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, User } from '@/services/api'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function UsersScreen() {
-  const { data: users, loading, error, refetch } = useApi(() => apiService.getUsers())
-  const colorScheme = useColorScheme()
-
-  const handleUserPress = (user: User) => {
-    router.push(`/user/${user.id}`)
-  }
-
-  const renderUser = ({ item }: { item: User }) => (
-    <TouchableOpacity style={styles.userCard} onPress={() => handleUserPress(item)} activeOpacity={0.7}>
-      <ThemedView style={styles.userAvatar}>
-        <IconSymbol name='person.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-      </ThemedView>
-
-      <ThemedView style={styles.userInfo}>
-        <ThemedText type='subtitle' style={styles.userName}>
-          {item.name}
-        </ThemedText>
-        <ThemedText style={styles.userUsername}>@{item.username}</ThemedText>
-        <ThemedText style={styles.userEmail} numberOfLines={1}>
-          {item.email}
-        </ThemedText>
-        <ThemedText style={styles.userCompany}>{item.company.name}</ThemedText>
-      </ThemedView>
-
-      <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} style={styles.chevron} />
-    </TouchableOpacity>
-  )
-
-  if (loading) {
-    return <LoadingSpinner message='Loading users...' />
-  }
-
-  if (error) {
-    return <ErrorView message={error} onRetry={refetch} />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.header}>
-        <ThemedText type='title'>Users</ThemedText>
-        <ThemedText style={styles.subtitle}>Users from JSONPlaceholder API</ThemedText>
-      </ThemedView>
-
-      <FlatList
-        data={users}
-        renderItem={renderUser}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.listContainer}
-        refreshControl={<RefreshControl refreshing={loading} onRefresh={refetch} />}
-        showsVerticalScrollIndicator={false}
-      />
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  subtitle: {
-    marginTop: 4,
-    opacity: 0.7
-  },
-  listContainer: {
-    padding: 20,
-    paddingTop: 10
-  },
-  userCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  userAvatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12
-  },
-  userInfo: {
-    flex: 1
-  },
-  userName: {
-    marginBottom: 2,
-    fontWeight: '600'
-  },
-  userUsername: {
-    fontSize: 14,
-    opacity: 0.7,
-    marginBottom: 4
-  },
-  userEmail: {
-    fontSize: 12,
-    opacity: 0.6,
-    marginBottom: 2
-  },
-  userCompany: {
-    fontSize: 12,
-    opacity: 0.8,
-    fontStyle: 'italic'
-  },
-  chevron: {
-    opacity: 0.5
-  }
-})

package/examples/sample-expo-app/app/+not-found.tsx

@@ -1,32 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
-      <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen does not exist.</ThemedText>
-        <Link href="/" style={styles.link}>
-          <ThemedText type="link">Go to home screen!</ThemedText>
-        </Link>
-      </ThemedView>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});