convex-feedback-ui 0.1.2 → 0.1.3

package/src/react/screen.tsx

@@ -1,19 +1,25 @@
 "use client";
 
-import type { CommentSort, EntryKind, EntrySort } from "convex-feedback";
-import type { FeedbackHooks } from "convex-feedback/react";
+import type { EntryKind } from "convex-feedback";
 import { useMemo, useState, type SyntheticEvent } from "react";
 
+import {
+  FeedbackBodyProvider,
+  useFeedbackBody,
+} from "../shared/context/FeedbackBodyProvider.js";
+import {
+  FeedbackProvider,
+  useFeedbackUi,
+} from "../shared/context/FeedbackProvider";
 import type {
-  FeedbackColorProps,
   FeedbackScreenCommentBranchProps,
+  FeedbackScreenContentProps,
   FeedbackScreenEntryCardProps,
   FeedbackScreenEntryDetailProps,
   FeedbackScreenEntryModalProps,
   FeedbackScreenReplyListProps,
   FeedbackScreenRootProps,
 } from "../shared/types/";
-import { FeedbackProvider, useFeedbackUi } from "./context.js";
 import {
   Comment,
   FeedbackBoard,
@@ -27,8 +33,7 @@ const entryKinds: readonly EntryKind[] = [
   "bug_report",
 ];
 
-export interface FeedbackScreenProps
-  extends FeedbackColorProps, FeedbackScreenRootProps {
+export interface FeedbackScreenProps extends FeedbackScreenRootProps {
   className?: string | undefined;
 }
 
@@ -43,55 +48,52 @@ export function FeedbackScreen({
   maxCommentDepth = 5,
   transformComments,
   renderActor,
-  className,
-  ...colors
+  debounceDuration = 300,
+  ...props
 }: FeedbackScreenProps) {
   return (
     <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
-      <FeedbackScreenInner
+      <FeedbackBodyProvider
         hooks={hooks}
         entrySort={entrySort}
         commentSort={commentSort}
         enabledKinds={enabledKinds}
         maxCommentDepth={maxCommentDepth}
+        debounceDuration={debounceDuration}
         transformComments={transformComments}
         renderActor={renderActor}
-        className={className}
-        {...colors}
-      />
+      >
+        <FeedbackScreenInner {...props} />
+      </FeedbackBodyProvider>
     </FeedbackProvider>
   );
 }
 
-interface FeedbackScreenInnerProps extends FeedbackColorProps {
-  hooks: FeedbackHooks;
-  entrySort: EntrySort;
-  commentSort: CommentSort;
-  enabledKinds: readonly EntryKind[];
-  maxCommentDepth: number;
-  transformComments?: FeedbackScreenProps["transformComments"];
-  renderActor?: FeedbackScreenProps["renderActor"];
+interface FeedbackScreenInnerProps extends FeedbackScreenContentProps {
   className?: string | undefined;
 }
 
 function FeedbackScreenInner({
-  hooks,
-  entrySort,
-  commentSort,
-  enabledKinds,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
   className,
   ...colors
 }: FeedbackScreenInnerProps) {
+  const {
+    hooks,
+    entrySort,
+    enabledKinds,
+    showForm,
+    setShowForm,
+    setSelectedEntryId,
+    selectedEntryId,
+    query,
+    setQuery,
+    debouncedQuery,
+  } = useFeedbackBody();
   const { messages } = useFeedbackUi();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [showForm, setShowForm] = useState(false);
-  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
+
   const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
   const searchResults = hooks.useSearchEntries({
-    searchQuery,
+    searchQuery: debouncedQuery,
     kinds: enabledKinds,
   });
 
@@ -99,19 +101,14 @@ function FeedbackScreenInner({
     return (
       <FeedbackBoard.Root className={className} {...colors}>
         <EntryDetail
-          hooks={hooks}
           entryId={selectedEntryId}
           onBack={() => setSelectedEntryId(null)}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
         />
       </FeedbackBoard.Root>
     );
   }
 
-  const searching = searchQuery.trim().length > 0;
+  const searching = query.trim().length > 0;
   const entries = searching ? searchResults : list.results;
   const loading = searching
     ? searchResults === undefined
@@ -133,30 +130,25 @@ function FeedbackScreenInner({
         </button>
       </FeedbackBoard.Header>
 
-      {showForm ? (
+      {showForm && (
         <CreateEntryForm
-          hooks={hooks}
-          enabledKinds={enabledKinds}
           onCreated={(entryId) => {
             setShowForm(false);
             setSelectedEntryId(entryId);
           }}
         />
-      ) : null}
+      )}
 
-      <FeedbackBoard.Search
-        value={searchQuery}
-        onValueChange={setSearchQuery}
-      />
+      <FeedbackBoard.Search value={query} onValueChange={setQuery} />
 
-      {loading ? <p className="cf-state">{messages.board.loading}</p> : null}
-      {!loading && entries !== undefined && entries.length === 0 ? (
+      {loading && <p className="cf-state">{messages.board.loading}</p>}
+      {!loading && entries !== undefined && entries.length === 0 && (
         <p className="cf-state">
           {searching
             ? messages.board.noSearchResults
             : messages.board.noEntries}
         </p>
-      ) : null}
+      )}
 
       <FeedbackBoard.List>
         {(entries ?? []).map((entry) => (
@@ -169,7 +161,7 @@ function FeedbackScreenInner({
         ))}
       </FeedbackBoard.List>
 
-      {!searching && list.status === "CanLoadMore" ? (
+      {!searching && list.status === "CanLoadMore" && (
         <button
           type="button"
           className="cf-button"
@@ -177,7 +169,7 @@ function FeedbackScreenInner({
         >
           {messages.board.loadMore}
         </button>
-      ) : null}
+      )}
     </FeedbackBoard.Root>
   );
 }
@@ -214,11 +206,8 @@ function EntryCard({ entry, hooks, onOpen }: FeedbackScreenEntryCardProps) {
   );
 }
 
-function CreateEntryForm({
-  hooks,
-  enabledKinds,
-  onCreated,
-}: FeedbackScreenEntryModalProps) {
+function CreateEntryForm({ onCreated }: FeedbackScreenEntryModalProps) {
+  const { hooks, enabledKinds } = useFeedbackBody();
   const { messages } = useFeedbackUi();
   const [kind, setKind] = useState<EntryKind>(enabledKinds[0] ?? "feedback");
   const [title, setTitle] = useState("");
@@ -385,15 +374,8 @@ function CreateEntryForm({
   );
 }
 
-function EntryDetail({
-  hooks,
-  entryId,
-  onBack,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenEntryDetailProps) {
+function EntryDetail({ entryId, onBack }: FeedbackScreenEntryDetailProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
   const { messages } = useFeedbackUi();
   const entry = hooks.useEntry(entryId);
   const setUpvote = hooks.useSetEntryUpvote();
@@ -461,28 +443,23 @@ function EntryDetail({
           </button>
         </FeedbackForm.Root>
 
-        {comments.status === "LoadingFirstPage" ? (
+        {comments.status === "LoadingFirstPage" && (
           <p className="cf-state">{messages.board.loading}</p>
-        ) : null}
+        )}
         {comments.status !== "LoadingFirstPage" &&
-        visibleComments.length === 0 ? (
-          <p className="cf-state">{messages.comments.noComments}</p>
-        ) : null}
+          visibleComments.length === 0 && (
+            <p className="cf-state">{messages.comments.noComments}</p>
+          )}
         <div className="cf-comments">
           {visibleComments.map((comment) => (
             <CommentBranch
               key={comment.id}
               comment={comment}
               entryId={entryId}
-              hooks={hooks}
-              commentSort={commentSort}
-              maxCommentDepth={maxCommentDepth}
-              transformComments={transformComments}
-              renderActor={renderActor}
             />
           ))}
         </div>
-        {comments.status === "CanLoadMore" ? (
+        {comments.status === "CanLoadMore" && (
           <button
             type="button"
             className="cf-button"
@@ -490,21 +467,14 @@ function EntryDetail({
           >
             {messages.comments.loadMore}
           </button>
-        ) : null}
+        )}
       </section>
     </div>
   );
 }
 
-function CommentBranch({
-  comment,
-  entryId,
-  hooks,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenCommentBranchProps) {
+function CommentBranch({ comment, entryId }: FeedbackScreenCommentBranchProps) {
+  const { hooks, maxCommentDepth, renderActor } = useFeedbackBody();
   const { messages } = useFeedbackUi();
   const [expanded, setExpanded] = useState(false);
   const [replying, setReplying] = useState(false);
@@ -524,15 +494,15 @@ function CommentBranch({
             void setLike({ commentId: comment.id, desiredState: active })
           }
         />
-        {comment.body !== null && comment.depth < maxCommentDepth ? (
+        {comment.body !== null && comment.depth < maxCommentDepth && (
           <Comment.Reply onActivate={() => setReplying((value) => !value)} />
-        ) : null}
+        )}
         <Comment.RepliesButton
           expanded={expanded}
           onExpandedChange={setExpanded}
         />
       </div>
-      {replying ? (
+      {replying && (
         <FeedbackForm.Root
           onSubmit={async (event) => {
             event.preventDefault();
@@ -566,31 +536,14 @@ function CommentBranch({
             </button>
           </div>
         </FeedbackForm.Root>
-      ) : null}
-      {expanded ? (
-        <ReplyList
-          hooks={hooks}
-          entryId={entryId}
-          parentCommentId={comment.id}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
-        />
-      ) : null}
+      )}
+      {expanded && <ReplyList entryId={entryId} parentCommentId={comment.id} />}
     </Comment.Root>
   );
 }
 
-function ReplyList({
-  hooks,
-  entryId,
-  parentCommentId,
-  commentSort,
-  maxCommentDepth,
-  transformComments,
-  renderActor,
-}: FeedbackScreenReplyListProps) {
+function ReplyList({ entryId, parentCommentId }: FeedbackScreenReplyListProps) {
+  const { hooks, commentSort, transformComments } = useFeedbackBody();
   const { messages } = useFeedbackUi();
   const replies = hooks.useComments({
     entryId,
@@ -604,22 +557,13 @@ function ReplyList({
 
   return (
     <Comment.Children>
-      {replies.status === "LoadingFirstPage" ? (
+      {replies.status === "LoadingFirstPage" && (
         <p className="cf-state">{messages.board.loading}</p>
-      ) : null}
+      )}
       {visibleReplies.map((reply) => (
-        <CommentBranch
-          key={reply.id}
-          comment={reply}
-          entryId={entryId}
-          hooks={hooks}
-          commentSort={commentSort}
-          maxCommentDepth={maxCommentDepth}
-          transformComments={transformComments}
-          renderActor={renderActor}
-        />
+        <CommentBranch key={reply.id} comment={reply} entryId={entryId} />
       ))}
-      {replies.status === "CanLoadMore" ? (
+      {replies.status === "CanLoadMore" && (
         <button
           type="button"
           className="cf-button"
@@ -627,7 +571,7 @@ function ReplyList({
         >
           {messages.comments.loadMore}
         </button>
-      ) : null}
+      )}
     </Comment.Children>
   );
 }

package/src/shared/context/FeedbackBodyProvider.tsx

@@ -0,0 +1,82 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { debounce } from "../helpers";
+import type {
+  FeedbackScreenBodyContextValue,
+  FeedbackScreenProviderProps,
+} from "../types";
+
+const FeedbackBodyContext =
+  createContext<FeedbackScreenBodyContextValue | null>(null);
+
+export function FeedbackBodyProvider({
+  hooks,
+  entrySort,
+  commentSort,
+  enabledKinds,
+  maxCommentDepth,
+  debounceDuration,
+  children,
+}: PropsWithChildren<FeedbackScreenProviderProps>) {
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+
+  const updateDebouncedQuery = useMemo(
+    () => debounce(setDebouncedQuery, debounceDuration),
+    [],
+  );
+
+  useEffect(() => {
+    updateDebouncedQuery(query);
+
+    return updateDebouncedQuery.cancel;
+  }, [query, updateDebouncedQuery]);
+
+  const value = {
+    query,
+    debouncedQuery,
+    showForm,
+    isSearching,
+    selectedEntryId,
+
+    setQuery,
+    setDebouncedQuery,
+    setShowForm,
+    setIsSearching,
+    setSelectedEntryId,
+
+    hooks,
+    entrySort,
+    commentSort,
+    enabledKinds,
+    maxCommentDepth,
+    debounceDuration,
+  } satisfies FeedbackScreenBodyContextValue;
+
+  return (
+    <FeedbackBodyContext.Provider value={value}>
+      {children}
+    </FeedbackBodyContext.Provider>
+  );
+}
+
+export function useFeedbackBody(): FeedbackScreenBodyContextValue {
+  const context = useContext(FeedbackBodyContext);
+
+  if (!context) {
+    throw new Error(
+      "useOnboardingFlow must be used inside OnboardingFlowProvider",
+    );
+  }
+
+  return context;
+}

package/src/{native/context.tsx → shared/context/FeedbackProvider.tsx}

@@ -1,13 +1,13 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 
-import { mergeFeedbackMessages } from "../shared/messages.js";
+import { mergeFeedbackMessages } from "../../shared/messages.js";
 
-import { mergeFeedbackTheme } from "../shared/theme.js";
+import { mergeFeedbackTheme } from "../../shared/theme.js";
 import type {
   FeedbackProviderProps,
   FeedbackTheme,
   FeedbackUiContextValue,
-} from "../shared/types";
+} from "../../shared/types/index.js";
 
 const FeedbackNativeContext = createContext<FeedbackUiContextValue | null>(
   null,

package/src/shared/helpers.ts

@@ -0,0 +1,33 @@
+import type { EntryKind } from "convex-feedback";
+
+export const kinds: readonly EntryKind[] = [
+  "feedback",
+  "feature_request",
+  "bug_report",
+];
+
+export function debounce<TArgs extends unknown[]>(
+  callback: (...args: TArgs) => void,
+  delay: number,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+
+  const debounced = (...args: TArgs) => {
+    if (timeout !== undefined) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+
+  debounced.cancel = () => {
+    if (timeout !== undefined) {
+      clearTimeout(timeout);
+      timeout = undefined;
+    }
+  };
+
+  return debounced;
+}

package/src/shared/messages.ts

@@ -16,6 +16,16 @@ export const englishFeedbackMessages: FeedbackMessages = {
     feature_request: "Feature request",
     bug_report: "Bug report",
   },
+  kindsPlural: {
+    feedback: "Feedback",
+    feature_request: "Feature requests",
+    bug_report: "Bug reports",
+  },
+  newFeedback: {
+    feedback: "New feedback",
+    feature_request: "New feature request",
+    bug_report: "New bug report",
+  },
   statuses: {
     open: "Open",
     under_review: "Under review",
@@ -29,7 +39,7 @@ export const englishFeedbackMessages: FeedbackMessages = {
     removeUpvote: "Remove upvote",
     comments: (count) => `${count} ${count === 1 ? "comment" : "comments"}`,
     open: "Open",
-    back: "Back to feedback",
+    back: "Go back",
   },
   form: {
     kind: "Type",
@@ -68,29 +78,20 @@ export function mergeFeedbackMessages(
   return {
     board: { ...englishFeedbackMessages.board, ...overrides.board },
     kinds: {
-      feedback:
-        overrides.kinds?.feedback ?? englishFeedbackMessages.kinds.feedback,
-      feature_request:
-        overrides.kinds?.feature_request ??
-        englishFeedbackMessages.kinds.feature_request,
-      bug_report:
-        overrides.kinds?.bug_report ?? englishFeedbackMessages.kinds.bug_report,
+      ...englishFeedbackMessages.kinds,
+      ...overrides.kinds,
+    },
+    kindsPlural: {
+      ...englishFeedbackMessages.kindsPlural,
+      ...overrides.kindsPlural,
+    },
+    newFeedback: {
+      ...englishFeedbackMessages.newFeedback,
+      ...overrides.newFeedback,
     },
     statuses: {
-      open: overrides.statuses?.open ?? englishFeedbackMessages.statuses.open,
-      under_review:
-        overrides.statuses?.under_review ??
-        englishFeedbackMessages.statuses.under_review,
-      planned:
-        overrides.statuses?.planned ?? englishFeedbackMessages.statuses.planned,
-      in_progress:
-        overrides.statuses?.in_progress ??
-        englishFeedbackMessages.statuses.in_progress,
-      completed:
-        overrides.statuses?.completed ??
-        englishFeedbackMessages.statuses.completed,
-      closed:
-        overrides.statuses?.closed ?? englishFeedbackMessages.statuses.closed,
+      ...englishFeedbackMessages.statuses,
+      ...overrides.statuses,
     },
     entry: { ...englishFeedbackMessages.entry, ...overrides.entry },
     form: { ...englishFeedbackMessages.form, ...overrides.form },

package/src/shared/theme.ts

@@ -3,6 +3,7 @@ import type { FeedbackTheme, FeedbackThemeOverride } from "./types";
 export const defaultFeedbackTheme: FeedbackTheme = {
   colors: {
     primary: "#5b5bd6",
+    primaryForeground: "#ffffff",
     background: "#ffffff",
     surface: "#ffffff",
     surfaceMuted: "#f6f6f8",

package/src/shared/types/context.ts

@@ -61,6 +61,11 @@ export interface FeedbackColorProps {
   /** Primary interaction and accent color. */
   primaryColor?: string;
 
+  /**
+   * Foreground color for primary interactions and accents.
+   */
+  primaryForeground?: string;
+
   /** Main background color. */
   backgroundColor?: string;
 

package/src/shared/types/messages.ts

@@ -18,7 +18,10 @@ export interface FeedbackMessages {
     /** Search input placeholder. */
     searchPlaceholder: string;
 
-    /** CTA for opening the create-entry flow. */
+    /** CTA for opening the create-entry flow.
+     * This is shown when enabled kinds are two or more.
+     * Use messages.newFeedback for a single-kind entry.
+     */
     createEntry: string;
 
     /** Empty-state copy when no entries exist. */
@@ -37,6 +40,12 @@ export interface FeedbackMessages {
   /** Localized display labels for each fixed entry kind. */
   kinds: Record<EntryKind, string>;
 
+  /** Localized plural display labels for each fixed entry kind. */
+  kindsPlural: Record<EntryKind, string>;
+
+  /** Localized display labels for creating a new entry. */
+  newFeedback: Record<EntryKind, string>;
+
   /** Localized display labels for each fixed workflow status. */
   statuses: Record<EntryStatus, string>;
 
@@ -146,6 +155,12 @@ export interface FeedbackMessageOverrides {
   /** Entry-kind label overrides. */
   kinds?: Partial<FeedbackMessages["kinds"]> | undefined;
 
+  /** Entry-kind plural label overrides. */
+  kindsPlural?: Partial<FeedbackMessages["kindsPlural"]> | undefined;
+
+  /** Create single entry copy overrides. */
+  newFeedback?: Partial<FeedbackMessages["newFeedback"]> | undefined;
+
   /** Workflow-status label overrides. */
   statuses?: Partial<FeedbackMessages["statuses"]> | undefined;