@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,88 @@
+import type { CSSProperties } from "react";
+import { Users } from "lucide-react";
+import { useCommunities } from "../../headless/communities/useCommunity";
+import { communityAboutPath } from "../../headless/communities/paths";
+import type { PublicCommunity } from "../../../data/queries/useCommunities";
+import { useForgeT } from "../../../i18n";
+import { Loading } from "../Loading";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunitiesListProps {
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Where a community card leads. Default its About page, `/i/communities/<slug>`. */
+  getCommunityHref?: (community: PublicCommunity) => string;
+  /** Optional page heading. Pass `null` to omit. */
+  heading?: string | null;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** Every community on the profile, as cards. Built on `useCommunities()`. */
+export function CommunitiesList({ navigate, getCommunityHref, heading, className, style }: CommunitiesListProps) {
+  const tr = useForgeT();
+  const { t, card } = useCommunityStyles();
+  const { communities, isLoading } = useCommunities();
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const hrefOf = getCommunityHref ?? ((community: PublicCommunity) => communityAboutPath(community.slug));
+  const resolvedHeading = heading === null ? null : (heading ?? tr("forge.communities_list.heading"));
+
+  if (isLoading) return <Loading fullPage />;
+
+  return (
+    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      {resolvedHeading && (
+        <h1 style={{ fontSize: 30, fontWeight: 800, marginBottom: 24, fontFamily: t.headingFontFamily }}>
+          {resolvedHeading}
+        </h1>
+      )}
+      {communities.length === 0 ? (
+        <p style={{ opacity: 0.8 }}>{tr("forge.communities_list.empty")}</p>
+      ) : (
+        <div className="fg:grid fg:grid-cols-1 fg:gap-5 fg:sm:grid-cols-2 fg:lg:grid-cols-3">
+          {communities.map((community) => (
+            <button
+              key={community.id}
+              type="button"
+              data-testid="community-card"
+              onClick={() => go(hrefOf(community))}
+              className="fg:flex fg:flex-col fg:text-left"
+              style={{ ...card, padding: 0, overflow: "hidden", cursor: "pointer", font: "inherit" }}
+            >
+              <div
+                style={{
+                  height: 140,
+                  background: community.coverUrl ? `center / cover no-repeat url(${JSON.stringify(community.coverUrl)})` : `${t.primary}22`,
+                }}
+              />
+              <div className="fg:flex fg:flex-col fg:gap-2" style={{ padding: 16 }}>
+                <div className="fg:flex fg:items-center fg:gap-3">
+                  {community.logoUrl && (
+                    <img
+                      src={community.logoUrl}
+                      alt=""
+                      style={{ width: 36, height: 36, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }}
+                    />
+                  )}
+                  <h2 style={{ fontSize: 18, fontWeight: 700, margin: 0, fontFamily: t.headingFontFamily }}>
+                    {community.name}
+                  </h2>
+                </div>
+                {community.category && <span style={{ fontSize: 12, color: t.muted }}>{community.category}</span>}
+                {community.description && (
+                  <p style={{ fontSize: 14, opacity: 0.85, margin: 0 }} className="fg:line-clamp-3">
+                    {community.description}
+                  </p>
+                )}
+                <span className="fg:flex fg:items-center fg:gap-1" style={{ fontSize: 13, color: t.muted }}>
+                  <Users size={14} />
+                  {tr("forge.communities_list.member_count", { count: community.memberCount })}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,145 @@
+import type { CSSProperties } from "react";
+import { Users } from "lucide-react";
+import { useCommunityAbout, type UseCommunityAboutOptions } from "../../headless/communities/useCommunityAbout";
+import { useForgeT } from "../../../i18n";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
+import { membershipPriceLabel } from "../../format/membershipPriceLabel";
+import { Loading } from "../Loading";
+import { CommunityJoinSheet } from "./CommunityJoinSheet";
+import { CommunityPublicWiki } from "./CommunityPublicWiki";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunityAboutProps extends UseCommunityAboutOptions {
+  /** Format a tier price for display. Defaults to the runtime currency formatter. */
+  formatAmount?: (amount: number) => string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A community's About page: cover, name, member count, description, what each
+ * tier gives, and one main button. For a visitor it is Join, which opens the
+ * join sheet IN PLACE; for a member it goes inside; for a pending applicant it
+ * goes to the pending screen. `?invite=` and `?join=` open the sheet straight
+ * away. The community's public wiki pages follow, readable in place. Must sit
+ * inside `<CommunityProvider>`. Built on `useCommunityAbout`.
+ */
+export function CommunityAbout({ formatAmount, className, style, ...options }: CommunityAboutProps) {
+  const tr = useForgeT();
+  const { t, card, button, ghostButton, muted } = useCommunityStyles();
+  const fmt = useAmountFormatter(formatAmount);
+  const about = useCommunityAbout(options);
+
+  if (about.isLoading && !about.community) return <Loading fullPage />;
+  if (about.notFound || !about.community) {
+    return <p style={{ color: t.text }}>{tr("forge.community_about.not_found")}</p>;
+  }
+  const community = about.community;
+  const offer = about.joinOffer;
+  const mainLabel =
+    about.action === "enter"
+      ? tr("forge.community_about.go_inside")
+      : about.action === "pending"
+        ? tr("forge.community_about.view_application")
+        : offer?.kind === "free"
+          ? tr("forge.community_about.join_free")
+          : offer?.kind === "paid"
+            ? tr(offer.cycle === "year" ? "forge.community_about.join_from_yearly" : "forge.community_about.join_from", { amount: fmt(offer.amount) })
+            : offer?.kind === "apply"
+              ? tr("forge.community_about.apply")
+              : tr("forge.community_about.join");
+
+  return (
+    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      <div
+        style={{
+          height: 220,
+          borderRadius: t.cornerRadius,
+          marginBottom: 24,
+          background: community.coverUrl ? `center / cover no-repeat url(${JSON.stringify(community.coverUrl)})` : `${t.primary}22`,
+        }}
+      />
+      <div className="fg:flex fg:flex-col fg:gap-6 fg:md:flex-row fg:md:items-start">
+        <div className="fg:flex fg:min-w-0 fg:flex-1 fg:flex-col fg:gap-3">
+          <div className="fg:flex fg:items-center fg:gap-3">
+            {community.logoUrl && (
+              <img src={community.logoUrl} alt="" style={{ width: 56, height: 56, borderRadius: "50%", objectFit: "cover" }} />
+            )}
+            <div>
+              <h1 style={{ fontSize: 30, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>{community.name}</h1>
+              <p className="fg:flex fg:items-center fg:gap-1" style={muted}>
+                <Users size={14} />
+                {tr("forge.community_about.member_count", { count: community.memberCount })}
+                {community.category ? ` · ${community.category}` : ""}
+              </p>
+            </div>
+          </div>
+          {community.description && <p style={{ whiteSpace: "pre-line", lineHeight: 1.6 }}>{community.description}</p>}
+          {about.isPending && (
+            <p role="status" data-testid="community-about-pending" style={{ fontWeight: 600 }}>
+              {tr("forge.community_about.pending")}
+            </p>
+          )}
+        </div>
+        <div className="fg:w-full fg:md:w-[320px]" style={{ ...card, flexShrink: 0 }}>
+          <button type="button" data-testid="community-about-primary" onClick={about.primary} style={{ ...button, width: "100%" }}>
+            {mainLabel}
+          </button>
+        </div>
+      </div>
+
+      {about.tiers.length > 0 && (
+        <section style={{ marginTop: 32 }}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+            {tr("forge.community_about.tiers_title")}
+          </h2>
+          <div className="fg:grid fg:grid-cols-1 fg:gap-4 fg:sm:grid-cols-2 fg:lg:grid-cols-3">
+            {about.tiers.map((tier) => {
+              const current = about.membership?.tierId === tier.id;
+              return (
+                <div key={tier.id} data-testid="community-about-tier" className="fg:flex fg:flex-col fg:gap-2" style={card}>
+                  <h3 style={{ fontSize: 17, fontWeight: 700, margin: 0 }}>{tier.name}</h3>
+                  <p style={{ fontWeight: 700, color: t.primary }}>{membershipPriceLabel(tier, tr, fmt)}</p>
+                  {tier.description && <p style={{ fontSize: 14, opacity: 0.85 }}>{tier.description}</p>}
+                  {!!tier.benefits?.length && (
+                    <ul className="fg:flex fg:flex-col fg:gap-1" style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 14 }}>
+                      {tier.benefits.map((benefit) => (
+                        <li key={benefit.id} className="fg:flex fg:gap-2">
+                          <span style={{ color: t.primary }}>✓</span>
+                          {benefit.title}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <div style={{ marginTop: "auto" }}>
+                    {current ? (
+                      <p style={muted}>{tr("forge.community_about.current_tier")}</p>
+                    ) : about.action === "join" ? (
+                      <button type="button" style={{ ...ghostButton, width: "100%" }} onClick={() => about.openJoin(tier.id)}>
+                        {tier.joinMode === "application" ? tr("forge.community_about.apply") : tr("forge.community_about.join_tier")}
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* The public wiki pages (the guidelines, by default), readable before joining. */}
+      <CommunityPublicWiki />
+
+      {about.sheetOpen && (
+        <CommunityJoinSheet
+          open={about.sheetOpen}
+          onOpenChange={about.setSheetOpen}
+          tierId={about.sheetTierId}
+          invite={about.invite}
+          join={about.join}
+          navigate={options.navigate}
+        />
+      )}
+    </div>
+  );
+}