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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +127 -5
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,9 +1,131 @@
1
- # Proprietary Software
1
+ # @koderlabs/tasks-sdk-rn-reporter
2
2
 
3
- KoderLabs proprietary. All rights reserved.
3
+ In-app bug reporter for React Native — pairs with `@koderlabs/tasks-sdk-rn`.
4
4
 
5
- See the bundled `LICENSE` for terms. No grant of any rights, express or
6
- implied, is conferred by access to or possession of this package. A
7
- separate signed written licence from KoderLabs is required for any use.
5
+ Renders a `<Modal>` with a description field + optional email + screenshot
6
+ preview, captured via `react-native-view-shot` before the modal opens (so the
7
+ modal itself never appears in the screenshot). Submits as a `kind: 'bug_report'`
8
+ event through the core SDK's multipart ingest endpoint.
9
+
10
+ ## Install
11
+
12
+ ```sh
13
+ pnpm add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter \
14
+ react-native-view-shot
15
+ # optional — Android shake + iOS screenshot prompt
16
+ pnpm add expo-sensors expo-screen-capture
17
+ # optional — annotator (highlight + redact tool over the screenshot)
18
+ pnpm add react-native-svg
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ```tsx
24
+ import { useRef } from 'react';
25
+ import { View } from 'react-native';
26
+ import { init } from '@koderlabs/tasks-sdk-rn';
27
+ import { initReporter, ReporterRoot } from '@koderlabs/tasks-sdk-rn-reporter';
28
+
29
+ const sdk = init({ projectId: 'FE', accessKey: 'sk_…' });
30
+
31
+ export default function App() {
32
+ const rootRef = useRef<View>(null);
33
+ const reporter = useRef(
34
+ initReporter(sdk, {
35
+ captureRef: rootRef,
36
+ enableShakeGesture: true,
37
+ enableScreenshotDetection: true, // iOS only
38
+ collectEmail: true,
39
+ }),
40
+ );
41
+
42
+ return (
43
+ <View ref={rootRef} style={{ flex: 1 }}>
44
+ {/* your app */}
45
+ <ReporterRoot />
46
+ </View>
47
+ );
48
+ }
49
+ ```
50
+
51
+ Call `reporter.current.show()` from any UI element (FAB, debug menu, etc.)
52
+ to open the modal manually.
53
+
54
+ ## Options
55
+
56
+ | Option | Type | Default | Description |
57
+ |---|---|---|---|
58
+ | `captureRef` | `RefObject<View>` | — | Root view to snapshot. Omit for text-only reports. |
59
+ | `enableShakeGesture` | `boolean` | `false` | iOS: native shake. Android: requires `expo-sensors`. |
60
+ | `enableScreenshotDetection` | `boolean` | `false` | iOS only — `Alert` on system screenshot. Requires `expo-screen-capture`. |
61
+ | `defaultIssueTypeId` | `string` | — | Pre-fill issue type on created ticket. |
62
+ | `defaultPriorityId` | `string` | — | Pre-fill priority on created ticket. |
63
+ | `collectEmail` | `boolean` | `false` | Show email field in modal. |
64
+ | `silent` | `boolean` | `false` | Suppress success/error `Alert`s. |
65
+ | `customData` | `Record<string, unknown>` | — | Merged into every report payload. |
66
+
67
+ ## Platform availability
68
+
69
+ | Feature | iOS | Android |
70
+ |---|---|---|
71
+ | Modal + screenshot | ✅ | ✅ |
72
+ | Shake gesture | ✅ (native) | ⚠️ requires `expo-sensors` |
73
+ | Screenshot detection | ✅ requires `expo-screen-capture` | ❌ no reliable hook |
74
+
75
+ ## Annotator (Highlight + Redact)
76
+
77
+ When `react-native-svg` is installed, the modal shows an "Annotate" button next
78
+ to the captured screenshot. Tapping it opens a full-screen overlay where the
79
+ user can:
80
+
81
+ - **Highlight** — draw a red outlined rect to call attention to a region
82
+ - **Redact** — drag a solid black box over a region that should NOT be shipped
83
+ (passwords, PII, etc.)
84
+ - **Undo** / **Clear** — manage the stack of committed rects
85
+ - **Done** / **Cancel** — return to the bug-report modal
86
+
87
+ Gestures use RN's built-in `PanResponder` (no extra dep). Rect coordinates are
88
+ normalized 0..1 against the captured image dimensions, so the same
89
+ `DrawCommand[]` shape is portable across web + RN.
90
+
91
+ **v1 limitation — annotations ship as commands, not pixels.** The raw
92
+ screenshot is uploaded as-is; the `payload.annotations: DrawCommand[]` array is
93
+ included alongside it so the backend can render baked annotations later. This
94
+ keeps the mobile bundle small (no canvas pixel-bashing on-device) at the cost
95
+ of a server-side compositing step that is currently pending.
96
+
97
+ ```tsx
98
+ import type { DrawCommand } from '@koderlabs/tasks-sdk-rn-reporter';
99
+ // Use the standalone <Annotator /> component directly if you want a custom flow.
100
+ import { Annotator } from '@koderlabs/tasks-sdk-rn-reporter';
101
+ ```
102
+
103
+ `react-native-svg` is an **optional** peer dep — when not installed, the
104
+ "Annotate" button is suppressed and the rest of the reporter works unchanged.
105
+
106
+ ## Known limits (MVP)
107
+
108
+ - **Annotator** ships Box + Redact in v1; Arrow tool deferred.
109
+ - Server-side annotation bake-in is deferred — commands shipped raw alongside
110
+ the screenshot for now.
111
+ - No console / network ring buffer included in the payload yet — when you also
112
+ use `@koderlabs/tasks-sdk-rn` the breadcrumbs are attached automatically by
113
+ the core client; this package does not duplicate them.
114
+ - The reporter modal must be mounted via `<ReporterRoot />` somewhere in the
115
+ React tree. If you forget to mount it, `show()` is a no-op.
116
+ - Android screenshot-detection is not supported — OS does not expose a hook
117
+ uniformly across OEMs.
118
+ - Runtime config from the admin (e.g. `enableShakeGesture` toggle) is not yet
119
+ fetched by `sdk-rn`; pass options explicitly to `initReporter()` for now.
120
+
121
+ ---
122
+
123
+ ## Suite overview
124
+
125
+ Full SDK suite map + platform availability matrix: [docs/sdk/overview.md](https://github.com/jawaidgadiwala/instant-tasks/blob/main/docs/sdk/overview.md).
126
+
127
+ ## License
128
+
129
+ KoderLabs proprietary. See [`LICENSE`](./LICENSE) for terms. Use of this package requires a separate signed written agreement with KoderLabs; access alone confers no rights.
8
130
 
9
131
  Licensing inquiries: jawaidgadiwala@gmail.com
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koderlabs/tasks-sdk-rn-reporter",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "In-app bug reporter for React Native — modal + screenshot + shake gesture + screenshot-detection. Pairs with @koderlabs/tasks-sdk-rn.",
5
5
  "keywords": [
6
6
  "instanttasks",
@@ -41,7 +41,7 @@
41
41
  ],
42
42
  "sideEffects": true,
43
43
  "dependencies": {
44
- "@koderlabs/tasks-sdk": "0.1.0"
44
+ "@koderlabs/tasks-sdk": "0.1.1"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=18.0.0",
@@ -49,7 +49,7 @@
49
49
  "react-native-view-shot": ">=3.8.0",
50
50
  "expo-screen-capture": ">=6.0.0",
51
51
  "react-native-svg": ">=15.0.0",
52
- "@koderlabs/tasks-sdk-rn": "0.1.0"
52
+ "@koderlabs/tasks-sdk-rn": "0.1.1"
53
53
  },
54
54
  "peerDependenciesMeta": {
55
55
  "react-native-view-shot": {
@@ -69,13 +69,13 @@
69
69
  "tsup": "^8.3.0",
70
70
  "typescript": "^5.5.0",
71
71
  "vitest": "^2.1.0",
72
- "@koderlabs/tasks-sdk-rn": "0.1.0"
72
+ "@koderlabs/tasks-sdk-rn": "0.1.1"
73
73
  },
74
74
  "engines": {
75
75
  "node": ">=20"
76
76
  },
77
77
  "publishConfig": {
78
- "access": "restricted"
78
+ "access": "public"
79
79
  },
80
80
  "scripts": {
81
81
  "build": "tsup",