create-feedbax 0.1.0 → 0.2.0

package/template/src/public-shell.test.tsx

@@ -0,0 +1,518 @@
+// @vitest-environment jsdom
+
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ThemeProvider } from "next-themes";
+import type { PublicPostPage } from "@feedbax/feedback";
+
+import Header from "./components/header";
+import feedbax from "./feedbax";
+import {
+  CommandPalette,
+  CommandPaletteProvider,
+} from "./components/command-palette";
+import { ChangelogPage } from "./changelog-page";
+import { deviceProfileKey, readDeviceProfile } from "./browser-post-state";
+import { PublicRoadmapView } from "./public-roadmap-view";
+import { CreatePostOverlay } from "./create-post-overlay";
+import { DeviceProfileProvider } from "./components/device-profile-provider";
+import { saveDeviceProfile } from "./browser-post-state";
+
+const portalFeedbackMutations = {
+  submitPost: async () => {
+    throw new Error("Not used in this test.");
+  },
+  editDraftPost: async () => {
+    throw new Error("Not used in this test.");
+  },
+  withdrawDraftPost: async () => {
+    throw new Error("Not used in this test.");
+  },
+};
+
+beforeEach(() => {
+  localStorage.clear();
+  document.documentElement.className = "";
+  window.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+  window.HTMLElement.prototype.scrollIntoView = function () {};
+  Object.defineProperty(window, "matchMedia", {
+    configurable: true,
+    value: (query: string): MediaQueryList =>
+      ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+        addListener: () => undefined,
+        removeListener: () => undefined,
+        dispatchEvent: () => true,
+      }) as MediaQueryList,
+  });
+});
+afterEach(cleanup);
+
+describe("public portal shell", () => {
+  it("uses the configured product logo in the home link", async () => {
+    renderShell("/");
+
+    const logo = (
+      await screen.findByRole("link", { name: `${feedbax.product.name} home` })
+    ).querySelector("img");
+    if (!logo) throw new Error("Expected the home link to contain a logo.");
+    expect(logo.getAttribute("src")).toBe(feedbax.product.logo);
+  });
+
+  it("keeps the public navigation sticky while the page scrolls", async () => {
+    renderShell("/");
+
+    const header = (
+      await screen.findByRole("navigation", {
+        name: "Public portal",
+      })
+    ).closest("header");
+    expect(header?.classList.contains("sticky")).toBe(true);
+    expect(header?.classList.contains("top-0")).toBe(true);
+  });
+
+  it("offers skip navigation and global search on every destination", async () => {
+    renderShell("/p/keyboard-first-search");
+
+    expect(
+      (
+        await screen.findByRole("link", { name: "Skip to content" })
+      ).getAttribute("href"),
+    ).toBe("#main-content");
+    fireEvent.click(screen.getByRole("button", { name: "Search" }));
+
+    expect(
+      await screen.findByRole("dialog", { name: "Search feedback" }),
+    ).toBeTruthy();
+  });
+
+  it("offers direct destinations and identifies the current destination", async () => {
+    renderShell("/roadmap");
+
+    const navigation = await screen.findByRole("navigation", {
+      name: "Public portal",
+    });
+    expect(navigation.querySelector("[aria-current='page']")?.textContent).toBe(
+      "Roadmap",
+    );
+    expect(
+      screen.getByRole("link", { name: "Feedback" }).getAttribute("href"),
+    ).toBe("/");
+    expect(
+      screen.getByRole("link", { name: "Changelog" }).getAttribute("href"),
+    ).toBe("/changelog");
+  });
+
+  it.each(["/p/keyboard-first-search", "/submit"])(
+    "keeps Feedback current for the contextual route %s",
+    async (route) => {
+      renderShell(route);
+
+      const navigation = await screen.findByRole("navigation", {
+        name: "Public portal",
+      });
+      expect(
+        navigation.querySelector("[aria-current='page']")?.textContent,
+      ).toBe("Feedback");
+    },
+  );
+
+  it("opens visible New post actions contextually", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ama",
+      email: "ama@example.com",
+    });
+    const { history } = renderShell("/roadmap");
+
+    await screen.findByText("Ama");
+    fireEvent.click(await screen.findByRole("button", { name: "New post" }));
+
+    expect(
+      await screen.findByRole("dialog", { name: "Create a Post" }),
+    ).toBeTruthy();
+    expect(document.body.textContent).toContain("Roadmap");
+    expect(history.location.pathname).toBe("/submit");
+  });
+
+  it("opens profile setup instead of Post creation when the profile is incomplete", async () => {
+    const { history } = renderShell("/roadmap");
+
+    fireEvent.click(await screen.findByRole("button", { name: "New post" }));
+
+    expect(await screen.findByRole("dialog", { name: "Profile" })).toBeTruthy();
+    expect(history.location.pathname).toBe("/roadmap");
+    expect(screen.queryByRole("dialog", { name: "Create a Post" })).toBeNull();
+  });
+
+  it("renders Changelog as a complete timeline destination", async () => {
+    renderShell("/changelog");
+
+    expect(
+      await screen.findByRole("heading", { level: 1, name: "Changelog" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Follow updates" })).toBeNull();
+  });
+});
+
+describe("profile menu", () => {
+  it("opens profile setup directly when no Device Profile exists", async () => {
+    renderShell("/");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+
+    expect(await screen.findByLabelText("Display name")).toBeTruthy();
+    expect(
+      screen.getByText(
+        /Saved only on this device.*not sign-in.*cannot be recovered/i,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("rejects an empty display name inline without saving", async () => {
+    renderShell("/");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Save profile" }),
+    );
+
+    expect(await screen.findByText("Display name is required.")).toBeTruthy();
+    expect(readDeviceProfile(localStorage)).toBeUndefined();
+  });
+
+  it("rejects an invalid email inline without saving", async () => {
+    renderShell("/");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+    fireEvent.change(await screen.findByLabelText("Display name"), {
+      target: { value: "Ama Mensah" },
+    });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "not-an-email" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save profile" }));
+
+    expect(
+      await screen.findByText("Enter a valid email address."),
+    ).toBeTruthy();
+    expect(readDeviceProfile(localStorage)).toBeUndefined();
+  });
+
+  it("saves a Device Profile and manages it from the profile menu", async () => {
+    renderShell("/");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+    fireEvent.change(await screen.findByLabelText("Display name"), {
+      target: { value: "Ama Mensah" },
+    });
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "ama@example.com" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save profile" }));
+
+    await waitFor(() =>
+      expect(readDeviceProfile(localStorage)).toEqual({
+        name: "Ama Mensah",
+        email: "ama@example.com",
+      }),
+    );
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+
+    expect(
+      await screen.findByRole("menuitem", { name: "Clear profile" }),
+    ).toBeTruthy();
+    fireEvent.click(screen.getByRole("menuitem", { name: "Clear profile" }));
+
+    await waitFor(() =>
+      expect(readDeviceProfile(localStorage)).toBeUndefined(),
+    );
+    expect(await screen.findByRole("button", { name: "Profile" })).toBeTruthy();
+  });
+
+  it("lets a Participant add the email required for commenting", async () => {
+    localStorage.setItem(deviceProfileKey, JSON.stringify({ name: "Ama" }));
+    renderShell("/");
+
+    await screen.findByText("Ama");
+    fireEvent.click(await screen.findByRole("button", { name: "Profile" }));
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: "Edit profile" }),
+    );
+
+    expect(
+      (await screen.findByLabelText("Display name")).getAttribute("value"),
+    ).toBe("Ama");
+    fireEvent.change(screen.getByLabelText("Email"), {
+      target: { value: "ama@example.com" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Save profile" }));
+
+    await waitFor(() =>
+      expect(readDeviceProfile(localStorage)).toEqual({
+        name: "Ama",
+        email: "ama@example.com",
+      }),
+    );
+  });
+
+  it("keeps theme selection inside the configured profile menu", async () => {
+    localStorage.setItem(deviceProfileKey, JSON.stringify({ name: "Ama" }));
+    renderShell("/");
+
+    await screen.findByText("Ama");
+    fireEvent.click(screen.getByRole("button", { name: "Profile" }));
+    fireEvent.click(await screen.findByRole("menuitemradio", { name: "Dark" }));
+
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains("dark")).toBe(true),
+    );
+  });
+});
+
+describe("command palette", () => {
+  it("labels search input and announces pending results", async () => {
+    renderShell("/", {
+      searchPosts: () => new Promise<PublicPostPage>(() => undefined),
+    });
+
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    const input = await screen.findByPlaceholderText("Search feedback…");
+    expect(input.getAttribute("aria-label")).toBe("Search feedback");
+    fireEvent.change(input, { target: { value: "keyboard" } });
+
+    const status = await screen.findByRole("status", {
+      name: "Search status",
+    });
+    expect(status.closest("[role='listbox']")).toBeNull();
+    await waitFor(() => expect(status.textContent).toBe("Searching Posts…"));
+  });
+
+  it("opens with Cmd/Ctrl+K, closes on Escape, and restores focus", async () => {
+    const { history } = renderShell("/");
+
+    const feedbackLink = await screen.findByRole("link", {
+      name: "Feedback",
+    });
+    feedbackLink.focus();
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+
+    expect(await screen.findByRole("dialog")).toBeTruthy();
+
+    fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(document.activeElement).toBe(feedbackLink);
+    expect(history.location.pathname).toBe("/");
+  });
+
+  it("searches Posts and opens the selected result", async () => {
+    const { history } = renderShell("/roadmap", {
+      searchPosts: async (term) =>
+        term.toLowerCase().includes("keyboard")
+          ? { items: [palettePost()], nextCursor: undefined }
+          : { items: [], nextCursor: undefined },
+    });
+
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", ctrlKey: true });
+    fireEvent.change(await screen.findByPlaceholderText("Search feedback…"), {
+      target: { value: "keyboard" },
+    });
+
+    const palette = await screen.findByRole("dialog");
+    expect(
+      await within(palette).findByText("Keyboard-first search"),
+    ).toBeTruthy();
+    expect(
+      within(palette).getByText("Open search without reaching for the mouse."),
+    ).toBeTruthy();
+    expect(within(palette).getByText("Feature Request")).toBeTruthy();
+    expect(within(palette).getByText("Planned")).toBeTruthy();
+    fireEvent.keyDown(screen.getByPlaceholderText("Search feedback…"), {
+      key: "Enter",
+    });
+
+    await waitFor(() =>
+      expect(history.location.pathname).toBe("/p/keyboard-first-search"),
+    );
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+
+    history.back();
+    await waitFor(() => expect(history.location.pathname).toBe("/roadmap"));
+  });
+
+  it("shows an empty state when no Posts match", async () => {
+    renderShell("/");
+
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    fireEvent.change(await screen.findByPlaceholderText("Search feedback…"), {
+      target: { value: "zzz-nothing" },
+    });
+
+    expect(
+      (await screen.findAllByText("No Posts match this search.")).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it("offers navigation actions including New post", async () => {
+    saveDeviceProfile(localStorage, {
+      name: "Ama",
+      email: "ama@example.com",
+    });
+    const { history } = renderShell("/");
+
+    await screen.findByText("Ama");
+    await screen.findByRole("link", { name: "Feedback" });
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    expect(
+      await screen.findByRole("option", { name: "Feedback" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("option", { name: "Roadmap" })).toBeTruthy();
+    expect(screen.getByRole("option", { name: "Changelog" })).toBeTruthy();
+    expect(screen.getByRole("option", { name: "New post" })).toBeTruthy();
+
+    const input = screen.getByPlaceholderText("Search feedback…");
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    await waitFor(() => expect(history.location.pathname).toBe("/roadmap"));
+
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+    const reopenedInput =
+      await screen.findByPlaceholderText("Search feedback…");
+    fireEvent.keyDown(reopenedInput, { key: "ArrowDown" });
+    fireEvent.keyDown(reopenedInput, { key: "ArrowDown" });
+    fireEvent.keyDown(reopenedInput, { key: "ArrowDown" });
+    fireEvent.keyDown(reopenedInput, { key: "Enter" });
+
+    await waitFor(() => expect(history.location.pathname).toBe("/submit"));
+  });
+
+  it("opens from the roadmap Search button", async () => {
+    renderShell("/roadmap");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Search" }));
+
+    expect(await screen.findByRole("dialog")).toBeTruthy();
+  });
+
+  it("opens from the Changelog Search button", async () => {
+    renderShell("/changelog");
+
+    fireEvent.click(await screen.findByRole("button", { name: "Search" }));
+
+    expect(await screen.findByRole("dialog")).toBeTruthy();
+  });
+});
+
+function palettePost() {
+  return {
+    slug: "keyboard-first-search",
+    title: "Keyboard-first search",
+    description: "Open search without reaching for the mouse.",
+    type: "Feature Request" as const,
+    status: "Planned" as const,
+    createdAt: new Date("2026-08-22T10:00:00.000Z"),
+    updatedAt: new Date("2026-08-22T10:00:00.000Z"),
+  };
+}
+
+function renderShell(
+  initialEntry: string,
+  {
+    searchPosts,
+  }: {
+    searchPosts?: (term: string) => Promise<PublicPostPage>;
+  } = {},
+) {
+  const history = createMemoryHistory({ initialEntries: [initialEntry] });
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const root = createRootRoute({
+    component: () => (
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <DeviceProfileProvider>
+            <CommandPaletteProvider>
+              <Header />
+              <Outlet />
+              <CommandPalette
+                searchPosts={
+                  searchPosts ??
+                  (async () => ({ items: [], nextCursor: undefined }))
+                }
+              />
+              <CreatePostOverlay mutations={portalFeedbackMutations} />
+            </CommandPaletteProvider>
+          </DeviceProfileProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    ),
+  });
+  const index = createRoute({
+    getParentRoute: () => root,
+    path: "/",
+    component: () => <main>Feedback page</main>,
+  });
+  const roadmap = createRoute({
+    getParentRoute: () => root,
+    path: "/roadmap",
+    component: () => (
+      <PublicRoadmapView
+        roadmap={{
+          Planned: { items: [], totalCount: 0 },
+          "In Progress": { items: [], totalCount: 0 },
+          Shipped: { items: [], totalCount: 0 },
+        }}
+        maskPostLinks
+      />
+    ),
+  });
+  const changelog = createRoute({
+    getParentRoute: () => root,
+    path: "/changelog",
+    component: ChangelogPage,
+  });
+  const submit = createRoute({
+    getParentRoute: () => root,
+    path: "/submit",
+    component: () => <main>Create Post</main>,
+  });
+  const post = createRoute({
+    getParentRoute: () => root,
+    path: "/p/$slug",
+    component: () => <main>Post detail</main>,
+  });
+  const router = createRouter({
+    history,
+    routeTree: root.addChildren([index, roadmap, changelog, submit, post]),
+  });
+  render(<RouterProvider router={router} />);
+  return { history };
+}

package/template/src/roadmap-query.ts

@@ -0,0 +1,21 @@
+import type {
+  PublicPostRoadmap,
+  PublicRoadmapPage,
+  PublicRoadmapQuery,
+} from "@feedbax/feedback";
+import { queryOptions } from "@tanstack/react-query";
+
+export type FetchPublicRoadmap = () => Promise<PublicPostRoadmap>;
+export type FetchPublicRoadmapStatusPage = (
+  query: PublicRoadmapQuery,
+) => Promise<PublicRoadmapPage>;
+
+export const publicRoadmapQueryKey = ["public-post-roadmap"] as const;
+
+export function publicRoadmapQuery(fetchRoadmap: FetchPublicRoadmap) {
+  return queryOptions({
+    queryKey: publicRoadmapQueryKey,
+    queryFn: fetchRoadmap,
+    staleTime: 30_000,
+  });
+}

package/template/src/root-branding.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { createPortalHead, createRouteHead } from "./portal-head";
+
+describe("portal document branding", () => {
+  it("uses the resolved product logo as the favicon", () => {
+    expect(
+      createPortalHead({
+        name: "Acme",
+        description: "Acme feedback",
+        logo: "/brand/acme.svg",
+      }).links,
+    ).toContainEqual({
+      rel: "icon",
+      href: "/brand/acme.svg",
+    });
+  });
+});
+
+describe("route metadata", () => {
+  it("builds canonical and social metadata from the configured site URL", () => {
+    const head = createRouteHead(
+      {
+        name: "Acme",
+        description: "Acme feedback",
+        logo: "/logo.svg",
+        siteUrl: "https://feedback.acme.test",
+      },
+      {
+        title: "Roadmap",
+        description: "See what Acme is building.",
+        path: "/roadmap",
+      },
+    );
+    expect(head.meta).toContainEqual({ title: "Roadmap · Acme" });
+    expect(head.meta).toContainEqual({
+      property: "og:url",
+      content: "https://feedback.acme.test/roadmap",
+    });
+    expect(head.links).toEqual([
+      { rel: "canonical", href: "https://feedback.acme.test/roadmap" },
+    ]);
+  });
+
+  it("marks private-facing routes noindex", () => {
+    expect(
+      createRouteHead(
+        { name: "Acme", description: "Feedback", logo: "/logo.svg" },
+        { path: "/submit", noIndex: true },
+      ).meta,
+    ).toContainEqual({ name: "robots", content: "noindex" });
+  });
+});