{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contact-channels", "title": "Contact Channels", "description": "Form-free Payload contact block: a grid of validated email, phone, and URL channels.", "registryDependencies": [ "badge" ], "files": [ { "path": "payload-components/source/blocks/shared/safeUrls.ts", "content": "const approvedEmbedHosts = new Set([\n 'airtable.com',\n 'docs.google.com',\n 'form.typeform.com',\n 'lookerstudio.google.com',\n 'maps.google.com',\n 'player.vimeo.com',\n 'vimeo.com',\n 'www.airtable.com',\n 'www.google.com',\n 'www.youtube-nocookie.com',\n 'www.youtube.com',\n 'youtube-nocookie.com',\n 'youtube.com',\n])\n\nconst approvedEmbedHostSuffixes = [\n '.airtable.com',\n '.google.com',\n '.typeform.com',\n '.vimeo.com',\n '.youtube-nocookie.com',\n '.youtube.com',\n]\n\nconst embedUrlError = 'Use an approved HTTPS embed URL.'\nconst formActionError = 'Use a same-origin path, such as /api/newsletter.'\nconst sameOriginBase = 'https://payload-components.local'\n\nconst isApprovedEmbedHost = (hostname: string) => {\n const normalizedHost = hostname.toLowerCase()\n\n return (\n approvedEmbedHosts.has(normalizedHost) ||\n approvedEmbedHostSuffixes.some((suffix) => normalizedHost.endsWith(suffix))\n )\n}\n\nexport const getSafeEmbedUrl = (value: unknown) => {\n if (typeof value !== 'string') return undefined\n\n const trimmed = value.trim()\n\n if (!trimmed) return undefined\n\n try {\n const parsed = new URL(trimmed)\n\n if (parsed.protocol !== 'https:' || parsed.username || parsed.password) {\n return undefined\n }\n\n if (!isApprovedEmbedHost(parsed.hostname)) {\n return undefined\n }\n\n return parsed.toString()\n } catch {\n return undefined\n }\n}\n\nexport const validateEmbedUrl = (value: unknown) => getSafeEmbedUrl(value) ? true : embedUrlError\n\nexport const getSafeFormAction = (value: unknown) => {\n if (typeof value !== 'string') return undefined\n\n const trimmed = value.trim()\n\n if (!trimmed || !trimmed.startsWith('/') || trimmed.startsWith('//') || trimmed.includes('\\\\')) {\n return undefined\n }\n\n try {\n const parsed = new URL(trimmed, sameOriginBase)\n\n if (parsed.origin !== sameOriginBase) {\n return undefined\n }\n\n return `${parsed.pathname}${parsed.search}${parsed.hash}`\n } catch {\n return undefined\n }\n}\n\nexport const validateSameOriginFormAction = (value: unknown) => {\n if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) {\n return true\n }\n\n return getSafeFormAction(value) ? true : formActionError\n}\n", "type": "registry:file", "target": "~/src/blocks/shared/safeUrls.ts" }, { "path": "payload-components/source/blocks/shared/contactUrls.ts", "content": "import { getSafeFormAction } from './safeUrls'\n\nexport const contactChannelTypeOptions = ['email', 'phone', 'url'] as const\n\nexport type ContactChannelType = (typeof contactChannelTypeOptions)[number]\n\ntype ContactValidationContext = {\n siblingData?: Record | null\n}\n\nconst contactErrors: Record = {\n email: 'Enter a valid email address.',\n phone: 'Enter a valid phone number with 7 to 15 digits.',\n url: 'Enter an HTTPS URL or a same-origin path such as /support.',\n}\n\nexport const getSafeContactHref = (type: unknown, value: unknown) => {\n if (\n !contactChannelTypeOptions.includes(type as ContactChannelType) ||\n typeof value !== 'string'\n ) {\n return undefined\n }\n\n const trimmed = value.trim()\n\n if (!trimmed || /[\\r\\n]/.test(trimmed)) return undefined\n\n if (type === 'email') {\n return /^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$/i.test(trimmed)\n ? `mailto:${trimmed}`\n : undefined\n }\n\n if (type === 'phone') {\n const normalized = trimmed.replace(/[\\s().-]/g, '')\n\n return /^\\+?\\d{7,15}$/.test(normalized) ? `tel:${normalized}` : undefined\n }\n\n const sameOriginPath = getSafeFormAction(trimmed)\n if (sameOriginPath) return sameOriginPath\n\n try {\n const parsed = new URL(trimmed)\n\n if (parsed.protocol !== 'https:' || parsed.username || parsed.password) return undefined\n\n return parsed.toString()\n } catch {\n return undefined\n }\n}\n\nexport const validateContactValue = (\n value: unknown,\n { siblingData }: ContactValidationContext,\n) => {\n const type = siblingData?.type\n\n if (!contactChannelTypeOptions.includes(type as ContactChannelType)) {\n return 'Choose a contact channel type before entering its value.'\n }\n\n return getSafeContactHref(type, value) ? true : contactErrors[type as ContactChannelType]\n}\n", "type": "registry:file", "target": "~/src/blocks/shared/contactUrls.ts" }, { "path": "payload-components/source/blocks/shared/contactFields.ts", "content": "import type { Field } from 'payload'\n\nimport { contactChannelTypeOptions, validateContactValue } from './contactUrls'\n\n/**\n * Shared field core for the Contact component family.\n *\n * Every contact variant (contact-routing-form, contact-channels, …) spreads\n * `contactFields` first for the shared heading, then appends its own\n * variant-specific shape — the inquiry form for the routing layout, or the\n * footnote for the channels-only layout. Editing the shared\n * eyebrow/title/description here updates every installed contact block at once,\n * so the family never drifts field-by-field across a repo.\n *\n * `contactChannelFields` is the one-channel shape (label, type, value, optional\n * description) reused by every variant, so a channel looks and validates the\n * same everywhere it appears. The `value` validator lives in\n * `@/blocks/shared/contactUrls` and rejects anything that would not resolve to a\n * safe `mailto:` / `tel:` / HTTPS href, so an editor cannot publish a channel\n * that renders as a dead or unsafe link.\n *\n * Installed once per repo at `src/blocks/shared/contactFields.ts`; re-running\n * `payload-components add contact-*` never overwrites a copy you have already edited.\n */\nexport const contactFields: Field[] = [\n {\n name: 'eyebrow',\n type: 'text',\n },\n {\n name: 'title',\n type: 'text',\n required: true,\n },\n {\n name: 'description',\n type: 'textarea',\n },\n]\n\nexport const contactChannelFields: Field[] = [\n {\n name: 'label',\n type: 'text',\n required: true,\n },\n {\n name: 'type',\n type: 'select',\n options: contactChannelTypeOptions.map((value) => ({\n label: value.charAt(0).toUpperCase() + value.slice(1),\n value,\n })),\n required: true,\n },\n {\n name: 'value',\n type: 'text',\n required: true,\n validate: validateContactValue,\n },\n {\n name: 'description',\n type: 'text',\n },\n]\n", "type": "registry:file", "target": "~/src/blocks/shared/contactFields.ts" }, { "path": "payload-components/source/blocks/ContactChannels/config.ts", "content": "import type { Block } from 'payload'\n\nimport { contactChannelFields, contactFields } from '@/blocks/shared/contactFields'\n\nexport const ContactChannels: Block = {\n slug: 'contactChannels',\n // Existing apps must migrate stored data before adopting this identifier:\n // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations\n dbName: 'pc_contact_chan',\n interfaceName: 'ContactChannelsBlock',\n fields: [\n // Shared contact core (eyebrow, title, description). Variant-specific fields\n // follow; edit the shared shape in @/blocks/shared/contactFields.\n ...contactFields,\n {\n name: 'channels',\n type: 'array',\n required: true,\n minRows: 2,\n maxRows: 6,\n admin: {\n initCollapsed: true,\n },\n // Shared channel shape — see @/blocks/shared/contactFields.\n fields: contactChannelFields,\n },\n {\n name: 'footnote',\n type: 'text',\n admin: {\n description: 'Optional response-time or hours note rendered under the channels.',\n },\n },\n ],\n labels: {\n plural: 'Contact Channels Blocks',\n singular: 'Contact Channels',\n },\n}\n", "type": "registry:file", "target": "~/src/blocks/ContactChannels/config.ts" }, { "path": "payload-components/source/blocks/ContactChannels/Component.tsx", "content": "import React from 'react'\n\nimport type { ContactChannelsBlock as ContactChannelsBlockData } from '@/payload-types'\n\nimport { getSafeContactHref } from '@/blocks/shared/contactUrls'\nimport { Badge } from '@/components/ui/badge'\nimport { cn } from '@/utilities/ui'\n\ntype Props = ContactChannelsBlockData & {\n id?: string\n className?: string\n disableInnerContainer?: boolean\n}\n\nexport const ContactChannelsBlock: React.FC = ({\n channels,\n className,\n description,\n disableInnerContainer,\n eyebrow,\n footnote,\n id,\n title,\n}) => {\n return (\n
\n
\n \n
\n {eyebrow ? (\n \n {eyebrow}\n \n ) : null}\n\n

\n {title}\n

\n\n {description ? (\n

{description}

\n ) : null}\n
\n\n {channels && channels.length > 0 ? (\n
\n {channels.map((channel, index) => {\n /* Rejects anything that would not resolve to a safe mailto:,\n tel:, same-origin path, or HTTPS URL; an unsafe value falls\n back to plain text rather than rendering a dead link. */\n const href = getSafeContactHref(channel.type, channel.value)\n\n return (\n \n

{channel.label}

\n {href ? (\n \n {channel.value}\n \n ) : (\n \n {channel.value}\n \n )}\n {channel.description ? (\n

\n {channel.description}\n

\n ) : null}\n
\n )\n })}\n
\n ) : null}\n\n {footnote ?

{footnote}

: null}\n \n \n
\n )\n}\n", "type": "registry:file", "target": "~/src/blocks/ContactChannels/Component.tsx" } ], "meta": { "payloadComponent": { "installCommand": "payload-components add contact-channels", "postInstall": [ "generate:types", "generate:importmap" ], "requiresPayloadComponentWrapper": true, "supportedTargets": [ "payload-website-starter", "payload-blocks-app" ] } }, "docs": "Payload Components installs this as a Payload CMS block for the Payload website starter shape.\n\nRecommended install:\n\n```bash\npnpm payload-components add contact-channels\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/contact-channels.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add contact-channels` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.", "type": "registry:block" }