blocks-dusted 0.1.1 → 0.1.2

package/templates/collections/Testimonials/README.md

@@ -0,0 +1,11 @@
+# Testimonials Collection Template
+
+Installs `src/collections/Testimonials.ts` and registers `Testimonials` in `payload.config.ts` when the collections array can be patched safely.
+
+The source was adapted from the Raw Dusted Blocks Testimonials collection for the default Payload starter helper paths:
+
+- `../access/authenticated`
+- `../access/anyone`
+- `@/fields/defaultLexical`
+
+Review the installed collection before running Payload type generation.

package/templates/collections/Testimonials/Testimonials.ts

@@ -0,0 +1,161 @@
+import type { CollectionConfig } from 'payload'
+
+import { authenticated } from '../access/authenticated'
+import { anyone } from '../access/anyone'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const Testimonials: CollectionConfig = {
+  slug: 'testimonials',
+  orderable: true,
+  labels: {
+    singular: 'Testimonial',
+    plural: 'Testimonials',
+  },
+  access: {
+    create: authenticated,
+    delete: authenticated,
+    read: anyone,
+    update: authenticated,
+  },
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['clientName', 'designation', 'company'],
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      index: true,
+      admin: {
+        description: 'Use client name as title to identify this testimonial.',
+      },
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'clientName',
+          type: 'richText',
+          label: "Client's Name",
+          required: true,
+          editor: defaultLexical,
+          admin: {
+            width: '50%',
+          },
+        },
+        {
+          name: 'designation',
+          hidden: false,
+          type: 'richText',
+          label: 'Designation / Role',
+          required: false,
+          editor: defaultLexical,
+          admin: {
+            width: '50%',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'company',
+          type: 'richText',
+          label: 'Company',
+          required: false,
+          editor: defaultLexical,
+          admin: {
+            width: '50%',
+          },
+        },
+        {
+          type: 'group',
+          label: false,
+          admin: {
+            width: '50%',
+          },
+          fields: [
+            {
+              name: 'companyLogo',
+              type: 'upload',
+              relationTo: 'media',
+              label: 'Company Logo / Avatar',
+              required: false,
+            },
+            {
+              name: 'fallbackAvatarUrl',
+              type: 'text',
+              label: 'Fallback Logo/Avatar URL',
+              admin: {
+                description: 'External URL for avatar when no media upload is provided.',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'content',
+      type: 'richText',
+      label: 'Testimonial Content',
+      required: false,
+      editor: defaultLexical,
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'rating',
+          type: 'number',
+          label: 'Star Rating (1-5)',
+          min: 1,
+          max: 5,
+          admin: {
+            description: 'Numeric star rating used by Studio Testimonials block.',
+            width: '50%',
+          },
+        },
+        {
+          name: 'date',
+          type: 'text',
+          label: 'Date',
+          admin: {
+            description: 'Date string shown on marquee cards e.g. "March 2025".',
+            width: '50%',
+          },
+        },
+        {
+          name: 'ratingText',
+          type: 'text',
+          label: 'Rating (Text)',
+          admin: {
+            description: 'Displayed rating string e.g. "5 stars" or "5.0" used by Marquee block.',
+            width: '100%',
+          },
+        },
+      ],
+    },
+    {
+      name: 'sourceLogo',
+      type: 'upload',
+      relationTo: 'media',
+      label: 'Source Platform Logo',
+      admin: {
+        description: 'Platform logo for marquee cards, e.g. Upwork or Fiverr logo.',
+      },
+    },
+    {
+      name: 'sourceLogoAlt',
+      type: 'text',
+      label: 'Source Logo Alt Text',
+      defaultValue: 'logo alt',
+      admin: {
+        description: 'Alt text for the source platform logo.',
+      },
+    },
+  ],
+}
+
+export default Testimonials

package/templates/collections/Testimonials/manifest.json

