convex-feedback-ui 0.2.0-beta.2 → 0.2.0-beta.3

package/src/native/expo/RoadmapStackLayout.tsx

@@ -0,0 +1,111 @@
+import { Stack, type NativeStackNavigationOptions } from "expo-router";
+
+import { mergeFeedbackMessages } from "../../shared/messages.js";
+import { mergeFeedbackTheme } from "../../shared/theme.js";
+import { RoadmapProvider } from "../shared/ui/RoadmapScreen.js";
+import { RoutedRoadmapProvider } from "./RoutedRoadmapContext.js";
+import { resolveRoadmapRoutes } from "./routes.js";
+import type { RoadmapStackLayoutProps } from "./types.js";
+
+/**
+ * Provider and native-stack layout for real Expo Router roadmap pages.
+ * Consumers supply the small route files; this component keeps the roadmap
+ * query and entry-detail context mounted while a detail page is pushed.
+ */
+export function RoadmapStackLayout({
+  hooks,
+  messages,
+  theme,
+  unstyled,
+  onEntryOpen,
+  onUnauthenticated,
+  commentSort,
+  maxCommentDepth,
+  transformComments,
+  renderActor,
+  pageSize = hooks.pageSizes.roadmap,
+  entryPageSize = hooks.pageSizes.entries,
+  routes: routeOverrides,
+  screenOptions,
+  boardOptions,
+  itemOptions,
+  androidToolbarIcons = {},
+  primaryColor,
+  primaryForeground,
+  backgroundColor,
+  surfaceColor,
+  textColor,
+  mutedColor,
+  borderColor,
+  dangerColor,
+}: RoadmapStackLayoutProps) {
+  const routes = resolveRoadmapRoutes(routeOverrides);
+  const resolvedMessages = mergeFeedbackMessages(messages);
+  const resolvedTheme = mergeFeedbackTheme(theme);
+  const colors = {
+    primaryColor,
+    primaryForeground,
+    backgroundColor,
+    surfaceColor,
+    textColor,
+    mutedColor,
+    borderColor,
+    dangerColor,
+  };
+  const defaults: NativeStackNavigationOptions = {
+    headerShown: true,
+    headerTransparent: true,
+    headerShadowVisible: true,
+    headerBackButtonDisplayMode: "minimal",
+    headerTintColor: textColor ?? resolvedTheme.colors.text,
+    contentStyle: {
+      backgroundColor: backgroundColor ?? resolvedTheme.colors.background,
+    },
+  };
+
+  return (
+    <RoadmapProvider
+      hooks={hooks}
+      messages={messages}
+      theme={theme}
+      unstyled={unstyled}
+      commentSort={commentSort}
+      maxCommentDepth={maxCommentDepth}
+      transformComments={transformComments}
+      renderActor={renderActor}
+      onUnauthenticated={onUnauthenticated}
+    >
+      <RoutedRoadmapProvider
+        value={{
+          routes,
+          colors,
+          androidToolbarIcons,
+          pageSize,
+          entryPageSize,
+          onEntryOpen,
+        }}
+      >
+        <Stack>
+          <Stack.Screen
+            name={routes.board}
+            options={{
+              ...defaults,
+              headerTitle: resolvedMessages.roadmap.title,
+              ...screenOptions,
+              ...boardOptions,
+            }}
+          />
+          <Stack.Screen
+            name={routes.item}
+            options={{
+              ...defaults,
+              headerTitle: resolvedMessages.roadmap.title,
+              ...screenOptions,
+              ...itemOptions,
+            }}
+          />
+        </Stack>
+      </RoutedRoadmapProvider>
+    </RoadmapProvider>
+  );
+}

package/src/native/expo/RoutedRoadmapContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+
+import type { RoutedRoadmapContextValue } from "./types.js";
+
+const RoutedRoadmapContext = createContext<RoutedRoadmapContextValue | null>(
+  null,
+);
+
+export const RoutedRoadmapProvider = RoutedRoadmapContext.Provider;
+
+export function useRoutedRoadmap(): RoutedRoadmapContextValue {
+  const value = useContext(RoutedRoadmapContext);
+
+  if (value === null) {
+    throw new Error(
+      "Routed roadmap screens must be rendered inside RoadmapStackLayout.",
+    );
+  }
+
+  return value;
+}

package/src/native/expo/index.ts

@@ -5,11 +5,18 @@ export * from "../../shared/metadata.js";
 export * from "../../shared/theme.js";
 export type * from "../../shared/types/index.js";
 export * from "../shared/ui/primitives.js";
-export * from "../shared/ui/RoadmapScreen.js";
+export {
+  RoadmapBoardContent,
+  RoadmapItemContent,
+  RoadmapProvider,
+} from "../shared/ui/RoadmapScreen.js";
 export * from "./metadata.js";
 export * from "./FeedbackScreen.js";
 export * from "./FeedbackCreateStackLayout.js";
 export * from "./FeedbackStackLayout.js";
 export * from "./FeedbackRoutes.js";
+export * from "./RoadmapScreen.js";
+export * from "./RoadmapStackLayout.js";
+export * from "./RoadmapRoutes.js";
 export * from "./routes.js";
 export type * from "./types.js";

package/src/native/expo/routes.ts

@@ -1,5 +1,6 @@
 import type { Href } from "expo-router";
