@bison-lab/payload-blocks 2.0.0 → 3.1.0

package/dist/index.mjs

@@ -108,7 +108,7 @@ const HeroBlock = {
 					value: "dark"
 				},
 				{
-					label: "Light (page background)",
+					label: "Plain (page surface)",
 					value: "light"
 				}
 			],
@@ -144,6 +144,31 @@ const RichTextBlock = {
 	}]
 };
 //#endregion
+//#region src/fields/min-rows.ts
+/**
+* The import-map path of the array field that refuses to go below `minRows`.
+*
+* Payload gates *Add* on `maxRows` but never gates *Remove* on `minRows`: an
+* editor can delete the third showcase panel, see a "requires 3 panels"
+* note, and only learn on publish that the section is invalid. Payload has no
+* option for this, so it is an admin component (`@bison-lab/payload-blocks/admin`)
+* referenced here by package specifier. Every array in this package with a
+* `minRows` uses it, and a site can put it on its own arrays:
+*
+* ```ts
+* { name: 'items', type: 'array', minRows: 2,
+*   admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } }, fields: [...] }
+* ```
+*
+* Consuming sites pick it up by re-running `payload generate:importmap`. Until
+* they do, Payload logs the missing entry and falls back to its stock field.
+*/
+const MIN_ROWS_ARRAY_FIELD = "@bison-lab/payload-blocks/admin#MinRowsArrayField";
+/** Empty rows for an array's `defaultValue`, so a block opens at its minimum. */
+function emptyRows(count) {
+	return Array.from({ length: count }, () => ({}));
+}
+//#endregion
 //#region src/blocks/showcase-panels/config.ts
 /** Expanding panels, one per service or product line. */
 const ShowcasePanelsBlock = {
@@ -160,10 +185,12 @@ const ShowcasePanelsBlock = {
 			required: true,
 			minRows: 3,
 			maxRows: 6,
+			defaultValue: emptyRows(3),
 			labels: {
 				singular: "Panel",
 				plural: "Panels"
 			},
+			admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } },
 			fields: [
 				{
 					name: "title",
@@ -219,23 +246,6 @@ const ShowcasePanelsBlock = {
 			defaultValue: 0,
 			min: 0,
 			admin: { description: "Which panel is open on load, counting from 0." }
-		},
-		{
-			name: "ariaLabel",
-			type: "text",
-			admin: { description: "Names the region for screen readers. Defaults to \"Showcase panels\"." }
-		},
-		{
-			name: "labels",
-			type: "group",
-			admin: { description: "Overrides for the panel state text." },
-			fields: [{
-				name: "selected",
-				type: "text"
-			}, {
-				name: "preview",
-				type: "text"
-			}]
 		}
 	]
 };
@@ -256,10 +266,12 @@ const ProcessStepsBlock = {
 			required: true,
 			minRows: 3,
 			maxRows: 6,
+			defaultValue: emptyRows(3),
 			labels: {
 				singular: "Step",
 				plural: "Steps"
 			},
+			admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } },
 			fields: [
 				{
 					name: "title",
@@ -271,13 +283,7 @@ const ProcessStepsBlock = {
 					type: "textarea",
 					required: true
 				},
-				imageField({ required: true }),
-				{
-					name: "step",
-					type: "number",
-					min: 1,
-					admin: { description: "Overrides the displayed number. Leave empty to number by position." }
-				}
+				imageField({ required: true })
 			]
 		},
 		{
@@ -304,23 +310,6 @@ const ProcessStepsBlock = {
 			defaultValue: 0,
 			min: 0,
 			admin: { description: "Which step is active on load, counting from 0." }
-		},
-		{
-			name: "ariaLabel",
-			type: "text",
-			admin: { description: "Names the region for screen readers. Defaults to \"Process steps\"." }
-		},
-		{
-			name: "labels",
-			type: "group",
-			admin: { description: "Overrides for the play/pause control text." },
-			fields: [{
-				name: "pause",
-				type: "text"
-			}, {
-				name: "resume",
-				type: "text"
-			}]
 		}
 	]
 };
