From 8b307012f36ba8ad5335b6932f0f942457f0618d Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 11 Sep 2024 15:47:56 -0400 Subject: [PATCH] feat: passes client field config to server components (#8166) ## Description ### TL;DR: It's currently not possible to render our field components from a server component because their `field` prop is the original field config, not the _client_ config which our components require. Currently, the `field` prop passed into custom fields changes type depending on whether it's a server or client component, leaving server components without any access to the client field config or mechanism to acquire it. This PR passes the client config to all server field components through a new `clientField` prop. This allows the following in a server component, which is very similar to how client field components currently work: Server component: ```tsx import { TextField } from '@payloadcms/ui' import type { TextFieldServerComponent } from 'payload' export const MyCustomServerField: TextFieldServerComponent = ({ clientField }) => { return } ``` Client component: ```tsx 'use client' import { TextField } from '@payloadcms/ui' import type { TextFieldClientComponent } from 'payload' export const MyCustomClientField: TextFieldClientComponent = ({ field }) => { return } ``` ### Full Background If you have a custom field component, and it's a server component, there is currently no way to pass the field prop into Payload's client-side field components. Here's an example of the problem: ```tsx import { TextField } from '@payloadcms/ui' import type { TextFieldServerComponent } from 'payload' import React from 'react' export const MyServerComponent: TextFieldServerComponent = (props) => { const { field } = props return ( // This is not possible ) } ``` The config needs to be transformed into a client config, however, because of the sheer number of hard-to-find arguments that the `createClientField` requires, we cannot use it in its raw form. Here is another example of the problem: ```tsx import { TextField } from '@payloadcms/ui' import { createClientField } from '@payloadcms/ui/utilities/createClientField' import type { TextFieldServerComponent } from 'payload' import React from 'react' export const MyServerComponent: TextFieldServerComponent = ({ createClientField }) => { const clientField = createClientField({...}) // Not a good option bc it requires many hard-to-find args return ( ) } ``` Theoretically, we could preformat a `createFieldConfig` function so it can simply be called without arguments: ```tsx import { TextField } from '@payloadcms/ui' import type { TextFieldServerComponent } from 'payload' import React from 'react' export const MyServerComponent: TextFieldServerComponent = ({ createClientField }) => { return } ``` But this means the field config would be evaluated twice unnecessarily, including label functions, etc. The right way to fix this is to simply pass the client config to server components through a new `clientField` prop: ```tsx import { TextField } from '@payloadcms/ui' import type { TextFieldServerComponent } from 'payload' import React from 'react' export const MyServerComponent: TextFieldServerComponent = ({ clientField }) => { return } ``` - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] Existing test suite passes locally with my changes - [x] I have made corresponding changes to the documentation --- docs/admin/fields.mdx | 44 ++++++++++--------- packages/payload/src/admin/fields/Array.ts | 22 +++++++--- packages/payload/src/admin/fields/Blocks.ts | 22 +++++++--- packages/payload/src/admin/fields/Checkbox.ts | 25 ++++++++--- packages/payload/src/admin/fields/Code.ts | 19 +++++--- .../payload/src/admin/fields/Collapsible.ts | 26 ++++++++--- packages/payload/src/admin/fields/Date.ts | 19 +++++--- packages/payload/src/admin/fields/Email.ts | 22 +++++++--- packages/payload/src/admin/fields/Group.ts | 22 +++++++--- packages/payload/src/admin/fields/JSON.ts | 19 +++++--- packages/payload/src/admin/fields/Number.ts | 22 +++++++--- packages/payload/src/admin/fields/Point.ts | 22 +++++++--- packages/payload/src/admin/fields/Radio.ts | 22 +++++++--- .../payload/src/admin/fields/Relationship.ts | 26 ++++++++--- packages/payload/src/admin/fields/RichText.ts | 25 ++++++++--- packages/payload/src/admin/fields/Row.ts | 19 +++++--- packages/payload/src/admin/fields/Select.ts | 22 +++++++--- packages/payload/src/admin/fields/Tabs.ts | 19 +++++--- packages/payload/src/admin/fields/Text.ts | 19 +++++--- packages/payload/src/admin/fields/Textarea.ts | 25 ++++++++--- packages/payload/src/admin/fields/Upload.ts | 22 +++++++--- .../payload/src/admin/forms/Description.ts | 14 ++++-- packages/payload/src/admin/forms/Error.ts | 15 ++++--- packages/payload/src/admin/forms/Field.ts | 15 ++++--- packages/payload/src/admin/forms/Label.ts | 15 ++++--- packages/payload/src/admin/types.ts | 2 +- packages/payload/src/fields/config/types.ts | 12 ++++- packages/ui/src/fields/Password/types.ts | 2 +- .../Config/createClientConfig/fields.tsx | 35 +++++++++++---- .../collections/Posts/MyClientComponent.tsx | 9 ---- .../collections/Posts/MyClientField.tsx | 9 ++++ .../collections/Posts/MyServerComponent.tsx | 13 ------ .../collections/Posts/MyServerField.tsx | 8 ++++ test/_community/collections/Posts/index.ts | 4 +- test/databaseAdapter.ts | 25 ++++++----- test/helpers.ts | 4 +- test/helpers/e2e/openDocControls.ts | 2 +- test/localization/e2e.spec.ts | 4 +- 38 files changed, 477 insertions(+), 194 deletions(-) delete mode 100644 test/_community/collections/Posts/MyClientComponent.tsx create mode 100644 test/_community/collections/Posts/MyClientField.tsx delete mode 100644 test/_community/collections/Posts/MyServerComponent.tsx create mode 100644 test/_community/collections/Posts/MyServerField.tsx diff --git a/docs/admin/fields.mdx b/docs/admin/fields.mdx index f5d3c9bbfa..f34019928b 100644 --- a/docs/admin/fields.mdx +++ b/docs/admin/fields.mdx @@ -136,7 +136,8 @@ All Field Components receive the following props: | Property | Description | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **`docPreferences`** | An object that contains the [Preferences](./preferences) for the document. -| **`field`** | The field's config. [More details](#the-field-prop) | +| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). | +| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). | | **`locale`** | The locale of the field. [More details](../configuration/localization). | | **`readOnly`** | A boolean value that represents if the field is read-only or not. | | **`user`** | The currently authenticated user. [More details](../authentication/overview). | @@ -189,24 +190,27 @@ import type { ### The `field` Prop -All Field Components are passed their own Field Config through a common `field` prop. Within a Server Component, this is the raw Field Config. Within Client Components, however, the raw Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types). Instead, Client Components receives a [Client Config](./components#accessing-the-payload-config), which is a sanitizes version of the Field Config that is safe to pass into Client Components. +All Field Components are passed their own Field Config through a common `field` prop. Within Server Components, this is the original Field Config as written within your Payload Config. Within Client Components, however, this is a "Client Config", which is a sanitized, client-friendly version of the Field Config. This is because the original Field Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types), meaning it cannot be passed into Client Components without first being transformed. -The exact shape of this prop is unique to the specific [Field Type](../fields/overview) being rendered, minus all non-serializable properties. Any [Custom Components](../components) are also resolved into a "mapped component" that is safe to pass. +The Client Field Config is an exact copy of the original Field Config, minus all non-serializable properties, plus all evaluated functions such as field labels, [Custom Components](../components), etc. + +Server Component: ```tsx import React from 'react' import type { TextFieldServerComponent } from 'payload' +import { TextField } from '@payloadcms/ui' -export const MyServerTextField: TextFieldServerComponent = ({ payload, field: { name } }) => { - const result = await payload.find({ - collection: 'myCollection', - depth: 1, - }) - - // ... +export const MyServerField: TextFieldServerComponent = ({ clientField }) => { + return } ``` + + Tip: + Server Components can still access the original Field Config through the `field` prop. + + Client Component: ```tsx @@ -214,12 +218,8 @@ Client Component: import React from 'react' import type { TextFieldClientComponent } from 'payload' -export const MyClientTextField: TextFieldClientComponent = ({ field: { name } }) => { - return ( -

- {`This field's name is ${name}`} -

- ) +export const MyTextField: TextFieldClientComponent = ({ field }) => { + return } ``` @@ -276,7 +276,8 @@ All Cell Components receive the following props: | Property | Description | | ---------------- | ----------------------------------------------------------------- | -| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) | +| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). | +| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). | | **`link`** | A boolean representing whether this cell should be wrapped in a link. | | **`onClick`** | A function that is called when the cell is clicked. | @@ -316,7 +317,8 @@ Custom Label Components receive all [Field Component](#the-field-component) prop | Property | Description | | -------------- | ---------------------------------------------------------------- | -| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) | +| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). | +| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). | Reminder: @@ -361,7 +363,8 @@ Custom Error Components receive all [Field Component](#the-field-component) prop | Property | Description | | --------------- | ------------------------------------------------------------- | -| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) | +| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). | +| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). | Reminder: @@ -477,7 +480,8 @@ Custom Description Components receive all [Field Component](#the-field-component | Property | Description | | -------------- | ---------------------------------------------------------------- | -| **`field`** | The sanitized, client-friendly version of the field's config. [More details](#the-field-prop) | +| **`field`** | In Server Components, this is the original Field Config. In Client Components, this is the sanitized Client Field Config. [More details](#the-field-prop). | +| **`clientField`** | Server components receive the Client Field Config through this prop. [More details](#the-field-prop). | Reminder: diff --git a/packages/payload/src/admin/fields/Array.ts b/packages/payload/src/admin/fields/Array.ts index 9b6ac8b07d..547a9281ac 100644 --- a/packages/payload/src/admin/fields/Array.ts +++ b/packages/payload/src/admin/fields/Array.ts @@ -27,24 +27,36 @@ type ArrayFieldBaseClientProps = { export type ArrayFieldClientProps = ArrayFieldBaseClientProps & ClientFieldBase -export type ArrayFieldServerProps = ServerFieldBase +export type ArrayFieldServerProps = ServerFieldBase -export type ArrayFieldServerComponent = FieldServerComponent +export type ArrayFieldServerComponent = FieldServerComponent< + ArrayField, + ArrayFieldClientWithoutType +> export type ArrayFieldClientComponent = FieldClientComponent< ArrayFieldClientWithoutType, ArrayFieldBaseClientProps > -export type ArrayFieldLabelServerComponent = FieldLabelServerComponent +export type ArrayFieldLabelServerComponent = FieldLabelServerComponent< + ArrayField, + ArrayFieldClientWithoutType +> export type ArrayFieldLabelClientComponent = FieldLabelClientComponent -export type ArrayFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type ArrayFieldDescriptionServerComponent = FieldDescriptionServerComponent< + ArrayField, + ArrayFieldClientWithoutType +> export type ArrayFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type ArrayFieldErrorServerComponent = FieldErrorServerComponent +export type ArrayFieldErrorServerComponent = FieldErrorServerComponent< + ArrayField, + ArrayFieldClientWithoutType +> export type ArrayFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Blocks.ts b/packages/payload/src/admin/fields/Blocks.ts index 2285dac280..93323fb536 100644 --- a/packages/payload/src/admin/fields/Blocks.ts +++ b/packages/payload/src/admin/fields/Blocks.ts @@ -25,26 +25,38 @@ type BlocksFieldBaseClientProps = { export type BlocksFieldClientProps = BlocksFieldBaseClientProps & ClientFieldBase -export type BlocksFieldServerProps = ServerFieldBase +export type BlocksFieldServerProps = ServerFieldBase -export type BlocksFieldServerComponent = FieldServerComponent +export type BlocksFieldServerComponent = FieldServerComponent< + BlocksField, + BlocksFieldClientWithoutType +> export type BlocksFieldClientComponent = FieldClientComponent< BlocksFieldClientWithoutType, BlocksFieldBaseClientProps > -export type BlocksFieldLabelServerComponent = FieldLabelServerComponent +export type BlocksFieldLabelServerComponent = FieldLabelServerComponent< + BlocksField, + BlocksFieldClientWithoutType +> export type BlocksFieldLabelClientComponent = FieldLabelClientComponent -export type BlocksFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type BlocksFieldDescriptionServerComponent = FieldDescriptionServerComponent< + BlocksField, + BlocksFieldClientWithoutType +> export type BlocksFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type BlocksFieldErrorServerComponent = FieldErrorServerComponent +export type BlocksFieldErrorServerComponent = FieldErrorServerComponent< + BlocksField, + BlocksFieldClientWithoutType +> export type BlocksFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Checkbox.ts b/packages/payload/src/admin/fields/Checkbox.ts index 6782e4d9cd..251a5034ad 100644 --- a/packages/payload/src/admin/fields/Checkbox.ts +++ b/packages/payload/src/admin/fields/Checkbox.ts @@ -30,26 +30,41 @@ type CheckboxFieldBaseClientProps = { export type CheckboxFieldClientProps = CheckboxFieldBaseClientProps & ClientFieldBase -export type CheckboxFieldServerProps = ServerFieldBase +export type CheckboxFieldServerProps = ServerFieldBase< + CheckboxField, + CheckboxFieldClientWithoutType +> -export type CheckboxFieldServerComponent = FieldServerComponent +export type CheckboxFieldServerComponent = FieldServerComponent< + CheckboxField, + CheckboxFieldClientWithoutType +> export type CheckboxFieldClientComponent = FieldClientComponent< CheckboxFieldClientWithoutType, CheckboxFieldBaseClientProps > -export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent +export type CheckboxFieldLabelServerComponent = FieldLabelServerComponent< + CheckboxField, + CheckboxFieldClientWithoutType +> export type CheckboxFieldLabelClientComponent = FieldLabelClientComponent -export type CheckboxFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type CheckboxFieldDescriptionServerComponent = FieldDescriptionServerComponent< + CheckboxField, + CheckboxFieldClientWithoutType +> export type CheckboxFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type CheckboxFieldErrorServerComponent = FieldErrorServerComponent +export type CheckboxFieldErrorServerComponent = FieldErrorServerComponent< + CheckboxField, + CheckboxFieldClientWithoutType +> export type CheckboxFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Code.ts b/packages/payload/src/admin/fields/Code.ts index 9318f03be8..8dd57ea3ae 100644 --- a/packages/payload/src/admin/fields/Code.ts +++ b/packages/payload/src/admin/fields/Code.ts @@ -26,24 +26,33 @@ type CodeFieldBaseClientProps = { export type CodeFieldClientProps = ClientFieldBase & CodeFieldBaseClientProps -export type CodeFieldServerProps = ServerFieldBase +export type CodeFieldServerProps = ServerFieldBase -export type CodeFieldServerComponent = FieldServerComponent +export type CodeFieldServerComponent = FieldServerComponent export type CodeFieldClientComponent = FieldClientComponent< CodeFieldClientWithoutType, CodeFieldBaseClientProps > -export type CodeFieldLabelServerComponent = FieldLabelServerComponent +export type CodeFieldLabelServerComponent = FieldLabelServerComponent< + CodeField, + CodeFieldClientWithoutType +> export type CodeFieldLabelClientComponent = FieldLabelClientComponent -export type CodeFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type CodeFieldDescriptionServerComponent = FieldDescriptionServerComponent< + CodeField, + CodeFieldClientWithoutType +> export type CodeFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type CodeFieldErrorServerComponent = FieldErrorServerComponent +export type CodeFieldErrorServerComponent = FieldErrorServerComponent< + CodeField, + CodeFieldClientWithoutType +> export type CodeFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Collapsible.ts b/packages/payload/src/admin/fields/Collapsible.ts index 0f7b2eb6fa..24fe85bfda 100644 --- a/packages/payload/src/admin/fields/Collapsible.ts +++ b/packages/payload/src/admin/fields/Collapsible.ts @@ -19,25 +19,39 @@ type CollapsibleFieldClientWithoutType = MarkOptional -export type CollapsibleFieldServerProps = ServerFieldBase +export type CollapsibleFieldServerProps = ServerFieldBase< + CollapsibleField, + CollapsibleFieldClientWithoutType +> -export type CollapsibleFieldServerComponent = FieldServerComponent +export type CollapsibleFieldServerComponent = FieldServerComponent< + CollapsibleField, + CollapsibleFieldClientWithoutType +> export type CollapsibleFieldClientComponent = FieldClientComponent -export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent +export type CollapsibleFieldLabelServerComponent = FieldLabelServerComponent< + CollapsibleField, + CollapsibleFieldClientWithoutType +> export type CollapsibleFieldLabelClientComponent = FieldLabelClientComponent -export type CollapsibleFieldDescriptionServerComponent = - FieldDescriptionServerComponent +export type CollapsibleFieldDescriptionServerComponent = FieldDescriptionServerComponent< + CollapsibleField, + CollapsibleFieldClientWithoutType +> export type CollapsibleFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent +export type CollapsibleFieldErrorServerComponent = FieldErrorServerComponent< + CollapsibleField, + CollapsibleFieldClientWithoutType +> export type CollapsibleFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Date.ts b/packages/payload/src/admin/fields/Date.ts index cb4d366481..80b04104d7 100644 --- a/packages/payload/src/admin/fields/Date.ts +++ b/packages/payload/src/admin/fields/Date.ts @@ -25,24 +25,33 @@ type DateFieldBaseClientProps = { export type DateFieldClientProps = ClientFieldBase & DateFieldBaseClientProps -export type DateFieldServerProps = ServerFieldBase +export type DateFieldServerProps = ServerFieldBase -export type DateFieldServerComponent = FieldServerComponent +export type DateFieldServerComponent = FieldServerComponent export type DateFieldClientComponent = FieldClientComponent< DateFieldClientWithoutType, DateFieldBaseClientProps > -export type DateFieldLabelServerComponent = FieldLabelServerComponent +export type DateFieldLabelServerComponent = FieldLabelServerComponent< + DateField, + DateFieldClientWithoutType +> export type DateFieldLabelClientComponent = FieldLabelClientComponent -export type DateFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type DateFieldDescriptionServerComponent = FieldDescriptionServerComponent< + DateField, + DateFieldClientWithoutType +> export type DateFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type DateFieldErrorServerComponent = FieldErrorServerComponent +export type DateFieldErrorServerComponent = FieldErrorServerComponent< + DateField, + DateFieldClientWithoutType +> export type DateFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Email.ts b/packages/payload/src/admin/fields/Email.ts index e1e37212ba..747e2a4154 100644 --- a/packages/payload/src/admin/fields/Email.ts +++ b/packages/payload/src/admin/fields/Email.ts @@ -26,24 +26,36 @@ type EmailFieldBaseClientProps = { export type EmailFieldClientProps = ClientFieldBase & EmailFieldBaseClientProps -export type EmailFieldServerProps = ServerFieldBase +export type EmailFieldServerProps = ServerFieldBase -export type EmailFieldServerComponent = FieldServerComponent +export type EmailFieldServerComponent = FieldServerComponent< + EmailField, + EmailFieldClientWithoutType +> export type EmailFieldClientComponent = FieldClientComponent< EmailFieldClientWithoutType, EmailFieldBaseClientProps > -export type EmailFieldLabelServerComponent = FieldLabelServerComponent +export type EmailFieldLabelServerComponent = FieldLabelServerComponent< + EmailField, + EmailFieldClientWithoutType +> export type EmailFieldLabelClientComponent = FieldLabelClientComponent -export type EmailFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type EmailFieldDescriptionServerComponent = FieldDescriptionServerComponent< + EmailField, + EmailFieldClientWithoutType +> export type EmailFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type EmailFieldErrorServerComponent = FieldErrorServerComponent +export type EmailFieldErrorServerComponent = FieldErrorServerComponent< + EmailField, + EmailFieldClientWithoutType +> export type EmailFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Group.ts b/packages/payload/src/admin/fields/Group.ts index b862137d53..8e0f253fe1 100644 --- a/packages/payload/src/admin/fields/Group.ts +++ b/packages/payload/src/admin/fields/Group.ts @@ -19,21 +19,33 @@ type GroupFieldClientWithoutType = MarkOptional export type GroupFieldClientProps = ClientFieldBase -export type GroupFieldServerProps = ServerFieldBase +export type GroupFieldServerProps = ServerFieldBase -export type GroupFieldServerComponent = FieldServerComponent +export type GroupFieldServerComponent = FieldServerComponent< + GroupField, + GroupFieldClientWithoutType +> export type GroupFieldClientComponent = FieldClientComponent -export type GroupFieldLabelServerComponent = FieldLabelServerComponent +export type GroupFieldLabelServerComponent = FieldLabelServerComponent< + GroupField, + GroupFieldClientWithoutType +> export type GroupFieldLabelClientComponent = FieldLabelClientComponent -export type GroupFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type GroupFieldDescriptionServerComponent = FieldDescriptionServerComponent< + GroupField, + GroupFieldClientWithoutType +> export type GroupFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type GroupFieldErrorServerComponent = FieldErrorServerComponent +export type GroupFieldErrorServerComponent = FieldErrorServerComponent< + GroupField, + GroupFieldClientWithoutType +> export type GroupFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/JSON.ts b/packages/payload/src/admin/fields/JSON.ts index 00d8dab99d..00b1f50d46 100644 --- a/packages/payload/src/admin/fields/JSON.ts +++ b/packages/payload/src/admin/fields/JSON.ts @@ -25,24 +25,33 @@ type JSONFieldBaseClientProps = { export type JSONFieldClientProps = ClientFieldBase & JSONFieldBaseClientProps -export type JSONFieldServerProps = ServerFieldBase +export type JSONFieldServerProps = ServerFieldBase -export type JSONFieldServerComponent = FieldServerComponent +export type JSONFieldServerComponent = FieldServerComponent export type JSONFieldClientComponent = FieldClientComponent< JSONFieldClientWithoutType, JSONFieldBaseClientProps > -export type JSONFieldLabelServerComponent = FieldLabelServerComponent +export type JSONFieldLabelServerComponent = FieldLabelServerComponent< + JSONField, + JSONFieldClientWithoutType +> export type JSONFieldLabelClientComponent = FieldLabelClientComponent -export type JSONFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type JSONFieldDescriptionServerComponent = FieldDescriptionServerComponent< + JSONField, + JSONFieldClientWithoutType +> export type JSONFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type JSONFieldErrorServerComponent = FieldErrorServerComponent +export type JSONFieldErrorServerComponent = FieldErrorServerComponent< + JSONField, + JSONFieldClientWithoutType +> export type JSONFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Number.ts b/packages/payload/src/admin/fields/Number.ts index 04f6fbf217..395b0ea1cf 100644 --- a/packages/payload/src/admin/fields/Number.ts +++ b/packages/payload/src/admin/fields/Number.ts @@ -26,26 +26,38 @@ type NumberFieldBaseClientProps = { export type NumberFieldClientProps = ClientFieldBase & NumberFieldBaseClientProps -export type NumberFieldServerProps = ServerFieldBase +export type NumberFieldServerProps = ServerFieldBase -export type NumberFieldServerComponent = FieldServerComponent +export type NumberFieldServerComponent = FieldServerComponent< + NumberField, + NumberFieldClientWithoutType +> export type NumberFieldClientComponent = FieldClientComponent< NumberFieldClientWithoutType, NumberFieldBaseClientProps > -export type NumberFieldLabelServerComponent = FieldLabelServerComponent +export type NumberFieldLabelServerComponent = FieldLabelServerComponent< + NumberField, + NumberFieldClientWithoutType +> export type NumberFieldLabelClientComponent = FieldLabelClientComponent -export type NumberFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type NumberFieldDescriptionServerComponent = FieldDescriptionServerComponent< + NumberField, + NumberFieldClientWithoutType +> export type NumberFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type NumberFieldErrorServerComponent = FieldErrorServerComponent +export type NumberFieldErrorServerComponent = FieldErrorServerComponent< + NumberField, + NumberFieldClientWithoutType +> export type NumberFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Point.ts b/packages/payload/src/admin/fields/Point.ts index 16869e4bc7..fd1f4ec448 100644 --- a/packages/payload/src/admin/fields/Point.ts +++ b/packages/payload/src/admin/fields/Point.ts @@ -25,24 +25,36 @@ type PointFieldBaseClientProps = { export type PointFieldClientProps = ClientFieldBase & PointFieldBaseClientProps -export type PointFieldServerProps = ServerFieldBase +export type PointFieldServerProps = ServerFieldBase -export type PointFieldServerComponent = FieldServerComponent +export type PointFieldServerComponent = FieldServerComponent< + PointField, + PointFieldClientWithoutType +> export type PointFieldClientComponent = FieldClientComponent< PointFieldClientWithoutType, PointFieldBaseClientProps > -export type PointFieldLabelServerComponent = FieldLabelServerComponent +export type PointFieldLabelServerComponent = FieldLabelServerComponent< + PointField, + PointFieldClientWithoutType +> export type PointFieldLabelClientComponent = FieldLabelClientComponent -export type PointFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type PointFieldDescriptionServerComponent = FieldDescriptionServerComponent< + PointField, + PointFieldClientWithoutType +> export type PointFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type PointFieldErrorServerComponent = FieldErrorServerComponent +export type PointFieldErrorServerComponent = FieldErrorServerComponent< + PointField, + PointFieldClientWithoutType +> export type PointFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Radio.ts b/packages/payload/src/admin/fields/Radio.ts index 881fe9206a..f866e68cdd 100644 --- a/packages/payload/src/admin/fields/Radio.ts +++ b/packages/payload/src/admin/fields/Radio.ts @@ -27,9 +27,12 @@ type RadioFieldBaseClientProps = { export type RadioFieldClientProps = ClientFieldBase & RadioFieldBaseClientProps -export type RadioFieldServerProps = ServerFieldBase +export type RadioFieldServerProps = ServerFieldBase -export type RadioFieldServerComponent = FieldServerComponent +export type RadioFieldServerComponent = FieldServerComponent< + RadioField, + RadioFieldClientWithoutType +> export type RadioFieldClientComponent = FieldClientComponent< RadioFieldClientWithoutType, @@ -38,15 +41,24 @@ export type RadioFieldClientComponent = FieldClientComponent< export type OnChange = (value: T) => void -export type RadioFieldLabelServerComponent = FieldLabelServerComponent +export type RadioFieldLabelServerComponent = FieldLabelServerComponent< + RadioField, + RadioFieldClientWithoutType +> export type RadioFieldLabelClientComponent = FieldLabelClientComponent -export type RadioFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type RadioFieldDescriptionServerComponent = FieldDescriptionServerComponent< + RadioField, + RadioFieldClientWithoutType +> export type RadioFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type RadioFieldErrorServerComponent = FieldErrorServerComponent +export type RadioFieldErrorServerComponent = FieldErrorServerComponent< + RadioField, + RadioFieldClientWithoutType +> export type RadioFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Relationship.ts b/packages/payload/src/admin/fields/Relationship.ts index d51691f68f..55f5d71176 100644 --- a/packages/payload/src/admin/fields/Relationship.ts +++ b/packages/payload/src/admin/fields/Relationship.ts @@ -25,27 +25,41 @@ type RelationshipFieldBaseClientProps = { export type RelationshipFieldClientProps = ClientFieldBase & RelationshipFieldBaseClientProps -export type RelationshipFieldServerProps = ServerFieldBase +export type RelationshipFieldServerProps = ServerFieldBase< + RelationshipField, + RelationshipFieldClientWithoutType +> -export type RelationshipFieldServerComponent = FieldServerComponent +export type RelationshipFieldServerComponent = FieldServerComponent< + RelationshipField, + RelationshipFieldClientWithoutType +> export type RelationshipFieldClientComponent = FieldClientComponent< RelationshipFieldClientWithoutType, RelationshipFieldBaseClientProps > -export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent +export type RelationshipFieldLabelServerComponent = FieldLabelServerComponent< + RelationshipField, + RelationshipFieldClientWithoutType +> export type RelationshipFieldLabelClientComponent = FieldLabelClientComponent -export type RelationshipFieldDescriptionServerComponent = - FieldDescriptionServerComponent +export type RelationshipFieldDescriptionServerComponent = FieldDescriptionServerComponent< + RelationshipField, + RelationshipFieldClientWithoutType +> export type RelationshipFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent +export type RelationshipFieldErrorServerComponent = FieldErrorServerComponent< + RelationshipField, + RelationshipFieldClientWithoutType +> export type RelationshipFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/RichText.ts b/packages/payload/src/admin/fields/RichText.ts index 45c166a7c2..1037910dbd 100644 --- a/packages/payload/src/admin/fields/RichText.ts +++ b/packages/payload/src/admin/fields/RichText.ts @@ -33,26 +33,41 @@ export type RichTextFieldClientProps< > = ClientFieldBase & RichTextFieldBaseClientProps -export type RichTextFieldServerProps = ServerFieldBase +export type RichTextFieldServerProps = ServerFieldBase< + RichTextField, + RichTextFieldClientWithoutType +> -export type RichTextFieldServerComponent = FieldServerComponent +export type RichTextFieldServerComponent = FieldServerComponent< + RichTextField, + RichTextFieldClientWithoutType +> export type RichTextFieldClientComponent = FieldClientComponent< RichTextFieldClientWithoutType, RichTextFieldBaseClientProps > -export type RichTextFieldLabelServerComponent = FieldLabelServerComponent +export type RichTextFieldLabelServerComponent = FieldLabelServerComponent< + RichTextField, + RichTextFieldClientWithoutType +> export type RichTextFieldLabelClientComponent = FieldLabelClientComponent -export type RichTextFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type RichTextFieldDescriptionServerComponent = FieldDescriptionServerComponent< + RichTextField, + RichTextFieldClientWithoutType +> export type RichTextFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type RichTextFieldErrorServerComponent = FieldErrorServerComponent +export type RichTextFieldErrorServerComponent = FieldErrorServerComponent< + RichTextField, + RichTextFieldClientWithoutType +> export type RichTextFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Row.ts b/packages/payload/src/admin/fields/Row.ts index a78224bdc2..78fd8edc9a 100644 --- a/packages/payload/src/admin/fields/Row.ts +++ b/packages/payload/src/admin/fields/Row.ts @@ -26,24 +26,33 @@ type RowFieldBaseClientProps = { export type RowFieldClientProps = ClientFieldBase & RowFieldBaseClientProps -export type RowFieldServerProps = ServerFieldBase +export type RowFieldServerProps = ServerFieldBase -export type RowFieldServerComponent = FieldServerComponent +export type RowFieldServerComponent = FieldServerComponent export type RowFieldClientComponent = FieldClientComponent< RowFieldClientWithoutType, RowFieldBaseClientProps > -export type RowFieldLabelServerComponent = FieldLabelServerComponent +export type RowFieldLabelServerComponent = FieldLabelServerComponent< + RowField, + RowFieldClientWithoutType +> export type RowFieldLabelClientComponent = FieldLabelClientComponent -export type RowFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type RowFieldDescriptionServerComponent = FieldDescriptionServerComponent< + RowField, + RowFieldClientWithoutType +> export type RowFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type RowFieldErrorServerComponent = FieldErrorServerComponent +export type RowFieldErrorServerComponent = FieldErrorServerComponent< + RowField, + RowFieldClientWithoutType +> export type RowFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Select.ts b/packages/payload/src/admin/fields/Select.ts index f5c57ba8f0..e8dbfeb5fe 100644 --- a/packages/payload/src/admin/fields/Select.ts +++ b/packages/payload/src/admin/fields/Select.ts @@ -27,26 +27,38 @@ type SelectFieldBaseClientProps = { export type SelectFieldClientProps = ClientFieldBase & SelectFieldBaseClientProps -export type SelectFieldServerProps = ServerFieldBase +export type SelectFieldServerProps = ServerFieldBase -export type SelectFieldServerComponent = FieldServerComponent +export type SelectFieldServerComponent = FieldServerComponent< + SelectField, + SelectFieldClientWithoutType +> export type SelectFieldClientComponent = FieldClientComponent< SelectFieldClientWithoutType, SelectFieldBaseClientProps > -export type SelectFieldLabelServerComponent = FieldLabelServerComponent +export type SelectFieldLabelServerComponent = FieldLabelServerComponent< + SelectField, + SelectFieldClientWithoutType +> export type SelectFieldLabelClientComponent = FieldLabelClientComponent -export type SelectFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type SelectFieldDescriptionServerComponent = FieldDescriptionServerComponent< + SelectField, + SelectFieldClientWithoutType +> export type SelectFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type SelectFieldErrorServerComponent = FieldErrorServerComponent +export type SelectFieldErrorServerComponent = FieldErrorServerComponent< + SelectField, + SelectFieldClientWithoutType +> export type SelectFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Tabs.ts b/packages/payload/src/admin/fields/Tabs.ts index 695b32efee..46400f5b22 100644 --- a/packages/payload/src/admin/fields/Tabs.ts +++ b/packages/payload/src/admin/fields/Tabs.ts @@ -29,21 +29,30 @@ type TabsFieldClientWithoutType = MarkOptional export type TabsFieldClientProps = ClientFieldBase -export type TabsFieldServerProps = ServerFieldBase +export type TabsFieldServerProps = ServerFieldBase -export type TabsFieldServerComponent = FieldServerComponent +export type TabsFieldServerComponent = FieldServerComponent export type TabsFieldClientComponent = FieldClientComponent -export type TabsFieldLabelServerComponent = FieldLabelServerComponent +export type TabsFieldLabelServerComponent = FieldLabelServerComponent< + TabsField, + TabsFieldClientWithoutType +> export type TabsFieldLabelClientComponent = FieldLabelClientComponent -export type TabsFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type TabsFieldDescriptionServerComponent = FieldDescriptionServerComponent< + TabsField, + TabsFieldClientWithoutType +> export type TabsFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type TabsFieldErrorServerComponent = FieldErrorServerComponent +export type TabsFieldErrorServerComponent = FieldErrorServerComponent< + TabsField, + TabsFieldClientWithoutType +> export type TabsFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Text.ts b/packages/payload/src/admin/fields/Text.ts index ac4ba61e48..8a8417b2bc 100644 --- a/packages/payload/src/admin/fields/Text.ts +++ b/packages/payload/src/admin/fields/Text.ts @@ -28,24 +28,33 @@ type TextFieldBaseClientProps = { export type TextFieldClientProps = ClientFieldBase & TextFieldBaseClientProps -export type TextFieldServerProps = ServerFieldBase +export type TextFieldServerProps = ServerFieldBase -export type TextFieldServerComponent = FieldServerComponent +export type TextFieldServerComponent = FieldServerComponent export type TextFieldClientComponent = FieldClientComponent< TextFieldClientWithoutType, TextFieldBaseClientProps > -export type TextFieldLabelServerComponent = FieldLabelServerComponent +export type TextFieldLabelServerComponent = FieldLabelServerComponent< + TextField, + TextFieldClientWithoutType +> export type TextFieldLabelClientComponent = FieldLabelClientComponent -export type TextFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type TextFieldDescriptionServerComponent = FieldDescriptionServerComponent< + TextField, + TextFieldClientWithoutType +> export type TextFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type TextFieldErrorServerComponent = FieldErrorServerComponent +export type TextFieldErrorServerComponent = FieldErrorServerComponent< + TextField, + TextFieldClientWithoutType +> export type TextFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Textarea.ts b/packages/payload/src/admin/fields/Textarea.ts index c321fd6e12..a6da6deb8e 100644 --- a/packages/payload/src/admin/fields/Textarea.ts +++ b/packages/payload/src/admin/fields/Textarea.ts @@ -28,26 +28,41 @@ type TextareaFieldBaseClientProps = { export type TextareaFieldClientProps = ClientFieldBase & TextareaFieldBaseClientProps -export type TextareaFieldServerProps = ServerFieldBase +export type TextareaFieldServerProps = ServerFieldBase< + TextareaField, + TextareaFieldClientWithoutType +> -export type TextareaFieldServerComponent = FieldServerComponent +export type TextareaFieldServerComponent = FieldServerComponent< + TextareaField, + TextareaFieldClientWithoutType +> export type TextareaFieldClientComponent = FieldClientComponent< TextareaFieldClientWithoutType, TextareaFieldBaseClientProps > -export type TextareaFieldLabelServerComponent = FieldLabelServerComponent +export type TextareaFieldLabelServerComponent = FieldLabelServerComponent< + TextareaField, + TextareaFieldClientWithoutType +> export type TextareaFieldLabelClientComponent = FieldLabelClientComponent -export type TextareaFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type TextareaFieldDescriptionServerComponent = FieldDescriptionServerComponent< + TextareaField, + TextareaFieldClientWithoutType +> export type TextareaFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type TextareaFieldErrorServerComponent = FieldErrorServerComponent +export type TextareaFieldErrorServerComponent = FieldErrorServerComponent< + TextareaField, + TextareaFieldClientWithoutType +> export type TextareaFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/fields/Upload.ts b/packages/payload/src/admin/fields/Upload.ts index 681a7616d1..fecc3ef887 100644 --- a/packages/payload/src/admin/fields/Upload.ts +++ b/packages/payload/src/admin/fields/Upload.ts @@ -25,26 +25,38 @@ type UploadFieldBaseClientProps = { export type UploadFieldClientProps = ClientFieldBase & UploadFieldBaseClientProps -export type UploadFieldServerProps = ServerFieldBase +export type UploadFieldServerProps = ServerFieldBase -export type UploadFieldServerComponent = FieldServerComponent +export type UploadFieldServerComponent = FieldServerComponent< + UploadField, + UploadFieldClientWithoutType +> export type UploadFieldClientComponent = FieldClientComponent< UploadFieldClientWithoutType, UploadFieldBaseClientProps > -export type UploadFieldLabelServerComponent = FieldLabelServerComponent +export type UploadFieldLabelServerComponent = FieldLabelServerComponent< + UploadField, + UploadFieldClientWithoutType +> export type UploadFieldLabelClientComponent = FieldLabelClientComponent -export type UploadFieldDescriptionServerComponent = FieldDescriptionServerComponent +export type UploadFieldDescriptionServerComponent = FieldDescriptionServerComponent< + UploadField, + UploadFieldClientWithoutType +> export type UploadFieldDescriptionClientComponent = FieldDescriptionClientComponent -export type UploadFieldErrorServerComponent = FieldErrorServerComponent +export type UploadFieldErrorServerComponent = FieldErrorServerComponent< + UploadField, + UploadFieldClientWithoutType +> export type UploadFieldErrorClientComponent = FieldErrorClientComponent diff --git a/packages/payload/src/admin/forms/Description.ts b/packages/payload/src/admin/forms/Description.ts index 59605c2002..34b9e495ed 100644 --- a/packages/payload/src/admin/forms/Description.ts +++ b/packages/payload/src/admin/forms/Description.ts @@ -9,8 +9,10 @@ export type FieldDescriptionClientComponent< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = React.ComponentType> -export type FieldDescriptionServerComponent = - React.ComponentType> +export type FieldDescriptionServerComponent< + TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = React.ComponentType> export type StaticDescription = Record | string @@ -23,8 +25,12 @@ export type GenericDescriptionProps = { readonly marginPlacement?: 'bottom' | 'top' } -export type FieldDescriptionServerProps = { - field: TFieldServer +export type FieldDescriptionServerProps< + TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = { + clientField?: TFieldClient + readonly field: TFieldServer } & GenericDescriptionProps & Partial diff --git a/packages/payload/src/admin/forms/Error.ts b/packages/payload/src/admin/forms/Error.ts index 565c69af4e..aae99e4310 100644 --- a/packages/payload/src/admin/forms/Error.ts +++ b/packages/payload/src/admin/forms/Error.ts @@ -17,8 +17,12 @@ export type FieldErrorClientProps< field: TFieldClient } & GenericErrorProps -export type FieldErrorServerProps = { - field: TFieldServer +export type FieldErrorServerProps< + TFieldServer extends Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = { + clientField?: TFieldClient + readonly field: TFieldServer } & GenericErrorProps & Partial @@ -26,6 +30,7 @@ export type FieldErrorClientComponent< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = React.ComponentType> -export type FieldErrorServerComponent = React.ComponentType< - FieldErrorServerProps -> +export type FieldErrorServerComponent< + TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = React.ComponentType> diff --git a/packages/payload/src/admin/forms/Field.ts b/packages/payload/src/admin/forms/Field.ts index 2dbf76a369..788a590dde 100644 --- a/packages/payload/src/admin/forms/Field.ts +++ b/packages/payload/src/admin/forms/Field.ts @@ -19,11 +19,15 @@ export type ClientFieldBase< readonly labelProps?: FieldLabelClientProps } & FormFieldBase -export type ServerFieldBase = { - readonly descriptionProps?: FieldDescriptionServerProps - readonly errorProps?: FieldErrorServerProps +export type ServerFieldBase< + TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = { + readonly clientField: TFieldClient + readonly descriptionProps?: FieldDescriptionServerProps + readonly errorProps?: FieldErrorServerProps readonly field: TFieldServer - readonly labelProps?: FieldLabelServerProps + readonly labelProps?: FieldLabelServerProps } & FormFieldBase & Partial @@ -49,5 +53,6 @@ export type FieldClientComponent< export type FieldServerComponent< TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, AdditionalProps extends Record = Record, -> = React.ComponentType> +> = React.ComponentType> diff --git a/packages/payload/src/admin/forms/Label.ts b/packages/payload/src/admin/forms/Label.ts index 844161cc78..fd51333c25 100644 --- a/packages/payload/src/admin/forms/Label.ts +++ b/packages/payload/src/admin/forms/Label.ts @@ -18,8 +18,12 @@ export type FieldLabelClientProps< field: TFieldClient } & GenericLabelProps -export type FieldLabelServerProps = { - field: TFieldServer +export type FieldLabelServerProps< + TFieldServer extends Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = { + clientField?: TFieldClient + readonly field: TFieldServer } & GenericLabelProps & Partial @@ -32,6 +36,7 @@ export type FieldLabelClientComponent< TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, > = React.ComponentType> -export type FieldLabelServerComponent = React.ComponentType< - FieldLabelServerProps -> +export type FieldLabelServerComponent< + TFieldServer extends Field = Field, + TFieldClient extends ClientFieldWithOptionalType = ClientFieldWithOptionalType, +> = React.ComponentType> diff --git a/packages/payload/src/admin/types.ts b/packages/payload/src/admin/types.ts index 0bf7e9d10a..60b8080cd3 100644 --- a/packages/payload/src/admin/types.ts +++ b/packages/payload/src/admin/types.ts @@ -305,7 +305,7 @@ export type { GenericErrorProps, } from './forms/Error.js' -export type { FormFieldBase } from './forms/Field.js' +export type { FormFieldBase, ServerFieldBase } from './forms/Field.js' export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js' diff --git a/packages/payload/src/fields/config/types.ts b/packages/payload/src/fields/config/types.ts index b14382d14f..3d627db4f9 100644 --- a/packages/payload/src/fields/config/types.ts +++ b/packages/payload/src/fields/config/types.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { EditorProps } from '@monaco-editor/react' +import type { I18nClient } from '@payloadcms/translations' import type { JSONSchema4 } from 'json-schema' import type { CSSProperties } from 'react' import type { DeepUndefinable } from 'ts-essentials' @@ -31,6 +32,7 @@ import type { CollapsibleFieldLabelClientComponent, CollapsibleFieldLabelServerComponent, ConditionalDateProps, + CreateMappedComponent, DateFieldClientProps, DateFieldErrorClientComponent, DateFieldErrorServerComponent, @@ -104,9 +106,15 @@ import type { } from '../../config/types.js' import type { DBIdentifierName } from '../../database/types.js' import type { SanitizedGlobalConfig } from '../../globals/config/types.js' -import type { CollectionSlug } from '../../index.js' +import type { CollectionSlug, ImportMap } from '../../index.js' import type { DocumentPreferences } from '../../preferences/types.js' -import type { Operation, PayloadRequest, RequestContext, Where } from '../../types/index.js' +import type { + Operation, + Payload, + PayloadRequest, + RequestContext, + Where, +} from '../../types/index.js' export type FieldHookArgs = { /** The collection which the field belongs to. If the field belongs to a global, this will be null. */ diff --git a/packages/ui/src/fields/Password/types.ts b/packages/ui/src/fields/Password/types.ts index 9e98c9f9ef..784ae8c1ba 100644 --- a/packages/ui/src/fields/Password/types.ts +++ b/packages/ui/src/fields/Password/types.ts @@ -9,7 +9,7 @@ import type { StaticDescription, TextFieldClient, } from 'payload' -import type { CSSProperties, ChangeEvent } from 'react' +import type { ChangeEvent, CSSProperties } from 'react' import type React from 'react' import type { MarkOptional } from 'ts-essentials' diff --git a/packages/ui/src/providers/Config/createClientConfig/fields.tsx b/packages/ui/src/providers/Config/createClientConfig/fields.tsx index eee628989f..52318ab617 100644 --- a/packages/ui/src/providers/Config/createClientConfig/fields.tsx +++ b/packages/ui/src/providers/Config/createClientConfig/fields.tsx @@ -19,6 +19,7 @@ import type { RowFieldClient, RowLabelComponent, SelectFieldClient, + ServerFieldBase, ServerOnlyFieldAdminProperties, ServerOnlyFieldProperties, TabsFieldClient, @@ -113,7 +114,14 @@ export const createClientField = ({ 'Label' in incomingField.admin.components && incomingField.admin.components.Label - const serverProps = { serverProps: { field: incomingField } } + const serverProps: { + serverProps: ServerFieldBase + } = { + serverProps: { + clientField: undefined, + field: incomingField, + }, + } if ('admin' in incomingField && 'width' in incomingField.admin) { clientField.admin.style = { @@ -352,6 +360,15 @@ export const createClientField = ({ } }) + const fieldServerProps: { + serverProps: ServerFieldBase + } = { + serverProps: { + clientField, + field: incomingField, + }, + } + type FieldWithDescription = { admin: AdminClient } & ClientField @@ -372,7 +389,7 @@ export const createClientField = ({ if (incomingField?.admin?.components?.Cell !== undefined) { clientField.admin.components.Cell = createMappedComponent( incomingField.admin.components.Cell, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Cell', ) @@ -390,7 +407,7 @@ export const createClientField = ({ ;(clientField as FieldWithDescriptionComponent).admin.components.Description = createMappedComponent( incomingField.admin.components.Description, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Description', ) @@ -410,7 +427,7 @@ export const createClientField = ({ ) { ;(clientField as FieldWithErrorComponent).admin.components.Error = createMappedComponent( incomingField.admin.components.Error, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Error', ) @@ -419,7 +436,7 @@ export const createClientField = ({ if (incomingField?.admin?.components?.Field !== undefined) { clientField.admin.components.Field = createMappedComponent( incomingField.admin.components.Field, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Field', ) @@ -432,7 +449,7 @@ export const createClientField = ({ ) { clientField.admin.components.Filter = createMappedComponent( incomingField.admin.components.Filter, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Filter', ) @@ -452,7 +469,7 @@ export const createClientField = ({ ) { ;(clientField as FieldWithLabelComponent).admin.components.Label = createMappedComponent( CustomLabel, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.Label', ) @@ -473,7 +490,7 @@ export const createClientField = ({ ;(clientField as FieldWithBeforeInputComponent).admin.components.beforeInput = createMappedComponent( incomingField.admin?.components?.beforeInput, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.beforeInput', ) @@ -494,7 +511,7 @@ export const createClientField = ({ ;(clientField as FieldWithAfterInputComponent).admin.components.afterInput = createMappedComponent( incomingField.admin?.components?.afterInput, - serverProps, + fieldServerProps, undefined, 'incomingField.admin.components.afterInput', ) diff --git a/test/_community/collections/Posts/MyClientComponent.tsx b/test/_community/collections/Posts/MyClientComponent.tsx deleted file mode 100644 index ff90bb2f27..0000000000 --- a/test/_community/collections/Posts/MyClientComponent.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client' -import type { TextFieldLabelClientComponent } from 'payload' - -import React from 'react' - -export const MyClientComponent: TextFieldLabelClientComponent = (props) => { - const { field } = props - return

{`The name of this field is: ${field.name}`}

-} diff --git a/test/_community/collections/Posts/MyClientField.tsx b/test/_community/collections/Posts/MyClientField.tsx new file mode 100644 index 0000000000..7cfef7689e --- /dev/null +++ b/test/_community/collections/Posts/MyClientField.tsx @@ -0,0 +1,9 @@ +'use client' +import type { TextFieldClientComponent } from 'payload' + +import { TextField } from '@payloadcms/ui' +import React from 'react' + +export const MyClientFieldComponent: TextFieldClientComponent = ({ field }) => { + return +} diff --git a/test/_community/collections/Posts/MyServerComponent.tsx b/test/_community/collections/Posts/MyServerComponent.tsx deleted file mode 100644 index 4a47c37755..0000000000 --- a/test/_community/collections/Posts/MyServerComponent.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { TextFieldLabelServerComponent } from 'payload' - -import React from 'react' - -export const MyServerComponent: TextFieldLabelServerComponent = (props) => { - const { field } = props - - return ( -
-

{`The name of this field is: ${field.name}`}

-
- ) -} diff --git a/test/_community/collections/Posts/MyServerField.tsx b/test/_community/collections/Posts/MyServerField.tsx new file mode 100644 index 0000000000..e8deda34a2 --- /dev/null +++ b/test/_community/collections/Posts/MyServerField.tsx @@ -0,0 +1,8 @@ +import type { TextFieldServerComponent } from 'payload' + +import { TextField } from '@payloadcms/ui' +import React from 'react' + +export const MyServerFieldComponent: TextFieldServerComponent = ({ clientField }) => { + return +} diff --git a/test/_community/collections/Posts/index.ts b/test/_community/collections/Posts/index.ts index 62464553d9..82ddfb7c5c 100644 --- a/test/_community/collections/Posts/index.ts +++ b/test/_community/collections/Posts/index.ts @@ -11,7 +11,7 @@ export const PostsCollection: CollectionConfig = { { admin: { components: { - Label: '/collections/Posts/MyClientComponent.js#MyClientComponent', + Field: '/collections/Posts/MyClientField.js#MyClientFieldComponent', }, }, name: 'text', @@ -21,7 +21,7 @@ export const PostsCollection: CollectionConfig = { { admin: { components: { - Label: '/collections/Posts/MyServerComponent.js#MyServerComponent', + Field: '/collections/Posts/MyServerField.js#MyServerFieldComponent', }, }, name: 'serverTextField', diff --git a/test/databaseAdapter.ts b/test/databaseAdapter.ts index f4910a3dc7..a36c0d0c13 100644 --- a/test/databaseAdapter.ts +++ b/test/databaseAdapter.ts @@ -1,13 +1,16 @@ -// DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts -import { mongooseAdapter } from '@payloadcms/db-mongodb' + // DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts -export const databaseAdapter = mongooseAdapter({ - url: - process.env.MONGODB_MEMORY_SERVER_URI || - process.env.DATABASE_URI || - 'mongodb://127.0.0.1/payloadtests', - collation: { - strength: 1, - }, -}) + + import { mongooseAdapter } from '@payloadcms/db-mongodb' + + export const databaseAdapter = mongooseAdapter({ + url: + process.env.MONGODB_MEMORY_SERVER_URI || + process.env.DATABASE_URI || + 'mongodb://127.0.0.1/payloadtests', + collation: { + strength: 1, + }, + }) + \ No newline at end of file diff --git a/test/helpers.ts b/test/helpers.ts index 90028d990d..ae5e630823 100644 --- a/test/helpers.ts +++ b/test/helpers.ts @@ -198,7 +198,7 @@ export async function openNav(page: Page): Promise { // check to see if the nav is already open and if not, open it // use the `--nav-open` modifier class to check if the nav is open // this will prevent clicking nav links that are bleeding off the screen - if (await page.locator('.template-default.template-default--nav-open').isVisible()) return + if (await page.locator('.template-default.template-default--nav-open').isVisible()) {return} // playwright: get first element with .nav-toggler which is VISIBLE (not hidden), could be 2 elements with .nav-toggler on mobile and desktop but only one is visible await page.locator('.nav-toggler >> visible=true').click() await expect(page.locator('.template-default.template-default--nav-open')).toBeVisible() @@ -221,7 +221,7 @@ export async function openCreateDocDrawer(page: Page, fieldSelector: string): Pr } export async function closeNav(page: Page): Promise { - if (!(await page.locator('.template-default.template-default--nav-open').isVisible())) return + if (!(await page.locator('.template-default.template-default--nav-open').isVisible())) {return} await page.locator('.nav-toggler >> visible=true').click() await expect(page.locator('.template-default.template-default--nav-open')).toBeHidden() } diff --git a/test/helpers/e2e/openDocControls.ts b/test/helpers/e2e/openDocControls.ts index 0485f3e554..984dfd67df 100644 --- a/test/helpers/e2e/openDocControls.ts +++ b/test/helpers/e2e/openDocControls.ts @@ -1,4 +1,4 @@ -import { type Locator, type Page, expect } from '@playwright/test' +import { expect, type Locator, type Page } from '@playwright/test' export async function openDocControls(page: Locator | Page): Promise { await page.locator('.doc-controls__popup >> .popup-button').click() diff --git a/test/localization/e2e.spec.ts b/test/localization/e2e.spec.ts index bfae4c92d0..7c4e81eae3 100644 --- a/test/localization/e2e.spec.ts +++ b/test/localization/e2e.spec.ts @@ -256,6 +256,6 @@ describe('Localization', () => { async function fillValues(data: Partial) { const { description: descVal, title: titleVal } = data - if (titleVal) await page.locator('#field-title').fill(titleVal) - if (descVal) await page.locator('#field-description').fill(descVal) + if (titleVal) {await page.locator('#field-title').fill(titleVal)} + if (descVal) {await page.locator('#field-description').fill(descVal)} }