feat(expo): wizard sheet with form, annotate, and submit steps

Author: Ripwords

packages/expo/src/wizard/sheet.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useRef, useState } from "react"
+import { Modal, SafeAreaView, Text, View } from "react-native"
+import { FlattenView, type FlattenHandle } from "../capture/flatten"
+import { StepForm } from "./step-form"
+import { StepAnnotate } from "./step-annotate"
+import { StepSubmit } from "./step-submit"
+import { createAnnotationStore } from "../annotation/store"
+
+export interface WizardArgs {
+  initialTitle?: string
+  initialDescription?: string
+  screenshot: { uri: string; width: number; height: number } | null
+  onSubmit: (result: {
+    title: string
+    description: string
+    annotatedUri: string | null
+    rawUri: string | null
+  }) => Promise<void>
+  onClose: () => void
+}
+
+export function WizardSheet({
+  initialTitle,
+  initialDescription,
+  screenshot,
+  onSubmit,
+  onClose,
+}: WizardArgs) {
+  const [step, setStep] = useState<"form" | "annotate" | "submit">("form")
+  const [title, setTitle] = useState(initialTitle ?? "")
+  const [description, setDescription] = useState(initialDescription ?? "")
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const store = useRef(createAnnotationStore()).current
+  const flattenRef = useRef<FlattenHandle | null>(null)
+
+  useEffect(() => {
+    setStep("form")
+  }, [screenshot])
+
+  async function handleSubmit() {
+    setSubmitting(true)
+    setError(null)
+    try {
+      let annotated: string | null = null
+      if (screenshot && store.snapshot().length > 0 && flattenRef.current) {
+        const flat = await flattenRef.current.flatten()
+        annotated = flat.uri
+      }
+      await onSubmit({
+        title,
+        description,
+        annotatedUri: annotated,
+        rawUri: screenshot?.uri ?? null,
+      })
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Modal visible animationType="slide" onRequestClose={onClose}>
+      <SafeAreaView style={{ flex: 1 }}>
+        <View style={{ padding: 12, borderBottomWidth: 1, borderBottomColor: "#eee" }}>
+          <Text style={{ fontSize: 18, fontWeight: "600" }}>Report a bug</Text>
+        </View>
+        {step === "form" && (
+          <StepForm
+            title={title}
+            description={description}
+            onTitleChange={setTitle}
+            onDescriptionChange={setDescription}
+          />
+        )}
+        {step === "annotate" && screenshot && (
+          <StepAnnotate
+            imageUri={screenshot.uri}
+            width={screenshot.width}
+            height={screenshot.height}
+            store={store}
+          />
+        )}
+        {step === "submit" && (
+          <StepSubmit
+            submitting={submitting}
+            error={error}
+            onSubmit={handleSubmit}
+            onCancel={onClose}
+          />
+        )}
+        {screenshot && (
+          <FlattenView
+            ref={flattenRef}
+            uri={screenshot.uri}
+            width={screenshot.width}
+            height={screenshot.height}
+            shapes={store.snapshot()}
+          />
+        )}
+        <View style={{ flexDirection: "row", padding: 12, gap: 8 }}>
+          {step !== "form" && (
+            <Text onPress={() => setStep(step === "submit" ? "annotate" : "form")}>Back</Text>
+          )}
+          {step !== "submit" && (
+            <Text onPress={() => setStep(step === "form" ? "annotate" : "submit")}>Next</Text>
+          )}
+        </View>
+      </SafeAreaView>
+    </Modal>
+  )
+}

packages/expo/src/wizard/step-annotate.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+import { View } from "react-native"
+import { AnnotationCanvas } from "../annotation/canvas"
+import { AnnotationToolbar } from "../annotation/toolbar"
+import type { AnnotationStore } from "../annotation/store"
+import type { Tool } from "@reprojs/sdk-utils"
+
+interface Props {
+  imageUri: string
+  width: number
+  height: number
+  store: AnnotationStore
+}
+
+export function StepAnnotate({ imageUri: _imageUri, width, height, store }: Props) {
+  const [tool, setTool] = useState<Tool>("pen")
+  return (
+    <View style={{ flex: 1 }}>
+      <AnnotationToolbar tool={tool} onToolChange={setTool} store={store} />
+      <View style={{ width, height, position: "relative" }}>
+        <AnnotationCanvas
+          width={width}
+          height={height}
+          tool={tool}
+          color="#ef4444"
+          strokeWidth={3}
+          store={store}
+        />
+      </View>
+    </View>
+  )
+}

packages/expo/src/wizard/step-form.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { TextInput, View, Text } from "react-native"
+
+interface Props {
+  title: string
+  description: string
+  onTitleChange: (v: string) => void
+  onDescriptionChange: (v: string) => void
+}
+
+export function StepForm({ title, description, onTitleChange, onDescriptionChange }: Props) {
+  return (
+    <View style={{ padding: 16, gap: 12 }}>
+      <Text style={{ fontWeight: "600" }}>Title</Text>
+      <TextInput
+        value={title}
+        onChangeText={onTitleChange}
+        maxLength={120}
+        placeholder="Short description of the issue"
+        style={{ borderWidth: 1, borderColor: "#ccc", padding: 8, borderRadius: 6 }}
+      />
+      <Text style={{ fontWeight: "600" }}>Details (optional)</Text>
+      <TextInput
+        value={description}
+        onChangeText={onDescriptionChange}
+        maxLength={10000}
+        multiline
+        placeholder="Steps to reproduce, expected vs actual"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          padding: 8,
+          borderRadius: 6,
+          minHeight: 120,
+        }}
+      />
+    </View>
+  )
+}

packages/expo/src/wizard/step-submit.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { Pressable, Text, View, ActivityIndicator } from "react-native"
+
+interface Props {
+  submitting: boolean
+  error: string | null
+  onSubmit: () => void
+  onCancel: () => void
+}
+
+export function StepSubmit({ submitting, error, onSubmit, onCancel }: Props) {
+  return (
+    <View style={{ padding: 16, gap: 12 }}>
+      {error && <Text style={{ color: "#dc2626" }}>{error}</Text>}
+      <Pressable
+        onPress={onSubmit}
+        disabled={submitting}
+        style={{ backgroundColor: "#6366f1", padding: 12, borderRadius: 6, alignItems: "center" }}
+      >
+        {submitting ? (
+          <ActivityIndicator color="white" />
+        ) : (
+          <Text style={{ color: "white" }}>Submit</Text>
+        )}
+      </Pressable>
+      <Pressable onPress={onCancel} style={{ padding: 12, alignItems: "center" }}>
+        <Text>Cancel</Text>
+      </Pressable>
+    </View>
+  )
+}