create-feedbax 0.1.0 → 0.2.0

package/template/src/public-roadmap-page.test.tsx

@@ -0,0 +1,139 @@
+import { createFeedbackModule } from "@feedbax/feedback";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { loadPublicRoadmapPage } from "./public-roadmap-page";
+import {
+  PublicRoadmapSkeleton,
+  PublicRoadmapView,
+} from "./public-roadmap-view";
+
+describe("public roadmap page", () => {
+  it("loads Published Posts in the agreed roadmap groups and order", async () => {
+    const createdAt = new Date("2026-08-01T09:00:00.000Z");
+    const feedback = createFeedbackModule({
+      initialItems: [
+        roadmapItem("planned-older", "Planned earlier", "Planned", createdAt),
+        roadmapItem(
+          "planned-newer",
+          "Planned later",
+          "Planned",
+          new Date("2026-08-20T09:00:00.000Z"),
+        ),
+        roadmapItem(
+          "in-progress",
+          "Building now",
+          "In Progress",
+          new Date("2026-08-19T09:00:00.000Z"),
+        ),
+        roadmapItem(
+          "shipped",
+          "Already shipped",
+          "Shipped",
+          new Date("2026-08-18T09:00:00.000Z"),
+        ),
+        {
+          ...roadmapItem(
+            "private",
+            "Private plan",
+            "Planned",
+            new Date("2026-08-21T09:00:00.000Z"),
+          ),
+          published: false,
+        },
+      ],
+    });
+
+    const roadmap = await loadPublicRoadmapPage({ feedback });
+
+    expect(roadmap.Planned.items.map((item) => item.title)).toEqual([
+      "Planned later",
+      "Planned earlier",
+    ]);
+    expect(roadmap["In Progress"].items.map((item) => item.title)).toEqual([
+      "Building now",
+    ]);
+    expect(roadmap.Shipped.items.map((item) => item.title)).toEqual([
+      "Already shipped",
+    ]);
+  });
+
+  it("renders explicit empty groups", () => {
+    const html = renderToStaticMarkup(
+      <PublicRoadmapView roadmap={emptyRoadmap()} />,
+    );
+
+    expect(html).toContain("Planned");
+    expect(html).toContain("In progress");
+    expect(html).toContain("Shipped");
+    expect(html.match(/No Posts here yet\./g)).toHaveLength(3);
+  });
+
+  it("renders the roadmap workspace described by the visual brief", () => {
+    const html = renderToStaticMarkup(
+      <PublicRoadmapView roadmap={emptyRoadmap()} />,
+    );
+
+    expect(html).toContain("What we’re planning, building, and shipping.");
+    expect(html).toContain("Search");
+    expect(html).not.toContain("Filters");
+    expect(html).toContain("New post");
+  });
+
+  it("links roadmap Posts by immutable slug", () => {
+    const item = roadmapItem(
+      "stable-notion-page-id",
+      "Keyboard-first search!",
+      "Planned",
+      new Date("2026-08-20T09:00:00.000Z"),
+    );
+    const html = renderToStaticMarkup(
+      <PublicRoadmapView
+        roadmap={{
+          ...emptyRoadmap(),
+          Planned: { items: [item], totalCount: 1 },
+        }}
+      />,
+    );
+
+    expect(html).toContain('href="/p/keyboard-first-search"');
+  });
+
+  it("renders three roadmap skeleton columns while the route is loading", () => {
+    const html = renderToStaticMarkup(<PublicRoadmapSkeleton />);
+
+    expect(html).toContain('aria-label="Loading roadmap"');
+    expect(html.match(/data-roadmap-skeleton-column/g)).toHaveLength(3);
+    expect(html).toContain("What we’re planning, building, and shipping.");
+  });
+});
+
+function roadmapItem(
+  id: string,
+  title: string,
+  status: "Planned" | "In Progress" | "Shipped",
+  updatedAt: Date,
+) {
+  return {
+    id,
+    slug: title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/-$/, ""),
+    title,
+    description: `${title} description`,
+    type: "Feature Request" as const,
+    status,
+    published: true,
+    createdAt: new Date("2026-08-01T09:00:00.000Z"),
+    updatedAt,
+  };
+}
+
+function emptyRoadmap() {
+  return {
+    Planned: { items: [], totalCount: 0 },
+    "In Progress": { items: [], totalCount: 0 },
+    Shipped: { items: [], totalCount: 0 },
+  };
+}

package/template/src/public-roadmap-page.ts

@@ -0,0 +1,24 @@
+import type {
+  FeedbackModule,
+  PublicPostRoadmap,
+  PublicRoadmapPage,
+  PublicRoadmapQuery,
+} from "@feedbax/feedback";
+
+export function loadPublicRoadmapPage({
+  feedback,
+}: {
+  feedback: Pick<FeedbackModule, "getPublicPostRoadmap">;
+}): Promise<PublicPostRoadmap> {
+  return feedback.getPublicPostRoadmap();
+}
+
+export function loadPublicRoadmapStatusPage({
+  feedback,
+  query,
+}: {
+  feedback: Pick<FeedbackModule, "listPublicRoadmapPosts">;
+  query: PublicRoadmapQuery;
+}): Promise<PublicRoadmapPage> {
+  return feedback.listPublicRoadmapPosts(query);
+}

