@koderlabs/tasks-sdk-rn-reporter 0.1.0 → 0.1.1

package/README.md

@@ -1,9 +1,131 @@
-# Proprietary Software
+# @koderlabs/tasks-sdk-rn-reporter
 
-KoderLabs proprietary. All rights reserved.
+In-app bug reporter for React Native — pairs with `@koderlabs/tasks-sdk-rn`.
 
-See the bundled `LICENSE` for terms. No grant of any rights, express or
-implied, is conferred by access to or possession of this package. A
-separate signed written licence from KoderLabs is required for any use.
+Renders a `<Modal>` with a description field + optional email + screenshot
+preview, captured via `react-native-view-shot` before the modal opens (so the
+modal itself never appears in the screenshot). Submits as a `kind: 'bug_report'`
+event through the core SDK's multipart ingest endpoint.
+
+## Install
+
+```sh
+pnpm add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter \
+         react-native-view-shot
+# optional — Android shake + iOS screenshot prompt
+pnpm add expo-sensors expo-screen-capture
+# optional — annotator (highlight + redact tool over the screenshot)
+pnpm add react-native-svg
+```
+
+## Usage
+
+```tsx
+import { useRef } from 'react';
+import { View } from 'react-native';
+import { init } from '@koderlabs/tasks-sdk-rn';
+import { initReporter, ReporterRoot } from '@koderlabs/tasks-sdk-rn-reporter';
+
+const sdk = init({ projectId: 'FE', accessKey: 'sk_…' });
+
+export default function App() {
+  const rootRef = useRef<View>(null);
+  const reporter = useRef(
+    initReporter(sdk, {
+      captureRef: rootRef,
+      enableShakeGesture: true,
+      enableScreenshotDetection: true,  // iOS only
+      collectEmail: true,
+    }),
+  );
+
+  return (
+    <View ref={rootRef} style={{ flex: 1 }}>
+      {/* your app */}
+      <ReporterRoot />
+    </View>
+  );
+}
+```
+
+Call `reporter.current.show()` from any UI element (FAB, debug menu, etc.)
+to open the modal manually.
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `captureRef` | `RefObject<View>` | — | Root view to snapshot. Omit for text-only reports. |
+| `enableShakeGesture` | `boolean` | `false` | iOS: native shake. Android: requires `expo-sensors`. |
+| `enableScreenshotDetection` | `boolean` | `false` | iOS only — `Alert` on system screenshot. Requires `expo-screen-capture`. |
+| `defaultIssueTypeId` | `string` | — | Pre-fill issue type on created ticket. |
+| `defaultPriorityId` | `string` | — | Pre-fill priority on created ticket. |
+| `collectEmail` | `boolean` | `false` | Show email field in modal. |
+| `silent` | `boolean` | `false` | Suppress success/error `Alert`s. |
+| `customData` | `Record<string, unknown>` | — | Merged into every report payload. |
+
+## Platform availability
+
+| Feature | iOS | Android |
+|---|---|---|
+| Modal + screenshot | ✅ | ✅ |
+| Shake gesture | ✅ (native) | ⚠️ requires `expo-sensors` |
+| Screenshot detection | ✅ requires `expo-screen-capture` | ❌ no reliable hook |
+
+## Annotator (Highlight + Redact)
+
+When `react-native-svg` is installed, the modal shows an "Annotate" button next
+to the captured screenshot. Tapping it opens a full-screen overlay where the
+user can:
+
+- **Highlight** — draw a red outlined rect to call attention to a region
+- **Redact** — drag a solid black box over a region that should NOT be shipped
+  (passwords, PII, etc.)
+- **Undo** / **Clear** — manage the stack of committed rects
+- **Done** / **Cancel** — return to the bug-report modal
+
+Gestures use RN's built-in `PanResponder` (no extra dep). Rect coordinates are
+normalized 0..1 against the captured image dimensions, so the same
+`DrawCommand[]` shape is portable across web + RN.
+
+**v1 limitation — annotations ship as commands, not pixels.** The raw
+screenshot is uploaded as-is; the `payload.annotations: DrawCommand[]` array is
+included alongside it so the backend can render baked annotations later. This
+keeps the mobile bundle small (no canvas pixel-bashing on-device) at the cost
+of a server-side compositing step that is currently pending.
+
+```tsx
+import type { DrawCommand } from '@koderlabs/tasks-sdk-rn-reporter';
+// Use the standalone <Annotator /> component directly if you want a custom flow.
+import { Annotator } from '@koderlabs/tasks-sdk-rn-reporter';
+```
+
+`react-native-svg` is an **optional** peer dep — when not installed, the
+"Annotate" button is suppressed and the rest of the reporter works unchanged.
+
+## Known limits (MVP)
+
+- **Annotator** ships Box + Redact in v1; Arrow tool deferred.
+- Server-side annotation bake-in is deferred — commands shipped raw alongside
+  the screenshot for now.
+- No console / network ring buffer included in the payload yet — when you also
+  use `@koderlabs/tasks-sdk-rn` the breadcrumbs are attached automatically by
+  the core client; this package does not duplicate them.
+- The reporter modal must be mounted via `<ReporterRoot />` somewhere in the
+  React tree. If you forget to mount it, `show()` is a no-op.
+- Android screenshot-detection is not supported — OS does not expose a hook
+  uniformly across OEMs.
+- Runtime config from the admin (e.g. `enableShakeGesture` toggle) is not yet
+  fetched by `sdk-rn`; pass options explicitly to `initReporter()` for now.
+
+---
+
+## Suite overview
+
+Full SDK suite map + platform availability matrix: [docs/sdk/overview.md](https://github.com/jawaidgadiwala/instant-tasks/blob/main/docs/sdk/overview.md).
+
+## License
+
+KoderLabs proprietary. See [`LICENSE`](./LICENSE) for terms. Use of this package requires a separate signed written agreement with KoderLabs; access alone confers no rights.
 
 Licensing inquiries: jawaidgadiwala@gmail.com

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koderlabs/tasks-sdk-rn-reporter",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "In-app bug reporter for React Native — modal + screenshot + shake gesture + screenshot-detection. Pairs with @koderlabs/tasks-sdk-rn.",
   "keywords": [
     "instanttasks",
@@ -41,7 +41,7 @@
   ],
   "sideEffects": true,
   "dependencies": {
-    "@koderlabs/tasks-sdk": "0.1.0"
+    "@koderlabs/tasks-sdk": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -49,7 +49,7 @@
     "react-native-view-shot": ">=3.8.0",
     "expo-screen-capture": ">=6.0.0",
     "react-native-svg": ">=15.0.0",
-    "@koderlabs/tasks-sdk-rn": "0.1.0"
+    "@koderlabs/tasks-sdk-rn": "0.1.1"
   },
   "peerDependenciesMeta": {
     "react-native-view-shot": {
@@ -69,13 +69,13 @@
     "tsup": "^8.3.0",
     "typescript": "^5.5.0",
     "vitest": "^2.1.0",
-    "@koderlabs/tasks-sdk-rn": "0.1.0"
+    "@koderlabs/tasks-sdk-rn": "0.1.1"
   },
   "engines": {
     "node": ">=20"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "scripts": {
     "build": "tsup",