@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/communities/_tests/CommunityWiki.spec.tsx

@@ -0,0 +1,223 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { ForgeThemeProvider } from "../../../theme/ForgeThemeProvider";
+import { CommunityUpgradeOpenerProvider } from "../../../../contexts/CommunityContext";
+import { CommunityWiki } from "../CommunityWiki";
+import { CommunityPublicWiki } from "../CommunityPublicWiki";
+import { CommunityRichText } from "../../community/CommunityRichText";
+import {
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  wrapper,
+} from "../../../headless/_tests/communityHarness";
+
+/**
+ * The wiki's markup side: the list beside the open page, a locked page's tiers
+ * and upgrade (through the community's upgrade sheet), the table of contents
+ * linking to anchored headings, and the About page's public pages opening in
+ * place.
+ */
+
+afterEach(() => {
+  cleanup();
+  restoreAdapter();
+});
+
+const theme = { colors: { text: "#111111", background: "#ffffff", primary: "#6d28d9" }, cornerRadius: 8 };
+
+function mount(node: ReactNode, opts: Parameters<typeof wrapper>[0] = { user: account() }) {
+  const Wrapper = wrapper(opts);
+  return render(
+    <Wrapper>
+      <ForgeThemeProvider theme={theme}>{node}</ForgeThemeProvider>
+    </Wrapper>,
+  );
+}
+
+const text = (value: string) => ({ type: "text", version: 1, text: value });
+const doc = (...children: unknown[]) => ({ root: { type: "root", version: 1, children } });
+
+const PAGES = [
+  { id: "p1", slug: "start-here", title: "Start here", isPublic: false, locked: false, unlockTiers: [], updatedAt: "" },
+  {
+    id: "p2",
+    slug: "vip-lounge",
+    title: "VIP lounge",
+    isPublic: false,
+    locked: true,
+    unlockTiers: [
+      { id: "tier-gold", name: "Gold" },
+      { id: "tier-plat", name: "Platinum" },
+    ],
+    updatedAt: "",
+  },
+  {
+    id: "p3",
+    slug: "community-guidelines",
+    title: "Community guidelines",
+    isPublic: true,
+    locked: false,
+    unlockTiers: [],
+    updatedAt: "",
+  },
+];
+
+const startHere = get("/public/communities/fan-club/wiki/start-here", () => ({
+  id: "p1",
+  title: "Start here",
+  slug: "start-here",
+  isPublic: false,
+  updatedAt: "",
+  content: doc(
+    { type: "heading", version: 1, tag: "h2", children: [text("Welcome")] },
+    { type: "paragraph", version: 1, children: [text("Glad you are here.")] },
+    { type: "heading", version: 1, tag: "h2", children: [text("Next steps")] },
+    {
+      type: "list",
+      version: 1,
+      listType: "bullet",
+      children: [{ type: "listitem", version: 1, children: [text("Say hello")] }],
+    },
+    { type: "horizontalrule", version: 1 },
+    { type: "kb-image", version: 1, src: "https://cdn.example.com/a.png", altText: "A map" },
+    { type: "kb-image", version: 1, src: "kb-private:abc", altText: "secret" },
+  ),
+}));
+
+describe("CommunityWiki (the tab)", () => {
+  it("opens the first readable page with a table of contents linking to its headings", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES), startHere]);
+    const { container } = mount(<CommunityWiki getPageHref={(page) => `/wiki/${page}`} />);
+    const page = await screen.findByTestId("community-wiki-page");
+    expect(within(page).getByRole("heading", { level: 1 }).textContent).toBe("Start here");
+
+    const toc = screen.getByTestId("community-wiki-toc");
+    expect(
+      within(toc)
+        .getAllByRole("link")
+        .map((a) => a.getAttribute("href")),
+    ).toEqual(["#welcome", "#next-steps"]);
+    expect(container.querySelector("#welcome")?.textContent).toBe("Welcome");
+    expect(container.querySelector("#next-steps")?.textContent).toBe("Next steps");
+    expect(within(page).getByText("Say hello")).toBeTruthy();
+    expect(page.querySelector("hr")).toBeTruthy();
+    // A public image renders; a private Knowledge Base reference has no address on a site.
+    expect(
+      within(page)
+        .getAllByRole("img")
+        .map((img) => img.getAttribute("alt")),
+    ).toEqual(["A map"]);
+  });
+
+  it("lists a locked page with its tiers, and upgrades through the community's sheet", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES)]);
+    const opened: (string | null | undefined)[] = [];
+    mount(
+      <CommunityUpgradeOpenerProvider value={{ openUpgrade: (tierId) => opened.push(tierId) }}>
+        <CommunityWiki pageSlug="vip-lounge" getPageHref={(page) => `/wiki/${page}`} />
+      </CommunityUpgradeOpenerProvider>,
+    );
+    const locked = await screen.findByTestId("community-wiki-locked");
+    expect(locked.textContent).toContain("This page is part of Gold, Platinum.");
+    fireEvent.click(within(locked).getByTestId("community-wiki-upgrade"));
+    expect(opened).toEqual(["tier-gold"]);
+    // A locked page is never fetched: the server would only say not found.
+    expect(calls("get", "/public/communities/fan-club/wiki/vip-lounge")).toHaveLength(0);
+  });
+
+  it("navigates through the host's router from the list", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => PAGES), startHere]);
+    const went: string[] = [];
+    mount(<CommunityWiki navigate={(href) => went.push(href)} getPageHref={(page) => `/wiki/${page}`} />);
+    const items = await screen.findAllByTestId("community-wiki-item");
+    fireEvent.click(within(items[2]).getByRole("link"));
+    expect(went).toEqual(["/wiki/community-guidelines"]);
+  });
+
+  it("says so when a page is not available", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      get("/public/communities/fan-club/wiki/gone", () => {
+        throw { status: 404, message: "Not found" };
+      }),
+    ]);
+    mount(<CommunityWiki pageSlug="gone" getPageHref={(page) => `/wiki/${page}`} />);
+    expect(await screen.findByText("This page isn't available to you.")).toBeTruthy();
+  });
+});
+
+describe("private wiki images", () => {
+  const privatePage = get("/public/communities/fan-club/wiki/start-here", () => ({
+    id: "p1",
+    title: "Start here",
+    slug: "start-here",
+    isPublic: false,
+    updatedAt: "",
+    content: doc(
+      { type: "kb-image", version: 1, src: "kbmedia:m-1", altText: "Floor plan" },
+      { type: "kb-image", version: 1, src: "kbmedia:m-2", altText: "Gone" },
+    ),
+  }));
+
+  it("shows a placeholder, then the signed image; a refused one is quietly unavailable", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      privatePage,
+      get("/public/communities/fan-club/wiki/start-here/media/m-1", () => ({
+        url: "https://signed.example.com/m-1",
+        expiresInSeconds: 600,
+      })),
+      get("/public/communities/fan-club/wiki/start-here/media/m-2", () => {
+        throw { status: 404, message: "Not found" };
+      }),
+    ]);
+    mount(<CommunityWiki getPageHref={(page) => `/wiki/${page}`} />);
+    expect((await screen.findAllByTestId("community-wiki-image-placeholder")).length).toBeGreaterThan(0);
+    const img = await screen.findByTestId("community-wiki-private-image");
+    expect(img.getAttribute("src")).toBe("https://signed.example.com/m-1");
+    expect(img.getAttribute("alt")).toBe("Floor plan");
+    expect((await screen.findByTestId("community-wiki-image-unavailable")).textContent).toBe("Image unavailable");
+  });
+
+  it("is never resolved outside the wiki: a post renders nothing for it", async () => {
+    installAdapter([]);
+    mount(<CommunityRichText body={doc({ type: "kb-image", version: 1, src: "kbmedia:m-1", altText: "x" })} />);
+    expect(screen.queryByRole("img")).toBeNull();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(calls("get", /\/media\//)).toHaveLength(0);
+  });
+});
+
+describe("CommunityPublicWiki (on the About page)", () => {
+  it("lists only the public pages, and opens one in place", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/wiki", () => PAGES),
+      get("/public/communities/fan-club/wiki/community-guidelines", () => ({
+        id: "p3",
+        title: "Community guidelines",
+        slug: "community-guidelines",
+        isPublic: true,
+        updatedAt: "",
+        content: doc({ type: "paragraph", version: 1, children: [text("Be kind.")] }),
+      })),
+    ]);
+    mount(<CommunityPublicWiki />, {});
+    const items = await screen.findAllByTestId("community-public-wiki-item");
+    expect(items.map((item) => item.textContent)).toEqual(["Community guidelines"]);
+    expect(calls("get", "/public/communities/fan-club/wiki/community-guidelines")).toHaveLength(0);
+    fireEvent.click(within(items[0]).getByRole("button", { name: "Community guidelines" }));
+    await waitFor(() => expect(screen.getByText("Be kind.")).toBeTruthy());
+  });
+
+  it("renders nothing when there are no public pages", async () => {
+    installAdapter([get("/public/communities/fan-club/wiki", () => [PAGES[0]])]);
+    mount(<CommunityPublicWiki />, {});
+    await waitFor(() => expect(calls("get", "/public/communities/fan-club/wiki")).toHaveLength(1));
+    expect(screen.queryByTestId("community-public-wiki")).toBeNull();
+  });
+});

