create-feedbax 0.1.0 → 0.2.0

package/template/src/components/ui/styles/globals.css

@@ -0,0 +1,151 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --status-planned: oklch(0.606 0.25 292.7);
+  --status-in-progress: oklch(0.623 0.214 259.8);
+  --status-shipped: oklch(0.723 0.219 149.6);
+  --changelog-new: oklch(0.55 0.17 255);
+  --changelog-improved: oklch(0.58 0.16 80);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.16 0.009 258);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0.011 258);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0.011 258);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.97 0 0);
+  --primary-foreground: oklch(0.205 0.011 258);
+  --secondary: oklch(0.269 0.011 258);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.011 258);
+  --muted-foreground: oklch(0.708 0.008 258);
+  --accent: oklch(0.269 0.011 258);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --status-planned: oklch(0.606 0.25 292.7);
+  --status-in-progress: oklch(0.623 0.214 259.8);
+  --status-shipped: oklch(0.723 0.219 149.6);
+  --changelog-new: oklch(0.72 0.15 255);
+  --changelog-improved: oklch(0.8 0.16 80);
+  --sidebar: oklch(0.205 0.011 258);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0.011 258);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-status-planned: var(--status-planned);
+  --color-status-in-progress: var(--status-in-progress);
+  --color-status-shipped: var(--status-shipped);
+  --color-changelog-new: var(--changelog-new);
+  --color-changelog-improved: var(--changelog-improved);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --font-heading: var(--font-sans);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+    color-scheme: light;
+  }
+  html.dark {
+    color-scheme: dark;
+  }
+}

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;
+}

package/template/src/feedback-cache-invalidation.test.ts

