create-feedbax 0.1.0 → 0.2.1

package/template/src/post-feed-controls.test.tsx

@@ -0,0 +1,239 @@
+// @vitest-environment jsdom
+
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  BoardNavigation,
+  MobilePostFilters,
+  PostFeedControls,
+  StatusNavigation,
+} from "./post-feed-controls";
+import {
+  CommandPalette,
+  CommandPaletteProvider,
+} from "./components/command-palette";
+import type { PublicPostQuery } from "@feedbax/feedback";
+
+beforeEach(() => {
+  window.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+  window.HTMLElement.prototype.scrollIntoView = function () {};
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("Post feed controls", () => {
+  it("opens the mobile filters sheet with every Board and Post Status", async () => {
+    render(<MobileFiltersHarness />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Filters" }));
+
+    const sheet = await screen.findByRole("dialog", {
+      name: "Filter Posts",
+    });
+    expect(
+      screen.getByRole("navigation", { name: "Mobile Boards" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("group", { name: "Mobile Status filters" }),
+    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: "All posts" })).toBeTruthy();
+    for (const status of [
+      "New",
+      "Reviewing",
+      "Planned",
+      "In progress",
+      "Shipped",
+      "Closed",
+    ]) {
+      expect(screen.getByRole("button", { name: status })).toBeTruthy();
+    }
+    expect(sheet).toBeTruthy();
+  });
+
+  it("applies mobile Board and Post Status selections to route query state", async () => {
+    render(<MobileFiltersHarness />);
+    fireEvent.click(screen.getByRole("button", { name: "Filters" }));
+    await screen.findByRole("dialog", { name: "Filter Posts" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Feature requests" }));
+    fireEvent.click(screen.getByRole("button", { name: "New" }));
+    fireEvent.click(screen.getByRole("button", { name: "Closed" }));
+
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"types":["Feature Request"]',
+    );
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"statuses":["New","Closed"]',
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "New" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"statuses":["Closed"]',
+    );
+  });
+
+  it("switches sort from visible tabs immediately", () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByRole("button", { name: "New" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"sort":"new"',
+    );
+  });
+
+  it("exposes the mobile sort, create, search, and filter controls in tap order", async () => {
+    stubViewport(true);
+    render(<Harness />);
+
+    const controls = screen.getByRole("group", {
+      name: "Post feed controls",
+    });
+    await screen.findByRole("button", { name: "Filters" });
+    expect(
+      within(controls)
+        .getAllByRole("button")
+        .map((button) => button.textContent),
+    ).toEqual(["Top", "New", "New post", "Search", "Filters"]);
+  });
+
+  it("keeps the mobile Filters control out of the desktop breakpoint", () => {
+    stubViewport(false);
+    render(<Harness />);
+
+    expect(screen.queryByRole("button", { name: "Filters" })).toBeNull();
+  });
+
+  it("opens the command palette from the Search button", async () => {
+    render(<Harness withPalette />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Search" }));
+
+    expect(await screen.findByRole("dialog")).toBeTruthy();
+  });
+
+  it("selects one Board at a time and reselecting it returns to All posts", () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Feature requests" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"types":["Feature Request"]',
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Bug reports" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"types":["Bug Report"]',
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Bug reports" }));
+    expect(screen.getByTestId("route-state").textContent).not.toContain(
+      '"types"',
+    );
+    expect(
+      screen
+        .getByRole("button", { name: "All posts" })
+        .getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
+  it("combines and toggles roadmap Post Status filters", () => {
+    render(<Harness />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Planned" }));
+    fireEvent.click(screen.getByRole("button", { name: "Shipped" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"statuses":["Planned","Shipped"]',
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Planned" }));
+    expect(screen.getByTestId("route-state").textContent).toContain(
+      '"statuses":["Shipped"]',
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Shipped" }));
+    expect(screen.getByTestId("route-state").textContent).not.toContain(
+      '"statuses"',
+    );
+  });
+
+  it("announces route updates locally from the feed controls", () => {
+    render(<Harness pending />);
+
+    expect(
+      screen
+        .getByRole("group", { name: "Post feed controls" })
+        .getAttribute("aria-busy"),
+    ).toBe("true");
+    expect(screen.getByText("Updating Posts…").className).toBe("sr-only");
+  });
+});
+
+function MobileFiltersHarness() {
+  const [search, setSearch] = useState<PublicPostQuery>({ sort: "trending" });
+  return (
+    <>
+      <MobilePostFilters search={search} onSearchChange={setSearch} />
+      <output data-testid="route-state">{JSON.stringify(search)}</output>
+    </>
+  );
+}
+
+function stubViewport(mobile: boolean) {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: mobile && query === "(max-width: 1023px)",
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+}
+
+function Harness({
+  pending = false,
+  withPalette = false,
+}: {
+  pending?: boolean;
+  withPalette?: boolean;
+} = {}) {
+  const [search, setSearch] = useState<PublicPostQuery>({
+    sort: "trending",
+  });
+  return (
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <CommandPaletteProvider>
+        <PostFeedControls
+          search={search}
+          pending={pending}
+          onSearchChange={(next) => setSearch(next)}
+        />
+        <BoardNavigation search={search} onSearchChange={setSearch} />
+        <StatusNavigation search={search} onSearchChange={setSearch} />
+        {withPalette ? (
+          <CommandPalette
+            searchPosts={async () => ({ items: [], nextCursor: undefined })}
+          />
+        ) : null}
+      </CommandPaletteProvider>
+      <output data-testid="route-state">{JSON.stringify(search)}</output>
+    </QueryClientProvider>
+  );
+}

package/template/src/post-feed-controls.tsx

@@ -0,0 +1,298 @@
+import type { PostStatus, PostType, PublicPostQuery } from "@feedbax/feedback";
+import type { PortalFeatures } from "@feedbax/config";
+import { Button } from "@feedbax/ui/components/button";
+import { ButtonGroup } from "@feedbax/ui/components/button-group";
+import { Card } from "@feedbax/ui/components/card";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@feedbax/ui/components/sheet";
+import { List, ListFilter } from "lucide-react";
+import { type ComponentType } from "react";
+
+import { CommandPaletteTrigger } from "./components/command-palette-context";
+import { CreatePostTrigger } from "./components/create-post-trigger";
+import { postStatuses, postTypes } from "./public-feedback-page";
+import {
+  postStatusPresentation,
+  postTypePresentation,
+} from "./post-presentation";
+import { useMediaQuery } from "./use-media-query";
+import feedbax from "./feedbax";
+
+type SearchChange = (search: PublicPostQuery) => void;
+
+const boards = [
+  { label: "All posts", type: undefined, icon: List },
+  ...postTypes.map((type) => ({
+    label: postTypePresentation[type].boardLabel,
+    type,
+    icon: postTypePresentation[type].Icon,
+  })),
+] as const satisfies readonly {
+  label: string;
+  type: PostType | undefined;
+  icon: ComponentType<{ className?: string; "aria-hidden"?: boolean }>;
+}[];
+
+const roadmapStatuses = [
+  "Planned",
+  "In Progress",
+  "Shipped",
+] as const satisfies readonly PostStatus[];
+
+const sortOptions = [
+  { label: "Top", value: "top" },
+  { label: "New", value: "new" },
+] as const satisfies readonly {
+  label: string;
+  value: NonNullable<PublicPostQuery["sort"]>;
+}[];
+
+const mobileMediaQuery = "(max-width: 1023px)";
+
+export function PostFeedControls({
+  search,
+  onSearchChange,
+  pending = false,
+  contextualCreatePost = false,
+  features = feedbax.features,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  pending?: boolean;
+  contextualCreatePost?: boolean;
+  features?: PortalFeatures;
+}) {
+  const mobile = useMediaQuery(mobileMediaQuery);
+  const newPost = (
+    <CreatePostTrigger
+      className={
+        mobile
+          ? "order-2 h-12 w-full px-5 text-sm"
+          : "order-3 h-10 w-auto px-5 text-sm"
+      }
+      contextual={contextualCreatePost}
+    />
+  );
+
+  return (
+    <div
+      className="flex min-w-0 flex-1 flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"
+      role="group"
+      aria-label="Post feed controls"
+      aria-busy={pending || undefined}
+    >
+      {pending ? <span className="sr-only">Updating Posts…</span> : null}
+      <ButtonGroup
+        aria-label="Sort Posts"
+        className={
+          mobile
+            ? `order-1 grid h-12 w-full ${features.voting ? "grid-cols-2" : "grid-cols-1"}`
+            : `order-1 grid h-10 ${features.voting ? "w-48 grid-cols-2" : "w-24 grid-cols-1"}`
+        }
+      >
+        {sortOptions
+          .filter(({ value }) => features.voting || value === "new")
+          .map(({ label, value }) => (
+            <Button
+              key={value}
+              type="button"
+              variant="outline"
+              aria-pressed={
+                (search.sort ?? (features.voting ? "top" : "new")) === value
+              }
+              className={`${mobile ? "h-12" : "h-10"} px-5 text-sm aria-pressed:bg-muted aria-pressed:text-foreground`}
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  sort: value,
+                })
+              }
+            >
+              {label}
+            </Button>
+          ))}
+      </ButtonGroup>
+      {mobile ? (
+        <>
+          {newPost}
+          <div className="order-3 grid grid-cols-[minmax(0,1fr)_auto] gap-3">
+            <CommandPaletteTrigger className="h-12 w-full justify-start" />
+            <MobilePostFilters
+              search={search}
+              onSearchChange={onSearchChange}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <CommandPaletteTrigger className="order-2 ml-auto justify-center" />
+          {newPost}
+        </>
+      )}
+    </div>
+  );
+}
+
+export function BoardNavigation({
+  search,
+  onSearchChange,
+  headingId = "boards-heading",
+  ariaLabel,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  headingId?: string;
+  ariaLabel?: string;
+}) {
+  const activeType = search.types?.length === 1 ? search.types[0] : undefined;
+  const hasNoType = !search.types?.length;
+
+  return (
+    <nav
+      aria-labelledby={ariaLabel ? undefined : headingId}
+      aria-label={ariaLabel}
+    >
+      <h2 id={headingId} className="mb-3 text-sm font-medium">
+        Boards
+      </h2>
+      <Card className="gap-0 overflow-hidden py-0">
+        {boards.map(({ label, type, icon: Icon }) => {
+          const active = type ? activeType === type : hasNoType;
+          return (
+            <Button
+              key={label}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              className="h-12 w-full justify-start gap-3 border-b px-4 text-sm text-muted-foreground last:border-b-0 aria-pressed:bg-muted aria-pressed:text-foreground"
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  types: !type || active ? undefined : [type],
+                })
+              }
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              {label}
+            </Button>
+          );
+        })}
+      </Card>
+    </nav>
+  );
+}
+
+export function StatusNavigation({
+  search,
+  onSearchChange,
+  headingId = "status-filters-heading",
+  ariaLabel = "Status filters",
+  statuses = roadmapStatuses,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+  headingId?: string;
+  ariaLabel?: string;
+  statuses?: readonly PostStatus[];
+}) {
+  const selected = search.statuses ?? [];
+
+  return (
+    <section aria-labelledby={headingId}>
+      <h2 id={headingId} className="mb-3 text-sm font-medium">
+        Status
+      </h2>
+      <Card
+        className="gap-0 overflow-hidden py-0"
+        role="group"
+        aria-label={ariaLabel}
+      >
+        {statuses.map((status) => {
+          const { Icon, label } = postStatusPresentation[status];
+          const active = selected.includes(status);
+          const nextStatuses = active
+            ? selected.filter((candidate) => candidate !== status)
+            : [...selected, status];
+          return (
+            <Button
+              key={status}
+              type="button"
+              variant="ghost"
+              aria-pressed={active}
+              className="h-12 w-full justify-start gap-3 border-b px-4 text-sm text-muted-foreground last:border-b-0 aria-pressed:bg-muted aria-pressed:text-foreground"
+              onClick={() =>
+                onSearchChange?.({
+                  ...search,
+                  cursor: undefined,
+                  statuses: nextStatuses.length ? nextStatuses : undefined,
+                })
+              }
+            >
+              <Icon className="size-4" aria-hidden="true" />
+              {label}
+            </Button>
+          );
+        })}
+      </Card>
+    </section>
+  );
+}
+
+export function MobilePostFilters({
+  search,
+  onSearchChange,
+}: {
+  search: PublicPostQuery;
+  onSearchChange?: SearchChange;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger
+        render={
+          <Button
+            className="h-12 gap-2 px-4 text-sm lg:hidden"
+            type="button"
+            variant="outline"
+          />
+        }
+      >
+        <ListFilter aria-hidden="true" />
+        Filters
+      </SheetTrigger>
+      <SheetContent
+        className="w-[min(100%,24rem)] overflow-y-auto lg:hidden"
+        side="right"
+      >
+        <SheetHeader className="border-b p-6 pr-14">
+          <SheetTitle className="text-lg">Filter Posts</SheetTitle>
+          <SheetDescription>
+            Choose a Board and combine any Post Statuses.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="space-y-8 p-6">
+          <BoardNavigation
+            search={search}
+            onSearchChange={onSearchChange}
+            headingId="mobile-boards-heading"
+            ariaLabel="Mobile Boards"
+          />
+          <StatusNavigation
+            search={search}
+            onSearchChange={onSearchChange}
+            headingId="mobile-status-filters-heading"
+            ariaLabel="Mobile Status filters"
+            statuses={postStatuses}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/template/src/post-presentation.ts

@@ -0,0 +1,37 @@
+import type { PostStatus, PostType } from "@feedbax/feedback";
+import {
+  Bug,
+  CalendarDays,
+  CheckCircle2,
+  Circle,
+  CircleDot,
+  Lightbulb,
+  MessageCircle,
+  Search,
+  XCircle,
+  type LucideIcon,
+} from "lucide-react";
+
+export const postTypePresentation = {
+  "Feature Request": {
+    Icon: Lightbulb,
+    boardLabel: "Feature requests",
+  },
+  "Bug Report": {
+    Icon: Bug,
+    boardLabel: "Bug reports",
+  },
+  "General Feedback": {
+    Icon: MessageCircle,
+    boardLabel: "General feedback",
+  },
+} satisfies Record<PostType, { Icon: LucideIcon; boardLabel: string }>;
+
+export const postStatusPresentation = {
+  New: { Icon: Circle, label: "New" },
+  Reviewing: { Icon: Search, label: "Reviewing" },
+  Planned: { Icon: CalendarDays, label: "Planned" },
+  "In Progress": { Icon: CircleDot, label: "In progress" },
+  Shipped: { Icon: CheckCircle2, label: "Shipped" },
+  Closed: { Icon: XCircle, label: "Closed" },
+} satisfies Record<PostStatus, { Icon: LucideIcon; label: string }>;