package/src/ui/styled/communities/index.ts

@@ -0,0 +1,19 @@
+// Communities styled blocks. Each is a headless hook from
+// `ui/headless/communities` plus markup, and nothing else.
+export { CommunitiesList, type CommunitiesListProps } from "./CommunitiesList";
+export { CommunityAbout, type CommunityAboutProps } from "./CommunityAbout";
+export { CommunityJoinSheet, type CommunityJoinSheetProps } from "./CommunityJoinSheet";
+export { CommunityPending, type CommunityPendingProps } from "./CommunityPending";
+export { CommunityHome, type CommunityHomeProps, type CommunityHomeTab } from "./CommunityHome";
+export { CommunityUpgradeSheet, type CommunityUpgradeSheetProps } from "./CommunityUpgradeSheet";
+export { CommunityMembershipMenu, type CommunityMembershipMenuProps } from "./CommunityMembershipMenu";
+export { MyMembershipsList, type MyMembershipsListProps } from "./MyMembershipsList";
+export {
+  CommunityWiki,
+  CommunityWikiPageView,
+  type CommunityWikiProps,
+  type CommunityWikiPageViewProps,
+} from "./CommunityWiki";
+export { CommunityPublicWiki, type CommunityPublicWikiProps } from "./CommunityPublicWiki";
+export { CommunityClassroom, type CommunityClassroomProps } from "./CommunityClassroom";
+export { CommunityCalendar, type CommunityCalendarProps } from "./CommunityCalendar";