package/template/src/public-roadmap-route.test.tsx

@@ -0,0 +1,218 @@
+// @vitest-environment jsdom
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRouteWithContext,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { RouterAppContext } from "./routes/__root";
+import { createPublicRoadmapRoute } from "./public-roadmap-route";
+import { PublicRoadmapView } from "./public-roadmap-view";
+
+afterEach(cleanup);
+
+describe("/roadmap route", () => {
+  it("hydrates once, renders ordered groups, and navigates cards canonically", async () => {
+    const queryClient = new QueryClient();
+    const fetchRoadmap = vi.fn(async () => ({
+      Planned: {
+        items: [post("planned-post", "Planned")],
+        totalCount: 1,
+      },
+      "In Progress": {
+        items: [post("building-post", "In Progress")],
+        totalCount: 1,
+      },
+      Shipped: { items: [], totalCount: 0 },
+    }));
+    const history = createMemoryHistory({ initialEntries: ["/roadmap"] });
+    const root = createRootRouteWithContext<RouterAppContext>()({
+      component: () => (
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+      ),
+    });
+    const roadmap = createPublicRoadmapRoute({ fetchRoadmap }).update({
+      id: "/roadmap",
+      path: "/roadmap",
+      getParentRoute: () => root,
+    } as never);
+    const postDetail = createRoute({
+      getParentRoute: () => root,
+      path: "/p/$slug",
+      component: () => <div>Post detail</div>,
+    });
+    const router = createRouter({
+      context: { queryClient },
+      history,
+      routeTree: root.addChildren([roadmap, postDetail]),
+    });
+
+    render(<RouterProvider router={router} />);
+
+    const headings = await screen.findAllByRole("heading", { level: 2 });
+    expect(headings.map((heading) => heading.textContent)).toEqual([
+      "Planned",
+      "In progress",
+      "Shipped",
+    ]);
+    expect(fetchRoadmap).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByRole("link", { name: /planned-post/i }));
+
+    await waitFor(() =>
+      expect(history.location.pathname).toBe("/p/planned-post"),
+    );
+  });
+
+  it("appends the next page in one column and removes its button on exhaustion", async () => {
+    const queryClient = new QueryClient();
+    const fetchRoadmap = vi.fn(async () => ({
+      Planned: {
+        items: [post("planned-page-1", "Planned")],
+        nextCursor: "planned-cursor",
+        totalCount: 2,
+      },
+      "In Progress": { items: [], totalCount: 0 },
+      Shipped: { items: [], totalCount: 0 },
+    }));
+    let resolveNextPage!: (page: {
+      items: ReturnType<typeof post>[];
+      totalCount: number;
+    }) => void;
+    const fetchRoadmapStatusPage = vi.fn(
+      () =>
+        new Promise<{
+          items: ReturnType<typeof post>[];
+          totalCount: number;
+        }>((resolve) => {
+          resolveNextPage = resolve;
+        }),
+    );
+    const history = createMemoryHistory({ initialEntries: ["/roadmap"] });
+    const root = createRootRouteWithContext<RouterAppContext>()({
+      component: () => (
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+      ),
+    });
+    const roadmap = createPublicRoadmapRoute({
+      fetchRoadmap,
+      fetchRoadmapStatusPage,
+    }).update({
+      id: "/roadmap",
+      path: "/roadmap",
+      getParentRoute: () => root,
+    } as never);
+    const router = createRouter({
+      context: { queryClient },
+      history,
+      routeTree: root.addChildren([roadmap]),
+    });
+
+    render(<RouterProvider router={router} />);
+
+    const loadMore = await screen.findByRole("button", {
+      name: "Load more Planned Posts",
+    });
+    fireEvent.click(loadMore);
+
+    expect(fetchRoadmapStatusPage).toHaveBeenCalledWith({
+      status: "Planned",
+      cursor: "planned-cursor",
+    });
+    expect(loadMore.textContent).toContain("Loading");
+    expect((loadMore as HTMLButtonElement).disabled).toBe(true);
+    expect(
+      screen.getByRole("status", { name: "Roadmap status" }).textContent,
+    ).toBe("Loading more Planned Posts.");
+
+    resolveNextPage({
+      items: [post("planned-page-2", "Planned")],
+      totalCount: 2,
+    });
+
+    expect(
+      await screen.findByRole("link", { name: /planned-page-2/i }),
+    ).toBeTruthy();
+    await waitFor(() =>
+      expect(
+        screen.queryByRole("button", { name: "Load more Planned Posts" }),
+      ).toBeNull(),
+    );
+    expect(
+      screen.getByText("2", { selector: "[data-roadmap-count]" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("status", { name: "Roadmap status" }).textContent,
+    ).toBe("1 more Planned Post loaded.");
+  });
+
+  it("shows one status column at a time behind mobile status tabs", async () => {
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: vi.fn().mockReturnValue({
+        matches: true,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      }),
+    });
+    render(
+      <PublicRoadmapView
+        roadmap={{
+          Planned: {
+            items: [post("planned-mobile", "Planned")],
+            totalCount: 1,
+          },
+          "In Progress": { items: [], totalCount: 0 },
+          Shipped: {
+            items: [
+              {
+                ...post("shipped-mobile", "Planned"),
+                status: "Shipped",
+              },
+            ],
+            totalCount: 1,
+          },
+        }}
+      />,
+    );
+
+    expect(screen.getByRole("link", { name: /planned-mobile/i })).toBeTruthy();
+    expect(screen.queryByRole("link", { name: /shipped-mobile/i })).toBeNull();
+
+    fireEvent.click(screen.getByRole("tab", { name: /Shipped 1/i }));
+
+    expect(
+      await screen.findByRole("link", { name: /shipped-mobile/i }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("link", { name: /planned-mobile/i })).toBeNull();
+  });
+});
+
+function post(slug: string, status: "Planned" | "In Progress") {
+  return {
+    slug,
+    title: slug,
+    description: `${slug} description`,
+    type: "Feature Request" as const,
+    status,
+    createdAt: new Date("2026-08-22T10:00:00.000Z"),
+    updatedAt: new Date("2026-08-22T10:00:00.000Z"),
+  };
+}