@@ -369,10 +358,12 @@ const FaqColumnsBlock = {
 			type: "array",
 			required: true,
 			minRows: 1,
+			defaultValue: emptyRows(1),
 			labels: {
 				singular: "Question",
 				plural: "Questions"
 			},
+			admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } },
 			fields: [{
 				name: "question",
 				type: "text",
@@ -453,10 +444,12 @@ const TestimonialMasonryBlock = {
 			type: "array",
 			required: true,
 			minRows: 1,
+			defaultValue: emptyRows(1),
 			labels: {
 				singular: "Testimonial",
 				plural: "Testimonials"
 			},
+			admin: { components: { Field: MIN_ROWS_ARRAY_FIELD } },
 			fields: [{
 				name: "content",
 				type: "textarea",
@@ -572,11 +565,15 @@ const NapBlock = {
 			type: "array",
 			required: true,
 			minRows: 1,
+			defaultValue: emptyRows(1),
 			labels: {
 				singular: "Department",
 				plural: "Departments"
 			},
-			admin: { description: "A single-location business has one entry, usually named after the business." },
+			admin: {
+				components: { Field: MIN_ROWS_ARRAY_FIELD },
+				description: "A single-location business has one entry, usually named after the business."
+			},
 			fields: [
 				{
 					name: "name",
@@ -672,6 +669,438 @@ function resolveMedia(value) {
 	};
 }
 //#endregion
-export { FaqColumnsBlock, HeroBlock, NapBlock, ProcessStepsBlock, RichTextBlock, ShowcasePanelsBlock, TestimonialMasonryBlock, headingFields, imageField, linkField, linkFields, resolveMedia };
+//#region src/blocks/faq-columns/sample.ts
+const faqColumnsSample = {
+	id: "sample-faq-columns",
+	blockType: "faqColumns",
+	eyebrow: "Good to know",
+	title: "Questions patients ask before their first visit",
+	description: "If yours is not here, the front desk answers the phone between eight and six on weekdays.",
+	items: [
+		{
+			id: "sample-faq-referral",
+			question: "Do I need a referral?",
+			answer: "No. You can book directly. Some insurers ask for one before they reimburse, so check your policy if you plan to claim."
+		},
+		{
+			id: "sample-faq-sessions",
+			question: "How many sessions will I need?",
+			answer: "Most plans finish in six to eight sessions. You will get a written estimate after your assessment, and we revise it with you as you progress."
+		},
+		{
+			id: "sample-faq-wear",
+			question: "What should I wear?",
+			answer: "Anything you can move in. Shorts for a knee or hip, a vest or loose top for a shoulder or neck.\n\nThere are changing rooms if you are coming from work."
+		},
+		{
+			id: "sample-faq-insurance",
+			question: "Is treatment covered by insurance?",
+			answer: "Usually, once conservative treatment has been recommended. We invoice you directly and give you everything the insurer needs to reimburse you."
+		},
+		{
+			id: "sample-faq-cancel",
+			question: "What is the cancellation policy?",
+			answer: "Twenty-four hours' notice, by phone or through the booking link in your confirmation email. Later than that and the session is charged."
+		}
+	],
+	cta: {
+		title: "Still have questions?",
+		linkText: "Call the front desk",
+		href: "tel:+13035550142",
+		newTab: false
+	},
+	sticky: true,
+	type: "single",
+	collapsible: true
+};
+//#endregion
+//#region src/sample-image.ts
+function escapeXml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+/**
+* A placeholder upload document for a block sample.
+*
+* A preview has no site media behind it, so the image has to travel with the
+* sample. This is an inline SVG as a `data:` URL, in the `MediaDoc` shape
+* `resolveMedia` already narrows, with `width` and `height` set so an image
+* adapter can reserve the box. The scheme is what tells an adapter which kind
+* of source it has: `next/image` treats a `data:` src as `unoptimized` on its
+* own, so a site's adapter needs no special case for samples.
+*
+* Neutral greys rather than theme tokens: the SVG is a standalone document
+* and cannot see the page's custom properties.
+*/
+function sampleImage({ label, width, height, alt }) {
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="100%" height="100%" fill="#d4d4d8"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui, sans-serif" font-size="${Math.max(12, Math.round(Math.min(width, height) / 12))}" fill="#52525b">${escapeXml(label)}</text></svg>`;
+	return {
+		url: `data:image/svg+xml,${encodeURIComponent(svg)}`,
+		alt: alt ?? label,
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/blocks/hero/sample.ts
+/**
+* The placeholder hero's sample. The hero family (BIS-45) ships a sample per
+* hero as each one is added; this is the one for the plain renderer.
+*/
+const heroSample = {
+	id: "sample-hero",
+	blockType: "hero",
+	eyebrow: "Now booking spring appointments",
+	heading: "Move well again, without the long wait",
+	body: "Same-week assessments with a physiotherapist who stays with you from the first visit to the last. Most treatment plans finish in six to eight sessions.",
+	tone: "sweep",
+	image: sampleImage({
+		label: "Hero background · 2000 × 1000",
+		width: 2e3,
+		height: 1e3,
+		alt: "A bright, open treatment room"
+	}),
+	links: [{
+		label: "Book an assessment",
+		href: "/book",
+		newTab: false
+	}, {
+		label: "See our approach",
+		href: "https://example.com/approach",
+		newTab: true
+	}]
+};
+//#endregion
+//#region src/blocks/nap/sample.ts
+/**
+* A fictional clinic. `emitJsonLd` is off: the block emits schema.org
+* `LocalBusiness` by default, and a preview must not put a business that does
+* not exist into a site's structured data. The phone numbers are in the
+* 555-01xx range reserved for fiction.
+*/
+const napSample = {
+	id: "sample-nap",
+	blockType: "nap",
+	businessName: "Larkspur Physiotherapy",
+	businessType: "Physiotherapy",
+	address: {
+		streetAddress: "400 Larkspur Lane, Suite 120",
+		addressLocality: "Boulder",
+		addressRegion: "CO",
+		postalCode: "80302",
+		addressCountry: "US"
+	},
+	departments: [{
+		id: "sample-dept-front-desk",
+		name: "Front desk",
+		phoneE164: "+13035550142",
+		phoneDisplay: "(303) 555-0142"
+	}, {
+		id: "sample-dept-billing",
+		name: "Billing and insurance",
+		departmentType: "AccountingService",
+		phoneE164: "+13035550143"
+	}],
+	url: "https://example.com",
+	showName: true,
+	headingLevel: "h2",
+	emitJsonLd: false
+};
+//#endregion
+//#region src/blocks/process-steps/sample.ts
+/** Four steps: enough to show the rail advancing through a real sequence. */
+const processStepsSample = {
+	id: "sample-process-steps",
+	blockType: "processSteps",
+	items: [
+		{
+			id: "sample-step-assess",
+			title: "Assessment",
+			description: "A fifty-minute first visit: your history, a movement screen, and a clear explanation of what we found.",
+			image: sampleImage({
+				label: "Step 1 · 1600 × 1000",
+				width: 1600,
+				height: 1e3,
+				alt: "A physiotherapist taking notes during an assessment"
+			})
+		},
+		{
+			id: "sample-step-plan",
+			title: "Your plan",
+			description: "A written plan with the number of sessions we expect, what each one is for, and the exercises between them.",
+			image: sampleImage({
+				label: "Step 2 · 1600 × 1000",
+				width: 1600,
+				height: 1e3,
+				alt: "A printed treatment plan on a desk"
+			})
+		},
+		{
+			id: "sample-step-treat",
+			title: "Treatment",
+			description: "Hands-on work where it helps, and progressive loading where it matters. You leave every session knowing what to do next.",
+			image: sampleImage({
+				label: "Step 3 · 1600 × 1000",
+				width: 1600,
+				height: 1e3,
+				alt: "A patient lifting a light kettlebell under supervision"
+			})
+		},
+		{
+			id: "sample-step-discharge",
+			title: "Discharge and beyond",
+			description: "A final review, a maintenance programme, and an open door if anything flares up later.",
+			image: sampleImage({
+				label: "Step 4 · 1600 × 1000",
+				width: 1600,
+				height: 1e3,
+				alt: "A patient walking out of the clinic"
+			})
+		}
+	],
+	autoAdvance: true,
+	autoAdvanceDuration: 5e3,
+	pauseOnHover: true,
+	defaultActiveIndex: 0
+};
+//#endregion
+//#region src/blocks/rich-text/sample.ts
+/**
+* A serialized Lexical document, written by hand in the shapes the default
+* JSX converters read (`heading`, `paragraph`, `text`, `list`, `link`).
+* `version` is on every serialized Lexical node, and `direction`, `format` and
+* `indent` are what `RichTextContent` requires on the root; the converters
+* read none of them, and the sample carries them so it is shaped like a row
+* the editor saved.
+*/
+const block = {
+	direction: "ltr",
+	format: "",
+	indent: 0,
+	version: 1
+};
+function text(value, format = 0) {
+	return {
+		type: "text",
+		text: value,
+		format,
+		detail: 0,
+		mode: "normal",
+		style: "",
+		version: 1
+	};
+}
+function paragraph(children) {
+	return {
+		type: "paragraph",
+		children,
+		textFormat: 0,
+		textStyle: "",
+		...block
+	};
+}
+const BOLD = 1;
+const richTextSample = {
+	id: "sample-rich-text",
+	blockType: "richText",
+	content: { root: {
+		type: "root",
+		...block,
+		children: [
+			{
+				type: "heading",
+				tag: "h2",
+				children: [text("What to expect at your first visit")],
+				...block
+			},
+			paragraph([
+				text("Your first appointment runs about "),
+				text("fifty minutes", BOLD),
+				text(". We start with a conversation about what brought you in, then a movement assessment, and you leave with a written plan and the first two exercises.")
+			]),
+			paragraph([
+				text("Bring comfortable clothes and any recent imaging. If you have questions before you arrive, "),
+				{
+					type: "link",
+					fields: {
+						url: "https://example.com/contact",
+						newTab: true,
+						linkType: "custom"
+					},
+					children: [text("get in touch")],
+					...block,
+					version: 3
+				},
+				text(".")
+			]),
+			{
+				type: "list",
+				listType: "bullet",
+				tag: "ul",
+				start: 1,
+				children: [
+					"Assessment and written plan",
+					"Hands-on treatment where it helps",
+					"Exercises you can do at home, with video"
+				].map((item, i) => ({
+					type: "listitem",
+					value: i + 1,
+					children: [text(item)],
+					...block
+				})),
+				...block
+			}
+		]
+	} }
+};
+//#endregion
+//#region src/blocks/showcase-panels/sample.ts
+/** Three panels: the minimum the layout is designed around. */
+const showcasePanelsSample = {
+	id: "sample-showcase-panels",
+	blockType: "showcasePanels",
+	items: [
+		{
+			id: "sample-panel-back",
+			title: "Back and neck pain",
+			summary: "Most back pain settles with the right movement, not rest. We find what is driving yours and build a plan around your week, not ours.",
+			image: sampleImage({
+				label: "Panel 1 · 1400 × 1000",
+				width: 1400,
+				height: 1e3,
+				alt: "A physiotherapist guiding a patient through a stretch"
+			}),
+			href: "/services/back-and-neck",
+			numeral: "01"
+		},
+		{
+			id: "sample-panel-sport",
+			title: "Sports injuries",
+			summary: "From a rolled ankle to a post-surgical knee: a return-to-play plan with clear milestones, so you know when you are ready.",
+			image: sampleImage({
+				label: "Panel 2 · 1400 × 1000",
+				width: 1400,
+				height: 1e3,
+				alt: "A runner mid-stride on a track"
+			}),
+			href: "/services/sports-injuries"
+		},
+		{
+			id: "sample-panel-post-op",
+			title: "Post-operative rehab",
+			summary: "We work from your surgeon's protocol and keep them in the loop, so every stage of recovery is signed off before the next begins.",
+			image: sampleImage({
+				label: "Panel 3 · 1400 × 1000",
+				width: 1400,
+				height: 1e3,
+				alt: "A patient on a rehabilitation bike"
+			})
+		}
+	],
+	spineVariant: "numbered",
+	watermark: "LARKSPUR",
+	defaultActiveIndex: 0
+};
+//#endregion
+//#region src/blocks/testimonial-masonry/sample.ts
+function avatar(name) {
+	return sampleImage({
+		label: name.split(" ").map((part) => part[0]).join(""),
+		width: 160,
+		height: 160,
+		alt: `Portrait of ${name}`
+	});
+}
+//#endregion
+//#region src/samples.ts
+/**
+* Every block the package ships, rendered without a CMS row.
+*
+* A Block library page (BIS-52) renders these live so an admin can see each
+* block before enabling it. Each sample lives beside its block's `config.ts`
+* and `component.tsx` as `sample.ts`, and `src/__tests__/samples.test.tsx`
+* locks the contract: one entry per slug, `blockType` matching the key, every
+* config field exercised at least once, and every image self-contained.
+*
+* React-free on purpose: it is read from a Global's field config, which
+* Payload loads in plain Node like the rest of this entry, as well as from a
+* route handler. Only what this package ships is here; a site supplies samples
+* for its own blocks through the Block library factory, whose option BIS-52
+* names.
+*/
+const blockSamples = {
+	hero: heroSample,
+	richText: richTextSample,
+	showcasePanels: showcasePanelsSample,
+	processSteps: processStepsSample,
+	faqColumns: faqColumnsSample,
+	testimonialMasonry: {
+		id: "sample-testimonial-masonry",
+		blockType: "testimonialMasonry",
+		eyebrow: "From our patients",
+		title: "What people say after they finish",
+		description: "Every review here was left by a patient we discharged. We do not edit them.",
+		items: [
+			{
+				id: "sample-quote-1",
+				content: "I had written off running. Eight weeks later I did a parkrun, and the plan I was given actually fitted around a job and two kids.",
+				author: {
+					name: "Priya Natarajan",
+					title: "Recovered from a hamstring tear",
+					avatar: avatar("Priya Natarajan")
+				}
+			},
+			{
+				id: "sample-quote-2",
+				content: "The first physio who explained what was wrong in words I understood.",
+				author: {
+					name: "Tom Ferreira",
+					title: "Lower back pain",
+					avatar: avatar("Tom Ferreira")
+				}
+			},
+			{
+				id: "sample-quote-3",
+				content: "My surgeon said my knee was ahead of schedule at every check-in. That was the rehab, not me.",
+				author: {
+					name: "Aisha Bello",
+					title: "ACL reconstruction"
+				}
+			},
+			{
+				id: "sample-quote-4",
+				content: "Booked on a Tuesday, seen on the Thursday. The shoulder I had put up with for a year was sorted in six visits.",
+				author: {
+					name: "Marcus Whitfield",
+					title: "Frozen shoulder",
+					avatar: avatar("Marcus Whitfield")
+				}
+			},
+			{
+				id: "sample-quote-5",
+				content: "They kept my consultant in the loop the whole way through, which nobody else had bothered to do.",
+				author: { name: "Helen Ostrowski" }
+			},
+			{
+				id: "sample-quote-6",
+				content: "Honest about what would take time and what would not. I would send my parents here.",
+				author: {
+					name: "Daniel Kim",
+					title: "Ankle sprain",
+					avatar: avatar("Daniel Kim")
+				}
+			}
+		],
+		link: {
+			label: "Read every review",
+			href: "https://example.com/reviews",
+			newTab: true
+		},
+		minItemsForFade: 6,
+		maxVisibleRows: 2
+	},
+	nap: napSample
+};
+//#endregion
+export { FaqColumnsBlock, HeroBlock, MIN_ROWS_ARRAY_FIELD, NapBlock, ProcessStepsBlock, RichTextBlock, ShowcasePanelsBlock, TestimonialMasonryBlock, blockSamples, emptyRows, headingFields, imageField, linkField, linkFields, resolveMedia, sampleImage };
 
 //# sourceMappingURL=index.mjs.map