convex-feedback-ui 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "convex-feedback-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Customizable React and React Native UI primitives for convex-feedback.",
   "license": "Apache-2.0",
   "type": "module",
@@ -36,12 +36,13 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
-    "convex-feedback": "^0.1.0",
+    "convex-feedback": "^0.1.4",
     "react": ">=18.2.0",
     "react-native": ">=0.83.0",
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-screens": ">=4.23.0",
     "expo": ">=55.0.0",
+    "expo-constants": ">=55.0.0",
     "expo-router": ">=55.0.0"
   },
   "peerDependenciesMeta": {
@@ -57,6 +58,9 @@
     "expo": {
       "optional": true
     },
+    "expo-constants": {
+      "optional": true
+    },
     "expo-router": {
       "optional": true
     }

package/src/native/expo/FeedbackScreen.tsx

@@ -3,6 +3,7 @@ import { FeedbackProvider } from "../../shared/context/FeedbackProvider";
 import { kinds } from "../../shared/helpers";
 import { ExpoFeedbackBody } from "./ExpoFeedbackBody";
 import type { ExpoFeedbackScreenProps } from "./types";
+import { collectExpoMetadata } from "./metadata";
 
 export function FeedbackScreen({
   hooks,
@@ -14,6 +15,7 @@ export function FeedbackScreen({
   enabledKinds = kinds,
   maxCommentDepth = 5,
   debounceDuration = 300,
+  collectMetadata,
   transformComments,
   renderActor,
   ...props
@@ -27,6 +29,8 @@ export function FeedbackScreen({
         enabledKinds={enabledKinds}
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
+        collectMetadata={collectMetadata}
+        collectStandardMetadata={collectExpoMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
       >

package/src/native/expo/index.ts

@@ -1,8 +1,10 @@
 export * from "../../shared/context/FeedbackBodyProvider.js";
 export * from "../../shared/context/FeedbackProvider.js";
 export * from "../../shared/messages.js";
+export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
+export * from "./metadata.js";
 export * from "./FeedbackScreen.js";
 export type * from "./types.js";

package/src/native/expo/metadata.ts

@@ -0,0 +1,62 @@
+import type { FeedbackMetadataValue } from "convex-feedback";
+import Constants from "expo-constants";
+import { Platform } from "react-native";
+
+import type {
+  StandardMetadataKey,
+  EnabledStandardMetadataSelection,
+} from "../../shared/types/metadata.js";
+import {
+  collectNativeMetadata,
+  defaultNativeMetadataKeys,
+} from "../shared/metadata.js";
+
+const defaultExpoMetadataKeys: readonly StandardMetadataKey[] = [
+  ...defaultNativeMetadataKeys,
+  "appVersion",
+  "buildNumber",
+  "applicationId",
+  "expoRuntimeVersion",
+  "executionEnvironment",
+];
+
+export function collectExpoMetadata(
+  selection: EnabledStandardMetadataSelection,
+): Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> {
+  const selected = selection === true ? defaultExpoMetadataKeys : selection;
+  const keys = new Set(selected);
+  const metadata = collectNativeMetadata(selected);
+  const config = Constants.expoConfig;
+
+  if (keys.has("appVersion") && config?.version)
+    metadata.appVersion = config.version;
+
+  if (keys.has("buildNumber")) {
+    const buildNumber =
+      Platform.OS === "ios"
+        ? (Constants.platform?.ios?.buildNumber ?? config?.ios?.buildNumber)
+        : Platform.OS === "android"
+          ? (Constants.platform?.android?.versionCode ??
+            config?.android?.versionCode)
+          : undefined;
+    if (buildNumber !== undefined && buildNumber !== null)
+      metadata.buildNumber = buildNumber;
+  }
+
+  if (keys.has("applicationId")) {
+    const applicationId =
+      Platform.OS === "ios"
+        ? config?.ios?.bundleIdentifier
+        : Platform.OS === "android"
+          ? config?.android?.package
+          : undefined;
+    if (applicationId) metadata.applicationId = applicationId;
+  }
+
+  if (keys.has("expoRuntimeVersion") && Constants.expoRuntimeVersion)
+    metadata.expoRuntimeVersion = Constants.expoRuntimeVersion;
+  if (keys.has("executionEnvironment"))
+    metadata.executionEnvironment = Constants.executionEnvironment;
+
+  return metadata;
+}

package/src/native/native/FeedbackScreen.tsx

@@ -3,6 +3,7 @@ import { FeedbackProvider } from "../../shared/context/FeedbackProvider";
 import { kinds } from "../../shared/helpers";
 import type { FeedbackScreenRootProps } from "../../shared/types";
 import { FeedbackScreenContent } from "../shared/ui/BodyContent";
+import { collectNativeMetadata } from "../shared/metadata";
 
 export function FeedbackScreen({
   hooks,
@@ -14,6 +15,7 @@ export function FeedbackScreen({
   enabledKinds = kinds,
   maxCommentDepth = 5,
   debounceDuration = 300,
+  collectMetadata,
   transformComments,
   renderActor,
   ...props
@@ -27,6 +29,8 @@ export function FeedbackScreen({
         enabledKinds={enabledKinds}
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
+        collectMetadata={collectMetadata}
+        collectStandardMetadata={collectNativeMetadata}
         transformComments={transformComments}
         renderActor={renderActor}
       >

package/src/native/native/index.ts

@@ -1,7 +1,9 @@
 export * from "../../shared/context/FeedbackBodyProvider.js";
 export * from "../../shared/context/FeedbackProvider.js";
 export * from "../../shared/messages.js";
+export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
+export * from "../shared/metadata.js";
 export * from "./FeedbackScreen.js";

package/src/native/shared/metadata.ts

@@ -0,0 +1,39 @@
+import type { FeedbackMetadataValue } from "convex-feedback";
+import { Dimensions, PixelRatio, Platform } from "react-native";
+
+import type {
+  StandardMetadataKey,
+  EnabledStandardMetadataSelection,
+} from "../../shared/types/metadata.js";
+
+export const defaultNativeMetadataKeys: readonly StandardMetadataKey[] = [
+  "platform",
+  "osVersion",
+  "deviceModel",
+  "screenWidth",
+  "screenHeight",
+  "pixelRatio",
+  "fontScale",
+];
+
+export function collectNativeMetadata(
+  selection: EnabledStandardMetadataSelection,
+): Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> {
+  const keys = new Set(
+    selection === true ? defaultNativeMetadataKeys : selection,
+  );
+  const metadata: Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> =
+    {};
+  const screen = Dimensions.get("screen");
+
+  if (keys.has("platform")) metadata.platform = Platform.OS;
+  if (keys.has("osVersion")) metadata.osVersion = Platform.Version;
+  if (keys.has("deviceModel") && Platform.OS === "android")
+    metadata.deviceModel = Platform.constants.Model;
+  if (keys.has("screenWidth")) metadata.screenWidth = screen.width;
+  if (keys.has("screenHeight")) metadata.screenHeight = screen.height;
+  if (keys.has("pixelRatio")) metadata.pixelRatio = PixelRatio.get();
+  if (keys.has("fontScale")) metadata.fontScale = PixelRatio.getFontScale();
+
+  return metadata;
+}

package/src/native/shared/ui/CommentBranch.tsx

@@ -1,13 +1,47 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Text, View } from "react-native";
 
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
 import type { FeedbackScreenCommentBranchProps } from "../../../shared/types";
 import { Button } from "./Button";
-import { ReplyList } from "./ReplyList";
 import { Comment, FeedbackForm } from "./primitives.js";
 
+import type { FeedbackScreenReplyListProps } from "../../../shared/types";
+
+export function ReplyList({
+  entryId,
+  parentCommentId,
+}: FeedbackScreenReplyListProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
+  const { messages } = useFeedbackUi();
+
+  const replies = hooks.useComments({
+    entryId,
+    parentCommentId,
+    sort: commentSort,
+  });
+
+  const visible = useMemo(
+    () => transformComments?.(replies.results) ?? replies.results,
+    [replies.results, transformComments],
+  );
+
+  return (
+    <Comment.Children>
+      {visible.map((reply) => (
+        <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
+      ))}
+      {replies.status === "CanLoadMore" && (
+        <Button
+          label={messages.comments.loadMore}
+          onPress={() => replies.loadMore(hooks.pageSizes.replies)}
+        />
+      )}
+    </Comment.Children>
+  );
+}
+
 export function CommentBranch({
   comment,
   entryId,

package/src/native/shared/ui/EntryDetail.tsx

@@ -7,6 +7,7 @@ import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
 import { Button } from "./Button";
 import { CommentBranch } from "./CommentBranch";
 import { FeedbackEntry, FeedbackForm } from "./primitives";
+import { MetadataModal } from "./MetadataModal";
 
 export function EntryDetail({
   entryId,
@@ -21,6 +22,7 @@ export function EntryDetail({
   const setUpvote = hooks.useSetEntryUpvote();
   const createComment = hooks.useCreateComment();
   const [body, setBody] = useState("");
+  const [showMetadata, setShowMetadata] = useState(false);
   const visible = useMemo(
     () => transformComments?.(comments.results) ?? comments.results,
     [comments.results, transformComments],
@@ -66,6 +68,18 @@ export function EntryDetail({
           <FeedbackEntry.CommentCount />
         </FeedbackEntry.Content>
       </FeedbackEntry.Root>
+      {entry.metadata !== undefined && (
+        <Button
+          label={messages.metadata.view}
+          onPress={() => setShowMetadata(true)}
+        />
+      )}
+      {showMetadata && entry.metadata !== undefined && (
+        <MetadataModal
+          metadata={entry.metadata}
+          onRequestClose={() => setShowMetadata(false)}
+        />
+      )}
       <Text
         style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
       >

package/src/native/shared/ui/FeedbackScreenHeader.tsx

@@ -1,4 +1,5 @@
 import { Pressable, Text } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import { FeedbackBoard } from "./primitives";
@@ -6,6 +7,7 @@ import { FeedbackBoard } from "./primitives";
 export function FeedbackScreenHeader() {
   const { query, setShowForm, setQuery, enabledKinds } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
+  const { top } = useSafeAreaInsets();
 
   const pageTitle =
     enabledKinds.length === 1
@@ -13,28 +15,28 @@ export function FeedbackScreenHeader() {
       : messages.board.title;
 
   return (
-    <>
-      <FeedbackBoard.Header>
-        <FeedbackBoard.Title>{pageTitle}</FeedbackBoard.Title>
-        <Text style={{ color: theme.colors.mutedText }}>
-          {messages.board.subtitle}
-        </Text>
-        <Pressable
-          onPress={() => setShowForm(true)}
-          style={{
-            alignSelf: "flex-start",
-            paddingVertical: 9,
-            paddingHorizontal: 12,
-            borderRadius: 9,
-            backgroundColor: theme.colors.primary,
-          }}
+    <FeedbackBoard.Header style={{ padding: theme.spacing, paddingTop: top }}>
+      <FeedbackBoard.Title>{pageTitle}</FeedbackBoard.Title>
+      <Text style={{ color: theme.colors.mutedText }}>
+        {messages.board.subtitle}
+      </Text>
+      <Pressable
+        onPress={() => setShowForm(true)}
+        style={{
+          alignSelf: "flex-start",
+          paddingVertical: 9,
+          paddingHorizontal: 12,
+          borderRadius: 9,
+          backgroundColor: theme.colors.primary,
+        }}
+      >
+        <Text
+          style={{ color: theme.colors.primaryForeground, fontWeight: "700" }}
         >
-          <Text style={{ color: theme.colors.text, fontWeight: "700" }}>
-            {messages.board.createEntry}
-          </Text>
-        </Pressable>
-      </FeedbackBoard.Header>
+          {messages.board.createEntry}
+        </Text>
+      </Pressable>
       <FeedbackBoard.Search value={query} onValueChange={(q) => setQuery(q)} />
-    </>
+    </FeedbackBoard.Header>
   );
 }

package/src/native/shared/ui/FeedbackScreenList.tsx

@@ -31,7 +31,7 @@ export function FeedbackScreenList({
 
   return (
     <>
-      <FeedbackBoard.List style={{ paddingHorizontal: theme.spacing }}>
+      <FeedbackBoard.List style={{ padding: theme.spacing }}>
         {selectedEntryId ? (
           <EntryDetail
             entryId={selectedEntryId}

package/src/native/shared/ui/MetadataModal.tsx

@@ -0,0 +1,112 @@
+import type { FeedbackMetadata } from "convex-feedback";
+import { Modal, Pressable, ScrollView, Text, View } from "react-native";
+
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { formatMetadataKey } from "../../../shared/metadata";
+import { Button } from "./Button";
+
+export function MetadataModal({
+  metadata,
+  onRequestClose,
+}: {
+  metadata: FeedbackMetadata;
+  onRequestClose: () => void;
+}) {
+  const { messages, theme } = useFeedbackUi();
+  const sections = [
+    [messages.metadata.standard, metadata.standard],
+    [messages.metadata.additional, metadata.additional],
+  ] as const;
+  const hasValues = sections.some(
+    ([, values]) => values !== undefined && Object.keys(values).length > 0,
+  );
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      onRequestClose={onRequestClose}
+      role="dialog"
+    >
+      <Pressable
+        accessible={false}
+        focusable={false}
+        onPress={onRequestClose}
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          padding: 20,
+          backgroundColor: "rgba(0, 0, 0, 0.4)",
+        }}
+      >
+        <Pressable
+          accessible={false}
+          focusable={false}
+          onPress={(event) => event.stopPropagation()}
+          style={{
+            maxHeight: "80%",
+            gap: 14,
+            padding: 18,
+            borderRadius: theme.radius,
+            backgroundColor: theme.colors.surface,
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontSize: 18,
+              fontWeight: "700",
+            }}
+          >
+            {messages.metadata.title}
+          </Text>
+          <ScrollView contentContainerStyle={{ gap: 16 }}>
+            {hasValues ? (
+              sections.map(([label, values]) =>
+                values === undefined ||
+                Object.keys(values).length === 0 ? null : (
+                  <View key={label} style={{ gap: 8 }}>
+                    <Text
+                      style={{ color: theme.colors.text, fontWeight: "700" }}
+                    >
+                      {label}
+                    </Text>
+                    {Object.entries(values).map(([key, value]) => (
+                      <View
+                        key={key}
+                        style={{
+                          gap: 3,
+                          paddingBottom: 8,
+                          borderBottomWidth: 1,
+                          borderBottomColor: theme.colors.border,
+                        }}
+                      >
+                        <Text
+                          style={{
+                            color: theme.colors.mutedText,
+                            fontWeight: "600",
+                          }}
+                        >
+                          {formatMetadataKey(key)}
+                        </Text>
+                        <Text selectable style={{ color: theme.colors.text }}>
+                          {String(value)}
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                ),
+              )
+            ) : (
+              <Text style={{ color: theme.colors.mutedText }}>
+                {messages.metadata.empty}
+              </Text>
+            )}
+          </ScrollView>
+          <Button label={messages.metadata.close} onPress={onRequestClose} />
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/native/shared/ui/NewEntry.tsx

@@ -10,9 +10,10 @@ import {
   View,
 } from "react-native";
 
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
-import { useFeedbackBody } from "../../native";
+import { collectEntryMetadata } from "../../../shared/metadata";
 import { EntryDetail } from "./EntryDetail";
 import { FeedbackForm } from "./primitives";
 
@@ -166,7 +167,8 @@ function CreateForm({
   onBodyChange: (body: string) => void;
   onOpenSuggestion: (id: string) => void;
 }) {
-  const { hooks, enabledKinds } = useFeedbackBody();
+  const { hooks, enabledKinds, collectMetadata, collectStandardMetadata } =
+    useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const [submitting, setSubmitting] = useState(false);
   const create = hooks.useCreateEntry();
@@ -185,7 +187,19 @@ function CreateForm({
     setSubmitting(true);
 
     try {
-      onCreated(await create({ kind, title, body }));
+      const metadata = await collectEntryMetadata(
+        collectMetadata,
+        kind,
+        collectStandardMetadata,
+      );
+      onCreated(
+        await create({
+          kind,
+          title,
+          body,
+          ...(metadata === undefined ? {} : { metadata }),
+        }),
+      );
     } finally {
       setSubmitting(false);
     }

package/src/react/index.ts

@@ -1,6 +1,8 @@
 export * from "../shared/messages.js";
+export * from "../shared/metadata.js";
 export * from "../shared/theme.js";
 export type * from "../shared/types";
 export * from "./css.js";
+export * from "./metadata.js";
 export * from "./primitives.js";
 export * from "./screen.js";

package/src/react/metadata.ts

@@ -0,0 +1,51 @@
+import type { FeedbackMetadataValue } from "convex-feedback";
+
+import type {
+  StandardMetadataKey,
+  EnabledStandardMetadataSelection,
+} from "../shared/types/metadata.js";
+
+const defaultWebMetadataKeys: readonly StandardMetadataKey[] = [
+  "platform",
+  "userAgent",
+  "language",
+  "timezone",
+  "screenWidth",
+  "screenHeight",
+  "viewportWidth",
+  "viewportHeight",
+  "devicePixelRatio",
+];
+
+export function collectWebMetadata(
+  selection: EnabledStandardMetadataSelection,
+): Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> {
+  const keys = new Set(selection === true ? defaultWebMetadataKeys : selection);
+  const metadata: Partial<Record<StandardMetadataKey, FeedbackMetadataValue>> =
+    {};
+  const browserNavigator =
+    typeof navigator === "undefined" ? undefined : navigator;
+  const browserWindow = typeof window === "undefined" ? undefined : window;
+
+  if (keys.has("platform")) metadata.platform = "web";
+  if (keys.has("userAgent") && browserNavigator?.userAgent)
+    metadata.userAgent = browserNavigator.userAgent;
+  if (keys.has("language") && browserNavigator?.language)
+    metadata.language = browserNavigator.language;
+  if (keys.has("timezone")) {
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (timezone) metadata.timezone = timezone;
+  }
+  if (keys.has("screenWidth") && browserWindow?.screen)
+    metadata.screenWidth = browserWindow.screen.width;
+  if (keys.has("screenHeight") && browserWindow?.screen)
+    metadata.screenHeight = browserWindow.screen.height;
+  if (keys.has("viewportWidth") && browserWindow)
+    metadata.viewportWidth = browserWindow.innerWidth;
+  if (keys.has("viewportHeight") && browserWindow)
+    metadata.viewportHeight = browserWindow.innerHeight;
+  if (keys.has("devicePixelRatio") && browserWindow)
+    metadata.devicePixelRatio = browserWindow.devicePixelRatio;
+
+  return metadata;
+}