convex-feedback-ui 0.1.5 → 0.1.7

package/src/native/expo/routes.ts

@@ -0,0 +1,41 @@
+import type { Href } from "expo-router";
+import type { FeedbackRouteNames } from "./types.js";
+
+export const defaultFeedbackRoutes: FeedbackRouteNames = {
+  board: "index",
+  entry: "[entryId]",
+  create: "new",
+};
+
+export function resolveFeedbackRoutes(
+  routes: Partial<FeedbackRouteNames> = {},
+): FeedbackRouteNames {
+  const resolved = { ...defaultFeedbackRoutes, ...routes };
+
+  if (!resolved.entry.includes("[entryId]")) {
+    throw new Error(
+      'The routed feedback entry route must contain the "[entryId]" dynamic segment.',
+    );
+  }
+
+  return resolved;
+}
+
+export function createFeedbackStackSettings(
+  routes?: Partial<FeedbackRouteNames>,
+) {
+  return { anchor: resolveFeedbackRoutes(routes).board };
+}
+
+export const feedbackStackSettings = createFeedbackStackSettings();
+
+/** Anchor the create form beneath suggested-entry detail screens. */
+export const feedbackCreateStackSettings = { anchor: "index" };
+
+export function feedbackRouteHref(
+  route: string,
+  params?: Record<string, string>,
+): Href {
+  const pathname = route.startsWith(".") ? route : `./${route}`;
+  return params === undefined ? pathname : { pathname, params };
+}

package/src/native/expo/types.ts

@@ -1,14 +1,21 @@
 import type { StackScreenProps } from "expo-router";
+import type { ImageSourcePropType } from "react-native";
 import type { SearchBarCommands } from "react-native-screens";
-import type { FeedbackScreenRootProps } from "../../shared/types";
+import type {
+  FeedbackColorProps,
+  FeedbackScreenRootProps,
+} from "../../shared/types";
 
 interface FeedbackScreenWithStack {
   useStack?: true;
   StackOptions?: StackScreenProps["options"];
+  /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
 }
 interface FeedbackScreenWithoutStack {
   useStack?: false;
   StackOptions?: never;
+  androidToolbarIcons?: never;
 }
 export type FeedbackScreenStackProps =
   FeedbackScreenWithStack | FeedbackScreenWithoutStack;
@@ -19,5 +26,62 @@ export type ExpoFeedbackScreenProps = FeedbackScreenStackProps &
 export interface FeedbackStackProps {
   searchRef: React.RefObject<SearchBarCommands | null>;
   stackOptions?: StackScreenProps["options"];
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
   children: React.ReactNode;
 }
+
+/** File names used by the routed feedback stack. */
+export interface FeedbackRouteNames {
+  /** Board route. @default "index" */
+  board: string;
+  /** Entry route. Must contain `[entryId]`. @default "[entryId]" */
+  entry: string;
+  /** Create-entry modal route. @default "new" */
+  create: string;
+}
+
+export type FeedbackStackScreenOptions = Exclude<
+  NonNullable<StackScreenProps["options"]>,
+  (...args: never[]) => unknown
+>;
+
+export interface FeedbackAndroidToolbarIcons {
+  /** Android image source for the create-entry action. */
+  create?: ImageSourcePropType;
+  /** Android image source for the back action. */
+  back?: ImageSourcePropType;
+  /** Android image source for modal close actions. */
+  close?: ImageSourcePropType;
+  /** Android image source for the open/closed status filter. */
+  filter?: ImageSourcePropType;
+}
+
+export interface FeedbackStackLayoutProps extends FeedbackScreenRootProps {
+  /** Partial overrides for the prescribed route file names. */
+  routes?: Partial<FeedbackRouteNames>;
+  /** Options shared by every feedback screen. */
+  screenOptions?: FeedbackStackScreenOptions;
+  /** Board screen option overrides. */
+  boardOptions?: FeedbackStackScreenOptions;
+  /** Entry-detail screen option overrides. */
+  entryOptions?: FeedbackStackScreenOptions;
+  /** Create-entry modal option overrides. */
+  createOptions?: FeedbackStackScreenOptions;
+  /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
+  androidToolbarIcons?: FeedbackAndroidToolbarIcons;
+}
+
+export interface FeedbackCreateStackLayoutProps {
+  /** Options shared by the create form and suggested-entry screens. */
+  screenOptions?: FeedbackStackScreenOptions;
+  /** Create-form screen option overrides. */
+  createOptions?: FeedbackStackScreenOptions;
+  /** Suggested-entry screen option overrides. */
+  entryOptions?: FeedbackStackScreenOptions;
+}
+
+export interface RoutedFeedbackContextValue {
+  routes: FeedbackRouteNames;
+  colors: FeedbackColorProps;
+  androidToolbarIcons: FeedbackAndroidToolbarIcons;
+}