@@ -0,0 +1,185 @@
+import { createFeedbackModule } from "@feedbax/feedback";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  createInvalidatingFeedbackModule,
+  createPublicCacheInvalidator,
+} from "./feedback-cache-invalidation";
+
+describe("feedback cache invalidation", () => {
+  it("purges only feedback-list and changed-Post tags after a successful write", async () => {
+    const purge = vi.fn().mockResolvedValue({ success: true, errors: [] });
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: createFeedbackModule(),
+      invalidator: createPublicCacheInvalidator({ purge }),
+    });
+
+    const submitted = await feedback.submitPost({
+      title: "Keyboard navigation",
+      description: "Let participants navigate without a mouse.",
+      type: "Feature Request",
+    });
+
+    expect(purge).toHaveBeenCalledWith({
+      tags: ["feedbax-feedback", `feedbax-post-${submitted.slug}`],
+    });
+    expect(purge.mock.calls[0]?.[0].tags).not.toContain("feedbax-roadmap");
+  });
+
+  it("invalidates public feedback after a trusted submission", async () => {
+    const invalidatePost = vi.fn().mockResolvedValue(undefined);
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: createFeedbackModule(),
+      invalidator: { invalidatePost, invalidateVote: invalidatePost },
+    });
+
+    const submitted = await feedback.submitTrustedPost({
+      externalId: "product-a:feedback-123",
+      title: "Keyboard navigation",
+      description: "Let participants navigate without a mouse.",
+      type: "Feature Request",
+    });
+
+    expect(invalidatePost).toHaveBeenCalledExactlyOnceWith(submitted.slug);
+  });
+
+  it("invalidates feed, Post detail, and roadmap projections after a confirmed Vote", async () => {
+    const purge = vi.fn().mockResolvedValue({ success: true, errors: [] });
+    const now = new Date("2026-08-25T10:00:00.000Z");
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: createFeedbackModule({
+        initialItems: [
+          {
+            id: "post-id",
+            slug: "keyboard-navigation",
+            title: "Keyboard navigation",
+            description: "Navigate without a mouse.",
+            type: "Feature Request",
+            status: "Planned",
+            published: true,
+            voteCount: 2,
+            createdAt: now,
+            updatedAt: now,
+          },
+        ],
+      }),
+      invalidator: createPublicCacheInvalidator({ purge }),
+    });
+
+    await feedback.changeVote({
+      slug: "keyboard-navigation",
+      intention: "add",
+    });
+
+    expect(purge).toHaveBeenCalledWith({
+      tags: [
+        "feedbax-feedback",
+        "feedbax-post-keyboard-navigation",
+        "feedbax-roadmap",
+      ],
+    });
+  });
+
+  it("keeps a confirmed Vote successful when cache invalidation fails", async () => {
+    const now = new Date("2026-08-25T10:00:00.000Z");
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: createFeedbackModule({
+        initialItems: [
+          {
+            id: "post-id",
+            slug: "keyboard-navigation",
+            title: "Keyboard navigation",
+            description: "Navigate without a mouse.",
+            type: "Feature Request",
+            status: "Planned",
+            published: true,
+            voteCount: 2,
+            createdAt: now,
+            updatedAt: now,
+          },
+        ],
+      }),
+      invalidator: {
+        invalidatePost: vi.fn(),
+        invalidateVote: vi.fn().mockRejectedValue(new Error("purge failed")),
+      },
+    });
+
+    await expect(
+      feedback.changeVote({
+        slug: "keyboard-navigation",
+        intention: "add",
+      }),
+    ).resolves.toEqual({ slug: "keyboard-navigation", voteCount: 3 });
+  });
+
+  it("invalidates after edits and withdrawals without passing private write data", async () => {
+    const invalidatePost = vi.fn().mockResolvedValue(undefined);
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: createFeedbackModule(),
+      invalidator: { invalidatePost, invalidateVote: invalidatePost },
+    });
+    const submitted = await feedback.submitPost({
+      title: "Original title",
+      description: "Original description",
+      type: "General Feedback",
+      submitter: { email: "private@example.com" },
+    });
+    invalidatePost.mockClear();
+
+    await feedback.editDraftPost({
+      id: submitted.id,
+      browserCapability: submitted.browserCapability,
+      title: "Revised title",
+      description: "Revised description",
+      type: "Bug Report",
+    });
+    await feedback.withdrawDraftPost({
+      id: submitted.id,
+      browserCapability: submitted.browserCapability,
+    });
+
+    expect(invalidatePost.mock.calls).toEqual([
+      [submitted.slug],
+      [submitted.slug],
+    ]);
+  });
+
+  it("does not purge when a write fails", async () => {
+    const invalidatePost = vi.fn().mockResolvedValue(undefined);
+    const feedback = createInvalidatingFeedbackModule({
+      feedback: {
+        ...createFeedbackModule(),
+        submitPost: vi.fn().mockRejectedValue(new Error("write failed")),
+      },
+      invalidator: { invalidatePost, invalidateVote: invalidatePost },
+    });
+
+    await expect(
+      feedback.submitPost({
+        title: "Keyboard navigation",
+        description: "Let participants navigate without a mouse.",
+        type: "Feature Request",
+      }),
+    ).rejects.toThrow("write failed");
+    expect(invalidatePost).not.toHaveBeenCalled();
+  });
+
+  it("reports purge rejection without exposing Cloudflare details", async () => {
+    const invalidator = createPublicCacheInvalidator({
+      purge: vi.fn().mockResolvedValue({
+        success: false,
+        errors: [{ code: 1234, message: "private infrastructure detail" }],
+      }),
+    });
+
+    const invalidation = invalidator.invalidatePost("feedback-123");
+
+    await expect(invalidation).rejects.toThrow(
+      "Public feedback cache invalidation failed.",
+    );
+    await expect(invalidation).rejects.not.toThrow(
+      "private infrastructure detail",
+    );
+  });
+});

package/template/src/feedback-cache-invalidation.ts