package/template/src/public-roadmap-route.tsx

@@ -0,0 +1,50 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PublicPortalError } from "./public-portal-error";
+import {
+  PublicRoadmapSkeleton,
+  PublicRoadmapView,
+} from "./public-roadmap-view";
+import {
+  publicRoadmapQuery,
+  type FetchPublicRoadmap,
+  type FetchPublicRoadmapStatusPage,
+} from "./roadmap-query";
+import feedbax from "./feedbax";
+import { createRouteHead } from "./portal-head";
+
+export function createPublicRoadmapRoute({
+  fetchRoadmap,
+  fetchRoadmapStatusPage,
+}: {
+  fetchRoadmap: FetchPublicRoadmap;
+  fetchRoadmapStatusPage?: FetchPublicRoadmapStatusPage;
+}) {
+  const query = publicRoadmapQuery(fetchRoadmap);
+  const route = createFileRoute("/roadmap")({
+    head: () =>
+      createRouteHead(feedbax.product, {
+        title: "Roadmap",
+        description: `See what ${feedbax.product.name} is considering, building, and shipping.`,
+        path: "/roadmap",
+      }),
+    loader: ({ context }) => context.queryClient.ensureQueryData(query),
+    component: RoadmapComponent,
+    pendingComponent: PublicRoadmapSkeleton,
+    errorComponent: PublicPortalError,
+  });
+
+  function RoadmapComponent() {
+    const roadmap = useSuspenseQuery(query).data;
+    return (
+      <PublicRoadmapView
+        roadmap={roadmap}
+        loadMore={fetchRoadmapStatusPage}
+        maskPostLinks
+      />
+    );
+  }
+
+  return route;
+}

package/template/src/public-roadmap-server-function.ts

@@ -0,0 +1,44 @@
+import { roadmapStatuses, type RoadmapStatus } from "@feedbax/feedback";
+import { createServerFn } from "@tanstack/react-start";
+
+import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import {
+  loadPublicRoadmapPage,
+  loadPublicRoadmapStatusPage,
+} from "./public-roadmap-page";
+import { runSafePublicRead } from "./safe-public-failure";
+
+const roadmapStatusSet = new Set<string>(roadmapStatuses);
+
+export const getPublicRoadmapPage = createServerFn({ method: "GET" }).handler(
+  () =>
+    runSafePublicRead(() =>
+      loadPublicRoadmapPage({
+        feedback: createConfiguredFeedbackModule(),
+      }),
+    ),
+);
+
+export const getPublicRoadmapStatusPage = createServerFn({ method: "GET" })
+  .validator((input: unknown) => {
+    if (!input || typeof input !== "object")
+      throw new Error("Roadmap request is invalid.");
+    const status = Reflect.get(input, "status");
+    const cursor = Reflect.get(input, "cursor");
+    if (typeof status !== "string" || !roadmapStatusSet.has(status))
+      throw new Error("Roadmap request is invalid.");
+    if (cursor !== undefined && typeof cursor !== "string")
+      throw new Error("Roadmap request is invalid.");
+    return {
+      status: status as RoadmapStatus,
+      ...(cursor ? { cursor } : {}),
+    };
+  })
+  .handler(({ data }) =>
+    runSafePublicRead(() =>
+      loadPublicRoadmapStatusPage({
+        feedback: createConfiguredFeedbackModule(),
+        query: data,
+      }),
+    ),
+  );