package/src/native/native/FeedbackScreen.tsx

@@ -16,6 +16,7 @@ export function FeedbackScreen({
   maxCommentDepth = 5,
   debounceDuration = 300,
   collectMetadata,
+  emptyState,
   transformComments,
   renderActor,
   ...props
@@ -30,6 +31,7 @@ export function FeedbackScreen({
         maxCommentDepth={maxCommentDepth}
         debounceDuration={debounceDuration}
         collectMetadata={collectMetadata}
+        emptyState={emptyState}
         collectStandardMetadata={collectNativeMetadata}
         transformComments={transformComments}
         renderActor={renderActor}

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

@@ -9,6 +9,7 @@ export function FeedbackScreenContent({
   showHeader = true,
   hideBackButton = false,
   onEntryOpen,
+  onCreateEntry,
   ...colors
 }: FeedbackScreenContentProps) {
   const { showForm, setShowForm, setSelectedEntryId } = useFeedbackBody();
@@ -26,6 +27,7 @@ export function FeedbackScreenContent({
         <FeedbackScreenList
           hideBackButton={hideBackButton}
           onEntryOpen={handleEntryOpen}
+          onCreateEntry={onCreateEntry}
         />
       </FeedbackBoard.Root>
 

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

@@ -4,24 +4,33 @@ import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
 export function Button({
   label,
   onPress,
+  variant = "default",
 }: {
   label: string;
   onPress: () => void;
+  variant?: "default" | "primary";
 }) {
   const { theme } = useFeedbackUi();
+  const primary = variant === "primary";
   return (
     <Pressable
       onPress={onPress}
       style={{
-        alignSelf: "flex-start",
+        alignSelf: primary ? "center" : "flex-start",
         paddingVertical: 8,
         paddingHorizontal: 11,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: theme.colors.border,
+        borderColor: primary ? theme.colors.primary : theme.colors.border,
+        backgroundColor: primary ? theme.colors.primary : undefined,
       }}
     >
-      <Text style={{ color: theme.colors.text, fontWeight: "600" }}>
+      <Text
+        style={{
+          color: primary ? theme.colors.primaryForeground : theme.colors.text,
+          fontWeight: "600",
+        }}
+      >
         {label}
       </Text>
     </Pressable>

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

@@ -2,10 +2,19 @@ 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";
+import { createEntryLabel, entryStatusChoices } from "../../../shared/helpers";
+import { ChoiceChips, FeedbackBoard } from "./primitives";
 
 export function FeedbackScreenHeader() {
-  const { query, setShowForm, setQuery, enabledKinds } = useFeedbackBody();
+  const {
+    query,
+    setShowForm,
+    setQuery,
+    setIsSearching,
+    enabledKinds,
+    statusFilter,
+    setStatusFilter,
+  } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const { top } = useSafeAreaInsets();
 
@@ -20,6 +29,12 @@ export function FeedbackScreenHeader() {
       <Text style={{ color: theme.colors.mutedText }}>
         {messages.board.subtitle}
       </Text>
+      <ChoiceChips
+        accessibilityLabel={messages.board.statusFilter}
+        options={entryStatusChoices(messages)}
+        value={statusFilter}
+        onValueChange={setStatusFilter}
+      />
       <Pressable
         onPress={() => setShowForm(true)}
         style={{
@@ -33,10 +48,16 @@ export function FeedbackScreenHeader() {
         <Text
           style={{ color: theme.colors.primaryForeground, fontWeight: "700" }}
         >
-          {messages.board.createEntry}
+          {createEntryLabel(enabledKinds, messages)}
         </Text>
       </Pressable>
-      <FeedbackBoard.Search value={query} onValueChange={(q) => setQuery(q)} />
+      <FeedbackBoard.Search
+        value={query}
+        onValueChange={(q) => {
+          setQuery(q);
+          setIsSearching(q.trim().length > 0);
+        }}
+      />
     </FeedbackBoard.Header>
   );
 }

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

@@ -1,5 +1,8 @@
+import { Text } from "react-native";
+
 import { useFeedbackBody } from "../../../shared/context/FeedbackBodyProvider.js";
 import { useFeedbackUi } from "../../../shared/context/FeedbackProvider.js";
+import { createEntryLabel } from "../../../shared/helpers.js";
 import type { FeedbackScreenListProps } from "../../../shared/types/index.js";
 import { Button } from "./Button.js";
 import { EntryCard } from "./EntryCard.js";
@@ -8,47 +11,84 @@ import { FeedbackBoard } from "./primitives.js";
 
 export function FeedbackScreenList({
   hideBackButton = false,
+  showSelectedEntry = true,
   onEntryOpen,
+  onCreateEntry,
 }: FeedbackScreenListProps) {
   const {
     hooks,
     entrySort,
     isSearching,
     enabledKinds,
+    statusFilter,
     selectedEntryId,
     debouncedQuery,
     setSelectedEntryId,
+    setShowForm,
+    emptyState,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
 
-  const list = hooks.useEntries({ sort: entrySort, kinds: enabledKinds });
+  const list = hooks.useEntries({
+    sort: entrySort,
+    kinds: enabledKinds,
+    statusFilter,
+  });
   const search = hooks.useSearchEntries({
     searchQuery: debouncedQuery,
     kinds: enabledKinds,
+    statusFilter,
   });
 
   const entries = isSearching ? search : list.results;
+  const createEntry = onCreateEntry ?? (() => setShowForm(true));
+
+  const loading = isSearching
+    ? search === undefined
+    : list.status === "LoadingFirstPage";
 
   return (
     <>
-      <FeedbackBoard.List style={{ padding: theme.spacing }}>
-        {selectedEntryId ? (
+      {showSelectedEntry && selectedEntryId ? (
+        <FeedbackBoard.List style={{ padding: theme.spacing }}>
           <EntryDetail
             entryId={selectedEntryId}
             hideBackButton={hideBackButton}
             onBack={() => setSelectedEntryId(null)}
           />
-        ) : (
-          (entries ?? []).map((entry) => (
+        </FeedbackBoard.List>
+      ) : loading ? (
+        <FeedbackBoard.State>
+          <Text style={{ color: theme.colors.mutedText }}>
+            {messages.board.loading}
+          </Text>
+        </FeedbackBoard.State>
+      ) : entries !== undefined && entries.length === 0 ? (
+        <FeedbackBoard.State>
+          {emptyState}
+          <Text style={{ color: theme.colors.mutedText, textAlign: "center" }}>
+            {isSearching
+              ? messages.board.noSearchResults
+              : messages.board.noEntries}
+          </Text>
+          <Button
+            label={createEntryLabel(enabledKinds, messages)}
+            onPress={createEntry}
+            variant="primary"
+          />
+        </FeedbackBoard.State>
+      ) : (
+        <FeedbackBoard.List style={{ padding: theme.spacing }}>
+          {(entries ?? []).map((entry) => (
             <EntryCard
               key={entry.id}
               entry={entry}
               hooks={hooks}
               onOpen={() => onEntryOpen(entry.id)}
             />
-          ))
-        )}
-      </FeedbackBoard.List>
+          ))}
+        </FeedbackBoard.List>
+      )}
 
       {!isSearching && list.status === "CanLoadMore" && (
         <Button

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

@@ -15,7 +15,7 @@ import { useFeedbackUi } from "../../../shared/context/FeedbackProvider";
 import type { FeedbackScreenEntryModalProps } from "../../../shared/types";
 import { collectEntryMetadata } from "../../../shared/metadata";
 import { EntryDetail } from "./EntryDetail";
-import { FeedbackForm } from "./primitives";
+import { ChoiceChips, FeedbackForm } from "./primitives";
 
 export function CreateEntryModal({
   onRequestClose,
@@ -131,7 +131,7 @@ export function CreateEntryModal({
                 onBack={() => setPreviewEntryId(null)}
               />
             ) : (
-              <CreateForm
+              <CreateEntryForm
                 kind={kind}
                 onKindChange={setKind}
                 title={title}
@@ -149,7 +149,7 @@ export function CreateEntryModal({
   );
 }
 
-function CreateForm({
+export function CreateEntryForm({
   kind,
   onKindChange,
   title,
@@ -247,33 +247,15 @@ function CreateForm({
           <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>
+          <ChoiceChips
+            accessibilityLabel={messages.form.kind}
+            options={enabledKinds.map((value) => ({
+              value,
+              label: messages.kinds[value],
+            }))}
+            value={kind}
+            onValueChange={onKindChange}
+          />
         </>
       )}
       <FeedbackForm.Input

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

@@ -32,6 +32,7 @@ import {
 import type {
   BoardSearchBaseProps,
   BoardSearchState,
+  ChoiceChipsBaseProps,
   CommentActionBaseProps,
   CommentLikeBaseProps,
   CommentLikeState,
@@ -182,14 +183,103 @@ const BoardList = forwardRef<ScrollView, ScrollViewProps>(
   },
 );
 
+function BoardState({ style, ...props }: ViewProps) {
+  const { theme, unstyled } = useFeedbackUi();
+  return (
+    <View
+      {...props}
+      style={combineStyle<ViewStyle>(
+        !unstyled,
+        {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.spacing,
+          padding: theme.spacing,
+        },
+        style,
+      )}
+    />
+  );
+}
+
 export const FeedbackBoard = {
   Root: BoardRoot,
   Header: BoardHeader,
   Title: BoardTitle,
   Search: BoardSearch,
   List: BoardList,
+  State: BoardState,
 };
 
+/** Props for the reusable native `ChoiceChips` primitive. */
+export interface ChoiceChipsProps<Value extends string = string>
+  extends Omit<ViewProps, "children">, ChoiceChipsBaseProps<Value> {}
+
+export function ChoiceChips<Value extends string>({
+  options,
+  value,
+  onValueChange,
+  style,
+  ...props
+}: ChoiceChipsProps<Value>) {
+  const { theme, unstyled } = useFeedbackUi();
+
+  return (
+    <View
+      {...props}
+      style={combineStyle<ViewStyle>(
+        !unstyled,
+        { flexDirection: "row", flexWrap: "wrap", gap: 7 },
+        style,
+      )}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="radio"
+            accessibilityState={{ selected }}
+            onPress={() => onValueChange(option.value)}
+            style={
+              unstyled
+                ? undefined
+                : {
+                    paddingVertical: 6,
+                    paddingHorizontal: 9,
+                    borderRadius: 999,
+                    borderWidth: 1,
+                    borderColor: selected
+                      ? theme.colors.primary
+                      : theme.colors.border,
+                    backgroundColor: selected
+                      ? theme.colors.primary
+                      : "transparent",
+                  }
+            }
+          >
+            <Text
+              style={
+                unstyled
+                  ? undefined
+                  : {
+                      color: selected
+                        ? theme.colors.primaryForeground
+                        : theme.colors.mutedText,
+                      fontWeight: "600",
+                    }
+              }
+            >
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
 const EntryContext = createContext<FeedbackEntryData | null>(null);
 function useEntryContext(): FeedbackEntryData {
   const value = useContext(EntryContext);

package/src/react/primitives.tsx

@@ -25,6 +25,7 @@ import type {
   CommentLikeBaseProps,
   CommentLikeState,
   CommentRootBaseProps,
+  ChoiceChipsBaseProps,
   EntryRootBaseProps,
   EntryUpvoteBaseProps,
   EntryUpvoteState,
@@ -147,14 +148,68 @@ function BoardList(props: HTMLAttributes<HTMLDivElement>) {
   );
 }
 
+function BoardState(props: HTMLAttributes<HTMLDivElement>) {
+  const { unstyled } = useFeedbackUi();
+  return (
+    <div
+      {...props}
+      className={classes(unstyled, "cf-state", props.className)}
+    />
+  );
+}
+
 export const FeedbackBoard = {
   Root: BoardRoot,
   Header: BoardHeader,
   Title: BoardTitle,
   Search: BoardSearch,
   List: BoardList,
+  State: BoardState,
 };
 
+/**
+ * Props for the reusable web `ChoiceChips` primitive.
+ */
+export interface ChoiceChipsProps<Value extends string = string>
+  extends
+    Omit<HTMLAttributes<HTMLDivElement>, "children">,
+    ChoiceChipsBaseProps<Value> {}
+
+export function ChoiceChips<Value extends string>({
+  options,
+  value,
+  onValueChange,
+  className,
+  role,
+  ...props
+}: ChoiceChipsProps<Value>) {
+  const { unstyled } = useFeedbackUi();
+
+  return (
+    <div
+      {...props}
+      role={role ?? "group"}
+      className={classes(unstyled, "cf-choice-chips", className)}
+    >
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            className={classes(unstyled, "cf-choice-chip")}
+            data-selected={selected ? "true" : "false"}
+            aria-pressed={selected}
+            onClick={() => onValueChange(option.value)}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 const EntryContext = createContext<FeedbackEntryData | null>(null);
 
 function useEntryContext(): FeedbackEntryData {