chore: update whitelabel example (#6049)

examples/virtual-fields/src/app/my-route/route.ts

@@ -1,14 +0,0 @@
-import configPromise from '@payload-config'
-import { getPayload } from 'payload'
-
-export const GET = async () => {
-  const payload = await getPayload({
-    config: configPromise,
-  })
-
-  const data = await payload.find({
-    collection: 'users',
-  })
-
-  return Response.json(data)
-}

examples/whitelabel/.env.example

@@ -1,3 +1,3 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-example-whitelabel
+DATABASE_URI=mongodb://127.0.0.1/payload-example-whitelabel
 PAYLOAD_SECRET=ENTER-STRING-HERE
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000

examples/whitelabel/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/whitelabel/.gitignore copy

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+/media

examples/whitelabel/.npmrc copy

@@ -0,0 +1 @@
+legacy-peer-deps=true

examples/whitelabel/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/whitelabel/nodemon copy.json

@@ -0,0 +1,5 @@
+{
+  "ext": "ts",
+  "exec": "ts-node src/server.ts -- -I",
+  "stdin": false
+}

examples/whitelabel/package.json

@@ -4,26 +4,31 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "cross-env": "^7.0.3",
+    "next": "^14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/whitelabel/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/whitelabel/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/whitelabel/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/whitelabel/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/whitelabel/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/whitelabel/src/graphics/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] .text {
@@ -13,27 +13,25 @@ const css = `
     width: 50px;
     height: 50px;
   }
-`;
+`
 
 export const Icon = () => {
   return (
     <svg
       className="graphic-icon"
-      width="430"
+      fill="none"
       height="435"
       viewBox="0 0 430 435"
-      fill="none"
+      width="430"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <style>
-        {css}
-      </style>
+      <style>{css}</style>
       <rect
         className="bg"
-        width="430"
+        fill="#0C0C0C"
         height="434"
         transform="translate(0 0.154785)"
-        fill="#0C0C0C"
+        width="430"
       />
       <path
         className="text"
@@ -41,5 +39,5 @@ export const Icon = () => {
         fill="white"
       />
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/graphics/Logo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] path {
@@ -8,25 +8,20 @@ const css = `
   .graphic-logo {
     width: 150px;
     height: auto;
-  }`;
+  }`
 
 export const Logo = () => {
   return (
     <svg
       className="graphic-logo"
-      xmlns="http://www.w3.org/2000/svg"
       fill="#0F0F0F"
       viewBox="0 0 518 563"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <style type="text/css">
-        {css}
-      </style>
-      <g
-        transform="translate(0,563) scale(0.1,-0.1)"
-        fill="#000000"
-        stroke="none"
-      >
-        <path d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
+      <style type="text/css">{css}</style>
+      <g fill="#000000" stroke="none" transform="translate(0,563) scale(0.1,-0.1)">
+        <path
+          d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
           -2170z m1855 301 c52 -24 88 -63 117 -126 19 -42 23 -71 26 -182 4 -151 -8
           -213 -58 -281 -55 -77 -140 -107 -230 -83 -66 18 -105 53 -141 128 -31 61 -33
           74 -37 189 -5 145 16 233 69 298 60 72 169 97 254 57z m766 8 c74 -25 126 -85
@@ -39,15 +34,17 @@ export const Logo = () => {
           264 -19 144 13 296 79 366 60 63 167 84 247 47z m-2505 -296 l0 -305 165 0
           165 0 0 -35 0 -35 -210 0 -210 0 0 340 0 340 45 0 45 0 0 -305z"
         />
-        <path d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
+        <path
+          d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
           44 24 63 24 184 1 122 -2 140 -23 183 -13 26 -36 56 -51 67 -33 23 -102 26
           -140 6z"
         />
-        <path d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
+        <path
+          d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
           -120 2 -134 27 -187 30 -65 64 -88 129 -88 35 0 48 6 79 38 52 52 63 98 58
           257 -3 117 -6 134 -28 173 -14 24 -37 50 -52 58 -40 21 -110 18 -141 -6z"
         />
       </g>
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/payload.config.ts

@@ -1,12 +1,16 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { buildConfig } from 'payload/config';
-import path from 'path';
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
 
-import { Icon } from './graphics/Icon';
-import { Logo } from './graphics/Logo';
+import { Icon } from './graphics/Icon'
+import { Logo } from './graphics/Logo'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  serverURL: 'http://localhost:3000',
   admin: {
     // Add your own logo and icon here
     components: {
@@ -22,10 +26,13 @@ export default buildConfig({
       titleSuffix: '- Your App Name',
     },
   },
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+  editor: lexicalEditor({}),
+  secret: process.env.PAYLOAD_SECRET || '',
+  serverURL: 'http://localhost:3000',
   typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-});
+})

examples/whitelabel/src/server.ts

@@ -1,30 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable @typescript-eslint/no-var-requires */
-import express from 'express';
-import payload from 'payload';
-import path from 'path';
-
-require('dotenv').config();
-
-const app = express();
-
-// Redirect root to Admin panel
-app.get('/', (_, res) => {
-  res.redirect('/admin');
-});
-
-app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
-
-// Initialize Payload
-payload.init({
-  secret: process.env.PAYLOAD_SECRET,
-  mongoURL: process.env.MONGODB_URI,
-  express: app,
-  onInit: () => {
-    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
-  },
-});
-
-// Add your own express routes here
-
-app.listen(3000);

examples/whitelabel/tsconfig.json

@@ -1,18 +1,44 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react"
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true
-  }
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }