feat: Rebuild Payload admin experience

src/app/(payload)/admin/importMap.js

@@ -21,13 +21,16 @@ import { SlugField as SlugField_2b8867833a34864a02ddf429b0728a40 } from '@payloa
 import { VariantOptionsSelector as VariantOptionsSelector_b91672ccd6e8b071c11142ab941fedfb } from '@payloadcms/plugin-ecommerce/rsc'
 import { PriceCell as PriceCell_e27bf7b8cc50640dcdd584767b8eac3c } from '@payloadcms/plugin-ecommerce/client'
 import { PriceInput as PriceInput_b91672ccd6e8b071c11142ab941fedfb } from '@payloadcms/plugin-ecommerce/rsc'
+import { ProductPublishing as ProductPublishing_2e09d0ed302e9b72a91fa96d8b38a01d } from '@/components/admin/ProductPublishing'
 import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ProductInventoryHint as ProductInventoryHint_545506debe207e4feb643fee5c5d7763 } from '@/components/admin/ProductInventoryHint'
+import { ProductPublishButton as ProductPublishButton_98537d810be5839e22cd240d7c917c4f } from '@/components/admin/ProductPublishButton'
+import { AdminNav as AdminNav_2623bc737c612ce9420322f2210a7f19 } from '@/components/admin/AdminNav'
 import { BeforeLogin as BeforeLogin_8a7ab0eb7ab5c511aba12e68480bfe5e } from '@/components/BeforeLogin'
-import { DashboardNavLink as DashboardNavLink_3987d42d9edba53cc710fb1f6cc541b5 } from '@/components/admin/DashboardNavLink'
 import { AdminStyles as AdminStyles_340cf3538fa47d0416e0abd461790ca4 } from '@/components/admin/AdminStyles'
-import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
 import { DashboardView as DashboardView_8d5ccf53266e3797f61e9453e2f2d431 } from '@/components/admin/DashboardView'
 import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
