@bison-lab/payload-blocks 3.1.0 → 3.2.0

package/dist/index.mjs

@@ -641,6 +641,290 @@ const NapBlock = {
 	]
 };
 //#endregion
+//#region src/blocks/mega-menu/rem-width.ts
+/**
+* The one rule for a typed panel width, shared by the config's validator and
+* the renderer's reader so the two cannot drift: if the validator accepted a
+* value the renderer dropped, the editor would be back to a width that
+* silently does nothing. React-free, because `config.ts` ships from the Node
+* entry.
+*/
+const REM_WIDTH = /^\s*(\d+(?:\.\d+)?)\s*(rem)?\s*$/;
+/** "30" and "30rem" both mean 30rem; anything else is not a width. */
+function remWidth(value) {
+	const match = REM_WIDTH.exec(value ?? "");
+	return match ? `${Number(match[1])}rem` : null;
+}
+//#endregion
+//#region src/blocks/mega-menu/config.ts
+/** The percent tokens a column can take, as Payload stores them. */
+const MEGA_MENU_WIDTHS = [
+	"25",
+	"33",
+	"50",
+	"66",
+	"75",
+	"100"
+];
+/** Twelfths, so 33 and 66 are real thirds and 33 + 33 + 33 is a full row. */
+const TWELFTHS = {
+	"25": 3,
+	"33": 4,
+	"50": 6,
+	"66": 8,
+	"75": 9,
+	"100": 12
+};
+/**
+* A custom `validate` replaces Payload's stock array check, so the row limits
+* are re-applied here or five columns would pass. Same messages as the stock
+* check, through the request's translator when the admin supplies one.
+*/
+function rowLimits(value, { minRows, maxRows, required, req }) {
+	const count = value?.length ?? 0;
+	const t = req?.t;
+	if (required && count === 0) return t ? t("validation:required") : "This field is required.";
+	if (minRows && count < minRows) return t ? t("validation:requiresAtLeast", {
+		count: minRows,
+		label: t("general:rows")
+	}) : `This field requires at least ${minRows} rows.`;
+	if (maxRows && count > maxRows) return t ? t("validation:requiresNoMoreThan", {
+		count: maxRows,
+		label: t("general:rows")
+	}) : `This field requires no more than ${maxRows} rows.`;
+	return true;
+}
+/**
+* The rule on `columns`: read as fractions, the widths must total 100%. It is
+* the array's own `validate`, so the editor sees the message as they build,
+* and Payload runs field validation again on publish (only draft saves skip
+* it), so nothing publishes with a short row. Skipped when Advanced has custom
+* widths on.
+*/
+const validateColumnWidths = (value, options) => {
+	const limits = rowLimits(value, options);
+	if (limits !== true) return limits;
+	if (options.siblingData?.customWidths || !value?.length) return true;
+	const twelfths = value.reduce((sum, row) => sum + TWELFTHS[row?.width ?? "100"], 0);
+	if (twelfths === 12) return true;
+	return `The columns add up to ${Math.round(twelfths / 12 * 100)}%. They need to add up to 100%.`;
+};
+/**
+* The row `levels` segments above the field at `path`, read off the whole
+* document. A condition on a link needs its section; a condition on a column
+* needs its panel. `data` carries the full form, so the path is enough.
+*/
+function ancestor(data, path, levels) {
+	let node = data;
+	for (const segment of path.slice(0, path.length - levels)) {
+		if (node === null || typeof node !== "object") return void 0;
+		node = node[segment];
+	}
+	return node !== null && typeof node === "object" ? node : void 0;
+}
+/** `links.N.variant` → its section, three segments up. */
+const whenSectionFeatured = (data, _siblingData, { path }) => ancestor(data, path, 3)?.display === "featured";
+/** A featured link's glyph comes from its variant, so `icon` is a list link's field. */
+const unlessSectionFeatured = (data, siblingData, ctx) => !whenSectionFeatured(data, siblingData, ctx);
+/** The renderer would fall back to the preset silently; the editor should hear it here instead. */
+const validateRemWidth = (value) => !value || remWidth(value) !== null ? true : "Type a width in rem, like 30 or 30rem.";
+/** `columns.N.width` → its panel, three segments up. */
+const whenCustomWidths = (data, _siblingData, { path }) => Boolean(ancestor(data, path, 3)?.customWidths);
+const unlessCustomWidths = (data, siblingData, ctx) => !whenCustomWidths(data, siblingData, ctx);
+function approvedSelect(name, options, admin) {
+	if (!options?.length) return [];
+	return [{
+		name,
+		type: "select",
+		options,
+		admin
+	}];
+}
+function megaMenuBlock({ variants, icons } = {}) {
+	const linkRowFields = [
+		...linkFields({ required: true }),
+		{
+			name: "description",
+			type: "textarea",
+			admin: { description: "Supporting line under the label. Optional." }
+		},
+		...approvedSelect("variant", variants, {
+			description: "The look of this featured link.",
+			condition: whenSectionFeatured
+		}),
+		...approvedSelect("icon", icons, {
+			description: "Glyph shown before a list link. Optional.",
+			condition: unlessSectionFeatured
+		})
+	];
+	return {
+		slug: "megaMenu",
+		interfaceName: "MegaMenuBlock",
+		labels: {
+			singular: "Mega menu",
+			plural: "Mega menus"
+		},
+		fields: [
+			{
+				name: "label",
+				type: "text",
+				required: true
+			},
+			{
+				name: "href",
+				type: "text",
+				admin: { description: "The landing page this menu opens. Optional: a trigger with no landing page is allowed." }
+			},
+			{
+				name: "panel",
+				type: "group",
+				fields: [
+					{
+						name: "maxWidth",
+						type: "select",
+						defaultValue: "standard",
+						options: [
+							{
+								label: "Narrow",
+								value: "narrow"
+							},
+							{
+								label: "Standard",
+								value: "standard"
+							},
+							{
+								label: "Wide",
+								value: "wide"
+							}
+						]
+					},
+					{
+						name: "columns",
+						type: "array",
+						required: true,
+						minRows: 1,
+						maxRows: 4,
+						defaultValue: emptyRows(1),
+						labels: {
+							singular: "Column",
+							plural: "Columns"
+						},
+						validate: validateColumnWidths,
+						admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } },
+						fields: [
+							{
+								name: "width",
+								type: "select",
+								defaultValue: "100",
+								options: MEGA_MENU_WIDTHS.map((value) => ({
+									label: `${value}%`,
+									value
+								})),
+								admin: { condition: unlessCustomWidths }
+							},
+							{
+								name: "customWidth",
+								type: "text",
+								admin: {
+									description: "A CSS width: 13rem, 1fr, minmax(0, 1fr)",
+									condition: whenCustomWidths
+								}
+							},
+							{
+								name: "divider",
+								type: "checkbox",
+								label: "Draw a line on the left of this column",
+								defaultValue: false
+							},
+							{
+								name: "sections",
+								type: "array",
+								labels: {
+									singular: "Section",
+									plural: "Sections"
+								},
+								fields: [
+									{
+										name: "eyebrow",
+										type: "text",
+										admin: { description: "Small heading above this group; leave empty for none" }
+									},
+									{
+										name: "display",
+										type: "select",
+										defaultValue: "list",
+										options: [{
+											label: "Featured",
+											value: "featured"
+										}, {
+											label: "List",
+											value: "list"
+										}]
+									},
+									{
+										name: "hideDescriptionsOnMobile",
+										type: "checkbox",
+										label: "Hide descriptions on mobile",
+										defaultValue: true
+									},
+									{
+										name: "links",
+										type: "array",
+										labels: {
+											singular: "Link",
+											plural: "Links"
+										},
+										fields: linkRowFields
+									}
+								]
+							}
+						]
+					},
+					{
+						name: "footer",
+						type: "group",
+						admin: { description: "The strip under the columns. Leave both empty for no footer." },
+						fields: [linkField({
+							name: "overview",
+							label: "Overview link",
+							admin: { description: "The section's own landing page, so it stays reachable from the bar." }
+						}), linkField({
+							name: "cta",
+							label: "Call to action"
+						})]
+					},
+					{
+						type: "collapsible",
+						label: "Advanced",
+						admin: { initCollapsed: true },
+						fields: [{
+							name: "customWidths",
+							type: "checkbox",
+							label: "Type a CSS width for each column instead of choosing a percentage",
+							defaultValue: false
+						}, {
+							name: "customMaxWidth",
+							type: "text",
+							validate: validateRemWidth,
+							admin: { description: "Panel width in rem, e.g. 30. Leave empty to use the preset above." }
+						}]
+					}
+				]
+			}
+		]
+	};
+}
+/** A plain bar item: label and destination, nothing to open. */
+const LinkBlock = {
+	slug: "navLink",
+	interfaceName: "NavLinkBlock",
+	labels: {
+		singular: "Link",
+		plural: "Links"
+	},
+	fields: linkFields({ required: true })
+};
+//#endregion
 //#region src/media.ts
 function isMediaDoc(value) {
 	return typeof value === "object" && value !== null;
@@ -770,6 +1054,143 @@ const heroSample = {
 	}]
 };
 //#endregion
