@upstep/react-native 0.6.11 → 0.6.13

package/.turbo/turbo-type-check.log

@@ -0,0 +1,4 @@
+
+> @upstep/react-native@0.6.12 type-check /Users/sandhyasandy/Dev/upstep/packages/sdk-react-native
+> tsc --noEmit
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Upstep
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# @upstep/react-native
+
+The [Upstep](https://upstep.dev) feedback SDK for React Native: a launcher button and a bottom sheet with a voting board and submit form, backed by the same project as your web app.
+
+## Install
+
+```bash
+npm install @upstep/react-native react-native-safe-area-context
+```
+
+`react-native-safe-area-context` is a required peer dependency (the sheet needs it for safe-area insets). Get an API key by creating a free project at [upstep.dev](https://upstep.dev).
+
+## Quick start
+
+```tsx
+import { FeedbackProvider, FeedbackButton, FeedbackSheet } from "@upstep/react-native";
+
+export default function App() {
+  return (
+    <FeedbackProvider apiKey="upstep_xxx">
+      {/* your app */}
+      <FeedbackButton />
+      <FeedbackSheet />
+    </FeedbackProvider>
+  );
+}
+```
+
+Same idea as the web widget: a floating button opens a sheet with a voting board and a submit form. It reports to the same project and the same board as your web app, so mobile and web feedback end up in one place, sorted by votes.
+
+## Shake to submit feedback
+
+Optional, and only active if [`expo-sensors`](https://www.npmjs.com/package/expo-sensors) is installed:
+
+```bash
+npm install expo-sensors
+```
+
+```tsx
+import { useShakeToFeedback } from "@upstep/react-native";
+
+function App() {
+  useShakeToFeedback(); // opens the sheet when the device is shaken
+  // ...
+}
+```
+
+If `expo-sensors` isn't installed, the hook is a no-op — safe to call unconditionally.
+
+## Configuration
+
+`FeedbackProvider` takes the same options as the web SDK:
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `apiKey` | `string` | — | **Required.** Your project's API key. |
+| `userId` | `string` | — | End-user id from your app, used to deduplicate votes per user. Call `identify(userId)` if it's only known after login. |
+| `baseUrl` | `string` | `https://upstep.dev` | Only needed for self-hosted or staging setups. |
+| `accentColor` | `string` | `#D97757` | Any CSS color, used for the launcher button and highlights. |
+| `theme` | `"light" \| "dark" \| "auto"` | `"auto"` | `"auto"` follows the device color scheme. |
+
+## API
+
+- `<FeedbackProvider apiKey="..." />` — wraps your app, all config options above are valid props.
+- `<FeedbackButton position? label? icon? />` — floating launcher, `position` is `"bottom-right"` (default) or `"bottom-left"`.
+- `<FeedbackSheet />` — the modal sheet with the board and submit form. Mount once, anywhere inside the provider.
+- `useShakeToFeedback()` — opens the sheet on a device shake, requires `expo-sensors`.
+- `useUpstep()` — the underlying state and actions (`feedItems`, `submit`, `vote`, `openSheet`, `closeSheet`, `identify`, ...), if you want to build a custom UI instead of `FeedbackSheet`.
+
+## Links
+
+- [Full documentation](https://upstep.dev/#integrate)
+- [Dashboard / sign up](https://upstep.dev/login)
+- [@upstep/js](https://www.npmjs.com/package/@upstep/js) for web apps

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "Upstep feedback SDK for React Native",
+  "homepage": "https://upstep.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TheBugEater/upstep.git",
+    "directory": "packages/sdk-react-native"
+  },
+  "bugs": "https://github.com/TheBugEater/upstep/issues",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -12,14 +19,16 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.3"
+    "@upstep/types": "0.5.5"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.18",
     "react": ">=18",
     "react-native": ">=0.73",
     "react-native-safe-area-context": ">=4"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@types/react": "^19.0.7",
     "@types/react-native": "^0.73.0",
     "react-native-safe-area-context": "^5.8.0",

package/src/api.ts

@@ -1,3 +1,4 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import type {
   Feedback,
   FeedbackListResponse,
@@ -7,15 +8,42 @@ import type {
   VoteValue,
 } from "@upstep/types";
 
+const ANON_ID_KEY = "upstep-anonymous-id";
+
+function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+
 export class UpstepApiClient {
   private readonly baseUrl: string;
   private readonly apiKey: string;
   userId: string | undefined;
+  // Set synchronously to a throwaway id so there's always something to send;
+  // swapped for the persisted value (or backfilled into storage) once
+  // AsyncStorage resolves. Callers await anonymousIdReady first so requests
+  // always go out with the id that's actually persisted.
+  anonymousId: string;
+  private readonly anonymousIdReady: Promise<void>;
 
   constructor(config: UpstepConfig) {
     this.baseUrl = (config.baseUrl ?? "https://upstep.dev").replace(/\/$/, "");
     this.apiKey = config.apiKey;
     if (config.userId !== undefined) this.userId = config.userId;
+    this.anonymousId = generateId();
+    this.anonymousIdReady = this.loadAnonymousId();
+  }
+
+  private async loadAnonymousId(): Promise<void> {
+    try {
+      const stored = await AsyncStorage.getItem(ANON_ID_KEY);
+      if (stored) {
+        this.anonymousId = stored;
+      } else {
+        await AsyncStorage.setItem(ANON_ID_KEY, this.anonymousId);
+      }
+    } catch {
+      // storage unavailable - keep the in-memory id for this session
+    }
   }
 
   /** Update the end-user id at runtime (e.g. after the user logs in). */
@@ -28,20 +56,25 @@ export class UpstepApiClient {
   }
 
   async listFeedback(params?: { cursor?: string; limit?: number; sort?: "date" | "votes" }): Promise<FeedbackListResponse> {
+    await this.anonymousIdReady;
     const qs = new URLSearchParams();
     if (params?.cursor) qs.set("cursor", params.cursor);
     if (params?.limit) qs.set("limit", String(params.limit));
     if (params?.sort) qs.set("sort", params.sort);
     // Pass userId so the server can include the user's own pending items.
     if (this.userId) qs.set("endUserId", this.userId);
+    qs.set("anonymousId", this.anonymousId);
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback?${qs}`, { headers: this.headers() });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
     return res.json() as Promise<FeedbackListResponse>;
   }
 
   async getItem(feedbackId: string): Promise<FeedbackWithComments> {
-    const qs = this.userId ? `?endUserId=${encodeURIComponent(this.userId)}` : "";
-    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}${qs}`, {
+    await this.anonymousIdReady;
+    const qs = new URLSearchParams();
+    if (this.userId) qs.set("endUserId", this.userId);
+    qs.set("anonymousId", this.anonymousId);
+    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}?${qs}`, {
       headers: this.headers(),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
@@ -49,20 +82,26 @@ export class UpstepApiClient {
   }
 
   async submitFeedback(payload: SubmitFeedbackPayload): Promise<Feedback> {
+    await this.anonymousIdReady;
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback`, {
       method: "POST",
       headers: this.headers(),
-      body: JSON.stringify({ ...payload, endUserId: payload.endUserId ?? this.userId }),
+      body: JSON.stringify({
+        ...payload,
+        endUserId: payload.endUserId ?? this.userId,
+        anonymousId: payload.anonymousId ?? this.anonymousId,
+      }),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
     return res.json() as Promise<Feedback>;
   }
 
   async vote(feedbackId: string, value: VoteValue): Promise<void> {
+    await this.anonymousIdReady;
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}/vote`, {
       method: "POST",
       headers: this.headers(),
-      body: JSON.stringify({ value, endUserId: this.userId }),
+      body: JSON.stringify({ value, endUserId: this.userId, anonymousId: this.anonymousId }),
     });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
   }