+import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client'
 
 /** @type import('payload').ImportMap */
 export const importMap = {
@@ -54,11 +57,14 @@ export const importMap = {
   "@payloadcms/plugin-ecommerce/rsc#VariantOptionsSelector": VariantOptionsSelector_b91672ccd6e8b071c11142ab941fedfb,
   "@payloadcms/plugin-ecommerce/client#PriceCell": PriceCell_e27bf7b8cc50640dcdd584767b8eac3c,
   "@payloadcms/plugin-ecommerce/rsc#PriceInput": PriceInput_b91672ccd6e8b071c11142ab941fedfb,
+  "@/components/admin/ProductPublishing#ProductPublishing": ProductPublishing_2e09d0ed302e9b72a91fa96d8b38a01d,
   "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@/components/admin/ProductInventoryHint#ProductInventoryHint": ProductInventoryHint_545506debe207e4feb643fee5c5d7763,
+  "@/components/admin/ProductPublishButton#ProductPublishButton": ProductPublishButton_98537d810be5839e22cd240d7c917c4f,
+  "@/components/admin/AdminNav#AdminNav": AdminNav_2623bc737c612ce9420322f2210a7f19,
   "@/components/BeforeLogin#BeforeLogin": BeforeLogin_8a7ab0eb7ab5c511aba12e68480bfe5e,
-  "@/components/admin/DashboardNavLink#DashboardNavLink": DashboardNavLink_3987d42d9edba53cc710fb1f6cc541b5,
   "@/components/admin/AdminStyles#AdminStyles": AdminStyles_340cf3538fa47d0416e0abd461790ca4,
-  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24,
   "@/components/admin/DashboardView#DashboardView": DashboardView_8d5ccf53266e3797f61e9453e2f2d431,
-  "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
+  "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1,
+  "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24
 }

src/collections/Products/index.ts

@@ -1,7 +1,7 @@
 import { CallToAction } from '@/blocks/CallToAction/config'
 import { Content } from '@/blocks/Content/config'
 import { MediaBlock } from '@/blocks/MediaBlock/config'
-import { slugField } from 'payload'
+import { type Field, slugField } from 'payload'
 import { generatePreviewPath } from '@/utilities/generatePreviewPath'
 import { CollectionOverride } from '@payloadcms/plugin-ecommerce/types'
 import {
@@ -22,10 +22,29 @@ import { DefaultDocumentIDType, Where } from 'payload'
 
 import { priceSelect } from '@/currencies'
 
-export const ProductsCollection: CollectionOverride = ({ defaultCollection }) => ({
+const named = (field: Field, name: string) => 'name' in field && field.name === name
+
+export const ProductsCollection: CollectionOverride = ({ defaultCollection }) => {
+  const defaults = defaultCollection.fields
+  const inventory = defaults.find((field) => named(field, 'inventory'))
+  const variantFields = defaults.filter((field) =>
+    ['enableVariants', 'variantTypes', 'variants'].some((name) => named(field, name)),
+  )
+  const priceFields = defaults.filter((field) => field.type === 'group')
+  const slug = slugField()
+  const slugFields = slug.type === 'row' ? slug.fields : []
+
+  return ({
   ...defaultCollection,
   admin: {
     ...defaultCollection?.admin,
+    components: {
+      ...defaultCollection?.admin?.components,
+      edit: {
+        ...defaultCollection?.admin?.components?.edit,
+        PublishButton: '@/components/admin/ProductPublishButton#ProductPublishButton',
+      },
+    },
     defaultColumns: ['title', 'enableVariants', '_status', 'variants.variants'],
     livePreview: {
       url: ({ data, req }) =>
@@ -56,12 +75,31 @@ export const ProductsCollection: CollectionOverride = ({ defaultCollection }) =>
     meta: true,
   },
   fields: [
-    { name: 'title', type: 'text', required: true },
     {
-      type: 'tabs',
-      tabs: [
+      name: 'publishingSummary',
+      type: 'ui',
+      admin: {
+        components: { Field: '@/components/admin/ProductPublishing#ProductPublishing' },
+        position: 'sidebar',
+      },
+    },
+    {
+      type: 'collapsible',
+      label: 'Basic information',
+      admin: { className: 'product-editor__section product-editor__basic', initCollapsed: false },
+      fields: [
         {
+          type: 'row',
           fields: [
+            { name: 'title', type: 'text', required: true, admin: { width: '50%' } },
+            ...slugFields.map((field): Field => {
+              if ('name' in field && field.name === 'slug') {
+                return { ...field, admin: { ...field.admin, width: '50%' } } as Field
+              }
+              return field
+            }),
+          ],
+        },
             {
               name: 'description',
               type: 'richText',
@@ -79,6 +117,13 @@ export const ProductsCollection: CollectionOverride = ({ defaultCollection }) =>
               label: false,
               required: false,
             },
+      ],
+    },
+    {
+      type: 'collapsible',
+      label: 'Media',
+      admin: { className: 'product-editor__section product-editor__media', initCollapsed: false },
+      fields: [
             {
               name: 'gallery',
               type: 'array',
@@ -133,18 +178,24 @@ export const ProductsCollection: CollectionOverride = ({ defaultCollection }) =>
                 },
               ],
             },
-
+      ],
+    },
+    {
+      type: 'collapsible',
+      label: 'Variants',
+      admin: { className: 'product-editor__section product-editor__variants', initCollapsed: false },
+      fields: variantFields,
+    },
+    {
+      type: 'collapsible',
+      label: 'Additional content',
+      admin: { className: 'product-editor__section product-editor__additional', initCollapsed: true },
+      fields: [
             {
               name: 'layout',
               type: 'blocks',
               blocks: [CallToAction, Content, MediaBlock],
             },
-          ],
-          label: 'Content',
-        },
-        {
-          fields: [
-            ...defaultCollection.fields,
             {
               name: 'relatedProducts',
               type: 'relationship',
@@ -167,12 +218,17 @@ export const ProductsCollection: CollectionOverride = ({ defaultCollection }) =>
               hasMany: true,
               relationTo: 'products',
             },
-          ],
-          label: 'Product Details',
-        },
+      ],
+    },
+    {
+      type: 'collapsible',
+      label: 'Search preview',
+      admin: { className: 'product-editor__section product-editor__seo', initCollapsed: true },
+      fields: [
         {
           name: 'meta',
           label: 'SEO',
+          type: 'group',
           fields: [
             OverviewField({
               titlePath: 'meta.title',
@@ -200,25 +256,57 @@ export const ProductsCollection: CollectionOverride = ({ defaultCollection }) =>
       ],
     },
     {
-      name: 'categories',
-      type: 'relationship',
+      type: 'collapsible',
+      label: 'Product organization',
       admin: {
+        className: 'product-editor__sidebar-card product-editor__organization',
+        initCollapsed: false,
         position: 'sidebar',
-        sortOptions: 'title',
       },
-      hasMany: true,
-      relationTo: 'categories',
+      fields: [
+        {
+          name: 'categories',
+          type: 'relationship',
+          admin: { sortOptions: 'title' },
+          hasMany: true,
+          relationTo: 'categories',
+        },
+        {
+          name: 'tags',
+          type: 'relationship',
+          admin: { sortOptions: 'group' },
+          hasMany: true,
+          relationTo: 'tags',
+        },
+      ],
     },
+    ...(inventory ? [{
+      type: 'collapsible' as const,
+      label: 'Inventory',
+      admin: {
+        className: 'product-editor__sidebar-card product-editor__inventory',
+        initCollapsed: false,
+        position: 'sidebar' as const,
+      },
+      fields: [
+        {
+          name: 'inventoryHint',
+          type: 'ui',
+          admin: { components: { Field: '@/components/admin/ProductInventoryHint#ProductInventoryHint' } },
+        },
+        inventory,
+      ],
+    }] : []),
     {
-      name: 'tags',
-      type: 'relationship',
+      type: 'collapsible',
+      label: 'Pricing',
       admin: {
+        className: 'product-editor__sidebar-card product-editor__pricing',
+        initCollapsed: false,
         position: 'sidebar',
-        sortOptions: 'group',
       },
-      hasMany: true,
-      relationTo: 'tags',
+      fields: priceFields,
     },
-    slugField(),
-  ],
-})
+  ] as Field[],
+  })
+}