@tapthrough/expo 0.0.0-stage → 0.1.1

package/src/native-intent.ts

@@ -0,0 +1,36 @@
+import { parseLaunchUrl } from './core/url.js'
+import { controller } from './runtime.js'
+
+/**
+ * Hands launch links to Tapthrough and keeps Expo Router from trying to open
+ * them as a screen. Use it as your `app/+native-intent.tsx`:
+ *
+ * ```ts
+ * export { redirectSystemPath } from '@tapthrough/expo'
+ * ```
+ *
+ * If you already have a `redirectSystemPath`, call `handleLaunchPath(path)`
+ * first and return early when it returns true.
+ */
+export function redirectSystemPath({
+  path,
+  initial,
+}: {
+  path: string
+  initial: boolean
+}): string | null {
+  if (!handleLaunchPath(path)) return path
+  // Stay put on a warm open; start at the root on a cold one. The SDK navigates once seeded.
+  return initial ? '/' : null
+}
+
+/** Queues the launch if `path` is a Tapthrough launch link. Returns whether it was one. */
+export function handleLaunchPath(path: string): boolean {
+  try {
+    if (!parseLaunchUrl(path)) return false
+    controller.offer(path)
+    return true
+  } catch {
+    return false
+  }
+}

package/src/runtime.ts

@@ -0,0 +1,30 @@
+import Constants from 'expo-constants'
+import { createLaunchController } from './core/controller.js'
+
+/** One controller per app, shared by `<Tapthrough>` and `redirectSystemPath`. */
+export const controller = createLaunchController()
+
+export const DEFAULT_API_URL = 'https://tapthrough-cloud.vercel.app'
+
+export interface PluginConfig {
+  enabled: boolean
+  seedHookUrl: string | undefined
+  /** Tapthrough's base URL, where reports are sent. */
+  apiUrl: string
+  /** Staging and TestFlight builds: a feedback button outside PR previews. */
+  staff: boolean
+  /** The repo's app key, which proves staff builds belong to it. */
+  appKey: string | undefined
+}
+
+/** What the config plugin wrote into `extra.tapthrough` at build time. */
+export function pluginConfig(): PluginConfig {
+  const extra = Constants.expoConfig?.extra?.tapthrough as Partial<PluginConfig> | undefined
+  return {
+    enabled: extra?.enabled === true,
+    seedHookUrl: typeof extra?.seedHookUrl === 'string' ? extra.seedHookUrl : undefined,
+    apiUrl: typeof extra?.apiUrl === 'string' ? extra.apiUrl : DEFAULT_API_URL,
+    staff: extra?.staff === true && typeof extra.appKey === 'string',
+    appKey: typeof extra?.appKey === 'string' ? extra.appKey : undefined,
+  }
+}

package/src/screenshot.ts