@@ -0,0 +1,55 @@
+{
+  "type": "collection",
+  "name": "Testimonials",
+  "label": "Testimonials Collection",
+  "slug": "testimonials",
+  "version": "0.0.1",
+  "source": {
+    "referencePath": "Raw Dusted Blocks/dusted-src (to add into CLI)/src/collections/Testimonials.ts"
+  },
+  "files": [
+    {
+      "from": "Testimonials.ts",
+      "to": "src/collections/Testimonials.ts"
+    }
+  ],
+  "dependencies": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/access/authenticated.ts",
+      "reason": "Testimonials uses the default authenticated access helper."
+    },
+    {
+      "path": "src/access/anyone.ts",
+      "reason": "Testimonials uses the default anyone read access helper."
+    },
+    {
+      "path": "src/fields/defaultLexical.ts",
+      "reason": "Testimonials richText fields use the project's defaultLexical editor helper."
+    },
+    {
+      "path": "src/collections/Media.ts",
+      "reason": "Testimonials upload fields relate to the media collection."
+    }
+  ],
+  "optionalProjectFiles": [
+    {
+      "path": "src/payload.config.ts",
+      "reason": "Installer can register Testimonials in the Payload collections array."
+    }
+  ],
+  "payloadConfigRegistration": {
+    "enabled": true,
+    "exportName": "Testimonials",
+    "importPath": "./collections/Testimonials"
+  },
+  "manual": [
+    "Review src/collections/Testimonials.ts against the target project's access helper paths, media slug, and defaultLexical helper before using it in production.",
+    "Run the target project's Payload type-generation command after installing the collection.",
+    "Run formatter, linter, TypeScript, and build checks after installation."
+  ],
+  "notes": [
+    "This collection is based on the Raw Dusted Blocks Testimonials reference, adjusted to the default Payload starter access helper paths.",
+    "The installer patches payload.config collections registration only when it can find a clear collections array."
+  ]
+}

package/templates/components/RichText/README.md

@@ -0,0 +1,13 @@
+# RichText Component Template
+
+This template restructures the default Payload starter RichText component into the Payload Rich Text Dusted Standard folder shape.
+
+It is intentionally limited to default Payload starter behaviour:
+
+- internal page and post links
+- Lexical text formatting
+- embedded `banner`, `code`, and `mediaBlock` blocks
+
+Do not add custom reference-project block mappings unless the target project's RichText editor configuration enables those blocks.
+
+The current `blocks-dusted` installer is still block-template-first, so this component template is source material for the next component installer milestone rather than an installable block template.

package/templates/components/RichText/converter/componentConverter/blocks.tsx

@@ -0,0 +1,43 @@
+import type React from 'react'
+import type { SerializedBlockNode } from '@payloadcms/richtext-lexical'
+
+import { BannerBlock } from '@/blocks/Banner/Component'
+import { CodeBlock } from '@/blocks/Code/Component'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import type { CodeBlockProps } from '@/blocks/Code/Component'
+import type {
+  BannerBlock as BannerBlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
+
+type BlockConverter<T> = (props: { node?: SerializedBlockNode<T> }) => React.ReactNode
+
+const banner: BlockConverter<BannerBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return <BannerBlock className="col-start-2 mb-4" {...node.fields} />
+}
+
+const mediaBlock: BlockConverter<MediaBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return (
+    <MediaBlock
+      className="col-start-1 col-span-3"
+      imgClassName="m-0"
+      {...node.fields}
+      captionClassName="mx-auto max-w-[48rem]"
+      enableGutter={false}
+      disableInnerContainer={true}
+    />
+  )
+}
+
+const code: BlockConverter<CodeBlockProps> = ({ node }) => {
+  if (!node?.fields) return null
+  return <CodeBlock className="col-start-2" {...node.fields} />
+}
+
+export const blockConverters = {
+  banner,
+  mediaBlock,
+  code,
+}

package/templates/components/RichText/converter/componentConverter/types.ts

@@ -0,0 +1,11 @@
+import type { DefaultNodeTypes, SerializedBlockNode } from '@payloadcms/richtext-lexical'
+
+import type { CodeBlockProps } from '@/blocks/Code/Component'
+import type {
+  BannerBlock as BannerBlockProps,
+  MediaBlock as MediaBlockProps,
+} from '@/payload-types'
+
+export type RichTextEmbeddedBlock = BannerBlockProps | MediaBlockProps | CodeBlockProps
+
+export type NodeTypes = DefaultNodeTypes | SerializedBlockNode<RichTextEmbeddedBlock>

