create-feedbax 0.1.0 → 0.2.0

package/template/src/routeTree.gen.ts

@@ -0,0 +1,131 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as ChangelogRouteImport } from './routes/changelog'
+import { Route as RoadmapRouteImport } from './routes/roadmap'
+import { Route as SubmitRouteImport } from './routes/submit'
+import { Route as PSlugRouteImport } from './routes/p.$slug'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ChangelogRoute = ChangelogRouteImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const RoadmapRoute = RoadmapRouteImport.update({
+  id: '/roadmap',
+  path: '/roadmap',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const SubmitRoute = SubmitRouteImport.update({
+  id: '/submit',
+  path: '/submit',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PSlugRoute = PSlugRouteImport.update({
+  id: '/p/$slug',
+  path: '/p/$slug',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  id: '__root__' | '/' | '/changelog' | '/roadmap' | '/submit' | '/p/$slug'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ChangelogRoute: typeof ChangelogRoute
+  RoadmapRoute: typeof RoadmapRoute
+  SubmitRoute: typeof SubmitRoute
+  PSlugRoute: typeof PSlugRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/changelog': {
+      id: '/changelog'
+      path: '/changelog'
+      fullPath: '/changelog'
+      preLoaderRoute: typeof ChangelogRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/roadmap': {
+      id: '/roadmap'
+      path: '/roadmap'
+      fullPath: '/roadmap'
+      preLoaderRoute: typeof RoadmapRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/submit': {
+      id: '/submit'
+      path: '/submit'
+      fullPath: '/submit'
+      preLoaderRoute: typeof SubmitRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/p/$slug': {
+      id: '/p/$slug'
+      path: '/p/$slug'
+      fullPath: '/p/$slug'
+      preLoaderRoute: typeof PSlugRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ChangelogRoute: ChangelogRoute,
+  RoadmapRoute: RoadmapRoute,
+  SubmitRoute: SubmitRoute,
+  PSlugRoute: PSlugRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/template/src/routed-post-creation-form.tsx

@@ -0,0 +1,28 @@
+import {
+  editPortalFeedbackDraft,
+  submitPortalPost,
+  withdrawPortalFeedbackDraft,
+} from "./portal-feedback-server-function";
+import { PostCreationFlow } from "./post-creation-flow";
+
+export const portalFeedbackMutations = {
+  submitPost: submitPortalPost,
+  editDraftPost: editPortalFeedbackDraft,
+  withdrawDraftPost: withdrawPortalFeedbackDraft,
+};
+
+export function RoutedPostCreationForm({
+  display = "page",
+  onCancel,
+}: {
+  display?: "page" | "overlay";
+  onCancel?: () => void;
+}) {
+  return (
+    <PostCreationFlow
+      display={display}
+      onCancel={onCancel}
+      mutations={portalFeedbackMutations}
+    />
+  );
+}

package/template/src/router.tsx

@@ -0,0 +1,25 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+import { QueryClient } from "@tanstack/react-query";
+
+import Loader from "./components/loader";
+import { routeTree } from "./routeTree.gen";
+
+export const getRouter = () => {
+  const queryClient = new QueryClient();
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+    context: { queryClient },
+    defaultPendingComponent: () => <Loader />,
+    defaultNotFoundComponent: () => <div>Not Found</div>,
+  });
+
+  return router;
+};
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/template/src/routes/__root.tsx

@@ -0,0 +1,116 @@
+import { Toaster } from "@feedbax/ui/components/sonner";
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRouteWithContext,
+  useRouterState,
+} from "@tanstack/react-router";
+import { lazy, Suspense } from "react";
+import { ThemeProvider } from "next-themes";
+import { QueryClientProvider } from "@tanstack/react-query";
+
+import Header from "../components/header";
+import { DeviceProfileProvider } from "../components/device-profile-provider";
+import {
+  CommandPaletteProvider,
+  useCommandPalette,
+} from "../components/command-palette-context";
+import feedbax from "../feedbax";
+import { createPortalHead } from "../portal-head";
+
+import appCss from "../index.css?url";
+
+const RouterDevtools = import.meta.env.DEV
+  ? lazy(() =>
+      import("@tanstack/react-router-devtools").then((module) => ({
+        default: module.TanStackRouterDevtools,
+      })),
+    )
+  : null;
+
+const CommandPalette = lazy(() =>
+  import("../components/command-palette").then((module) => ({
+    default: module.CommandPalette,
+  })),
+);
+const CreatePostOverlay = lazy(() =>
+  import("../lazy-create-post-overlay").then((module) => ({
+    default: module.LazyCreatePostOverlay,
+  })),
+);
+const PostDetailOverlay = lazy(() =>
+  import("../lazy-post-detail-overlay").then((module) => ({
+    default: module.LazyPostDetailOverlay,
+  })),
+);
+
+export type RouterAppContext = {
+  queryClient: import("@tanstack/react-query").QueryClient;
+};
+
+export const Route = createRootRouteWithContext<RouterAppContext>()({
+  head: () => createPortalHead(feedbax.product, appCss),
+
+  component: RootDocument,
+});
+
+function OptionalPortalSurfaces() {
+  const { open: commandPaletteOpen } = useCommandPalette();
+  const overlayState = useRouterState({
+    select: (state) => state.location.state,
+  });
+
+  return (
+    <Suspense fallback={null}>
+      {overlayState.createPostOverlay ? <CreatePostOverlay /> : null}
+      {overlayState.postDetailOverlay ? <PostDetailOverlay /> : null}
+      {commandPaletteOpen ? (
+        <CommandPalette
+          searchPosts={async (term) => {
+            const { getPublicPostPage } =
+              await import("../public-feedback-server-function");
+            return getPublicPostPage({
+              data: { search: term || undefined },
+            });
+          }}
+        />
+      ) : null}
+    </Suspense>
+  );
+}
+
+function RootDocument() {
+  const { queryClient } = Route.useRouteContext();
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <DeviceProfileProvider>
+              <CommandPaletteProvider>
+                <div className="portal-shell">
+                  <Header />
+                  <div id="main-content" tabIndex={-1}>
+                    <Outlet />
+                  </div>
+                  <OptionalPortalSurfaces />
+                </div>
+              </CommandPaletteProvider>
+            </DeviceProfileProvider>
+          </ThemeProvider>
+        </QueryClientProvider>
+        <Toaster richColors />
+        {RouterDevtools ? (
+          <Suspense fallback={null}>
+            <RouterDevtools position="bottom-left" />
+          </Suspense>
+        ) : null}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/src/routes/changelog.tsx

@@ -0,0 +1,39 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import type { PortalFeatures } from "@feedbax/config";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { ChangelogPage } from "../changelog-page";
+import { changelogQuery } from "../changelog-query";
+import feedbax from "../feedbax";
+import { getPublicChangelogPage } from "../public-changelog-server-function";
+import { createRouteHead } from "../portal-head";
+
+export function ensureChangelogEnabled(features: PortalFeatures) {
+  if (!features.changelog) throw notFound();
+}
+
+const query = changelogQuery(getPublicChangelogPage);
+
+export const Route = createFileRoute("/changelog")({
+  head: () =>
+    createRouteHead(feedbax.product, {
+      title: "Changelog",
+      description: `Product updates from ${feedbax.product.name}.`,
+      path: "/changelog",
+    }),
+  beforeLoad: () => {
+    ensureChangelogEnabled(feedbax.features);
+  },
+  loader: ({ context }) => context.queryClient.ensureQueryData(query),
+  component: ChangelogRoute,
+});
+
+function ChangelogRoute() {
+  const initialPage = useSuspenseQuery(query).data;
+  return (
+    <ChangelogPage
+      initialPage={initialPage}
+      loadPage={(data) => getPublicChangelogPage({ data })}
+    />
+  );
+}

package/template/src/routes/index.tsx

@@ -0,0 +1,61 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import {
+  PublicPostFeedSkeleton,
+  PublicPostIndex,
+} from "../public-feedback-index";
+import { PublicPortalError } from "../public-portal-error";
+import { publicPostSearch } from "../public-feedback-page";
+import { publicPostsQuery, type FetchPublicPostsPage } from "../post-queries";
+import { getPublicPostPage } from "../public-feedback-server-function";
+import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
+import { useTransition } from "react";
+import feedbax from "../feedbax";
+import { createRouteHead } from "../portal-head";
+
+const fetchPublicPostsPage: FetchPublicPostsPage = (search) =>
+  getPublicPostPage({ data: search });
+
+export const Route = createFileRoute("/")({
+  head: () => createRouteHead(feedbax.product, { path: "/" }),
+  validateSearch: publicPostSearch,
+  loaderDeps: ({ search }) => search,
+  loader: ({ deps, context }) =>
+    context.queryClient.ensureInfiniteQueryData(
+      publicPostsQuery(deps, fetchPublicPostsPage),
+    ),
+  component: HomeComponent,
+  pendingComponent: PublicPostFeedSkeleton,
+  errorComponent: PublicPortalError,
+});
+
+function HomeComponent() {
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const [pending, startTransition] = useTransition();
+  const query = useSuspenseInfiniteQuery(
+    publicPostsQuery(search, fetchPublicPostsPage),
+  );
+  const pages = query.data.pages;
+  const page = {
+    items: pages.flatMap((page) => page.items),
+    nextCursor: pages.at(-1)?.nextCursor,
+  };
+
+  return (
+    <PublicPostIndex
+      page={page}
+      search={search}
+      pending={pending}
+      loadMore={() => query.fetchNextPage()}
+      loadingMore={query.isFetchingNextPage}
+      loadMoreError={query.isFetchNextPageError}
+      onSearchChange={(nextSearch) =>
+        startTransition(() => {
+          void navigate({ search: nextSearch, replace: false });
+        })
+      }
+      maskPostLinks
+    />
+  );
+}

package/template/src/routes/p.$slug.tsx

@@ -0,0 +1,16 @@
+import { createPublicPostRoute } from "../public-post-route";
+import { PublicPortalError } from "../public-portal-error";
+import {
+  getPublicPost,
+  getPublicPostComments,
+} from "../public-post-server-function";
+import { AuthorizedDraftPost } from "../authorized-draft-post";
+
+export const Route = createPublicPostRoute({
+  loadPost: (slug) => getPublicPost({ data: { slug } }),
+  loadComments: (slug, cursor) =>
+    getPublicPostComments({ data: { slug, cursor } }),
+  renderUnavailable: (slug) => <AuthorizedDraftPost slug={slug} />,
+}).update({
+  errorComponent: PublicPortalError,
+});

package/template/src/routes/roadmap.tsx

@@ -0,0 +1,11 @@
+import { createPublicRoadmapRoute } from "../public-roadmap-route";
+import {
+  getPublicRoadmapPage,
+  getPublicRoadmapStatusPage,
+} from "../public-roadmap-server-function";
+
+export const Route = createPublicRoadmapRoute({
+  fetchRoadmap: () => getPublicRoadmapPage(),
+  fetchRoadmapStatusPage: (query) =>
+    getPublicRoadmapStatusPage({ data: query }),
+});

package/template/src/routes/submit.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { RoutedPostCreationForm } from "../routed-post-creation-form";
+import { PublicPortalError } from "../public-portal-error";
+import { PostCreationSkeleton } from "../post-creation-flow";
+import feedbax from "../feedbax";
+import { createRouteHead } from "../portal-head";
+
+export const Route = createFileRoute("/submit")({
+  head: () =>
+    createRouteHead(feedbax.product, {
+      title: "Share feedback",
+      description: `Share feedback with ${feedbax.product.name}.`,
+      path: "/submit",
+      noIndex: true,
+    }),
+  component: SubmitComponent,
+  pendingComponent: PostCreationSkeleton,
+  errorComponent: PublicPortalError,
+});
+
+function SubmitComponent() {
+  return (
+    <main className="feedback-index submission-page">
+      <RoutedPostCreationForm />
+    </main>
+  );
+}

package/template/src/safe-public-failure.ts

@@ -0,0 +1,45 @@
+import {
+  BrowserCapabilityAuthorizationError,
+  VoteEligibilityError,
+} from "@feedbax/feedback";
+
+export async function runSafePublicRead<Value>(
+  operation: () => Promise<Value>,
+): Promise<Value> {
+  try {
+    return await operation();
+  } catch {
+    throw new Error("Public feedback is temporarily unavailable.");
+  }
+}
+
+export class ActionablePortalFailure extends Error {
+  constructor(
+    message: string,
+    readonly code?: string,
+  ) {
+    super(message);
+    this.name = "ActionablePortalFailure";
+  }
+}
+
+export async function runSafePortalMutation<Value>(
+  operation: () => Promise<Value>,
+): Promise<Value> {
+  try {
+    return await operation();
+  } catch (error) {
+    if (
+      error instanceof ActionablePortalFailure ||
+      error instanceof BrowserCapabilityAuthorizationError ||
+      error instanceof VoteEligibilityError
+    ) {
+      throw error;
+    }
+    throwSafePortalMutationFailure();
+  }
+}
+
+function throwSafePortalMutationFailure(): never {
+  throw new Error("Public feedback mutation is temporarily unavailable.");
+}

package/template/src/server.ts

@@ -0,0 +1,111 @@
+import { configuredTurnstileSecret } from "./turnstile-configuration";
+import { createPortalServerEntry } from "./portal-server-entry";
+import { createConfiguredTrustedFeedbackHandler } from "./trusted-feedback-runtime";
+import { env } from "cloudflare:workers";
+import { createConfiguredFeedbackModule } from "./feedback-runtime";
+import { createPortalVoteHandler } from "./portal-voting";
+import { createCloudflareTurnstileVerifier } from "./cloudflare-turnstile";
+import feedbax from "./feedbax";
+import { ActionablePortalFailure } from "./safe-public-failure";
+import { VoteEligibilityError } from "@feedbax/feedback";
+import {
+  createPortalCommentMutationRequestHandler,
+  createPortalCommentRequestHandler,
+} from "./portal-comments";
+
+export default createPortalServerEntry({
+  commentHandler: (request) => {
+    const turnstileSecret = configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY);
+    return createPortalCommentRequestHandler({
+      feedback: createConfiguredFeedbackModule(),
+      commentsEnabled: feedbax.features.comments,
+      rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+      rateLimitKey:
+        request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+      ...(turnstileSecret
+        ? {
+            turnstileVerifier: createCloudflareTurnstileVerifier({
+              secretKey: turnstileSecret,
+            }),
+            participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+          }
+        : {}),
+      participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+    })(request);
+  },
+  commentMutationHandler: (request) =>
+    createPortalCommentMutationRequestHandler({
+      feedback: createConfiguredFeedbackModule(),
+      commentsEnabled: feedbax.features.comments,
+      rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+      rateLimitKey:
+        request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+      ...(configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY)
+        ? {
+            turnstileVerifier: createCloudflareTurnstileVerifier({
+              secretKey: configuredTurnstileSecret(env.TURNSTILE_SECRET_KEY)!,
+            }),
+          }
+        : {}),
+      participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+    })(request),
+  voteHandler: async (request) => {
+    try {
+      const turnstileSecret = configuredTurnstileSecret(
+        env.TURNSTILE_SECRET_KEY,
+      );
+      const result = await createPortalVoteHandler({
+        feedback: createConfiguredFeedbackModule(),
+        votingEnabled: feedbax.features.voting,
+        rateLimiter: env.PORTAL_SUBMISSIONS_RATE_LIMITER,
+        rateLimitKey:
+          request.headers.get("CF-Connecting-IP") ?? "unknown-participant-ip",
+        ...(turnstileSecret
+          ? {
+              turnstileVerifier: createCloudflareTurnstileVerifier({
+                secretKey: turnstileSecret,
+              }),
+              participationSigningSecret: env.PARTICIPATION_SIGNING_SECRET,
+            }
+          : {}),
+      })(await request.json());
+      return Response.json(result);
+    } catch (error) {
+      const actionable =
+        error instanceof ActionablePortalFailure ||
+        error instanceof VoteEligibilityError;
+      return Response.json(
+        {
+          error: actionable
+            ? error.message
+            : "Public feedback mutation is temporarily unavailable.",
+          code:
+            error instanceof ActionablePortalFailure
+              ? (error.code ?? "action_failed")
+              : error instanceof VoteEligibilityError
+                ? "ineligible_post"
+                : "temporarily_unavailable",
+        },
+        {
+          status:
+            error instanceof ActionablePortalFailure &&
+            error.code === "rate_limited"
+              ? 429
+              : actionable
+                ? 400
+                : 503,
+        },
+      );
+    }
+  },
+  trustedFeedbackHandler: async (request) => {
+    try {
+      return await createConfiguredTrustedFeedbackHandler()(request);
+    } catch {
+      return Response.json(
+        { error: "Trusted submission is unavailable." },
+        { status: 503 },
+      );
+    }
+  },
+});

package/template/src/similar-posts.tsx

@@ -0,0 +1,45 @@
+import type { PublicPostPage } from "@feedbax/feedback";
+import { useEffect, useRef, useState } from "react";
+
+import { getPublicPostPage } from "./public-feedback-server-function";
+
+export const similarPostMinimumTitleLength = 4;
+
+export function SimilarPosts({ title }: { title: string }) {
+  const [posts, setPosts] = useState<PublicPostPage["items"]>([]);
+  const requestSequence = useRef(0);
+
+  useEffect(() => {
+    const query = title.trim();
+    const sequence = ++requestSequence.current;
+    if (query.length < similarPostMinimumTitleLength) {
+      setPosts([]);
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      void getPublicPostPage({ data: { search: query, sort: "top" } })
+        .then((page) => {
+          if (sequence === requestSequence.current)
+            setPosts(page.items.slice(0, 3));
+        })
+        .catch(() => {
+          if (sequence === requestSequence.current) setPosts([]);
+        });
+    }, 300);
+    return () => window.clearTimeout(timeout);
+  }, [title]);
+
+  if (!posts.length) return null;
+  return (
+    <aside aria-label="Potentially related Posts">
+      <p className="feedback-eyebrow">Potentially related</p>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.slug}>
+            <a href={`/p/${encodeURIComponent(post.slug)}`}>{post.title}</a>
+          </li>
+        ))}
+      </ul>
+    </aside>
+  );
+}