From e72dfe5af2d387d9d421ac2cb6c07effe5d0be0e Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 20 Mar 2024 10:02:47 -0400 Subject: [PATCH 1/6] chore(ui): excludes preferences and migrations collections from component map --- .../src/providers/ComponentMap/buildComponentMap/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx index 5fb7a087cc..18ce8729df 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx @@ -31,6 +31,12 @@ export const buildComponentMap = (args: { const collections = config.collections.reduce((acc, collectionConfig) => { const { slug, fields } = collectionConfig + const internalCollections = ['payload-preferences', 'payload-migrations'] + + if (internalCollections.includes(slug)) { + return acc + } + const editViewFromConfig = collectionConfig?.admin?.components?.views?.Edit const listViewFromConfig = collectionConfig?.admin?.components?.views?.List From b946f7e697b75299f1cc6ea37a9679ef199c3e48 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 20 Mar 2024 12:51:00 -0400 Subject: [PATCH 2/6] chore(ui): client-side renders all default cells --- packages/next/src/layouts/Root/index.tsx | 2 - .../next/src/views/List/Default/index.tsx | 3 +- .../Table/DefaultCell}/fields/Array/index.tsx | 0 .../DefaultCell}/fields/Blocks/index.tsx | 0 .../DefaultCell}/fields/Checkbox/index.scss | 2 +- .../DefaultCell}/fields/Checkbox/index.tsx | 0 .../Table/DefaultCell}/fields/Code/index.scss | 2 +- .../Table/DefaultCell}/fields/Code/index.tsx | 0 .../Table/DefaultCell}/fields/Date/index.tsx | 0 .../Table/DefaultCell}/fields/File/index.scss | 2 +- .../Table/DefaultCell}/fields/File/index.tsx | 0 .../Table/DefaultCell}/fields/JSON/index.scss | 2 +- .../Table/DefaultCell}/fields/JSON/index.tsx | 0 .../fields/Relationship/index.scss | 0 .../fields/Relationship/index.tsx | 0 .../DefaultCell}/fields/Select/index.tsx | 0 .../DefaultCell}/fields/Textarea/index.tsx | 0 .../Table/DefaultCell}/fields/index.tsx | 2 +- .../src/elements/Table/DefaultCell}/index.tsx | 2 +- .../Table}/RelationshipProvider/index.tsx | 0 .../Table}/RelationshipProvider/reducer.ts | 0 packages/ui/src/elements/Table/index.tsx | 3 ++ .../elements/TableColumns/buildColumns.tsx | 10 +++- packages/ui/src/exports/elements.ts | 54 +++++++++++++++++++ .../ComponentMap/buildComponentMap/index.tsx | 12 +---- .../buildComponentMap/mapFields.tsx | 22 +++----- .../ComponentMap/buildComponentMap/types.ts | 4 +- tsconfig.json | 2 +- 28 files changed, 86 insertions(+), 38 deletions(-) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Array/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Blocks/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Checkbox/index.scss (90%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Checkbox/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Code/index.scss (91%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Code/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Date/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/File/index.scss (87%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/File/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/JSON/index.scss (90%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/JSON/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Relationship/index.scss (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Relationship/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Select/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/Textarea/index.tsx (100%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/fields/index.tsx (95%) rename packages/{next/src/views/List/Default/Cell => ui/src/elements/Table/DefaultCell}/index.tsx (98%) rename packages/{next/src/views/List/Default => ui/src/elements/Table}/RelationshipProvider/index.tsx (100%) rename packages/{next/src/views/List/Default => ui/src/elements/Table}/RelationshipProvider/reducer.ts (100%) create mode 100644 packages/ui/src/exports/elements.ts diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index 257bbe70fd..692c39bb92 100644 --- a/packages/next/src/layouts/Root/index.tsx +++ b/packages/next/src/layouts/Root/index.tsx @@ -13,7 +13,6 @@ import 'react-toastify/dist/ReactToastify.css' import { getRequestLanguage } from '../../utilities/getRequestLanguage.js' import { DefaultEditView } from '../../views/Edit/Default/index.js' -import { DefaultCell } from '../../views/List/Default/Cell/index.js' import { DefaultListView } from '../../views/List/Default/index.js' export const metadata = { @@ -63,7 +62,6 @@ export const RootLayout = async ({ } const { componentMap, wrappedChildren } = buildComponentMap({ - DefaultCell, DefaultEditView, DefaultListView, children, diff --git a/packages/next/src/views/List/Default/index.tsx b/packages/next/src/views/List/Default/index.tsx index 10e315272c..53e1c0e511 100644 --- a/packages/next/src/views/List/Default/index.tsx +++ b/packages/next/src/views/List/Default/index.tsx @@ -16,6 +16,7 @@ import { PublishMany } from '@payloadcms/ui/elements/PublishMany' import { StaggeredShimmers } from '@payloadcms/ui/elements/ShimmerEffect' import { useStepNav } from '@payloadcms/ui/elements/StepNav' import { Table } from '@payloadcms/ui/elements/Table' +import { RelationshipProvider } from '@payloadcms/ui/elements/Table/RelationshipProvider' import { UnpublishMany } from '@payloadcms/ui/elements/UnpublishMany' import { useWindowInfo } from '@payloadcms/ui/elements/WindowInfo' import { SetViewActions } from '@payloadcms/ui/providers/Actions' @@ -28,7 +29,6 @@ import LinkImport from 'next/link.js' import { formatFilesize } from 'payload/utilities' import React, { Fragment, useEffect } from 'react' -import { RelationshipProvider } from './RelationshipProvider/index.js' import './index.scss' const baseClass = 'collection-list' @@ -142,6 +142,7 @@ export const DefaultListView: React.FC = () => { uploadConfig: collectionConfig.upload, }} data={docs} + fieldMap={fieldMap} /> )} diff --git a/packages/next/src/views/List/Default/Cell/fields/Array/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Array/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Array/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Array/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Blocks/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Blocks/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Blocks/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Blocks/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Checkbox/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss similarity index 90% rename from packages/next/src/views/List/Default/Cell/fields/Checkbox/index.scss rename to packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss index 975d18fc24..eabbcee2b3 100644 --- a/packages/next/src/views/List/Default/Cell/fields/Checkbox/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.scss @@ -1,4 +1,4 @@ -@import '../../../../../../scss/styles.scss'; +@import '../../../../../scss/styles.scss'; .bool-cell { font-size: 1rem; diff --git a/packages/next/src/views/List/Default/Cell/fields/Checkbox/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Checkbox/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Code/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss similarity index 91% rename from packages/next/src/views/List/Default/Cell/fields/Code/index.scss rename to packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss index 759a9ad406..c454a76bba 100644 --- a/packages/next/src/views/List/Default/Cell/fields/Code/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.scss @@ -1,4 +1,4 @@ -@import '../../../../../../scss/styles.scss'; +@import '../../../../../scss/styles.scss'; .code-cell { font-size: 1rem; diff --git a/packages/next/src/views/List/Default/Cell/fields/Code/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Code/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Code/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Code/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Date/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Date/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/File/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss similarity index 87% rename from packages/next/src/views/List/Default/Cell/fields/File/index.scss rename to packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss index 262d08cbe6..14ea81fac2 100644 --- a/packages/next/src/views/List/Default/Cell/fields/File/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.scss @@ -1,4 +1,4 @@ -@import '../../../../../../scss/styles.scss'; +@import '../../../../../scss/styles.scss'; .file { display: flex; diff --git a/packages/next/src/views/List/Default/Cell/fields/File/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/File/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/JSON/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss similarity index 90% rename from packages/next/src/views/List/Default/Cell/fields/JSON/index.scss rename to packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss index f1d9b69af3..4ea001918c 100644 --- a/packages/next/src/views/List/Default/Cell/fields/JSON/index.scss +++ b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.scss @@ -1,4 +1,4 @@ -@import '../../../../../../scss/styles.scss'; +@import '../../../../../scss/styles.scss'; .json-cell { font-size: 1rem; diff --git a/packages/next/src/views/List/Default/Cell/fields/JSON/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/JSON/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Relationship/index.scss b/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.scss similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Relationship/index.scss rename to packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.scss diff --git a/packages/next/src/views/List/Default/Cell/fields/Relationship/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Relationship/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Select/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Select/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Select/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Select/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/Textarea/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Textarea/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/Cell/fields/Textarea/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/Textarea/index.tsx diff --git a/packages/next/src/views/List/Default/Cell/fields/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/index.tsx similarity index 95% rename from packages/next/src/views/List/Default/Cell/fields/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/fields/index.tsx index 006e2be0ab..3dd258a95d 100644 --- a/packages/next/src/views/List/Default/Cell/fields/index.tsx +++ b/packages/ui/src/elements/Table/DefaultCell/fields/index.tsx @@ -9,7 +9,7 @@ import { RelationshipCell } from './Relationship/index.js' import { SelectCell } from './Select/index.js' import { TextareaCell } from './Textarea/index.js' -export default { +export const cellComponents = { File: FileCell, array: ArrayCell, blocks: BlocksCell, diff --git a/packages/next/src/views/List/Default/Cell/index.tsx b/packages/ui/src/elements/Table/DefaultCell/index.tsx similarity index 98% rename from packages/next/src/views/List/Default/Cell/index.tsx rename to packages/ui/src/elements/Table/DefaultCell/index.tsx index 6ebe5dd5ee..10df522a7d 100644 --- a/packages/next/src/views/List/Default/Cell/index.tsx +++ b/packages/ui/src/elements/Table/DefaultCell/index.tsx @@ -10,7 +10,7 @@ import { useConfig } from '@payloadcms/ui/providers/Config' import { useTranslation } from '@payloadcms/ui/providers/Translation' import { CodeCell } from './fields/Code/index.js' -import cellComponents from './fields/index.js' +import { cellComponents } from './fields/index.js' const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default diff --git a/packages/next/src/views/List/Default/RelationshipProvider/index.tsx b/packages/ui/src/elements/Table/RelationshipProvider/index.tsx similarity index 100% rename from packages/next/src/views/List/Default/RelationshipProvider/index.tsx rename to packages/ui/src/elements/Table/RelationshipProvider/index.tsx diff --git a/packages/next/src/views/List/Default/RelationshipProvider/reducer.ts b/packages/ui/src/elements/Table/RelationshipProvider/reducer.ts similarity index 100% rename from packages/next/src/views/List/Default/RelationshipProvider/reducer.ts rename to packages/ui/src/elements/Table/RelationshipProvider/reducer.ts diff --git a/packages/ui/src/elements/Table/index.tsx b/packages/ui/src/elements/Table/index.tsx index 937ca7d266..ecce2c6abf 100644 --- a/packages/ui/src/elements/Table/index.tsx +++ b/packages/ui/src/elements/Table/index.tsx @@ -5,6 +5,8 @@ import React from 'react' export * from './TableCellProvider/index.js' +import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js' + import { useTableColumns } from '../TableColumns/index.js' import { TableCellProvider } from './TableCellProvider/index.js' import './index.scss' @@ -27,6 +29,7 @@ export type Props = { columns?: Column[] customCellContext?: Record data: unknown[] + fieldMap: FieldMap } export const Table: React.FC = ({ columns: columnsFromProps, customCellContext, data }) => { diff --git a/packages/ui/src/elements/TableColumns/buildColumns.tsx b/packages/ui/src/elements/TableColumns/buildColumns.tsx index 13aa9a715e..f723875ba7 100644 --- a/packages/ui/src/elements/TableColumns/buildColumns.tsx +++ b/packages/ui/src/elements/TableColumns/buildColumns.tsx @@ -8,6 +8,7 @@ import type { Column } from '../Table/index.js' import { SelectAll } from '../SelectAll/index.js' import { SelectRow } from '../SelectRow/index.js' +import { DefaultCell } from '../Table/DefaultCell/index.js' export const buildColumns = (args: { cellProps: Partial[] @@ -61,6 +62,13 @@ export const buildColumns = (args: { const name = 'name' in field ? field.name : undefined + const Cell = + field.CustomCell !== undefined ? ( + field.CustomCell + ) : ( + + ) + if (field) { const column: Column = { name, @@ -71,7 +79,7 @@ export const buildColumns = (args: { link: isFirstActiveColumn, }, components: { - Cell: field.Cell, + Cell, Heading: field.Heading, }, label: 'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined, diff --git a/packages/ui/src/exports/elements.ts b/packages/ui/src/exports/elements.ts new file mode 100644 index 0000000000..d3b2b4ef5b --- /dev/null +++ b/packages/ui/src/exports/elements.ts @@ -0,0 +1,54 @@ +export { Button } from '../elements/Button/index.js' +export { Card } from '../elements/Card/index.js' +export { Collapsible } from '../elements/Collapsible/index.js' +export { CopyToClipboard } from '../elements/CopyToClipboard/index.js' +export { DeleteMany } from '../elements/DeleteMany/index.js' +export { DocumentControls } from '../elements/DocumentControls/index.js' +export { useDocumentDrawer } from '../elements/DocumentDrawer/index.js' +export { DocumentFields } from '../elements/DocumentFields/index.js' +export { DocumentHeader } from '../elements/DocumentHeader/index.js' +export { Drawer, DrawerToggler, formatDrawerSlug } from '../elements/Drawer/index.js' +export { useDrawerSlug } from '../elements/Drawer/useDrawerSlug.js' +export { EditMany } from '../elements/EditMany/index.js' +export { ErrorPill } from '../elements/ErrorPill/index.js' +export { GenerateConfirmation } from '../elements/GenerateConfirmation/index.js' +export { Gutter } from '../elements/Gutter/index.js' +export { HydrateClientUser } from '../elements/HydrateClientUser/index.js' +export { ListControls } from '../elements/ListControls/index.js' +export { useListDrawer } from '../elements/ListDrawer/index.js' +export { ListSelection } from '../elements/ListSelection/index.js' +export { LoadingOverlayToggle } from '../elements/Loading/index.js' +export { FormLoadingOverlayToggle } from '../elements/Loading/index.js' +export { LoadingOverlay } from '../elements/Loading/index.js' +export { Pagination } from '../elements/Pagination/index.js' +export { PerPage } from '../elements/PerPage/index.js' +export { Pill } from '../elements/Pill/index.js' +export * as PopupList from '../elements/Popup/PopupButtonList/index.js' +export { Popup } from '../elements/Popup/index.js' +export { PublishMany } from '../elements/PublishMany/index.js' +export { ReactSelect } from '../elements/ReactSelect/index.js' +export type { Option } from '../elements/ReactSelect/types.js' +export { RenderCustomComponent } from '../elements/RenderCustomComponent/index.js' +export { ShimmerEffect } from '../elements/ShimmerEffect/index.js' +export { StaggeredShimmers } from '../elements/ShimmerEffect/index.js' +export { SortColumn } from '../elements/SortColumn/index.js' +export { SetStepNav } from '../elements/StepNav/SetStepNav.js' +export { useStepNav } from '../elements/StepNav/index.js' +export type { StepNavItem } from '../elements/StepNav/index.js' +export { RelationshipProvider } from '../elements/Table/RelationshipProvider/index.js' +export { TableCellProvider, useTableCell } from '../elements/Table/TableCellProvider/index.js' +export { Table } from '../elements/Table/index.js' +export type { Column } from '../elements/Table/index.js' +export { TableColumnsProvider } from '../elements/TableColumns/index.js' +export { Thumbnail } from '../elements/Thumbnail/index.js' +export { Tooltip } from '../elements/Tooltip/index.js' +// export { useThumbnail } from '../elements/Upload/index.js' +export { Translation } from '../elements/Translation/index.js' +export { UnpublishMany } from '../elements/UnpublishMany/index.js' +export { Upload } from '../elements/Upload/index.js' +export { BlocksDrawer } from '../fields/Blocks/BlocksDrawer/index.js' +import * as facelessUIImport from '@faceless-ui/modal' +const { Modal } = + facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : { Modal: undefined } +export { Modal } +export { SetViewActions } from '../providers/Actions/SetViewActions/index.js' diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx index 18ce8729df..91236f05bf 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx @@ -8,7 +8,6 @@ import { mapActions } from './mapActions.js' import { mapFields } from './mapFields.js' export const buildComponentMap = (args: { - DefaultCell: React.FC DefaultEditView: React.FC DefaultListView: React.FC children: React.ReactNode @@ -18,14 +17,7 @@ export const buildComponentMap = (args: { componentMap: ComponentMap wrappedChildren: React.ReactNode } => { - const { - DefaultCell, - DefaultEditView, - DefaultListView, - children, - config, - readOnly: readOnlyOverride, - } = args + const { DefaultEditView, DefaultListView, children, config, readOnly: readOnlyOverride } = args // Collections const collections = config.collections.reduce((acc, collectionConfig) => { @@ -109,7 +101,6 @@ export const buildComponentMap = (args: { collectionConfig, }), fieldMap: mapFields({ - DefaultCell, config, fieldSchema: fields, readOnly: readOnlyOverride, @@ -147,7 +138,6 @@ export const buildComponentMap = (args: { globalConfig, }), fieldMap: mapFields({ - DefaultCell, config, fieldSchema: fields, readOnly: readOnlyOverride, diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx index b194be7dd4..e571ba3715 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx @@ -42,7 +42,6 @@ import { FieldDescription as DefaultDescription } from '../../../forms/FieldDesc import { Label as DefaultLabel } from '../../../forms/Label/index.js' export const mapFields = (args: { - DefaultCell?: React.FC config: SanitizedConfig /** * If mapFields is used outside of collections, you might not want it to add an id field @@ -54,7 +53,6 @@ export const mapFields = (args: { readOnly?: boolean }): FieldMap => { const { - DefaultCell, config, disableAddingID, fieldSchema, @@ -107,7 +105,6 @@ export const mapFields = (args: { field.fields && Array.isArray(field.fields) && mapFields({ - DefaultCell, config, fieldSchema: field.fields, filter, @@ -240,7 +237,6 @@ export const mapFields = (args: { case 'blocks': { const blocks = field.blocks.map((block) => { const blockFieldMap = mapFields({ - DefaultCell, config, fieldSchema: block.fields, filter, @@ -530,7 +526,6 @@ export const mapFields = (args: { // `tabs` fields require a field map of each of its tab's nested fields const tabs = field.tabs.map((tab) => { const tabFieldMap = mapFields({ - DefaultCell, config, fieldSchema: tab.fields, filter, @@ -645,14 +640,6 @@ export const mapFields = (args: { } } - const Cell = ( - - ) - const Heading = ( + ) : undefined, CustomField: CustomFieldComponent ? ( ) : undefined, Heading, + cellComponentProps, disableBulkEdit: 'admin' in field && 'disableBulkEdit' in field.admin && field.admin.disableBulkEdit, fieldComponentProps, @@ -706,8 +696,10 @@ export const mapFields = (args: { result.push({ name: 'id', type: 'text', - Cell: DefaultCell ? : null, Heading: , + cellComponentProps: { + name: 'id', + }, fieldComponentProps: { name: 'id', label: 'ID', diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts b/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts index 31f7259f4c..35bd9ec117 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts @@ -1,6 +1,7 @@ import type { FieldTypes } from 'payload/config' import type { BlockField, + CellProps, SanitizedCollectionConfig, SanitizedGlobalConfig, TabsField, @@ -62,9 +63,10 @@ export type FieldComponentProps = | UploadFieldProps export type MappedField = { - Cell: React.ReactNode + CustomCell?: React.ReactNode CustomField?: React.ReactNode Heading: React.ReactNode + cellComponentProps: CellProps disableBulkEdit?: boolean disabled?: boolean fieldComponentProps: FieldComponentProps diff --git a/tsconfig.json b/tsconfig.json index 6ea0e2c750..6e11abba64 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -154,4 +154,4 @@ ".next/types/**/*.ts", "scripts/**/*.ts" ] -} +} \ No newline at end of file From 9f690c1f5d15edadb4089486eb7d2516801bad15 Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 20 Mar 2024 13:43:47 -0400 Subject: [PATCH 3/6] chore(ui): client-side renders table column headings --- .../elements/TableColumns/buildColumns.tsx | 28 ++++++++++++++++--- .../buildComponentMap/mapFields.tsx | 21 -------------- .../ComponentMap/buildComponentMap/types.ts | 1 - 3 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/ui/src/elements/TableColumns/buildColumns.tsx b/packages/ui/src/elements/TableColumns/buildColumns.tsx index f723875ba7..87afad586c 100644 --- a/packages/ui/src/elements/TableColumns/buildColumns.tsx +++ b/packages/ui/src/elements/TableColumns/buildColumns.tsx @@ -1,15 +1,17 @@ -import type { CellProps, SanitizedCollectionConfig } from 'payload/types' - +import { type CellProps, type SanitizedCollectionConfig } from 'payload/types' import React from 'react' -import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js' +import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js' import type { ColumnPreferences } from '../../providers/ListInfo/types.js' import type { Column } from '../Table/index.js' import { SelectAll } from '../SelectAll/index.js' import { SelectRow } from '../SelectRow/index.js' +import { SortColumn } from '../SortColumn/index.js' import { DefaultCell } from '../Table/DefaultCell/index.js' +const fieldIsPresentationalOnly = (field: MappedField): boolean => field.type === 'ui' + export const buildColumns = (args: { cellProps: Partial[] columnPreferences: ColumnPreferences @@ -69,6 +71,24 @@ export const buildColumns = (args: { ) + const Heading = ( + + ) + if (field) { const column: Column = { name, @@ -80,7 +100,7 @@ export const buildColumns = (args: { }, components: { Cell, - Heading: field.Heading, + Heading, }, label: 'label' in field.fieldComponentProps ? field.fieldComponentProps.label : undefined, } diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx index e571ba3715..b8f879fa92 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/mapFields.tsx @@ -35,7 +35,6 @@ import type { } from './types.js' import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js' -import { SortColumn } from '../../../elements/SortColumn/index.js' import { HiddenInput } from '../../../fields/HiddenInput/index.js' import { Error as DefaultError } from '../../../forms/Error/index.js' import { FieldDescription as DefaultDescription } from '../../../forms/FieldDescription/index.js' @@ -640,24 +639,6 @@ export const mapFields = (args: { } } - const Heading = ( - - ) - const reducedField: MappedField = { name: 'name' in field ? field.name : undefined, type: field.type, @@ -667,7 +648,6 @@ export const mapFields = (args: { CustomField: CustomFieldComponent ? ( ) : undefined, - Heading, cellComponentProps, disableBulkEdit: 'admin' in field && 'disableBulkEdit' in field.admin && field.admin.disableBulkEdit, @@ -696,7 +676,6 @@ export const mapFields = (args: { result.push({ name: 'id', type: 'text', - Heading: , cellComponentProps: { name: 'id', }, diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts b/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts index 35bd9ec117..cabd194378 100644 --- a/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts +++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts @@ -65,7 +65,6 @@ export type FieldComponentProps = export type MappedField = { CustomCell?: React.ReactNode CustomField?: React.ReactNode - Heading: React.ReactNode cellComponentProps: CellProps disableBulkEdit?: boolean disabled?: boolean From b3d28bac6a5254854b1dcb865530b00df3795b0c Mon Sep 17 00:00:00 2001 From: Jacob Fletcher Date: Wed, 20 Mar 2024 15:01:46 -0400 Subject: [PATCH 4/6] chore(ui): client-side renders all default field labels, descriptions, and errors --- .../next/src/views/Account/Settings/index.tsx | 4 +- .../src/views/Edit/Default/Auth/APIKey.tsx | 4 +- .../next/src/views/Edit/Default/index.tsx | 1 - .../next/src/views/Versions/index.client.tsx | 2 +- .../plugin-seo/src/fields/MetaDescription.tsx | 8 +- packages/plugin-seo/src/fields/MetaImage.tsx | 9 +- packages/plugin-seo/src/fields/MetaTitle.tsx | 9 +- packages/richtext-lexical/src/field/Field.tsx | 22 ++- .../richtext-slate/src/field/RichText.tsx | 22 ++- .../ui/src/elements/FieldSelect/index.tsx | 19 ++- .../src/elements/ListDrawer/DrawerContent.tsx | 4 +- packages/ui/src/elements/Upload/index.tsx | 4 +- packages/ui/src/fields/Array/index.tsx | 32 ++-- packages/ui/src/fields/Blocks/index.tsx | 33 +++-- packages/ui/src/fields/Checkbox/Input.tsx | 11 +- packages/ui/src/fields/Checkbox/index.tsx | 28 ++-- packages/ui/src/fields/Code/index.tsx | 22 +-- packages/ui/src/fields/Collapsible/index.tsx | 22 +-- .../ui/src/fields/ConfirmPassword/index.tsx | 8 +- packages/ui/src/fields/DateTime/index.tsx | 29 ++-- packages/ui/src/fields/Email/index.tsx | 26 ++-- packages/ui/src/fields/Group/index.tsx | 23 +-- packages/ui/src/fields/HiddenInput/index.tsx | 4 +- packages/ui/src/fields/JSON/index.tsx | 27 ++-- packages/ui/src/fields/Number/index.tsx | 26 ++-- packages/ui/src/fields/Password/index.tsx | 16 +- packages/ui/src/fields/Point/index.tsx | 29 ++-- packages/ui/src/fields/RadioGroup/index.tsx | 29 ++-- packages/ui/src/fields/Relationship/index.tsx | 22 ++- packages/ui/src/fields/Select/index.tsx | 26 ++-- packages/ui/src/fields/Tabs/index.tsx | 10 +- packages/ui/src/fields/Text/Input.tsx | 22 ++- packages/ui/src/fields/Text/index.tsx | 22 +-- packages/ui/src/fields/Textarea/Input.tsx | 22 ++- packages/ui/src/fields/Textarea/index.tsx | 22 +-- packages/ui/src/fields/Upload/Input.tsx | 25 ++-- packages/ui/src/fields/Upload/index.tsx | 21 +-- packages/ui/src/fields/shared/index.tsx | 13 +- .../ui/src/forms/FieldDescription/index.tsx | 6 +- .../ui/src/forms/FieldDescription/types.ts | 2 +- .../forms/{Error => FieldError}/index.scss | 0 .../src/forms/{Error => FieldError}/index.tsx | 2 +- .../forms/{Label => FieldLabel}/index.scss | 0 .../src/forms/{Label => FieldLabel}/index.tsx | 2 +- .../ComponentMap/buildComponentMap/index.tsx | 2 + .../buildComponentMap/mapFields.tsx | 138 +++++++++--------- .../ComponentMap/buildComponentMap/types.ts | 2 + tsconfig.json | 2 +- 48 files changed, 512 insertions(+), 322 deletions(-) rename packages/ui/src/forms/{Error => FieldError}/index.scss (100%) rename packages/ui/src/forms/{Error => FieldError}/index.tsx (94%) rename packages/ui/src/forms/{Label => FieldLabel}/index.scss (100%) rename packages/ui/src/forms/{Label => FieldLabel}/index.tsx (93%) diff --git a/packages/next/src/views/Account/Settings/index.tsx b/packages/next/src/views/Account/Settings/index.tsx index 2a01c8ff12..aaf9c3657e 100644 --- a/packages/next/src/views/Account/Settings/index.tsx +++ b/packages/next/src/views/Account/Settings/index.tsx @@ -1,6 +1,6 @@ 'use client' import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect' -import { Label } from '@payloadcms/ui/forms/Label' +import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel' import { useTranslation } from '@payloadcms/ui/providers/Translation' import React from 'react' @@ -20,7 +20,7 @@ export const Settings: React.FC<{

{t('general:payloadSettings')}

-