payload-next-starter 1.0.4 → 1.0.6

package/bin/setup.js

@@ -36,6 +36,9 @@ try {
   mkdirSync(join(targetDir, 'src/app/(payload)'), { recursive: true })
   mkdirSync(join(targetDir, 'src/app/api/[...payload]'), { recursive: true })
   mkdirSync(join(targetDir, 'src/collections'), { recursive: true })
+  mkdirSync(join(targetDir, 'src/components'), { recursive: true })
+  mkdirSync(join(targetDir, 'src/components/blocks'), { recursive: true })
+  mkdirSync(join(targetDir, 'src/lib'), { recursive: true })
 } catch (e) {
   // Directories might already exist
 }
@@ -71,7 +74,16 @@ if (existsSync(join(templatesDir, 'app/(frontend)'))) {
     recursive: true,
     force: true,
   })
-  console.log('  ✓ Frontend pages (about-us, contact-us, share)/')
+  console.log('  ✓ Frontend pages (about-us, contact-us, share, [slug])/')
+}
+
+// Copy components
+if (existsSync(join(templatesDir, 'components'))) {
+  cpSync(join(templatesDir, 'components'), join(targetDir, 'src/components'), {
+    recursive: true,
+    force: true,
+  })
+  console.log('  ✓ components/ (blocks, BlockRenderer, RichTextContent)/')
 }
 
 if (existsSync(join(templatesDir, 'app/api/[...payload]'))) {

package/package.json

@@ -1,13 +1,21 @@
 {
   "name": "payload-next-starter",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "PayloadCMS starter for Next.js - install into any Next.js app",
   "license": "MIT",
   "type": "module",
   "bin": "./bin/setup.js",
+  "exports": {
+    "./blocks": "./src/components/blocks/index.ts",
+    "./BlockRenderer": "./src/components/BlockRenderer.tsx",
+    "./RichTextContent": "./src/components/RichTextContent.tsx"
+  },
   "files": [
     "bin/",
     "templates/",
+    "src/components/",
+    "src/collections/",
+    "src/lib/",
     "README.md"
   ],
   "keywords": [
@@ -35,6 +43,7 @@
     "generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
     "lint": "cross-env NODE_OPTIONS=--no-deprecation eslint .",
     "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "seed:pages": "cross-env NODE_OPTIONS=--no-deprecation tsx src/scripts/seedPages.ts",
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "test": "pnpm run test:int && pnpm run test:e2e",
     "test:e2e": "cross-env NODE_OPTIONS=\"--no-deprecation --import=tsx/esm\" playwright test --config=playwright.config.ts",

package/src/collections/Media.ts

@@ -0,0 +1,16 @@
+import type { CollectionConfig } from 'payload'
+
+export const Media: CollectionConfig = {
+  slug: 'media',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+  ],
+  upload: true,
+}

package/src/collections/Pages.ts

@@ -0,0 +1,358 @@
+import type { CollectionConfig, Block } from 'payload'
+
+const getPreviewPath = (slug?: string) => {
+  const baseURL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
+  const path = slug === 'home' || !slug ? '/' : `/${slug}`
+  const previewSecret = process.env.PAYLOAD_SECRET || ''
+
+  return `${baseURL}/next/preview?secret=${encodeURIComponent(previewSecret)}&slug=${encodeURIComponent(path)}`
+}
+
+const HeroBlock: Block = {
+  slug: 'hero',
+  labels: {
+    singular: 'Hero Section',
+    plural: 'Hero Sections',
+  },
+  fields: [
+    { name: 'title', type: 'text', required: true },
+    { name: 'subtitle', type: 'textarea' },
+    { name: 'backgroundImage', type: 'upload', relationTo: 'media' },
+    { name: 'ctaText', type: 'text', admin: { description: 'Call to action button text' } },
+    { name: 'ctaLink', type: 'text', admin: { description: 'Call to action button link' } },
+    {
+      name: 'alignment',
+      type: 'select',
+      defaultValue: 'center',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Center', value: 'center' },
+        { label: 'Right', value: 'right' },
+      ],
+    },
+  ],
+}
+
+const ContentBlock: Block = {
+  slug: 'content',
+  labels: {
+    singular: 'Content Section',
+    plural: 'Content Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'body', type: 'richText', required: true },
+  ],
+}
+
+const ContactFormBlock: Block = {
+  slug: 'contactForm',
+  labels: {
+    singular: 'Contact Form',
+    plural: 'Contact Forms',
+  },
+  fields: [
+    { name: 'heading', type: 'text', defaultValue: 'Get In Touch' },
+    { name: 'description', type: 'textarea' },
+    { name: 'email', type: 'text', required: true },
+    { name: 'phone', type: 'text' },
+    { name: 'address', type: 'textarea' },
+    {
+      name: 'formFields',
+      type: 'select',
+      hasMany: true,
+      defaultValue: ['name', 'email', 'message'],
+      options: [
+        { label: 'Name', value: 'name' },
+        { label: 'Email', value: 'email' },
+        { label: 'Phone', value: 'phone' },
+        { label: 'Subject', value: 'subject' },
+        { label: 'Message', value: 'message' },
+      ],
+    },
+  ],
+}
+
+const FeaturesBlock: Block = {
+  slug: 'features',
+  labels: {
+    singular: 'Features Section',
+    plural: 'Features Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'items',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'icon', type: 'text', admin: { description: 'Emoji or icon name' } },
+        { name: 'title', type: 'text', required: true },
+        { name: 'description', type: 'textarea' },
+      ],
+    },
+    {
+      name: 'columns',
+      type: 'select',
+      defaultValue: '3',
+      options: [
+        { label: '2 Columns', value: '2' },
+        { label: '3 Columns', value: '3' },
+        { label: '4 Columns', value: '4' },
+      ],
+    },
+  ],
+}
+
+const ImageGalleryBlock: Block = {
+  slug: 'imageGallery',
+  labels: {
+    singular: 'Image Gallery',
+    plural: 'Image Galleries',
+  },
+  fields: [
+    { name: 'heading', type: 'text' },
+    {
+      name: 'images',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'image', type: 'upload', relationTo: 'media', required: true },
+        { name: 'caption', type: 'text' },
+      ],
+    },
+    {
+      name: 'columns',
+      type: 'select',
+      defaultValue: '3',
+      options: [
+        { label: '2 Columns', value: '2' },
+        { label: '3 Columns', value: '3' },
+        { label: '4 Columns', value: '4' },
+      ],
+    },
+  ],
+}
+
+const PricingBlock: Block = {
+  slug: 'pricing',
+  labels: {
+    singular: 'Pricing Section',
+    plural: 'Pricing Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text', defaultValue: 'Pricing Plans' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'plans',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'name', type: 'text', required: true },
+        { name: 'price', type: 'text', required: true },
+        { name: 'period', type: 'text', defaultValue: '/month' },
+        { name: 'description', type: 'textarea' },
+        {
+          name: 'features',
+          type: 'array',
+          fields: [{ name: 'feature', type: 'text', required: true }],
+        },
+        { name: 'ctaText', type: 'text', defaultValue: 'Get Started' },
+        { name: 'ctaLink', type: 'text' },
+        { name: 'highlighted', type: 'checkbox', defaultValue: false },
+      ],
+    },
+  ],
+}
+
+const TestimonialsBlock: Block = {
+  slug: 'testimonials',
+  labels: {
+    singular: 'Testimonials Section',
+    plural: 'Testimonials Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text', defaultValue: 'What Our Customers Say' },
+    {
+      name: 'testimonials',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'name', type: 'text', required: true },
+        { name: 'role', type: 'text' },
+        { name: 'company', type: 'text' },
+        { name: 'quote', type: 'textarea', required: true },
+        { name: 'avatar', type: 'upload', relationTo: 'media' },
+        {
+          name: 'rating',
+          type: 'select',
+          options: [
+            { label: '5 Stars', value: '5' },
+            { label: '4 Stars', value: '4' },
+            { label: '3 Stars', value: '3' },
+          ],
+        },
+      ],
+    },
+  ],
+}
+
+const CTABlock: Block = {
+  slug: 'cta',
+  labels: {
+    singular: 'Call to Action',
+    plural: 'Call to Actions',
+  },
+  fields: [
+    { name: 'heading', type: 'text', required: true },
+    { name: 'description', type: 'textarea' },
+    { name: 'buttonText', type: 'text', required: true },
+    { name: 'buttonLink', type: 'text', required: true },
+    { name: 'secondaryButtonText', type: 'text' },
+    { name: 'secondaryButtonLink', type: 'text' },
+    {
+      name: 'style',
+      type: 'select',
+      defaultValue: 'primary',
+      options: [
+        { label: 'Primary (Blue)', value: 'primary' },
+        { label: 'Secondary (Gray)', value: 'secondary' },
+        { label: 'Accent (Gradient)', value: 'accent' },
+      ],
+    },
+  ],
+}
+
+const TeamBlock: Block = {
+  slug: 'team',
+  labels: {
+    singular: 'Team Section',
+    plural: 'Team Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text', defaultValue: 'Meet Our Team' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'members',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'name', type: 'text', required: true },
+        { name: 'role', type: 'text', required: true },
+        { name: 'bio', type: 'textarea' },
+        { name: 'photo', type: 'upload', relationTo: 'media' },
+        { name: 'linkedin', type: 'text' },
+        { name: 'twitter', type: 'text' },
+      ],
+    },
+  ],
+}
+
+const FAQBlock: Block = {
+  slug: 'faq',
+  labels: {
+    singular: 'FAQ Section',
+    plural: 'FAQ Sections',
+  },
+  fields: [
+    { name: 'heading', type: 'text', defaultValue: 'Frequently Asked Questions' },
+    {
+      name: 'questions',
+      type: 'array',
+      minRows: 1,
+      fields: [
+        { name: 'question', type: 'text', required: true },
+        { name: 'answer', type: 'textarea', required: true },
+      ],
+    },
+  ],
+}
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'slug', '_status', 'updatedAt'],
+    livePreview: {
+      url: ({ data }) => {
+        const pageData = data as { slug?: string } | undefined
+        return getPreviewPath(pageData?.slug)
+      },
+    },
+    preview: ({ data }) => {
+      const pageData = data as { slug?: string } | undefined
+      return getPreviewPath(pageData?.slug)
+    },
+  },
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 300,
+      },
+      schedulePublish: true,
+    },
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'title',
+              type: 'text',
+              required: true,
+            },
+            {
+              name: 'slug',
+              type: 'text',
+              required: true,
+              unique: true,
+              index: true,
+              admin: {
+                description: 'URL path (e.g., "contact-us", "about", "pricing")',
+              },
+            },
+            {
+              name: 'layout',
+              type: 'blocks',
+              blocks: [
+                HeroBlock,
+                ContentBlock,
+                ContactFormBlock,
+                FeaturesBlock,
+                ImageGalleryBlock,
+                PricingBlock,
+                TestimonialsBlock,
+                CTABlock,
+                TeamBlock,
+                FAQBlock,
+              ],
+            },
+          ],
+        },
+        {
+          label: 'SEO',
+          fields: [
+            {
+              name: 'seo',
+              type: 'group',
+              fields: [
+                {
+                  name: 'metaTitle',
+                  type: 'text',
+                  admin: { description: 'Defaults to page title if empty' },
+                },
+                { name: 'metaDescription', type: 'textarea' },
+                { name: 'metaImage', type: 'upload', relationTo: 'media' },
+                { name: 'noIndex', type: 'checkbox', defaultValue: false },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/src/collections/Users.ts

@@ -0,0 +1,13 @@
+import type { CollectionConfig } from 'payload'
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+}

package/src/components/BlockRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import * as BlockComponents from './blocks'
+
+type BlockData = {
+  blockType: string
+  [key: string]: unknown
+}
+
+type Props = {
+  blocks: BlockData[]
+}
+
+const blockComponentMap = {
+  hero: BlockComponents.HeroBlock,
+  content: BlockComponents.ContentBlock,
+  contactForm: BlockComponents.ContactFormBlock,
+  features: BlockComponents.FeaturesBlock,
+  imageGallery: BlockComponents.ImageGalleryBlock,
+  pricing: BlockComponents.PricingBlock,
+  testimonials: BlockComponents.TestimonialsBlock,
+  cta: BlockComponents.CTABlock,
+  team: BlockComponents.TeamBlock,
+  faq: BlockComponents.FAQBlock,
+}
+
+export function BlockRenderer({ blocks }: Props) {
+  return (
+    <>
+      {blocks.map((block, index) => {
+        const BlockComponent = blockComponentMap[block.blockType as keyof typeof blockComponentMap]
+        if (!BlockComponent) return null
+
+        const { blockType, ...blockProps } = block as { blockType: string; [key: string]: unknown }
+        return <BlockComponent key={index} {...(blockProps as Record<string, unknown>)} />
+      })}
+    </>
+  )
+}

package/src/components/RichTextContent.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+type RichTextNode = {
+  type?: string
+  text?: string
+  format?: number | string
+  tag?: string
+  url?: string
+  fields?: {
+    url?: string
+    newTab?: boolean
+  }
+  children?: RichTextNode[]
+  listType?: 'bullet' | 'number'
+  value?: RichTextNode[]
+}
+
+type Props = {
+  content: unknown
+}
+
+function renderText(text: string | undefined, format: number | string | undefined, key: string) {
+  if (!text) return null
+
+  let node: React.ReactNode = text
+
+  if (typeof format === 'string') {
+    if (format.includes('bold')) node = <strong key={`${key}-bold`}>{node}</strong>
+    if (format.includes('italic')) node = <em key={`${key}-italic`}>{node}</em>
+    if (format.includes('underline')) node = <u key={`${key}-underline`}>{node}</u>
+  }
+
+  return <React.Fragment key={key}>{node}</React.Fragment>
+}
+
+function renderNodes(nodes: RichTextNode[] | undefined, keyPrefix = 'node'): React.ReactNode {
+  if (!nodes?.length) return null
+
+  return nodes.map((node, index) => {
+    const key = `${keyPrefix}-${index}`
+
+    if (node.text !== undefined) {
+      return renderText(node.text, node.format, key)
+    }
+
+    const children = renderNodes(node.children, key)
+
+    switch (node.type) {
+      case 'heading': {
+        const Tag = (node.tag || 'h2') as keyof React.JSX.IntrinsicElements
+        return <Tag key={key}>{children}</Tag>
+      }
+      case 'paragraph':
+        return <p key={key}>{children}</p>
+      case 'quote':
+        return <blockquote key={key}>{children}</blockquote>
+      case 'list':
+        return node.listType === 'number' ? <ol key={key}>{children}</ol> : <ul key={key}>{children}</ul>
+      case 'listitem':
+        return <li key={key}>{children}</li>
+      case 'link': {
+        const href = node.fields?.url || node.url || '#'
+        return (
+          <a key={key} href={href} target={node.fields?.newTab ? '_blank' : undefined} rel={node.fields?.newTab ? 'noreferrer noopener' : undefined}>
+            {children}
+          </a>
+        )
+      }
+      case 'linebreak':
+        return <br key={key} />
+      default:
+        return <React.Fragment key={key}>{children}</React.Fragment>
+    }
+  })
+}
+
+export function RichTextContent({ content }: Props) {
+  const root = content as { root?: { children?: RichTextNode[] } } | null
+
+  return <div>{renderNodes(root?.root?.children)}</div>
+}

package/src/components/blocks/CTABlock.tsx

@@ -0,0 +1,81 @@
+import Link from 'next/link'
+import React from 'react'
+
+type Props = {
+  heading?: string
+  description?: string
+  buttonText?: string
+  buttonLink?: string
+  secondaryButtonText?: string
+  secondaryButtonLink?: string
+  style?: 'primary' | 'secondary' | 'accent'
+}
+
+export function CTABlock({
+  heading,
+  description,
+  buttonText,
+  buttonLink,
+  secondaryButtonText,
+  secondaryButtonLink,
+  style = 'primary',
+}: Props) {
+  const backgrounds = {
+    primary: 'linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%)',
+    secondary: 'linear-gradient(135deg, #475569 0%, #334155 100%)',
+    accent: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
+  }
+
+  return (
+    <div
+      style={{
+        padding: '80px 40px',
+        background: backgrounds[style],
+        textAlign: 'center',
+        color: '#fff',
+      }}
+    >
+      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+        <h2 style={{ fontSize: '36px', marginBottom: '16px', fontWeight: 700 }}>{heading}</h2>
+        {description && (
+          <p style={{ fontSize: '20px', marginBottom: '32px', opacity: 0.9 }}>{description}</p>
+        )}
+        <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', flexWrap: 'wrap' }}>
+          {buttonText && buttonLink && (
+            <Link
+              href={buttonLink}
+              style={{
+                padding: '16px 32px',
+                background: '#fff',
+                color: '#1e3a5f',
+                textDecoration: 'none',
+                borderRadius: '12px',
+                fontSize: '18px',
+                fontWeight: 600,
+              }}
+            >
+              {buttonText}
+            </Link>
+          )}
+          {secondaryButtonText && secondaryButtonLink && (
+            <Link
+              href={secondaryButtonLink}
+              style={{
+                padding: '16px 32px',
+                background: 'transparent',
+                color: '#fff',
+                textDecoration: 'none',
+                borderRadius: '12px',
+                fontSize: '18px',
+                fontWeight: 600,
+                border: '2px solid #fff',
+              }}
+            >
+              {secondaryButtonText}
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}