create-feedbax 0.1.0 → 0.2.1

package/template/src/connected-runtime.test.ts

@@ -0,0 +1,241 @@
+import { issueParticipationPass } from "./portal-voting";
+import { expect, it } from "vitest";
+import { Miniflare } from "miniflare";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import {
+  createConnectedStore,
+  createConnectedFeedbackModule,
+  createFeedbackModule,
+} from "@feedbax/feedback";
+import { createConnectedRequestHandler } from "./connected-runtime";
+import { sessionHash } from "./connected-identity";
+import feedbax from "./feedbax";
+
+it("requires a valid session and same-origin mutations, and ignores browser-supplied Comment identity", async () => {
+  const runtime = new Miniflare({
+    modules: true,
+    script: "export default {fetch(){return new Response('ok')}}",
+    compatibilityDate: "2026-07-30",
+    d1Databases: ["DB"],
+  });
+  try {
+    const db = await runtime.getD1Database("DB");
+    await db.exec(
+      (await readFile(
+        existsSync("apps/portal/migrations/0001_connected.sql")
+          ? "apps/portal/migrations/0001_connected.sql"
+          : "migrations/0001_connected.sql",
+        "utf8",
+      )) +
+        "\n" +
+        (await readFile(
+          existsSync("apps/portal/migrations/0002_participation.sql")
+            ? "apps/portal/migrations/0002_participation.sql"
+            : "migrations/0002_participation.sql",
+          "utf8",
+        )),
+    );
+    const store = createConnectedStore(db);
+    const participant = { subject: "alice", displayName: "Alice" };
+    await store.acceptIdentity({
+      ...participant,
+      nonce: "nonce",
+      sessionHash: sessionHash("opaque-token"),
+      expiresAt: Date.now() + 60000,
+    });
+    const config = {
+      ...feedbax,
+      product: { ...feedbax.product, siteUrl: "https://feedback.example" },
+      connected: {
+        issuer: "https://app.example",
+        loginUrl: "https://app.example/login",
+      },
+    };
+    const base = createFeedbackModule({
+      initialItems: [
+        {
+          id: "post",
+          slug: "post",
+          title: "Post",
+          description: "Public",
+          type: "Feature Request",
+          status: "Planned",
+          published: true,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          voteCount: 99,
+        },
+      ],
+    });
+    const options = {
+      config,
+      environment: {
+        PORTAL_SUBMISSIONS_RATE_LIMITER: {
+          limit: async () => ({ success: true }),
+        },
+        PARTICIPATION_SIGNING_SECRET:
+          "test-participation-secret-at-least-32-characters",
+      },
+      getStore: () => store,
+      getFeedback: (identity: typeof participant) =>
+        createConnectedFeedbackModule(base, store, identity),
+    };
+    const handle = createConnectedRequestHandler(options);
+    const request = (
+      path: string,
+      body: unknown,
+      cookie = "__Host-feedbax-session=opaque-token",
+      origin = "https://feedback.example",
+    ) =>
+      new Request(`https://feedback.example${path}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Cookie: cookie,
+          Origin: origin,
+        },
+        body: JSON.stringify(body),
+      });
+    expect(
+      (
+        await handle(
+          request("/internal/votes", { slug: "post", intention: "add" }, ""),
+        )
+      )?.status,
+    ).toBe(401);
+    expect(
+      (
+        await handle(
+          request(
+            "/internal/votes",
+            { slug: "post", intention: "add" },
+            undefined,
+            "https://evil.example",
+          ),
+        )
+      )?.status,
+    ).toBe(403);
+    for (let i = 0; i < 2; i++)
+      expect(
+        await (
+          await handle(
+            request("/internal/votes", { slug: "post", intention: "add" }),
+          )
+        )?.json(),
+      ).toMatchObject({ voteCount: 1 });
+    const state = await handle(
+      new Request(
+        "https://feedback.example/internal/connected/votes?slug=post",
+        { headers: { Cookie: "__Host-feedbax-session=opaque-token" } },
+      ),
+    );
+    expect(state?.headers.get("cache-control")).toBe("no-store");
+    expect(await state?.json()).toEqual({ voteCount: 1, voted: true });
+    const comment = await handle(
+      request("/internal/comments", {
+        slug: "post",
+        body: "Hello",
+        displayName: "Fake Admin",
+        email: "private@example.com",
+        subject: "someone-else",
+      }),
+    );
+    expect(comment?.status).toBe(200);
+    expect(comment?.headers.get("cache-control")).toBe("no-store");
+    const result = await comment?.json();
+    expect(result.comment.author).toEqual({
+      kind: "participant",
+      displayName: "Alice",
+      verified: true,
+    });
+    expect(JSON.stringify(result)).not.toContain("private@example.com");
+    expect(JSON.stringify(result)).not.toContain("someone-else");
+    const disabled = createConnectedRequestHandler({
+      ...options,
+      config: {
+        ...config,
+        features: { ...config.features, comments: false, voting: false },
+      },
+    });
+    expect(
+      (
+        await disabled(
+          request("/internal/comments", { slug: "post", body: "No" }),
+        )
+      )?.status,
+    ).toBe(400);
+    expect(
+      (
+        await disabled(
+          request("/internal/votes", { slug: "post", intention: "add" }),
+        )
+      )?.status,
+    ).not.toBe(200);
+    const verified = createConnectedRequestHandler({
+      ...options,
+      config: {
+        ...config,
+        turnstile: { enabled: true, siteKey: "test-site-key" },
+      },
+      environment: {
+        ...options.environment,
+        TURNSTILE_SECRET_KEY: "test-secret",
+      },
+    });
+    const expiredPass = issueParticipationPass(
+      options.environment.PARTICIPATION_SIGNING_SECRET,
+      Date.now() - 31 * 60 * 1000,
+    );
+    const expiredResponse = await verified(
+      request("/internal/votes", {
+        slug: "post",
+        intention: "add",
+        participationPass: expiredPass,
+      }),
+    );
+    expect(expiredResponse?.status).toBe(400);
+    expect(await expiredResponse?.json()).toMatchObject({
+      code: "verification_required",
+    });
+    const limited = createConnectedRequestHandler({
+      ...options,
+      environment: {
+        ...options.environment,
+        IDENTITY_HANDOFF_SECRET: "test-identity-secret-at-least-32-characters",
+        PORTAL_SUBMISSIONS_RATE_LIMITER: {
+          limit: async () => ({ success: false }),
+        },
+      },
+    });
+    const limitResponse = await limited(
+      request("/internal/votes", { slug: "post", intention: "add" }),
+    );
+    expect(limitResponse?.status).toBe(429);
+    expect(await limitResponse?.json()).toMatchObject({ code: "rate_limited" });
+    const sessionRead = await limited(
+      new Request("https://feedback.example/internal/identity/session", {
+        headers: { Cookie: "__Host-feedbax-session=opaque-token" },
+      }),
+    );
+    expect(sessionRead?.status).toBe(200);
+    expect(await sessionRead?.json()).toEqual({
+      participant: { displayName: "Alice" },
+    });
+    const unavailable = createConnectedRequestHandler({
+      ...options,
+      getStore: () => {
+        throw new Error("D1 unavailable");
+      },
+    });
+    expect(
+      (
+        await unavailable(
+          request("/internal/votes", { slug: "post", intention: "add" }),
+        )
+      )?.status,
+    ).toBe(503);
+  } finally {
+    await runtime.dispose();
+  }
+});

package/template/src/connected-runtime.ts

@@ -0,0 +1,176 @@
+import { ActionablePortalFailure } from "./safe-public-failure";
+import { VoteEligibilityError } from "@feedbax/feedback";
+import type { FeedbaxConfig } from "@feedbax/config";
+import type {
+  ConnectedStore,
+  FeedbackModule,
+  VerifiedParticipant,
+} from "@feedbax/feedback";
+import { env } from "cloudflare:workers";
+import feedbax from "./feedbax";
+import {
+  createConfiguredFeedbackModule,
+  getConnectedStore,
+} from "./feedback-runtime";
+import {
+  createConnectedIdentityHandler,
+  readSessionToken,
+  sameOrigin,
+  sessionHash,
+} from "./connected-identity";
+import { createPortalVoteHandler } from "./portal-voting";
+import {
+  createPortalCommentRequestHandler,
+  createPortalCommentMutationRequestHandler,
+} from "./portal-comments";
+import { createPortalSubmissionSecurity } from "./portal-feedback-runtime";
+
+type ConnectedEnvironment = Parameters<
+  typeof createPortalSubmissionSecurity
+>[0]["environment"] & {
+  IDENTITY_HANDOFF_SECRET?: string;
+  PARTICIPATION_SIGNING_SECRET?: string;
+};
+export function createConnectedRequestHandler(options: {
+  config: FeedbaxConfig;
+  environment: ConnectedEnvironment;
+  getStore: () => ConnectedStore;
+  getFeedback: (participant: VerifiedParticipant) => FeedbackModule;
+}) {
+  const { config: feedbax, environment: env } = options;
+  return async (request: Request): Promise<Response | undefined> => {
+    const url = new URL(request.url);
+    const identity = url.pathname.startsWith("/internal/identity/");
+    const voteState = url.pathname === "/internal/connected/votes";
+    const mutation =
+      url.pathname === "/internal/votes" ||
+      url.pathname === "/internal/comments";
+    if (!identity && !voteState && !mutation) return;
+    const json = (value: unknown, status = 200) =>
+      Response.json(value, {
+        status,
+        headers: { "Cache-Control": "no-store" },
+      });
+    if (!feedbax.connected)
+      return identity || voteState
+        ? json({ error: "Not found." }, 404)
+        : undefined;
+    try {
+      const store = options.getStore();
+      const siteUrl = feedbax.product.siteUrl!;
+      if (identity) {
+        if (
+          url.pathname !== "/internal/identity/session" &&
+          !(
+            await env.PORTAL_SUBMISSIONS_RATE_LIMITER.limit({
+              key: `identity:${url.pathname}:${request.headers.get("CF-Connecting-IP") ?? "unknown"}`,
+            })
+          ).success
+        )
+          return json(
+            { error: "Too many sign-in attempts. Try again shortly." },
+            429,
+          );
+        if (
+          !env.IDENTITY_HANDOFF_SECRET ||
+          env.IDENTITY_HANDOFF_SECRET.length < 32
+        )
+          throw new Error("Missing identity secret.");
+        return createConnectedIdentityHandler({
+          ...feedbax.connected,
+          siteUrl,
+          secret: env.IDENTITY_HANDOFF_SECRET,
+          store,
+        })(request);
+      }
+      if (mutation && !sameOrigin(request, siteUrl))
+        return json({ error: "Request origin is invalid." }, 403);
+      if (mutation && !["POST", "PATCH", "DELETE"].includes(request.method))
+        return json({ error: "Method not allowed." }, 405);
+      const token = readSessionToken(request);
+      const participant = token
+        ? await store.session(sessionHash(token))
+        : undefined;
+      if (!participant)
+        return json(
+          {
+            error: "Sign in through the product to participate.",
+            code: "sign_in_required",
+          },
+          401,
+        );
+      const feedback = options.getFeedback(participant);
+      if (voteState && request.method === "GET") {
+        const slug = url.searchParams.get("slug") ?? "";
+        const post = await feedback.getPublicPost(slug);
+        if (!feedbax.features.voting || !post)
+          return json({ error: "Post is unavailable." }, 404);
+        return json(await store.voteState(slug, participant.subject));
+      }
+      const security = createPortalSubmissionSecurity({
+        turnstile: feedbax.turnstile,
+        environment: env,
+        rateLimitKey:
+          request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+      });
+      const mutationOptions = {
+        feedback,
+        ...security,
+        participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+      };
+      if (url.pathname === "/internal/votes" && request.method === "POST")
+        return json(
+          await createPortalVoteHandler({
+            ...mutationOptions,
+            votingEnabled: feedbax.features.voting,
+          })(await request.json()),
+        );
+      if (url.pathname === "/internal/comments" && request.method === "POST")
+        return noStore(
+          createPortalCommentRequestHandler({
+            ...mutationOptions,
+            verifiedParticipant: participant,
+            commentsEnabled: feedbax.features.comments,
+          })(request),
+        );
+      if (
+        url.pathname === "/internal/comments" &&
+        (request.method === "PATCH" || request.method === "DELETE")
+      )
+        return noStore(
+          createPortalCommentMutationRequestHandler({
+            ...mutationOptions,
+            commentsEnabled: feedbax.features.comments,
+          })(request),
+        );
+      return json({ error: "Method not allowed." }, 405);
+    } catch (error) {
+      if (error instanceof ActionablePortalFailure)
+        return json(
+          { error: error.message, code: error.code ?? "action_failed" },
+          error.code === "rate_limited" ? 429 : 400,
+        );
+      if (error instanceof VoteEligibilityError)
+        return json({ error: error.message, code: "ineligible_post" }, 400);
+      return json(
+        {
+          error:
+            "Connected participation is temporarily unavailable. Try again.",
+        },
+        503,
+      );
+    }
+  };
+}
+export const handleConnectedRequest = createConnectedRequestHandler({
+  config: feedbax,
+  environment: env,
+  getStore: getConnectedStore,
+  getFeedback: createConfiguredFeedbackModule,
+});
+
+async function noStore(response: Promise<Response>) {
+  const result = await response;
+  result.headers.set("Cache-Control", "no-store");
+  return result;
+}

package/template/src/connected-social.test.tsx

@@ -0,0 +1,158 @@
+// @vitest-environment jsdom
+import { afterEach, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectedIdentityProvider } from "./components/connected-identity-provider";
+import { FollowPostButton } from "./components/follow-post-button";
+import { NotificationInbox } from "./components/notification-inbox";
+import { ImageAttachments } from "./components/image-attachments";
+import type { ImageAttachment } from "@feedbax/feedback";
+vi.mock("./feedbax", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./feedbax")>();
+  return {
+    default: {
+      ...actual.default,
+      connected: {
+        issuer: "https://app.example",
+        loginUrl: "https://app.example/login",
+        images: true,
+      },
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+it("follows a Post and manages private read and email preferences from the inbox", async () => {
+  let following = false,
+    read = false,
+    email = false;
+  vi.stubGlobal(
+    "fetch",
+    vi.fn<typeof fetch>().mockImplementation(async (input, init) => {
+      const path = String(input);
+      const body = init?.body ? JSON.parse(String(init.body)) : undefined;
+      if (path === "/internal/identity/session")
+        return Response.json({ participant: { displayName: "Alice" } });
+      if (path.includes("/follow")) {
+        if (body) following = body.following;
+        return Response.json({ following });
+      }
+      if (path.includes("/preferences")) {
+        if (body) email = body.emailEnabled;
+        return Response.json({ emailAvailable: true, emailEnabled: email });
+      }
+      if (body) {
+        read = true;
+        return Response.json({ updated: true });
+      }
+      return Response.json({
+        unreadCount: read ? 0 : 1,
+        items: [
+          {
+            id: "a".repeat(32),
+            slug: "post",
+            kind: "status",
+            title: "Image uploads",
+            message: "Status changed to Shipped.",
+            createdAt: Date.now(),
+            read,
+          },
+        ],
+      });
+    }),
+  );
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  render(
+    <QueryClientProvider client={client}>
+      <ConnectedIdentityProvider>
+        <FollowPostButton slug="post" />
+        <NotificationInbox />
+      </ConnectedIdentityProvider>
+    </QueryClientProvider>,
+  );
+  const follow = await screen.findByRole("button", { name: "Follow updates" });
+  await waitFor(() => expect(follow.hasAttribute("disabled")).toBe(false));
+  fireEvent.click(follow);
+  await screen.findByRole("button", { name: "Following" });
+  expect(following).toBe(true);
+  fireEvent.click(
+    await screen.findByRole("button", { name: "Notifications, 1 unread" }),
+  );
+  await screen.findByText("Status changed to Shipped.");
+  fireEvent.click(screen.getByRole("button", { name: "Mark all read" }));
+  await screen.findByText("0 unread");
+  const toggle = await screen.findByRole("switch", {
+    name: "Email notifications",
+  });
+  fireEvent.click(toggle);
+  await waitFor(() => expect(email).toBe(true));
+  client.clear();
+});
+it("uploads and removes image previews without submitting the surrounding form", async () => {
+  let submitted = false;
+  const calls: string[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn<typeof fetch>().mockImplementation(async (input, init) => {
+      if (String(input).includes("identity/session"))
+        return Response.json({ participant: { displayName: "Alice" } });
+      calls.push(init?.method ?? "GET");
+      return Response.json(
+        init?.method === "DELETE"
+          ? { removed: true }
+          : {
+              id: "11111111-2222-3333-4444-555555555555",
+              src: "/internal/images/example",
+              contentType: "image/png",
+              bytes: 68,
+            },
+      );
+    }),
+  );
+  function Composer() {
+    const [images, setImages] = useState<ImageAttachment[]>([]);
+    return (
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          submitted = true;
+        }}
+      >
+        <ImageAttachments value={images} onChange={setImages} />
+      </form>
+    );
+  }
+  render(
+    <ConnectedIdentityProvider>
+      <Composer />
+    </ConnectedIdentityProvider>,
+  );
+  const input = await screen.findByLabelText("Choose image attachments");
+  fireEvent.change(input, {
+    target: {
+      files: [
+        new File([new Uint8Array([137, 80, 78, 71])], "sample.png", {
+          type: "image/png",
+        }),
+      ],
+    },
+  });
+  await screen.findByAltText("Attached image 1");
+  fireEvent.click(screen.getByRole("button", { name: "Remove image 1" }));
+  await waitFor(() =>
+    expect(screen.queryByAltText("Attached image 1")).toBeNull(),
+  );
+  expect(calls).toEqual(["POST", "DELETE"]);
+  expect(submitted).toBe(false);
+});

package/template/src/create-post-overlay.tsx

@@ -0,0 +1,82 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@feedbax/ui/components/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@feedbax/ui/components/drawer";
+import { useRouter, useRouterState } from "@tanstack/react-router";
+import type { PortalFeedbackMutations } from "./portal-feedback-form";
+import { PostCreationFlow } from "./post-creation-flow";
+import { useMediaQuery } from "./use-media-query";
+
+const mobileMediaQuery = "(max-width: 720px)";
+
+declare module "@tanstack/react-router" {
+  interface HistoryState {
+    createPostOverlay?: boolean;
+  }
+}
+
+export function CreatePostOverlay({
+  mutations,
+}: {
+  mutations: PortalFeedbackMutations;
+}) {
+  const router = useRouter();
+  const overlayRequested = useRouterState({
+    select: (state) => state.location.state.createPostOverlay,
+  });
+  const mobile = useMediaQuery(mobileMediaQuery);
+  const open = overlayRequested === true;
+  const close = (nextOpen: boolean) => {
+    if (!nextOpen) router.history.back();
+  };
+
+  if (!open) return null;
+
+  if (mobile) {
+    return (
+      <Drawer open onOpenChange={close}>
+        <DrawerContent className="create-post-drawer">
+          <DrawerHeader className="sr-only">
+            <DrawerTitle>Create a Post</DrawerTitle>
+            <DrawerDescription>
+              Share a feature request, bug report, or product observation.
+            </DrawerDescription>
+          </DrawerHeader>
+          <PostCreationFlow
+            display="overlay"
+            onCancel={() => close(false)}
+            mutations={mutations}
+          />
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={close}>
+      <DialogContent className="create-post-dialog">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Create a Post</DialogTitle>
+          <DialogDescription>
+            Share a feature request, bug report, or product observation.
+          </DialogDescription>
+        </DialogHeader>
+        <PostCreationFlow
+          display="overlay"
+          onCancel={() => close(false)}
+          mutations={mutations}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/template/src/draft-post-list.tsx

@@ -0,0 +1,39 @@
+import type { PublicPostQuery } from "@feedbax/feedback";
+import { useQuery } from "@tanstack/react-query";
+import { readCapabilities } from "./browser-post-state";
+import { authorizedDraftPostsQuery } from "./authorized-draft-query";
+
+const fetchAuthorizedDraft = async (
+  input: Parameters<
+    typeof import("./portal-feedback-server-function").getPortalDraftPost
+  >[0],
+) => {
+  const { getPortalDraftPost } =
+    await import("./portal-feedback-server-function");
+  return getPortalDraftPost(input);
+};
+
+export function useAuthorizedDraftPosts(search: PublicPostQuery) {
+  const browser = typeof window !== "undefined";
+  const capabilities = browser ? readCapabilities(window.localStorage) : {};
+  const draftQuery = useQuery({
+    ...authorizedDraftPostsQuery(
+      capabilities,
+      fetchAuthorizedDraft,
+      browser ? window.localStorage : undefined,
+    ),
+    enabled: browser && Object.keys(capabilities).length > 0,
+  });
+  const drafts = draftQuery.data ?? [];
+  const searchQuery = search.search?.toLocaleLowerCase();
+  const visible = drafts.filter(
+    (post) =>
+      (!searchQuery ||
+        `${post.title}\n${post.description}`
+          .toLocaleLowerCase()
+          .includes(searchQuery)) &&
+      (!search.types?.length || search.types.includes(post.type)) &&
+      (!search.statuses?.length || search.statuses.includes(post.status)),
+  );
+  return visible;
+}