@@ -0,0 +1,97 @@
+import type { FeedbackModule } from "@feedbax/feedback";
+
+import {
+  publicFeedbackCacheTag,
+  publicPostCacheTag,
+  publicRoadmapCacheTag,
+} from "./public-cache-tags";
+
+interface PublicCacheInvalidator {
+  invalidatePost(slug: string): Promise<void>;
+  invalidateVote(slug: string): Promise<void>;
+}
+
+interface CachePurgeResult {
+  success: boolean;
+  errors: Array<{ code: number; message: string }>;
+}
+
+type PurgePublicCache = (options: {
+  tags: string[];
+}) => Promise<CachePurgeResult>;
+
+export function createPublicCacheInvalidator({
+  purge,
+}: {
+  purge: PurgePublicCache;
+}): PublicCacheInvalidator {
+  async function purgePost(slug: string, tags: string[]) {
+    const result = await purge({
+      tags: [publicFeedbackCacheTag, publicPostCacheTag(slug), ...tags],
+    });
+    if (!result.success) {
+      throw new Error("Public feedback cache invalidation failed.");
+    }
+  }
+  return {
+    invalidatePost: (slug) => purgePost(slug, []),
+    invalidateVote: (slug) => purgePost(slug, [publicRoadmapCacheTag]),
+  };
+}
+
+export function createInvalidatingFeedbackModule({
+  feedback,
+  invalidator,
+}: {
+  feedback: FeedbackModule;
+  invalidator: PublicCacheInvalidator;
+}): FeedbackModule {
+  return {
+    editComment: (input) => feedback.editComment(input),
+    deleteComment: (input) => feedback.deleteComment(input),
+    async createComment(input) {
+      const comment = await feedback.createComment(input);
+      await invalidator.invalidatePost(input.slug).catch(() => undefined);
+      return comment;
+    },
+    async replyToCommentThread(input) {
+      const comment = await feedback.replyToCommentThread(input);
+      await invalidator.invalidatePost(input.slug).catch(() => undefined);
+      return comment;
+    },
+    async changeVote(input) {
+      const result = await feedback.changeVote(input);
+      await invalidator.invalidateVote(result.slug).catch(() => undefined);
+      return result;
+    },
+    submitPost: (input) =>
+      runInvalidatingWrite(() => feedback.submitPost(input), invalidator),
+    editDraftPost: (input) =>
+      runInvalidatingWrite(() => feedback.editDraftPost(input), invalidator),
+    getPublicPost: (slug) => feedback.getPublicPost(slug),
+    listCommentThreads: (input) => feedback.listCommentThreads(input),
+    getDraftPost: (input) => feedback.getDraftPost(input),
+    listPublicPosts: (query) => feedback.listPublicPosts(query),
+    listPublicRoadmapPosts: (query) => feedback.listPublicRoadmapPosts(query),
+    submitTrustedPost: (input) =>
+      runInvalidatingWrite(
+        () => feedback.submitTrustedPost(input),
+        invalidator,
+      ),
+    async withdrawDraftPost(input) {
+      const draft = await feedback.getDraftPost(input);
+      await feedback.withdrawDraftPost(input);
+      await invalidator.invalidatePost(draft.slug);
+    },
+    getPublicPostRoadmap: () => feedback.getPublicPostRoadmap(),
+  };
+}
+
+async function runInvalidatingWrite<Item extends { slug: string }>(
+  write: () => Promise<Item>,
+  invalidator: PublicCacheInvalidator,
+): Promise<Item> {
+  const item = await write();
+  await invalidator.invalidatePost(item.slug);
+  return item;
+}

package/template/src/feedback-runtime.ts

@@ -0,0 +1,38 @@
+import { createNotionFeedbackModule } from "@feedbax/feedback";
+import { cache } from "cloudflare:workers";
+
+import {
+  createInvalidatingFeedbackModule,
+  createPublicCacheInvalidator,
+} from "./feedback-cache-invalidation";
+import feedbax from "./feedbax";
+
+export const feedbackSubmissionLimits = {
+  maxTitleLength: feedbax.submissions.maxTitleLength,
+  maxDescriptionLength: feedbax.submissions.maxDescriptionLength,
+} as const;
+
+export function createConfiguredFeedbackModule() {
+  configuredFeedback ??= createInvalidatingFeedbackModule({
+    feedback: createNotionFeedbackModule({
+      votingEnabled: feedbax.features.voting,
+      commentsEnabled: feedbax.features.comments,
+      token: requiredEnvironmentValue("NOTION_TOKEN"),
+      dataSourceId: feedbax.notion.dataSourceId,
+      propertyIds: feedbax.notion.properties,
+    }),
+    invalidator: createPublicCacheInvalidator({
+      purge: (options) => cache.purge(options),
+    }),
+  });
+  return configuredFeedback;
+}
+
+let configuredFeedback:
+  ReturnType<typeof createInvalidatingFeedbackModule> | undefined;
+
+export function requiredEnvironmentValue(name: string): string {
+  const value = process.env[name];
+  if (!value) throw new Error("Feedback configuration is missing.");
+  return value;
+}