@upstep/react-native 0.6.10 → 0.6.12

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.10",
+  "version": "0.6.12",
   "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,7 +19,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.1"
+    "@upstep/types": "0.5.4"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/FeedbackSheet.tsx

@@ -66,7 +66,6 @@ export function FeedbackSheet() {
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
-  const [listTab, setListTab] = useState<"open" | "done">("open");
   const insets = useSafeAreaInsets();
 
   // Refresh list every time the modal opens
@@ -136,30 +135,6 @@ export function FeedbackSheet() {
             )}
           </View>
 
-          {/* Open / Completed tabs — only on list screen */}
-          {nav.screen === "list" && (
-            <View style={[styles.listTabBar, { borderBottomColor: p.border }]}>
-              <TouchableOpacity
-                onPress={() => setListTab("open")}
-                style={[styles.listTabBtn, listTab === "open" && { borderBottomColor: accentColor }]}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.listTabText, { color: listTab === "open" ? accentColor : p.textFaint }]}>
-                  Open
-                </Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => setListTab("done")}
-                style={[styles.listTabBtn, listTab === "done" && { borderBottomColor: accentColor }]}
-                activeOpacity={0.7}
-              >
-                <Text style={[styles.listTabText, { color: listTab === "done" ? accentColor : p.textFaint }]}>
-                  Completed
-                </Text>
-              </TouchableOpacity>
-            </View>
-          )}
-
           {/* Scrollable body */}
           <ScrollView
             style={styles.scroll}
@@ -171,7 +146,6 @@ export function FeedbackSheet() {
               <FeedListBody
                 p={p}
                 accent={accentColor}
-                tab={listTab}
                 onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
               />
             )}
@@ -217,15 +191,13 @@ export function FeedbackSheet() {
 // ─── FeedListBody ─────────────────────────────────────────────────────────────
 
 function FeedListBody({
-  p, accent, tab, onSelect,
+  p, accent, onSelect,
 }: {
-  p: Palette; accent: string; tab: "open" | "done"; onSelect: (id: string) => void;
+  p: Palette; accent: string; onSelect: (id: string) => void;
 }) {
   const { feedItems, feedLoading, vote } = useUpstep();
 
-  const displayItems = tab === "done"
-    ? feedItems.filter((f) => f.status === "DONE")
-    : feedItems.filter((f) => f.status === "OPEN" || f.status === "IN_PROGRESS" || f.status === "PENDING");
+  const displayItems = feedItems.filter((f) => f.status !== "CLOSED");
 
   if (feedLoading) {
     return (
@@ -239,9 +211,7 @@ function FeedListBody({
     return (
       <View style={styles.centered}>
         <Text style={[styles.emptyText, { color: p.textFaint }]}>
-          {tab === "done"
-            ? "No completed items yet."
-            : "No open feedback yet. Be the first to add one."}
+          No open feedback yet. Be the first to add one.
         </Text>
       </View>
     );
@@ -640,23 +610,6 @@ const styles = StyleSheet.create({
   newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
-  // List tab bar
-  listTabBar: {
-    flexDirection: "row",
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-  listTabBtn: {
-    flex: 1,
-    alignItems: "center",
-    paddingVertical: 11,
-    borderBottomWidth: 2,
-    borderBottomColor: "transparent",
-  },
-  listTabText: {
-    fontSize: 13,
-    fontWeight: "600",
-  },
-
   // Scroll — flex: 1 fills all remaining space after the fixed header
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1, padding: 16, paddingBottom: 32 },

package/src/api.ts

@@ -13,7 +13,7 @@ export class UpstepApiClient {
   userId: string | undefined;
 
   constructor(config: UpstepConfig) {
-    this.baseUrl = (config.baseUrl ?? "https://upstep.io").replace(/\/$/, "");
+    this.baseUrl = (config.baseUrl ?? "https://upstep.dev").replace(/\/$/, "");
     this.apiKey = config.apiKey;
     if (config.userId !== undefined) this.userId = config.userId;
   }