CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

RuleTemplate seed and create flow

Browse Source
This commit is contained in:
adilallo
2026-04-10 22:17:52 -06:00
parent cee81eda16
commit ec5afd1464
47 changed files with 1706 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/sections/GovernanceTemplateGrid/GovernanceTemplateGrid.tsx
+99
View File
@@ -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>
);
}
app/components/sections/GovernanceTemplateGrid/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { GovernanceTemplateGrid } from "./GovernanceTemplateGrid";
export type { GovernanceTemplateGridProps } from "./GovernanceTemplateGrid";
app/components/sections/RuleStack/RuleStack.container.tsx
+8 -4
View File
@@ -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 (
app/components/sections/RuleStack/RuleStack.types.ts
+1 -1
View File
@@ -4,5 +4,5 @@ export interface RuleStackProps {
export interface RuleStackViewProps {
className: string;
onTemplateClick: (_templateName: string) => void;
onTemplateClick: (_slug: string) => void;
}
app/components/sections/RuleStack/RuleStack.view.tsx
+14 -122
View File
@@ -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>