-import type { FeedbackRouteNames } from "./types.js";
+import type { RoadmapItem } from "convex-feedback";
+import type { FeedbackRouteNames, RoadmapRouteNames } from "./types.js";
 
 export const defaultFeedbackRoutes: FeedbackRouteNames = {
   board: "index",
@@ -39,3 +40,70 @@ export function feedbackRouteHref(
   const pathname = route.startsWith(".") ? route : `./${route}`;
   return params === undefined ? pathname : { pathname, params };
 }
+
+export const defaultRoadmapRoutes: RoadmapRouteNames = {
+  board: "index",
+  item: "[roadmapId]",
+};
+
+export function resolveRoadmapRoutes(
+  routes: Partial<RoadmapRouteNames> = {},
+): RoadmapRouteNames {
+  const resolved = { ...defaultRoadmapRoutes, ...routes };
+
+  if (!resolved.item.includes("[roadmapId]")) {
+    throw new Error(
+      'The routed roadmap item route must contain the "[roadmapId]" dynamic segment.',
+    );
+  }
+
+  return resolved;
+}
+
+export function createRoadmapStackSettings(
+  routes?: Partial<RoadmapRouteNames>,
+) {
+  return { anchor: resolveRoadmapRoutes(routes).board };
+}
+
+export const roadmapStackSettings = createRoadmapStackSettings();
+
+export function roadmapRouteHref(
+  route: string,
+  params?: Record<string, string>,
+): Href {
+  const pathname = route.startsWith(".") ? route : `./${route}`;
+  return params === undefined ? pathname : { pathname, params };
+}
+
+/** Pass the already loaded item through a push so a detail route renders immediately. */
+export function roadmapRouteParams(item: RoadmapItem) {
+  return { roadmapId: item.id, item: JSON.stringify(item) };
+}
+
+function firstParam(value: string | string[] | undefined): string | undefined {
+  return Array.isArray(value) ? value[0] : value;
+}
+
+export function parseRoadmapRouteItem(
+  value: string | string[] | undefined,
+): RoadmapItem | undefined {
+  const serialized = firstParam(value);
+  if (!serialized) return undefined;
+
+  try {
+    const parsed: unknown = JSON.parse(serialized);
+    if (!parsed || typeof parsed !== "object") return undefined;
+    const item = parsed as Partial<RoadmapItem>;
+    if (
+      typeof item.id !== "string" ||
+      typeof item.title !== "string" ||
+      typeof item.status !== "string"
+    ) {
+      return undefined;
+    }
+    return item as RoadmapItem;
+  } catch {
+    return undefined;
+  }
+}

package/src/native/expo/types.ts

@@ -5,6 +5,7 @@ import type { SearchBarCommands } from "react-native-screens";
 import type {
   FeedbackColorProps,
   FeedbackScreenRootProps,
+  RoadmapScreenProps,
 } from "../../shared/types";
 
 /** Optional wrapper used around Expo Router bottom toolbars. */
@@ -65,6 +66,13 @@ export interface FeedbackAndroidToolbarIcons {
   filter?: ImageSourcePropType;
 }
 
+export interface RoadmapAndroidToolbarIcons {
+  /** Android image source for back actions. */
+  back?: ImageSourcePropType;
+  /** Android image source for modal close actions. */
+  close?: ImageSourcePropType;
+}
+
 export interface FeedbackStackLayoutProps extends FeedbackScreenRootProps {
   /** Partial overrides for the prescribed route file names. */
   routes?: Partial<FeedbackRouteNames>;
@@ -91,9 +99,44 @@ export interface FeedbackCreateStackLayoutProps {
   entryOptions?: FeedbackStackScreenOptions;
 }
 
+/** File names used by the routed public roadmap stack. */
+export interface RoadmapRouteNames {
+  /** Board route. @default "index" */
+  board: string;
+  /** Roadmap item route. Must contain `[roadmapId]`. @default "[roadmapId]" */
+  item: string;
+}
+
+export type RoadmapStackScreenOptions = Exclude<
+  NonNullable<StackScreenProps["options"]>,
+  (...args: never[]) => unknown
+>;
+
+export interface RoadmapStackLayoutProps extends RoadmapScreenProps {
+  /** Partial overrides for the prescribed route file names. */
+  routes?: Partial<RoadmapRouteNames>;
+  /** Options shared by every roadmap screen. */
+  screenOptions?: RoadmapStackScreenOptions;
+  /** Roadmap board screen option overrides. */
+  boardOptions?: RoadmapStackScreenOptions;
+  /** Roadmap item screen option overrides. */
+  itemOptions?: RoadmapStackScreenOptions;
+  /** Android image sources for toolbar actions. iOS continues to use SF Symbols. */
+  androidToolbarIcons?: RoadmapAndroidToolbarIcons;
+}
+
 export interface RoutedFeedbackContextValue {
   routes: FeedbackRouteNames;
   colors: FeedbackColorProps;
   androidToolbarIcons: FeedbackAndroidToolbarIcons;
   bottomToolbarWrapper?: BottomToolbarWrapper;
 }
+
+export interface RoutedRoadmapContextValue {
+  routes: RoadmapRouteNames;
+  colors: FeedbackColorProps;
+  androidToolbarIcons: RoadmapAndroidToolbarIcons;
+  pageSize: number;
+  entryPageSize: number;
+  onEntryOpen?: RoadmapScreenProps["onEntryOpen"];
+}

package/src/native/native/README.md

@@ -16,6 +16,7 @@ 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.
 
-`RoadmapScreen` provides the public roadmap and renders attached entries with
-the same `FeedbackEntry` primitives. Pass `onUnauthenticated` to handle auth
-when an anonymous visitor votes.
+`RoadmapScreen` provides the public roadmap, groups items by delivery stage,
+and renders attached entries with the existing `EntryCard` and `EntryDetail`
+views. Pass `onUnauthenticated` to handle auth when an anonymous visitor votes
+or comments.