package/templates/components/RichText/converter/index.tsx

@@ -0,0 +1,18 @@
+import {
+  JSXConvertersFunction,
+  LinkJSXConverter,
+} from '@payloadcms/richtext-lexical/react'
+
+import { internalDocToHref } from '@/components/RichText/converter/internalLinks'
+import { textConverter } from '@/components/RichText/converter/textConverter'
+import { blockConverters } from '@/components/RichText/converter/componentConverter/blocks'
+import type { NodeTypes } from '@/components/RichText/converter/componentConverter/types'
+
+export type { NodeTypes } from '@/components/RichText/converter/componentConverter/types'
+
+export const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
+  ...defaultConverters,
+  ...LinkJSXConverter({ internalDocToHref }),
+  ...textConverter,
+  blocks: blockConverters,
+})

package/templates/components/RichText/converter/internalLinks.tsx

@@ -0,0 +1,45 @@
+import type { SerializedLinkNode } from '@payloadcms/richtext-lexical'
+
+type LinkedDocument = {
+  slug?: string | null
+  breadcrumbs?: Array<{
+    slug?: string | null
+    url?: string | null
+  }> | null
+}
+
+const pagePathFromDoc = (value: LinkedDocument): string => {
+  const crumbs = Array.isArray(value.breadcrumbs) ? value.breadcrumbs : []
+  const lastCrumb = crumbs[crumbs.length - 1]
+
+  if (typeof lastCrumb?.url === 'string' && lastCrumb.url) return lastCrumb.url
+
+  const segments = crumbs
+    .map((crumb) => (typeof crumb?.slug === 'string' ? crumb.slug : ''))
+    .filter(Boolean)
+
+  if (segments.length > 0) return `/${segments.join('/')}`
+
+  const slug = typeof value.slug === 'string' ? value.slug : ''
+  if (!slug || slug === 'home') return '/'
+  return `/${slug.replace(/^\/+/, '')}`
+}
+
+export const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
+  const doc = linkNode.fields.doc
+  const relationTo = doc?.relationTo
+  const value = doc?.value
+
+  if (!relationTo || typeof value !== 'object' || value === null) return '#'
+
+  switch (relationTo) {
+    case 'pages':
+      return pagePathFromDoc(value as LinkedDocument)
+    case 'posts': {
+      const slug = (value as LinkedDocument).slug
+      return typeof slug === 'string' && slug ? `/posts/${slug}` : '#'
+    }
+    default:
+      return '#'
+  }
+}

package/templates/components/RichText/converter/textConverter.tsx

@@ -0,0 +1,27 @@
+import type React from 'react'
+import type { SerializedTextNode } from '@payloadcms/richtext-lexical'
+import type { JSXConverters } from '@payloadcms/richtext-lexical/react'
+
+const IS_BOLD = 1
+const IS_ITALIC = 2
+const IS_STRIKETHROUGH = 4
+const IS_UNDERLINE = 8
+const IS_CODE = 16
+const IS_SUBSCRIPT = 32
+const IS_SUPERSCRIPT = 64
+
+export const textConverter: JSXConverters<SerializedTextNode> = {
+  text: ({ node }) => {
+    let output: React.ReactNode = node.text
+
+    if (node.format & IS_BOLD) output = <strong>{output}</strong>
+    if (node.format & IS_ITALIC) output = <em>{output}</em>
+    if (node.format & IS_STRIKETHROUGH) output = <s>{output}</s>
+    if (node.format & IS_UNDERLINE) output = <u>{output}</u>
+    if (node.format & IS_CODE) output = <code>{output}</code>
+    if (node.format & IS_SUBSCRIPT) output = <sub>{output}</sub>
+    if (node.format & IS_SUPERSCRIPT) output = <sup>{output}</sup>
+
+    return output
+  },
+}

package/templates/components/RichText/index.tsx

