convex-feedback-ui 0.1.5 → 0.1.7

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "convex-feedback-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Customizable React and React Native UI primitives for convex-feedback.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Moumen-io/convex-feedback.git"
+  },
   "type": "module",
   "sideEffects": [
     "./dist/react/styles.css"
@@ -36,7 +40,7 @@
     "prepack": "npm run build"
   },
   "peerDependencies": {
-    "convex-feedback": "^0.1.4",
+    "convex-feedback": "^0.1.5",
     "react": ">=18.2.0",
     "react-native": ">=0.83.0",
     "react-native-safe-area-context": ">=5.4.0",
@@ -68,12 +72,12 @@
   "devDependencies": {
     "@types/react": "^19.2.18",
     "convex-feedback": "*",
-    "react": "^19.2.0",
-    "react-native": "^0.83.10",
-    "react-native-safe-area-context": "~5.6.2",
-    "react-native-screens": "^4.23.0",
-    "expo": "^55.0.0",
-    "expo-router": "^55.0.18"
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.26.0",
+    "expo": "~57.0.18",
+    "expo-router": "~57.0.17"
   },
   "types": "./dist/react/index.d.ts",
   "module": "./dist/react/index.js"

package/src/native/expo/ExpoFeedbackBody.tsx

@@ -11,6 +11,7 @@ import type { FeedbackScreenStackProps } from "./types.js";
 export function ExpoFeedbackBody({
   useStack = true,
   StackOptions,
+  androidToolbarIcons,
   ...props
 }: FeedbackScreenBodyProps & FeedbackScreenStackProps) {
   const { query, isSearching, setIsSearching, setSelectedEntryId } =
@@ -36,7 +37,11 @@ export function ExpoFeedbackBody({
     return <FeedbackScreenContent onEntryOpen={onEntryOpen} {...props} />;
 
   return (
-    <FeedbackStack stackOptions={StackOptions} searchRef={searchRef}>
+    <FeedbackStack
+      stackOptions={StackOptions}
+      searchRef={searchRef}
+      androidToolbarIcons={androidToolbarIcons}
+    >
       <FeedbackScreenContent
         hideBackButton
         showHeader={false}

package/src/native/expo/FeedbackCreateStackLayout.tsx

@@ -0,0 +1,62 @@
+import {
+  Stack,
+  useNavigation,
+  type NativeStackNavigationOptions,
+} from "expo-router";
+import { useCallback, useMemo } from "react";
+
+import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider.js";
+import { useFeedbackUi } from "../../shared/context/FeedbackProvider.js";
+import { RoutedFeedbackModalProvider } from "./RoutedFeedbackModalContext.js";
+import { useRoutedFeedback } from "./RoutedFeedbackContext.js";
+import type { FeedbackCreateStackLayoutProps } from "./types.js";
+
+export function FeedbackCreateStackLayout({
+  screenOptions,
+  createOptions,
+  entryOptions,
+}: FeedbackCreateStackLayoutProps) {
+  const parentNavigation = useNavigation();
+  const { enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const { routes } = useRoutedFeedback();
+  const dismiss = useCallback(
+    () => parentNavigation.goBack(),
+    [parentNavigation],
+  );
+  const modal = useMemo(() => ({ dismiss }), [dismiss]);
+  const createTitle =
+    enabledKinds.length === 1
+      ? messages.newFeedback[enabledKinds.at(0)!]
+      : messages.board.createEntry;
+  const defaults: NativeStackNavigationOptions = {
+    headerShown: true,
+    headerBackButtonDisplayMode: "minimal",
+    contentStyle: { backgroundColor: theme.colors.background },
+  };
+
+  return (
+    <RoutedFeedbackModalProvider value={modal}>
+      <Stack>
+        <Stack.Screen
+          name="index"
+          options={{
+            ...defaults,
+            headerTitle: createTitle,
+            ...screenOptions,
+            ...createOptions,
+          }}
+        />
+        <Stack.Screen
+          name={routes.entry}
+          options={{
+            ...defaults,
+            headerTitle: messages.board.title,
+            ...screenOptions,
+            ...entryOptions,
+          }}
+        />
+      </Stack>
+    </RoutedFeedbackModalProvider>
+  );
+}

package/src/native/expo/FeedbackRoutes.tsx

@@ -0,0 +1,238 @@
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useRef, useState } from "react";
+import type { SearchBarCommands } from "react-native-screens";
+import type { EntryKind } from "convex-feedback";
+
+import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider.js";
+import { useFeedbackUi } from "../../shared/context/FeedbackProvider.js";
+import { createEntryLabel, entryStatusChoices } from "../../shared/helpers.js";
+import { EntryDetail } from "../shared/ui/EntryDetail.js";
+import { FeedbackScreenList } from "../shared/ui/FeedbackScreenList.js";
+import { CreateEntryForm } from "../shared/ui/NewEntry.js";
+import { FeedbackBoard } from "../shared/ui/primitives.js";
+import { feedbackRouteHref } from "./routes.js";
+import { useRoutedFeedbackModal } from "./RoutedFeedbackModalContext.js";
+import { useRoutedFeedback } from "./RoutedFeedbackContext.js";
+
+export function FeedbackBoardScreen() {
+  const {
+    query,
+    isSearching,
+    setQuery,
+    setIsSearching,
+    enabledKinds,
+    statusFilter,
+    setStatusFilter,
+  } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const { routes, colors, androidToolbarIcons } = useRoutedFeedback();
+  const router = useRouter();
+  const searchRef = useRef<SearchBarCommands>(null);
+
+  useEffect(() => {
+    const searching = query.trim().length > 0;
+    if (searching !== isSearching) setIsSearching(searching);
+  }, [query, isSearching, setIsSearching]);
+
+  const openEntry = (entryId: string) => {
+    if ((query || isSearching) && searchRef.current) {
+      searchRef.current.blur();
+    }
+    router.push(feedbackRouteHref(routes.entry, { entryId }), {
+      relativeToDirectory: true,
+    });
+  };
+
+  return (
+    <>
+      <FeedbackBoard.Root {...colors}>
+        <FeedbackScreenList
+          showSelectedEntry={false}
+          hideBackButton
+          onEntryOpen={openEntry}
+          onCreateEntry={() =>
+            router.push(feedbackRouteHref(routes.create), {
+              relativeToDirectory: true,
+            })
+          }
+        />
+      </FeedbackBoard.Root>
+
+      <Stack.Toolbar placement="right">
+        <Stack.Toolbar.Button
+          icon={
+            process.env.EXPO_OS === "ios" ? "plus" : androidToolbarIcons.create
+          }
+          variant="prominent"
+          accessibilityLabel={createEntryLabel(enabledKinds, messages)}
+          onPress={() =>
+            router.push(feedbackRouteHref(routes.create), {
+              relativeToDirectory: true,
+            })
+          }
+          tintColor={theme.colors.primary}
+        >
+          {createEntryLabel(enabledKinds, messages)}
+        </Stack.Toolbar.Button>
+      </Stack.Toolbar>
+      <Stack.Toolbar placement="left">
+        <Stack.Toolbar.Button
+          hidden={!router.canGoBack()}
+          icon={
+            process.env.EXPO_OS === "ios"
+              ? "chevron.backward"
+              : androidToolbarIcons.back
+          }
+          accessibilityLabel={messages.entry.back}
+          onPress={() => router.back()}
+        >
+          {messages.entry.back}
+        </Stack.Toolbar.Button>
+      </Stack.Toolbar>
+      <Stack.SearchBar
+        ref={searchRef}
+        placeholder={messages.board.searchPlaceholder}
+        onChangeText={(event) => setQuery(event.nativeEvent.text)}
+        onFocus={() => setIsSearching(true)}
+        onBlur={() => setIsSearching(query.trim().length > 0)}
+        obscureBackground={false}
+        allowToolbarIntegration
+        hideNavigationBar={false}
+        textColor={theme.colors.text}
+      />
+      <Stack.Toolbar placement="bottom">
+        <Stack.Toolbar.SearchBarSlot />
+        <Stack.Toolbar.Menu
+          icon={
+            process.env.EXPO_OS === "ios"
+              ? "line.3.horizontal.decrease"
+              : androidToolbarIcons.filter
+          }
+          title={messages.board.statusFilter}
+          accessibilityLabel={messages.board.statusFilter}
+          tintColor={theme.colors.primary}
+        >
+          {entryStatusChoices(messages).map(({ value, label }) => (
+            <Stack.Toolbar.MenuAction
+              key={value}
+              isOn={statusFilter === value}
+              onPress={() => setStatusFilter(value)}
+            >
+              {label}
+            </Stack.Toolbar.MenuAction>
+          ))}
+        </Stack.Toolbar.Menu>
+      </Stack.Toolbar>
+    </>
+  );
+}
+
+export function FeedbackEntryScreen() {
+  const params = useLocalSearchParams<{
+    entryId?: string | string[];
+  }>();
+  const entryId = Array.isArray(params.entryId)
+    ? params.entryId[0]
+    : params.entryId;
+
+  if (!entryId) {
+    throw new Error(
+      'FeedbackEntryScreen requires an "entryId" dynamic route parameter.',
+    );
+  }
+
+  return <FeedbackEntryRouteContent entryId={entryId} />;
+}
+
+function FeedbackEntryRouteContent({ entryId }: { entryId: string }) {
+  const { hooks } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const { colors, androidToolbarIcons } = useRoutedFeedback();
+  const modal = useRoutedFeedbackModal();
+  const router = useRouter();
+  const entry = hooks.useEntry(entryId);
+
+  return (
+    <>
+      {entry && <Stack.Screen options={{ headerTitle: entry.title }} />}
+      <FeedbackBoard.Root {...colors}>
+        <FeedbackBoard.List style={{ padding: theme.spacing }}>
+          <EntryDetail
+            entryId={entryId}
+            hideBackButton
+            onBack={() => router.back()}
+          />
+        </FeedbackBoard.List>
+      </FeedbackBoard.Root>
+      {modal && (
+        <Stack.Toolbar placement="right">
+          <Stack.Toolbar.Button
+            icon={
+              process.env.EXPO_OS === "ios"
+                ? "xmark"
+                : androidToolbarIcons.close
+            }
+            accessibilityLabel={messages.form.cancel}
+            onPress={modal.dismiss}
+          >
+            {messages.form.cancel}
+          </Stack.Toolbar.Button>
+        </Stack.Toolbar>
+      )}
+    </>
+  );
+}
+
+export function CreateFeedbackScreen() {
+  const { enabledKinds } = useFeedbackBody();
+  const { messages, theme } = useFeedbackUi();
+  const { routes, colors, androidToolbarIcons } = useRoutedFeedback();
+  const modal = useRoutedFeedbackModal();
+  const router = useRouter();
+  const [kind, setKind] = useState<EntryKind>(enabledKinds[0] ?? "feedback");
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const entryHref = (entryId: string) =>
+    feedbackRouteHref(routes.entry, { entryId });
+
+  return (
+    <>
+      <FeedbackBoard.Root {...colors}>
+        <FeedbackBoard.List
+          style={{
+            padding: theme.spacing,
+            paddingBottom: theme.spacing * 2,
+          }}
+        >
+          <CreateEntryForm
+            kind={kind}
+            onKindChange={setKind}
+            title={title}
+            onTitleChange={setTitle}
+            body={body}
+            onBodyChange={setBody}
+            onOpenSuggestion={(entryId) =>
+              router.push(entryHref(entryId), { relativeToDirectory: true })
+            }
+            onCreated={(entryId) => {
+              router.dismissTo(entryHref(entryId));
+            }}
+          />
+        </FeedbackBoard.List>
+      </FeedbackBoard.Root>
+
+      <Stack.Toolbar placement="left">
+        <Stack.Toolbar.Button
+          icon={
+            process.env.EXPO_OS === "ios" ? "xmark" : androidToolbarIcons.close
+          }
+          accessibilityLabel={messages.form.cancel}
+          onPress={() => (modal ? modal.dismiss() : router.dismiss())}
+        >
+          {messages.form.cancel}
+        </Stack.Toolbar.Button>
+      </Stack.Toolbar>
+    </>
+  );
+}

package/src/native/expo/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={collectExpoMetadata}
         transformComments={transformComments}
         renderActor={renderActor}

package/src/native/expo/FeedbackStack.tsx

@@ -1,11 +1,13 @@
 import { Stack, useRouter } from "expo-router";
 import { useFeedbackBody } from "../../shared/context/FeedbackBodyProvider";
 import { useFeedbackUi } from "../../shared/context/FeedbackProvider";
+import { createEntryLabel, entryStatusChoices } from "../../shared/helpers";
 import type { FeedbackStackProps } from "./types";
 
 export function FeedbackStack({
   searchRef,
   stackOptions,
+  androidToolbarIcons = {},
   children,
 }: FeedbackStackProps) {
   const {
@@ -16,6 +18,8 @@ export function FeedbackStack({
     setShowForm,
     setIsSearching,
     setSelectedEntryId,
+    statusFilter,
+    setStatusFilter,
   } = useFeedbackBody();
   const { messages, theme } = useFeedbackUi();
   const router = useRouter();
@@ -54,19 +58,30 @@ export function FeedbackStack({
       />
       <Stack.Toolbar placement="right">
         <Stack.Toolbar.Button
-          icon="plus"
+          icon={
+            process.env.EXPO_OS === "ios" ? "plus" : androidToolbarIcons.create
+          }
           variant="prominent"
-          accessibilityLabel={messages.board.createEntry}
+          accessibilityLabel={createEntryLabel(enabledKinds, messages)}
           onPress={() => setShowForm(true)}
           tintColor={theme.colors.primary}
-        />
+        >
+          {createEntryLabel(enabledKinds, messages)}
+        </Stack.Toolbar.Button>
       </Stack.Toolbar>
       <Stack.Toolbar placement="left">
         <Stack.Toolbar.Button
           hidden={!canGoBack}
-          icon="chevron.backward"
+          icon={
+            process.env.EXPO_OS === "ios"
+              ? "chevron.backward"
+              : androidToolbarIcons.back
+          }
+          accessibilityLabel={messages.entry.back}
           onPress={handleBackPress}
-        />
+        >
+          {messages.entry.back}
+        </Stack.Toolbar.Button>
       </Stack.Toolbar>
 
       {children}
@@ -93,6 +108,26 @@ export function FeedbackStack({
       />
       <Stack.Toolbar placement="bottom">
         <Stack.Toolbar.SearchBarSlot />
+        <Stack.Toolbar.Menu
+          icon={
+            process.env.EXPO_OS === "ios"
+              ? "line.3.horizontal.decrease"
+              : androidToolbarIcons.filter
+          }
+          title={messages.board.statusFilter}
+          accessibilityLabel={messages.board.statusFilter}
+          tintColor={theme.colors.primary}
+        >
+          {entryStatusChoices(messages).map(({ value, label }) => (
+            <Stack.Toolbar.MenuAction
+              key={value}
+              isOn={statusFilter === value}
+              onPress={() => setStatusFilter(value)}
+            >
+              {label}
+            </Stack.Toolbar.MenuAction>
+          ))}
+        </Stack.Toolbar.Menu>
       </Stack.Toolbar>
     </>
   );

package/src/native/expo/FeedbackStackLayout.tsx

@@ -0,0 +1,118 @@
+import { Stack, type NativeStackNavigationOptions } from "expo-router";
+
+import { FeedbackBodyProvider } from "../../shared/context/FeedbackBodyProvider.js";
+import { FeedbackProvider } from "../../shared/context/FeedbackProvider.js";
+import { kinds } from "../../shared/helpers.js";
+import { mergeFeedbackMessages } from "../../shared/messages.js";
+import { mergeFeedbackTheme } from "../../shared/theme.js";
+import { collectExpoMetadata } from "./metadata.js";
+import { RoutedFeedbackProvider } from "./RoutedFeedbackContext.js";
+import { resolveFeedbackRoutes } from "./routes.js";
+import type { FeedbackStackLayoutProps } from "./types.js";
+
+export function FeedbackStackLayout({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  entrySort = "top",
+  commentSort = "top",
+  enabledKinds = kinds,
+  maxCommentDepth = 5,
+  debounceDuration = 300,
+  collectMetadata,
+  emptyState,
+  transformComments,
+  renderActor,
+  routes: routeOverrides,
+  screenOptions,
+  boardOptions,
+  entryOptions,
+  createOptions,
+  androidToolbarIcons = {},
+  primaryColor,
+  primaryForeground,
+  backgroundColor,
+  surfaceColor,
+  textColor,
+  mutedColor,
+  borderColor,
+  dangerColor,
+}: FeedbackStackLayoutProps) {
+  const routes = resolveFeedbackRoutes(routeOverrides);
+  const resolvedMessages = mergeFeedbackMessages(messages);
+  const resolvedTheme = mergeFeedbackTheme(theme);
+  const colors = {
+    primaryColor,
+    primaryForeground,
+    backgroundColor,
+    surfaceColor,
+    textColor,
+    mutedColor,
+    borderColor,
+    dangerColor,
+  };
+  const background = backgroundColor ?? resolvedTheme.colors.background;
+  const boardTitle =
+    enabledKinds.length === 1
+      ? resolvedMessages.kindsPlural[enabledKinds.at(0)!]
+      : resolvedMessages.board.title;
+  const defaults: NativeStackNavigationOptions = {
+    headerShown: true,
+    headerBackButtonDisplayMode: "minimal",
+    contentStyle: { backgroundColor: background },
+  };
+
+  return (
+    <FeedbackProvider messages={messages} theme={theme} unstyled={unstyled}>
+      <FeedbackBodyProvider
+        hooks={hooks}
+        entrySort={entrySort}
+        commentSort={commentSort}
+        enabledKinds={enabledKinds}
+        maxCommentDepth={maxCommentDepth}
+        debounceDuration={debounceDuration}
+        collectMetadata={collectMetadata}
+        emptyState={emptyState}
+        collectStandardMetadata={collectExpoMetadata}
+        transformComments={transformComments}
+        renderActor={renderActor}
+      >
+        <RoutedFeedbackProvider value={{ routes, colors, androidToolbarIcons }}>
+          <Stack>
+            <Stack.Screen
+              name={routes.board}
+              options={{
+                ...defaults,
+                headerTitle: boardTitle,
+                headerTransparent: true,
+                headerShadowVisible: true,
+                ...screenOptions,
+                ...boardOptions,
+              }}
+            />
+            <Stack.Screen
+              name={routes.entry}
+              options={{
+                ...defaults,
+                headerTitle: boardTitle,
+                ...screenOptions,
+                ...entryOptions,
+              }}
+            />
+            <Stack.Screen
+              name={routes.create}
+              options={{
+                ...defaults,
+                headerShown: false,
+                presentation: "modal",
+                ...screenOptions,
+                ...createOptions,
+              }}
+            />
+          </Stack>
+        </RoutedFeedbackProvider>
+      </FeedbackBodyProvider>
+    </FeedbackProvider>
+  );
+}

package/src/native/expo/README.md

@@ -15,3 +15,27 @@ To replace a control with Expo UI, use render-function children on an interactiv
 ```
 
 Containers such as `FeedbackEntry.Content`, `FeedbackForm.Root`, and `Comment.Children` accept arbitrary children, so custom Expo UI fields/buttons can also be placed directly inside the compound layout.
+
+## Routed screens
+
+Use `FeedbackStackLayout` with `FeedbackBoardScreen`,
+`FeedbackCreateStackLayout`, `FeedbackEntryScreen`, and
+`CreateFeedbackScreen` when board state should be shared across real Expo
+Router routes. Consumer applications must create the corresponding board and
+entry files plus a nested create directory containing `_layout.tsx`,
+`index.tsx`, and `[entryId].tsx`, because Expo Router discovers pages from the
+application's route directory.
+
+Re-export `feedbackStackSettings` from the route layout as
+`unstable_settings` so a deep link to the create modal anchors the board behind
+it. Re-export `feedbackCreateStackSettings` from the nested create layout so
+suggested entries retain the form behind them. Use
+`createFeedbackStackSettings(routes)` when overriding the default route names.
+
+Toolbar actions retain their package-provided SF Symbols on iOS. Pass
+`androidToolbarIcons` to `FeedbackScreen` or `FeedbackStackLayout` with Android
+`ImageSourcePropType` values for the create, back, close, and filter actions.
+Missing Android images fall back to text labels.
+
+The existing `FeedbackScreen` remains the self-contained API for conditional
+in-screen navigation.

package/src/native/expo/RoutedFeedbackContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import type { RoutedFeedbackContextValue } from "./types.js";
+
+const RoutedFeedbackContext = createContext<RoutedFeedbackContextValue | null>(
+  null,
+);
+
+export const RoutedFeedbackProvider = RoutedFeedbackContext.Provider;
+
+export function useRoutedFeedback(): RoutedFeedbackContextValue {
+  const value = useContext(RoutedFeedbackContext);
+
+  if (value === null) {
+    throw new Error(
+      "Routed feedback screens must be rendered inside FeedbackStackLayout.",
+    );
+  }
+
+  return value;
+}

package/src/native/expo/RoutedFeedbackModalContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+interface RoutedFeedbackModalContextValue {
+  dismiss: () => void;
+}
+
+const RoutedFeedbackModalContext =
+  createContext<RoutedFeedbackModalContextValue | null>(null);
+
+export const RoutedFeedbackModalProvider = RoutedFeedbackModalContext.Provider;
+
+export function useRoutedFeedbackModal() {
+  return useContext(RoutedFeedbackModalContext);
+}

package/src/native/expo/index.ts

@@ -7,4 +7,8 @@ export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
 export * from "./metadata.js";
 export * from "./FeedbackScreen.js";
+export * from "./FeedbackCreateStackLayout.js";
+export * from "./FeedbackStackLayout.js";
+export * from "./FeedbackRoutes.js";
+export * from "./routes.js";
 export type * from "./types.js";