+//#region src/blocks/mega-menu/sample.ts
+/**
+* The options the mega menu sample was written against. A factory block's
+* sample only fits a config built with the same approved values, so a
+* preview builds its block with `megaMenuBlock(megaMenuSampleOptions)`.
+*/
+const megaMenuSampleOptions = {
+	variants: [{
+		label: "Lumbar",
+		value: "lumbar"
+	}, {
+		label: "SI joint",
+		value: "si"
+	}],
+	icons: [{
+		label: "Help",
+		value: "help"
+	}, {
+		label: "Mail",
+		value: "mail"
+	}]
+};
+/**
+* Spinal Simplicity's Patients panel as a saved row: two featured territories
+* in a 75% column, two rail sections in a divided 25% column, overview and
+* CTA. Every field is set at least once; the Advanced fields are set but off,
+* so the percent widths are what renders.
+*/
+const megaMenuSample = {
+	id: "sample-mega-menu",
+	blockType: "megaMenu",
+	label: "Patients",
+	href: "/patients",
+	panel: {
+		maxWidth: "standard",
+		columns: [{
+			id: "treatment",
+			width: "75",
+			customWidth: "minmax(0, 1fr)",
+			divider: false,
+			sections: [{
+				id: "territories",
+				eyebrow: "Treatment",
+				display: "featured",
+				hideDescriptionsOnMobile: true,
+				links: [{
+					id: "lumbar",
+					label: "Low Back Pain",
+					href: "/patients/low-back-pain",
+					newTab: false,
+					description: "Persistent low back pain from lumbar instability, often with leg pain that limits standing or walking.",
+					variant: "lumbar"
+				}, {
+					id: "si",
+					label: "Hip Pain",
+					href: "/patients/hip-pain",
+					newTab: false,
+					description: "Pain centered on the sacroiliac joint, often worse with sitting or climbing stairs.",
+					variant: "si"
+				}]
+			}]
+		}, {
+			id: "rail",
+			width: "25",
+			customWidth: "13rem",
+			divider: true,
+			sections: [{
+				id: "outcomes",
+				eyebrow: "Patient Outcomes",
+				display: "list",
+				hideDescriptionsOnMobile: true,
+				links: [
+					{
+						id: "stories",
+						label: "Testimonials",
+						href: "/patients/stories",
+						newTab: false
+					},
+					{
+						id: "research",
+						label: "Research",
+						href: "/patients/research",
+						newTab: false
+					},
+					{
+						id: "path",
+						label: "Path to Relief",
+						href: "/patients/path-to-relief",
+						newTab: false
+					}
+				]
+			}, {
+				id: "support",
+				eyebrow: "Support",
+				display: "list",
+				hideDescriptionsOnMobile: false,
+				links: [{
+					id: "faqs",
+					label: "FAQs",
+					href: "/patients/faqs",
+					newTab: false,
+					description: "Short answers to the questions patients ask first.",
+					icon: "help"
+				}, {
+					id: "contact",
+					label: "Contact",
+					href: "https://example.com/contact",
+					newTab: true,
+					icon: "mail"
+				}]
+			}]
+		}],
+		footer: {
+			overview: {
+				label: "All patient resources",
+				href: "/patients",
+				newTab: false
+			},
+			cta: {
+				label: "Find a Doctor",
+				href: "/find-a-doctor",
+				newTab: false
+			}
+		},
+		customWidths: false,
+		customMaxWidth: "42rem"
+	}
+};
+/** A plain bar item. */
+const navLinkSample = {
+	id: "sample-nav-link",
+	blockType: "navLink",
+	label: "Contact",
+	href: "/contact",
+	newTab: false
+};
+//#endregion
 //#region src/blocks/nap/sample.ts
 /**
 * A fictional clinic. `emitJsonLd` is off: the block emits schema.org
@@ -1098,9 +1519,11 @@ const blockSamples = {
 		minItemsForFade: 6,
 		maxVisibleRows: 2
 	},
-	nap: napSample
+	nap: napSample,
+	megaMenu: megaMenuSample,
+	navLink: navLinkSample
 };
 //#endregion
-export { FaqColumnsBlock, HeroBlock, MIN_ROWS_ARRAY_FIELD, NapBlock, ProcessStepsBlock, RichTextBlock, ShowcasePanelsBlock, TestimonialMasonryBlock, blockSamples, emptyRows, headingFields, imageField, linkField, linkFields, resolveMedia, sampleImage };
+export { FaqColumnsBlock, HeroBlock, LinkBlock, MEGA_MENU_WIDTHS, MIN_ROWS_ARRAY_FIELD, NapBlock, ProcessStepsBlock, RichTextBlock, ShowcasePanelsBlock, TestimonialMasonryBlock, blockSamples, emptyRows, headingFields, imageField, linkField, linkFields, megaMenuBlock, megaMenuSampleOptions, resolveMedia, sampleImage, validateColumnWidths, validateRemWidth };
 
 //# sourceMappingURL=index.mjs.map