hanzo/cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebrand all packages to @hanzo/cms scope (Payload v3.85.2 fork)

Browse Source 
- payload -> @hanzo/cms (core), bin payload -> hanzo-cms
- create-payload-app -> @hanzo/create-cms-app
- @payloadcms/<x> -> @hanzo/cms-<x> across the whole dependency graph
- 3545 files, 72 package.json, 4419 scoped refs, 3852 core import specifiers, 82 scss imports
- MIT attribution to Payload CMS Inc. preserved (LICENSE.md, author emails)

Upstream: github.com/payloadcms/payload @ v3.85.2 (MIT)
This commit is contained in:
Hanzo AI
2026-07-01 17:56:00 -07:00
parent 624ac51bf9
commit 4d27919a09
3697 changed files with 8795 additions and 8795 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -4
View File
@@ -44,10 +44,10 @@ Payload is the first-ever Next.js native CMS that can install directly in your e
Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
```text
pnpx create-payload-app@latest
pnpx @hanzo/create-cms-app@latest
```
**If you're new to Payload, you should start with the website template** (`pnpx create-payload-app@latest -t website`). It shows how to do _everything_ - including custom Rich Text blocks, on-demand revalidation, live preview, and more. It comes with a frontend built with Tailwind all in one `/app` folder.
**If you're new to Payload, you should start with the website template** (`pnpx @hanzo/create-cms-app@latest -t website`). It shows how to do _everything_ - including custom Rich Text blocks, on-demand revalidation, live preview, and more. It comes with a frontend built with Tailwind all in one `/app` folder.
## One-click deployment options
@@ -116,10 +116,10 @@ If you want to add contributions to this repository, please follow the instructi
The [Examples Directory](./examples) is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
If you'd like to run the examples, you can use `create-payload-app` to create a project from one:
If you'd like to run the examples, you can use `@hanzo/create-cms-app` to create a project from one:
```sh
npx create-payload-app --example example_name
npx @hanzo/create-cms-app --example example_name
```
You can see more examples at:
app/(app)/test/page.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import configPromise from '@payload-config'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
export const Page = async ({ params, searchParams }) => {
const payload = await getPayload({
app/(payload)/admin/[[...segments]]/not-found.tsx
+1 -1
View File
@@ -3,7 +3,7 @@
import type { Metadata } from 'next'
import config from '@payload-config'
import { generatePageMetadata, NotFoundPage } from '@payloadcms/next/views'
import { generatePageMetadata, NotFoundPage } from '@hanzo/cms-next/views'
import { importMap } from '../importMap.js'
app/(payload)/admin/[[...segments]]/page.tsx
+1 -1
View File
@@ -3,7 +3,7 @@
import type { Metadata } from 'next'
import config from '@payload-config'
import { generatePageMetadata, RootPage } from '@payloadcms/next/views'
import { generatePageMetadata, RootPage } from '@hanzo/cms-next/views'
import { importMap } from '../importMap.js'
app/(payload)/api/[...slug]/route.ts
+1 -1
View File
@@ -1,7 +1,7 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@payload-config'
import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@hanzo/cms-next/routes'
export const GET = REST_GET(config)
export const POST = REST_POST(config)
app/(payload)/api/graphql-playground/route.ts
+1 -1
View File
@@ -1,6 +1,6 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@payload-config'
import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
import { GRAPHQL_PLAYGROUND_GET } from '@hanzo/cms-next/routes'
export const GET = GRAPHQL_PLAYGROUND_GET(config)
app/(payload)/api/graphql/route.ts
+1 -1
View File
@@ -1,7 +1,7 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@payload-config'
import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
import { GRAPHQL_POST, REST_OPTIONS } from '@hanzo/cms-next/routes'
export const POST = GRAPHQL_POST(config)
app/(payload)/layout.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
// import '@payloadcms/ui/styles.css' // Uncomment this line if `@payloadcms/ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
import type { ServerFunctionClient } from 'payload'
// import '@hanzo/cms-ui/styles.css' // Uncomment this line if `@hanzo/cms-ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
import type { ServerFunctionClient } from @hanzo/cms'from
import config from '@payload-config'
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
import { handleServerFunctions, RootLayout } from '@hanzo/cms-next/layouts'
import React from 'react'
import { importMap } from './admin/importMap.js'
docs/access-control/collections.mdx
+12 -12
View File
@@ -11,7 +11,7 @@ Collection Access Control is [Access Control](../access-control/overview) used t
To add Access Control to a Collection, use the `access` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithAccessControl: CollectionConfig = {
// ...
@@ -29,7 +29,7 @@ Access Control is specific to the operation of the request.
To add Access Control to a Collection, use the `access` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload';
import type { CollectionConfig } from @hanzo/cms'from ;
export const CollectionWithAccessControl: CollectionConfig = {
// ...
@@ -80,7 +80,7 @@ Returns a boolean which allows/denies access to the `create` request.
To add create Access Control to a Collection, use the `create` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithCreateAccess: CollectionConfig = {
// ...
@@ -108,7 +108,7 @@ Returns a boolean which allows/denies access to the `read` request.
To add read Access Control to a Collection, use the `read` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithReadAccess: CollectionConfig = {
// ...
@@ -131,7 +131,7 @@ export const CollectionWithReadAccess: CollectionConfig = {
As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
```ts
import type { Access } from 'payload'
import type { Access } from @hanzo/cms'from
import type { Page } from '@/payload-types'
export const canReadPage: Access<Page> = ({ req: { user } }) => {
@@ -164,7 +164,7 @@ Returns a boolean which allows/denies access to the `update` request.
To add update Access Control to a Collection, use the `update` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithUpdateAccess: CollectionConfig = {
// ...
@@ -187,7 +187,7 @@ export const CollectionWithUpdateAccess: CollectionConfig = {
As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
```ts
import type { Access } from 'payload'
import type { Access } from @hanzo/cms'from
import type { User } from '@/payload-types'
export const canUpdateUser: Access<User> = ({ req: { user }, id }) => {
@@ -223,7 +223,7 @@ Similarly to the Update function, returns a boolean or a [query constraint](/doc
To add delete Access Control to a Collection, use the `delete` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithDeleteAccess: CollectionConfig = {
// ...
@@ -240,7 +240,7 @@ export const CollectionWithDeleteAccess: CollectionConfig = {
As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
```ts
import type { Access } from 'payload'
import type { Access } from @hanzo/cms'from
import type { Customer } from '@/payload-types'
export const canDeleteCustomer: Access<Customer> = async ({ req, id }) => {
@@ -285,7 +285,7 @@ If the Collection is used to access the [Admin Panel](../admin/overview#the-admi
To add Admin Access Control to a Collection, use the `admin` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithAdminAccess: CollectionConfig = {
// ...
@@ -312,7 +312,7 @@ Determines which users can [unlock](/docs/authentication/operations#unlock) othe
To add Unlock Access Control to a Collection, use the `unlock` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithUnlockAccess: CollectionConfig = {
// ...
@@ -339,7 +339,7 @@ If the Collection has [Versions](../versions/overview) enabled, the `readVersion
To add Read Versions Access Control to a Collection, use the `readVersions` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithVersionsAccess: CollectionConfig = {
// ...
docs/access-control/fields.mdx
+2 -2
View File
@@ -11,7 +11,7 @@ Field Access Control is [Access Control](../access-control/overview) used to res
To add Access Control to a Field, use the `access` property in your [Field Config](../fields/overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const FieldWithAccessControl: Field = {
// ...
@@ -35,7 +35,7 @@ Access Control is specific to the operation of the request.
To add Access Control to a Field, use the `access` property in the [Field Config](../fields/overview):
```ts
import type { CollectionConfig } from 'payload';
import type { CollectionConfig } from @hanzo/cms'from ;
export const Posts: CollectionConfig = {
slug: 'posts',
docs/access-control/globals.mdx
+5 -5
View File
@@ -11,7 +11,7 @@ Global Access Control is [Access Control](../access-control/overview) used to re
To add Access Control to a Global, use the `access` property in your [Global Config](../configuration/globals):
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const GlobalWithAccessControl: GlobalConfig = {
// ...
@@ -29,7 +29,7 @@ Access Control is specific to the operation of the request.
To add Access Control to a [Global](../configuration/globals), use the `access` property in the [Global Config](../configuration/globals):
```ts
import { GlobalConfig } from 'payload'
import { GlobalConfig } from @hanzo/cms'from
const GlobalWithAccessControl: GlobalConfig = {
// ...
@@ -67,7 +67,7 @@ Returns a boolean result or optionally a [query constraint](../queries/overview)
To add read Access Control to a [Global](../configuration/globals), use the `access` property in the [Global Config](../configuration/globals):
```ts
import { GlobalConfig } from 'payload'
import { GlobalConfig } from @hanzo/cms'from
const Header: GlobalConfig = {
// ...
@@ -94,7 +94,7 @@ Returns a boolean result or optionally a [query constraint](../queries/overview)
To add update Access Control to a [Global](../configuration/globals), use the `access` property in the [Global Config](../configuration/globals):
```ts
import { GlobalConfig } from 'payload'
import { GlobalConfig } from @hanzo/cms'from
const Header: GlobalConfig = {
// ...
@@ -122,7 +122,7 @@ If the Global has [Versions](../versions/overview) enabled, the `readVersions` A
To add Read Versions Access Control to a Global, use the `readVersions` property in the [Global Config](../configuration/globals):
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const GlobalWithVersionsAccess: GlobalConfig = {
// ...
docs/admin/admin-panel-location.mdx
+3 -3
View File
@@ -47,7 +47,7 @@ To change the admin route from `/admin` to `/dashboard`:
**1. Update your Payload Config:**
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -101,7 +101,7 @@ To move both the Payload Admin Panel and API under a custom path, you move the e
**1. Update your Payload Config with all routes and import map settings:**
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import path from 'path'
import { fileURLToPath } from 'url'
@@ -222,7 +222,7 @@ You may see this warning in `layout.tsx`:
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
```
**This warning is misleading.** The file was generated during initial project setup by `create-payload-app`, but it is **never regenerated** by Payload. It is completely safe to modify this file, especially when customizing your folder structure.
**This warning is misleading.** The file was generated during initial project setup by `@hanzo/create-cms-app`, but it is **never regenerated** by Payload. It is completely safe to modify this file, especially when customizing your folder structure.
## Editing layout.tsx Safely
docs/admin/customizing-css.mdx
+1 -1
View File
@@ -54,7 +54,7 @@ To override existing styles in a way that the previous rules of specificity woul
You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
```scss
@import '~@payloadcms/ui/scss';
@import '~@hanzo/cms-ui/scss';
```
## CSS Library
docs/admin/locked-documents.mdx
+1 -1
View File
@@ -33,7 +33,7 @@ The `lockDocuments` property exists on both the Collection Config and the Global
Here's an example configuration for document locking:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
docs/admin/metadata.mdx
+2 -2
View File
@@ -176,7 +176,7 @@ Collection Metadata is the metadata that is applied to all pages within any give
To customize Collection Metadata, use the `admin.meta` key within your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -200,7 +200,7 @@ Global Metadata is the metadata that is applied to all pages within any given Gl
To customize Global Metadata, use the `admin.meta` key within your Global Config:
```ts
import { GlobalConfig } from 'payload'
import { GlobalConfig } from @hanzo/cms'from
export const MyGlobal: GlobalConfig = {
// ...
docs/admin/overview.mdx
+9 -9
View File
@@ -87,7 +87,7 @@ All auto-generated files will contain the following comments at the top of each
All root-level options for the Admin Panel are defined in your [Payload Config](../configuration/overview) under the `admin` property:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -131,7 +131,7 @@ The following options are available:
To specify which Collection to allow to login to the Admin Panel, pass the `admin.user` key equal to the slug of any auth-enabled Collection:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -177,7 +177,7 @@ Root-level routes are those that are not behind the `/admin` path, such as the [
To customize root-level routes, use the `routes` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -217,7 +217,7 @@ This change, however, also requires a change to your [Project Structure](#projec
For example, if you set `routes.admin` to `/`:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -239,7 +239,7 @@ app
<Banner type="warning">
**Note:** If you set Root-level Routes _before_ auto-generating the Admin
Panel via `create-payload-app`, your [Project Structure](#project-structure)
Panel via `@hanzo/create-cms-app`, your [Project Structure](#project-structure)
will already be set up correctly.
</Banner>
@@ -256,7 +256,7 @@ Admin-level routes are those behind the `/admin` path. These are the routes that
To customize admin-level routes, use the `admin.routes` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -319,7 +319,7 @@ We validate the supported timezones array by checking the value against the list
For example:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -350,7 +350,7 @@ const config = buildConfig({
For `supportedTimezones` we also support using a function that is given the defaultTimezones list. This allows you to easily extend the default list of timezones rather than replacing it completely.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -383,7 +383,7 @@ In some situations you may want the displayed date and time to match exactly wha
Using a UTC timezone means that an editor inputing for example '1pm' will always see '1pm' and the stored value will be '13:00:00Z'.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
docs/admin/preferences.mdx
+1 -1
View File
@@ -78,7 +78,7 @@ Here is an example for how you can utilize `usePreferences` within your custom A
```tsx
'use client'
import React, { Fragment, useState, useEffect, useCallback } from 'react'
import { usePreferences } from '@payloadcms/ui'
import { usePreferences } from '@hanzo/cms-ui'
const lastUsedColorsPreferenceKey = 'last-used-colors'
docs/admin/preview.mdx
+5 -5
View File
@@ -20,7 +20,7 @@ The Preview feature can also be used to achieve something known as "Draft Previe
To add Preview, pass a function to the `admin.preview` property in any [Collection Config](../configuration/collections#admin-options) or [Global Config](../configuration/globals#admin-options):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Pages: CollectionConfig = {
slug: 'pages',
@@ -76,7 +76,7 @@ If you're using Next.js, you can do the following code to enter [Draft Mode](htt
First, format your `admin.preview` function to point to a custom endpoint that you'll open on your front-end. This URL should include a few key query search params:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Pages: CollectionConfig = {
slug: 'pages',
@@ -108,8 +108,8 @@ Then, create an API route that verifies the preview secret, authenticates the us
`/app/preview/route.ts`
```ts
import type { PayloadRequest } from 'payload'
import { getPayload } from 'payload'
import type { PayloadRequest } from @hanzo/cms'from
import { getPayload } from @hanzo/cms'from
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
@@ -237,7 +237,7 @@ You can also conditionally enable or disable the preview button based on the doc
To do this, simply return `null` from the `preview` function when you want to hide the preview button:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Pages: CollectionConfig = {
slug: 'pages',
docs/admin/react-hooks.mdx
+27 -27
View File
@@ -24,8 +24,8 @@ To do so, import the `useField` hook as follows:
```tsx
'use client'
import type { TextFieldClientComponent } from 'payload'
import { useField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from @hanzo/cms'from
import { useField } from '@hanzo/cms-ui'
export const CustomTextField: TextFieldClientComponent = ({ path }) => {
const { value, setValue } = useField({ path }) // highlight-line
@@ -84,7 +84,7 @@ To programmatically update a Lexical rich text field and have the editor visuall
```tsx
'use client'
import { useAllFormFields } from '@payloadcms/ui'
import { useAllFormFields } from '@hanzo/cms-ui'
export const MyComponent: React.FC = () => {
const [, dispatchFields] = useAllFormFields()
@@ -135,7 +135,7 @@ You can pass a Redux-like selector into the hook, which will ensure that you ret
```tsx
'use client'
import { useFormFields } from '@payloadcms/ui'
import { useFormFields } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// Get only the `amount` field state, and only cause a rerender when that field changes
@@ -174,8 +174,8 @@ You can do lots of powerful stuff by retrieving the full form state, like using
```tsx
'use client'
import { useAllFormFields } from '@payloadcms/ui'
import { reduceFieldsToValues, getSiblingData } from 'payload/shared'
import { useAllFormFields } from '@hanzo/cms-ui'
import { reduceFieldsToValues, getSiblingData } from @hanzo/cms'from
const ExampleComponent: React.FC = () => {
// the `fields` const will be equal to all fields' state,
@@ -460,7 +460,7 @@ The `useForm` hook returns an object with the following properties:
/>
\`\`\`tsx
import { useForm } from "@payloadcms/ui"
import { useForm } from "@hanzo/cms-ui"
export const CustomArrayManager = () => {
const { addFieldRow } = useForm()
@@ -557,7 +557,7 @@ Field: '/path/to/CustomArrayManagerField',
/>
\`\`\`tsx
import { useForm } from "@payloadcms/ui"
import { useForm } from "@hanzo/cms-ui"
export const CustomArrayManager = () => {
const { removeFieldRow } = useForm()
@@ -652,7 +652,7 @@ Field: '/path/to/CustomArrayManagerField',
/>
\`\`\`tsx
import { useForm } from "@payloadcms/ui"
import { useForm } from "@hanzo/cms-ui"
export const CustomArrayManager = () => {
const { replaceFieldRow } = useForm()
@@ -725,7 +725,7 @@ An example where this could happen would be custom components within lexical blo
```tsx
'use client'
import { useDocumentForm } from '@payloadcms/ui'
import { useDocumentForm } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
const { fields: parentDocumentFields } = useDocumentForm()
@@ -755,7 +755,7 @@ The `useCollapsible` hook allows you to control parent collapsibles:
'use client'
import React from 'react'
import { useCollapsible } from '@payloadcms/ui'
import { useCollapsible } from '@hanzo/cms-ui'
const CustomComponent: React.FC = () => {
const { isCollapsed, toggle } = useCollapsible()
@@ -815,7 +815,7 @@ The `useDocumentInfo` hook provides information about the current document being
```tsx
'use client'
import { useDocumentInfo } from '@payloadcms/ui'
import { useDocumentInfo } from '@hanzo/cms-ui'
const LinkFromCategoryToPosts: React.FC = () => {
// highlight-start
@@ -843,7 +843,7 @@ The `useListQuery` hook is used to subscribe to the data, current query, and oth
```tsx
'use client'
import { useListQuery } from '@payloadcms/ui'
import { useListQuery } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -887,7 +887,7 @@ The `useSelection` hook provides information on the selected rows in the List vi
```tsx
'use client'
import { useSelection } from '@payloadcms/ui'
import { useSelection } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -913,7 +913,7 @@ In any Custom Component you can get the selected locale object with the `useLoca
```tsx
'use client'
import { useLocale } from '@payloadcms/ui'
import { useLocale } from '@hanzo/cms-ui'
const Greeting: React.FC = () => {
// highlight-start
@@ -945,7 +945,7 @@ Useful to retrieve info about the currently logged in user as well as methods fo
```tsx
'use client'
import { useAuth } from '@payloadcms/ui'
import { useAuth } from '@hanzo/cms-ui'
import type { User } from '../payload-types.ts'
const Greeting: React.FC = () => {
@@ -963,7 +963,7 @@ Used to retrieve the Payload [Client Config](../custom-components/overview#acces
```tsx
'use client'
import { useConfig } from '@payloadcms/ui'
import { useConfig } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -978,7 +978,7 @@ If you need to retrieve a specific collection or global config by its slug, `get
```tsx
'use client'
import { useConfig } from '@payloadcms/ui'
import { useConfig } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -998,7 +998,7 @@ Sends back how many editing levels "deep" the current component is. Edit depth i
```tsx
'use client'
import { useEditDepth } from '@payloadcms/ui'
import { useEditDepth } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -1019,7 +1019,7 @@ Returns the currently selected theme (`light`, `dark` or `auto`), a set function
```tsx
'use client'
import { useTheme } from '@payloadcms/ui'
import { useTheme } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -1058,7 +1058,7 @@ Returns properties and methods to manipulate table columns:
```tsx
'use client'
import { useTableColumns } from '@payloadcms/ui'
import { useTableColumns } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// highlight-start
@@ -1103,7 +1103,7 @@ The `useDocumentEvents` hook provides a way of subscribing to cross-document eve
```tsx
'use client'
import { useDocumentEvents } from '@payloadcms/ui'
import { useDocumentEvents } from '@hanzo/cms-ui'
const ListenForUpdates: React.FC = () => {
const { mostRecentUpdate } = useDocumentEvents()
@@ -1131,7 +1131,7 @@ The `useStepNav` hook provides a way to change the step-nav breadcrumb links in
```tsx
'use client'
import { type StepNavItem, useStepNav } from '@payloadcms/ui'
import { type StepNavItem, useStepNav } from '@hanzo/cms-ui'
import { useEffect } from 'react'
export const MySetStepNavComponent: React.FC<{
@@ -1160,7 +1160,7 @@ This hook returns an array with two elements:
```tsx
'use client'
import { usePayloadAPI } from '@payloadcms/ui'
import { usePayloadAPI } from '@hanzo/cms-ui'
const MyComponent: React.FC = () => {
// Fetch data from a collection item using its ID
@@ -1229,10 +1229,10 @@ This is useful for scenarios where you need to trigger another fetch regardless
Route transitions are useful in showing immediate visual feedback to the user when navigating between pages. This is especially useful on slow networks when navigating to data heavy or process intensive pages.
By default, any instances of `Link` from `@payloadcms/ui` will trigger route transitions by default.
By default, any instances of `Link` from `@hanzo/cms-ui` will trigger route transitions by default.
```tsx
import { Link } from '@payloadcms/ui'
import { Link } from '@hanzo/cms-ui'
const MyComponent = () => {
return <Link href="/somewhere">Go Somewhere</Link>
@@ -1244,7 +1244,7 @@ You can also trigger route transitions programmatically, such as when using `rou
```ts
'use client'
import React, { useCallback } from 'react'
import { useTransition } from '@payloadcms/ui'
import { useTransition } from '@hanzo/cms-ui'
import { useRouter } from 'next/navigation'
const MyComponent: React.FC = () => {
docs/authentication/api-keys.mdx
+2 -2
View File
@@ -25,7 +25,7 @@ Technically, both of these options will work for third-party integrations but th
To enable API keys on a collection, set the `useAPIKey` auth option to `true`. From there, a new interface will appear in the [Admin Panel](../admin/overview) for each document within the collection that allows you to generate an API key for each user in the Collection.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ThirdPartyAccess: CollectionConfig = {
slug: 'third-party-access',
@@ -71,7 +71,7 @@ Payload ensures that the same, uniform [Access Control](../access-control/overvi
If you want to use API keys as the only authentication method for a collection, you can disable the default local strategy by setting `disableLocalStrategy` to `true` on the collection's `auth` property. This will disable the ability to authenticate with email and password, and will only allow for authentication via API key.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ThirdPartyAccess: CollectionConfig = {
slug: 'third-party-access',
docs/authentication/cookies.mdx
+1 -1
View File
@@ -67,7 +67,7 @@ Define domains that you trust and are willing to accept Payload HTTP-only cookie
```ts
// payload.config.ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
serverURL: 'https://my-payload-instance.com',
docs/authentication/custom-strategies.mdx
+1 -1
View File
@@ -41,7 +41,7 @@ At its core a strategy simply takes information from the incoming request and re
Your `authenticate` method should return an object containing a Payload user document and any optional headers that you'd like Payload to set for you when we return a response.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Users: CollectionConfig = {
slug: 'users',
docs/authentication/email.mdx
+6 -6
View File
@@ -15,7 +15,7 @@ Email Verification forces users to prove they have access to the email address t
To enable Email Verification, use the `auth.verify` property on your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
@@ -42,7 +42,7 @@ The following options are available:
Function that accepts one argument, containing `{ req, token, user }`, that allows for overriding the HTML within emails that are sent to users indicating how to validate their account. The function should return a string that supports HTML, which can optionally be a full HTML email.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
@@ -74,7 +74,7 @@ export const Customers: CollectionConfig = {
Similarly to the above `generateEmailHTML`, you can also customize the subject of the email. The function arguments are the same but you can only return a string - not HTML.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
@@ -95,7 +95,7 @@ export const Customers: CollectionConfig = {
You can customize how the Forgot Password workflow operates with the following options on the `auth.forgotPassword` property:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
@@ -128,7 +128,7 @@ The following options are available:
This function allows for overriding the HTML within emails that are sent to users attempting to reset their password. The function should return a string that supports HTML, which can be a full HTML email.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
@@ -188,7 +188,7 @@ The following arguments are passed to the `generateEmailHTML` function:
Similarly to the above `generateEmailHTML`, you can also customize the subject of the email. The function arguments are the same but you can only return a string - not HTML.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Customers: CollectionConfig = {
// ...
docs/authentication/jwt.mdx
+1 -1
View File
@@ -44,7 +44,7 @@ const request = await fetch('http://localhost:3000', {
In some cases you may want to prevent the token from being returned from the auth operations. You can do that by setting `removeTokenFromResponses` to `true` like so:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const UsersWithoutJWTs: CollectionConfig = {
slug: 'users-without-jwts',
docs/authentication/overview.mdx
+5 -5
View File
@@ -25,7 +25,7 @@ When Authentication is enabled on a [Collection](../configuration/collections),
To enable Authentication on a Collection, use the `auth` property in the [Collection Config](../configuration/collections#config-options):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Users: CollectionConfig = {
// ...
@@ -49,7 +49,7 @@ Any [Collection](../configuration/collections) can opt-in to supporting Authenti
To enable Authentication on a Collection, use the `auth` property in the [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Admins: CollectionConfig = {
// ...
@@ -138,7 +138,7 @@ For testing and demo purposes you may want to skip forcing the user to login in
To enable auto-login, set the `autoLogin` property in the [Payload Config](../admin/overview#admin-options):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -180,7 +180,7 @@ Turning this property on will allow users to stay logged in indefinitely while t
To enable auto-refresh for user tokens, set `autoRefresh: true` in the [Payload Config](../admin/overview#admin-options) to:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -229,7 +229,7 @@ Default auth fields including `email`, `username`, and `password` can be overrid
Here's an example of how to restrict access to default auth fields:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Auth: CollectionConfig = {
slug: 'users',
docs/authentication/token-data.mdx
+2 -2
View File
@@ -13,7 +13,7 @@ During the lifecycle of a request you will be able to access the data you have c
You can specify what data gets encoded to the Cookie/JWT-Token by setting `saveToJWT` property on fields within your auth collection.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Users: CollectionConfig = {
slug: 'users',
@@ -78,7 +78,7 @@ If you wish to use a different key other than the field `name`, you can define `
This is especially helpful when writing [Hooks](../hooks/overview) and [Access Control](../access-control/overview) that depend on user defined fields.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Invoices: CollectionConfig = {
slug: 'invoices',
docs/configuration/collections.mdx
+12 -12
View File
@@ -15,7 +15,7 @@ Collections are the primary way to structure recurring data in your application,
To define a Collection Config, use the `collections` property in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -38,7 +38,7 @@ It's often best practice to write your Collections in separate files and then im
Here is what a simple Collection Config might look like:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -113,7 +113,7 @@ Orderable can also be added to [joins fields](../fields/join).
If you need to generate order keys programmatically (e.g., when creating documents via the Local API with a specific order), you can import the utilities directly:
```ts
import { generateKeyBetween, generateNKeysBetween } from 'payload/shared'
import { generateKeyBetween, generateNKeysBetween } from @hanzo/cms'from
// Generate a key between two existing keys (or null for start/end)
const newKey = generateKeyBetween('a0', 'a1')
@@ -137,7 +137,7 @@ The behavior of Collections within the [Admin Panel](../admin/overview) can be f
To configure Admin Options for Collections, use the `admin` property in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -187,7 +187,7 @@ Collections can set their own [Custom Components](../custom-components/overview)
To override Collection Components, use the `admin.components` property in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -218,7 +218,7 @@ The following options are available:
Custom components within the Edit View are configured under `admin.components.edit`:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -270,7 +270,7 @@ All Collections receive their own List View which displays a paginated list of d
To configure pagination options, use the `admin.pagination` property in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
@@ -299,7 +299,7 @@ In the List View, there is a "search" box that allows you to quickly find a docu
To define which fields should be searched, use the `admin.listSearchableFields` property in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
@@ -323,7 +323,7 @@ When `true`, the List View will use the [Select API](../queries/select) to query
To enable this, set `enableListViewSelectAPI: true` in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
@@ -346,7 +346,7 @@ Enabling this feature may cause unexpected behavior in some cases, however, such
For example, if your component relies on a "title" field, this field will no longer be populated if the column is inactive:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
@@ -383,7 +383,7 @@ The `formatDocURL` function allows you to customize how document links are gener
To define a custom document URL formatter, use the `admin.formatDocURL` property in your Collection Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
@@ -466,5 +466,5 @@ You can import types from Payload to help make writing your Collection configs e
The `CollectionConfig` type represents a raw Collection Config in its full form, where only the bare minimum properties are marked as required. The `SanitizedCollectionConfig` type represents a Collection Config after it has been fully sanitized. Generally, this is only used internally by Payload.
```ts
import type { CollectionConfig, SanitizedCollectionConfig } from 'payload'
import type { CollectionConfig, SanitizedCollectionConfig } from @hanzo/cms'from
```
docs/configuration/environment-vars.mdx
+2 -2
View File
@@ -30,7 +30,7 @@ DATABASE_URL=mongodb://localhost:27017/my-database
To use Environment Variables in your Payload Config, you can access them directly from `process.env`:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
serverURL: process.env.SERVER_URL, // highlight-line
@@ -84,7 +84,7 @@ To do this, import the package as high up in your application as possible:
import dotenv from 'dotenv'
dotenv.config() // highlight-line
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
serverURL: process.env.SERVER_URL,
docs/configuration/globals.mdx
+6 -6
View File
@@ -13,7 +13,7 @@ Globals are the primary way to structure singletons in Payload, such as a header
To define a Global Config, use the `globals` property in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -36,7 +36,7 @@ It's often best practice to write your Globals in separate files and then import
Here is what a simple Global Config might look like:
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Nav: GlobalConfig = {
slug: 'nav',
@@ -107,7 +107,7 @@ The behavior of Globals within the [Admin Panel](../admin/overview) can be fully
To configure Admin Options for Globals, use the `admin` property in your Global Config:
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const MyGlobal: GlobalConfig = {
// ...
@@ -137,7 +137,7 @@ Globals can set their own [Custom Components](../custom-components/overview) whi
To override Global Components, use the `admin.components` property in your Global Config:
```ts
import type { SanitizedGlobalConfig } from 'payload'
import type { SanitizedGlobalConfig } from @hanzo/cms'from
export const MyGlobal: SanitizedGlobalConfig = {
// ...
@@ -164,7 +164,7 @@ The following options are available:
Custom components within the Edit View are configured under `admin.components.elements`:
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const MyGlobal: GlobalConfig = {
// ...
@@ -219,5 +219,5 @@ You can import types from Payload to help make writing your Global configs easie
The `GlobalConfig` type represents a raw Global Config in its full form, where only the bare minimum properties are marked as required. The `SanitizedGlobalConfig` type represents a Global Config after it has been fully sanitized. Generally, this is only used internally by Payload.
```ts
import type { GlobalConfig, SanitizedGlobalConfig } from 'payload'
import type { GlobalConfig, SanitizedGlobalConfig } from @hanzo/cms'from
```
docs/configuration/i18n.mdx
+16 -16
View File
@@ -10,16 +10,16 @@ The [Admin Panel](../admin/overview) is translated in over [30 languages and cou
By default, Payload comes preinstalled with English, but you can easily load other languages into your own application. Languages are automatically detected based on the request. If no language is detected, or if the user's language is not yet supported by your application, English will be chosen.
To add I18n to your project, you first need to install the `@payloadcms/translations` package:
To add I18n to your project, you first need to install the `@hanzo/cms-translations` package:
```bash
pnpm install @payloadcms/translations
pnpm install @hanzo/cms-translations
```
Once installed, it can be configured using the `i18n` key in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -41,7 +41,7 @@ export default buildConfig({
You can easily customize and override any of the i18n settings that Payload provides by default. Payload will use your custom options and merge them in with its own.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -63,14 +63,14 @@ The following options are available:
## Adding Languages
You can easily add new languages to your Payload app by providing the translations for the new language. Payload maintains a number of built-in translations that can be imported from `@payloadcms/translations`, but you can also provide your own [Custom Translations](#custom-translations) to support any language.
You can easily add new languages to your Payload app by providing the translations for the new language. Payload maintains a number of built-in translations that can be imported from `@hanzo/cms-translations`, but you can also provide your own [Custom Translations](#custom-translations) to support any language.
To add a new language, use the `i18n.supportedLanguages` key in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { en } from '@payloadcms/translations/languages/en'
import { de } from '@payloadcms/translations/languages/de'
import { buildConfig } from @hanzo/cms'from
import { en } from '@hanzo/cms-translations/languages/en'
import { de } from '@hanzo/cms-translations/languages/de'
export default buildConfig({
// ...
@@ -94,7 +94,7 @@ You can customize Payload's built-in translations either by extending existing l
To add Custom Translations, use the `i18n.translations` key in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
//...
@@ -125,7 +125,7 @@ While Payload's built-in features come fully translated, you may also want to tr
To do this, provide the translations wherever applicable, keyed to the language code:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Articles: CollectionConfig = {
slug: 'articles',
@@ -195,8 +195,8 @@ In this example we show how to extend English, but you can do the same for any l
```ts
// <rootDir>/custom-translations.ts
import { enTranslations } from '@payloadcms/translations/languages/en'
import type { NestedKeysStripped } from '@payloadcms/translations'
import { enTranslations } from '@hanzo/cms-translations/languages/en'
import type { NestedKeysStripped } from '@hanzo/cms-translations'
export const customTranslations = {
en: {
@@ -220,7 +220,7 @@ Import the shared translations object into our Payload config so they are availa
```ts
// <rootDir>/payload.config.ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import { customTranslations } from './custom-translations'
@@ -240,7 +240,7 @@ Import the shared translation types to use in your [Custom Component](../custom-
'use client'
import type React from 'react'
import { useTranslation } from '@payloadcms/ui'
import { useTranslation } from '@hanzo/cms-ui'
import type {
CustomTranslationsObject,
@@ -262,8 +262,8 @@ Additionally, Payload exposes the `t` function in various places, for example in
```ts
// <rootDir>/fields/myField.ts
import type { TFunction } from '@payloadcms/translations'
import type { Field } from 'payload'
import type { TFunction } from '@hanzo/cms-translations'
import type { Field } from @hanzo/cms'from
import { CustomTranslationsKeys } from '../custom-translations'
docs/configuration/localization.mdx
+5 -5
View File
@@ -13,7 +13,7 @@ With Localization, you can begin to serve personalized content to your users bas
To configure Localization, use the `localization` key in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -31,7 +31,7 @@ Add the `localization` property to your Payload Config to enable Localization pr
To configure locales, use the `localization.locales` property in your [Payload Config](./overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -45,7 +45,7 @@ export default buildConfig({
You can also define locales using [full configuration objects](#locale-object):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
collections: [
@@ -187,7 +187,7 @@ Payload allows you to localize the `status` field for **draft enabled** collecti
First, enable the experimental flag in your main Payload config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// highlight-start
@@ -204,7 +204,7 @@ export default buildConfig({
Then, enable it for specific collections or globals:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
// ...
docs/configuration/overview.mdx
+12 -12
View File
@@ -13,7 +13,7 @@ Everything from your [Database](../database/overview) choice to the appearance o
The Payload Config is a `payload.config.ts` file typically located in the root of your project:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// Your config goes here
@@ -34,8 +34,8 @@ To author your Payload Config, first determine which [Database](../database/over
Here is one of the simplest possible Payload configs:
```ts
import { buildConfig } from 'payload'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { buildConfig } from @hanzo/cms'from
import { mongooseAdapter } from '@hanzo/cms-db-mongodb'
export default buildConfig({
secret: process.env.PAYLOAD_SECRET,
@@ -117,7 +117,7 @@ Payload exposes a variety of TypeScript settings that you can leverage. These se
To customize the TypeScript settings, use the `typescript` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -225,7 +225,7 @@ Cross-origin resource sharing (CORS) can be configured with either a whitelist a
Here's an example showing how to allow incoming requests from any domain:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -238,7 +238,7 @@ export default buildConfig({
Here's an example showing how to append a new header (`x-custom-header`) in `Access-Control-Allow-Headers`:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -258,7 +258,7 @@ You can import types from Payload to help make writing your config easier and ty
The `Config` type represents a raw Payload Config in its full form. Only the bare minimum properties are marked as required. The `SanitizedConfig` type represents a Payload Config after it has been fully sanitized. Generally, this is only used internally by Payload.
```ts
import type { Config, SanitizedConfig } from 'payload'
import type { Config, SanitizedConfig } from @hanzo/cms'from
```
## Server vs. Client
@@ -288,7 +288,7 @@ The `logger` option accepts one of three forms:
Pass a `{ options, destination? }` object to configure the logger. `options` accepts standard [Pino logger options](https://getpino.io/#/docs/api?id=options) such as `level` and `name`. An optional `destination` stream can be supplied as a second argument.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// highlight-start
@@ -304,7 +304,7 @@ export default buildConfig({
To write logs to a file, pass a destination stream:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import { pino } from 'pino'
export default buildConfig({
@@ -330,7 +330,7 @@ export default buildConfig({
Pass a fully configured Pino logger instance. This is the recommended approach when you need custom transports, formatters, or `pino-pretty` in development:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import { pino } from 'pino'
import pinoPretty from 'pino-pretty'
@@ -359,9 +359,9 @@ Example for `pnpm payload seed`:
Step 1: create `seed.ts` file in the same folder with `payload.config.ts` with:
```ts
import type { SanitizedConfig } from 'payload'
import type { SanitizedConfig } from @hanzo/cms'from
import payload from 'payload'
import payload from @hanzo/cms'from
// Script must define a "script" function export that accepts the sanitized config
export const script = async (config: SanitizedConfig) => {
docs/custom-components/custom-providers.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ As you add more and more [Custom Components](./overview) to your [Admin Panel](.
To add a Custom Provider, use the `admin.components.providers` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
docs/custom-components/custom-views.mdx
+13 -13
View File
@@ -28,7 +28,7 @@ The exact list of available keys depends on the scope of the view you are custom
Here is an example of how to swap out a built-in view:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -71,7 +71,7 @@ To add a _new_ view to the [Admin Panel](../admin/overview), simply add your own
New views require at least the `Component` and `path` properties:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -104,7 +104,7 @@ Custom Views are simply [Custom Components](./overview) rendered at the page-lev
To understand how to build Custom Views, first review the [Building Custom Components](./overview#building-custom-components) guide. Once you have a Custom Component ready, you can use it as a Custom View.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -148,9 +148,9 @@ Your Custom Views will be provided with the following props:
Here is an example of a Custom View component:
```tsx
import type { AdminViewServerProps } from 'payload'
import type { AdminViewServerProps } from @hanzo/cms'from
import { Gutter } from '@payloadcms/ui'
import { Gutter } from '@hanzo/cms-ui'
import React from 'react'
export function MyCustomView(props: AdminViewServerProps) {
@@ -175,10 +175,10 @@ Your Custom Root Views can optionally use one of the templates that Payload prov
Here is an example of how to use the Default Template in your Custom View:
```tsx
import type { AdminViewServerProps } from 'payload'
import type { AdminViewServerProps } from @hanzo/cms'from
import { DefaultTemplate } from '@payloadcms/next/templates'
import { Gutter } from '@payloadcms/ui'
import { DefaultTemplate } from '@hanzo/cms-next/templates'
import { Gutter } from '@hanzo/cms-ui'
import React from 'react'
export function MyCustomView({
@@ -213,9 +213,9 @@ All Custom Views are public by default. It's up to you to secure your custom vie
Here is how you might secure a Custom View:
```tsx
import type { AdminViewServerProps } from 'payload'
import type { AdminViewServerProps } from @hanzo/cms'from
import { Gutter } from '@payloadcms/ui'
import { Gutter } from '@hanzo/cms-ui'
import React from 'react'
export function MyCustomView({ initPageResult }: AdminViewServerProps) {
@@ -243,7 +243,7 @@ Root Views are the main views of the [Admin Panel](../admin/overview). These are
To [swap out](#replacing-views) Root Views with your own, or to [create entirely new ones](#adding-new-views), use the `admin.components.views` property at the root of your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -282,7 +282,7 @@ Collection Views are views that are scoped under the `/collections` route, such
To [swap out](#replacing-views) Collection Views with your own, or to [create entirely new ones](#adding-new-views), use the `admin.components.views` property of your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -329,7 +329,7 @@ Global Views are views that are scoped under the `/globals` route, such as the E
To [swap out](#replacing-views) Global Views with your own or [create entirely new ones](#adding-new-views), use the `admin.components.views` property in your [Global Config](../configuration/globals):
```ts
import type { SanitizedGlobalConfig } from 'payload'
import type { SanitizedGlobalConfig } from @hanzo/cms'from
export const MyGlobalConfig: SanitizedGlobalConfig = {
// ...
docs/custom-components/dashboard.mdx
+3 -3
View File
@@ -30,7 +30,7 @@ One of the coolest things about widgets is that each plugin can define its own.
Define widgets in your Payload config using the `admin.dashboard.widgets` property:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
admin: {
@@ -74,7 +74,7 @@ export default buildConfig({
Widgets are React Server Components that receive `WidgetServerProps`:
```tsx
import type { WidgetServerProps } from 'payload'
import type { WidgetServerProps } from @hanzo/cms'from
export default async function UserStatsWidget({ req }: WidgetServerProps) {
const { payload } = req
@@ -137,7 +137,7 @@ The `defaultLayout` function receives the request object and should return an ar
If your widget has `fields`, you can type `widgetData` with generated widget types:
```tsx
import type { WidgetServerProps } from 'payload'
import type { WidgetServerProps } from @hanzo/cms'from
import type { SalesSummaryWidget } from '../payload-types'
docs/custom-components/document-views.mdx
+7 -7
View File
@@ -13,7 +13,7 @@ There are a number of default Document Views, such as the [Edit View](./edit-vie
To customize Document Views, use the `admin.components.views.edit[key]` property in your [Collection Config](../configuration/collections) or [Global Config](../configuration/globals):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionOrGlobalConfig: CollectionConfig = {
// ...
@@ -65,7 +65,7 @@ When setting a Document Root, you are responsible for rendering all necessary co
To override the Document Root, use the `views.edit.root` property in your [Collection Config](../configuration/collections) or [Global Config](../configuration/globals):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
slug: 'my-collection',
@@ -98,7 +98,7 @@ Each Document View can be given a tab for navigation, if desired. Tabs are highl
To add or customize tabs in the Document View, use the `views.edit.[key].tab` property in your [Collection Config](../configuration/collections) or [Global Config](../configuration/globals):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
slug: 'my-collection',
@@ -156,8 +156,8 @@ Here is an example of how to scaffold a custom Document Tab:
```tsx
import React from 'react'
import type { DocumentTabServerProps } from 'payload'
import { Link } from '@payloadcms/ui'
import type { DocumentTabServerProps } from @hanzo/cms'from
import { Link } from '@hanzo/cms-ui'
export function MyCustomTabComponent(props: DocumentTabServerProps) {
return (
@@ -171,8 +171,8 @@ export function MyCustomTabComponent(props: DocumentTabServerProps) {
```tsx
'use client'
import React from 'react'
import type { DocumentTabClientProps } from 'payload'
import { Link } from '@payloadcms/ui'
import type { DocumentTabClientProps } from @hanzo/cms'from
import { Link } from '@hanzo/cms-ui'
export function MyCustomTabComponent(props: DocumentTabClientProps) {
return (
docs/custom-components/edit-view.mdx
+47 -47
View File
@@ -21,7 +21,7 @@ The Edit View can be swapped out in its entirety for a Custom View, or it can be
To swap out the entire Edit View with a [Custom View](./custom-views), use the `views.edit.default` property in your [Collection Config](../configuration/collections) or [Global Config](../configuration/globals):
```tsx
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -47,7 +47,7 @@ Here is an example of a custom Edit View:
```tsx
import React from 'react'
import type { DocumentViewServerProps } from 'payload'
import type { DocumentViewServerProps } from @hanzo/cms'from
export function MyCustomServerEditView(props: DocumentViewServerProps) {
return <div>This is a custom Edit View (Server)</div>
@@ -59,7 +59,7 @@ export function MyCustomServerEditView(props: DocumentViewServerProps) {
```tsx
'use client'
import React from 'react'
import type { DocumentViewClientProps } from 'payload'
import type { DocumentViewClientProps } from @hanzo/cms'from
export function MyCustomClientEditView(props: DocumentViewClientProps) {
return <div>This is a custom Edit View (Client)</div>
@@ -83,7 +83,7 @@ In addition to swapping out the entire Edit View with a [Custom View](./custom-v
To override Edit View components for a Collection, use the `admin.components.edit` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -119,7 +119,7 @@ The following options are available:
To override Edit View components for Globals, use the `admin.components.elements` property in your [Global Config](../configuration/globals):
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const MyGlobal: GlobalConfig = {
// ...
@@ -161,7 +161,7 @@ The `SaveButton` component allows you to render a custom Save Button in the Edit
#### Example for Collections
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -180,7 +180,7 @@ export const Posts: CollectionConfig = {
#### Example for Globals
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Header: GlobalConfig = {
slug: 'header',
@@ -202,8 +202,8 @@ Here's an example of a custom `SaveButton` component:
```tsx
import React from 'react'
import { SaveButton } from '@payloadcms/ui'
import type { SaveButtonServerProps } from 'payload'
import { SaveButton } from '@hanzo/cms-ui'
import type { SaveButtonServerProps } from @hanzo/cms'from
export function MySaveButton(props: SaveButtonServerProps) {
return <SaveButton label="Save" />
@@ -215,8 +215,8 @@ export function MySaveButton(props: SaveButtonServerProps) {
```tsx
'use client'
import React from 'react'
import { SaveButton } from '@payloadcms/ui'
import type { SaveButtonClientProps } from 'payload'
import { SaveButton } from '@hanzo/cms-ui'
import type { SaveButtonClientProps } from @hanzo/cms'from
export function MySaveButton(props: SaveButtonClientProps) {
return <SaveButton label="Save" />
@@ -267,7 +267,7 @@ Here's an example of a custom `beforeDocumentControls` component:
```tsx
import React from 'react'
import type { BeforeDocumentControlsServerProps } from 'payload'
import type { BeforeDocumentControlsServerProps } from @hanzo/cms'from
export function MyCustomDocumentControlButton(
props: BeforeDocumentControlsServerProps,
@@ -281,7 +281,7 @@ export function MyCustomDocumentControlButton(
```tsx
'use client'
import React from 'react'
import type { BeforeDocumentControlsClientProps } from 'payload'
import type { BeforeDocumentControlsClientProps } from @hanzo/cms'from
export function MyCustomDocumentControlButton(
props: BeforeDocumentControlsClientProps,
@@ -299,7 +299,7 @@ To add `editMenuItems`, use the `components.edit.editMenuItems` property in your
#### Config Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Pages: CollectionConfig = {
slug: 'pages',
@@ -322,7 +322,7 @@ Here's an example of a custom `editMenuItems` component:
```tsx
import React from 'react'
import type { EditMenuItemsServerProps } from 'payload'
import type { EditMenuItemsServerProps } from @hanzo/cms'from
export const EditMenuItems = async (props: EditMenuItemsServerProps) => {
const href = `/custom-action?id=${props.id}`
@@ -344,9 +344,9 @@ export const EditMenuItems = async (props: EditMenuItemsServerProps) => {
'use client'
import React from 'react'
import { PopupList } from '@payloadcms/ui'
import { PopupList } from '@hanzo/cms-ui'
import type { EditMenuItemsClientProps } from 'payload'
import type { EditMenuItemsClientProps } from @hanzo/cms'from
export const EditMenuItems = (props: EditMenuItemsClientProps) => {
const handleClick = () => {
@@ -387,7 +387,7 @@ The `SaveDraftButton` component allows you to render a custom Save Draft Button
#### Example for Collections
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -409,7 +409,7 @@ export const Posts: CollectionConfig = {
#### Example for Globals
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Header: GlobalConfig = {
slug: 'header',
@@ -434,8 +434,8 @@ Here's an example of a custom `SaveDraftButton` component:
```tsx
import React from 'react'
import { SaveDraftButton } from '@payloadcms/ui'
import type { SaveDraftButtonServerProps } from 'payload'
import { SaveDraftButton } from '@hanzo/cms-ui'
import type { SaveDraftButtonServerProps } from @hanzo/cms'from
export function MySaveDraftButton(props: SaveDraftButtonServerProps) {
return <SaveDraftButton />
@@ -447,8 +447,8 @@ export function MySaveDraftButton(props: SaveDraftButtonServerProps) {
```tsx
'use client'
import React from 'react'
import { SaveDraftButton } from '@payloadcms/ui'
import type { SaveDraftButtonClientProps } from 'payload'
import { SaveDraftButton } from '@hanzo/cms-ui'
import type { SaveDraftButtonClientProps } from @hanzo/cms'from
export function MySaveDraftButton(props: SaveDraftButtonClientProps) {
return <SaveDraftButton />
@@ -467,7 +467,7 @@ The `PublishButton` component allows you to render a custom Publish Button in th
#### Example for Collections
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -489,7 +489,7 @@ export const Posts: CollectionConfig = {
#### Example for Globals
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Header: GlobalConfig = {
slug: 'header',
@@ -514,8 +514,8 @@ Here's an example of a custom `PublishButton` component:
```tsx
import React from 'react'
import { PublishButton } from '@payloadcms/ui'
import type { PublishButtonServerProps } from 'payload'
import { PublishButton } from '@hanzo/cms-ui'
import type { PublishButtonServerProps } from @hanzo/cms'from
export function MyPublishButton(props: PublishButtonServerProps) {
return <PublishButton label="Publish" />
@@ -527,7 +527,7 @@ export function MyPublishButton(props: PublishButtonServerProps) {
```tsx
'use client'
import React from 'react'
import { PublishButton } from '@payloadcms/ui'
import { PublishButton } from '@hanzo/cms-ui'
export function MyPublishButton() {
return <PublishButton label="Publish" />
@@ -541,7 +541,7 @@ The `UnpublishButton` property allows you to render a custom Unpublish Button in
To add an `UnpublishButton` component, use the `components.edit.UnpublishButton` property in your [Collection Config](../configuration/collections) or `components.elements.UnpublishButton` in your [Global Config](../configuration/globals):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -563,8 +563,8 @@ Here's an example of a custom `UnpublishButton` component:
```tsx
import React from 'react'
import { UnpublishButton } from '@payloadcms/ui'
import type { UnpublishButtonServerProps } from 'payload'
import { UnpublishButton } from '@hanzo/cms-ui'
import type { UnpublishButtonServerProps } from @hanzo/cms'from
export function MyUnpublishButton(props: UnpublishButtonServerProps) {
return <UnpublishButton label="Unpublish" />
@@ -576,7 +576,7 @@ export function MyUnpublishButton(props: UnpublishButtonServerProps) {
```tsx
'use client'
import React from 'react'
import { UnpublishButton } from '@payloadcms/ui'
import { UnpublishButton } from '@hanzo/cms-ui'
export function MyUnpublishButton() {
return <UnpublishButton label="Unpublish" />
@@ -595,7 +595,7 @@ The `PreviewButton` component allows you to render a custom Preview Button in th
#### Example for Collections
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -615,7 +615,7 @@ export const Posts: CollectionConfig = {
#### Example for Globals
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Header: GlobalConfig = {
slug: 'header',
@@ -638,8 +638,8 @@ Here's an example of a custom `PreviewButton` component:
```tsx
import React from 'react'
import { PreviewButton } from '@payloadcms/ui'
import type { PreviewButtonServerProps } from 'payload'
import { PreviewButton } from '@hanzo/cms-ui'
import type { PreviewButtonServerProps } from @hanzo/cms'from
export function MyPreviewButton(props: PreviewButtonServerProps) {
return <PreviewButton />
@@ -651,8 +651,8 @@ export function MyPreviewButton(props: PreviewButtonServerProps) {
```tsx
'use client'
import React from 'react'
import { PreviewButton } from '@payloadcms/ui'
import type { PreviewButtonClientProps } from 'payload'
import { PreviewButton } from '@hanzo/cms-ui'
import type { PreviewButtonClientProps } from @hanzo/cms'from
export function MyPreviewButton(props: PreviewButtonClientProps) {
return <PreviewButton />
@@ -666,7 +666,7 @@ The `Description` property allows you to render a custom description of the Coll
To add a `Description` component, use the `components.edit.Description` property in your [Collection Config](../configuration/collections) or `components.elements.Description` in your [Global Config](../configuration/globals):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -691,7 +691,7 @@ Here's an example of a custom `Description` component:
```tsx
import React from 'react'
import type { ViewDescriptionServerProps } from 'payload'
import type { ViewDescriptionServerProps } from @hanzo/cms'from
export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
return <div>This is a custom description component (Server)</div>
@@ -703,7 +703,7 @@ export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
```tsx
'use client'
import React from 'react'
import type { ViewDescriptionClientProps } from 'payload'
import type { ViewDescriptionClientProps } from @hanzo/cms'from
export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
return <div>This is a custom description component (Client)</div>
@@ -722,7 +722,7 @@ The `Status` component displays the document's draft/published state when versio
#### Example for Collections
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Posts: CollectionConfig = {
slug: 'posts',
@@ -744,7 +744,7 @@ export const Posts: CollectionConfig = {
#### Example for Globals
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const Header: GlobalConfig = {
slug: 'header',
@@ -770,7 +770,7 @@ The `Upload` property allows you to render a custom file upload component in the
To add an `Upload` component, use the `components.edit.Upload` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Media: CollectionConfig = {
slug: 'media',
@@ -791,7 +791,7 @@ export const Media: CollectionConfig = {
**Important:** Custom upload components must integrate with Payload's form
system to work correctly. You cannot use a simple `<input type="file" />` as
it won't connect to Payload's upload API. Instead, use Payload's built-in
`<Upload>` component from `@payloadcms/ui` or properly integrate with form
`<Upload>` component from `@hanzo/cms-ui` or properly integrate with form
hooks like `useDocumentInfo()`.
</Banner>
@@ -804,7 +804,7 @@ import React from 'react'
import type {
PayloadServerReactComponent,
SanitizedCollectionConfig,
} from 'payload'
} from @hanzo/cms'from
import { CustomUploadClient } from './MyUploadComponent.client'
export const MyUploadServer: PayloadServerReactComponent<
@@ -824,7 +824,7 @@ export const MyUploadServer: PayloadServerReactComponent<
```tsx
'use client'
import React from 'react'
import { Upload, useDocumentInfo } from '@payloadcms/ui'
import { Upload, useDocumentInfo } from '@hanzo/cms-ui'
export const CustomUploadClient = () => {
const { collectionSlug, docConfig, initialState } = useDocumentInfo()
docs/custom-components/list-view.mdx
+23 -23
View File
@@ -21,7 +21,7 @@ The List View can be swapped out in its entirety for a Custom View, or it can be
To swap out the entire List View with a [Custom View](./custom-views), use the `admin.components.views.list` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -45,7 +45,7 @@ Here is an example of a custom List View:
```tsx
import React from 'react'
import type { ListViewServerProps } from 'payload'
import type { ListViewServerProps } from @hanzo/cms'from
export function MyCustomServerListView(props: ListViewServerProps) {
return <div>This is a custom List View (Server)</div>
@@ -57,7 +57,7 @@ export function MyCustomServerListView(props: ListViewServerProps) {
```tsx
'use client'
import React from 'react'
import type { ListViewClientProps } from 'payload'
import type { ListViewClientProps } from @hanzo/cms'from
export function MyCustomClientListView(props: ListViewClientProps) {
return <div>This is a custom List View (Client)</div>
@@ -115,19 +115,19 @@ Server components receive all [client props](#client-component-props-listviewcli
<Banner type="info">
**Note:** Custom List Views are rendered inside a `ListQueryProvider`. This
means any Client Component in the tree can call `useListQuery()` from
`@payloadcms/ui` to read or update the current query state (search term, sort,
`@hanzo/cms-ui` to read or update the current query state (search term, sort,
page, filters, etc.).
</Banner>
### Using DefaultListView
If you want to keep Payload's built-in table and controls but add your own layout around them, import and render `DefaultListView` from `@payloadcms/ui`:
If you want to keep Payload's built-in table and controls but add your own layout around them, import and render `DefaultListView` from `@hanzo/cms-ui`:
```tsx
'use client'
import React from 'react'
import type { ListViewClientProps } from 'payload'
import { DefaultListView } from '@payloadcms/ui'
import type { ListViewClientProps } from @hanzo/cms'from
import { DefaultListView } from '@hanzo/cms-ui'
export function MyCustomClientListView(props: ListViewClientProps) {
return (
@@ -174,7 +174,7 @@ All slot components (`beforeList`, `beforeListTable`, `afterList`, `afterListTab
| `user` | The currently authenticated user. |
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -206,7 +206,7 @@ The `beforeList` property allows you to inject custom components before the list
To add `beforeList` components, use the `components.beforeList` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -226,7 +226,7 @@ Here's an example of a custom `beforeList` component:
```tsx
import React from 'react'
import type { BeforeListServerProps } from 'payload'
import type { BeforeListServerProps } from @hanzo/cms'from
export function MyBeforeListComponent(props: BeforeListServerProps) {
return <div>This is a custom beforeList component (Server)</div>
@@ -238,7 +238,7 @@ export function MyBeforeListComponent(props: BeforeListServerProps) {
```tsx
'use client'
import React from 'react'
import type { BeforeListClientProps } from 'payload'
import type { BeforeListClientProps } from @hanzo/cms'from
export function MyBeforeListComponent(props: BeforeListClientProps) {
return <div>This is a custom beforeList component (Client)</div>
@@ -252,7 +252,7 @@ The `beforeListTable` property allows you to inject custom components before the
To add `beforeListTable` components, use the `components.beforeListTable` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -272,7 +272,7 @@ Here's an example of a custom `beforeListTable` component:
```tsx
import React from 'react'
import type { BeforeListTableServerProps } from 'payload'
import type { BeforeListTableServerProps } from @hanzo/cms'from
export function MyBeforeListTableComponent(props: BeforeListTableServerProps) {
return <div>This is a custom beforeListTable component (Server)</div>
@@ -284,7 +284,7 @@ export function MyBeforeListTableComponent(props: BeforeListTableServerProps) {
```tsx
'use client'
import React from 'react'
import type { BeforeListTableClientProps } from 'payload'
import type { BeforeListTableClientProps } from @hanzo/cms'from
export function MyBeforeListTableComponent(props: BeforeListTableClientProps) {
return <div>This is a custom beforeListTable component (Client)</div>
@@ -298,7 +298,7 @@ The `afterList` property allows you to inject custom components after the list o
To add `afterList` components, use the `components.afterList` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -318,7 +318,7 @@ Here's an example of a custom `afterList` component:
```tsx
import React from 'react'
import type { AfterListServerProps } from 'payload'
import type { AfterListServerProps } from @hanzo/cms'from
export function MyAfterListComponent(props: AfterListServerProps) {
return <div>This is a custom afterList component (Server)</div>
@@ -330,7 +330,7 @@ export function MyAfterListComponent(props: AfterListServerProps) {
```tsx
'use client'
import React from 'react'
import type { AfterListClientProps } from 'payload'
import type { AfterListClientProps } from @hanzo/cms'from
export function MyAfterListComponent(props: AfterListClientProps) {
return <div>This is a custom afterList component (Client)</div>
@@ -344,7 +344,7 @@ The `afterListTable` property allows you to inject custom components after the t
To add `afterListTable` components, use the `components.afterListTable` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -364,7 +364,7 @@ Here's an example of a custom `afterListTable` component:
```tsx
import React from 'react'
import type { AfterListTableServerProps } from 'payload'
import type { AfterListTableServerProps } from @hanzo/cms'from
export function MyAfterListTableComponent(props: AfterListTableServerProps) {
return <div>This is a custom afterListTable component (Server)</div>
@@ -376,7 +376,7 @@ export function MyAfterListTableComponent(props: AfterListTableServerProps) {
```tsx
'use client'
import React from 'react'
import type { AfterListTableClientProps } from 'payload'
import type { AfterListTableClientProps } from @hanzo/cms'from
export function MyAfterListTableComponent(props: AfterListTableClientProps) {
return <div>This is a custom afterListTable component (Client)</div>
@@ -390,7 +390,7 @@ The `Description` property allows you to render a custom description of the Coll
To add a `Description` component, use the `components.Description` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -415,7 +415,7 @@ Here's an example of a custom `Description` component:
```tsx
import React from 'react'
import type { ViewDescriptionServerProps } from 'payload'
import type { ViewDescriptionServerProps } from @hanzo/cms'from
export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
return <div>This is a custom Collection description component (Server)</div>
@@ -427,7 +427,7 @@ export function MyDescriptionComponent(props: ViewDescriptionServerProps) {
```tsx
'use client'
import React from 'react'
import type { ViewDescriptionClientProps } from 'payload'
import type { ViewDescriptionClientProps } from @hanzo/cms'from
export function MyDescriptionComponent(props: ViewDescriptionClientProps) {
return <div>This is a custom Collection description component (Client)</div>
docs/custom-components/overview.mdx
+23 -23
View File
@@ -35,7 +35,7 @@ As Payload compiles the Admin Panel, it checks your config for Custom Components
To add a Custom Component, point to its file path in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -66,7 +66,7 @@ Components using named exports are identified either by appending `#` followed b
**Both default exports and named exports are fully supported.** Choose the pattern that works best for your codebase.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import { fileURLToPath } from 'node:url'
import path from 'path'
const filename = fileURLToPath(import.meta.url)
@@ -110,7 +110,7 @@ Button: {
While Custom Components are usually defined as a string, you can also pass in an object with additional options:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -171,7 +171,7 @@ The import map is **never regenerated** during:
Using the `config.admin.importMap.importMapFile` property, you can override the location of the import map. This is useful if you want to place the import map in a different location, or if you want to use a custom file name.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import { fileURLToPath } from 'node:url'
import path from 'path'
const filename = fileURLToPath(import.meta.url)
@@ -200,7 +200,7 @@ If needed, custom items can be appended onto the Import Map. This is mostly only
To add a custom import to the Import Map, use the `admin.dependencies` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -232,7 +232,7 @@ Here is an example:
```tsx
import React from 'react'
import type { Payload } from 'payload'
import type { Payload } from @hanzo/cms'from
async function MyServerComponent({
payload, // highlight-line
@@ -270,7 +270,7 @@ Each Custom Component receives the following props by default:
It is also possible to pass custom props to your Custom Components. To do this, you can use either the `clientProps` or `serverProps` properties depending on whether your prop is [serializable](https://react.dev/reference/rsc/use-client#serializable-types), and whether your component is a Server or Client Component.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -294,7 +294,7 @@ Here is how your component might receive this prop:
```tsx
import React from 'react'
import { Link } from '@payloadcms/ui'
import { Link } from '@hanzo/cms-ui'
export function MyComponent({ myCustomProp }: { myCustomProp: string }) {
return <Link href="/admin/logout">{myCustomProp}</Link>
@@ -350,7 +350,7 @@ For this reason, Payload creates a Client Config and passes it into the Config P
```tsx
'use client'
import React from 'react'
import { useConfig } from '@payloadcms/ui'
import { useConfig } from '@hanzo/cms-ui'
export function MyClientComponent() {
// highlight-start
@@ -373,7 +373,7 @@ Within Server Components, this prop is named `field`:
```tsx
import React from 'react'
import type { TextFieldServerComponent } from 'payload'
import type { TextFieldServerComponent } from @hanzo/cms'from
export const MyClientFieldComponent: TextFieldServerComponent = ({
field: { name },
@@ -387,7 +387,7 @@ Within Client Components, this prop is named `clientField` because its non-seria
```tsx
'use client'
import React from 'react'
import type { TextFieldClientComponent } from 'payload'
import type { TextFieldClientComponent } from @hanzo/cms'from
export const MyClientFieldComponent: TextFieldClientComponent = ({
clientField: { name },
@@ -400,13 +400,13 @@ export const MyClientFieldComponent: TextFieldClientComponent = ({
All Custom Components can support language translations to be consistent with Payload's [I18n](../configuration/i18n). This will allow your Custom Components to display the correct language based on the user's preferences.
To do this, first add your translation resources to the [I18n Config](../configuration/i18n). Then from any Server Component, you can translate resources using the `getTranslation` function from `@payloadcms/translations`.
To do this, first add your translation resources to the [I18n Config](../configuration/i18n). Then from any Server Component, you can translate resources using the `getTranslation` function from `@hanzo/cms-translations`.
All Server Components automatically receive the `i18n` object as a prop by default:
```tsx
import React from 'react'
import { getTranslation } from '@payloadcms/translations'
import { getTranslation } from '@hanzo/cms-translations'
export default async function MyServerComponent({ i18n }) {
const translatedTitle = getTranslation(myTranslation, i18n) // highlight-line
@@ -415,12 +415,12 @@ export default async function MyServerComponent({ i18n }) {
}
```
The best way to do this within a Client Component is to import the `useTranslation` hook from `@payloadcms/ui`:
The best way to do this within a Client Component is to import the `useTranslation` hook from `@hanzo/cms-ui`:
```tsx
'use client'
import React from 'react'
import { useTranslation } from '@payloadcms/ui'
import { useTranslation } from '@hanzo/cms-ui'
export function MyClientComponent() {
const { t, i18n } = useTranslation() // highlight-line
@@ -460,12 +460,12 @@ export default async function MyServerComponent({ payload, locale }) {
}
```
The best way to do this within a Client Component is to import the `useLocale` hook from `@payloadcms/ui`:
The best way to do this within a Client Component is to import the `useLocale` hook from `@hanzo/cms-ui`:
```tsx
'use client'
import React from 'react'
import { useLocale } from '@payloadcms/ui'
import { useLocale } from '@hanzo/cms-ui'
function Greeting() {
const locale = useLocale() // highlight-line
@@ -491,7 +491,7 @@ To make it easier to [build your Custom Components](#building-custom-components)
```tsx
'use client'
import React from 'react'
import { useDocumentInfo } from '@payloadcms/ui'
import { useDocumentInfo } from '@hanzo/cms-ui'
export function MyClientComponent() {
const { slug } = useDocumentInfo() // highlight-line
@@ -530,7 +530,7 @@ Then to colorize your Custom Component's background, for example, you can use th
Payload also exports its [SCSS](https://sass-lang.com) library for reuse which includes mixins, etc. To use this, simply import it as follows into your `.scss` file:
```scss
@import '~@payloadcms/ui/scss';
@import '~@hanzo/cms-ui/scss';
.my-component {
@include mid-break {
@@ -584,7 +584,7 @@ To do this, use the [`useFormFields`](../admin/react-hooks) hook instead of `use
```ts
'use client'
import { useFormFields } from '@payloadcms/ui'
import { useFormFields } from '@hanzo/cms-ui'
const MyComponent: TextFieldClientComponent = ({ path }) => {
const value = useFormFields(([fields, dispatch]) => fields[path])
@@ -596,10 +596,10 @@ const MyComponent: TextFieldClientComponent = ({ path }) => {
When building Custom Components it's important to be mindful of your bundle sizes sent to the client which are primarily affected by your imports. Generally speaking you can import third party packages as needed though it's best to avoid large packages that bloat your bundle size.
The most common issue is importing from our `@payloadcms/ui` package in the wrong context. So here are the simple rules to follow:
The most common issue is importing from our `@hanzo/cms-ui` package in the wrong context. So here are the simple rules to follow:
- In the **admin panel UI** you always want to import everything from `@payloadcms/ui` to ensure there's no package mismatch issues.
- In the **frontend application** you must always import components and utilities from `@payloadcms/ui/path/to` for example `import { Button } from '@payloadcms/ui/elements/Button'` to ensure tree shaking is effective and your bundle sizes are minimized otherwise it will include the entire library with your frontend code and greatly bloat your bundle size.
- In the **admin panel UI** you always want to import everything from `@hanzo/cms-ui` to ensure there's no package mismatch issues.
- In the **frontend application** you must always import components and utilities from `@hanzo/cms-ui/path/to` for example `import { Button } from '@hanzo/cms-ui/elements/Button'` to ensure tree shaking is effective and your bundle sizes are minimized otherwise it will include the entire library with your frontend code and greatly bloat your bundle size.
<Banner type="success">
See the [Performance](../performance/overview) documentation for more tips and
docs/custom-components/root-components.mdx
+17 -17
View File
@@ -13,7 +13,7 @@ When combined with [Custom CSS](../admin/customizing-css), you can create a trul
To override Root Components, use the `admin.components` property at the root of your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -67,7 +67,7 @@ Actions are rendered within the header of the Admin Panel. Actions are typically
To add an action, use the `actions` property in your `admin.components` config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -105,7 +105,7 @@ The `beforeDashboard` property allows you to inject Custom Components into the b
To add `beforeDashboard` components, use the `admin.components.beforeDashboard` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -140,7 +140,7 @@ Similar to `beforeDashboard`, the `afterDashboard` property allows you to inject
To add `afterDashboard` components, use the `admin.components.afterDashboard` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -175,7 +175,7 @@ The `beforeLogin` property allows you to inject Custom Components into the built
To add `beforeLogin` components, use the `admin.components.beforeLogin` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -204,7 +204,7 @@ Similar to `beforeLogin`, the `afterLogin` property allows you to inject Custom
To add `afterLogin` components, use the `admin.components.afterLogin` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -233,7 +233,7 @@ The `beforeNavLinks` property allows you to inject Custom Components into the bu
To add `beforeNavLinks` components, use the `admin.components.beforeNavLinks` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -262,7 +262,7 @@ Similar to `beforeNavLinks`, the `afterNavLinks` property allows you to inject C
To add `afterNavLinks` components, use the `admin.components.afterNavLinks` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -291,7 +291,7 @@ The `settingsMenu` property allows you to inject Custom Components into a popup
To add `settingsMenu` components, use the `admin.components.settingsMenu` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -309,7 +309,7 @@ Here is an example of a simple `settingsMenu` component:
```tsx
'use client'
import { PopupList } from '@payloadcms/ui'
import { PopupList } from '@hanzo/cms-ui'
export function MySettingsMenu() {
return (
@@ -328,7 +328,7 @@ export function MySettingsMenu() {
You can pass multiple components to create organized groups of menu items:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -350,7 +350,7 @@ The `Nav` property contains the sidebar / mobile menu in its entirety. Use this
To add a custom nav, use the `admin.components.Nav` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -367,7 +367,7 @@ export default buildConfig({
Here is an example of a simple `Nav` component:
```tsx
import { Link } from '@payloadcms/ui'
import { Link } from '@hanzo/cms-ui'
export default function MyCustomNav() {
return (
@@ -389,7 +389,7 @@ The `Icon` property is the simplified logo used in contexts like the `Nav` compo
To add a custom icon, use the `admin.components.graphics.Icon` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -420,7 +420,7 @@ The `Logo` property is the full logo used in contexts like the `Login` view. Thi
To add a custom logo, use the `admin.components.graphics.Logo` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -453,7 +453,7 @@ Examples of a custom header components might include an announcements banner, a
To add `header` components, use the `admin.components.header` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -486,7 +486,7 @@ The `logout.Button` property is the button displayed in the sidebar that should
To add a custom logout button, use the `admin.components.logout.Button` property in your Payload Config:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
docs/database/indexes.mdx
+2 -2
View File
@@ -13,7 +13,7 @@ When your query runs, the database will not scan the entire document to find tha
To index a field, set the `index` option to `true` in your field's config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -48,7 +48,7 @@ In addition to indexing single fields, you can also create compound indexes that
To create a compound index, use the `indexes` option in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
docs/database/migrations.mdx
+5 -5
View File
@@ -37,7 +37,7 @@ all changes that you attempt to make within the migration, and the `down` should
Here is an example migration file:
```ts
import { MigrateUpArgs, MigrateDownArgs } from '@payloadcms/your-db-adapter'
import { MigrateUpArgs, MigrateDownArgs } from '@hanzo/cms-your-db-adapter'
export async function up({ payload, req }: MigrateUpArgs): Promise<void> {
// Perform changes to your database here.
@@ -65,7 +65,7 @@ Additionally, you can bypass Payload's layer entirely and perform operations dir
### MongoDB:
```ts
import { type MigrateUpArgs } from '@payloadcms/db-mongodb'
import { type MigrateUpArgs } from '@hanzo/cms-db-mongodb'
export async function up({
session,
@@ -81,7 +81,7 @@ export async function up({
### Postgres:
```ts
import { type MigrateUpArgs, sql } from '@payloadcms/db-postgres'
import { type MigrateUpArgs, sql } from '@hanzo/cms-db-postgres'
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
const { rows: posts } = await db.execute(sql`SELECT * from posts`)
@@ -93,7 +93,7 @@ export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
In SQLite, transactions are disabled by default. [More](./transactions).
```ts
import { type MigrateUpArgs, sql } from '@payloadcms/db-sqlite'
import { type MigrateUpArgs, sql } from '@hanzo/cms-db-sqlite'
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
const { rows: posts } = await db.run(sql`SELECT * from posts`)
@@ -280,7 +280,7 @@ In order to run migrations at runtime, on initialization, you can pass your migr
// Import your migrations from the `index.ts` file
// that Payload generates for you
import { migrations } from './migrations'
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// your config here
docs/database/mongodb.mdx
+4 -4
View File
@@ -6,13 +6,13 @@ desc: Payload has supported MongoDB natively since we started. The flexible natu
keywords: MongoDB, documentation, typescript, Content Management System, cms, headless, javascript, node, react, nextjs
---
To use Payload with MongoDB, install the package `@payloadcms/db-mongodb`. It will come with everything you need to
To use Payload with MongoDB, install the package `@hanzo/cms-db-mongodb`. It will come with everything you need to
store your Payload data in MongoDB.
Then from there, pass it to your Payload Config as follows:
```ts
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { mongooseAdapter } from '@hanzo/cms-db-mongodb'
export default buildConfig({
// Your config goes here
@@ -64,7 +64,7 @@ You can access Mongoose models as follows:
You can import the `compatibilityOptions` object to get the recommended settings for other MongoDB implementations. Since these databases aren't officially supported by payload, you may still encounter issues even with these settings (please create an issue or PR if you believe these options should be updated):
```ts
import { mongooseAdapter, compatibilityOptions } from '@payloadcms/db-mongodb'
import { mongooseAdapter, compatibilityOptions } from '@hanzo/cms-db-mongodb'
export default buildConfig({
db: mongooseAdapter({
@@ -89,7 +89,7 @@ We thread your locale automatically through to the MongoDB queries when collatio
To enable collation, set the `collation` option in the adapter configuration:
```ts
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { mongooseAdapter } from '@hanzo/cms-db-mongodb'
export default buildConfig({
// Your config goes here
docs/database/overview.mdx
+2 -2
View File
@@ -17,8 +17,8 @@ Currently, Payload officially supports the following Database Adapters:
To configure a Database Adapter, use the `db` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { buildConfig } from @hanzo/cms'from
import { mongooseAdapter } from '@hanzo/cms-db-mongodb'
export default buildConfig({
// ...
docs/database/postgres.mdx
+14 -14
View File
@@ -6,9 +6,9 @@ desc: Payload supports Postgres through an officially supported Drizzle Database
keywords: Postgres, documentation, typescript, Content Management System, cms, headless, javascript, node, react, nextjs
---
To use Payload with Postgres, install the package `@payloadcms/db-postgres`. It leverages Drizzle ORM and `node-postgres` to interact with a Postgres database that you provide.
To use Payload with Postgres, install the package `@hanzo/cms-db-postgres`. It leverages Drizzle ORM and `node-postgres` to interact with a Postgres database that you provide.
Alternatively, the `@payloadcms/db-vercel-postgres` package is also available and is optimized for use with Vercel.
Alternatively, the `@hanzo/cms-db-vercel-postgres` package is also available and is optimized for use with Vercel.
It automatically manages changes to your database for you in development mode, and exposes a full suite of migration controls for you to leverage in order to keep other database environments in sync with your schema. DDL transformations are automatically generated.
@@ -16,10 +16,10 @@ To configure Payload to use Postgres, pass the `postgresAdapter` to your Payload
### Usage
`@payloadcms/db-postgres`:
`@hanzo/cms-db-postgres`:
```ts
import { postgresAdapter } from '@payloadcms/db-postgres'
import { postgresAdapter } from '@hanzo/cms-db-postgres'
export default buildConfig({
// Configure the Postgres adapter here
@@ -33,10 +33,10 @@ export default buildConfig({
})
```
`@payloadcms/db-vercel-postgres`:
`@hanzo/cms-db-vercel-postgres`:
```ts
import { vercelPostgresAdapter } from '@payloadcms/db-vercel-postgres'
import { vercelPostgresAdapter } from '@hanzo/cms-db-vercel-postgres'
export default buildConfig({
// Automatically uses process.env.POSTGRES_URL if no options are provided.
@@ -99,7 +99,7 @@ Then, you can access Drizzle as follows:
```ts
import { posts } from './payload-generated-schema'
// To avoid installing Drizzle, you can import everything that drizzle has from our re-export path.
import { eq, sql, and } from '@payloadcms/db-postgres/drizzle'
import { eq, sql, and } from '@hanzo/cms-db-postgres/drizzle'
// Drizzle's Querying API: https://orm.drizzle.team/docs/rqb
const posts = await payload.db.drizzle.query.posts.findMany()
@@ -143,12 +143,12 @@ For more information about migrations, [click here](./migrations#when-to-run-mig
Runs before the schema is built. You can use this hook to extend your database structure with tables that won't be managed by Payload.
```ts
import { postgresAdapter } from '@payloadcms/db-postgres'
import { postgresAdapter } from '@hanzo/cms-db-postgres'
import {
integer,
pgTable,
serial,
} from '@payloadcms/db-postgres/drizzle/pg-core'
} from '@hanzo/cms-db-postgres/drizzle/pg-core'
postgresAdapter({
beforeSchemaInit: [
@@ -203,7 +203,7 @@ export const countries = pgTable(
You can import them into your config and append to the schema with the `beforeSchemaInit` hook like this:
```ts
import { postgresAdapter } from '@payloadcms/db-postgres'
import { postgresAdapter } from '@hanzo/cms-db-postgres'
import { users, countries } from '../drizzle/schema'
postgresAdapter({
@@ -231,9 +231,9 @@ To extend a table, Payload exposes `extendTable` utility to the args. You can re
The following example adds the `extra_integer_column` column and a composite index on `country` and `city` columns.
```ts
import { postgresAdapter } from '@payloadcms/db-postgres'
import { index, integer } from '@payloadcms/db-postgres/drizzle/pg-core'
import { buildConfig } from 'payload'
import { postgresAdapter } from '@hanzo/cms-db-postgres'
import { index, integer } from '@hanzo/cms-db-postgres/drizzle/pg-core'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
collections: [
@@ -279,7 +279,7 @@ Columns and tables, added in schema hooks won't be added to the generated via `p
If you want them to be there, you either have to edit this file manually or mutate the internal Payload "raw" SQL schema in the `beforeSchemaInit`:
```ts
import { postgresAdapter } from '@payloadcms/db-postgres'
import { postgresAdapter } from '@hanzo/cms-db-postgres'
postgresAdapter({
beforeSchemaInit: [
docs/database/sqlite.mdx
+14 -14
View File
@@ -6,14 +6,14 @@ desc: Payload supports SQLite through an officially supported Drizzle Database A
keywords: SQLite, documentation, typescript, Content Management System, cms, headless, javascript, node, react, nextjs
---
To use Payload with SQLite, install the package `@payloadcms/db-sqlite`. It leverages Drizzle ORM and `libSQL` to interact with a SQLite database that you provide.
To use Payload with SQLite, install the package `@hanzo/cms-db-sqlite`. It leverages Drizzle ORM and `libSQL` to interact with a SQLite database that you provide.
It automatically manages changes to your database for you in development mode, and exposes a full suite of migration controls for you to leverage in order to keep other database environments in sync with your schema. DDL transformations are automatically generated.
To configure Payload to use SQLite, pass the `sqliteAdapter` to your Payload Config as follows:
```ts
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
export default buildConfig({
// Your config goes here
@@ -70,7 +70,7 @@ Then, you can access Drizzle as follows:
// Import table from the generated file
import { posts } from './payload-generated-schema'
// To avoid installing Drizzle, you can import everything that drizzle has from our re-export path.
import { eq, sql, and } from '@payloadcms/db-sqlite/drizzle'
import { eq, sql, and } from '@hanzo/cms-db-sqlite/drizzle'
// Drizzle's Querying API: https://orm.drizzle.team/docs/rqb
const posts = await payload.db.drizzle.query.posts.findMany()
@@ -113,8 +113,8 @@ For more information about migrations, [click here](./migrations#when-to-run-mig
Runs before the schema is built. You can use this hook to extend your database structure with tables that won't be managed by Payload.
```ts
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { integer, sqliteTable } from '@payloadcms/db-sqlite/drizzle/sqlite-core'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
import { integer, sqliteTable } from '@hanzo/cms-db-sqlite/drizzle/sqlite-core'
sqliteAdapter({
beforeSchemaInit: [
@@ -168,7 +168,7 @@ export const countries = sqliteTable(
You can import them into your config and append to the schema with the `beforeSchemaInit` hook like this:
```ts
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
import { users, countries } from '../drizzle/schema'
sqliteAdapter({
@@ -196,9 +196,9 @@ To extend a table, Payload exposes `extendTable` utility to the args. You can re
The following example adds the `extra_integer_column` column and a composite index on `country` and `city` columns.
```ts
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { index, integer } from '@payloadcms/db-sqlite/drizzle/sqlite-core'
import { buildConfig } from 'payload'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
import { index, integer } from '@hanzo/cms-db-sqlite/drizzle/sqlite-core'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
collections: [
@@ -244,7 +244,7 @@ Columns and tables, added in schema hooks won't be added to the generated via `p
If you want them to be there, you either have to edit this file manually or mutate the internal Payload "raw" SQL schema in the `beforeSchemaInit`:
```ts
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
sqliteAdapter({
beforeSchemaInit: [
@@ -290,10 +290,10 @@ sqliteAdapter({
We also provide a separate adapter to connect to [Cloudflare D1](https://developers.cloudflare.com/d1/), which is a serverless SQLite database.
To use it, install the package `@payloadcms/db-d1-sqlite` and configure it as follows:
To use it, install the package `@hanzo/cms-db-d1-sqlite` and configure it as follows:
```ts
import { sqliteD1Adapter } from '@payloadcms/db-d1-sqlite'
import { sqliteD1Adapter } from '@hanzo/cms-db-d1-sqlite'
export default buildConfig({
// Your config goes here
@@ -325,7 +325,7 @@ You must also enable it on your D1 database in the Cloudflare dashboard. Read mo
</Banner>
```ts
import { sqliteD1Adapter } from '@payloadcms/db-d1-sqlite'
import { sqliteD1Adapter } from '@hanzo/cms-db-d1-sqlite'
export default buildConfig({
collections: [],
@@ -344,7 +344,7 @@ You can then verify that they're being used by checking the logs in your Cloudfl
You can enable Write-Ahead Logging (WAL) mode for improved performance and concurrency by passing the `wal` option to the SQLite adapter.
```ts title="Example SQLite Adapter with WAL"
import { sqliteAdapter } from '@payloadcms/db-sqlite'
import { sqliteAdapter } from '@hanzo/cms-db-sqlite'
export default buildConfig({
// Your config goes here
collections: [
docs/database/transactions.mdx
+1 -1
View File
@@ -81,7 +81,7 @@ Payload uses the `req` object to pass the transaction ID through to the database
Example:
```ts
import payload from 'payload'
import payload from @hanzo/cms'from
import config from './payload.config'
const standalonePayloadScript = async () => {
docs/ecommerce/frontend.mdx
+14 -14
View File
@@ -40,10 +40,10 @@ The `EcommerceProvider` component is used to wrap your application and provide t
Example usage:
```tsx
import { EcommerceProvider } from '@payloadcms/plugin-ecommerce/client/react'
import { EcommerceProvider } from '@hanzo/cms-plugin-ecommerce/client/react'
// Import any payment adapters you want to use on the client side
import { stripeAdapterClient } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { USD, EUR } from '@payloadcms/plugin-ecommerce'
import { stripeAdapterClient } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
import { USD, EUR } from '@hanzo/cms-plugin-ecommerce'
export const Providers = () => (
<EcommerceProvider
@@ -119,7 +119,7 @@ The `useCart` hook is used to manage the cart state and actions. It provides met
Example usage:
```tsx
import { useCart } from '@payloadcms/plugin-ecommerce/client/react'
import { useCart } from '@hanzo/cms-plugin-ecommerce/client/react'
const CartComponent = () => {
const {
@@ -151,7 +151,7 @@ The `useAddresses` hook is used to fetch and manage addresses. It provides metho
Example usage:
```tsx
import { useAddresses } from '@payloadcms/plugin-ecommerce/client/react'
import { useAddresses } from '@hanzo/cms-plugin-ecommerce/client/react'
const AddressesComponent = () => {
const { addresses, createAddress, isLoading, updateAddress } = useAddresses()
@@ -176,7 +176,7 @@ The `usePayments` hook is used to manage the checkout process. It provides metho
Example usage:
```tsx
import { usePayments } from '@payloadcms/plugin-ecommerce/client/react'
import { usePayments } from '@hanzo/cms-plugin-ecommerce/client/react'
const CheckoutComponent = () => {
const {
@@ -259,7 +259,7 @@ The `useCurrency` hook is used to format prices based on the selected currency.
`formatPrice` in particular is very helpful as all prices are stored as integers to avoid any potential issues with decimal calculations, therefore on the frontend you can use this utility to format your price accounting for the currency and decimals. Example usage:
```tsx
import { useCurrency } from '@payloadcms/plugin-ecommerce/client/react'
import { useCurrency } from '@hanzo/cms-plugin-ecommerce/client/react'
const PriceComponent = ({ amount }) => {
const { currenciesConfig, currency, setCurrency } = useCurrency()
@@ -282,7 +282,7 @@ The `useEcommerceConfig` hook provides access to the ecommerce configuration. Th
Example usage:
```tsx
import { useEcommerceConfig } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerceConfig } from '@hanzo/cms-plugin-ecommerce/client/react'
const CustomComponent = () => {
const { cartsSlug, customersSlug, api } = useEcommerceConfig()
@@ -301,7 +301,7 @@ The `useEcommerce` hook encompasses all of the above hooks in one. It provides a
Example usage:
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const EcommerceComponent = () => {
const {
@@ -333,7 +333,7 @@ Called after a successful login to properly set up cart state. This hook handles
- Clearing guest cart secrets (authenticated users don't need them)
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const LoginForm = () => {
const { onLogin } = useEcommerce()
@@ -360,7 +360,7 @@ const LoginForm = () => {
Called during logout to clear all ecommerce session data. Currently this is just an alias for `clearSession()` but named for semantic clarity when used in logout flows and it could change in the future.
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const LogoutButton = () => {
const { onLogout } = useEcommerce()
@@ -389,7 +389,7 @@ Clears all ecommerce session data from state and localStorage. This includes:
Use this when you need to reset the ecommerce state, such as during logout or when switching users.
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const ResetButton = () => {
const { clearSession } = useEcommerce()
@@ -415,7 +415,7 @@ When items are merged:
- The source cart is deleted after successful merge
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const MergeCartsButton = () => {
const { mergeCart, isLoading } = useEcommerce()
@@ -446,7 +446,7 @@ const MergeCartsButton = () => {
Fetches the latest cart data from the server and updates the local state. Use this when you need to ensure the cart is in sync with the server, such as after external cart modifications.
```tsx
import { useEcommerce } from '@payloadcms/plugin-ecommerce/client/react'
import { useEcommerce } from '@hanzo/cms-plugin-ecommerce/client/react'
const RefreshCartButton = () => {
const { refreshCart, isLoading } = useEcommerce()
docs/ecommerce/overview.mdx
+5 -5
View File
@@ -6,7 +6,7 @@ desc: Add ecommerce functionality to your Payload CMS application with this plug
keywords: plugins, ecommerce, stripe, plugin, payload, cms, shop, payments
---
![https://www.npmjs.com/package/@payloadcms/plugin-ecommerce](https://img.shields.io/npm/v/@payloadcms/plugin-ecommerce)
![https://www.npmjs.com/package/@hanzo/cms-plugin-ecommerce](https://img.shields.io/npm/v/@hanzo/cms-plugin-ecommerce)
<Banner type="warning">
This plugin is currently in Beta and may have breaking changes in future
@@ -49,7 +49,7 @@ _Currently_ the plugin does not handle shipping, taxes or subscriptions natively
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
```bash
pnpm add @payloadcms/plugin-ecommerce
pnpm add @hanzo/cms-plugin-ecommerce
```
## Basic Usage
@@ -57,8 +57,8 @@ Install the plugin using any JavaScript package manager like [pnpm](https://pnpm
In the `plugins` array of your [Payload Config](https://payloadcms.com/docs/configuration/overview), call the plugin with:
```ts
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { buildConfig } from @hanzo/cms'from
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
const config = buildConfig({
collections: [
@@ -136,7 +136,7 @@ The plugin will inherit the types from your generated Payload types where possib
All types can be directly imported:
```ts
import { EcommercePluginConfig } from '@payloadcms/plugin-ecommerce/types'
import { EcommercePluginConfig } from '@hanzo/cms-plugin-ecommerce/types'
```
## Template
docs/ecommerce/payments.mdx
+10 -10
View File
@@ -34,9 +34,9 @@ We recommend at least `18.5.0` to ensure compatibility with the plugin.
Then, in your `plugins` array of your [Payload Config](https://payloadcms.com/docs/configuration/overview), call the plugin with:
```ts
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { stripeAdapter } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
import { stripeAdapter } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// Payload config...
@@ -84,9 +84,9 @@ You can also add your own webhooks to handle [events from Stripe](https://docs.s
You can add a webhook like so:
```ts
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { stripeAdapter } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
import { stripeAdapter } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// Payload config...
@@ -163,8 +163,8 @@ stripe trigger payment_intent.succeeded
The most straightforward way to use Stripe on the frontend is with the `EcommerceProvider` component and the `stripeAdapterClient` function. Wrap your application in the provider and pass in the Stripe adapter with your publishable key:
```ts
import { EcommerceProvider } from '@payloadcms/plugin-ecommerce/client/react'
import { stripeAdapterClient } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { EcommerceProvider } from '@hanzo/cms-plugin-ecommerce/client/react'
import { stripeAdapterClient } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
<EcommerceProvider
paymentMethods={[
@@ -234,7 +234,7 @@ A heavily simplified example of implementing `initiatePayment` could look like:
import {
PaymentAdapter,
PaymentAdapterArgs,
} from '@payloadcms/plugin-ecommerce'
} from '@hanzo/cms-plugin-ecommerce'
import Stripe from 'stripe'
export const initiatePayment: NonNullable<PaymentAdapter>['initiatePayment'] =
@@ -328,7 +328,7 @@ A heavily simplified example of implementing `confirmOrder` could look like:
import {
PaymentAdapter,
PaymentAdapterArgs,
} from '@payloadcms/plugin-ecommerce'
} from '@hanzo/cms-plugin-ecommerce'
import Stripe from 'stripe'
export const confirmOrder: NonNullable<PaymentAdapter>['confirmOrder'] =
docs/ecommerce/plugin.mdx
+21 -21
View File
@@ -11,8 +11,8 @@ keywords: plugins, ecommerce, stripe, plugin, payload, cms, shop, payments
In the `plugins` array of your [Payload Config](https://payloadcms.com/docs/configuration/overview), call the plugin with:
```ts
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { buildConfig } from @hanzo/cms'from
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
const config = buildConfig({
collections: [
@@ -239,7 +239,7 @@ The `supportedCountries` option is an array of country codes in [ISO 3166-1 alph
You can import the default list of countries from the plugin:
```ts
import { defaultCountries } from '@payloadcms/plugin-ecommerce/client/react'
import { defaultCountries } from '@hanzo/cms-plugin-ecommerce/client/react'
```
## Carts
@@ -388,9 +388,9 @@ This example shows how to allow the same product to appear as separate cart item
First, add a `fulfillment` field to cart items using `cartsCollectionOverride`:
```ts
import type { CollectionConfig } from 'payload'
import type { CartItemMatcher } from '@payloadcms/plugin-ecommerce'
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import type { CollectionConfig } from @hanzo/cms'from
import type { CartItemMatcher } from '@hanzo/cms-plugin-ecommerce'
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
/**
* Custom cart item matcher that includes fulfillment option.
@@ -481,7 +481,7 @@ import {
defaultCartItemMatcher,
type CartItemMatcher,
type CartItemMatcherArgs,
} from '@payloadcms/plugin-ecommerce'
} from '@hanzo/cms-plugin-ecommerce'
const customMatcher: CartItemMatcher = (args) => {
// First check the default criteria (product + variant)
@@ -502,7 +502,7 @@ import {
removeItem,
updateItem,
clearCart,
} from '@payloadcms/plugin-ecommerce'
} from '@hanzo/cms-plugin-ecommerce'
// Add item to cart
const result = await addItem({
@@ -571,8 +571,8 @@ type Currency = {
For example, to support JYP in addition to USD:
```ts
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { USD } from '@payloadcms/plugin-ecommerce'
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
import { USD } from '@hanzo/cms-plugin-ecommerce'
ecommercePlugin({
currencies: {
@@ -601,7 +601,7 @@ We currently support the following currencies out of the box:
You can import these from the plugin:
```ts
import { EUR } from '@payloadcms/plugin-ecommerce'
import { EUR } from '@hanzo/cms-plugin-ecommerce'
```
<Banner type="info">
@@ -702,7 +702,7 @@ pnpm add stripe
| `appInfo` | `object` | The application info to pass to Stripe. See [docs](https://stripe.com/docs/api/app_info). |
```ts
import { stripeAdapter } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { stripeAdapter } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
stripeAdapter({
secretKey: process.env.STRIPE_SECRET_KEY!,
@@ -730,7 +730,7 @@ stripeAdapter({
On the client side, you can use the `publishableKey` to initialize Stripe and handle payments. The client side version of the adapter only requires the `label` and `publishableKey` arguments. Never expose the `secretKey` or `webhookSecret` keys on the client side.
```ts
import { stripeAdapterClient } from '@payloadcms/plugin-ecommerce/payments/stripe'
import { stripeAdapterClient } from '@hanzo/cms-plugin-ecommerce/payments/stripe'
<EcommerceProvider
paymentMethods={[
@@ -940,10 +940,10 @@ The plugin includes translations for admin UI labels and messages under the `plu
Import the plugin translations and add them to your Payload config:
```ts
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { en } from '@payloadcms/translations/languages/en'
import { enTranslations as ecommerceEn } from '@payloadcms/plugin-ecommerce/translations/languages/en'
import { buildConfig } from @hanzo/cms'from
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
import { en } from '@hanzo/cms-translations/languages/en'
import { enTranslations as ecommerceEn } from '@hanzo/cms-plugin-ecommerce/translations/languages/en'
export default buildConfig({
// ...
@@ -966,10 +966,10 @@ export default buildConfig({
You can override specific translation strings by providing your own values under the `plugin-ecommerce` namespace:
```ts
import { buildConfig } from 'payload'
import { ecommercePlugin } from '@payloadcms/plugin-ecommerce'
import { en } from '@payloadcms/translations/languages/en'
import { enTranslations as ecommerceEn } from '@payloadcms/plugin-ecommerce/translations/languages/en'
import { buildConfig } from @hanzo/cms'from
import { ecommercePlugin } from '@hanzo/cms-plugin-ecommerce'
import { en } from '@hanzo/cms-translations/languages/en'
import { enTranslations as ecommerceEn } from '@hanzo/cms-plugin-ecommerce/translations/languages/en'
export default buildConfig({
// ...
docs/email/overview.mdx
+14 -14
View File
@@ -8,7 +8,7 @@ keywords: email, overview, config, configuration, documentation, Content Managem
## Introduction
Payload has a few email adapters that can be imported to enable email functionality. The [@payloadcms/email-nodemailer](https://www.npmjs.com/package/@payloadcms/email-nodemailer) package will be the package most will want to install. This package provides an easy way to use [Nodemailer](https://nodemailer.com) for email and won't get in your way for those already familiar.
Payload has a few email adapters that can be imported to enable email functionality. The [@hanzo/cms-email-nodemailer](https://www.npmjs.com/package/@hanzo/cms-email-nodemailer) package will be the package most will want to install. This package provides an easy way to use [Nodemailer](https://nodemailer.com) for email and won't get in your way for those already familiar.
The email adapter should be passed into the `email` property of the Payload Config. This will allow Payload to send [auth-related emails](../authentication/email) for things like password resets, new user verification, and any other email sending needs you may have.
@@ -31,8 +31,8 @@ An email adapter will require at least the following fields:
| Name | Package | Description |
| ---------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Nodemailer | [@payloadcms/email-nodemailer](https://www.npmjs.com/package/@payloadcms/email-nodemailer) | Use any [Nodemailer transport](https://nodemailer.com/transports), including SMTP, Resend, SendGrid, and more. This was provided by default in Payload 2.x. This is the easiest migration path. |
| Resend | [@payloadcms/email-resend](https://www.npmjs.com/package/@payloadcms/email-resend) | Resend email via their REST API. This is preferred for serverless platforms such as Vercel because it is much more lightweight than the nodemailer adapter. |
| Nodemailer | [@hanzo/cms-email-nodemailer](https://www.npmjs.com/package/@hanzo/cms-email-nodemailer) | Use any [Nodemailer transport](https://nodemailer.com/transports), including SMTP, Resend, SendGrid, and more. This was provided by default in Payload 2.x. This is the easiest migration path. |
| Resend | [@hanzo/cms-email-resend](https://www.npmjs.com/package/@hanzo/cms-email-resend) | Resend email via their REST API. This is preferred for serverless platforms such as Vercel because it is much more lightweight than the nodemailer adapter. |
## Nodemailer Configuration
@@ -48,8 +48,8 @@ Simple Mail Transfer Protocol (SMTP) options can be passed in using the `transpo
**Example email options using SMTP:**
```ts
import { buildConfig } from 'payload'
import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
import { buildConfig } from @hanzo/cms'from
import { nodemailerAdapter } from '@hanzo/cms-email-nodemailer'
export default buildConfig({
email: nodemailerAdapter({
@@ -71,8 +71,8 @@ export default buildConfig({
**Example email options using nodemailer.createTransport:**
```ts
import { buildConfig } from 'payload'
import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
import { buildConfig } from @hanzo/cms'from
import { nodemailerAdapter } from '@hanzo/cms-email-nodemailer'
import nodemailer from 'nodemailer'
export default buildConfig({
@@ -97,8 +97,8 @@ export default buildConfig({
You also have the ability to bring your own nodemailer transport. This is an example of using the SendGrid nodemailer transport.
```ts
import { buildConfig } from 'payload'
import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
import { buildConfig } from @hanzo/cms'from
import { nodemailerAdapter } from '@hanzo/cms-email-nodemailer'
import nodemailerSendgrid from 'nodemailer-sendgrid'
export default buildConfig({
@@ -117,7 +117,7 @@ During development, if you pass nothing to `nodemailerAdapter`, it will use the
This will log the ethereal.email details to console on startup.
```ts
import { nodemailerAdapter } from '@payloadcms/email-nodemailer'
import { nodemailerAdapter } from '@hanzo/cms-email-nodemailer'
export default buildConfig({
email: nodemailerAdapter(),
@@ -133,8 +133,8 @@ The Resend adapter requires an API key to be passed in the options. This can be
| apiKey | The API key for the Resend service. |
```ts
import { buildConfig } from 'payload'
import { resendAdapter } from '@payloadcms/email-resend'
import { buildConfig } from @hanzo/cms'from
import { resendAdapter } from '@hanzo/cms-email-resend'
export default buildConfig({
email: resendAdapter({
@@ -162,7 +162,7 @@ const email = await payload.sendEmail({
**Nodemailer adapter (SMTP/SendGrid/etc.)**
Works with `@payloadcms/email-nodemailer` and any Nodemailer transport.
Works with `@hanzo/cms-email-nodemailer` and any Nodemailer transport.
```ts
await payload.sendEmail({
@@ -190,7 +190,7 @@ Anything supported by Nodemailer’s attachments—streams, Buffers, URLs, conte
### Resend adapter
Works with @payloadcms/email-resend.
Works with @hanzo/cms-email-resend.
For attachments from remote URLs
docs/examples/overview.mdx
+2 -2
View File
@@ -18,10 +18,10 @@ Payload provides a vast array of examples to help you get started with your proj
- [Tailwind / Shadcn-ui](https://github.com/payloadcms/payload/tree/3.x/examples/tailwind-shadcn-ui)
- [White-label Admin UI](https://github.com/payloadcms/payload/tree/3.x/examples/whitelabel)
If you'd like to run the examples, you can use `create-payload-app` to create a project from one:
If you'd like to run the examples, you can use `@hanzo/create-cms-app` to create a project from one:
```sh
npx create-payload-app --example example_name
npx @hanzo/create-cms-app --example example_name
```
We are adding new examples every day, so if your particular use case is not demonstrated in any existing example, please feel free to start a new [Discussion](https://github.com/payloadcms/payload/discussions) or open a new [PR](https://github.com/payloadcms/payload/pulls) to add it yourself.
docs/fields/array.mdx
+12 -12
View File
@@ -24,7 +24,7 @@ Arrays are useful for many different types of content from simple to complex, su
To create an Array Field, set the `type` to `array` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyArrayField: Field = {
// ...
@@ -79,7 +79,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Array Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyArrayField: Field = {
// ...
@@ -103,7 +103,7 @@ The Array Field inherits all of the default admin options from the base [Field A
In this example, we have an Array Field called `slider` that contains a set of fields for a simple image slider. Each row in the array has a `title`, `image`, and `caption`. We also customize the row label to display the title if it exists, or a default label if it doesn't.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -149,8 +149,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { ArrayField } from '@payloadcms/ui'
import type { ArrayFieldServerComponent } from 'payload'
import { ArrayField } from '@hanzo/cms-ui'
import type { ArrayFieldServerComponent } from @hanzo/cms'from
export const CustomArrayFieldServer: ArrayFieldServerComponent = ({
clientField,
@@ -174,8 +174,8 @@ export const CustomArrayFieldServer: ArrayFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { ArrayField } from '@payloadcms/ui'
import type { ArrayFieldClientComponent } from 'payload'
import { ArrayField } from '@hanzo/cms-ui'
import type { ArrayFieldClientComponent } from @hanzo/cms'from
export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
return <ArrayField {...props} />
@@ -188,8 +188,8 @@ export const CustomArrayFieldClient: ArrayFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { ArrayFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { ArrayFieldLabelServerComponent } from @hanzo/cms'from
export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({
clientField,
@@ -209,9 +209,9 @@ export const CustomArrayFieldLabelServer: ArrayFieldLabelServerComponent = ({
```tsx
'use client'
import type { ArrayFieldLabelClientComponent } from 'payload'
import type { ArrayFieldLabelClientComponent } from @hanzo/cms'from
import { FieldLabel } from '@payloadcms/ui'
import { FieldLabel } from '@hanzo/cms-ui'
import React from 'react'
export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({
@@ -233,7 +233,7 @@ export const CustomArrayFieldLabelClient: ArrayFieldLabelClientComponent = ({
```tsx
'use client'
import { useRowLabel } from '@payloadcms/ui'
import { useRowLabel } from '@hanzo/cms-ui'
export const ArrayRowLabel = () => {
const { data, rowNumber } = useRowLabel<{ title?: string }>()
docs/fields/blocks.mdx
+15 -15
View File
@@ -23,7 +23,7 @@ This makes Blocks perfect for building dynamic, editor-friendly experiences, suc
To add a Blocks Field, set the `type` to `blocks` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyBlocksField: Field = {
// ...
@@ -80,7 +80,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Blocks Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyBlocksField: Field = {
// ...
@@ -140,7 +140,7 @@ import {
// The default "collapsible" UI that is rendered for a regular block
// if you want to re-use it
BlockCollapsible,
} from '@payloadcms/richtext-lexical/client'
} from '@hanzo/cms-richtext-lexical/client'
```
## Copying and Pasting Blocks
@@ -347,8 +347,8 @@ If you provide `admin.components.Label`, that component replaces both the name a
```tsx
import type React from 'react'
import { BlocksField } from '@payloadcms/ui'
import type { BlocksFieldServerComponent } from 'payload'
import { BlocksField } from '@hanzo/cms-ui'
import type { BlocksFieldServerComponent } from @hanzo/cms'from
export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({
clientField,
@@ -372,8 +372,8 @@ export const CustomBlocksFieldServer: BlocksFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { BlocksField } from '@payloadcms/ui'
import type { BlocksFieldClientComponent } from 'payload'
import { BlocksField } from '@hanzo/cms-ui'
import type { BlocksFieldClientComponent } from @hanzo/cms'from
export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
return <BlocksField {...props} />
@@ -386,8 +386,8 @@ export const CustomBlocksFieldClient: BlocksFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { BlocksFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { BlocksFieldLabelServerComponent } from @hanzo/cms'from
export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({
clientField,
@@ -408,8 +408,8 @@ export const CustomBlocksFieldLabelServer: BlocksFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { BlocksFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { BlocksFieldLabelClientComponent } from @hanzo/cms'from
export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({
label,
@@ -431,7 +431,7 @@ export const CustomBlocksFieldLabelClient: BlocksFieldLabelClientComponent = ({
`collections/ExampleCollection.js`
```ts
import { Block, CollectionConfig } from 'payload'
import { Block, CollectionConfig } from @hanzo/cms'from
const QuoteBlock: Block = {
slug: 'Quote', // required
@@ -476,8 +476,8 @@ If you have multiple blocks used in multiple places, your Payload Config can gro
To do this, define the block in the `blocks` array of the Payload Config. Then, in the Blocks Field, pass the block slug to the `blockReferences` array - leaving the `blocks` array empty for compatibility reasons.
```ts
import { buildConfig } from 'payload'
import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical'
import { buildConfig } from @hanzo/cms'from
import { lexicalEditor, BlocksFeature } from '@hanzo/cms-richtext-lexical'
// Payload Config
const config = buildConfig({
@@ -540,7 +540,7 @@ const config = buildConfig({
As you build your own Block configs, you might want to store them in separate files but retain typing accordingly. To do so, you can import and use Payload's `Block` type:
```ts
import type { Block } from 'payload'
import type { Block } from @hanzo/cms'from
```
## Conditional Blocks
docs/fields/checkbox.mdx
+10 -10
View File
@@ -18,7 +18,7 @@ The Checkbox Field saves a boolean in the database.
To add a Checkbox Field, set the `type` to `checkbox` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyCheckboxField: Field = {
// ...
@@ -53,7 +53,7 @@ _\* An asterisk denotes that a property is required._
Here is an example of a Checkbox Field in a Collection:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -76,8 +76,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldServerComponent } from 'payload'
import { CheckboxField } from '@hanzo/cms-ui'
import type { CheckboxFieldServerComponent } from @hanzo/cms'from
export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
clientField,
@@ -101,8 +101,8 @@ export const CustomCheckboxFieldServer: CheckboxFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { CheckboxField } from '@payloadcms/ui'
import type { CheckboxFieldClientComponent } from 'payload'
import { CheckboxField } from '@hanzo/cms-ui'
import type { CheckboxFieldClientComponent } from @hanzo/cms'from
export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (
props,
@@ -117,8 +117,8 @@ export const CustomCheckboxFieldClient: CheckboxFieldClientComponent = (
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { CheckboxFieldLabelServerComponent } from @hanzo/cms'from
export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent =
({ clientField, path }) => {
@@ -137,8 +137,8 @@ export const CustomCheckboxFieldLabelServer: CheckboxFieldLabelServerComponent =
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CheckboxFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { CheckboxFieldLabelClientComponent } from @hanzo/cms'from
export const CustomCheckboxFieldLabelClient: CheckboxFieldLabelClientComponent =
({ label, path, required }) => {
docs/fields/code.mdx
+11 -11
View File
@@ -19,7 +19,7 @@ The Code Field saves a string in the database, but provides the [Admin Panel](..
To add a Code Field, set the `type` to `code` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyBlocksField: Field = {
// ...
@@ -57,7 +57,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Code Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyCodeField: Field = {
// ...
@@ -80,7 +80,7 @@ The Code Field inherits all of the default admin options from the base [Field Ad
`collections/ExampleCollection.ts
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -105,8 +105,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldServerComponent } from 'payload'
import { CodeField } from '@hanzo/cms-ui'
import type { CodeFieldServerComponent } from @hanzo/cms'from
export const CustomCodeFieldServer: CodeFieldServerComponent = ({
clientField,
@@ -130,8 +130,8 @@ export const CustomCodeFieldServer: CodeFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { CodeField } from '@payloadcms/ui'
import type { CodeFieldClientComponent } from 'payload'
import { CodeField } from '@hanzo/cms-ui'
import type { CodeFieldClientComponent } from @hanzo/cms'from
export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => {
return <CodeField {...props} />
@@ -144,8 +144,8 @@ export const CustomCodeFieldClient: CodeFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { CodeFieldLabelServerComponent } from @hanzo/cms'from
export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({
clientField,
@@ -166,8 +166,8 @@ export const CustomCodeFieldLabelServer: CodeFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { CodeFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { CodeFieldLabelClientComponent } from @hanzo/cms'from
export const CustomCodeFieldLabelClient: CodeFieldLabelClientComponent = ({
field,
docs/fields/collapsible.mdx
+3 -3
View File
@@ -18,7 +18,7 @@ The Collapsible Field is presentational-only and only affects the Admin Panel. B
To add a Collapsible Field, set the `type` to `collapsible` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyCollapsibleField: Field = {
// ...
@@ -47,7 +47,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Collapsible Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyCollapsibleField: Field = {
// ...
@@ -67,7 +67,7 @@ The Collapsible Field inherits all of the default admin options from the base [F
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/fields/date.mdx
+11 -11
View File
@@ -18,7 +18,7 @@ The Date Field saves a Date in the database and provides the [Admin Panel](../ad
To add a Date Field, set the `type` to `date` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyDateField: Field = {
// ...
@@ -54,7 +54,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Date Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyDateField: Field = {
// ...
@@ -97,7 +97,7 @@ When only `pickerAppearance` is set, an equivalent format will be rendered in th
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -144,8 +144,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { DateTimeField } from '@payloadcms/ui'
import type { DateFieldServerComponent } from 'payload'
import { DateTimeField } from '@hanzo/cms-ui'
import type { DateFieldServerComponent } from @hanzo/cms'from
export const CustomDateFieldServer: DateFieldServerComponent = ({
clientField,
@@ -169,8 +169,8 @@ export const CustomDateFieldServer: DateFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { DateTimeField } from '@payloadcms/ui'
import type { DateFieldClientComponent } from 'payload'
import { DateTimeField } from '@hanzo/cms-ui'
import type { DateFieldClientComponent } from @hanzo/cms'from
export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
return <DateTimeField {...props} />
@@ -183,8 +183,8 @@ export const CustomDateFieldClient: DateFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { DateFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { DateFieldLabelServerComponent } from @hanzo/cms'from
export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({
clientField,
@@ -205,8 +205,8 @@ export const CustomDateFieldLabelServer: DateFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { DateFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { DateFieldLabelClientComponent } from @hanzo/cms'from
export const CustomDateFieldLabelClient: DateFieldLabelClientComponent = ({
field,
docs/fields/email.mdx
+11 -11
View File
@@ -18,7 +18,7 @@ The Email Field enforces that the value provided is a valid email address.
To create an Email Field, set the `type` to `email` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyEmailField: Field = {
// ...
@@ -54,7 +54,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Email Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyEmailField: Field = {
// ...
@@ -75,7 +75,7 @@ The Email Field inherits all of the default admin options from the base [Field A
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -98,8 +98,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { EmailField } from '@payloadcms/ui'
import type { EmailFieldServerComponent } from 'payload'
import { EmailField } from '@hanzo/cms-ui'
import type { EmailFieldServerComponent } from @hanzo/cms'from
export const CustomEmailFieldServer: EmailFieldServerComponent = ({
clientField,
@@ -123,8 +123,8 @@ export const CustomEmailFieldServer: EmailFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { EmailField } from '@payloadcms/ui'
import type { EmailFieldClientComponent } from 'payload'
import { EmailField } from '@hanzo/cms-ui'
import type { EmailFieldClientComponent } from @hanzo/cms'from
export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
return <EmailField {...props} />
@@ -137,8 +137,8 @@ export const CustomEmailFieldClient: EmailFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { EmailFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { EmailFieldLabelServerComponent } from @hanzo/cms'from
export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({
clientField,
@@ -159,8 +159,8 @@ export const CustomEmailFieldLabelServer: EmailFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { EmailFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { EmailFieldLabelClientComponent } from @hanzo/cms'from
export const CustomEmailFieldLabelClient: EmailFieldLabelClientComponent = ({
field,
docs/fields/group.mdx
+5 -5
View File
@@ -18,7 +18,7 @@ The Group Field allows [Fields](./overview) to be nested under a common property
To add a Group Field, set the `type` to `group` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyGroupField: Field = {
// ...
@@ -58,7 +58,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Group Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyGroupField: Field = {
// ...
@@ -78,7 +78,7 @@ The Group Field inherits all of the default admin options from the base [Field A
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -114,7 +114,7 @@ export const ExampleCollection: CollectionConfig = {
You can also use the Group field to only visually group fields without affecting the data structure. Not defining a `name` will render just the grouped fields (no nested object is created). If you want the group to appear as a titled section in the Admin UI, set a `label`.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -146,7 +146,7 @@ export const ExampleCollection: CollectionConfig = {
## Named group
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/fields/join.mdx
+1 -1
View File
@@ -32,7 +32,7 @@ collection you are joining. This will reference the collection and path of the f
To add a Relationship Field, set the `type` to `join` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyJoinField: Field = {
// highlight-start
docs/fields/json.mdx
+13 -13
View File
@@ -19,7 +19,7 @@ The JSON Field saves raw JSON to the database and provides the [Admin Panel](../
To add a JSON Field, set the `type` to `json` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyJSONField: Field = {
// ...
@@ -56,7 +56,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the JSON Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyJSONField: Field = {
// ...
@@ -76,7 +76,7 @@ The JSON Field inherits all of the default admin options from the base [Field Ad
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -101,7 +101,7 @@ If you only provide a URL to a schema, Payload will fetch the desired schema if
`collections/ExampleCollection.ts`
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -133,7 +133,7 @@ export const ExampleCollection: CollectionConfig = {
`collections/ExampleCollection.ts`
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -161,8 +161,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { JSONField } from '@payloadcms/ui'
import type { JSONFieldServerComponent } from 'payload'
import { JSONField } from '@hanzo/cms-ui'
import type { JSONFieldServerComponent } from @hanzo/cms'from
export const CustomJSONFieldServer: JSONFieldServerComponent = ({
clientField,
@@ -186,8 +186,8 @@ export const CustomJSONFieldServer: JSONFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { JSONField } from '@payloadcms/ui'
import type { JSONFieldClientComponent } from 'payload'
import { JSONField } from '@hanzo/cms-ui'
import type { JSONFieldClientComponent } from @hanzo/cms'from
export const CustomJSONFieldClient: JSONFieldClientComponent = (props) => {
return <JSONField {...props} />
@@ -200,8 +200,8 @@ export const CustomJSONFieldClient: JSONFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { JSONFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { JSONFieldLabelServerComponent } from @hanzo/cms'from
export const CustomJSONFieldLabelServer: JSONFieldLabelServerComponent = ({
clientField,
@@ -222,8 +222,8 @@ export const CustomJSONFieldLabelServer: JSONFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { JSONFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { JSONFieldLabelClientComponent } from @hanzo/cms'from
export const CustomJSONFieldLabelClient: JSONFieldLabelClientComponent = ({
field,
docs/fields/number.mdx
+11 -11
View File
@@ -18,7 +18,7 @@ The Number Field stores and validates numeric entry and supports additional nume
To add a Number Field, set the `type` to `number` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyNumberField: Field = {
// ...
@@ -59,7 +59,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Number Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyNumberField: Field = {
// ...
@@ -81,7 +81,7 @@ The Number Field inherits all of the default admin options from the base [Field
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -106,8 +106,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { NumberField } from '@payloadcms/ui'
import type { NumberFieldServerComponent } from 'payload'
import { NumberField } from '@hanzo/cms-ui'
import type { NumberFieldServerComponent } from @hanzo/cms'from
export const CustomNumberFieldServer: NumberFieldServerComponent = ({
clientField,
@@ -131,8 +131,8 @@ export const CustomNumberFieldServer: NumberFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { NumberField } from '@payloadcms/ui'
import type { NumberFieldClientComponent } from 'payload'
import { NumberField } from '@hanzo/cms-ui'
import type { NumberFieldClientComponent } from @hanzo/cms'from
export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
return <NumberField {...props} />
@@ -145,8 +145,8 @@ export const CustomNumberFieldClient: NumberFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { NumberFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { NumberFieldLabelServerComponent } from @hanzo/cms'from
export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({
clientField,
@@ -167,8 +167,8 @@ export const CustomNumberFieldLabelServer: NumberFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { NumberFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { NumberFieldLabelClientComponent } from @hanzo/cms'from
export const CustomNumberFieldLabelClient: NumberFieldLabelClientComponent = ({
field,
docs/fields/overview.mdx
+36 -36
View File
@@ -15,7 +15,7 @@ Fields can be endlessly customized in their appearance and behavior without affe
To configure fields, use the `fields` property in your [Collection](../configuration/collections) or [Global](../configuration/globals) config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Page: CollectionConfig = {
// ...
@@ -33,7 +33,7 @@ Payload provides a wide variety of built-in Field Types, each with its own uniqu
To configure fields, use the `fields` property in your [Collection](../configuration/collections) or [Global](../configuration/globals) config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Page: CollectionConfig = {
slug: 'pages',
@@ -264,7 +264,7 @@ All fields require at least the `type` property. This matches the field to its c
To set a field's type, use the `type` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text', // highlight-line
@@ -284,7 +284,7 @@ All [Data Fields](#data-fields) require a `name` property. This is the key that
To set a field's name, use the `name` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -320,7 +320,7 @@ In addition to being able to define [Hooks](../hooks/overview) on a document-lev
To define Field-level Hooks, use the `hooks` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -342,7 +342,7 @@ In addition to being able to define [Access Control](../access-control/overview)
To define Field-level Access Control, use the `access` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -364,7 +364,7 @@ Fields can be optionally prefilled with initial values. This is used in both the
To set a field's default value, use the `defaultValue` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -384,7 +384,7 @@ Functions can be written to make use of the following argument properties:
Here is an example of a `defaultValue` function:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const translation: {
en: 'Written by'
@@ -413,7 +413,7 @@ Fields are automatically validated based on their [Field Type](#field-types) and
To set a custom field validation function, use the `validate` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -436,7 +436,7 @@ The following arguments are provided to the `validate` function:
The `ctx` argument contains full document data, sibling field data, the current operation, and other useful information such as currently authenticated user:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -465,7 +465,7 @@ The following additional properties are provided in the `ctx` object:
You can return localized error messages by utilizing the translation function provided in the `req` object:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyField: Field = {
type: 'text',
@@ -484,7 +484,7 @@ When using custom validation functions, Payload will use yours in place of the d
To reuse default field validations, call them from within your custom validation function:
```ts
import { text } from 'payload/shared'
import { text } from @hanzo/cms'from
const field: Field = {
name: 'notBad',
@@ -517,7 +517,7 @@ import {
text,
textarea,
upload,
} from 'payload/shared'
} from @hanzo/cms'from
```
#### Validation Performance
@@ -529,7 +529,7 @@ If you need to perform expensive validations, such as querying the database, con
To write asynchronous validation functions, use the `async` keyword to define your function:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const Orders: CollectionConfig = {
slug: 'orders',
@@ -570,7 +570,7 @@ All [Collections](../configuration/collections) automatically generate their own
To define a custom ID field, add a top-level field with the `name` property set to `id`:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollection: CollectionConfig = {
// ...
@@ -595,7 +595,7 @@ export const MyCollection: CollectionConfig = {
You can customize the appearance and behavior of fields within the [Admin Panel](../admin/overview) through the `admin` property of any Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionConfig: CollectionConfig = {
// ...
@@ -645,7 +645,7 @@ A description can be configured in three ways:
To add a Custom Description to a field, use the `admin.description` property in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -675,7 +675,7 @@ Custom Descriptions can also be defined as a function. Description Functions are
To add a Description Function to a field, set the `admin.description` property to a _function_ in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -765,7 +765,7 @@ Within the [Admin Panel](../admin/overview), fields are represented in three dis
To swap in Field Components with your own, use the `admin.components` property in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionConfig: CollectionConfig = {
// ...
@@ -805,7 +805,7 @@ The Field Component is the actual form field rendered in the Edit View. This is
To swap in your own Field Component, use the `admin.components.Field` property in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionConfig: CollectionConfig = {
// ...
@@ -866,11 +866,11 @@ In addition to the above props, all Server Components will also receive the foll
When swapping out the `Field` component, you are responsible for sending and receiving the field's `value` from the form itself.
To do so, import the [`useField`](../admin/react-hooks#usefield) hook from `@payloadcms/ui` and use it to manage the field's value:
To do so, import the [`useField`](../admin/react-hooks#usefield) hook from `@hanzo/cms-ui` and use it to manage the field's value:
```tsx
'use client'
import { useField } from '@payloadcms/ui'
import { useField } from '@hanzo/cms-ui'
export const CustomTextField: React.FC = () => {
const { value, setValue } = useField() // highlight-line
@@ -896,7 +896,7 @@ import type {
TextFieldClientProps,
TextFieldServerProps,
// ...and so on for each Field Type
} from 'payload'
} from @hanzo/cms'from
```
See each individual Field Type for exact type imports.
@@ -908,7 +908,7 @@ The Cell Component is rendered in the table of the List View. It represents the
To swap in your own Cell Component, use the `admin.components.Cell` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const myField: Field = {
name: 'myField',
@@ -925,7 +925,7 @@ export const myField: Field = {
```ts
'use client'
import type { DefaultCellComponentProps } from 'payload'
import type { DefaultCellComponentProps } from @hanzo/cms'from
export const MyCustomCellComponent: React.FC<DefaultCellComponentProps> = ({
cellData,
@@ -993,7 +993,7 @@ All Custom Filter Components receive the following props:
To swap in your own Filter Component, use the `admin.components.Filter` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const myField: Field = {
name: 'myField',
@@ -1017,7 +1017,7 @@ The Label Component is rendered anywhere a field needs to be represented by a la
To swap in your own Label Component, use the `admin.components.Label` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const myField: Field = {
name: 'myField',
@@ -1043,7 +1043,7 @@ import type {
TextFieldLabelServerComponent,
TextFieldLabelClientComponent,
// ...and so on for each Field Type
} from 'payload'
} from @hanzo/cms'from
```
#### Description
@@ -1053,7 +1053,7 @@ Alternatively to the [Description Property](#field-descriptions), you can also u
To add a Description Component to a field, use the `admin.components.Description` property in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -1085,7 +1085,7 @@ import type {
TextFieldDescriptionServerComponent,
TextFieldDescriptionClientComponent,
// And so on for each Field Type
} from 'payload'
} from @hanzo/cms'from
```
#### Error
@@ -1095,7 +1095,7 @@ The Error Component is rendered when a field fails validation. It is typically d
To swap in your own Error Component, use the `admin.components.Error` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const myField: Field = {
name: 'myField',
@@ -1121,7 +1121,7 @@ import type {
TextFieldErrorServerComponent,
TextFieldErrorClientComponent,
// And so on for each Field Type
} from 'payload'
} from @hanzo/cms'from
```
#### Diff
@@ -1131,7 +1131,7 @@ The Diff Component is rendered in the Version Diff view. It will only be visible
To swap in your own Diff Component, use the `admin.components.Diff` property in your Field Config:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const myField: Field = {
name: 'myField',
@@ -1157,7 +1157,7 @@ import type {
TextFieldDiffServerComponent,
TextFieldDiffClientComponent,
// And so on for each Field Type
} from 'payload'
} from @hanzo/cms'from
```
#### afterInput and beforeInput
@@ -1167,7 +1167,7 @@ With these properties you can add multiple components _before_ and _after_ the i
To add components before and after the input element, use the `admin.components.beforeInput` and `admin.components.afterInput` properties in your Field Config:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const MyCollectionConfig: CollectionConfig = {
// ...
@@ -1198,5 +1198,5 @@ For details on how to build Custom Components, see [Building Custom Components](
You can import the Payload `Field` type as well as other common types from the `payload` package. [More details](../typescript/overview).
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
```
docs/fields/point.mdx
+10 -10
View File
@@ -18,7 +18,7 @@ The Point Field saves a pair of coordinates in the database and assigns an index
To add a Point Field, set the `type` to `point` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyPointField: Field = {
// ...
@@ -56,7 +56,7 @@ _\* An asterisk denotes that a property is required._
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -136,8 +136,8 @@ payload.find({
```tsx
import type React from 'react'
import { PointField } from '@payloadcms/ui'
import type { PointFieldServerComponent } from 'payload'
import { PointField } from '@hanzo/cms-ui'
import type { PointFieldServerComponent } from @hanzo/cms'from
export const CustomPointFieldServer: PointFieldServerComponent = ({
clientField,
@@ -161,8 +161,8 @@ export const CustomPointFieldServer: PointFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { PointField } from '@payloadcms/ui'
import type { PointFieldClientComponent } from 'payload'
import { PointField } from '@hanzo/cms-ui'
import type { PointFieldClientComponent } from @hanzo/cms'from
export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
return <PointField {...props} />
@@ -175,8 +175,8 @@ export const CustomPointFieldClient: PointFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { PointFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { PointFieldLabelServerComponent } from @hanzo/cms'from
export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({
clientField,
@@ -197,8 +197,8 @@ export const CustomPointFieldLabelServer: PointFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { PointFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { PointFieldLabelClientComponent } from @hanzo/cms'from
export const CustomPointFieldLabelClient: PointFieldLabelClientComponent = ({
field,
docs/fields/radio.mdx
+11 -11
View File
@@ -18,7 +18,7 @@ The Radio Field allows for the selection of one value from a predefined set of p
To add a Radio Field, set the `type` to `radio` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRadioField: Field = {
// ...
@@ -71,7 +71,7 @@ being used as a GraphQL enum.
To customize the appearance and behavior of the Radio Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRadioField: Field = {
// ...
@@ -91,7 +91,7 @@ The Radio Field inherits all of the default admin options from the base [Field A
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -127,8 +127,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { RadioGroupField } from '@payloadcms/ui'
import type { RadioFieldServerComponent } from 'payload'
import { RadioGroupField } from '@hanzo/cms-ui'
import type { RadioFieldServerComponent } from @hanzo/cms'from
export const CustomRadioFieldServer: RadioFieldServerComponent = ({
clientField,
@@ -152,8 +152,8 @@ export const CustomRadioFieldServer: RadioFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { RadioGroupField } from '@payloadcms/ui'
import type { RadioFieldClientComponent } from 'payload'
import { RadioGroupField } from '@hanzo/cms-ui'
import type { RadioFieldClientComponent } from @hanzo/cms'from
export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
return <RadioGroupField {...props} />
@@ -166,8 +166,8 @@ export const CustomRadioFieldClient: RadioFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RadioFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { RadioFieldLabelServerComponent } from @hanzo/cms'from
export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
clientField,
@@ -189,8 +189,8 @@ export const CustomRadioFieldLabelServer: RadioFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RadioFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { RadioFieldLabelClientComponent } from @hanzo/cms'from
export const CustomRadioFieldLabelClient: RadioFieldLabelClientComponent = ({
field,
docs/fields/relationship.mdx
+11 -11
View File
@@ -24,7 +24,7 @@ The Relationship field is used in a variety of ways, including:
To add a Relationship Field, set the `type` to `relationship` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRelationshipField: Field = {
// ...
@@ -75,7 +75,7 @@ _\* An asterisk denotes that a property is required._
To the appearance and behavior of the Relationship Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRelationshipField: Field = {
// ...
@@ -156,7 +156,7 @@ The `filterOptions` property can either be a `Where` query, or a function return
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -385,8 +385,8 @@ non-polymorphic relationship.
```tsx
import type React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldServerComponent } from 'payload'
import { RelationshipField } from '@hanzo/cms-ui'
import type { RelationshipFieldServerComponent } from @hanzo/cms'from
export const CustomRelationshipFieldServer: RelationshipFieldServerComponent =
({ clientField, path, schemaPath, permissions }) => {
@@ -406,8 +406,8 @@ export const CustomRelationshipFieldServer: RelationshipFieldServerComponent =
```tsx
'use client'
import React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldClientComponent } from 'payload'
import { RelationshipField } from '@hanzo/cms-ui'
import type { RelationshipFieldClientComponent } from @hanzo/cms'from
export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (
props,
@@ -422,8 +422,8 @@ export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { RelationshipFieldLabelServerComponent } from @hanzo/cms'from
export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent =
(clientField, path) => {
@@ -442,8 +442,8 @@ export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerCom
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { RelationshipFieldLabelClientComponent } from @hanzo/cms'from
export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent =
({ field, path }) => {
docs/fields/rich-text.mdx
+1 -1
View File
@@ -44,7 +44,7 @@ Instead, you can invest your time and effort into learning the underlying open-s
To customize the appearance and behavior of the Rich Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option. The Rich Text Field inherits all the default options from the base [Field Admin Config](./overview#admin-options).
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRichTextField: Field = {
// ...
docs/fields/row.mdx
+2 -2
View File
@@ -18,7 +18,7 @@ The Row Field is presentational-only and only affects the [Admin Panel](../admin
To add a Row Field, set the `type` to `row` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyRowField: Field = {
// ...
@@ -44,7 +44,7 @@ _\* An asterisk denotes that a property is required._
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/fields/select.mdx
+12 -12
View File
@@ -18,7 +18,7 @@ The Select Field provides a dropdown-style interface for choosing options from a
To add a Select Field, set the `type` to `select` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MySelectField: Field = {
// ...
@@ -85,7 +85,7 @@ The result of `filterOptions` will determine:
To do this, use the `filterOptions` property in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MySelectField: Field = {
// ...
@@ -128,7 +128,7 @@ export const MySelectField: Field = {
To customize the appearance and behavior of the Select Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MySelectField: Field = {
// ...
@@ -150,7 +150,7 @@ The Select Field inherits all of the default admin options from the base [Field
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -189,10 +189,10 @@ export const ExampleCollection: CollectionConfig = {
#### Server Component
```tsx
import type { SelectFieldServerComponent } from 'payload'
import type { SelectFieldServerComponent } from @hanzo/cms'from
import type React from 'react'
import { SelectField } from '@payloadcms/ui'
import { SelectField } from '@hanzo/cms-ui'
export const CustomSelectFieldServer: SelectFieldServerComponent = ({
clientField,
@@ -215,9 +215,9 @@ export const CustomSelectFieldServer: SelectFieldServerComponent = ({
```tsx
'use client'
import type { SelectFieldClientComponent } from 'payload'
import type { SelectFieldClientComponent } from @hanzo/cms'from
import { SelectField } from '@payloadcms/ui'
import { SelectField } from '@hanzo/cms-ui'
import React from 'react'
export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
@@ -231,8 +231,8 @@ export const CustomSelectFieldClient: SelectFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { SelectFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { SelectFieldLabelServerComponent } from @hanzo/cms'from
export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
clientField,
@@ -253,8 +253,8 @@ export const CustomSelectFieldLabelServer: SelectFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { SelectFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { SelectFieldLabelClientComponent } from @hanzo/cms'from
export const CustomSelectFieldLabelClient: SelectFieldLabelClientComponent = ({
field,
docs/fields/tabs.mdx
+2 -2
View File
@@ -18,7 +18,7 @@ The Tabs Field is presentational-only and only affects the [Admin Panel](../admi
To add a Tabs Field, set the `type` to `tabs` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyTabsField: Field = {
// ...
@@ -96,7 +96,7 @@ When a tab's condition returns `false`, the tab and all of its fields will be hi
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/fields/text.mdx
+17 -17
View File
@@ -18,7 +18,7 @@ The Text Field is one of the most commonly used fields. It saves a string to the
To add a Text Field, set the `type` to `text` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyTextField: Field = {
// ...
@@ -59,7 +59,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Text Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyTextField: Field = {
// ...
@@ -81,7 +81,7 @@ The Text Field inherits all of the default admin options from the base [Field Ad
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -103,8 +103,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldServerComponent } from 'payload'
import { TextField } from '@hanzo/cms-ui'
import type { TextFieldServerComponent } from @hanzo/cms'from
export const CustomTextFieldServer: TextFieldServerComponent = ({
clientField,
@@ -128,8 +128,8 @@ export const CustomTextFieldServer: TextFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { TextField } from '@payloadcms/ui'
import type { TextFieldClientComponent } from 'payload'
import { TextField } from '@hanzo/cms-ui'
import type { TextFieldClientComponent } from @hanzo/cms'from
export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
return <TextField {...props} />
@@ -142,8 +142,8 @@ export const CustomTextFieldClient: TextFieldClientComponent = (props) => {
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { TextFieldLabelServerComponent } from @hanzo/cms'from
export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
clientField,
@@ -165,8 +165,8 @@ export const CustomTextFieldLabelServer: TextFieldLabelServerComponent = ({
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { TextFieldLabelClientComponent } from @hanzo/cms'from
export const CustomTextFieldLabelClient: TextFieldLabelClientComponent = ({
field,
@@ -196,8 +196,8 @@ Payload provides a built-in Slug Field so you don't have to built one from scrat
To add a Slug Field, import the `slugField` into your field schema:
```ts
import { slugField } from 'payload'
import type { CollectionConfig } from 'payload'
import { slugField } from @hanzo/cms'from
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
// ...
@@ -229,8 +229,8 @@ The slug field exposes a few top-level config options for easy customization:
If the above options aren't sufficient for your use case, you can use the `overrides` function to customize the slug field at a granular level. The `overrides` function receives the default fields that make up the slug field, and you can modify them to any extent you need.
```ts
import { slugField } from 'payload'
import type { CollectionConfig } from 'payload'
import { slugField } from @hanzo/cms'from
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
// ...
@@ -257,8 +257,8 @@ This functions receives the value of the `useAsSlug` field as `valueToSlugify` a
For example, if you wanted to use the [`slugify`](https://www.npmjs.com/package/slugify) package, you could do something like this:
```ts
import type { CollectionConfig } from 'payload'
import { slugField } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
import { slugField } from @hanzo/cms'from
import slugify from 'slugify'
export const MyCollection: CollectionConfig = {
docs/fields/textarea.mdx
+11 -11
View File
@@ -18,7 +18,7 @@ The Textarea Field is nearly identical to the [Text Field](./text) but it featur
To add a Textarea Field, set the `type` to `textarea` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyTextareaField: Field = {
// ...
@@ -56,7 +56,7 @@ _\* An asterisk denotes that a property is required._
To customize the appearance and behavior of the Textarea Field in the [Admin Panel](../admin/overview), you can use the `admin` option:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyTextareaField: Field = {
// ...
@@ -79,7 +79,7 @@ The Textarea Field inherits all of the default admin options from the base [Fiel
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -101,8 +101,8 @@ export const ExampleCollection: CollectionConfig = {
```tsx
import type React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldServerComponent } from 'payload'
import { TextareaField } from '@hanzo/cms-ui'
import type { TextareaFieldServerComponent } from @hanzo/cms'from
export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
clientField,
@@ -126,8 +126,8 @@ export const CustomTextareaFieldServer: TextareaFieldServerComponent = ({
```tsx
'use client'
import React from 'react'
import { TextareaField } from '@payloadcms/ui'
import type { TextareaFieldClientComponent } from 'payload'
import { TextareaField } from '@hanzo/cms-ui'
import type { TextareaFieldClientComponent } from @hanzo/cms'from
export const CustomTextareaFieldClient: TextareaFieldClientComponent = (
props,
@@ -142,8 +142,8 @@ export const CustomTextareaFieldClient: TextareaFieldClientComponent = (
```tsx
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelServerComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { TextareaFieldLabelServerComponent } from @hanzo/cms'from
export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent =
({ clientField, path }) => {
@@ -162,8 +162,8 @@ export const CustomTextareaFieldLabelServer: TextareaFieldLabelServerComponent =
```tsx
'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { TextareaFieldLabelClientComponent } from 'payload'
import { FieldLabel } from '@hanzo/cms-ui'
import type { TextareaFieldLabelClientComponent } from @hanzo/cms'from
export const CustomTextareaFieldLabelClient: TextareaFieldLabelClientComponent =
({ field, path }) => {
docs/fields/ui.mdx
+2 -2
View File
@@ -18,7 +18,7 @@ With the UI Field, you can:
To add a UI Field, set the `type` to `ui` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyUIField: Field = {
// ...
@@ -42,7 +42,7 @@ _\* An asterisk denotes that a property is required._
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/fields/upload.mdx
+4 -4
View File
@@ -25,7 +25,7 @@ Upload fields are useful for a variety of use cases, such as:
To create an Upload Field, set the `type` to `upload` in your [Field Config](./overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const MyUploadField: Field = {
// ...
@@ -76,7 +76,7 @@ _\* An asterisk denotes that a property is required._
## Example
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -146,7 +146,7 @@ the [Join field](./join)
Upload fields can reference multiple upload collections by providing an array of collection slugs to the `relationTo` property.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
@@ -163,7 +163,7 @@ export const ExampleCollection: CollectionConfig = {
This can be combined with the `hasMany` property to allow multiple uploads from multiple collections.
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const ExampleCollection: CollectionConfig = {
slug: 'example-collection',
docs/folders/overview.mdx
+2 -2
View File
@@ -62,7 +62,7 @@ type RootFoldersConfiguration = {
```ts
// Example usage
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -103,7 +103,7 @@ type CollectionFoldersConfiguration =
```ts
// Example usage
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
collections: [
docs/getting-started/concepts.mdx
+8 -8
View File
@@ -104,26 +104,26 @@ Payload also contains all TypeScript definitions, which can be imported from `pa
Here's how to import some common Payload types:
```ts
import { Config, CollectionConfig, GlobalConfig, Field } from 'payload'
import { Config, CollectionConfig, GlobalConfig, Field } from @hanzo/cms'from
```
`@payloadcms/next`
`@hanzo/cms-next`
Whereas Payload itself is responsible for direct database access, and control over Payload business logic, the `@payloadcms/next` package is responsible for the Admin Panel and the entire HTTP layer that Payload exposes, including the [REST API](../rest-api/overview) and [GraphQL API](../graphql/overview).
Whereas Payload itself is responsible for direct database access, and control over Payload business logic, the `@hanzo/cms-next` package is responsible for the Admin Panel and the entire HTTP layer that Payload exposes, including the [REST API](../rest-api/overview) and [GraphQL API](../graphql/overview).
`@payloadcms/graphql`
`@hanzo/cms-graphql`
All of Payload's GraphQL functionality is abstracted into a separate package. Payload, its Admin UI, and REST API have absolutely no overlap with GraphQL, and you will incur no performance overhead from GraphQL if you are not using it. However, it's installed within the `@payloadcms/next` package so you don't have to install it manually. You do, however, need to have GraphQL installed separately in your `package.json` if you are using GraphQL.
All of Payload's GraphQL functionality is abstracted into a separate package. Payload, its Admin UI, and REST API have absolutely no overlap with GraphQL, and you will incur no performance overhead from GraphQL if you are not using it. However, it's installed within the `@hanzo/cms-next` package so you don't have to install it manually. You do, however, need to have GraphQL installed separately in your `package.json` if you are using GraphQL.
`@payloadcms/ui`
`@hanzo/cms-ui`
This is the UI library that Payload's Admin Panel uses. All components are exported from this package and can be re-used as you build extensions to the Payload admin UI, or want to use Payload components in your own React apps. Some exports are server components and some are client components.
`@payloadcms/db-postgres`, `@payloadcms/db-vercel-postgres`, `@payloadcms/db-mongodb`, `@payloadcms/db-sqlite`
`@hanzo/cms-db-postgres`, `@hanzo/cms-db-vercel-postgres`, `@hanzo/cms-db-mongodb`, `@hanzo/cms-db-sqlite`
You can choose which Database Adapter you'd like to use for your project, and no matter which you choose, the entire data layer for Payload is contained within these packages. You can only use one at a time for any given project.
`@payloadcms/richtext-lexical`, `@payloadcms/richtext-slate`
`@hanzo/cms-richtext-lexical`, `@hanzo/cms-richtext-slate`
Payload's Rich Text functionality is abstracted into separate packages and if you want to enable Rich Text in your project, you'll need to install one of these packages. We recommend Lexical for all new projects, and this is where Payload will focus its efforts on from this point, but Slate is still supported if you have already built with it.
docs/getting-started/installation.mdx
+16 -16
View File
@@ -2,7 +2,7 @@
title: Installation
label: Installation
order: 30
desc: To quickly get started with Payload, simply run npx create-payload-app or install from scratch.
desc: To quickly get started with Payload, simply run npx @hanzo/create-cms-app or install from scratch.
keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, nextjs
---
@@ -33,19 +33,19 @@ Payload requires the following software:
status.
</Banner>
## Quickstart with create-payload-app
## Quickstart with @hanzo/create-cms-app
To quickly scaffold a new Payload app in the fastest way possible, you can use [create-payload-app](https://npmjs.com/package/create-payload-app). To do so, run the following command:
To quickly scaffold a new Payload app in the fastest way possible, you can use [@hanzo/create-cms-app](https://npmjs.com/package/@hanzo/create-cms-app). To do so, run the following command:
```bash
npx create-payload-app
npx @hanzo/create-cms-app
```
Then just follow the prompts! You'll get set up with a new folder and a functioning Payload app inside. You can then start [configuring your application](../configuration/overview).
## Adding to an existing app
Adding Payload to an existing Next.js app is super straightforward. You can either run the `npx create-payload-app` command inside your Next.js project's folder, or manually install Payload by following the steps below.
Adding Payload to an existing Next.js app is super straightforward. You can either run the `npx @hanzo/create-cms-app` command inside your Next.js project's folder, or manually install Payload by following the steps below.
If you don't have a Next.js app already, but you still want to start a project from a blank Next.js app, you can create a new Next.js app using `npx create-next-app` - and then just follow the steps below to install Payload.
@@ -54,17 +54,17 @@ If you don't have a Next.js app already, but you still want to start a project f
First, you'll want to add the required Payload packages to your project:
```bash
pnpm i payload @payloadcms/next
pnpm i payload @hanzo/cms-next
```
You'll also likely want to install the following optional packages:
- `@payloadcms/richtext-lexical` - Rich text editor (not needed if you don't use Rich Text)
- `@hanzo/cms-richtext-lexical` - Rich text editor (not needed if you don't use Rich Text)
- `sharp` - Image resizing, cropping, and focal point support (only needed if you use [Upload](/docs/upload/overview) collections with image manipulation)
- `graphql` - Only needed if you want to use the [GraphQL API](/docs/graphql/overview)
```bash
pnpm i @payloadcms/richtext-lexical sharp graphql
pnpm i @hanzo/cms-richtext-lexical sharp graphql
```
<Banner type="warning">
@@ -79,18 +79,18 @@ To install a Database Adapter, you can run **one** of the following commands:
- To install the [MongoDB Adapter](../database/mongodb), run:
```bash
pnpm i @payloadcms/db-mongodb
pnpm i @hanzo/cms-db-mongodb
```
- To install the [Postgres Adapter](../database/postgres), run:
```bash
pnpm i @payloadcms/db-postgres
pnpm i @hanzo/cms-db-postgres
```
- To install the [SQLite Adapter](../database/sqlite), run:
```bash
pnpm i @payloadcms/db-sqlite
pnpm i @hanzo/cms-db-sqlite
```
<Banner type="success">
@@ -120,7 +120,7 @@ _For an exact reference of the `(payload)` directory, see [Project Structure](..
i.e. `(my-app)`.
</Banner>
The files that Payload needs to have in your `/app` folder do not regenerate, and will never change. Once you slot them in, you never have to revisit them. They are not meant to be edited and simply import Payload dependencies from `@payloadcms/next` for the REST / GraphQL API and Admin Panel.
The files that Payload needs to have in your `/app` folder do not regenerate, and will never change. Once you slot them in, you never have to revisit them. They are not meant to be edited and simply import Payload dependencies from `@hanzo/cms-next` for the REST / GraphQL API and Admin Panel.
You can name the `(my-app)` folder anything you want. The name does not matter and will just be used to clarify your directory structure for yourself. Common names might be `(frontend)`, `(app)`, or similar. [More details](../admin/overview).
@@ -131,7 +131,7 @@ Payload has a Next.js plugin that it uses to ensure compatibility with some of t
To add the Payload Plugin, use `withPayload` in your `next.config.js`:
```js
import { withPayload } from '@payloadcms/next/withPayload'
import { withPayload } from '@hanzo/cms-next/withPayload'
/** @type {import('next').NextConfig} */
const nextConfig = {
@@ -165,9 +165,9 @@ Here's what Payload needs at a bare minimum:
```ts
import sharp from 'sharp'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { buildConfig } from 'payload'
import { lexicalEditor } from '@hanzo/cms-richtext-lexical'
import { mongooseAdapter } from '@hanzo/cms-db-mongodb'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// If you'd like to use Rich Text, pass your editor here
docs/getting-started/use-cases.mdx
+2 -2
View File
@@ -28,7 +28,7 @@ If you're building a website and your frontend is on Next.js, then Payload is a
Get started with Payload as a CMS using our official Website template:
```
npx create-payload-app@latest -t website
npx @hanzo/create-cms-app@latest -t website
```
### Enterprise Tool
@@ -51,7 +51,7 @@ That's where Payload comes in. Payload instantly provides all of this out of the
Generally, the best place to start for a new enterprise tool is with a blank canvas, where you can define your own functionality:
```
npx create-payload-app@latest -t blank
npx @hanzo/create-cms-app@latest -t blank
```
### Headless Commerce
docs/graphql/extending.mdx
+4 -4
View File
@@ -34,7 +34,7 @@ Both `graphQL.queries` and `graphQL.mutations` functions should return an object
`payload.config.js`:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
import myCustomQueryResolver from './graphQL/resolvers/myCustomQueryResolver'
export default buildConfig({
@@ -103,7 +103,7 @@ We've exposed a few types and utilities to help you extend the API further. Payl
**`GraphQLJSON`** & **`GraphQLJSONObject`**
```ts
import { GraphQLJSON, GraphQLJSONObject } from '@payloadcms/graphql/types'
import { GraphQLJSON, GraphQLJSONObject } from '@hanzo/cms-graphql/types'
```
**`GraphQL`**
@@ -111,7 +111,7 @@ import { GraphQLJSON, GraphQLJSONObject } from '@payloadcms/graphql/types'
You can directly import the GraphQL package used by Payload, most useful for typing.
```ts
import { GraphQL } from '@payloadcms/graphql/types'
import { GraphQL } from '@hanzo/cms-graphql/types'
```
<Banner type="warning">
@@ -127,7 +127,7 @@ It takes in two arguments, the first for the name of this new schema type and th
Example
```ts
import { buildPaginatedListType } from '@payloadcms/graphql/types'
import { buildPaginatedListType } from '@hanzo/cms-graphql/types'
export const getMyPosts = (GraphQL, payload) => {
return {
docs/graphql/graphql-schema.mdx
+2 -2
View File
@@ -10,10 +10,10 @@ In Payload the schema is controlled by your collections and globals. All you nee
## Schema generation script
Install `@payloadcms/graphql` as a dev dependency:
Install `@hanzo/cms-graphql` as a dev dependency:
```bash
pnpm add @payloadcms/graphql -D
pnpm add @hanzo/cms-graphql -D
```
Run the following command to generate the schema:
docs/graphql/overview.mdx
+4 -4
View File
@@ -38,7 +38,7 @@ At the top of your Payload Config you can define all the options to manage Graph
Everything that can be done to a Collection via the REST or Local API can be done with GraphQL (outside of uploading files, which is REST-only). If you have a collection as follows:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const PublicUser: CollectionConfig = {
slug: 'public-users',
@@ -78,7 +78,7 @@ export const PublicUser: CollectionConfig = {
Globals are also fully supported. For example:
```ts
import type { GlobalConfig } from 'payload';
import type { GlobalConfig } from @hanzo/cms'from ;
const Header: GlobalConfig = {
slug: 'header',
@@ -139,8 +139,8 @@ see a ton of detail about how GraphQL operates within Payload.
You can add custom validation rules to your GraphQL API by defining a `validationRules` function in your Payload Config. This function should return an array of [Validation Rules](https://graphql.org/graphql-js/validation/#validation-rules) that will be applied to all incoming queries and mutations.
```ts
import { GraphQL } from '@payloadcms/graphql/types'
import { buildConfig } from 'payload'
import { GraphQL } from '@hanzo/cms-graphql/types'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
docs/hooks/collections.mdx
+22 -22
View File
@@ -11,7 +11,7 @@ Collection Hooks are [Hooks](./overview) that run on Documents within a specific
To add Hooks to a Collection, use the `hooks` property in your [Collection Config](../configuration/collections):
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
export const CollectionWithHooks: CollectionConfig = {
// ...
@@ -32,7 +32,7 @@ export const CollectionWithHooks: CollectionConfig = {
All Collection Hooks accept an array of [synchronous or asynchronous functions](./overview#async-vs-synchronous). Each Collection Hook receives specific arguments based on its own type, and has the ability to modify specific outputs.
```ts
import type { CollectionConfig } from 'payload';
import type { CollectionConfig } from @hanzo/cms'from ;
export const CollectionWithHooks: CollectionConfig = {
// ...
@@ -68,7 +68,7 @@ export const CollectionWithHooks: CollectionConfig = {
The `beforeOperation` hook can be used to modify the arguments that operations accept or execute side-effects that run before an operation begins.
```ts
import type { CollectionBeforeOperationHook } from 'payload'
import type { CollectionBeforeOperationHook } from @hanzo/cms'from
const beforeOperationHook: CollectionBeforeOperationHook = async ({
args,
@@ -99,7 +99,7 @@ Please do note that this does not run before client-side validation. If you rend
3. `validate` runs on the server
```ts
import type { CollectionBeforeValidateHook } from 'payload'
import type { CollectionBeforeValidateHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
const beforeValidateHook: CollectionBeforeValidateHook<Post> = async ({
@@ -136,7 +136,7 @@ The following arguments are provided to the `beforeValidate` hook:
Immediately before validation, beforeChange hooks will run during create and update operations. At this stage, the data should be treated as unvalidated user input. There is no guarantee that required fields exist or that fields are in the correct format. As such, using this data for side effects requires manual validation. You can optionally modify the shape of the data to be saved.
```ts
import type { CollectionBeforeChangeHook } from 'payload'
import type { CollectionBeforeChangeHook } from @hanzo/cms'from
export const requireTitleOnUpdate: CollectionBeforeChangeHook = async ({
data, // Partial<T> — changed fields only
@@ -182,7 +182,7 @@ The following arguments are provided to the `beforeChange` hook:
After a document is created or updated, the `afterChange` hook runs. This hook is helpful to recalculate statistics such as total sales within a global, syncing user profile changes to a CRM, and more.
```ts
import type { CollectionAfterChangeHook } from 'payload'
import type { CollectionAfterChangeHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
const afterChangeHook: CollectionAfterChangeHook<Post> = async ({
@@ -210,7 +210,7 @@ The following arguments are provided to the `afterChange` hook:
Runs before `find` and `findByID` operations are transformed for output by `afterRead`. This hook fires before hidden fields are removed and before localized fields are flattened into the requested locale. Using this Hook will provide you with all locales and all hidden fields via the `doc` argument.
```ts
import type { CollectionBeforeReadHook } from 'payload'
import type { CollectionBeforeReadHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
const beforeReadHook: CollectionBeforeReadHook<Post> = async ({
@@ -235,7 +235,7 @@ The following arguments are provided to the `beforeRead` hook:
Runs as the last step before documents are returned. Flattens locales, hides protected fields, and removes fields that users do not have access to.
```ts
import type { CollectionAfterReadHook } from 'payload'
import type { CollectionAfterReadHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
const afterReadHook: CollectionAfterReadHook<Post> = async ({
@@ -260,7 +260,7 @@ The following arguments are provided to the `afterRead` hook:
Runs before the `delete` operation. Returned values are discarded.
```ts
import type { CollectionBeforeDeleteHook } from 'payload';
import type { CollectionBeforeDeleteHook } from @hanzo/cms'from ;
const beforeDeleteHook: CollectionBeforeDeleteHook = async ({
req,
@@ -282,7 +282,7 @@ The following arguments are provided to the `beforeDelete` hook:
Runs immediately after the `delete` operation removes records from the database. Returned values are discarded.
```ts
import type { CollectionAfterDeleteHook } from 'payload';
import type { CollectionAfterDeleteHook } from @hanzo/cms'from ;
const afterDeleteHook: CollectionAfterDeleteHook = async ({
req,
@@ -306,7 +306,7 @@ The following arguments are provided to the `afterDelete` hook:
The `afterOperation` hook can be used to modify the result of operations or execute side-effects that run after an operation has completed.
```ts
import type { CollectionAfterOperationHook } from 'payload'
import type { CollectionAfterOperationHook } from @hanzo/cms'from
const afterOperationHook: CollectionAfterOperationHook = async ({ result }) => {
return result
@@ -328,7 +328,7 @@ The following arguments are provided to the `afterOperation` hook:
The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
```ts
import type { CollectionAfterErrorHook } from 'payload';
import type { CollectionAfterErrorHook } from @hanzo/cms'from ;
const afterErrorHook: CollectionAfterErrorHook = async ({
req,
@@ -353,7 +353,7 @@ The following arguments are provided to the `afterError` Hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs during `login` operations where a user with the provided credentials exist, but before a token is generated and added to the response. You can optionally modify the user that is returned, or throw an error in order to deny the login operation.
```ts
import type { CollectionBeforeLoginHook } from 'payload'
import type { CollectionBeforeLoginHook } from @hanzo/cms'from
const beforeLoginHook: CollectionBeforeLoginHook = async ({ user }) => {
return user
@@ -374,7 +374,7 @@ The following arguments are provided to the `beforeLogin` hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs after successful `login` operations. You can optionally modify the user that is returned.
```ts
import type { CollectionAfterLoginHook } from 'payload';
import type { CollectionAfterLoginHook } from @hanzo/cms'from ;
const afterLoginHook: CollectionAfterLoginHook = async ({
user,
@@ -397,7 +397,7 @@ The following arguments are provided to the `afterLogin` hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs after `logout` operations.
```ts
import type { CollectionAfterLogoutHook } from 'payload';
import type { CollectionAfterLogoutHook } from @hanzo/cms'from ;
const afterLogoutHook: CollectionAfterLogoutHook = async ({
req,
@@ -417,7 +417,7 @@ The following arguments are provided to the `afterLogout` hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs after `me` operations.
```ts
import type { CollectionAfterMeHook } from 'payload';
import type { CollectionAfterMeHook } from @hanzo/cms'from ;
const afterMeHook: CollectionAfterMeHook = async ({
req,
@@ -439,7 +439,7 @@ The following arguments are provided to the `afterMe` hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs after `refresh` operations.
```ts
import type { CollectionAfterRefreshHook } from 'payload';
import type { CollectionAfterRefreshHook } from @hanzo/cms'from ;
const afterRefreshHook: CollectionAfterRefreshHook = async ({
token,
@@ -461,7 +461,7 @@ The following arguments are provided to the `afterRefresh` hook:
For [Auth-enabled Collections](../authentication/overview), this hook runs after successful `forgotPassword` operations. Returned values are discarded.
```ts
import type { CollectionAfterForgotPasswordHook } from 'payload'
import type { CollectionAfterForgotPasswordHook } from @hanzo/cms'from
const afterForgotPasswordHook: CollectionAfterForgotPasswordHook = async ({
args,
@@ -483,7 +483,7 @@ The following arguments are provided to the `afterForgotPassword` hook:
For [Auth-enabled Collections](../authentication/overview), this hook allows you to optionally replace the default behavior of the `refresh` operation with your own. If you optionally return a value from your hook, the operation will not perform its own logic and continue.
```ts
import type { CollectionRefreshHook } from 'payload'
import type { CollectionRefreshHook } from @hanzo/cms'from
const myRefreshHook: CollectionRefreshHook = async ({
args,
@@ -503,7 +503,7 @@ The following arguments are provided to the `afterRefresh` hook:
For [Auth-enabled Collections](../authentication/overview), this hook allows you to optionally replace the default behavior of the `me` operation with your own. If you optionally return a value from your hook, the operation will not perform its own logic and continue.
```ts
import type { CollectionMeHook } from 'payload'
import type { CollectionMeHook } from @hanzo/cms'from
const meHook: CollectionMeHook = async ({
args,
@@ -540,13 +540,13 @@ import type {
CollectionAfterForgotPasswordHook,
CollectionRefreshHook,
CollectionMeHook,
} from 'payload'
} from @hanzo/cms'from
```
You can also pass a generic type to each hook for strongly-typed `doc`, `previousDoc`, and `data` properties:
```ts
import type { CollectionAfterChangeHook } from 'payload'
import type { CollectionAfterChangeHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
const afterChangeHook: CollectionAfterChangeHook<Post> = async ({
docs/hooks/context.mdx
+3 -3
View File
@@ -28,7 +28,7 @@ To pass data between hooks, you can assign values to context in an earlier hook
For example:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
const Customer: CollectionConfig = {
slug: 'customers',
@@ -66,7 +66,7 @@ Let's say you have an `afterChange` hook, and you want to do a calculation insid
Bad example:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
const Customer: CollectionConfig = {
slug: 'customers',
@@ -95,7 +95,7 @@ Instead of the above, we need to tell the `afterChange` hook to not run again if
Fixed example:
```ts
import type { CollectionConfig } from 'payload'
import type { CollectionConfig } from @hanzo/cms'from
const MyCollection: CollectionConfig = {
slug: 'slug',
docs/hooks/fields.mdx
+9 -9
View File
@@ -11,7 +11,7 @@ Field Hooks are [Hooks](./overview) that run on Documents on a per-field basis.
To add Hooks to a Field, use the `hooks` property in your [Field Config](../fields/overview):
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
export const FieldWithHooks: Field = {
// ...
@@ -37,7 +37,7 @@ All Field Hooks accept an array of synchronous or asynchronous functions. These
To add hooks to a Field, use the `hooks` property in your [Field Config](../fields/overview):
```ts
import type { Field } from 'payload';
import type { Field } from @hanzo/cms'from ;
const FieldWithHooks: Field = {
name: 'name',
@@ -96,7 +96,7 @@ Please do note that this does not run before client-side validation. If you rend
3. `validate` runs on the server
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const usernameField: Field = {
name: 'username',
@@ -121,7 +121,7 @@ stored in a consistent format in the database.
Immediately before validation, beforeChange hooks will run during create and update operations. At this stage, the data should be treated as unvalidated user input. There is no guarantee that required fields exist or that fields are in the correct format. As such, using this data for side effects requires manual validation. You can optionally modify the shape of the data to be saved.
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const emailField: Field = {
name: 'email',
@@ -149,7 +149,7 @@ The `afterChange` hook is executed after a field's value has been changed and sa
for post-processing or triggering side effects based on the new value of the field.
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const membershipStatusField: Field = {
name: 'membershipStatus',
@@ -186,7 +186,7 @@ The `afterRead` hook is invoked after a field value is read from the database. T
transforming the field data for output.
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const dateField: Field = {
name: 'createdAt',
@@ -217,7 +217,7 @@ By Default, unique and required text fields Payload will append "- Copy" to the
Here is an example of a number field with a hook that increments the number to avoid unique constraint errors when duplicating a document:
```ts
import type { Field } from 'payload'
import type { Field } from @hanzo/cms'from
const numberField: Field = {
name: 'number',
@@ -238,7 +238,7 @@ const numberField: Field = {
Payload exports a type for field hooks which can be accessed and used as follows:
```ts
import type { FieldHook } from 'payload'
import type { FieldHook } from @hanzo/cms'from
// Field hook type is a generic that takes three arguments:
// 1: The document type
@@ -268,7 +268,7 @@ const exampleFieldHook: ExampleFieldHook = (args) => {
Here's a real-world example using generated Payload types:
```ts
import type { FieldHook } from 'payload'
import type { FieldHook } from @hanzo/cms'from
import type { Post } from '@/payload-types'
// Hook for a text field in a Post collection
docs/hooks/globals.mdx
+10 -10
View File
@@ -11,7 +11,7 @@ Global Hooks are [Hooks](./overview) that run on [Global](../configuration/globa
To add Hooks to a Global, use the `hooks` property in your [Global Config](../configuration/globals):
```ts
import type { GlobalConfig } from 'payload'
import type { GlobalConfig } from @hanzo/cms'from
export const GlobalWithHooks: GlobalConfig = {
// ...
@@ -32,7 +32,7 @@ export const GlobalWithHooks: GlobalConfig = {
All Global Hooks accept an array of [synchronous or asynchronous functions](./overview#async-vs-synchronous). Each Global Hook receives specific arguments based on its own type, and has the ability to modify specific outputs.
```ts
import type { GlobalConfig } from 'payload';
import type { GlobalConfig } from @hanzo/cms'from ;
const GlobalWithHooks: GlobalConfig = {
// ...
@@ -54,7 +54,7 @@ const GlobalWithHooks: GlobalConfig = {
The `beforeOperation` hook can be used to modify the arguments that operations accept or execute side-effects that run before an operation begins.
```ts
import type { GlobalBeforeOperationHook } from 'payload'
import type { GlobalBeforeOperationHook } from @hanzo/cms'from
const beforeOperationHook: GlobalBeforeOperationHook = async ({
args,
@@ -85,7 +85,7 @@ Please do note that this does not run before client-side validation. If you rend
3. `validate` runs on the server
```ts
import type { GlobalBeforeValidateHook } from 'payload'
import type { GlobalBeforeValidateHook } from @hanzo/cms'from
import type { SiteSettings } from '@/payload-types'
const beforeValidateHook: GlobalBeforeValidateHook<SiteSettings> = async ({
@@ -119,7 +119,7 @@ The following arguments are provided to the `beforeValidate` hook:
Immediately following validation, `beforeChange` hooks will run within the `update` operation. At this stage, you can be confident that the data that will be saved to the document is valid in accordance to your field validations. You can optionally modify the shape of data to be saved.
```ts
import type { GlobalBeforeChangeHook } from 'payload'
import type { GlobalBeforeChangeHook } from @hanzo/cms'from
import type { SiteSettings } from '@/payload-types'
const beforeChangeHook: GlobalBeforeChangeHook<SiteSettings> = async ({
@@ -153,7 +153,7 @@ The following arguments are provided to the `beforeChange` hook:
After a global is updated, the `afterChange` hook runs. Use this hook to purge caches of your applications, sync site data to CRMs, and more.
```ts
import type { GlobalAfterChangeHook } from 'payload'
import type { GlobalAfterChangeHook } from @hanzo/cms'from
import type { SiteSettings } from '@/payload-types'
const afterChangeHook: GlobalAfterChangeHook<SiteSettings> = async ({
@@ -181,7 +181,7 @@ The following arguments are provided to the `afterChange` hook:
Runs before `findOne` global operation is transformed for output by `afterRead`. This hook fires before hidden fields are removed and before localized fields are flattened into the requested locale. Using this Hook will provide you with all locales and all hidden fields via the `doc` argument.
```ts
import type { GlobalBeforeReadHook } from 'payload'
import type { GlobalBeforeReadHook } from @hanzo/cms'from
const beforeReadHook: GlobalBeforeReadHook = async ({
doc,
@@ -203,7 +203,7 @@ The following arguments are provided to the `beforeRead` hook:
Runs as the last step before a global is returned. Flattens locales, hides protected fields, and removes fields that users do not have access to.
```ts
import type { GlobalAfterReadHook } from 'payload'
import type { GlobalAfterReadHook } from @hanzo/cms'from
import type { SiteSettings } from '@/payload-types'
const afterReadHook: GlobalAfterReadHook<SiteSettings> = async ({
@@ -237,13 +237,13 @@ import type {
GlobalAfterChangeHook,
GlobalBeforeReadHook,
GlobalAfterReadHook,
} from 'payload'
} from @hanzo/cms'from
```
You can also pass a generic type to each hook for strongly-typed `doc`, `previousDoc`, and `data` properties:
```ts
import type { GlobalAfterChangeHook } from 'payload'
import type { GlobalAfterChangeHook } from @hanzo/cms'from
import type { SiteSettings } from '@/payload-types'
const afterChangeHook: GlobalAfterChangeHook<SiteSettings> = async ({
docs/hooks/overview.mdx
+3 -3
View File
@@ -45,7 +45,7 @@ Root Hooks are not associated with any specific Collection, Global, or Field. Th
To add Root Hooks, use the `hooks` property in your [Payload Config](/docs/configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -68,7 +68,7 @@ The following options are available:
The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ...
@@ -138,7 +138,7 @@ Hooks are only triggered on the server and are automatically excluded from the c
You might want to return custom error messages in the API or admin panel in your hooks, if an operation cannot be performed - e.g. if a rate limit was exceeded. For this you can leverage the `APIError` class like this:
```ts
import { APIError, type CollectionBeforeChangeHook } from 'payload'
import { APIError, type CollectionBeforeChangeHook } from @hanzo/cms'from
const beforeChangeHook: CollectionBeforeChangeHook = async ({ data }) => {
...
docs/integrations/vercel-content-link.mdx
+4 -4
View File
@@ -25,17 +25,17 @@ For full details on how the encoding and decoding algorithm works, check out [`@
## Getting Started
Setting up Payload with Vercel Content Link is easy. First, install the `@payloadcms/plugin-csm` plugin into your project. This plugin requires an API key to install, [contact our sales team](https://payloadcms.com/for-enterprise) if you don't already have one.
Setting up Payload with Vercel Content Link is easy. First, install the `@hanzo/cms-plugin-csm` plugin into your project. This plugin requires an API key to install, [contact our sales team](https://payloadcms.com/for-enterprise) if you don't already have one.
```bash
npm i @payloadcms/plugin-csm
npm i @hanzo/cms-plugin-csm
```
Then in the `plugins` array of your Payload Config, call the plugin and enable any collections that require Content Source Maps.
```ts
import { buildConfig } from 'payload/config'
import contentSourceMaps from '@payloadcms/plugin-csm'
import { buildConfig } from @hanzo/cms'from
import contentSourceMaps from '@hanzo/cms-plugin-csm'
const config = buildConfig({
collections: [
docs/jobs-queue/jobs.mdx
+2 -2
View File
@@ -131,7 +131,7 @@ Queue jobs from Next.js server actions:
```ts
'use server'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
export async function scheduleEmail(userId: string) {
@@ -234,7 +234,7 @@ By default, Payload's job operations bypass access control when used from the Lo
To define custom access control for jobs, add an `access` property to your Jobs Config:
```ts
import type { SanitizedConfig } from 'payload'
import type { SanitizedConfig } from @hanzo/cms'from
const config: SanitizedConfig = {
// ...
docs/jobs-queue/overview.mdx
+1 -1
View File
@@ -238,7 +238,7 @@ Never use `autoRun` on serverless platforms.
By default, the internal `payload-jobs` collection is hidden from the Payload Admin Panel. To make this collection visible for debugging or inspection purposes, you can override its configuration using `jobsCollectionOverrides`.
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ... other config
docs/jobs-queue/quick-start-example.mdx
+3 -3
View File
@@ -22,7 +22,7 @@ Now let's build this example step by step.
First, create a task in your `payload.config.ts`:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ... other config
@@ -129,7 +129,7 @@ We'll create a task that generates a daily analytics report every morning at 8 A
### Step 1: Define a Task with Schedule
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ... other config
@@ -237,7 +237,7 @@ Here's the complete flow:
Here's the full config with both the task and runner:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
export default buildConfig({
// ... other config
docs/jobs-queue/schedules.mdx
+3 -3
View File
@@ -187,7 +187,7 @@ export type ScheduleConfig = {
The following example demonstrates scheduling a Job to enqueue every day at midnight:
```ts
import type { TaskConfig } from 'payload'
import type { TaskConfig } from @hanzo/cms'from
export const SendDigestEmail: TaskConfig<'SendDigestEmail'> = {
slug: 'SendDigestEmail',
@@ -258,7 +258,7 @@ Here's how the scheduling process operates in detail:
You may want more control over concurrency or dynamically set Job inputs at scheduling time. For instance, allowing multiple overlapping Jobs to be scheduled, even if a previously scheduled job has not completed yet, or preparing dynamic data to pass to your Job handler:
```ts
import { countRunnableOrActiveJobsForQueue } from 'payload'
import { countRunnableOrActiveJobsForQueue } from @hanzo/cms'from
schedule: [
{
@@ -517,7 +517,7 @@ jobs: {
If you have a custom `beforeSchedule` hook, make sure it properly checks for existing jobs:
```ts
import { countRunnableOrActiveJobsForQueue } from 'payload'
import { countRunnableOrActiveJobsForQueue } from @hanzo/cms'from
hooks: {
beforeSchedule: async ({ queueable, req }) => {
docs/jobs-queue/tasks.mdx
+1 -1
View File
@@ -460,7 +460,7 @@ Then, the `createPost` file itself:
`src/tasks/createPost.ts:`
```ts
import type { TaskHandler } from 'payload'
import type { TaskHandler } from @hanzo/cms'from
export const createPostHandler: TaskHandler<'createPost'> = async ({
input,
docs/live-preview/client.mdx
+10 -10
View File
@@ -63,17 +63,17 @@ If your framework is not listed, you can still integrate with Live Preview using
If your front-end application is built with client-side [React](https://react.dev) like [Next.js Pages Router](https://nextjs.org/docs/pages), you can use the `useLivePreview` hook that Payload provides.
First, install the `@payloadcms/live-preview-react` package:
First, install the `@hanzo/cms-live-preview-react` package:
```bash
npm install @payloadcms/live-preview-react
npm install @hanzo/cms-live-preview-react
```
Then, use the `useLivePreview` hook in your React component:
```tsx
'use client'
import { useLivePreview } from '@payloadcms/live-preview-react'
import { useLivePreview } from '@hanzo/cms-live-preview-react'
import { Page as PageType } from '@/payload-types'
// Fetch the page in a server component, pass it to the client component, then thread it through the hook
@@ -104,10 +104,10 @@ export const PageClient: React.FC<{
If your front-end application is built with [Vue 3](https://vuejs.org) or [Nuxt 3](https://nuxt.js), you can use the `useLivePreview` composable that Payload provides.
First, install the `@payloadcms/live-preview-vue` package:
First, install the `@hanzo/cms-live-preview-vue` package:
```bash
npm install @payloadcms/live-preview-vue
npm install @hanzo/cms-live-preview-vue
```
Then, use the `useLivePreview` hook in your Vue component:
@@ -116,7 +116,7 @@ Then, use the `useLivePreview` hook in your Vue component:
<script setup lang="ts">
import type { PageData } from '~/types';
import { defineProps } from 'vue';
import { useLivePreview } from '@payloadcms/live-preview-vue';
import { useLivePreview } from '@hanzo/cms-live-preview-vue';
// Fetch the initial data on the parent component or using async state
const props = defineProps<{ initialData: PageData }>();
@@ -139,10 +139,10 @@ const { data } = useLivePreview<PageData>({
No matter what front-end framework you are using, you can build your own hook using the same underlying tooling that Payload provides.
First, install the base `@payloadcms/live-preview` package:
First, install the base `@hanzo/cms-live-preview` package:
```bash
npm install @payloadcms/live-preview
npm install @hanzo/cms-live-preview
```
This package provides the following functions:
@@ -166,7 +166,7 @@ The `subscribe` function takes the following args:
With these functions, you can build your own hook using your front-end framework of choice:
```tsx
import { subscribe, unsubscribe } from '@payloadcms/live-preview'
import { subscribe, unsubscribe } from '@hanzo/cms-live-preview'
// To build your own hook, subscribe to Live Preview events using the `subscribe` function
// It handles everything from:
@@ -183,7 +183,7 @@ import { subscribe, unsubscribe } from '@payloadcms/live-preview'
Here is an example of what the same `useLivePreview` React hook from above looks like under the hood:
```tsx
import { subscribe, unsubscribe, ready } from '@payloadcms/live-preview'
import { subscribe, unsubscribe, ready } from '@hanzo/cms-live-preview'
import { useCallback, useEffect, useState, useRef } from 'react'
export const useLivePreview = <T extends any>(props: {
docs/live-preview/overview.mdx
+4 -4
View File
@@ -13,7 +13,7 @@ Live Preview works by rendering an iframe on the page that loads your front-end
To add Live Preview, use the `admin.livePreview` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -57,7 +57,7 @@ The `url` property resolves to a string that points to your front-end applicatio
To set the URL, use the `admin.livePreview.url` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -80,7 +80,7 @@ This is also useful for conditionally rendering Live Preview, similar to access
To set dynamic URLs, set the `admin.livePreview.url` property in your [Payload Config](../configuration/overview) to a function:
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
@@ -136,7 +136,7 @@ The breakpoints property is an array of objects which are used as “device size
To set breakpoints, use the `admin.livePreview.breakpoints` property in your [Payload Config](../configuration/overview):
```ts
import { buildConfig } from 'payload'
import { buildConfig } from @hanzo/cms'from
const config = buildConfig({
// ...
docs/live-preview/server.mdx
+8 -8
View File
@@ -29,10 +29,10 @@ If your front-end application is built with [React](#react), you can use the `Re
If your front-end application is built with server-side [React](https://react.dev) like [Next.js App Router](https://nextjs.org/docs/app), you can use the `RefreshRouteOnSave` component that Payload provides.
First, install the `@payloadcms/live-preview-react` package:
First, install the `@hanzo/cms-live-preview-react` package:
```bash
npm install @payloadcms/live-preview-react
npm install @hanzo/cms-live-preview-react
```
Then, render the `RefreshRouteOnSave` component anywhere in your `page.tsx`. Here's an example:
@@ -41,7 +41,7 @@ Then, render the `RefreshRouteOnSave` component anywhere in your `page.tsx`. Her
```tsx
import { RefreshRouteOnSave } from './RefreshRouteOnSave.tsx'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '../payload.config'
export default async function Page() {
@@ -67,7 +67,7 @@ export default async function Page() {
```tsx
'use client'
import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react'
import { RefreshRouteOnSave as PayloadLivePreview } from '@hanzo/cms-live-preview-react'
import { useRouter } from 'next/navigation.js'
import React from 'react'
@@ -87,10 +87,10 @@ export const RefreshRouteOnSave: React.FC = () => {
No matter what front-end framework you are using, you can build your own component using the same underlying tooling that Payload provides.
First, install the base `@payloadcms/live-preview` package:
First, install the base `@hanzo/cms-live-preview` package:
```bash
npm install @payloadcms/live-preview
npm install @hanzo/cms-live-preview
```
This package provides the following functions:
@@ -103,7 +103,7 @@ This package provides the following functions:
With these functions, you can build your own hook using your front-end framework of choice:
```tsx
import { ready, isDocumentEvent } from '@payloadcms/live-preview'
import { ready, isDocumentEvent } from '@hanzo/cms-live-preview'
// To build your own component:
// 1. Listen for document-level `window.postMessage` events sent from the Admin Panel
@@ -119,7 +119,7 @@ Here is an example of what the same `RefreshRouteOnSave` React component from ab
import type React from 'react'
import { isDocumentEvent, ready } from '@payloadcms/live-preview'
import { isDocumentEvent, ready } from '@hanzo/cms-live-preview'
import { useCallback, useEffect, useRef } from 'react'
export const RefreshRouteOnSave: React.FC<{
docs/local-api/outside-nextjs.mdx
+1 -1
View File
@@ -21,7 +21,7 @@ Payload provides a convenient way to run standalone scripts, which can be useful
In standalone scripts, you can simply import the Payload Config and use it right away. If you need an initialized copy of Payload, you can then use the `getPayload` function. This can be useful for tasks like seeding your database or performing other one-off operations.
```ts
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
const seed = async () => {
docs/local-api/overview.mdx
+1 -1
View File
@@ -47,7 +47,7 @@ const afterChangeHook: CollectionAfterChangeHook = async ({
If you want to import Payload in places where you don't have the option to access it from function arguments or `req`, you can import it and initialize it.
```ts
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
const payload = await getPayload({ config })
docs/local-api/server-functions.mdx
+11 -11
View File
@@ -45,7 +45,7 @@ First, let's create our server function. Here are some key points for this proce
```ts
'use server'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
export async function createPost(data) {
@@ -104,7 +104,7 @@ Here's how the server function would look:
```ts
'use server'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
export async function updatePost(id, data) {
@@ -169,7 +169,7 @@ Here's the server function to authenticate a user:
import { headers as getHeaders } from 'next/headers'
import config from '@payload-config'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
export const authenticateUser = async () => {
const payload = await getPayload({ config })
@@ -227,7 +227,7 @@ This example demonstrates how to write a server function that creates a document
```ts
'use server'
import { getPayload } from 'payload'
import { getPayload } from @hanzo/cms'from
import config from '@payload-config'
export async function createPostWithUpload(data, upload) {
@@ -319,7 +319,7 @@ Logs in a user by verifying credentials and setting the authentication cookie. T
#### Importing the `login` function
```ts
import { login } from '@payloadcms/next/auth'
import { login } from '@hanzo/cms-next/auth'
```
The login function needs your Payload config, which cannot be imported in a client component. To work around this, create a simple server function like the one below, and call it from your client.
@@ -327,7 +327,7 @@ The login function needs your Payload config, which cannot be imported in a clie
```ts
'use server'
import { login } from '@payloadcms/next/auth'
import { login } from '@hanzo/cms-next/auth'
import config from '@payload-config'
export async function loginAction({
@@ -398,7 +398,7 @@ Logs out the current user by clearing the authentication cookie and current sess
#### Importing the `logout` function
```ts
import { logout } from '@payloadcms/next/auth'
import { logout } from '@hanzo/cms-next/auth'
```
Similar to the login function, you now need to pass your Payload config to this function and this cannot be done in a client component. Use a helper server function as shown below. To ensure all sessions are cleared, set `allSessions: true` in the options, if you wish to logout but keep current sessions active, you can set this to `false` or leave it `undefined`.
@@ -406,7 +406,7 @@ Similar to the login function, you now need to pass your Payload config to this
```ts
'use server'
import { logout } from '@payloadcms/next/auth'
import { logout } from '@hanzo/cms-next/auth'
import config from '@payload-config'
export async function logoutAction() {
@@ -439,7 +439,7 @@ Refreshes the authentication token and current session for the logged-in user.
#### Importing the `refresh` function
```ts
import { refresh } from '@payloadcms/next/auth'
import { refresh } from '@hanzo/cms-next/auth'
```
As with login and logout, you need to pass your Payload config to this function. Create a helper server function like the one below. Passing the config directly to the client is not possible and will throw errors.
@@ -447,7 +447,7 @@ As with login and logout, you need to pass your Payload config to this function.
```ts
'use server'
import { refresh } from '@payloadcms/next/auth'
import { refresh } from '@hanzo/cms-next/auth'
import config from '@payload-config'
export async function refreshAction() {
@@ -512,7 +512,7 @@ Using server functions helps prevent direct exposure of Local API operations to
Example of restricting access based on user role:
```ts
import { UnauthorizedError } from 'payload'
import { UnauthorizedError } from @hanzo/cms'from
export async function deletePost(postId, user) {
if (!user || user.role !== 'admin') {

Some files were not shown because too many files have changed in this diff Show More