+
+
+ {children}
+
+ )
+})
+
+Gutter.displayName = 'Gutter'
diff --git a/examples/custom-server/src/app/_components/RichText/Serialize/index.tsx b/examples/custom-server/src/app/_components/RichText/Serialize/index.tsx
new file mode 100644
index 0000000000..f575b6c237
--- /dev/null
+++ b/examples/custom-server/src/app/_components/RichText/Serialize/index.tsx
@@ -0,0 +1,180 @@
+import React, { Fragment } from 'react'
+import escapeHTML from 'escape-html'
+import Link from 'next/link'
+
+type Node = {
+ type: string
+ value?: {
+ url: string
+ alt: string
+ }
+ children?: Node[]
+ url?: string
+ [key: string]: unknown
+ newTab?: boolean
+}
+
+export type CustomRenderers = {
+ [key: string]: (args: { node: Node; Serialize: SerializeFunction; index: number }) => JSX.Element // eslint-disable-line
+}
+
+type SerializeFunction = React.FC<{
+ content?: Node[]
+ customRenderers?: CustomRenderers
+}>
+
+const isText = (value: any): boolean =>
+ typeof value === 'object' && value !== null && typeof value.text === 'string'
+
+export const Serialize: SerializeFunction = ({ content, customRenderers }) => {
+ return (
+ {text}
+ }
+
+ if (node.italic) {
+ text = {text}
+ }
+
+ if (node.underline) {
+ text = (
+
+ {text}
+
+ )
+ }
+
+ if (node.strikethrough) {
+ text = (
+
+ {text}
+
+ )
+ }
+
+ return + + case 'h1': + return ( +
+
+ )
+
+ case 'h2':
+ return (
+
+
+ )
+
+ case 'h3':
+ return (
+
+
+ )
+
+ case 'h4':
+ return (
+
+
+ )
+
+ case 'h5':
+ return (
+
+
+ )
+
+ case 'h6':
+ return (
+
+
+ )
+
+ case 'quote':
+ return (
+ ++ ) + + case 'ul': + return ( ++
-
+
-
+
+
+
+ )
+}
diff --git a/examples/custom-server/src/app/globals.scss b/examples/custom-server/src/app/globals.scss
new file mode 100644
index 0000000000..eae04652f2
--- /dev/null
+++ b/examples/custom-server/src/app/globals.scss
@@ -0,0 +1,106 @@
+$breakpoint: 1000px;
+
+:root {
+ --max-width: 1100px;
+ --border-radius: 12px;
+ --foreground-rgb: 0, 0, 0;
+ --background-rgb: 255, 255, 255;
+ --block-spacing: 2rem;
+ --gutter-h: 4rem;
+
+ @media (max-width: $breakpoint) {
+ --block-spacing: 1rem;
+ --gutter-h: 2rem;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-rgb: 7, 7, 7;
+ }
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 20px;
+ line-height: 1.5;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+ @media (max-width: $breakpoint) {
+ font-size: 16px;
+ }
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ margin: 0;
+ color: rgb(var(--foreground-rgb));
+ background: rgb(var(--background-rgb));
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+ display: block;
+}
+
+h1 {
+ font-size: 4.5rem;
+ line-height: 1.2;
+ margin: 0 0 2.5rem 0;
+
+ @media (max-width: $breakpoint) {
+ font-size: 3rem;
+ margin: 0 0 1.5rem 0;
+ }
+}
+
+h2 {
+ font-size: 3.5rem;
+ line-height: 1.2;
+ margin: 0 0 2.5rem 0;
+}
+
+h3 {
+ font-size: 2.5rem;
+ line-height: 1.2;
+ margin: 0 0 2rem 0;
+}
+
+h4 {
+ font-size: 1.5rem;
+ line-height: 1.2;
+ margin: 0 0 1rem 0;
+}
+
+h5 {
+ font-size: 1.25rem;
+ line-height: 1.2;
+ margin: 0 0 1rem 0;
+}
+
+h6 {
+ font-size: 1rem;
+ line-height: 1.2;
+ margin: 0 0 1rem 0;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ color-scheme: dark;
+ }
+}
diff --git a/examples/custom-server/src/app/layout.module.scss b/examples/custom-server/src/app/layout.module.scss
new file mode 100644
index 0000000000..2aa6787975
--- /dev/null
+++ b/examples/custom-server/src/app/layout.module.scss
@@ -0,0 +1,16 @@
+.body {
+ padding: 6rem 0;
+ min-height: 100vh;
+}
+
+.logo {
+ width: 200px;
+}
+
+.header {
+ margin-bottom: 4rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/examples/custom-server/src/app/layout.tsx b/examples/custom-server/src/app/layout.tsx
new file mode 100644
index 0000000000..66760106bd
--- /dev/null
+++ b/examples/custom-server/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+import './globals.scss'
+
+import classes from './layout.module.scss'
+
+export const metadata = {
+ title: 'Payload Custom Server',
+ description: 'Serve Payload alongside any front-end framework.',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ 
+
+ {introContent && (
+
+
+
+ |
+
+
+ )}
+
+ )
+}
diff --git a/templates/ecommerce/src/blocks/ArchiveBlock/types.ts b/templates/ecommerce/src/blocks/ArchiveBlock/types.ts
new file mode 100644
index 0000000000..a5e8939488
--- /dev/null
+++ b/templates/ecommerce/src/blocks/ArchiveBlock/types.ts
@@ -0,0 +1,3 @@
+import type { Page } from '../../payload-types'
+
+export type ArchiveBlockProps = Extract
+
+
+ {(links || []).map(({ link }, i) => {
+ return
+
+ {position === 'fullscreen' && (
+
+
+ )}
+ {caption && (
+
+
+ )}
+
+ )
+}
diff --git a/templates/ecommerce/src/collections/Categories.ts b/templates/ecommerce/src/collections/Categories.ts
new file mode 100644
index 0000000000..479dae86a1
--- /dev/null
+++ b/templates/ecommerce/src/collections/Categories.ts
@@ -0,0 +1,19 @@
+import type { CollectionConfig } from 'payload/types'
+
+const Categories: CollectionConfig = {
+ slug: 'categories',
+ admin: {
+ useAsTitle: 'title',
+ },
+ access: {
+ read: () => true,
+ },
+ fields: [
+ {
+ name: 'title',
+ type: 'text',
+ },
+ ],
+}
+
+export default Categories
diff --git a/templates/ecommerce/src/collections/Media.ts b/templates/ecommerce/src/collections/Media.ts
new file mode 100644
index 0000000000..d37f48953f
--- /dev/null
+++ b/templates/ecommerce/src/collections/Media.ts
@@ -0,0 +1,26 @@
+import path from 'path'
+import type { CollectionConfig } from 'payload/types'
+
+export const Media: CollectionConfig = {
+ slug: 'media',
+ upload: {
+ staticDir: path.resolve(__dirname, '../../media'),
+ },
+ access: {
+ read: () => true,
+ },
+ fields: [
+ {
+ name: 'alt',
+ type: 'text',
+ required: true,
+ },
+ {
+ name: 'caption',
+ type: 'richText',
+ admin: {
+ elements: ['link'],
+ },
+ },
+ ],
+}
diff --git a/templates/ecommerce/src/collections/Orders/access/adminsAndOrderedBy.ts b/templates/ecommerce/src/collections/Orders/access/adminsAndOrderedBy.ts
new file mode 100644
index 0000000000..baf0593408
--- /dev/null
+++ b/templates/ecommerce/src/collections/Orders/access/adminsAndOrderedBy.ts
@@ -0,0 +1,17 @@
+import type { Access } from 'payload/config'
+
+import { checkRole } from '../../Users/checkRole'
+
+export const adminsAndOrderedBy: Access = ({ req: { user } }) => {
+ if (user) {
+ if (checkRole(['admin'], user)) {
+ return true
+ }
+
+ return {
+ 'orderedBy.user.id': user.id,
+ }
+ }
+
+ return true
+}
diff --git a/templates/ecommerce/src/collections/Orders/hooks/syncUser.ts b/templates/ecommerce/src/collections/Orders/hooks/syncUser.ts
new file mode 100644
index 0000000000..9ede1968ac
--- /dev/null
+++ b/templates/ecommerce/src/collections/Orders/hooks/syncUser.ts
@@ -0,0 +1,51 @@
+import type { AfterChangeHook } from 'payload/dist/collections/config/types'
+
+import type { Order, User } from '../../../payload-types'
+
+// sync user purchases and delete their cart when they place an order
+
+export const syncUser: AfterChangeHook
+
+ )}
+ {position === 'default' && (
+
+
+
+
+ )
+}
diff --git a/templates/ecommerce/src/collections/Users/access/adminsAndUser.ts b/templates/ecommerce/src/collections/Users/access/adminsAndUser.ts
new file mode 100644
index 0000000000..797b06f1d9
--- /dev/null
+++ b/templates/ecommerce/src/collections/Users/access/adminsAndUser.ts
@@ -0,0 +1,19 @@
+import type { Access } from 'payload/types'
+
+import { checkRole } from '../checkRole'
+
+const adminsAndUser: Access = ({ req: { user } }) => {
+ if (user) {
+ if (checkRole(['admin'], user)) {
+ return true
+ }
+
+ return {
+ id: user.id,
+ }
+ }
+
+ return false
+}
+
+export default adminsAndUser
diff --git a/templates/ecommerce/src/collections/Users/checkRole.ts b/templates/ecommerce/src/collections/Users/checkRole.ts
new file mode 100644
index 0000000000..d8ce97be21
--- /dev/null
+++ b/templates/ecommerce/src/collections/Users/checkRole.ts
@@ -0,0 +1,16 @@
+import type { User } from '../../payload-types'
+
+export const checkRole = (allRoles: User['roles'] = [], user?: User): boolean => {
+ if (user) {
+ if (
+ allRoles.some(role => {
+ return user?.roles.some(individualRole => {
+ return individualRole === role
+ })
+ })
+ )
+ return true
+ }
+
+ return false
+}
diff --git a/templates/ecommerce/src/collections/Users/hooks/createStripeCustomer.ts b/templates/ecommerce/src/collections/Users/hooks/createStripeCustomer.ts
new file mode 100644
index 0000000000..22522b5cf2
--- /dev/null
+++ b/templates/ecommerce/src/collections/Users/hooks/createStripeCustomer.ts
@@ -0,0 +1,41 @@
+import type { BeforeChangeHook } from 'payload/dist/collections/config/types'
+import Stripe from 'stripe'
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
+ apiVersion: '2022-08-01',
+})
+
+export const createStripeCustomer: BeforeChangeHook = async ({ req, data, operation }) => {
+ if (operation === 'create' && !data.stripeCustomerID) {
+ try {
+ // lookup an existing customer by email and if found, assign the ID to the user
+ // if not found, create a new customer and assign the new ID to the user
+ const existingCustomer = await stripe.customers.list({
+ limit: 1,
+ email: data.email,
+ })
+
+ if (existingCustomer.data.length) {
+ // existing customer found, assign the ID to the user
+ return {
+ ...data,
+ stripeCustomerID: existingCustomer.data[0].id,
+ }
+ }
+
+ // create a new customer and assign the ID to the user
+ const customer = await stripe.customers.create({
+ email: data.email,
+ })
+
+ return {
+ ...data,
+ stripeCustomerID: customer.id,
+ }
+ } catch (error: unknown) {
+ req.payload.logger.error(`Error creating Stripe customer: ${error}`)
+ }
+ }
+
+ return data
+}
diff --git a/templates/ecommerce/src/collections/Users/hooks/ensureFirstUserIsAdmin.ts b/templates/ecommerce/src/collections/Users/hooks/ensureFirstUserIsAdmin.ts
new file mode 100644
index 0000000000..9cddbd66e3
--- /dev/null
+++ b/templates/ecommerce/src/collections/Users/hooks/ensureFirstUserIsAdmin.ts
@@ -0,0 +1,22 @@
+import type { FieldHook } from 'payload/types'
+
+import type { User } from '../../../payload-types'
+
+// ensure the first user created is an admin
+// 1. lookup a single user on create as succinctly as possible
+// 2. if there are no users found, append `admin` to the roles array
+// access control is already handled by this fields `access` property
+// it ensures that only admins can create and update the `roles` field
+export const ensureFirstUserIsAdmin: FieldHook{typeof label === 'string' ? label : 'Product'}
++ {`Select the related Stripe product or `} + + create a new one + + {'.'} +
+ + {stripeProductID && ( +
+
+ )}
+
+
+ {`Manage "${
+ options.find(option => option.value === stripeProductID)?.label
+ }" in Stripe`}
+
+
+
+
+ {href}
+
+
+
+
+ )
+}
diff --git a/templates/ecommerce/src/components/AddToCartButton/index.module.scss b/templates/ecommerce/src/components/AddToCartButton/index.module.scss
new file mode 100644
index 0000000000..7183e717eb
--- /dev/null
+++ b/templates/ecommerce/src/components/AddToCartButton/index.module.scss
@@ -0,0 +1,10 @@
+.addToCartButton {
+ // cursor: pointer;
+ // background-color: transparent;
+ // padding: 0;
+ // border: none;
+ // font-size: inherit;
+ // line-height: inherit;
+ // text-decoration: underline;
+ // white-space: nowrap;
+}
diff --git a/templates/ecommerce/src/components/AddToCartButton/index.tsx b/templates/ecommerce/src/components/AddToCartButton/index.tsx
new file mode 100644
index 0000000000..d5952d37b3
--- /dev/null
+++ b/templates/ecommerce/src/components/AddToCartButton/index.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react'
+
+import { Product } from '../../payload-types'
+import { useCart } from '../../providers/Cart'
+import { Button, Props } from '../Button'
+
+import classes from './index.module.scss'
+
+export const AddToCartButton: React.FC<{
+ product: Product
+ quantity?: number
+ className?: string
+ appearance?: Props['appearance']
+}> = props => {
+ const { product, quantity = 1, className, appearance = 'primary' } = props
+
+ const { cart, addItemToCart, isProductInCart } = useCart()
+
+ const [showInCart, setShowInCart] = useState{typeof label === 'string' ? label : 'Customer'}
++ {`Select the related Stripe customer or `} + + create a new one + + {'.'} +
+ + {stripeCustomerID && ( +
+
+ )}
+
+
+ {`Manage "${
+ options.find(option => option.value === stripeCustomerID)?.label
+ }" in Stripe`}
+
+
+
+
+ {href}
+
+
+