refactor(cms): Port CMS to Payload v2.27.0

apps/cms/package.json

@@ -21,10 +21,13 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.262.0",
     "@aws-sdk/lib-storage": "^3.535.0",
+    "@payloadcms/bundler-webpack": "^1.0.7",
+    "@payloadcms/db-mongodb": "^1.7.2",
     "@payloadcms/plugin-cloud-storage": "~1.0.19",
+    "@payloadcms/richtext-slate": "^1.5.2",
     "dotenv": "^8.2.0",
     "express": "^4.19.2",
-    "payload": "^1.8.3",
+    "payload": "^2.27.0",
     "querystring-es3": "^0.2.1",
     "react": "^18.0.0",
     "tsconfig": "*"

apps/cms/src/admin/views/MerchOverview.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState, ChangeEvent } from "react";
 import { Button } from "payload/components/elements";
-import { AdminView } from "payload/config";
+import { AdminViewComponent } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import StoreApi from "../../apis/store.api";
 
-const MerchOverview: AdminView = ({ user, canAccessAdmin }) => {
+const MerchOverview: AdminViewComponent = ({ user, canAccessAdmin }) => {
   const [displayText, setDisplayText] = useState<string>(
     "We are currently preparing for the next merch sale. Please look forward to our email!"
   );

apps/cms/src/admin/views/MerchProducts.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "payload/components/elements";
-import { AdminView } from "payload/config";
+import { AdminViewComponent } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import { Column } from "payload/dist/admin/components/elements/Table/types";
 import { RenderCellFactory } from "../utils/RenderCellFactory";
@@ -9,7 +9,7 @@ import { Table } from "payload/dist/admin/components/elements/Table";
 import { Product } from "types";
 import ProductsApi from "../../apis/products.api";
 
-const MerchProducts: AdminView = ({ user, canAccessAdmin }) => {
+const MerchProducts: AdminViewComponent = ({ user, canAccessAdmin }) => {
   // Get data from API
   const [data, setData] = useState<Product[]>(null);
   useEffect(() => {

apps/cms/src/admin/views/MerchPromotion.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "payload/components/elements";
-import { AdminView } from "payload/config";
+import { AdminViewComponent } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import { Column } from "payload/dist/admin/components/elements/Table/types";
 import { RenderCellFactory } from "../utils/RenderCellFactory";
@@ -10,7 +10,7 @@ import { Promotion } from "types";
 import PromotionsApi from "../../apis/promotions.api";
 import './MerchPromotion.scss';
 
-const MerchPromotion: AdminView = ({ user, canAccessAdmin }) => {
+const MerchPromotion: AdminViewComponent = ({ user, canAccessAdmin }) => {
   // Get data from API
   const [data, setData] = useState<Promotion[]>(null);
   useEffect(() => {
@@ -112,7 +112,7 @@ const MerchPromotion: AdminView = ({ user, canAccessAdmin }) => {
       keywords=""
       title="Merchandise Promotion"
     >
-    
+
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <Button el="link" to={"/admin"} buttonStyle="primary">
           Go to Main Admin View
@@ -125,9 +125,9 @@ const MerchPromotion: AdminView = ({ user, canAccessAdmin }) => {
       <div className="table">
         <Table data={data} columns={tableCols}/>
       </div>
-        
+
     </ViewTemplate>
   );
 };
 
-export default MerchPromotion;
+export default MerchPromotion;

apps/cms/src/admin/views/MerchSales.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "payload/components/elements";
-import { AdminView } from "payload/config";
+import { AdminViewComponent } from "payload/config";
 import ViewTemplate from "./ViewTemplate";
 import { Column } from "payload/dist/admin/components/elements/Table/types";
 import { Order } from "../../@types/Order";
@@ -11,7 +11,7 @@ import SortedColumn from "../utils/SortedColumn";
 import { Table } from "payload/dist/admin/components/elements/Table";
 
 
-const MerchSales: AdminView = ({ user, canAccessAdmin }) => {
+const MerchSales: AdminViewComponent = ({ user, canAccessAdmin }) => {
     // Get data from API
     const [data, setData] = useState<IOrder[]>(null);
     useEffect(() => {

apps/cms/src/admin/views/ViewTemplate.tsx

@@ -4,11 +4,11 @@ import { useConfig } from "payload/dist/admin/components/utilities/Config";
 
 import { DefaultTemplate } from "payload/components/templates";
 import { Eyebrow } from "payload/components/elements";
-import { AdminView } from "payload/config";
+import { AdminViewComponent } from "payload/config";
 import { useStepNav } from "payload/components/hooks";
 import { Meta } from "payload/components/utilities";
 
-type ViewTemplateProps = React.ComponentProps<AdminView> & {
+type ViewTemplateProps = React.ComponentProps<AdminViewComponent> & {
   description: string;
   keywords: string;
   /** Page Title */

apps/cms/src/blocks/Media.ts

@@ -1,4 +1,5 @@
 import { Block } from 'payload/types';
+import { slateEditor } from "@payloadcms/richtext-slate";
 
 export const MediaBlock: Block = {
   slug: 'media',
@@ -74,11 +75,13 @@ export const MediaBlock: Block = {
       name: 'caption',
       label: 'Caption',
       type: 'richText',
-      admin: {
-        elements: [
-          'link',
-        ],
-      },
+      editor: slateEditor({
+        admin: {
+          elements: [
+            'link',
+          ],
+        },
+      })
     },
   ],
 };

apps/cms/src/fields/richText/richtext.ts

@@ -1,93 +1,101 @@
-import { RichTextElement, RichTextField, RichTextLeaf } from 'payload/dist/fields/config/types';
-import deepMerge from '../../utilities/deepMerge';
+import { RichTextField } from "payload/dist/fields/config/types";
+import {
+  slateEditor,
+  RichTextElement,
+  RichTextLeaf,
+} from "@payloadcms/richtext-slate";
+import deepMerge from "../../utilities/deepMerge";
 // import elements from './elements';
 // import leaves from './leaves';
 // import link from '../link';
 
 type RichText = (
   overrides?: Partial<RichTextField>,
   additions?: {
-    elements?: RichTextElement[]
-    leaves?: RichTextLeaf[]
-  }
-) => RichTextField
+    elements?: RichTextElement[];
+    leaves?: RichTextLeaf[];
+  },
+) => RichTextField;
 
 const richText: RichText = (
   overrides,
   _additions = {
     elements: [],
     leaves: [],
   },
-) => deepMerge<RichTextField, Partial<RichTextField>>(
-  {
-    name: 'richText',
-    type: 'richText',
-    admin: {
-      upload: {
-        collections: {
-          media: {
-            fields: [
-              {
-                type: 'richText',
-                name: 'caption',
-                label: 'Caption',
-                // admin: {
-                //   elements: [
-                //     ...elements,
-                //   ],
-                //   leaves: [
-                //     ...leaves,
-                //   ],
-                // },
-              },
-              {
-                type: 'radio',
-                name: 'alignment',
-                label: 'Alignment',
-                options: [
+) =>
+  deepMerge<RichTextField, Partial<RichTextField>>(
+    {
+      name: "richText",
+      type: "richText",
+      editor: slateEditor({
+        admin: {
+          upload: {
+            collections: {
+              media: {
+                fields: [
                   {
-                    label: 'Left',
-                    value: 'left',
+                    type: "richText",
+                    name: "caption",
+                    label: "Caption",
+                    // admin: {
+                    //   elements: [
+                    //     ...elements,
+                    //   ],
+                    //   leaves: [
+                    //     ...leaves,
+                    //   ],
+                    // },
                   },
                   {
-                    label: 'Center',
-                    value: 'center',
+                    type: "radio",
+                    name: "alignment",
+                    label: "Alignment",
+                    options: [
+                      {
+                        label: "Left",
+                        value: "left",
+                      },
+                      {
+                        label: "Center",
+                        value: "center",
+                      },
+                      {
+                        label: "Right",
+                        value: "right",
+                      },
+                    ],
                   },
                   {
-                    label: 'Right',
-                    value: 'right',
+                    name: "enableLink",
+                    type: "checkbox",
+                    label: "Enable Link",
                   },
+                  // link({
+                  //   appearances: false,
+                  //   disableLabel: true,
+                  //   overrides: {
+                  //     admin: {
+                  //       condition: (_, data) => Boolean(data?.enableLink),
+                  //     },
+                  //   },
+                  // }),
                 ],
               },
-              {
-                name: 'enableLink',
-                type: 'checkbox',
-                label: 'Enable Link',
-              },
-              // link({
-              //   appearances: false,
-              //   disableLabel: true,
-              //   overrides: {
-              //     admin: {
-              //       condition: (_, data) => Boolean(data?.enableLink),
-              //     },
-              //   },
-              // }),
-            ],
+            },
           },
+          // elements: [
+          //   ...elements,
+          //   ...additions.elements || [],
+          // ],
+          // leaves: [
+          //   ...leaves,
+          //   ...additions.leaves || [],
+          // ],
         },
-      },
-      // elements: [
-      //   ...elements,
-      //   ...additions.elements || [],
-      // ],
-      // leaves: [
-      //   ...leaves,
-      //   ...additions.leaves || [],
-      // ],
+      }),
     },
-  },
-  overrides,
-);
+    overrides,
+  );
 
 export default richText;

apps/cms/src/payload.config.ts

@@ -1,6 +1,8 @@
 import { buildConfig } from "payload/config";
 import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
 import { s3Adapter as createS3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
+import { slateEditor } from "@payloadcms/richtext-slate";
+import { webpackBundler } from "@payloadcms/bundler-webpack";
 import path from "path";
 
 import Categories from "./collections/Categories";
@@ -19,6 +21,7 @@ import { SCSEIcon, SCSELogo } from "./admin/graphics/Logos";
 import BeforeNavLinks from "./admin/components/BeforeNavLinks";
 import Order from "./collections/Orders";
 import { isUsingCloudStore } from "./utilities/cloud";
+import { mongooseAdapter } from "@payloadcms/db-mongodb";
 
 const adapter = createS3Adapter({
   config: {
@@ -33,30 +36,37 @@ const adapter = createS3Adapter({
 
 export default buildConfig({
   serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
+  editor: slateEditor({}),
+  db: mongooseAdapter({
+    url: process.env.MONGODB_URI,
+  }),
   admin: {
+    // eslint wrongly infers webpackBundler() as returning any
+    /* eslint-disable-next-line */
+    bundler: webpackBundler(),
     components: {
       graphics: {
         Logo: SCSELogo,
         Icon: SCSEIcon,
       },
-      routes: [
-        {
-          path: "/merch/overview",
-          Component: MerchOverview,
-        },
-        {
-          path: "/merch/sales",
-          Component: MerchSales,
-        },
-        {
-          path: "/merch/products",
-          Component: MerchProducts,
-        },
-        {
-          path: "/merch/promotions",
-          Component: MerchPromotion,
-        },
-      ],
+      views: {
+        MerchOverview: {
+        path: "/merch/overview",
+        Component: MerchOverview,
+      },
+      MerchSales: {
+        path: "/merch/sales",
+        Component: MerchSales,
+      },
+      MerchProducts: {
+        path: "/merch/products",
+        Component: MerchProducts,
+      },
+      MerchPromotion: {
+        path: "/merch/promotions",
+        Component: MerchPromotion,
+      },
+      },
       beforeNavLinks: BeforeNavLinks,
       afterNavLinks: AfterNavLinks,
     },

apps/cms/src/server.ts

@@ -17,7 +17,6 @@ app.use(express.static(path.join(__dirname, "..", "public")));
 // Initialize Payload
 void payload.init({
   secret: process.env.PAYLOAD_SECRET,
-  mongoURL: process.env.MONGODB_URI,
   express: app,
   onInit: () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access