RuleTemplate seed and create flow

2026-04-10 22:17:52 -06:00
parent cee81eda16
commit ec5afd1464
47 changed files with 1706 additions and 265 deletions
@@ -184,7 +184,7 @@ export function RuleCardView({
      {/* Outermost container with bottom border - taller to match Figma */}
      <div
        className={`
-        border-b border-black border-solid flex items-center relative shrink-0 w-full
+        border-b border-solid border-[var(--color-content-invert-primary)] flex items-center relative shrink-0 w-full
        max-[639px]:h-[72px]
        min-[640px]:max-[1023px]:h-[80px]
        min-[1024px]:max-[1439px]:h-[88px]
@@ -196,8 +196,8 @@ export function RuleCardView({
          <div
            className={`
            flex items-center justify-center shrink-0
-            max-[639px]:w-[72px] max-[639px]:h-[72px] max-[639px]:border-r max-[639px]:border-black max-[639px]:border-solid
-            min-[640px]:max-[1023px]:w-[80px] min-[640px]:max-[1023px]:h-[80px] min-[640px]:max-[1023px]:border-r min-[640px]:max-[1023px]:border-black min-[640px]:max-[1023px]:border-solid
+            max-[639px]:w-[72px] max-[639px]:h-[72px] max-[639px]:border-r max-[639px]:border-solid max-[639px]:border-[var(--color-content-invert-primary)]
+            min-[640px]:max-[1023px]:w-[80px] min-[640px]:max-[1023px]:h-[80px] min-[640px]:max-[1023px]:border-r min-[640px]:max-[1023px]:border-solid min-[640px]:max-[1023px]:border-[var(--color-content-invert-primary)]
            min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
            min-[1440px]:w-[103px] min-[1440px]:h-[103px]
          `}
@@ -218,7 +218,7 @@ export function RuleCardView({
            className={`
            flex-1 min-w-0 h-full flex
            max-[1023px]:border-0
-            min-[1024px]:border-l min-[1024px]:border-black min-[1024px]:border-solid
+            min-[1024px]:border-l min-[1024px]:border-solid min-[1024px]:border-[var(--color-content-invert-primary)]
          `}
          >
            {/* Inner container for header text with padding */}
@@ -232,7 +232,7 @@ export function RuleCardView({
            `}
            >
              <h3
-                className={`${titleClass} text-black overflow-hidden text-ellipsis w-full`}
+                className={`${titleClass} cursor-inherit text-[var(--color-content-invert-primary)] overflow-hidden text-ellipsis w-full`}
              >
                {title}
              </h3>
@@ -279,8 +279,12 @@ export function RuleCardView({
          )}
          {/* Footer: Description */}
          {description && (
-            <div className="border-t border-black border-solid pt-[16px] relative shrink-0 w-full">
-              <p className={`${descriptionClass} text-black`}>{description}</p>
+            <div className="border-t border-solid border-[var(--color-content-invert-primary)] pt-[16px] relative shrink-0 w-full">
+              <p
+                className={`${descriptionClass} cursor-inherit text-[var(--color-content-invert-primary)]`}
+              >
+                {description}
+              </p>
            </div>
          )}
        </>
@@ -288,7 +292,9 @@ export function RuleCardView({
        /* Collapsed State: Description */
        description && (
          <div className="flex items-center justify-center relative shrink-0 w-full">
-            <p className={`${descriptionClass} text-black flex-1`}>
+            <p
+              className={`${descriptionClass} cursor-inherit text-[var(--color-content-invert-primary)] flex-1`}
+            >
              {description}
            </p>
          </div>
@@ -0,0 +1,66 @@
+"use client";
+
+import Image from "next/image";
+import RuleCard from "../RuleCard";
+import { getAssetPath } from "../../../../lib/assetUtils";
+import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
+import {
+  templateBodyToCategories,
+  templateSummaryFromBody,
+} from "../../../../lib/create/templateReviewMapping";
+import {
+  getGovernanceTemplateCatalogEntry,
+  governanceTemplateIconPath,
+} from "../../../../lib/templates/governanceTemplateCatalog";
+
+const FALLBACK_PRESENTATION = {
+  iconPath: governanceTemplateIconPath("consensus"),
+  backgroundColor: "bg-[var(--color-surface-invert-brand-teal)]",
+};
+
+export interface TemplateReviewCardProps {
+  template: RuleTemplateDto;
+  /** Merged onto RuleCard `className` (e.g. final-review desktop vs mobile radius/padding). */
+  ruleCardClassName?: string;
+}
+
+/**
+ * Expanded RuleCard for template review: surfaces + icon from Figma catalog (21764-16435);
+ * tag rows from API `body`.
+ */
+export function TemplateReviewCard({
+  template,
+  ruleCardClassName = "",
+}: TemplateReviewCardProps) {
+  const catalog = getGovernanceTemplateCatalogEntry(template.slug);
+  const pres = catalog ?? FALLBACK_PRESENTATION;
+  const categories = templateBodyToCategories(template.body);
+  const summary = templateSummaryFromBody(template.description, template.body);
+
+  return (
+    <RuleCard
+      title={template.title}
+      description={summary}
+      expanded
+      size="L"
+      categories={categories}
+      backgroundColor={pres.backgroundColor}
+      className={ruleCardClassName}
+      onClick={() => {}}
+      icon={
+        <Image
+          src={getAssetPath(pres.iconPath)}
+          alt={template.title}
+          width={90}
+          height={90}
+          className="
+                  max-[639px]:w-[40px] max-[639px]:h-[40px]
+                  min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
+                  min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
+                  min-[1440px]:w-[90px] min-[1440px]:h-[90px]
+                "
+        />
+      }
+    />
+  );
+}
@@ -0,0 +1,2 @@
+export { TemplateReviewCard } from "./TemplateReviewCard";
+export type { TemplateReviewCardProps } from "./TemplateReviewCard";
@@ -0,0 +1,99 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Image from "next/image";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
+import RuleCard from "../../cards/RuleCard";
+import { getAssetPath } from "../../../../lib/assetUtils";
+import type { GovernanceTemplateCatalogEntry } from "../../../../lib/templates/governanceTemplateCatalog";
+
+export interface GovernanceTemplateGridProps {
+  entries: GovernanceTemplateCatalogEntry[];
+  onTemplateClick: (_slug: string) => void;
+}
+
+export function GovernanceTemplateGrid({
+  entries,
+  onTemplateClick,
+}: GovernanceTemplateGridProps) {
+  const [isMounted, setIsMounted] = useState(false);
+
+  const isMax639 = useMediaQuery("(max-width: 639px)");
+  const isMin640Max1023 = useMediaQuery(
+    "(min-width: 640px) and (max-width: 1023px)",
+  );
+  const isMin1024Max1439 = useMediaQuery(
+    "(min-width: 1024px) and (max-width: 1439px)",
+  );
+  const isMin1440 = useMediaQuery("(min-width: 1440px)");
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- breakpoint sizing after mount (matches SSR default "M")
+    setIsMounted(true);
+  }, []);
+
+  const cardSize = isMounted
+    ? isMax639
+      ? "XS"
+      : isMin640Max1023
+        ? "S"
+        : isMin1024Max1439
+          ? "M"
+          : isMin1440
+            ? "L"
+            : "M"
+    : "M";
+
+  return (
+    <div
+      className={`
+        flex flex-col gap-[18px]
+        min-[768px]:grid min-[768px]:grid-cols-2 min-[768px]:gap-[18px]
+        min-[1024px]:gap-[24px]
+      `}
+    >
+      {entries.map((card) => (
+        <RuleCard
+          key={card.slug}
+          title={card.title}
+          description={card.description}
+          size={cardSize}
+          className={`
+              select-none
+              cursor-pointer
+              max-[639px]:rounded-[var(--measures-radius-200,8px)]
+              min-[640px]:max-[1023px]:rounded-[var(--measures-radius-300,12px)]
+              min-[1024px]:rounded-[var(--radius-measures-radius-small)]
+              max-[639px]:pb-[24px] max-[639px]:pt-[12px] max-[639px]:px-[12px]
+              min-[640px]:max-[1023px]:p-[24px]
+              min-[1024px]:max-[1439px]:p-[16px]
+              min-[1440px]:p-[24px]
+              max-[1023px]:gap-[18px]
+              min-[1024px]:max-[1439px]:gap-[12px]
+              min-[1440px]:gap-[10px]
+            `}
+          icon={
+            <Image
+              src={getAssetPath(card.iconPath)}
+              alt=""
+              width={90}
+              height={90}
+              draggable={false}
+              className="
+                  cursor-inherit
+                  max-[639px]:w-[40px] max-[639px]:h-[40px]
+                  min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
+                  min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
+                  min-[1440px]:w-[90px] min-[1440px]:h-[90px]
+                "
+            />
+          }
+          backgroundColor={card.backgroundColor}
+          onClick={() => {
+            onTemplateClick(card.slug);
+          }}
+        />
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,2 @@
+export { GovernanceTemplateGrid } from "./GovernanceTemplateGrid";
+export type { GovernanceTemplateGridProps } from "./GovernanceTemplateGrid";
@@ -1,6 +1,7 @@
 "use client";

 import { memo } from "react";
+import { useRouter } from "next/navigation";
 import { logger } from "../../../../lib/logger";
 import { RuleStackView } from "./RuleStack.view";
 import type { RuleStackProps } from "./RuleStack.types";
@@ -19,21 +20,24 @@ declare global {
 }

 const RuleStackContainer = memo<RuleStackProps>(({ className = "" }) => {
-  const handleTemplateClick = (templateName: string) => {
+  const router = useRouter();
+
+  const handleTemplateClick = (slug: string) => {
    // Basic analytics tracking
    if (typeof window !== "undefined") {
      if (window.gtag) {
        window.gtag("event", "template_click", {
-          template_name: templateName,
+          template_slug: slug,
        });
      }
      if (window.analytics) {
        window.analytics.track("Template Clicked", {
-          templateName: templateName,
+          templateSlug: slug,
        });
      }
    }
-    logger.debug(`${templateName} template clicked`);
+    logger.debug(`${slug} template clicked`);
+    router.push(`/create/review-template/${encodeURIComponent(slug)}`);
  };

  return (
@@ -4,5 +4,5 @@ export interface RuleStackProps {

 export interface RuleStackViewProps {
  className: string;
-  onTemplateClick: (_templateName: string) => void;
+  onTemplateClick: (_slug: string) => void;
 }
@@ -1,91 +1,21 @@
 "use client";

-import { useState, useEffect } from "react";
-import Image from "next/image";
 import { useTranslation } from "../../../contexts/MessagesContext";
-import { useMediaQuery } from "../../../hooks/useMediaQuery";
-import RuleCard from "../../cards/RuleCard";
 import SectionHeader from "../SectionHeader";
 import Button from "../../buttons/Button";
-import { getAssetPath } from "../../../../lib/assetUtils";
+import { GovernanceTemplateGrid } from "../GovernanceTemplateGrid";
+import { getGovernanceTemplatesForHome } from "../../../../lib/templates/governanceTemplateCatalog";
 import type { RuleStackViewProps } from "./RuleStack.types";

+const homeFeaturedTemplates = getGovernanceTemplatesForHome();
+
 export function RuleStackView({
  className,
  onTemplateClick,
 }: RuleStackViewProps) {
  const t = useTranslation("pages.home.ruleStack");
-  const [isMounted, setIsMounted] = useState(false);
-
-  // Debug: Log button text to ensure translation works
  const buttonText = t("button.seeAllTemplates");

-  // Determine current breakpoint for RuleCard size
-  // 320-639: XS, 640-767: S, 768-1023: S, 1024-1439: M, 1440+: L
-  const isMax639 = useMediaQuery("(max-width: 639px)");
-  const isMin640Max1023 = useMediaQuery(
-    "(min-width: 640px) and (max-width: 1023px)",
-  );
-  const isMin1024Max1439 = useMediaQuery(
-    "(min-width: 1024px) and (max-width: 1439px)",
-  );
-  const isMin1440 = useMediaQuery("(min-width: 1440px)");
-
-  // Handle hydration: only use media queries after mount
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer breakpoint until after mount to avoid hydration mismatch
-    setIsMounted(true);
-  }, []);
-
-  // Use CSS classes for responsive sizing to avoid hydration mismatch
-  // Default to M size for SSR, then let CSS handle the responsive sizing
-  const cardSize = isMounted
-    ? isMax639
-      ? "XS"
-      : isMin640Max1023
-        ? "S"
-        : isMin1024Max1439
-          ? "M"
-          : isMin1440
-            ? "L"
-            : "M"
-    : "M";
-
-  // Icon sizes: XS=40px, S=56px, M=56px, L=90px
-  // Use a large default (90px) and let CSS handle responsive sizing
-
-  // Card data
-  const cards = [
-    {
-      title: t("cards.consensusClusters.title"),
-      description: t("cards.consensusClusters.description"),
-      iconAlt: t("cards.consensusClusters.iconAlt"),
-      iconPath: "assets/Icon_Sociocracy.svg",
-      backgroundColor: "bg-[var(--color-surface-default-brand-lime)]",
-    },
-    {
-      title: t("cards.consensus.title"),
-      description: t("cards.consensus.description"),
-      iconAlt: t("cards.consensus.iconAlt"),
-      iconPath: "assets/Icon_Consensus.svg",
-      backgroundColor: "bg-[var(--color-surface-default-brand-rust)]",
-    },
-    {
-      title: t("cards.electedBoard.title"),
-      description: t("cards.electedBoard.description"),
-      iconAlt: t("cards.electedBoard.iconAlt"),
-      iconPath: "assets/Icon_ElectedBoard.svg",
-      backgroundColor: "bg-[var(--color-surface-default-brand-red)]",
-    },
-    {
-      title: t("cards.petition.title"),
-      description: t("cards.petition.description"),
-      iconAlt: t("cards.petition.iconAlt"),
-      iconPath: "assets/Icon_Petition.svg",
-      backgroundColor: "bg-[var(--color-surface-default-brand-teal)]",
-    },
-  ];
-
  return (
    <section
      className={`
@@ -101,60 +31,17 @@ export function RuleStackView({
        ${className}
      `}
    >
-      {/* Section Header */}
      <SectionHeader
        title={t("title")}
        subtitle={t("subtitle")}
        variant="multi-line"
      />

-      {/* Cards Container */}
-      <div
-        className={`
-          flex flex-col gap-[18px]
-          min-[768px]:grid min-[768px]:grid-cols-2 min-[768px]:gap-[18px]
-          min-[1024px]:gap-[24px]
-        `}
-      >
-        {cards.map((card, index) => (
-          <RuleCard
-            key={index}
-            title={card.title}
-            description={card.description}
-            size={cardSize}
-            className="
-              max-[639px]:rounded-[var(--measures-radius-200,8px)]
-              min-[640px]:max-[1023px]:rounded-[var(--measures-radius-300,12px)]
-              min-[1024px]:rounded-[var(--radius-measures-radius-small)]
-              max-[639px]:pb-[24px] max-[639px]:pt-[12px] max-[639px]:px-[12px]
-              min-[640px]:max-[1023px]:p-[24px]
-              min-[1024px]:max-[1439px]:p-[16px]
-              min-[1440px]:p-[24px]
-              max-[1023px]:gap-[18px]
-              min-[1024px]:max-[1439px]:gap-[12px]
-              min-[1440px]:gap-[10px]
-            "
-            icon={
-              <Image
-                src={getAssetPath(card.iconPath)}
-                alt={card.iconAlt}
-                width={90}
-                height={90}
-                className="
-                  max-[639px]:w-[40px] max-[639px]:h-[40px]
-                  min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
-                  min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
-                  min-[1440px]:w-[90px] min-[1440px]:h-[90px]
-                "
-              />
-            }
-            backgroundColor={card.backgroundColor}
-            onClick={() => onTemplateClick(card.title)}
-          />
-        ))}
-      </div>
+      <GovernanceTemplateGrid
+        entries={homeFeaturedTemplates}
+        onTemplateClick={onTemplateClick}
+      />

-      {/* See all templates button */}
      <div
        className="
        flex justify-center w-full
@@ -163,7 +50,12 @@ export function RuleStackView({
        min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
      "
      >
-        <Button buttonType="outline" palette="default" size="large">
+        <Button
+          buttonType="outline"
+          palette="default"
+          size="large"
+          href="/templates"
+        >
          {buttonText}
        </Button>
      </div>