[pull] main from expo:main

apps/observe-tester/.gitignore

@@ -0,0 +1,42 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+#prebuild
+android/
+ios/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

apps/observability-tester/app.config.ts → apps/observe-tester/app.config.ts

@@ -3,8 +3,6 @@ import 'tsx/cjs';
 
 const config = ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
-  name: 'Observe',
-  slug: 'observability',
   extra: {
     ...config.extra,
     eas: {

apps/observability-tester/app.json → apps/observe-tester/app.json

@@ -1,11 +1,11 @@
 {
   "expo": {
-    "name": "observability",
+    "name": "Observe",
     "slug": "observability",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "observability",
+    "scheme": "observe",
     "userInterfaceStyle": "automatic",
     "ios": {
       "supportsTablet": true,

apps/observe-tester/app/(tabs)/(metrics)/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from 'expo-router';
+
+import { useTheme } from '@/utils/theme';
+
+export default function MetricsLayout() {
+  const theme = useTheme();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.background.screen },
+        headerTintColor: theme.text.default,
+      }}>
+      <Stack.Screen name="index" options={{ title: 'Metrics' }} />
+    </Stack>
+  );
+}

apps/observability-tester/app/(tabs)/(metrics)/index.tsx → apps/observe-tester/app/(tabs)/(metrics)/index.tsx

@@ -1,17 +1,17 @@
-import { Code } from '@expo/html-elements';
-import { useCallback, useEffect, useState } from 'react';
-import { Platform, ScrollView, StyleSheet, Text, View, useColorScheme } from 'react-native';
-
-import { useRouterMetricsHelpers } from '@/router-metrics-integration';
 import AppMetrics, { type Metric } from 'expo-app-metrics';
 import ExpoObserve from 'expo-observe';
-import { Button } from '../../../components/Button';
-
 import { checkForUpdateAsync, fetchUpdateAsync, reloadAsync, useUpdates } from 'expo-updates';
+import { useCallback, useEffect, useState } from 'react';
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { Divider } from '@/components/Divider';
+import { JSONView } from '@/components/JSONView';
+import { useRouterMetricsHelpers } from '@/router-metrics-integration';
+import { useTheme } from '@/utils/theme';
 
 export default function Index() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === 'dark';
+  const theme = useTheme();
   const [metrics, setMetrics] = useState<Metric[]>([]);
   const [showEntries, setShowEntries] = useState(false);
   const { isUpdateAvailable, isUpdatePending, availableUpdate, currentlyRunning } = useUpdates();
@@ -61,7 +61,7 @@ export default function Index() {
 
   return (
     <ScrollView
-      style={[styles.container, { backgroundColor: isDark ? '#000000' : '#FFFFFF' }]}
+      style={[styles.container, { backgroundColor: theme.background.screen }]}
       contentContainerStyle={styles.contentContainer}>
       <Button title="Mark as interactive" onPress={handleMarkInteractive} theme="secondary" />
       <Button title="Dispatch events" onPress={handleDispatchEvents} theme="secondary" />
@@ -82,15 +82,18 @@ export default function Index() {
           theme="secondary"
         />
       ) : null}
-      <Text>{`Currently running ${currentlyRunning.updateId}`}</Text>
-      <Text>{`${currentlyRunning.isEmbeddedLaunch ? 'Embedded bundle' : 'OTA bundle'}`}</Text>
-      <View style={[styles.divider, { backgroundColor: isDark ? '#333333' : '#E5E5E5' }]} />
+      <Text style={{ color: theme.text.default }}>
+        {`Currently running ${currentlyRunning.updateId}`}
+      </Text>
+      <Text style={{ color: theme.text.default }}>
+        {`${currentlyRunning.isEmbeddedLaunch ? 'Embedded bundle' : 'OTA bundle'}`}
+      </Text>
+
+      <Divider />
 
       <View style={styles.header}>
         {metrics.length === 0 ? (
-          <Text style={[styles.countText, { color: isDark ? '#FFFFFF' : '#000000' }]}>
-            No stored entries
-          </Text>
+          <Text style={[styles.countText, { color: theme.text.default }]}>No stored entries</Text>
         ) : (
           <Button
             title={
@@ -101,28 +104,11 @@ export default function Index() {
         )}
       </View>
 
-      {showEntries && metrics.length ? <JSONView value={metrics} isDark={isDark} /> : null}
+      {showEntries && metrics.length ? <JSONView value={metrics} /> : null}
     </ScrollView>
   );
 }
 
-function JSONView({ value, isDark }: { value: any; isDark: boolean }) {
-  return (
-    <Code style={[styles.code, { color: isDark ? '#E5E5E5' : '#000000' }]}>
-      {JSON.stringify(value, deterministicJSONReplacer, 2)}
-    </Code>
-  );
-}
-
-// A replacer function for JSON.stringify that guarantees the same keys order
-function deterministicJSONReplacer(_: any, value: any) {
-  return typeof value !== 'object' || value === null || Array.isArray(value)
-    ? value
-    : Object.fromEntries(
-        Object.entries(value).sort(([keyA], [keyB]) => (keyA < keyB ? -1 : keyA > keyB ? 1 : 0))
-      );
-}
-
 const styles = StyleSheet.create({
   container: {
     padding: 20,
@@ -136,14 +122,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     textAlign: 'center',
   },
-  code: {
-    fontSize: 12,
-  },
   contentContainer: {
     paddingBottom: Platform.select({ ios: 30, android: 150 }),
   },
-  divider: {
-    height: 1,
-    marginVertical: 20,
-  },
 });

apps/observe-tester/app/(tabs)/(sessions)/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from 'expo-router';
+
+import { useTheme } from '@/utils/theme';
+
+export default function SessionsLayout() {
+  const theme = useTheme();
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.background.screen },
+        headerTintColor: theme.text.default,
+      }}>
+      <Stack.Screen name="sessions/index" options={{ title: 'Sessions' }} />
+      <Stack.Screen name="sessions/[id]" options={{ title: 'Session' }} />
+    </Stack>
+  );
+}