create-feedbax 0.1.0 → 0.2.1

package/template/src/routeTree.gen.ts

@@ -0,0 +1,177 @@
+/* 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 EmailPreferencesRouteImport } from './routes/email-preferences'
+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 EmailPreferencesRoute = EmailPreferencesRouteImport.update({
+  id: '/email-preferences',
+  path: '/email-preferences',
+  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
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/changelog': typeof ChangelogRoute
+  '/email-preferences': typeof EmailPreferencesRoute
+  '/roadmap': typeof RoadmapRoute
+  '/submit': typeof SubmitRoute
+  '/p/$slug': typeof PSlugRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
+  id:
+    | '__root__'
+    | '/'
+    | '/changelog'
+    | '/email-preferences'
+    | '/roadmap'
+    | '/submit'
+    | '/p/$slug'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ChangelogRoute: typeof ChangelogRoute
+  EmailPreferencesRoute: typeof EmailPreferencesRoute
+  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
+    }
+    '/email-preferences': {
+      id: '/email-preferences'
+      path: '/email-preferences'
+      fullPath: '/email-preferences'
+      preLoaderRoute: typeof EmailPreferencesRouteImport
+      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,
+  EmailPreferencesRoute: EmailPreferencesRoute,
+  RoadmapRoute: RoadmapRoute,
+  SubmitRoute: SubmitRoute,
+  PSlugRoute: PSlugRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

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,27 @@
+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 },
+    defaultPendingMs: 250,
+    defaultPendingMinMs: 200,
+    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,114 @@
+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 { PortalFooter } from "../components/portal-footer";
+import { LazyPostDetailOverlay as PostDetailOverlay } from "../lazy-post-detail-overlay";
+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,
+  })),
+);
+
+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>
+                  <PortalFooter />
+                  <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/email-preferences.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { useState } from "react";
+import { Button } from "@feedbax/ui/components/button";
+import feedbax from "../feedbax";
+export const Route = createFileRoute("/email-preferences")({
+  validateSearch: (search: Record<string, unknown>) => ({
+    token: typeof search.token === "string" ? search.token : "",
+  }),
+  beforeLoad: () => {
+    if (!feedbax.connected?.email) throw notFound();
+  },
+  head: () => ({
+    meta: [
+      { name: "robots", content: "noindex,nofollow" },
+      { name: "referrer", content: "no-referrer" },
+    ],
+  }),
+  component: EmailPreferencesPage,
+});
+function EmailPreferencesPage() {
+  const { token } = Route.useSearch();
+  const [pending, setPending] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string>();
+  async function unsubscribe() {
+    setPending(true);
+    setError(undefined);
+    try {
+      const response = await fetch(
+        `/internal/connected/unsubscribe?token=${encodeURIComponent(token)}`,
+        { method: "POST" },
+      );
+      if (!response.ok)
+        throw new Error(
+          "This link could not be used. Try again or change email preferences in your notification inbox.",
+        );
+      setDone(true);
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : "Couldn’t update email preferences.",
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  return (
+    <main className="mx-auto max-w-lg space-y-5 px-6 py-16">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        {done ? "Email notifications are off" : "Stop email notifications"}
+      </h1>
+      <p className="text-sm leading-relaxed text-muted-foreground">
+        {done
+          ? "You can turn them on again in your notification inbox."
+          : "You will keep receiving updates inside Feedbax."}
+      </p>
+      {done ? (
+        <Button nativeButton={false} render={<a href="/" />} variant="outline">
+          Back to feedback
+        </Button>
+      ) : (
+        <Button
+          onClick={unsubscribe}
+          disabled={pending || !/^[a-f0-9]{32}\.[A-Za-z0-9_-]{43}$/.test(token)}
+        >
+          {pending ? "Updating…" : "Stop email notifications"}
+        </Button>
+      )}
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </main>
+  );
+}

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">
+      <RoutedPostCreationForm />
+    </main>
+  );
+}

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

@@ -0,0 +1,47 @@
+import {
+  BrowserCapabilityAuthorizationError,
+  VoteEligibilityError,
+  ImageAttachmentError,
+} 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 ||
+      error instanceof ImageAttachmentError
+    ) {
+      throw error;
+    }
+    throwSafePortalMutationFailure();
+  }
+}
+
+function throwSafePortalMutationFailure(): never {
+  throw new Error("Public feedback mutation is temporarily unavailable.");
+}