convex-feedback-ui 0.1.2 → 0.1.3

package/src/native/screen.tsx

@@ -1,831 +0,0 @@
-import type { EntryKind } from "convex-feedback";
-import { useMemo, useState } from "react";
-import {
-  ActivityIndicator,
-  Alert,
-  Modal,
-  Platform,
-  Pressable,
-  ScrollView,
-  Text,
-  View,
-} from "react-native";
-
-import type {
-  FeedbackScreenBodyProps,
-  FeedbackScreenCommentBranchProps,
-  FeedbackScreenEntryCardProps,
-  FeedbackScreenEntryDetailProps,
-  FeedbackScreenEntryModalProps,
-  FeedbackScreenReplyListProps,
-  FeedbackScreenRootProps,
-} from "../shared/types";
-import { FeedbackProvider, useFeedbackUi } from "./context.js";
-import {
-  Comment,
-  FeedbackBoard,
-  FeedbackEntry,
-  FeedbackForm,
-} from "./primitives.js";
-
-const kinds: readonly EntryKind[] = [
-  "feedback",
-  "feature_request",
-  "bug_report",
-];
-
-const isIos26OrNewer =
-  Platform.OS === "ios" &&
-  Number.parseInt(String(Platform.Version).split(".")[0] ?? "0", 10) >= 26;
-
-export function FeedbackScreen({
-  hooks,
-  messages,
-  theme,
-  unstyled,
-  entrySort = "top",
-  commentSort = "top",
-  enabledKinds = kinds,
-  maxCommentDepth = 5,
-  transformComments,
-  renderActor,
-  ...colors
-}: FeedbackScreenRootProps) {
-  return (
-    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
-      <ScreenBody
-        hooks={hooks}
-        entrySort={entrySort}
-        commentSort={commentSort}
-        enabledKinds={enabledKinds}
-        maxCommentDepth={maxCommentDepth}
-        transformComments={transformComments}
-        renderActor={renderActor}
-        {...colors}
-      />
-    </FeedbackProvider>
-  );
-}
-
-function ScreenBody({
-  hooks,
-  entrySort,
-  commentSort,
-  enabledKinds,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-  ...colors
-}: FeedbackScreenBodyProps) {
-  const { messages, theme } = useFeedbackUi();
-  const [query, setQuery] = useState("");
-  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
-  const [showForm, setShowForm] = useState(false);
-  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
-  const search = hooks.useSearchEntries({
-    searchQuery: query,
-    kinds: enabledKinds,
-  });
-
-  if (selectedEntryId !== null) {
-    return (
-      <FeedbackBoard.Root {...colors}>
-        <EntryDetail
-          hooks={hooks}
-          entryId={selectedEntryId}
-          onBack={() => setSelectedEntryId(null)}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
-        />
-      </FeedbackBoard.Root>
-    );
-  }
-
-  const searching = query.trim().length > 0;
-  const entries = searching ? search : list.results;
-
-  return (
-    <>
-      <FeedbackBoard.Root {...colors}>
-        <FeedbackBoard.Header>
-          <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: "#ffffff", fontWeight: "700" }}>
-              {messages.board.createEntry}
-            </Text>
-          </Pressable>
-        </FeedbackBoard.Header>
-        <FeedbackBoard.Search value={query} onValueChange={setQuery} />
-        <FeedbackBoard.List>
-          {(entries ?? []).map((entry) => (
-            <EntryCard
-              key={entry.id}
-              entry={entry}
-              hooks={hooks}
-              onOpen={() => setSelectedEntryId(entry.id)}
-            />
-          ))}
-        </FeedbackBoard.List>
-        {!searching && list.status === "CanLoadMore" ? (
-          <NativeButton
-            label={messages.board.loadMore}
-            onPress={() => list.loadMore(hooks.pageSizes.entries)}
-          />
-        ) : null}
-      </FeedbackBoard.Root>
-      {showForm ? (
-        <CreateEntryModal
-          hooks={hooks}
-          enabledKinds={enabledKinds}
-          onRequestClose={() => setShowForm(false)}
-          onCreated={(id) => {
-            setShowForm(false);
-            setSelectedEntryId(id);
-          }}
-        />
-      ) : null}
-    </>
-  );
-}
-
-function NativeButton({
-  label,
-  onPress,
-}: {
-  label: string;
-  onPress: () => void;
-}) {
-  const { theme } = useFeedbackUi();
-  return (
-    <Pressable
-      onPress={onPress}
-      style={{
-        alignSelf: "flex-start",
-        paddingVertical: 8,
-        paddingHorizontal: 11,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: theme.colors.border,
-      }}
-    >
-      <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
-        {label}
-      </Text>
-    </Pressable>
-  );
-}
-
-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>
-  );
-}
-
-function CreateEntryModal({
-  hooks,
-  enabledKinds,
-  onRequestClose,
-  onCreated,
-}: FeedbackScreenEntryModalProps & {
-  onRequestClose: () => void;
-}) {
-  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("");
-
-  return (
-    <Modal
-      visible
-      animationType="slide"
-      presentationStyle={isIos ? "formSheet" : "overFullScreen"}
-      transparent={!isIos}
-      allowSwipeDismissal={isIos}
-      onRequestClose={onRequestClose}
-      {...(isIos
-        ? {
-            backdropColor: isIos26OrNewer
-              ? "transparent"
-              : theme.colors.background,
-          }
-        : {})}
-    >
-      <View
-        style={
-          isIos
-            ? {
-                flex: 1,
-                backgroundColor: isIos26OrNewer
-                  ? "transparent"
-                  : theme.colors.background,
-              }
-            : {
-                flex: 1,
-                justifyContent: "flex-end",
-                backgroundColor: "rgba(0, 0, 0, 0.35)",
-              }
-        }
-      >
-        {!isIos ? (
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={messages.form.cancel}
-            onPress={onRequestClose}
-            style={{
-              position: "absolute",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-            }}
-          />
-        ) : null}
-
-        <View
-          style={
-            isIos
-              ? {
-                  flex: 1,
-                  backgroundColor: "transparent",
-                }
-              : {
-                  maxHeight: "92%",
-                  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: 16,
-              paddingVertical: 14,
-              borderBottomWidth: 1,
-              borderBottomColor: theme.colors.border,
-            }}
-          >
-            <Text
-              style={{
-                color: theme.colors.text,
-                fontSize: 18,
-                fontWeight: "700",
-              }}
-            >
-              {messages.board.createEntry}
-            </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
-                hooks={hooks}
-                entryId={previewEntryId}
-                onBack={() => setPreviewEntryId(null)}
-                commentSort="top"
-                maxCommentDepth={5}
-              />
-            ) : (
-              <CreateForm
-                hooks={hooks}
-                enabledKinds={enabledKinds}
-                kind={kind}
-                onKindChange={setKind}
-                title={title}
-                onTitleChange={setTitle}
-                body={body}
-                onBodyChange={setBody}
-                onCreated={onCreated}
-                onOpenSuggestion={setPreviewEntryId}
-              />
-            )}
-          </ScrollView>
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-function CreateForm({
-  hooks,
-  enabledKinds,
-  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 { 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>
-      <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>
-  );
-}
-
-function EntryDetail({
-  hooks,
-  entryId,
-  onBack,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenEntryDetailProps) {
-  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)
-    return <NativeButton label={messages.entry.back} onPress={onBack} />;
-
-  return (
-    <View style={{ gap: 12 }}>
-      <NativeButton 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}
-            hooks={hooks}
-            commentSort={commentSort}
-            maxCommentDepth={maxCommentDepth}
-            transformComments={transformComments}
-            renderActor={renderActor}
-          />
-        ))}
-      </View>
-      {comments.status === "CanLoadMore" ? (
-        <NativeButton
-          label={messages.comments.loadMore}
-          onPress={() => comments.loadMore(hooks.pageSizes.comments)}
-        />
-      ) : null}
-    </View>
-  );
-}
-
-function CommentBranch({
-  comment,
-  entryId,
-  hooks,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenCommentBranchProps) {
-  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>
-          <NativeButton
-            label={messages.comments.cancelReply}
-            onPress={() => setReplying(false)}
-          />
-        </FeedbackForm.Root>
-      ) : null}
-      {expanded ? (
-        <ReplyList
-          hooks={hooks}
-          entryId={entryId}
-          parentCommentId={comment.id}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
-        />
-      ) : null}
-      {comment.deletedAt !== undefined ? (
-        <Text style={{ color: theme.colors.mutedText, fontSize: 11 }}>
-          {messages.comments.deleted}
-        </Text>
-      ) : null}
-    </Comment.Root>
-  );
-}
-
-function ReplyList({
-  hooks,
-  entryId,
-  parentCommentId,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenReplyListProps) {
-  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}
-          hooks={hooks}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
-        />
-      ))}
-      {replies.status === "CanLoadMore" ? (
-        <NativeButton
-          label={messages.comments.loadMore}
-          onPress={() => replies.loadMore(hooks.pageSizes.replies)}
-        />
-      ) : null}
-    </Comment.Children>
-  );
-}