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)} }