+
+ )
+}
diff --git a/playground/src/app/(frontend)/page.tsx b/playground/src/app/(frontend)/page.tsx
new file mode 100644
index 0000000..6aba7d6
--- /dev/null
+++ b/playground/src/app/(frontend)/page.tsx
@@ -0,0 +1,5 @@
+import PageTemplate, { generateMetadata } from './[slug]/page'
+
+export default PageTemplate
+
+export { generateMetadata }
diff --git a/playground/src/app/(frontend)/posts/[slug]/page.client.tsx b/playground/src/app/(frontend)/posts/[slug]/page.client.tsx
new file mode 100644
index 0000000..7924477
--- /dev/null
+++ b/playground/src/app/(frontend)/posts/[slug]/page.client.tsx
@@ -0,0 +1,15 @@
+'use client'
+import { useHeaderTheme } from '../../../../providers/HeaderTheme'
+import React, { useEffect } from 'react'
+
+const PageClient: React.FC = () => {
+ /* Force the header to be dark mode while we have an image behind it */
+ const { setHeaderTheme } = useHeaderTheme()
+
+ useEffect(() => {
+ setHeaderTheme('dark')
+ }, [setHeaderTheme])
+ return
+
+
+ 404
+This page could not be found.
+
+ typeof post === 'object')}
+ />
+ )}
+
+
+
+
+ {post.relatedPosts && post.relatedPosts.length > 0 && (
+
+
+ )
+}
+
+export function generateMetadata(): Metadata {
+ return {
+ title: `Payload Website Template Posts`,
+ }
+}
diff --git a/playground/src/app/(frontend)/posts/page/[pageNumber]/page.tsx b/playground/src/app/(frontend)/posts/page/[pageNumber]/page.tsx
new file mode 100644
index 0000000..ade4aab
--- /dev/null
+++ b/playground/src/app/(frontend)/posts/page/[pageNumber]/page.tsx
@@ -0,0 +1,72 @@
+import type { Metadata } from 'next/types'
+
+import { CollectionArchive } from '../../../../../components/CollectionArchive'
+import { PageRange } from '../../../../../components/PageRange'
+import { Pagination } from '../../../../../components/Pagination'
+import configPromise from '@payload-config'
+import { getPayloadHMR } from '@payloadcms/next/utilities'
+import React from 'react'
+
+export const dynamic = 'force-static'
+export const revalidate = 600
+
+export default async function Page({ params: { pageNumber = 2 } }) {
+ const payload = await getPayloadHMR({ config: configPromise })
+
+ const posts = await payload.find({
+ collection: 'posts',
+ depth: 1,
+ limit: 12,
+ page: pageNumber,
+ })
+
+ return (
+
+
+
+
+
+ Posts
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+
+ )
+}
+
+export function generateMetadata({ params: { pageNumber = 2 } }): Metadata {
+ return {
+ title: `Payload Website Template Posts Page ${pageNumber}`,
+ }
+}
+
+export async function generateStaticParams() {
+ const payload = await getPayloadHMR({ config: configPromise })
+ const posts = await payload.find({
+ collection: 'posts',
+ depth: 0,
+ limit: 10,
+ })
+
+ const pages: number[] = []
+
+ for (let i = 1; i <= posts.totalPages; i++) {
+ pages.push(i)
+ }
+
+ return pages
+}
diff --git a/playground/src/app/(payload)/admin/[[...segments]]/not-found.tsx b/playground/src/app/(payload)/admin/[[...segments]]/not-found.tsx
new file mode 100644
index 0000000..d5e3c92
--- /dev/null
+++ b/playground/src/app/(payload)/admin/[[...segments]]/not-found.tsx
@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+ params: {
+ segments: string[]
+ }
+ searchParams: {
+ [key: string]: string | string[]
+ }
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise
+
+
+
+
+ Posts
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+ {introContent && (
+
+ )
+}
diff --git a/playground/src/blocks/ArchiveBlock/config.ts b/playground/src/blocks/ArchiveBlock/config.ts
new file mode 100644
index 0000000..f87a376
--- /dev/null
+++ b/playground/src/blocks/ArchiveBlock/config.ts
@@ -0,0 +1,94 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const Archive: Block = {
+ slug: 'archive',
+ interfaceName: 'ArchiveBlock',
+ fields: [
+ {
+ name: 'introContent',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: 'Intro Content',
+ },
+ {
+ name: 'populateBy',
+ type: 'select',
+ defaultValue: 'collection',
+ options: [
+ {
+ label: 'Collection',
+ value: 'collection',
+ },
+ {
+ label: 'Individual Selection',
+ value: 'selection',
+ },
+ ],
+ },
+ {
+ name: 'relationTo',
+ type: 'select',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ },
+ defaultValue: 'posts',
+ label: 'Collections To Show',
+ options: [
+ {
+ label: 'Posts',
+ value: 'posts',
+ },
+ ],
+ },
+ {
+ name: 'categories',
+ type: 'relationship',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ },
+ hasMany: true,
+ label: 'Categories To Show',
+ relationTo: 'categories',
+ },
+ {
+ name: 'limit',
+ type: 'number',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'collection',
+ step: 1,
+ },
+ defaultValue: 10,
+ label: 'Limit',
+ },
+ {
+ name: 'selectedDocs',
+ type: 'relationship',
+ admin: {
+ condition: (_, siblingData) => siblingData.populateBy === 'selection',
+ },
+ hasMany: true,
+ label: 'Selection',
+ relationTo: ['posts'],
+ },
+ ],
+ labels: {
+ plural: 'Archives',
+ singular: 'Archive',
+ },
+}
diff --git a/playground/src/blocks/Banner/Component.tsx b/playground/src/blocks/Banner/Component.tsx
new file mode 100644
index 0000000..46ee93d
--- /dev/null
+++ b/playground/src/blocks/Banner/Component.tsx
@@ -0,0 +1,26 @@
+import type { BannerBlock as BannerBlockProps } from '../../payload-types'
+
+import { cn } from '../../utilities/cn'
+import React from 'react'
+import RichText from '../../components/RichText'
+
+type Props = {
+ className?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC
+
+ )}
+
+
+ )
+}
diff --git a/playground/src/blocks/Banner/config.ts b/playground/src/blocks/Banner/config.ts
new file mode 100644
index 0000000..53e46b5
--- /dev/null
+++ b/playground/src/blocks/Banner/config.ts
@@ -0,0 +1,37 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const Banner: Block = {
+ slug: 'banner',
+ fields: [
+ {
+ name: 'style',
+ type: 'select',
+ defaultValue: 'info',
+ options: [
+ { label: 'Info', value: 'info' },
+ { label: 'Warning', value: 'warning' },
+ { label: 'Error', value: 'error' },
+ { label: 'Success', value: 'success' },
+ ],
+ required: true,
+ },
+ {
+ name: 'content',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
+ },
+ }),
+ label: false,
+ required: true,
+ },
+ ],
+ interfaceName: 'BannerBlock',
+}
diff --git a/playground/src/blocks/CallToAction/Component.tsx b/playground/src/blocks/CallToAction/Component.tsx
new file mode 100644
index 0000000..b44a223
--- /dev/null
+++ b/playground/src/blocks/CallToAction/Component.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import type { Page } from '../../payload-types'
+
+import RichText from '../../components/RichText'
+import { CMSLink } from '../../components/Link'
+
+type Props = Extract
+
+
+
+ )
+}
diff --git a/playground/src/blocks/CallToAction/config.ts b/playground/src/blocks/CallToAction/config.ts
new file mode 100644
index 0000000..f4ffa77
--- /dev/null
+++ b/playground/src/blocks/CallToAction/config.ts
@@ -0,0 +1,42 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { linkGroup } from '../../fields/linkGroup'
+
+export const CallToAction: Block = {
+ slug: 'cta',
+ interfaceName: 'CallToActionBlock',
+ fields: [
+ {
+ name: 'richText',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: false,
+ },
+ linkGroup({
+ appearances: ['default', 'outline'],
+ overrides: {
+ maxRows: 2,
+ },
+ }),
+ ],
+ labels: {
+ plural: 'Calls to Action',
+ singular: 'Call to Action',
+ },
+}
diff --git a/playground/src/blocks/Code/Component.client.tsx b/playground/src/blocks/Code/Component.client.tsx
new file mode 100644
index 0000000..4e9854f
--- /dev/null
+++ b/playground/src/blocks/Code/Component.client.tsx
@@ -0,0 +1,31 @@
+'use client'
+import { Highlight, themes } from 'prism-react-renderer'
+import React from 'react'
+
+type Props = {
+ code: string
+ language?: string
+}
+
+export const Code: React.FC
+
+
+ {richText &&
+
+ {(links || []).map(({ link }, i) => {
+ return
+
+ {tokens.map((line, i) => (
+
+ {i + 1}
+
+ {line.map((token, key) => (
+
+ ))}
+
+
+ ))}
+
+ )}
+
+
+ )
+}
diff --git a/playground/src/blocks/Code/config.ts b/playground/src/blocks/Code/config.ts
new file mode 100644
index 0000000..7b26f80
--- /dev/null
+++ b/playground/src/blocks/Code/config.ts
@@ -0,0 +1,33 @@
+import type { Block } from 'payload'
+
+export const Code: Block = {
+ slug: 'code',
+ interfaceName: 'CodeBlock',
+ fields: [
+ {
+ name: 'language',
+ type: 'select',
+ defaultValue: 'typescript',
+ options: [
+ {
+ label: 'Typescript',
+ value: 'typescript',
+ },
+ {
+ label: 'Javascript',
+ value: 'javascript',
+ },
+ {
+ label: 'CSS',
+ value: 'css',
+ },
+ ],
+ },
+ {
+ name: 'code',
+ type: 'code',
+ label: false,
+ required: true,
+ },
+ ],
+}
diff --git a/playground/src/blocks/Content/Component.tsx b/playground/src/blocks/Content/Component.tsx
new file mode 100644
index 0000000..0d1c04d
--- /dev/null
+++ b/playground/src/blocks/Content/Component.tsx
@@ -0,0 +1,49 @@
+import { cn } from '../../utilities/cn'
+import React from 'react'
+import RichText from '../../components/RichText'
+
+import type { Page } from '../../payload-types'
+
+import { CMSLink } from '../../components/Link'
+
+type Props = Extract
+
+ )
+}
diff --git a/playground/src/blocks/Content/config.ts b/playground/src/blocks/Content/config.ts
new file mode 100644
index 0000000..e5cf9c5
--- /dev/null
+++ b/playground/src/blocks/Content/config.ts
@@ -0,0 +1,74 @@
+import type { Block, Field } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+import { link } from '../../fields/link'
+
+const columnFields: Field[] = [
+ {
+ name: 'size',
+ type: 'select',
+ defaultValue: 'oneThird',
+ options: [
+ {
+ label: 'One Third',
+ value: 'oneThird',
+ },
+ {
+ label: 'Half',
+ value: 'half',
+ },
+ {
+ label: 'Two Thirds',
+ value: 'twoThirds',
+ },
+ {
+ label: 'Full',
+ value: 'full',
+ },
+ ],
+ },
+ {
+ name: 'richText',
+ type: 'richText',
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: false,
+ },
+ {
+ name: 'enableLink',
+ type: 'checkbox',
+ },
+ link({
+ overrides: {
+ admin: {
+ condition: (_, { enableLink }) => Boolean(enableLink),
+ },
+ },
+ }),
+]
+
+export const Content: Block = {
+ slug: 'content',
+ interfaceName: 'ContentBlock',
+ fields: [
+ {
+ name: 'columns',
+ type: 'array',
+ fields: columnFields,
+ },
+ ],
+}
diff --git a/playground/src/blocks/Form/Checkbox/index.tsx b/playground/src/blocks/Form/Checkbox/index.tsx
new file mode 100644
index 0000000..20aeeb9
--- /dev/null
+++ b/playground/src/blocks/Form/Checkbox/index.tsx
@@ -0,0 +1,44 @@
+import type { CheckboxField } from '@payloadcms/plugin-form-builder/types'
+import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form'
+
+import { useFormContext } from 'react-hook-form'
+
+import { Checkbox as CheckboxUi } from '../../../components/ui/checkbox'
+import { Label } from '../../../components/ui/label'
+import React from 'react'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+
+export const Checkbox: React.FC<
+ CheckboxField & {
+ errors: Partial<
+ FieldErrorsImpl<{
+ [x: string]: any
+ }>
+ >
+ getValues: any
+ register: UseFormRegister
+ {columns &&
+ columns.length > 0 &&
+ columns.map((col, index) => {
+ const { enableLink, link, richText, size } = col
+
+ return (
+
+
+ {richText &&
+ )
+ })}
+
+ {
+ setValue(props.name, checked)
+ }}
+ />
+
+
+ {requiredFromProps && errors[name] &&
+
+ {enableIntro && introContent && !hasSubmitted && (
+
+
+ )
+}
diff --git a/playground/src/blocks/Form/Country/index.tsx b/playground/src/blocks/Form/Country/index.tsx
new file mode 100644
index 0000000..8175b5f
--- /dev/null
+++ b/playground/src/blocks/Form/Country/index.tsx
@@ -0,0 +1,63 @@
+import type { CountryField } from '@payloadcms/plugin-form-builder/types'
+import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+
+import { Label } from '../../../components/ui/label'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '../../../components/ui/select'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { Error } from '../Error'
+import { Width } from '../Width'
+import { countryOptions } from './options'
+
+export const Country: React.FC<
+ CountryField & {
+ control: ControlLoading, please wait...
} + {error &&{`${error.status || '500'}: ${error.message || ''}`}
}
+ {!hasSubmitted && (
+
+ )}
+ This field is required
+}
diff --git a/playground/src/blocks/Form/Message/index.tsx b/playground/src/blocks/Form/Message/index.tsx
new file mode 100644
index 0000000..387e6fe
--- /dev/null
+++ b/playground/src/blocks/Form/Message/index.tsx
@@ -0,0 +1,12 @@
+import RichText from '../../../components/RichText'
+import React from 'react'
+
+import { Width } from '../Width'
+
+export const Message: React.FC = ({ message }: { message: Record
+ {children}
+
+ )
+}
diff --git a/playground/src/blocks/Form/buildInitialFormState.tsx b/playground/src/blocks/Form/buildInitialFormState.tsx
new file mode 100644
index 0000000..fe5d3c0
--- /dev/null
+++ b/playground/src/blocks/Form/buildInitialFormState.tsx
@@ -0,0 +1,42 @@
+import type { FormFieldBlock } from '@payloadcms/plugin-form-builder/types'
+
+export const buildInitialFormState = (fields: FormFieldBlock[]) => {
+ return fields?.reduce((initialSchema, field) => {
+ if (field.blockType === 'checkbox') {
+ return {
+ ...initialSchema,
+ [field.name]: field.defaultValue,
+ }
+ }
+ if (field.blockType === 'country') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'email') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'text') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'select') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ if (field.blockType === 'state') {
+ return {
+ ...initialSchema,
+ [field.name]: '',
+ }
+ }
+ }, {})
+}
diff --git a/playground/src/blocks/Form/config.ts b/playground/src/blocks/Form/config.ts
new file mode 100644
index 0000000..5334289
--- /dev/null
+++ b/playground/src/blocks/Form/config.ts
@@ -0,0 +1,51 @@
+import type { Block } from 'payload'
+
+import {
+ FixedToolbarFeature,
+ HeadingFeature,
+ InlineToolbarFeature,
+ lexicalEditor,
+} from '@payloadcms/richtext-lexical'
+
+export const FormBlock: Block = {
+ slug: 'formBlock',
+ interfaceName: 'FormBlock',
+ fields: [
+ {
+ name: 'form',
+ type: 'relationship',
+ relationTo: 'forms',
+ required: true,
+ },
+ {
+ name: 'enableIntro',
+ type: 'checkbox',
+ label: 'Enable Intro Content',
+ },
+ {
+ name: 'introContent',
+ type: 'richText',
+ admin: {
+ condition: (_, { enableIntro }) => Boolean(enableIntro),
+ },
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [
+ ...rootFeatures,
+ HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
+ FixedToolbarFeature(),
+ InlineToolbarFeature(),
+ ]
+ },
+ }),
+ label: 'Intro Content',
+ },
+ ],
+ graphQL: {
+ singularName: 'FormBlock',
+ },
+ labels: {
+ plural: 'Form Blocks',
+ singular: 'Form Block',
+ },
+}
diff --git a/playground/src/blocks/Form/fields.tsx b/playground/src/blocks/Form/fields.tsx
new file mode 100644
index 0000000..fa660f7
--- /dev/null
+++ b/playground/src/blocks/Form/fields.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from './Checkbox'
+import { Country } from './Country'
+import { Email } from './Email'
+import { Message } from './Message'
+import { Number } from './Number'
+import { Select } from './Select'
+import { State } from './State'
+import { Text } from './Text'
+import { Textarea } from './Textarea'
+
+export const fields = {
+ checkbox: Checkbox,
+ country: Country,
+ email: Email,
+ message: Message,
+ number: Number,
+ select: Select,
+ state: State,
+ text: Text,
+ textarea: Textarea,
+}
diff --git a/playground/src/blocks/MediaBlock/Component.tsx b/playground/src/blocks/MediaBlock/Component.tsx
new file mode 100644
index 0000000..bb08971
--- /dev/null
+++ b/playground/src/blocks/MediaBlock/Component.tsx
@@ -0,0 +1,70 @@
+import type { StaticImageData } from 'next/image'
+
+import { cn } from '../../utilities/cn'
+import React from 'react'
+import RichText from '../../components/RichText'
+
+import type { Page } from '../../payload-types'
+
+import { Media } from '../../components/Media'
+
+type Props = Extract
+ {position === 'fullscreen' && (
+
+ )
+}
diff --git a/playground/src/blocks/MediaBlock/config.ts b/playground/src/blocks/MediaBlock/config.ts
new file mode 100644
index 0000000..ba84efe
--- /dev/null
+++ b/playground/src/blocks/MediaBlock/config.ts
@@ -0,0 +1,29 @@
+import type { Block } from 'payload'
+
+export const MediaBlock: Block = {
+ slug: 'mediaBlock',
+ interfaceName: 'MediaBlock',
+ fields: [
+ {
+ name: 'position',
+ type: 'select',
+ defaultValue: 'default',
+ options: [
+ {
+ label: 'Default',
+ value: 'default',
+ },
+ {
+ label: 'Fullscreen',
+ value: 'fullscreen',
+ },
+ ],
+ },
+ {
+ name: 'media',
+ type: 'upload',
+ relationTo: 'media',
+ required: true,
+ },
+ ],
+}
diff --git a/playground/src/blocks/RelatedPosts/Component.tsx b/playground/src/blocks/RelatedPosts/Component.tsx
new file mode 100644
index 0000000..20029e7
--- /dev/null
+++ b/playground/src/blocks/RelatedPosts/Component.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx'
+import React from 'react'
+import RichText from '../../components/RichText'
+
+import type { Post } from '../../payload-types'
+
+import { Card } from '../../components/Card'
+
+export type RelatedPostsProps = {
+ className?: string
+ docs?: Post[]
+ introContent?: any
+}
+
+export const RelatedPosts: React.FC
+
+ )}
+ {position === 'default' && (
+
+
+ )}
+
+ {introContent &&
+ )
+}
diff --git a/playground/src/blocks/RenderBlocks.tsx b/playground/src/blocks/RenderBlocks.tsx
new file mode 100644
index 0000000..fc0b625
--- /dev/null
+++ b/playground/src/blocks/RenderBlocks.tsx
@@ -0,0 +1,52 @@
+import { cn } from '../utilities/cn'
+import React, { Fragment } from 'react'
+
+import type { Page } from '../payload-types'
+
+import { ArchiveBlock } from './ArchiveBlock/Component'
+import { CallToActionBlock } from './CallToAction/Component'
+import { ContentBlock } from './Content/Component'
+import { FormBlock } from './Form/Component'
+import { MediaBlock } from './MediaBlock/Component'
+
+const blockComponents = {
+ archive: ArchiveBlock,
+ content: ContentBlock,
+ cta: CallToActionBlock,
+ formBlock: FormBlock,
+ mediaBlock: MediaBlock,
+}
+
+export const RenderBlocks: React.FC<{
+ blocks: Page['layout'][0][]
+}> = (props) => {
+ const { blocks } = props
+
+ const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
+
+ if (hasBlocks) {
+ return (
+
+ {docs?.map((doc, index) => {
+ if (typeof doc === 'string') return null
+
+ return
+
+ {/* @ts-expect-error */}
+
+ )
+ }
+ }
+ return null
+ })}
+
+
+ )
+}
diff --git a/playground/src/components/BeforeDashboard/SeedButton/index.tsx b/playground/src/components/BeforeDashboard/SeedButton/index.tsx
new file mode 100644
index 0000000..579e4af
--- /dev/null
+++ b/playground/src/components/BeforeDashboard/SeedButton/index.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { toast } from '@payloadcms/ui'
+
+const SuccessMessage: React.FC = () => (
+
+
+
+ Database seeded! You can now{' '}
+
+ visit your website
+
+
+)
+
+export const SeedButton: React.FC = () => {
+ const [loading, setLoading] = useState(false)
+ const [seeded, setSeeded] = useState(false)
+ const [error, setError] = useState(null)
+
+ const handleClick = useCallback(
+ async (e) => {
+ e.preventDefault()
+ if (loading || seeded) return
+
+ setLoading(true)
+
+ try {
+ await fetch('/api/seed')
+ setSeeded(true)
+ toast.success(
+
+
+ Here's what to do next:
+
+ )
+}
+
+export default BeforeDashboard
diff --git a/playground/src/components/BeforeLogin/index.tsx b/playground/src/components/BeforeLogin/index.tsx
new file mode 100644
index 0000000..8768831
--- /dev/null
+++ b/playground/src/components/BeforeLogin/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const BeforeLogin: React.FC = () => {
+ return (
+ Welcome to your dashboard!
+-
+
-
+
+ {' with a few pages, posts, and projects to jump-start your new site, then '} + + visit your website + + {' to see the results.'} +
+ - + If you created this repo using Payload Cloud, head over to GitHub and clone it to your + local machine. It will be under the GitHub Scope that you selected when creating + this project. + +
- + {'Modify your '} + + collections + + {' and add more '} + + fields + + {' as needed. If you are new to Payload, we also recommend you check out the '} + + Getting Started + + {' docs.'} + +
- + Commit and push your changes to the repository to trigger a redeployment of your project. + +
+
+ )
+}
+
+export default BeforeLogin
diff --git a/playground/src/components/Card/index.tsx b/playground/src/components/Card/index.tsx
new file mode 100644
index 0000000..5b45790
--- /dev/null
+++ b/playground/src/components/Card/index.tsx
@@ -0,0 +1,82 @@
+'use client'
+import { cn } from '../../utilities/cn'
+import useClickableCard from '../../utilities/useClickableCard'
+import Link from 'next/link'
+import React, { Fragment } from 'react'
+
+import type { Post } from '../../payload-types'
+
+import { Media } from '../Media'
+
+export const Card: React.FC<{
+ alignItems?: 'center'
+ className?: string
+ doc?: Post
+ relationTo?: 'posts'
+ showCategories?: boolean
+ title?: string
+}> = (props) => {
+ const { card, link } = useClickableCard({})
+ const { className, doc, relationTo, showCategories, title: titleFromProps } = props
+
+ const { slug, categories, meta, title } = doc || {}
+ const { description, image: metaImage } = meta || {}
+
+ const hasCategories = categories && Array.isArray(categories) && categories.length > 0
+ const titleToUse = titleFromProps || title
+ const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
+ const href = `/${relationTo}/${slug}`
+
+ return (
+ + Welcome to your dashboard! + {' This is where site admins will log in to manage your website.'} +
+
+ {!metaImage &&
+ No image
}
+ {metaImage && typeof metaImage !== 'string' &&
+ {showCategories && hasCategories && (
+
+
+ {showCategories && hasCategories && (
+
+ )}
+ {titleToUse && (
+
+ {categories?.map((category, index) => {
+ if (typeof category === 'object') {
+ const { title: titleFromCategory } = category
+
+ const categoryTitle = titleFromCategory || 'Untitled category'
+
+ const isLast = index === categories.length - 1
+
+ return (
+
+ {categoryTitle}
+ {!isLast && , }
+
+ )
+ }
+
+ return null
+ })}
+
+ )}
+
+
+ )}
+ {description && + + {titleToUse} + +
+{description &&
}
+ {sanitizedDescription}
}
+
+ )
+}
diff --git a/playground/src/components/Link/index.tsx b/playground/src/components/Link/index.tsx
new file mode 100644
index 0000000..5abae44
--- /dev/null
+++ b/playground/src/components/Link/index.tsx
@@ -0,0 +1,66 @@
+import { Button, type ButtonProps } from '../ui/button'
+import { cn } from '../../utilities/cn'
+import Link from 'next/link'
+import React from 'react'
+
+import type { Page, Post } from '../../payload-types'
+
+type CMSLinkType = {
+ appearance?: 'inline' | ButtonProps['variant']
+ children?: React.ReactNode
+ className?: string
+ label?: string | null
+ newTab?: boolean | null
+ reference?: {
+ relationTo: 'pages' | 'posts'
+ value: Page | Post | string | number
+ } | null
+ size?: ButtonProps['size'] | null
+ type?: 'custom' | 'reference' | null
+ url?: string | null
+}
+
+export const CMSLink: React.FC
+
+
+ {posts?.map((result, index) => {
+ if (typeof result === 'object' && result !== null) {
+ return (
+
+
+
+ )
+ }
+
+ return null
+ })}
+ 
+ )
+}
diff --git a/playground/src/components/Media/ImageMedia/index.tsx b/playground/src/components/Media/ImageMedia/index.tsx
new file mode 100644
index 0000000..ccec564
--- /dev/null
+++ b/playground/src/components/Media/ImageMedia/index.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { StaticImageData } from 'next/image'
+
+import { cn } from '../../../utilities/cn'
+import NextImage from 'next/image'
+import React from 'react'
+
+import type { Props as MediaProps } from '../types'
+
+import cssVariables from '../../../cssVariables'
+
+const { breakpoints } = cssVariables
+
+export const ImageMedia: React.FC
+ {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
+ {typeof totalDocs !== 'undefined' &&
+ totalDocs > 0 &&
+ `Showing ${indexStart}${indexStart > 0 ? ` - ${indexEnd}` : ''} of ${totalDocs} ${
+ totalDocs > 1 ? plural : singular
+ }`}
+
+ )
+}
diff --git a/playground/src/components/Pagination/index.tsx b/playground/src/components/Pagination/index.tsx
new file mode 100644
index 0000000..c7a4d88
--- /dev/null
+++ b/playground/src/components/Pagination/index.tsx
@@ -0,0 +1,101 @@
+'use client'
+import {
+ Pagination as PaginationComponent,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '../ui/pagination'
+import { cn } from '../../utilities/cn'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+export const Pagination: React.FC<{
+ className?: string
+ page: number
+ totalPages: number
+}> = (props) => {
+ const router = useRouter()
+
+ const { className, page, totalPages } = props
+ const hasNextPage = page < totalPages
+ const hasPrevPage = page > 1
+
+ const hasExtraPrevPages = page - 1 > 1
+ const hasExtraNextPages = page + 1 < totalPages
+
+ return (
+
+
+
+
+ {
+ router.push(`/posts/page/${page - 1}`)
+ }}
+ />
+
+
+ {hasExtraPrevPages && (
+
+
+ )}
+
+ {hasPrevPage && (
+
+ {
+ router.push(`/posts/page/${page - 1}`)
+ }}
+ >
+ {page - 1}
+
+
+ )}
+
+
+ {
+ router.push(`/posts/page/${page}`)
+ }}
+ >
+ {page}
+
+
+
+ {hasNextPage && (
+
+ {
+ router.push(`/posts/page/${page + 1}`)
+ }}
+ >
+ {page + 1}
+
+
+ )}
+
+ {hasExtraNextPages && (
+
+
+ )}
+
+
+ {
+ router.push(`/posts/page/${page + 1}`)
+ }}
+ />
+
+
+
+
+ )
+}
diff --git a/playground/src/components/PayloadRedirects/index.tsx b/playground/src/components/PayloadRedirects/index.tsx
new file mode 100644
index 0000000..97592b6
--- /dev/null
+++ b/playground/src/components/PayloadRedirects/index.tsx
@@ -0,0 +1,49 @@
+import type React from 'react'
+import type { Page, Post } from '../../payload-types'
+
+import { getCachedDocument } from '../../utilities/getDocument'
+import { getCachedRedirects } from '../../utilities/getRedirects'
+import { notFound, redirect } from 'next/navigation'
+
+interface Props {
+ disableNotFound?: boolean
+ url: string
+}
+
+/* This component helps us with SSR based dynamic redirects */
+export const PayloadRedirects: React.FC
+ {content &&
+ !Array.isArray(content) &&
+ typeof content === 'object' &&
+ 'root' in content &&
+ serializeLexical({ nodes: content?.root?.children })}
+
+ )
+}
+
+export default RichText
diff --git a/playground/src/components/RichText/nodeFormat.tsx b/playground/src/components/RichText/nodeFormat.tsx
new file mode 100644
index 0000000..5d5ff59
--- /dev/null
+++ b/playground/src/components/RichText/nodeFormat.tsx
@@ -0,0 +1,125 @@
+// @ts-nocheck
+//This copy-and-pasted from lexical here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
+
+import type { ElementFormatType, TextFormatType } from 'lexical'
+import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// DOM
+export const DOM_ELEMENT_TYPE = 1
+export const DOM_TEXT_TYPE = 3
+
+// Reconciling
+export const NO_DIRTY_NODES = 0
+export const HAS_DIRTY_NODES = 1
+export const FULL_RECONCILE = 2
+
+// Text node modes
+export const IS_NORMAL = 0
+export const IS_TOKEN = 1
+export const IS_SEGMENTED = 2
+// IS_INERT = 3
+
+// Text node formatting
+export const IS_BOLD = 1
+export const IS_ITALIC = 1 << 1
+export const IS_STRIKETHROUGH = 1 << 2
+export const IS_UNDERLINE = 1 << 3
+export const IS_CODE = 1 << 4
+export const IS_SUBSCRIPT = 1 << 5
+export const IS_SUPERSCRIPT = 1 << 6
+export const IS_HIGHLIGHT = 1 << 7
+
+export const IS_ALL_FORMATTING =
+ IS_BOLD |
+ IS_ITALIC |
+ IS_STRIKETHROUGH |
+ IS_UNDERLINE |
+ IS_CODE |
+ IS_SUBSCRIPT |
+ IS_SUPERSCRIPT |
+ IS_HIGHLIGHT
+
+// Text node details
+export const IS_DIRECTIONLESS = 1
+export const IS_UNMERGEABLE = 1 << 1
+
+// Element node formatting
+export const IS_ALIGN_LEFT = 1
+export const IS_ALIGN_CENTER = 2
+export const IS_ALIGN_RIGHT = 3
+export const IS_ALIGN_JUSTIFY = 4
+export const IS_ALIGN_START = 5
+export const IS_ALIGN_END = 6
+
+// Reconciliation
+export const NON_BREAKING_SPACE = '\u00A0'
+const ZERO_WIDTH_SPACE = '\u200b'
+
+export const DOUBLE_LINE_BREAK = '\n\n'
+
+// For FF, we need to use a non-breaking space, or it gets composition
+// in a stuck state.
+
+const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
+const LTR =
+ 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
+ '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
+ '\uFE00-\uFE6F\uFEFD-\uFFFF'
+
+export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
+
+export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
+
+export const TEXT_TYPE_TO_FORMAT: Record{node.text}
+ }
+ if (node.format & IS_SUBSCRIPT) {
+ text = {text}
+ }
+ if (node.format & IS_SUPERSCRIPT) {
+ text = {text}
+ }
+
+ return text
+ }
+
+ // NOTE: Hacky fix for
+ // https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
+ // which does not return checked: false (only true - i.e. there is no prop for false)
+ const serializedChildrenFn = (node: NodeTypes): JSX.Element | null => {
+ if (node.children == null) {
+ return null
+ } else {
+ if (node?.type === 'list' && node?.listType === 'check') {
+ for (const item of node.children) {
+ if ('checked' in item) {
+ if (!item?.checked) {
+ item.checked = false
+ }
+ }
+ }
+ }
+ return serializeLexical({ nodes: node.children as NodeTypes[] })
+ }
+ }
+
+ const serializedChildren = 'children' in node ? serializedChildrenFn(node) : ''
+
+ if (node.type === 'block') {
+ const block = node.fields
+
+ const blockType = block?.blockType
+
+ if (!block || !blockType) {
+ return null
+ }
+
+ switch (blockType) {
+ case 'cta':
+ return + } + case 'paragraph': { + return ( +
+ {serializedChildren} +
+ ) + } + case 'heading': { + const Tag = node?.tag + return ( ++ {serializedChildren} ++ ) + } + case 'link': { + const fields = node.fields + + return ( +