+
+ )
+}
diff --git a/examples/localization/src/app/(frontend)/[locale]/page.tsx b/examples/localization/src/app/(frontend)/[locale]/page.tsx
new file mode 100644
index 00000000000..e49260fc434
--- /dev/null
+++ b/examples/localization/src/app/(frontend)/[locale]/page.tsx
@@ -0,0 +1,86 @@
+import { Metadata } from 'next'
+// import PageTemplate from './[slug]/page'
+
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+import { draftMode } from 'next/headers'
+import React, { cache } from 'react'
+import { generateMeta } from '@/utilities/generateMeta'
+import { TypedLocale } from 'payload'
+import { PayloadRedirects } from '@/components/PayloadRedirects'
+import { homeStatic } from '@/endpoints/seed/home-static'
+import type { Page as PageType } from '@/payload-types'
+import { RenderBlocks } from '@/blocks/RenderBlocks'
+import { RenderHero } from '@/heros/RenderHero'
+import PageClient from './[slug]/page.client'
+
+type Args = {
+ params: Promise<{
+ slug?: string
+ locale: TypedLocale
+ }>
+}
+
+export default async function Page({ params: paramsPromise }: Args) {
+ const { slug = 'home', locale = 'en' } = await paramsPromise
+ const url = '/' + slug
+
+ let page: PageType | null
+
+ page = await queryPage({
+ slug,
+ locale,
+ })
+
+ // Remove this code once your website is seeded
+ if (!page && slug === 'home') {
+ page = homeStatic
+ }
+
+ if (!page) {
+ return
+
+
+ 404
+{t('page-not-found')}
+
+ typeof post === 'object')}
+ />
+ )}
+
+
+
+
+ {post.relatedPosts && post.relatedPosts.length > 0 && (
+
+
+ )
+}
+
+export function generateMetadata(): Metadata {
+ return {
+ title: `Payload Website Template Posts`,
+ }
+}
diff --git a/examples/localization/src/app/(frontend)/[locale]/posts/page/[pageNumber]/page.client.tsx b/examples/localization/src/app/(frontend)/[locale]/posts/page/[pageNumber]/page.client.tsx
new file mode 100644
index 00000000000..2d526692800
--- /dev/null
+++ b/examples/localization/src/app/(frontend)/[locale]/posts/page/[pageNumber]/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('light')
+ }, [setHeaderTheme])
+ return
+
+
+
+
+ {t('posts')}
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+
+ )
+}
+
+export async function generateMetadata({ params: paramsPromise }: Args): Promise
+
+
+
+
+ {t('posts')}
+
+
+
+
+ {posts.totalPages > 1 && posts.page && (
+
+
+
+ )
+}
+
+export function generateMetadata(): Metadata {
+ return {
+ title: `Payload Website Template Search`,
+ }
+}
diff --git a/examples/localization/src/app/(frontend)/next/exit-preview/GET.ts b/examples/localization/src/app/(frontend)/next/exit-preview/GET.ts
new file mode 100644
index 00000000000..a8e3e69b577
--- /dev/null
+++ b/examples/localization/src/app/(frontend)/next/exit-preview/GET.ts
@@ -0,0 +1,7 @@
+import { draftMode } from 'next/headers'
+
+export async function GET(): Promise
+
+
+ {posts.totalDocs > 0 ? (
+
+
+ {t('search')}
+No results found.
+ )}
+
+ {introContent && (
+
+ )
+}
diff --git a/examples/localization/src/blocks/ArchiveBlock/config.ts b/examples/localization/src/blocks/ArchiveBlock/config.ts
new file mode 100644
index 00000000000..379c3ecc82c
--- /dev/null
+++ b/examples/localization/src/blocks/ArchiveBlock/config.ts
@@ -0,0 +1,95 @@
+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',
+ localized: true,
+ 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/examples/localization/src/blocks/Banner/Component.tsx b/examples/localization/src/blocks/Banner/Component.tsx
new file mode 100644
index 00000000000..143596cb286
--- /dev/null
+++ b/examples/localization/src/blocks/Banner/Component.tsx
@@ -0,0 +1,26 @@
+import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
+
+import { cn } from 'src/utilities/cn'
+import React from 'react'
+import RichText from '@/components/RichText'
+
+type Props = {
+ className?: string
+} & BannerBlockProps
+
+export const BannerBlock: React.FC
+
+ )}
+
+
+ )
+}
diff --git a/examples/localization/src/blocks/Banner/config.ts b/examples/localization/src/blocks/Banner/config.ts
new file mode 100644
index 00000000000..236851a6e15
--- /dev/null
+++ b/examples/localization/src/blocks/Banner/config.ts
@@ -0,0 +1,38 @@
+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',
+ localized: true,
+ editor: lexicalEditor({
+ features: ({ rootFeatures }) => {
+ return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
+ },
+ }),
+ label: false,
+ required: true,
+ },
+ ],
+ interfaceName: 'BannerBlock',
+}
diff --git a/examples/localization/src/blocks/CallToAction/Component.tsx b/examples/localization/src/blocks/CallToAction/Component.tsx
new file mode 100644
index 00000000000..776ba84b1ac
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/CallToAction/config.ts b/examples/localization/src/blocks/CallToAction/config.ts
new file mode 100644
index 00000000000..acbd2d8147d
--- /dev/null
+++ b/examples/localization/src/blocks/CallToAction/config.ts
@@ -0,0 +1,43 @@
+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',
+ localized: true,
+ 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/examples/localization/src/blocks/Code/Component.client.tsx b/examples/localization/src/blocks/Code/Component.client.tsx
new file mode 100644
index 00000000000..4e9854fb113
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/Code/config.ts b/examples/localization/src/blocks/Code/config.ts
new file mode 100644
index 00000000000..7b26f805db2
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/Content/Component.tsx b/examples/localization/src/blocks/Content/Component.tsx
new file mode 100644
index 00000000000..a09232bee5f
--- /dev/null
+++ b/examples/localization/src/blocks/Content/Component.tsx
@@ -0,0 +1,49 @@
+import { cn } from 'src/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/examples/localization/src/blocks/Content/config.ts b/examples/localization/src/blocks/Content/config.ts
new file mode 100644
index 00000000000..3f6280d22f3
--- /dev/null
+++ b/examples/localization/src/blocks/Content/config.ts
@@ -0,0 +1,75 @@
+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',
+ localized: true,
+ 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/examples/localization/src/blocks/Form/Checkbox/index.tsx b/examples/localization/src/blocks/Form/Checkbox/index.tsx
new file mode 100644
index 00000000000..1eff6940a41
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/Form/Country/index.tsx b/examples/localization/src/blocks/Form/Country/index.tsx
new file mode 100644
index 00000000000..e6cfa0844b5
--- /dev/null
+++ b/examples/localization/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: Control{t('loading')}
} + {error &&{`${error.status || '500'}: ${error.message || ''}`}
}
+ {!hasSubmitted && (
+
+ )}
+ This field is required
+}
diff --git a/examples/localization/src/blocks/Form/Message/index.tsx b/examples/localization/src/blocks/Form/Message/index.tsx
new file mode 100644
index 00000000000..f1d78518679
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/Form/buildInitialFormState.tsx b/examples/localization/src/blocks/Form/buildInitialFormState.tsx
new file mode 100644
index 00000000000..fe5d3c0c086
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/Form/config.ts b/examples/localization/src/blocks/Form/config.ts
new file mode 100644
index 00000000000..d904da028d5
--- /dev/null
+++ b/examples/localization/src/blocks/Form/config.ts
@@ -0,0 +1,52 @@
+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',
+ localized: true,
+ 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/examples/localization/src/blocks/Form/fields.tsx b/examples/localization/src/blocks/Form/fields.tsx
new file mode 100644
index 00000000000..fa660f7e398
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/MediaBlock/Component.tsx b/examples/localization/src/blocks/MediaBlock/Component.tsx
new file mode 100644
index 00000000000..f459c0c0ce7
--- /dev/null
+++ b/examples/localization/src/blocks/MediaBlock/Component.tsx
@@ -0,0 +1,70 @@
+import type { StaticImageData } from 'next/image'
+
+import { cn } from 'src/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/examples/localization/src/blocks/MediaBlock/config.ts b/examples/localization/src/blocks/MediaBlock/config.ts
new file mode 100644
index 00000000000..ba84efe4abc
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/RelatedPosts/Component.tsx b/examples/localization/src/blocks/RelatedPosts/Component.tsx
new file mode 100644
index 00000000000..3bebc75173d
--- /dev/null
+++ b/examples/localization/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/examples/localization/src/blocks/RenderBlocks.tsx b/examples/localization/src/blocks/RenderBlocks.tsx
new file mode 100644
index 00000000000..89ee59ab027
--- /dev/null
+++ b/examples/localization/src/blocks/RenderBlocks.tsx
@@ -0,0 +1,54 @@
+import { cn } from 'src/utilities/cn'
+import React, { Fragment } from 'react'
+
+import type { Page } from '@/payload-types'
+
+import { ArchiveBlock } from '@/blocks/ArchiveBlock/Component'
+import { CallToActionBlock } from '@/blocks/CallToAction/Component'
+import { ContentBlock } from '@/blocks/Content/Component'
+import { FormBlock } from '@/blocks/Form/Component'
+import { MediaBlock } from '@/blocks/MediaBlock/Component'
+import { TypedLocale } from 'payload'
+
+const blockComponents = {
+ archive: ArchiveBlock,
+ content: ContentBlock,
+ cta: CallToActionBlock,
+ formBlock: FormBlock,
+ mediaBlock: MediaBlock,
+}
+
+export const RenderBlocks: React.FC<{
+ blocks: Page['layout'][0][]
+ locale: TypedLocale
+}> = (props) => {
+ const { blocks, locale } = 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/examples/localization/src/components/AfterDashboard/index.tsx b/examples/localization/src/components/AfterDashboard/index.tsx
new file mode 100644
index 00000000000..38324ba3665
--- /dev/null
+++ b/examples/localization/src/components/AfterDashboard/index.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import React, { Fragment, useCallback, useState } from 'react'
+import { toast } from '@payloadcms/ui'
+
+const SuccessMessage: React.FC = () => (
+
+ {t('dashboard')}}
+ onAuthChange={onAuthChange}
+ onPreviewExit={() => {
+ fetch('/next/exit-preview').then(() => {
+ router.push('/')
+ router.refresh()
+ })
+ }}
+ style={{
+ backgroundColor: 'transparent',
+ padding: 0,
+ position: 'relative',
+ zIndex: 'unset',
+ }}
+ />
+
+
+ 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(
+
+ )
+}
+
+export default BeforeLogin
diff --git a/examples/localization/src/components/Card/index.tsx b/examples/localization/src/components/Card/index.tsx
new file mode 100644
index 00000000000..6277de2dfd2
--- /dev/null
+++ b/examples/localization/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 '@/components/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/examples/localization/src/components/Link/index.tsx b/examples/localization/src/components/Link/index.tsx
new file mode 100644
index 00000000000..608fb1a5a48
--- /dev/null
+++ b/examples/localization/src/components/Link/index.tsx
@@ -0,0 +1,70 @@
+import { Button, type ButtonProps } from '@/components/ui/button'
+import { cn } from 'src/utilities/cn'
+import { Link as i18nLink } from '@/i18n/routing'
+import React from 'react'
+
+import type { Page, Post } from '@/payload-types'
+import NextLink from 'next/link'
+
+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/examples/localization/src/components/Media/ImageMedia/index.tsx b/examples/localization/src/components/Media/ImageMedia/index.tsx
new file mode 100644
index 00000000000..308cd4b8533
--- /dev/null
+++ b/examples/localization/src/components/Media/ImageMedia/index.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import type { StaticImageData } from 'next/image'
+
+import { cn } from 'src/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 &&
+ `${t('showing')} ${indexStart}${indexStart > 0 ? ` - ${indexEnd}` : ''} ${t('of')} ${totalDocs} ${
+ totalDocs > 1 ? t('posts').toLowerCase() : t('post').toLowerCase()
+ }`}
+
+ )
+}
diff --git a/examples/localization/src/components/Pagination/index.tsx b/examples/localization/src/components/Pagination/index.tsx
new file mode 100644
index 00000000000..d6d6fda1942
--- /dev/null
+++ b/examples/localization/src/components/Pagination/index.tsx
@@ -0,0 +1,101 @@
+'use client'
+import {
+ Pagination as PaginationComponent,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '@/components/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/examples/localization/src/components/PayloadRedirects/index.tsx b/examples/localization/src/components/PayloadRedirects/index.tsx
new file mode 100644
index 00000000000..2e94fdde884
--- /dev/null
+++ b/examples/localization/src/components/PayloadRedirects/index.tsx
@@ -0,0 +1,50 @@
+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/examples/localization/src/components/RichText/nodeFormat.tsx b/examples/localization/src/components/RichText/nodeFormat.tsx
new file mode 100644
index 00000000000..5d5ff59172c
--- /dev/null
+++ b/examples/localization/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 ( +