@@ -0,0 +1,64 @@
+import { Dimensions } from 'react-native'
+
+interface ViewShot {
+  captureScreen(options: {
+    format: 'jpg' | 'png'
+    quality: number
+    result: 'base64'
+    width?: number
+    height?: number
+  }): Promise<string>
+}
+
+declare const require: (id: string) => unknown
+
+let viewShot: ViewShot | null | undefined
+
+/** `react-native-view-shot` is optional: without it, reports go out without a screenshot. */
+function loadViewShot(): ViewShot | null {
+  if (viewShot === undefined) {
+    try {
+      // Metro treats a require inside try/catch as an optional dependency.
+      viewShot = require('react-native-view-shot') as ViewShot
+    } catch {
+      viewShot = null
+    }
+  }
+  return viewShot
+}
+
+export interface Screenshot {
+  contentType: 'image/jpeg'
+  base64: string
+}
+
+/** A JPEG of the whole screen, scaled to at most 720px wide to keep uploads small. */
+export async function captureScreenshot(): Promise<Screenshot | null> {
+  const shot = loadViewShot()
+  if (!shot) return null
+  const { width, height } = Dimensions.get('window')
+  const targetWidth = Math.min(720, Math.round(width * 2))
+  let timer: ReturnType<typeof setTimeout> | undefined
+  try {
+    const base64 = await Promise.race([
+      shot.captureScreen({
+        format: 'jpg',
+        quality: 0.7,
+        result: 'base64',
+        width: targetWidth,
+        height: Math.round((targetWidth * height) / width),
+      }),
+      // The native capture can stall on some screens; the report shouldn't wait on it.
+      new Promise<null>((resolve) => {
+        timer = setTimeout(() => resolve(null), CAPTURE_TIMEOUT_MS)
+      }),
+    ])
+    return base64 ? { contentType: 'image/jpeg', base64 } : null
+  } catch {
+    return null
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+const CAPTURE_TIMEOUT_MS = 2500

package/src/supabase.ts

@@ -0,0 +1,27 @@
+import type { AuthAdapter } from './core/launch.js'
+
+interface SupabaseAuthClient {
+  auth: {
+    setSession(session: {
+      access_token: string
+      refresh_token: string
+    }): Promise<{ error: { message: string } | null }>
+  }
+}
+
+/**
+ * Logs in with the `{ access_token, refresh_token }` session that
+ * `createTestUser` from `@tapthrough/seed/supabase` returns.
+ */
+export function supabaseAuth(client: SupabaseAuthClient): AuthAdapter {
+  return {
+    async signIn(session) {
+      const { access_token, refresh_token } = session
+      if (typeof access_token !== 'string' || typeof refresh_token !== 'string') {
+        throw new Error('Seed hook session is missing access_token or refresh_token')
+      }
+      const { error } = await client.auth.setSession({ access_token, refresh_token })
+      if (error) throw new Error(error.message)
+    },
+  }
+}

package/src/ui/native.ts

@@ -0,0 +1,116 @@
+import { type ComponentType, useEffect, useState } from 'react'
+import { AccessibilityInfo, type ColorValue, Platform, type ViewProps } from 'react-native'
+
+declare const require: (id: string) => unknown
+
+/**
+ * Optional Expo modules. Metro only treats a `require` as optional when the
+ * call sits directly inside a `try` block, so each loader has its own; an app
+ * without the module still builds and the SDK falls back to something plainer.
+ */
+function once<T>(load: () => T | null): () => T | null {
+  let value: T | null | undefined
+  return () => {
+    if (value === undefined) value = load()
+    return value
+  }
+}
+
+export interface Glass {
+  GlassView: ComponentType<
+    ViewProps & {
+      glassEffectStyle?: 'regular' | 'clear'
+      tintColor?: string
+      isInteractive?: boolean
+    }
+  >
+  isLiquidGlassAvailable(): boolean
+}
+
+/** Liquid Glass on iOS 26 through `expo-glass-effect`, or null. */
+export const loadGlass = once(() => {
+  try {
+    const glass = require('expo-glass-effect') as Glass
+    return glass.isLiquidGlassAvailable() ? glass : null
+  } catch {
+    return null
+  }
+})
+
+interface Symbols {
+  SymbolView: ComponentType<
+    ViewProps & {
+      name: string
+      size?: number
+      tintColor?: ColorValue
+      weight?: 'regular' | 'medium' | 'semibold' | 'bold'
+      type?: 'monochrome' | 'hierarchical'
+    }
+  >
+}
+
+/** SF Symbols through `expo-symbols`, on iOS only. */
+export const loadSymbols = once(() => {
+  if (Platform.OS !== 'ios') return null
+  try {
+    return require('expo-symbols') as Symbols
+  } catch {
+    return null
+  }
+})
+
+interface HapticsModule {
+  selectionAsync(): Promise<void>
+  notificationAsync(type: unknown): Promise<void>
+  impactAsync(style: unknown): Promise<void>
+  NotificationFeedbackType: { Success: unknown; Warning: unknown }
+  ImpactFeedbackStyle: { Light: unknown }
+}
+
+const loadHaptics = once(() => {
+  try {
+    return require('expo-haptics') as HapticsModule
+  } catch {
+    return null
+  }
+})
+
+function play(run: (haptics: HapticsModule) => Promise<void>) {
+  const haptics = loadHaptics()
+  if (haptics) run(haptics).catch(() => {})
+}
+
+/** Haptics through `expo-haptics`; silent without it. Only for the reviewer's own actions. */
+export const haptics = {
+  selection: () => play((h) => h.selectionAsync()),
+  success: () => play((h) => h.notificationAsync(h.NotificationFeedbackType.Success)),
+  warning: () => play((h) => h.notificationAsync(h.NotificationFeedbackType.Warning)),
+  light: () => play((h) => h.impactAsync(h.ImpactFeedbackStyle.Light)),
+}
+
+function useAccessibilitySetting(
+  read: () => Promise<boolean>,
+  event: 'reduceMotionChanged' | 'reduceTransparencyChanged',
+) {
+  const [on, setOn] = useState(false)
+  useEffect(() => {
+    let live = true
+    read()
+      .then((value) => live && setOn(value))
+      .catch(() => {})
+    const subscription = AccessibilityInfo.addEventListener(event, setOn)
+    return () => {
+      live = false
+      subscription.remove()
+    }
+  }, [read, event])
+  return on
+}
+
+const readMotion = () => AccessibilityInfo.isReduceMotionEnabled()
+const readTransparency = () =>
+  Platform.OS === 'ios' ? AccessibilityInfo.isReduceTransparencyEnabled() : Promise.resolve(false)
+
+export const useReduceMotion = () => useAccessibilitySetting(readMotion, 'reduceMotionChanged')
+export const useReduceTransparency = () =>
+  useAccessibilitySetting(readTransparency, 'reduceTransparencyChanged')

package/src/ui/parts.tsx

@@ -0,0 +1,249 @@
+import type { ReactNode } from 'react'
+import {
+  ActivityIndicator,
+  type ColorValue,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { loadGlass, loadSymbols, useReduceTransparency } from './native.js'
+import { text, useColors } from './theme.js'
+
+/** SF Symbol names used by the SDK, with a text fallback for apps without `expo-symbols`. */
+const GLYPHS = {
+  xmark: '✕',
+  checkmark: '✓',
+  'chevron.left': '‹',
+  'chevron.right': '›',
+  'arrow.up.left.and.arrow.down.right': '⤢',
+  'arrow.down.right.and.arrow.up.left': '⤡',
+  'arrow.clockwise': '↻',
+  'arrow.down.circle.fill': '↓',
+  'arrow.right.circle': '→',
+  'person.fill': '●',
+  'tray.full.fill': '▤',
+  'flag.fill': '⚑',
+  'arrow.right': '→',
+  'arrow.up': '↑',
+  lightbulb: '✦',
+  'arrow.triangle.branch': '⑂',
+} as const
+export type IconName = keyof typeof GLYPHS
+
+export function Icon({
+  name,
+  size = 17,
+  color,
+  weight = 'semibold',
+}: {
+  name: IconName
+  size?: number
+  color: ColorValue
+  weight?: 'regular' | 'medium' | 'semibold' | 'bold'
+}) {
+  const symbols = loadSymbols()
+  if (symbols) {
+    return (
+      <symbols.SymbolView
+        name={name}
+        size={size}
+        tintColor={color}
+        weight={weight}
+        style={{ width: size, height: size }}
+        pointerEvents="none"
+      />
+    )
+  }
+  return (
+    <Text
+      style={{ color, fontSize: size, lineHeight: size * 1.15, fontWeight: '600' }}
+      allowFontScaling={false}
+    >
+      {GLYPHS[name]}
+    </Text>
+  )
+}
+
+/**
+ * A floating surface: Liquid Glass where the system has it, otherwise a solid
+ * grouped background with a soft shadow. Reduce Transparency always gets solid.
+ */
+export function Surface({
+  radius,
+  style,
+  children,
+  ...rest
+}: ViewProps & { radius: number; children: ReactNode }) {
+  const colors = useColors()
+  const solid = useReduceTransparency()
+  const glass = solid ? null : loadGlass()
+  return (
+    <View
+      {...rest}
+      style={[
+        { borderRadius: radius },
+        glass ? styles.glassShadow : [styles.solid, { backgroundColor: colors.surface }],
+        style,
+      ]}
+    >
+      {glass ? (
+        <glass.GlassView
+          style={[StyleSheet.absoluteFill, { borderRadius: radius }]}
+          glassEffectStyle="regular"
+          pointerEvents="none"
+        />
+      ) : null}
+      {children}
+    </View>
+  )
+}
+
+/** A 44pt circle holding one symbol: back, close, expand, send. */
+export function CircleButton({
+  icon,
+  label,
+  onPress,
+  tint = false,
+  disabled = false,
+  busy = false,
+}: {
+  icon: IconName
+  label: string
+  onPress: () => void
+  tint?: boolean
+  disabled?: boolean
+  busy?: boolean
+}) {
+  const colors = useColors()
+  const fg = tint ? '#FFFFFF' : colors.label
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || busy}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled: disabled || busy, busy }}
+      style={({ pressed }) => [
+        styles.circle,
+        { backgroundColor: tint ? colors.tint : colors.fill },
+        disabled && styles.disabled,
+        pressed && styles.pressed,
+      ]}
+    >
+      {busy ? (
+        <ActivityIndicator color={fg} />
+      ) : (
+        <Icon name={icon} size={15} color={fg} weight={tint ? 'bold' : 'semibold'} />
+      )}
+    </Pressable>
+  )
+}
+
+type CapsuleKind = 'prominent' | 'gray' | 'plain'
+
+/** Every text button: prominent (tint fill), gray (secondary fill) or plain (tint text). */
+export function Capsule({
+  title,
+  onPress,
+  kind = 'prominent',
+  icon,
+  iconColor,
+  busy = false,
+  disabled = false,
+  accessibilityLabel,
+  fillColor,
+  style,
+}: {
+  title: string
+  onPress: () => void
+  kind?: CapsuleKind
+  icon?: IconName
+  iconColor?: ColorValue
+  busy?: boolean
+  disabled?: boolean
+  accessibilityLabel?: string
+  /** Fills the button with a result color, e.g. green once Pass is chosen. */
+  fillColor?: ColorValue
+  style?: StyleProp<ViewStyle>
+}) {
+  const colors = useColors()
+  const fg =
+    fillColor || kind === 'prominent' ? '#FFFFFF' : kind === 'gray' ? colors.label : colors.tint
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || busy}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: disabled || busy, busy }}
+      style={({ pressed }) => [
+        styles.capsule,
+        kind === 'prominent' && { backgroundColor: colors.tint },
+        kind === 'gray' && { backgroundColor: colors.fill },
+        kind === 'plain' && styles.plain,
+        fillColor ? { backgroundColor: fillColor } : null,
+        (disabled || busy) && styles.disabled,
+        pressed && styles.pressed,
+        style,
+      ]}
+    >
+      {busy ? (
+        <ActivityIndicator color={fg} />
+      ) : (
+        <>
+          {icon ? <Icon name={icon} size={14} color={fillColor ? fg : (iconColor ?? fg)} /> : null}
+          <Text
+            style={[
+              kind === 'plain' ? text.subhead : text.headline,
+              { color: fg },
+              kind === 'gray' && styles.grayText,
+            ]}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+        </>
+      )}
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  solid: {
+    shadowColor: '#000000',
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 12,
+  },
+  glassShadow: {
+    shadowColor: '#000000',
+    shadowOpacity: 0.12,
+    shadowRadius: 20,
+    shadowOffset: { width: 0, height: 6 },
+  },
+  circle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  capsule: {
+    minHeight: 50,
+    borderRadius: 25,
+    paddingHorizontal: 18,
+    flexDirection: 'row',
+    gap: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  plain: { minHeight: 44 },
+  grayText: { fontSize: 15 },
+  disabled: { opacity: 0.4 },
+  pressed: { opacity: 0.7, transform: [{ scale: 0.96 }] },
+})

