convex-feedback-ui 0.1.2 → 0.1.3

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

@@ -0,0 +1,88 @@
+import { 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";
+
+export function CommentBranch({
+  comment,
+  entryId,
+}: FeedbackScreenCommentBranchProps) {
+  const { hooks, maxCommentDepth, renderActor } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const [expanded, setExpanded] = useState(false);
+  const [replying, setReplying] = useState(false);
+  const [replyBody, setReplyBody] = useState("");
+  const setLike = hooks.useSetCommentLike();
+  const createComment = hooks.useCreateComment();
+
+  return (
+    <Comment.Root comment={comment}>
+      {renderActor === undefined ? null : (
+        <View>{renderActor(comment.actorId)}</View>
+      )}
+      <Comment.Body />
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
+        <Comment.Like
+          onToggle={(active) =>
+            void setLike({ commentId: comment.id, desiredState: active })
+          }
+        />
+        {comment.body !== null && comment.depth < maxCommentDepth ? (
+          <Comment.Reply onActivate={() => setReplying((value) => !value)} />
+        ) : null}
+        <Comment.RepliesButton
+          expanded={expanded}
+          onExpandedChange={setExpanded}
+        />
+      </View>
+      {replying ? (
+        <FeedbackForm.Root>
+          <FeedbackForm.Textarea
+            value={replyBody}
+            onChangeText={setReplyBody}
+            placeholder={messages.comments.placeholder}
+          />
+          <FeedbackForm.Submit
+            onPress={async () => {
+              if (replyBody.trim().length === 0) return;
+              await createComment({
+                entryId,
+                parentCommentId: comment.id,
+                body: replyBody,
+              });
+              setReplyBody("");
+              setReplying(false);
+              setExpanded(true);
+            }}
+          >
+            {messages.comments.reply}
+          </FeedbackForm.Submit>
+          <Button
+            label={messages.comments.cancelReply}
+            onPress={() => setReplying(false)}
+          />
+        </FeedbackForm.Root>
+      ) : null}
+      {expanded ? (
+        <ReplyList entryId={entryId} parentCommentId={comment.id} />
+      ) : null}
+      {comment.deletedAt !== undefined ? (
+        <Text style={{ color: theme.colors.mutedText, fontSize: 11 }}>
+          {messages.comments.deleted}
+        </Text>
+      ) : null}
+    </Comment.Root>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { Pressable, View } from "react-native";
+
+import type { FeedbackScreenEntryCardProps } from "../../../shared/types";
+import { FeedbackEntry } from "./primitives";
+
+export function EntryCard({
+  entry,
+  hooks,
+  onOpen,
+}: FeedbackScreenEntryCardProps) {
+  const setUpvote = hooks.useSetEntryUpvote();
+  return (
+    <FeedbackEntry.Root entry={entry}>
+      <FeedbackEntry.Upvote
+        onToggle={(active) =>
+          void setUpvote({ entryId: entry.id, desiredState: active })
+        }
+      />
+      <Pressable onPress={onOpen} style={{ flex: 1, gap: 4 }}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+          }}
+        >
+          <FeedbackEntry.Kind />
+          <FeedbackEntry.Status />
+        </View>
+        <FeedbackEntry.Title />
+        <FeedbackEntry.Body numberOfLines={3} />
+        <FeedbackEntry.CommentCount />
+      </Pressable>
+    </FeedbackEntry.Root>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { useMemo, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import type { FeedbackScreenEntryDetailProps } from "../../../shared/types";
+import { Button } from "./Button";
+import { CommentBranch } from "./CommentBranch";
+import { FeedbackEntry, FeedbackForm } from "./primitives";
+
+export function EntryDetail({
+  entryId,
+  onBack,
+  hideBackButton,
+}: FeedbackScreenEntryDetailProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
+
+  const { messages, theme } = useFeedbackUi();
+  const entry = hooks.useEntry(entryId);
+  const comments = hooks.useComments({ entryId, sort: commentSort });
+  const setUpvote = hooks.useSetEntryUpvote();
+  const createComment = hooks.useCreateComment();
+  const [body, setBody] = useState("");
+  const visible = useMemo(
+    () => transformComments?.(comments.results) ?? comments.results,
+    [comments.results, transformComments],
+  );
+
+  if (entry === undefined)
+    return (
+      <View
+        style={{
+          flex: 1,
+          gap: 8,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <ActivityIndicator size="large" />
+        <Text style={{ color: theme.colors.mutedText }}>
+          {messages.board.loading}
+        </Text>
+      </View>
+    );
+
+  if (entry === null) {
+    if (hideBackButton) return;
+    return <Button label={messages.entry.back} onPress={onBack} />;
+  }
+
+  return (
+    <View style={{ gap: 12 }}>
+      {!hideBackButton && (
+        <Button label={messages.entry.back} onPress={onBack} />
+      )}
+      <FeedbackEntry.Root entry={entry}>
+        <FeedbackEntry.Upvote
+          onToggle={(active) =>
+            void setUpvote({ entryId, desiredState: active })
+          }
+        />
+        <FeedbackEntry.Content style={{ gap: 5 }}>
+          <FeedbackEntry.Status />
+          <FeedbackEntry.Title />
+          <FeedbackEntry.Body />
+          <FeedbackEntry.CommentCount />
+        </FeedbackEntry.Content>
+      </FeedbackEntry.Root>
+      <Text
+        style={{ color: theme.colors.text, fontSize: 18, fontWeight: "700" }}
+      >
+        {messages.comments.title}
+      </Text>
+      <FeedbackForm.Root>
+        <FeedbackForm.Textarea
+          value={body}
+          onChangeText={setBody}
+          placeholder={messages.comments.placeholder}
+        />
+        <FeedbackForm.Submit
+          onPress={async () => {
+            if (body.trim().length === 0) return;
+            await createComment({ entryId, body });
+            setBody("");
+          }}
+        >
+          {messages.comments.submit}
+        </FeedbackForm.Submit>
+      </FeedbackForm.Root>
+      <View style={{ gap: 8 }}>
+        {visible.map((comment) => (
+          <CommentBranch key={comment.id} comment={comment} entryId={entryId} />
+        ))}
+      </View>
+      {comments.status === "CanLoadMore" && (
+        <Button
+          label={messages.comments.loadMore}
+          onPress={() => comments.loadMore(hooks.pageSizes.comments)}
+        />
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { Pressable, Text } from "react-native";
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import { FeedbackBoard } from "./primitives";
+
+export function FeedbackScreenHeader() {
+  const { query, setShowForm, setQuery, enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+
+  const pageTitle =
+    enabledKinds.length === 1
+      ? messages.kindsPlural[enabledKinds.at(0)!]
+      : 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,
+          }}
+        >
+          <Text style={{ color: theme.colors.text, fontWeight: "700" }}>
+            {messages.board.createEntry}
+          </Text>
+        </Pressable>
+      </FeedbackBoard.Header>
+      <FeedbackBoard.Search value={query} onValueChange={(q) => setQuery(q)} />
+    </>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import type { FeedbackScreenListProps } from "../../../shared/types/index.js";
+import { Button } from "./Button.js";
+import { EntryCard } from "./EntryCard.js";
+import { EntryDetail } from "./EntryDetail.js";
+import { FeedbackBoard } from "./primitives.js";
+
+export function FeedbackScreenList({
+  hideBackButton = false,
+  onEntryOpen,
+}: FeedbackScreenListProps) {
+  const {
+    hooks,
+    entrySort,
+    isSearching,
+    enabledKinds,
+    selectedEntryId,
+    debouncedQuery,
+    setSelectedEntryId,
+  } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+
+  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
+  const search = hooks.useSearchEntries({
+    searchQuery: debouncedQuery,
+    kinds: enabledKinds,
+  });
+
+  const entries = isSearching ? search : list.results;
+
+  return (
+    <>
+      <FeedbackBoard.List style={{ paddingHorizontal: theme.spacing }}>
+        {selectedEntryId ? (
+          <EntryDetail
+            entryId={selectedEntryId}
+            hideBackButton={hideBackButton}
+            onBack={() => setSelectedEntryId(null)}
+          />
+        ) : (
+          (entries ?? []).map((entry) => (
+            <EntryCard
+              key={entry.id}
+              entry={entry}
+              hooks={hooks}
+              onOpen={() => onEntryOpen(entry.id)}
+            />
+          ))
+        )}
+      </FeedbackBoard.List>
+
+      {!isSearching && list.status === "CanLoadMore" && (
+        <Button
+          label={messages.board.loadMore}
+          onPress={() => list.loadMore(hooks.pageSizes.entries)}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,375 @@
+import type { EntryKind } from "convex-feedback";
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from "react-native";
+
+import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
+import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
+import { useFeedbackBody } from "../../native";
+import { EntryDetail } from "./EntryDetail";
+import { FeedbackForm } from "./primitives";
+
+export function CreateEntryModal({
+  onRequestClose,
+  onCreated,
+}: FeedbackScreenEntryModalProps & {
+  onRequestClose: () => void;
+}) {
+  const { enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const isIos = Platform.OS === "ios";
+
+  const [previewEntryId, setPreviewEntryId] = useState<string | null>(null);
+
+  const [kind, setKind] = useState<EntryKind>(enabledKinds[0] ?? "feedback");
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const modalTile =
+    enabledKinds.length === 1
+      ? messages.newFeedback[enabledKinds.at(0)!]
+      : messages.board.createEntry;
+
+  return (
+    <Modal
+      visible
+      animationType="slide"
+      presentationStyle={"pageSheet"}
+      allowSwipeDismissal={isIos}
+      onRequestClose={onRequestClose}
+      role="dialog"
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "flex-end",
+          backgroundColor: isIos ? theme.colors.background : "transparent",
+        }}
+      >
+        {isIos && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={messages.form.cancel}
+            onPress={onRequestClose}
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+            }}
+          />
+        )}
+
+        <View
+          style={{
+            flex: 1,
+            minHeight: 360,
+            overflow: "hidden",
+            borderTopLeftRadius: theme.radius * 2,
+            borderTopRightRadius: theme.radius * 2,
+            backgroundColor: theme.colors.background,
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: 20,
+              paddingVertical: 18,
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border,
+            }}
+          >
+            <Text
+              style={{
+                color: theme.colors.text,
+                fontSize: 18,
+                fontWeight: "700",
+              }}
+            >
+              {modalTile}
+            </Text>
+
+            <Pressable
+              accessibilityRole="button"
+              onPress={onRequestClose}
+              hitSlop={8}
+            >
+              <Text
+                style={{
+                  color: theme.colors.primary,
+                  fontWeight: "600",
+                }}
+              >
+                {messages.form.cancel}
+              </Text>
+            </Pressable>
+          </View>
+
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            keyboardDismissMode={isIos ? "interactive" : "on-drag"}
+            contentInsetAdjustmentBehavior="automatic"
+            contentContainerStyle={{
+              padding: 16,
+              paddingBottom: 32,
+            }}
+          >
+            {previewEntryId !== null ? (
+              <EntryDetail
+                entryId={previewEntryId}
+                onBack={() => setPreviewEntryId(null)}
+              />
+            ) : (
+              <CreateForm
+                kind={kind}
+                onKindChange={setKind}
+                title={title}
+                onTitleChange={setTitle}
+                body={body}
+                onBodyChange={setBody}
+                onCreated={onCreated}
+                onOpenSuggestion={setPreviewEntryId}
+              />
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function CreateForm({
+  kind,
+  onKindChange,
+  title,
+  onTitleChange,
+  body,
+  onBodyChange,
+  onCreated,
+  onOpenSuggestion,
+}: FeedbackScreenEntryModalProps & {
+  kind: EntryKind;
+  onKindChange: (kind: EntryKind) => void;
+  title: string;
+  onTitleChange: (title: string) => void;
+  body: string;
+  onBodyChange: (body: string) => void;
+  onOpenSuggestion: (id: string) => void;
+}) {
+  const { hooks, enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const [submitting, setSubmitting] = useState(false);
+  const create = hooks.useCreateEntry();
+  const similar = hooks.useSimilarEntries({ title, body, kind, limit: 3 });
+
+  const suggestions = useMemo(() => {
+    if (similar === undefined) return [];
+    return [...similar.exact, ...similar.similar];
+  }, [similar]);
+
+  const submit = async () => {
+    if (submitting || title.trim().length === 0 || body.trim().length === 0) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      onCreated(await create({ kind, title, body }));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const requestSubmit = () => {
+    if (
+      submitting ||
+      similar === undefined ||
+      title.trim().length === 0 ||
+      body.trim().length === 0
+    ) {
+      return;
+    }
+
+    if (suggestions.length === 0) {
+      void submit();
+      return;
+    }
+
+    Alert.alert(
+      similar.exact.length > 0
+        ? messages.form.exactDuplicate
+        : messages.form.possibleDuplicates,
+      messages.form.duplicateWarning,
+      [
+        {
+          text: messages.form.cancel,
+          style: "cancel",
+        },
+        {
+          text: messages.form.submitAnyway,
+          onPress: () => {
+            void submit();
+          },
+        },
+      ],
+    );
+  };
+
+  return (
+    <FeedbackForm.Root>
+      {enabledKinds.length > 1 && (
+        <>
+          <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
+            {messages.form.kind}
+          </Text>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 7 }}>
+            {enabledKinds.map((value) => (
+              <Pressable
+                key={value}
+                onPress={() => onKindChange(value)}
+                style={{
+                  paddingVertical: 6,
+                  paddingHorizontal: 9,
+                  borderRadius: 999,
+                  borderWidth: 1,
+                  borderColor:
+                    value === kind ? theme.colors.primary : theme.colors.border,
+                }}
+              >
+                <Text
+                  style={{
+                    color:
+                      value === kind
+                        ? theme.colors.primary
+                        : theme.colors.mutedText,
+                  }}
+                >
+                  {messages.kinds[value]}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </>
+      )}
+      <FeedbackForm.Input
+        value={title}
+        onChangeText={onTitleChange}
+        placeholder={messages.form.titlePlaceholder}
+      />
+      <FeedbackForm.Textarea
+        value={body}
+        onChangeText={onBodyChange}
+        placeholder={messages.form.bodyPlaceholder}
+      />
+      {suggestions.length > 0 ? (
+        <View
+          style={{
+            gap: 8,
+            padding: 10,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radius,
+            backgroundColor: theme.colors.surfaceMuted,
+          }}
+        >
+          <Text
+            style={{
+              color: theme.colors.text,
+              fontWeight: "600",
+            }}
+          >
+            {similar?.exact.length
+              ? messages.form.exactDuplicate
+              : messages.form.possibleDuplicates}
+          </Text>
+
+          {suggestions.map((entry) => (
+            <Pressable
+              key={entry.id}
+              onPress={() => onOpenSuggestion(entry.id)}
+              style={{
+                gap: 4,
+                padding: 10,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: Math.max(8, theme.radius - 2),
+                backgroundColor: theme.colors.surface,
+              }}
+            >
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 8,
+                }}
+              >
+                <Text
+                  style={{
+                    flexShrink: 1,
+                    color: theme.colors.mutedText,
+                    fontSize: 12,
+                    fontWeight: "600",
+                  }}
+                >
+                  {messages.kinds[entry.kind]}
+                </Text>
+
+                <Text
+                  style={{
+                    color: theme.colors.mutedText,
+                    fontSize: 12,
+                  }}
+                >
+                  {messages.statuses[entry.status]}
+                </Text>
+              </View>
+
+              <Text
+                numberOfLines={2}
+                style={{
+                  color: theme.colors.text,
+                  fontWeight: "700",
+                }}
+              >
+                {entry.title}
+              </Text>
+
+              <Text
+                numberOfLines={2}
+                style={{
+                  color: theme.colors.mutedText,
+                  lineHeight: 18,
+                }}
+              >
+                {entry.body}
+              </Text>
+
+              <Text
+                style={{
+                  color: theme.colors.mutedText,
+                  fontSize: 12,
+                }}
+              >
+                ▲ {entry.upvoteCount} ·{" "}
+                {messages.entry.comments(entry.commentCount)}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+      <FeedbackForm.Submit submitting={submitting} onPress={requestSubmit} />
+    </FeedbackForm.Root>
+  );
+}