package/src/ui/styled/communities/shared.tsx

@@ -0,0 +1,177 @@
+import type { CSSProperties, ReactNode } from "react";
+import { X } from "lucide-react";
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "../../headless/dialog";
+import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+
+/** The styles every community block shares, from the theme only. */
+export function useCommunityStyles() {
+  const t = useThemeTokens();
+  const card: CSSProperties = {
+    background: t.surface,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: 20,
+    color: t.text,
+  };
+  const button: CSSProperties = {
+    padding: "10px 16px",
+    borderRadius: t.cornerRadius,
+    background: t.primary,
+    color: t.textPrimary,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: t.fontFamily,
+  };
+  const ghostButton: CSSProperties = {
+    ...button,
+    background: "transparent",
+    color: t.text,
+    border: `1px solid ${t.border}`,
+  };
+  const input: CSSProperties = {
+    width: "100%",
+    height: 40,
+    padding: "8px 12px",
+    borderRadius: t.cornerRadius,
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    outline: "none",
+    boxSizing: "border-box",
+    fontFamily: t.fontFamily,
+  };
+  const muted: CSSProperties = { fontSize: 13, color: t.muted };
+  const errorText: CSSProperties = { fontSize: 13, color: "#ef4444", marginTop: 8 };
+  return { t, card, button, ghostButton, input, muted, errorText };
+}
+
+/**
+ * A modal sheet on the shared dialog primitives, so it stands down while a
+ * Paystack popup is open (see `DialogRoot`). The hook that owns the flow must
+ * live in the COMPONENT that renders this, not inside `children`: a Paystack
+ * stand-down remounts the content.
+ *
+ * Below `lg` it is a bottom sheet: anchored to the bottom edge, full width,
+ * top corners rounded, a grab handle, scrolling inside, and clear of the
+ * phone's home indicator. From `lg` up it is the centred dialog it always was.
+ * The layout is breakpoint classes, so there is nothing to measure and nothing
+ * that renders differently on the server.
+ */
+export function CommunitySheet({
+  open,
+  onOpenChange,
+  title,
+  closeLabel,
+  children,
+  testId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  closeLabel: string;
+  children: ReactNode;
+  testId?: string;
+}) {
+  const t = useThemeTokens();
+  return (
+    <DialogRoot open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: COMMUNITY_SHEET_Z }} />
+        <DialogContent
+          data-testid={testId}
+          data-sheet="bottom-below-lg"
+          aria-describedby={undefined}
+          className={COMMUNITY_SHEET_CLASSES}
+          style={sheetStyle(t)}
+        >
+          <div
+            aria-hidden
+            data-sheet-handle=""
+            className="fg:mx-auto fg:mb-3 fg:lg:hidden"
+            style={{ width: 40, height: 4, borderRadius: 2, background: t.border }}
+          />
+          <div className="fg:flex fg:items-center fg:justify-between fg:gap-3" style={{ marginBottom: 12 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0, fontFamily: t.headingFontFamily }}>
+              {title}
+            </DialogTitle>
+            <DialogClose asChild>
+              <button
+                type="button"
+                aria-label={closeLabel}
+                style={{ background: "transparent", border: "none", color: t.text, cursor: "pointer", padding: 4 }}
+              >
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+          {children}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+/**
+ * The sheet's stacking order. It is modal, so it covers everything pinned to
+ * the screen: the site's chat bubble (`AiAgentWidget` defaults to 9999) and
+ * the member home's bottom bar.
+ */
+export const COMMUNITY_SHEET_Z = 10000;
+
+/**
+ * Where the sheet sits: a bottom sheet below `lg`, the centred dialog from
+ * `lg` up. The corner radius comes from the theme through `--cs-radius`.
+ */
+export const COMMUNITY_SHEET_CLASSES = [
+  "fg:fixed fg:inset-x-0 fg:bottom-0 fg:w-full fg:max-h-[90dvh] fg:overflow-y-auto",
+  "fg:rounded-t-[var(--cs-radius)] fg:px-5 fg:pt-3",
+  "fg:lg:inset-x-auto fg:lg:bottom-auto fg:lg:top-1/2 fg:lg:left-1/2 fg:lg:-translate-x-1/2 fg:lg:-translate-y-1/2",
+  "fg:lg:w-[min(560px,calc(100vw-32px))] fg:lg:max-h-[88vh] fg:lg:rounded-[var(--cs-radius-lg)] fg:lg:p-6",
+].join(" ");
+
+function sheetStyle(t: ResolvedThemeTokens): CSSProperties {
+  return {
+    // A bottom sheet's top corners stay visibly round on a square theme.
+    ["--cs-radius" as string]: `${Math.max(t.cornerRadius, 12)}px`,
+    ["--cs-radius-lg" as string]: `${t.cornerRadius}px`,
+    // Clear of the phone's home indicator; the inset is 0 everywhere else.
+    paddingBottom: "calc(24px + env(safe-area-inset-bottom))",
+    background: t.background,
+    color: t.text,
+    zIndex: COMMUNITY_SHEET_Z + 1,
+    fontFamily: t.fontFamily,
+    boxSizing: "border-box",
+  };
+}
+
+/** A small pill, e.g. the member's tier badge. */
+export function Pill({ children, testId }: { children: ReactNode; testId?: string }) {
+  const t = useThemeTokens();
+  return (
+    <span
+      data-testid={testId}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "2px 10px",
+        borderRadius: 999,
+        fontSize: 12,
+        fontWeight: 700,
+        border: `1px solid ${t.primary}`,
+        color: t.primary,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/** A locale-aware short date. */
+export function shortDate(value: string | null | undefined, locale: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(locale, { year: "numeric", month: "short", day: "numeric" });
+}