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

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 +135 -5
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,9 +1,139 @@
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
+ ```bash
13
+ npm install @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter \
14
+ react-native-view-shot
15
+ # optional — Android shake + iOS screenshot prompt
16
+ npm install expo-sensors expo-screen-capture
17
+ # optional — annotator (highlight + redact tool over the screenshot)
18
+ npm install react-native-svg
19
+ ```
20
+
21
+ Using pnpm or yarn:
22
+
23
+ ```bash
24
+ pnpm add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter react-native-view-shot
25
+ # or
26
+ yarn add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter react-native-view-shot
27
+ ```
28
+
29
+ ## Usage
30
+
31
+ ```tsx
32
+ import { useRef } from 'react';
33
+ import { View } from 'react-native';
34
+ import { init } from '@koderlabs/tasks-sdk-rn';
35
+ import { initReporter, ReporterRoot } from '@koderlabs/tasks-sdk-rn-reporter';
36
+
37
+ const sdk = init({ projectId: 'FE', accessKey: 'sk_…' });
38
+
39
+ export default function App() {
40
+ const rootRef = useRef<View>(null);
41
+ const reporter = useRef(
42
+ initReporter(sdk, {
43
+ captureRef: rootRef,
44
+ enableShakeGesture: true,
45
+ enableScreenshotDetection: true, // iOS only
46
+ collectEmail: true,
47
+ }),
48
+ );
49
+
50
+ return (
51
+ <View ref={rootRef} style={{ flex: 1 }}>
52
+ {/* your app */}
53
+ <ReporterRoot />
54
+ </View>
55
+ );
56
+ }
57
+ ```
58
+
59
+ Call `reporter.current.show()` from any UI element (FAB, debug menu, etc.)
60
+ to open the modal manually.
61
+
62
+ ## Options
63
+
64
+ | Option | Type | Default | Description |
65
+ |---|---|---|---|
66
+ | `captureRef` | `RefObject<View>` | — | Root view to snapshot. Omit for text-only reports. |
67
+ | `enableShakeGesture` | `boolean` | `false` | iOS: native shake. Android: requires `expo-sensors`. |
68
+ | `enableScreenshotDetection` | `boolean` | `false` | iOS only — `Alert` on system screenshot. Requires `expo-screen-capture`. |
69
+ | `defaultIssueTypeId` | `string` | — | Pre-fill issue type on created ticket. |
70
+ | `defaultPriorityId` | `string` | — | Pre-fill priority on created ticket. |
71
+ | `collectEmail` | `boolean` | `false` | Show email field in modal. |
72
+ | `silent` | `boolean` | `false` | Suppress success/error `Alert`s. |
73
+ | `customData` | `Record<string, unknown>` | — | Merged into every report payload. |
74
+
75
+ ## Platform availability
76
+
77
+ | Feature | iOS | Android |
78
+ |---|---|---|
79
+ | Modal + screenshot | ✅ | ✅ |
80
+ | Shake gesture | ✅ (native) | ⚠️ requires `expo-sensors` |
81
+ | Screenshot detection | ✅ requires `expo-screen-capture` | ❌ no reliable hook |
82
+
83
+ ## Annotator (Highlight + Redact)
84
+
85
+ When `react-native-svg` is installed, the modal shows an "Annotate" button next
86
+ to the captured screenshot. Tapping it opens a full-screen overlay where the
87
+ user can:
88
+
89
+ - **Highlight** — draw a red outlined rect to call attention to a region
90
+ - **Redact** — drag a solid black box over a region that should NOT be shipped
91
+ (passwords, PII, etc.)
92
+ - **Undo** / **Clear** — manage the stack of committed rects
93
+ - **Done** / **Cancel** — return to the bug-report modal
94
+
95
+ Gestures use RN's built-in `PanResponder` (no extra dep). Rect coordinates are
96
+ normalized 0..1 against the captured image dimensions, so the same
97
+ `DrawCommand[]` shape is portable across web + RN.
98
+
99
+ **v1 limitation — annotations ship as commands, not pixels.** The raw
100
+ screenshot is uploaded as-is; the `payload.annotations: DrawCommand[]` array is
101
+ included alongside it so the backend can render baked annotations later. This
102
+ keeps the mobile bundle small (no canvas pixel-bashing on-device) at the cost
103
+ of a server-side compositing step that is currently pending.
104
+
105
+ ```tsx
106
+ import type { DrawCommand } from '@koderlabs/tasks-sdk-rn-reporter';
107
+ // Use the standalone <Annotator /> component directly if you want a custom flow.
108
+ import { Annotator } from '@koderlabs/tasks-sdk-rn-reporter';
109
+ ```
110
+
111
+ `react-native-svg` is an **optional** peer dep — when not installed, the
112
+ "Annotate" button is suppressed and the rest of the reporter works unchanged.
113
+
114
+ ## Known limits (MVP)
115
+
116
+ - **Annotator** ships Box + Redact in v1; Arrow tool deferred.
117
+ - Server-side annotation bake-in is deferred — commands shipped raw alongside
118
+ the screenshot for now.
119
+ - No console / network ring buffer included in the payload yet — when you also
120
+ use `@koderlabs/tasks-sdk-rn` the breadcrumbs are attached automatically by
121
+ the core client; this package does not duplicate them.
122
+ - The reporter modal must be mounted via `<ReporterRoot />` somewhere in the
123
+ React tree. If you forget to mount it, `show()` is a no-op.
124
+ - Android screenshot-detection is not supported — OS does not expose a hook
125
+ uniformly across OEMs.
126
+ - Runtime config from the admin (e.g. `enableShakeGesture` toggle) is not yet
127
+ fetched by `sdk-rn`; pass options explicitly to `initReporter()` for now.
128
+
129
+ ---
130
+
131
+ ## Suite overview
132
+
133
+ Full SDK suite map + platform availability matrix: [docs/sdk/overview.md](https://github.com/jawaidgadiwala/instant-tasks/blob/main/docs/sdk/overview.md).
134
+
135
+ ## License
136
+
137
+ 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
138
 
9
139
  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.2",
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.2"
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.2"
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.2"
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",