@upstep/react-native 0.6.13 → 0.6.15

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## 0.6.15
+
+- Show the custom dashboard status name and color in the feedback sheet.
+
+## 0.6.14
+
+- Show dashboard custom labels on feedback cards and detail views.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "description": "Upstep feedback SDK for React Native",
   "homepage": "https://upstep.dev",
   "repository": {
@@ -19,7 +19,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.5.5"
+    "@upstep/types": "0.5.6"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.18",

package/src/FeedbackSheet.tsx

@@ -277,9 +277,10 @@ function FeedCard({
           <TypeBadge type={item.type} p={p} />
           {item.status === "PENDING"
             ? <PendingBadge />
-            : <StatusDot status={item.status} />}
+            : <StatusDot status={item.status} color={item.boardStatus?.color} />}
           <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
+        <LabelBadges labels={item.labels} p={p} />
       </View>
 
       <Text style={[styles.chevron, { color: p.textFaint }]}>›</Text>
@@ -337,7 +338,8 @@ function FeedDetailBody({
         <TypeBadge type={item.type} p={p} />
         {item.status === "PENDING"
           ? <PendingBadge />
-          : <StatusBadge status={item.status} p={p} />}
+          : <StatusBadge status={item.status} boardStatus={item.boardStatus} p={p} />}
+        <LabelBadges labels={item.labels} p={p} />
       </View>
 
       <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
@@ -547,15 +549,34 @@ const STATUS_COLOR: Record<string, string> = {
   PENDING: "#ea580c", CLOSED: "#6b7280",
 };
 
-function StatusDot({ status }: { status: string }) {
-  return <View style={[styles.statusDot, { backgroundColor: STATUS_COLOR[status] ?? "#9ca3af" }]} />;
+function StatusDot({ status, color }: { status: string; color?: string }) {
+  return <View style={[styles.statusDot, { backgroundColor: color ?? STATUS_COLOR[status] ?? "#9ca3af" }]} />;
 }
 
-function StatusBadge({ status, p }: { status: string; p: Palette }) {
+function StatusBadge({
+  status, boardStatus, p,
+}: {
+  status: string; boardStatus: Feedback["boardStatus"]; p: Palette;
+}) {
   return (
     <View style={[styles.statusBadge, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
-      <StatusDot status={status} />
-      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{status.replace("_", " ")}</Text>
+      <StatusDot status={status} color={boardStatus?.color} />
+      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{boardStatus?.name ?? status.replace("_", " ")}</Text>
+    </View>
+  );
+}
+
+function LabelBadges({ labels, p }: { labels: Feedback["labels"]; p: Palette }) {
+  if (!labels?.length) return null;
+
+  return (
+    <View style={styles.labelBadges}>
+      {labels.map((label) => (
+        <View key={label.id} style={[styles.labelBadge, { backgroundColor: p.bgSoft, borderColor: label.color }]}>
+          <View style={[styles.labelDot, { backgroundColor: label.color }]} />
+          <Text style={[styles.labelBadgeText, { color: p.textSoft }]} numberOfLines={1}>{label.name}</Text>
+        </View>
+      ))}
     </View>
   );
 }
@@ -641,12 +662,16 @@ const styles = StyleSheet.create({
   cardDesc: { fontSize: 12.5, lineHeight: 17, marginBottom: 6 },
   cardMeta: { flexDirection: "row", alignItems: "center", gap: 6 },
   cardDate: { fontSize: 11 },
+  labelBadges: { flexDirection: "row", flexWrap: "wrap", gap: 6, marginTop: 7 },
+  labelBadge: { flexDirection: "row", alignItems: "center", gap: 5, borderWidth: 1, borderRadius: 10, paddingHorizontal: 7, paddingVertical: 3, maxWidth: "100%" },
+  labelDot: { width: 6, height: 6, borderRadius: 3 },
+  labelBadgeText: { fontSize: 11, fontWeight: "500", flexShrink: 1 },
   chevron: { fontSize: 22, fontWeight: "300", marginLeft: 4 },
 
   // Detail
   detailPad: { paddingTop: 4 },
   detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
-  badgeRow: { flexDirection: "row", gap: 8, marginBottom: 16 },
+  badgeRow: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginBottom: 16 },
   detailContent: { fontSize: 15, lineHeight: 23, marginBottom: 24 },
   upvoteBtn: {
     flexDirection: "row", alignItems: "center", gap: 8,

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

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