@@ -0,0 +1,35 @@
+import type React from 'react'
+import { type DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
+import { RichText as ConvertRichText } from '@payloadcms/richtext-lexical/react'
+
+import { jsxConverters } from '@/components/RichText/converter'
+import { cn } from '@/utilities/ui'
+
+type Props = {
+  data?: DefaultTypedEditorState | null
+  enableGutter?: boolean
+  enableProse?: boolean
+} & React.HTMLAttributes<HTMLDivElement>
+
+export default function RichText(props: Props) {
+  const { className, enableProse = true, enableGutter = true, data, ...rest } = props
+
+  if (!data) return null
+
+  return (
+    <ConvertRichText
+      converters={jsxConverters}
+      data={data}
+      className={cn(
+        'payload-richtext',
+        {
+          container: enableGutter,
+          'max-w-none': !enableGutter,
+          'mx-auto prose md:prose-md dark:prose-invert': enableProse,
+        },
+        className,
+      )}
+      {...rest}
+    />
+  )
+}

package/templates/components/RichText/manifest.json

@@ -0,0 +1,80 @@
+{
+    "type":  "component",
+    "name":  "RichText",
+    "label":  "Payload RichText Dusted Standard",
+    "slug":  "RichText",
+    "version":  "0.0.1",
+    "source":  {
+                   "defaultPath":  "src/components/RichText/index.tsx",
+                   "referencePath":  "Raw Dusted Blocks/dusted-src (to add into CLI)/src/components/RichText"
+               },
+    "files":  [
+                  {
+                      "from":  "index.tsx",
+                      "to":  "src/components/RichText/index.tsx"
+                  },
+                  {
+                      "from":  "converter/index.tsx",
+                      "to":  "src/components/RichText/converter/index.tsx"
+                  },
+                  {
+                      "from":  "converter/internalLinks.tsx",
+                      "to":  "src/components/RichText/converter/internalLinks.tsx"
+                  },
+                  {
+                      "from":  "converter/textConverter.tsx",
+                      "to":  "src/components/RichText/converter/textConverter.tsx"
+                  },
+                  {
+                      "from":  "converter/componentConverter/blocks.tsx",
+                      "to":  "src/components/RichText/converter/componentConverter/blocks.tsx"
+                  },
+                  {
+                      "from":  "converter/componentConverter/types.ts",
+                      "to":  "src/components/RichText/converter/componentConverter/types.ts"
+                  }
+              ],
+    "dependencies":  [
+                         {
+                             "name":  "@payloadcms/richtext-lexical"
+                         }
+                     ],
+    "requiredProjectFiles":  [
+                                 {
+                                     "path":  "src/utilities/ui.ts",
+                                     "reason":  "RichText uses cn from @/utilities/ui."
+                                 },
+                                 {
+                                     "path":  "src/blocks/Banner/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for banner."
+                                 },
+                                 {
+                                     "path":  "src/blocks/Code/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for code."
+                                 },
+                                 {
+                                     "path":  "src/blocks/MediaBlock/Component.tsx",
+                                     "reason":  "Default Payload RichText embedded block mapping for mediaBlock."
+                                 }
+                             ],
+    "optionalProjectFiles":  [
+                                 {
+                                     "path":  "src/collections/Posts/index.ts",
+                                     "reason":  "Inspect RichText editor features and embedded BlocksFeature configuration before installing."
+                                 }
+                             ],
+    "manual":  [
+                   "The existing src/components/RichText folder is backed up before installation; review the backup and copy any project-specific behaviour missing from the newly installed RichText structure.",
+                   "Install this component only after inspecting the target project\u0027s RichText editor configuration.",
+                   "This default template maps only the Payload starter embedded RichText blocks: banner, code, and mediaBlock.",
+                   "Add cta or other block mappings only if the target RichText field\u0027s BlocksFeature actually enables those blocks.",
+                   "Keep internal link routes aligned with the target project\u0027s real pages/posts routes.",
+                   "Run the target project\u0027s Payload type-generation command if generated types are stale.",
+                   "Run formatter, linter, TypeScript, and build checks after installation."
+               ],
+    "notes":  [
+                  "This is a Layer 2 reusable core component template, not a Payload block template.",
+                  "Do not copy reference-project preview-link-card, custom media, custom color state, or non-starter block mappings into default Payload installs."
+              ],
+    "backupExistingDestination":  true
+}