package/src/ui/theme.ts

@@ -0,0 +1,75 @@
+import {
+  type ColorValue,
+  DynamicColorIOS,
+  Platform,
+  PlatformColor,
+  type TextStyle,
+  useColorScheme,
+} from 'react-native'
+
+/** Light and dark values; on iOS they back the system colors' names below. */
+const TABLE = {
+  surface: { light: '#FFFFFF', dark: '#1C1C1E' },
+  label: { light: '#000000', dark: '#FFFFFF' },
+  secondary: { light: 'rgba(60,60,67,0.6)', dark: 'rgba(235,235,245,0.6)' },
+  tertiary: { light: 'rgba(60,60,67,0.3)', dark: 'rgba(235,235,245,0.3)' },
+  separator: { light: 'rgba(60,60,67,0.29)', dark: 'rgba(84,84,88,0.65)' },
+  fill: { light: 'rgba(118,118,128,0.12)', dark: 'rgba(118,118,128,0.24)' },
+  tint: { light: '#007AFF', dark: '#0A84FF' },
+  pass: { light: '#34C759', dark: '#30D158' },
+  fail: { light: '#FF3B30', dark: '#FF453A' },
+  tintFill: { light: 'rgba(0,122,255,0.12)', dark: 'rgba(10,132,255,0.22)' },
+  /** The selected segment of a segmented control. */
+  segment: { light: '#FFFFFF', dark: '#636366' },
+}
+
+type Name = keyof typeof TABLE
+export type Colors = Record<Name, ColorValue>
+
+const IOS_NAMES: Partial<Record<Name, string>> = {
+  surface: 'secondarySystemGroupedBackground',
+  label: 'label',
+  secondary: 'secondaryLabel',
+  tertiary: 'tertiaryLabel',
+  separator: 'separator',
+  fill: 'tertiarySystemFill',
+  tint: 'systemBlue',
+  pass: 'systemGreen',
+  fail: 'systemRed',
+}
+
+function iosColors(): Colors {
+  const colors = {} as Colors
+  for (const name of Object.keys(TABLE) as Name[]) {
+    const system = IOS_NAMES[name]
+    // System colors follow dark mode and Increase Contrast by themselves. They
+    // can't take an alpha, so the tinted fill is a dynamic pair instead.
+    colors[name] = system ? PlatformColor(system) : DynamicColorIOS(TABLE[name])
+  }
+  return colors
+}
+
+const ios = Platform.OS === 'ios' ? iosColors() : null
+
+/** The SDK's colors: iOS system colors, or a light/dark table elsewhere. */
+export function useColors(): Colors {
+  const scheme = useColorScheme()
+  if (ios) return ios
+  const mode = scheme === 'dark' ? 'dark' : 'light'
+  const colors = {} as Colors
+  for (const name of Object.keys(TABLE) as Name[]) colors[name] = TABLE[name][mode]
+  return colors
+}
+
+/** Apple's text styles at the default Dynamic Type size. */
+export const text = {
+  title2: { fontSize: 22, lineHeight: 28, fontWeight: '700' },
+  headline: { fontSize: 17, lineHeight: 22, fontWeight: '600' },
+  body: { fontSize: 17, lineHeight: 22 },
+  subhead: { fontSize: 15, lineHeight: 20 },
+  footnote: { fontSize: 13, lineHeight: 18 },
+  caption: { fontSize: 12, lineHeight: 16 },
+} satisfies Record<string, TextStyle>
+
+/** The iOS curve for things that enter or leave, as a spring. */
+export const SPRING = { stiffness: 260, damping: 28, mass: 1 }