@heedkit/sdk-react-native 0.1.0

package/lib/module/index.js

@@ -0,0 +1,678 @@
+"use strict";
+
+import * as React from "react";
+import { ActivityIndicator, Appearance, FlatList, Modal, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
+import { HeedKitClient } from "./client.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export { HeedKitClient };
+
+// ---------------------------------------------------------------------------
+// Per-kind metadata. Kept here (not the client) because it's view-layer copy.
+// ---------------------------------------------------------------------------
+
+const KIND_META = {
+  feature_request: {
+    label: "Features",
+    placeholder: "What should we build?",
+    tabIcon: "💡"
+  },
+  bug_report: {
+    label: "Bugs",
+    placeholder: "What's broken?",
+    tabIcon: "🐞"
+  },
+  improvement: {
+    label: "Improvements",
+    placeholder: "What could be better?",
+    tabIcon: "✨"
+  },
+  appreciation: {
+    label: "Appreciation",
+    placeholder: "What did you love?",
+    tabIcon: "❤️"
+  },
+  other: {
+    label: "Other",
+    placeholder: "Tell us anything",
+    tabIcon: "💬"
+  }
+};
+const INTERACTION_META = {
+  upvote: {
+    icon: "▲",
+    label: "Upvote"
+  },
+  downvote: {
+    icon: "▼",
+    label: "Downvote"
+  },
+  plus_one: {
+    icon: "+1",
+    label: "+1"
+  },
+  like: {
+    icon: "♥",
+    label: "Like"
+  }
+};
+const FONT_SIZES = {
+  sm: 13,
+  md: 14,
+  lg: 16
+};
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const HeedKitContext = /*#__PURE__*/React.createContext(null);
+export function HeedKitProvider({
+  projectKey,
+  apiUrl,
+  user,
+  children
+}) {
+  const [client] = React.useState(() => new HeedKitClient({
+    projectKey,
+    apiUrl,
+    user
+  }));
+  const [ready, setReady] = React.useState(false);
+  const [theme, setTheme] = React.useState({});
+  React.useEffect(() => {
+    client.init({
+      ...user,
+      platform: user?.platform || "react-native"
+    }).then(() => {
+      setTheme(client.getTheme());
+      setReady(true);
+    });
+  }, [client]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/_jsx(HeedKitContext.Provider, {
+    value: {
+      client,
+      ready,
+      theme
+    },
+    children: children
+  });
+}
+export function useHeedKit() {
+  const ctx = React.useContext(HeedKitContext);
+  if (!ctx) throw new Error("useHeedKit must be used inside <HeedKitProvider>");
+  return ctx;
+}
+
+// Mobile-friendly singleton for users who don't want a provider.
+export const HeedKit = {
+  _instance: null,
+  async init(config) {
+    this._instance = new HeedKitClient(config);
+    return this._instance.init({
+      ...config.user,
+      platform: config.user?.platform || "react-native"
+    });
+  },
+  client() {
+    if (!this._instance) throw new Error("HeedKit.init not called");
+    return this._instance;
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Theme palette derived from the server theme + the device color scheme when
+// the user picked "system".
+// ---------------------------------------------------------------------------
+
+function usePalette(theme) {
+  const [systemScheme, setSystemScheme] = React.useState(Appearance.getColorScheme());
+  React.useEffect(() => {
+    const sub = Appearance.addChangeListener(({
+      colorScheme
+    }) => setSystemScheme(colorScheme));
+    return () => sub.remove();
+  }, []);
+  const mode = theme.mode === "system" ? systemScheme === "dark" ? "dark" : "light" : theme.mode || "light";
+  const dark = mode === "dark";
+  return {
+    primary: theme.primary || "#0D9488",
+    radius: theme.radius ?? 12,
+    fs: FONT_SIZES[theme.font_size ?? "md"] ?? 14,
+    bg: dark ? "#0F172A" : "#FFFFFF",
+    fg: dark ? "#F1F5F9" : "#0F172A",
+    muted: dark ? "#94A3B8" : "#64748B",
+    row: dark ? "#1E293B" : "#F8FAFC",
+    border: dark ? "#1E293B" : "#E2E8F0",
+    inputBorder: dark ? "#334155" : "#CBD5E1",
+    inputBg: dark ? "#0F172A" : "#FFFFFF",
+    dark
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Public components
+// ---------------------------------------------------------------------------
+
+export function FeedbackButton({
+  label = "Feedback"
+}) {
+  const ctx = React.useContext(HeedKitContext);
+  const [open, setOpen] = React.useState(false);
+  const p = usePalette(ctx?.theme || {});
+  if (!ctx?.ready) return null;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setOpen(true),
+      style: [styles.fab, {
+        backgroundColor: p.primary
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.fabLabel, {
+          fontSize: p.fs
+        }],
+        children: label
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      animationType: "slide",
+      onRequestClose: () => setOpen(false),
+      children: /*#__PURE__*/_jsx(FeedbackScreen, {
+        onClose: () => setOpen(false)
+      })
+    })]
+  });
+}
+export function FeedbackScreen({
+  onClose
+}) {
+  const ctx = React.useContext(HeedKitContext);
+  const p = usePalette(ctx?.theme || {});
+  if (!ctx?.ready) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.center, {
+        backgroundColor: p.bg,
+        flex: 1
+      }],
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: p.primary
+      })
+    });
+  }
+  const enabledKinds = ctx.client.getEnabledKinds();
+  const groupMode = ctx.theme.group_mode || "tabs";
+  const showCounts = ctx.theme.show_counts || {};
+  const [mode, setMode] = React.useState("browse");
+  const [activeKind, setActiveKind] = React.useState(groupMode === "tabs" && enabledKinds.length > 0 ? enabledKinds[0] : "all");
+  const [features, setFeatures] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  async function refresh() {
+    setLoading(true);
+    try {
+      const opts = {
+        sort: "top"
+      };
+      if (activeKind !== "all") opts.kind = activeKind;
+      setFeatures(await ctx.client.list(opts));
+    } finally {
+      setLoading(false);
+    }
+  }
+  React.useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeKind]);
+  async function performInteraction(f, _i) {
+    // Backend currently has one vote toggle endpoint per feature; richer
+    // per-interaction storage can be wired here later.
+    const r = await ctx.client.vote(f.id);
+    setFeatures(arr => arr.map(x => x.id === f.id ? {
+      ...x,
+      voted: r.voted,
+      vote_count: r.vote_count
+    } : x));
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: p.bg
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.header, {
+        borderColor: p.border
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: p.fg,
+          fontSize: p.fs + 6
+        }],
+        children: ctx.client.getProjectName() || "Feedback"
+      }), onClose && /*#__PURE__*/_jsx(Pressable, {
+        onPress: onClose,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: p.primary,
+            fontWeight: "600",
+            fontSize: p.fs
+          },
+          children: "Close"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.modeRow,
+      children: ["browse", "suggest"].map(m => /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => setMode(m),
+        style: [styles.modeBtn, {
+          backgroundColor: mode === m ? p.primary : "transparent"
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: mode === m ? "#fff" : p.muted,
+            fontWeight: "600",
+            fontSize: p.fs - 1
+          },
+          children: m === "browse" ? "Browse" : "Suggest"
+        })
+      }, m))
+    }), mode === "browse" && groupMode === "tabs" && enabledKinds.length > 0 && /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: [styles.tabRow, {
+        borderColor: p.border
+      }],
+      contentContainerStyle: {
+        gap: 6,
+        paddingHorizontal: 16,
+        paddingVertical: 10
+      },
+      children: ["all", ...enabledKinds].map(k => {
+        const active = activeKind === k;
+        return /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => setActiveKind(k),
+          style: [styles.tab, {
+            backgroundColor: active ? p.primary : p.row
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: active ? "#fff" : p.fg,
+              fontSize: p.fs - 1,
+              fontWeight: "500"
+            },
+            children: k === "all" ? "All" : `${KIND_META[k].tabIcon} ${KIND_META[k].label}`
+          })
+        }, k);
+      })
+    }), mode === "browse" ? loading ? /*#__PURE__*/_jsx(View, {
+      style: [styles.center, {
+        flex: 1
+      }],
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: p.primary
+      })
+    }) : features.length === 0 ? /*#__PURE__*/_jsx(View, {
+      style: [styles.center, {
+        flex: 1
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: p.muted,
+          fontSize: p.fs
+        },
+        children: "No items yet \u2014 be the first!"
+      })
+    }) : /*#__PURE__*/_jsx(FlatList, {
+      data: features,
+      keyExtractor: f => f.id,
+      contentContainerStyle: {
+        padding: 16,
+        gap: 8
+      },
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsx(Row, {
+        feature: item,
+        palette: p,
+        interactions: ctx.client.getInteractionsFor(item.kind),
+        showCount: showCounts[item.kind] !== false,
+        onInteraction: i => performInteraction(item, i)
+      })
+    }) : /*#__PURE__*/_jsx(SubmitForm, {
+      palette: p,
+      enabledKinds: enabledKinds.length > 0 ? enabledKinds : ["other"],
+      onSubmitted: async () => {
+        setMode("browse");
+        await refresh();
+      }
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Row + form (private)
+// ---------------------------------------------------------------------------
+
+function Row({
+  feature: f,
+  palette: p,
+  interactions,
+  showCount,
+  onInteraction
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, {
+      backgroundColor: p.row,
+      borderRadius: p.radius
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.actionCol,
+      children: interactions.length === 0 ? showCount && /*#__PURE__*/_jsx(View, {
+        style: [styles.actBtn, {
+          borderColor: p.border,
+          borderRadius: p.radius - 4
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: p.fg,
+            fontWeight: "600",
+            fontSize: p.fs - 1
+          },
+          children: f.vote_count
+        })
+      }) : interactions.map(i => /*#__PURE__*/_jsxs(Pressable, {
+        onPress: () => onInteraction(i),
+        style: [styles.actBtn, {
+          borderRadius: p.radius - 4,
+          borderColor: f.voted ? p.primary : p.border,
+          borderWidth: f.voted ? 2 : 1,
+          backgroundColor: f.voted ? p.primary + "22" : "transparent"
+        }],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: {
+            color: f.voted ? p.primary : p.fg,
+            fontSize: p.fs + 1
+          },
+          children: INTERACTION_META[i].icon
+        }), showCount && /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: f.voted ? p.primary : p.fg,
+            fontSize: p.fs - 2,
+            fontWeight: "600"
+          },
+          children: f.vote_count
+        })]
+      }, i))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: {
+          color: p.fg,
+          fontWeight: "600",
+          fontSize: p.fs
+        },
+        children: f.title
+      }), !!f.description && /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: p.muted,
+          fontSize: p.fs - 1,
+          marginTop: 4
+        },
+        numberOfLines: 3,
+        children: f.description
+      }), (f.status !== "open" || f.tag) && /*#__PURE__*/_jsxs(View, {
+        style: styles.badges,
+        children: [f.status !== "open" && /*#__PURE__*/_jsx(Text, {
+          style: [styles.badge, {
+            backgroundColor: p.border,
+            color: p.muted,
+            fontSize: p.fs - 3
+          }],
+          children: f.status.replace("_", " ")
+        }), !!f.tag && /*#__PURE__*/_jsx(Text, {
+          style: [styles.badge, {
+            backgroundColor: p.border,
+            color: p.muted,
+            fontSize: p.fs - 3
+          }],
+          children: f.tag
+        })]
+      })]
+    })]
+  });
+}
+function SubmitForm({
+  palette: p,
+  enabledKinds,
+  onSubmitted
+}) {
+  const ctx = React.useContext(HeedKitContext);
+  const [kind, setKind] = React.useState(enabledKinds[0]);
+  const [title, setTitle] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [submitting, setSubmitting] = React.useState(false);
+  async function submit() {
+    if (!title.trim()) return;
+    setSubmitting(true);
+    try {
+      await ctx.client.submit({
+        title,
+        description,
+        kind
+      });
+      setTitle("");
+      setDescription("");
+      onSubmitted();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: {
+      padding: 16,
+      gap: 12
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: {
+        color: p.fg,
+        fontWeight: "500",
+        fontSize: p.fs - 1
+      },
+      children: "What's this about?"
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.segmented, {
+        backgroundColor: p.row
+      }],
+      children: enabledKinds.map(k => {
+        const active = k === kind;
+        return /*#__PURE__*/_jsx(Pressable, {
+          onPress: () => setKind(k),
+          style: [styles.seg, {
+            backgroundColor: active ? p.bg : "transparent",
+            borderRadius: 999
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: active ? p.fg : p.muted,
+              fontWeight: "500",
+              fontSize: p.fs - 2
+            },
+            children: KIND_META[k].label
+          })
+        }, k);
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: p.fg,
+        fontWeight: "500",
+        fontSize: p.fs - 1
+      },
+      children: "Title"
+    }), /*#__PURE__*/_jsx(TextInput, {
+      value: title,
+      onChangeText: setTitle,
+      placeholder: KIND_META[kind].placeholder,
+      placeholderTextColor: p.muted,
+      style: [styles.input, {
+        borderColor: p.inputBorder,
+        color: p.fg,
+        backgroundColor: p.inputBg,
+        borderRadius: p.radius - 2
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: p.fg,
+        fontWeight: "500",
+        fontSize: p.fs - 1
+      },
+      children: "Description"
+    }), /*#__PURE__*/_jsx(TextInput, {
+      value: description,
+      onChangeText: setDescription,
+      placeholder: "Any extra context helps.",
+      placeholderTextColor: p.muted,
+      multiline: true,
+      numberOfLines: 4,
+      style: [styles.input, {
+        borderColor: p.inputBorder,
+        color: p.fg,
+        backgroundColor: p.inputBg,
+        borderRadius: p.radius - 2,
+        height: 100
+      }]
+    }), /*#__PURE__*/_jsx(Pressable, {
+      disabled: !title || submitting,
+      onPress: submit,
+      style: [styles.submit, {
+        backgroundColor: p.primary,
+        opacity: !title || submitting ? 0.6 : 1,
+        borderRadius: p.radius
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: "#fff",
+          fontWeight: "600",
+          fontSize: p.fs
+        },
+        children: submitting ? "Submitting…" : "Submit"
+      })
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1
+  },
+  title: {
+    fontWeight: "700"
+  },
+  modeRow: {
+    flexDirection: "row",
+    gap: 6,
+    paddingHorizontal: 16,
+    paddingTop: 10
+  },
+  modeBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 999
+  },
+  tabRow: {
+    maxHeight: 48,
+    borderBottomWidth: 1
+  },
+  tab: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    padding: 12,
+    alignItems: "flex-start"
+  },
+  actionCol: {
+    gap: 4
+  },
+  actBtn: {
+    minWidth: 44,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1
+  },
+  badges: {
+    flexDirection: "row",
+    gap: 6,
+    marginTop: 6,
+    flexWrap: "wrap"
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 999,
+    textTransform: "uppercase",
+    letterSpacing: 0.4
+  },
+  segmented: {
+    flexDirection: "row",
+    padding: 4,
+    borderRadius: 999,
+    gap: 4,
+    alignSelf: "flex-start",
+    flexWrap: "wrap"
+  },
+  seg: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  input: {
+    borderWidth: 1,
+    padding: 12,
+    fontSize: 14
+  },
+  submit: {
+    padding: 14,
+    alignItems: "center",
+    marginTop: 8
+  },
+  fab: {
+    position: "absolute",
+    bottom: 24,
+    right: 24,
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+    borderRadius: 999,
+    shadowColor: "#000",
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    elevation: 6
+  },
+  fabLabel: {
+    color: "#fff",
+    fontWeight: "600"
+  }
+});
+//# sourceMappingURL=index.js.map