Payload 2.0 update, moved to pnpm as package manager

Author: DennisSnijder

README.md

@@ -1,21 +1,30 @@
 # Payload workflow plugin
+
 > **Note**
 > This plugin is currently under active development and still in an early stage.
 > Check the [roadmap](#roadmap) below in this readme for more details / upcoming features.
 
-![Preview Image](./preview.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" src="./preview-dark.png" />
+  <source media="(prefers-color-scheme: light)" src="./preview-light.png" />
+  <img alt="Shows an image illustrating the payload-workflow plugin" src="./preview-dark.png">
+</picture>
 
 ## Installation
+The most recent version of payload-workflow currently only supports Payload 2.0 and up. 
+For older payload versions, please use `[email protected]`
+
 ```shell
 $ yarn add payload-workflow
 ```
 
 ## Basic usage
+
 ```typescript
 import { payloadWorkflow } from 'payload-workflow';
 
 const config = buildConfig({
-  collections: [...],
+  collections: [ ... ],
   plugins: [
     payloadWorkflow({
       'my-collection-slug': {
@@ -34,19 +43,24 @@ const config = buildConfig({
 ```
 
 ## Differences with the draft/publish system of Payload.
-The workflow plugin introduces a new field called `workflowStatus`. This field does not interact with the draft/publish system of Payload whatsoever.
 
-You can "integrate" the workflow status with the draft/publish system of Payload yourself by using [Payloads hooks](https://payloadcms.com/docs/hooks/overview).
+The workflow plugin introduces a new field called `workflowStatus`. This field does not interact with the draft/publish
+system of Payload.
+
+You can "integrate" the workflow status with the draft/publish system of Payload yourself by
+using [Payloads hooks](https://payloadcms.com/docs/hooks/overview).
 
 For example: Automatically publish the document when the `workflowStatus` has been changed to `published`.
 
-<h2 id="roadmap">Roadmap</h3>
+<h2 id="roadmap">Roadmap</h2>
 Upcoming Features / Ideas. Have a suggestion for the plugin? Feel free to open an issue or contribute!
 
+- [X] Payload 2.0 support
 - [ ] Customize card properties (currently displays `title` and `createdAt`)
 - [ ] Edit relationships directly from the card (e.g., assigning users to a document)
-- [X] Toggleable column for posts without a workflow status (Currently, documents lacking `workflowStatus` aren't visible on the board)
+- [X] Toggleable column for posts without a workflow status (Currently, documents lacking `workflowStatus` aren't
+  visible on the board)
 - [ ] Lazy loading of column contents when scrolling (Currently, board only shows `defaultLimit` amount of cards)
 - [ ] Permissions for changing statuses
 - [ ] Allowed transitions between statuses
-- [ ] Integration with the draft/publish system of Payload (?)
+- [ ] Integration with the draft/publish system of Payload (?)

dev/package.json

@@ -16,13 +16,18 @@
     "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
   },
   "dependencies": {
+    "@payloadcms/bundler-webpack": "^1.0.2",
+    "@payloadcms/db-mongodb": "^1.0.2",
+    "@payloadcms/richtext-slate": "^1.0.1",
     "dotenv": "^16.3.1",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "payload": "^2.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.17",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
+    "inspectpack": "^4.7.1",
     "nodemon": "^2.0.22",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"

dev/src/payload.config.ts

@@ -5,25 +5,41 @@ import Posts from './collections/Posts';
 import Tags from './collections/Tags';
 import Users from './collections/Users';
 import Media from './collections/Media';
+import { mongooseAdapter } from "@payloadcms/db-mongodb";
+import { slateEditor } from "@payloadcms/richtext-slate";
+import { webpackBundler } from "@payloadcms/bundler-webpack";
+
 import { payloadWorkflow } from "../../src/index";
 
 export default buildConfig({
   serverURL: 'http://localhost:3000',
+
+  editor: slateEditor({}),
+  db: mongooseAdapter({
+    url: `${ process.env.MONGODB_URI }`,
+  }),
   admin: {
     user: Users.slug,
-    webpack: config => ({
-      ...config,
-      resolve: {
+    bundler: webpackBundler(),
+    webpack: (config) => {
+      config.plugins = [
+        ...config.plugins as [],
+      ];
+      config.resolve = {
         ...config.resolve,
         alias: {
           ...config.resolve?.alias,
-          "react": path.join(__dirname, "../../node_modules/react"),
-          "react-dom": path.join(__dirname, "../../node_modules/react-dom"),
-          "payload": path.join(__dirname, "../../node_modules/payload"),
-          "react-i18next": path.join(__dirname, "../../node_modules/react-i18next"),
-        },
-      },
-    }),
+          react: path.join(__dirname, '../node_modules/react'),
+          'react-dom': path.join(__dirname, '../node_modules/react-dom'),
+          'react-router': path.join(__dirname, '../node_modules/react-router'),
+          'react-router-dom': path.join(__dirname, '../node_modules/react-router-dom'),
+          'react-i18next': path.join(__dirname, '../node_modules/react-i18next'),
+          payload: path.join(__dirname, '../node_modules/payload'),
+        }
+      };
+
+      return config
+    }
   },
   collections: [
     Categories,

dev/src/server.ts

@@ -14,7 +14,6 @@ const start = async () => {
   // Initialize Payload
   await payload.init({
     secret: process.env.PAYLOAD_SECRET ?? '',
-    mongoURL: process.env.MONGODB_URI ?? '',
     express: app,
     onInit: async () => {
       payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)

package.json

@@ -1,5 +1,6 @@
 {
   "name": "payload-workflow",
+  "description": "A workflow plugin for Payload CMS",
   "version": "0.2.0",
   "keywords": [
     "payload",
@@ -22,13 +23,19 @@
     "build:tsc": "tsc"
   },
   "peerDependencies": {
-    "payload": "^1.10.5"
+    "payload": "^2.0.0",
+    "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0",
+    "react-router-dom": "^5.0.0",
+    "react-router": "^5.0.0",
+    "react-i18next": "^11.18.0",
+    "i18next": "^22.5.0"
   },
   "devDependencies": {
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-router-dom": "^5.3.3",
     "copyfiles": "^2.4.1",
-    "payload": "^1.10.5",
+    "payload": "^2.0.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {