@/CivicSignalBlog - Use aliases in Payload CMS

apps/civicsignalblog/.eslintrc.js

@@ -6,6 +6,10 @@ module.exports = {
       webpack: {
         config: "./eslint.webpack.config.js",
       },
+      typescript: {
+        alwaysTryTypes: false, // we mostly have JS thus we don't need types automatically resolved
+        project: "./tsconfig.json",
+      },
     },
   },
 };

apps/civicsignalblog/eslint.webpack.config.js

@@ -23,4 +23,8 @@ module.exports = {
     },
     extensions: [".js"],
   },
+  typescript: {
+    alwaysTryTypes: false,
+    project: "./tsconfig.json",
+  },
 };

apps/civicsignalblog/package.json

@@ -25,7 +25,7 @@
     "build-next": "NEXT_BUILD=true pnpm build-server && NEXT_BUILD=true PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} node dist/server.js",
     "build-payload": "payload build",
     "start": "PAYLOAD_CONFIG_PATH=${PAYLOAD_CONFIG_PATH:-dist/payload.config.js} NODE_ENV=${NODE_ENV:-production} node dist/server.js",
-    "dev": "NODE_OPTIONS='--inspect' ts-node --project tsconfig.server.json server.ts",
+    "dev": "NODE_OPTIONS='--inspect --conditions=dev' ts-node --project tsconfig.server.json server.ts",
     "lint-check": "TIMING=1 eslint './'",
     "lint": "TIMING=1 eslint --fix './'",
     "jest": "jest",
@@ -88,6 +88,7 @@
     "babel-jest": "catalog:",
     "eslint": "catalog:",
     "eslint-config-commons-ui": "workspace:*",
+    "eslint-import-resolver-typescript": "catalog:",
     "eslint-import-resolver-webpack": "catalog:",
     "eslint-plugin-import": "catalog:",
     "identity-obj-proxy": "catalog:",
@@ -102,5 +103,15 @@
   },
   "engines": {
     "node": "20.x"
+  },
+  "imports": {
+    "#civicsignalblog/*": {
+      "dev": [
+        "./src/*.js"
+      ],
+      "default": [
+        "./dist/src/*.js"
+      ]
+    }
   }
 }

apps/civicsignalblog/payload.config.ts

@@ -12,11 +12,11 @@ import nestedDocs from "@payloadcms/plugin-nested-docs";
 import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
 import { loadEnvConfig } from "@next/env";
 
+import Actions from "./src/payload/components/actions";
 import Authors from "./src/payload/collections/Research/Authors";
 import Media from "./src/payload/collections/Research/Media";
 import Pages from "./src/payload/collections/Research/Pages";
 import CivicSignalPages from "./src/payload/collections/Main/Pages";
-
 import Posts from "./src/payload/collections/Research/Posts";
 import Publication from "./src/payload/globals/Publication";
 import Research from "./src/payload/globals/Site/research";
@@ -25,8 +25,6 @@ import Tags from "./src/payload/collections/Research/Tags";
 import Users from "./src/payload/collections/Users";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
 
-import Actions from "./src/payload/components/actions";
-
 const dev = process.env.NODE_ENV !== "production";
 const projectDir = process.cwd();
 loadEnvConfig(projectDir, dev);
@@ -81,7 +79,6 @@ export default buildConfig({
       }
     : undefined),
   admin: {
-    css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
     user: Users.slug,
     components: {
       actions: [Actions],
@@ -100,6 +97,10 @@ export default buildConfig({
       ...config,
       resolve: {
         ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "#civicsignalblog": path.resolve(__dirname, "src"),
+        },
         fallback: {
           ...config?.resolve?.fallback,
           fs: false,

apps/civicsignalblog/src/payload/access/applications/main.js

@@ -1,5 +1,5 @@
-import { MAIN } from "../../lib/data/common/applications";
-import canAccessApplication from "../canAccessApplication";
+import canAccessApplication from "#civicsignalblog/payload/access/canAccessApplication";
+import { MAIN } from "#civicsignalblog/payload/lib/data/common/applications";
 
 const canRead = ({ req: { user } }) => {
   return canAccessApplication(user, MAIN);

apps/civicsignalblog/src/payload/access/applications/research.js

@@ -1,5 +1,5 @@
-import { RESEARCH } from "../../lib/data/common/applications";
-import canAccessApplication from "../canAccessApplication";
+import canAccessApplication from "#civicsignalblog/payload/access/canAccessApplication";
+import { RESEARCH } from "#civicsignalblog/payload/lib/data/common/applications";
 
 const canRead = ({ req: { user } }) => {
   return canAccessApplication(user, RESEARCH);

apps/civicsignalblog/src/payload/blocks/CustomPageHeader.js

@@ -1,4 +1,4 @@
-import image from "../fields/image";
+import image from "#civicsignalblog/payload/fields/image";
 
 const CustomPageHeader = {
   slug: "custom-page-header",

apps/civicsignalblog/src/payload/blocks/Error.js

@@ -1,6 +1,6 @@
 import { slateEditor } from "@payloadcms/richtext-slate";
 
-import richText from "../fields/richText";
+import richText from "#civicsignalblog/payload/fields/richText";
 
 const Error = {
   slug: "error",

apps/civicsignalblog/src/payload/blocks/ExternalEmbed.js

@@ -1,4 +1,4 @@
-import blockFields from "../fields/blockFields";
+import blockFields from "#civicsignalblog/payload/fields/blockFields";
 
 const ExternalEmbed = {
   slug: "external-embed",

apps/civicsignalblog/src/payload/blocks/FeaturedStories.js

@@ -1,4 +1,4 @@
-import linkGroup from "../fields/links/linkGroup";
+import linkGroup from "#civicsignalblog/payload/fields/links/linkGroup";
 
 const FeaturedStories = {
   slug: "featured-stories",

apps/civicsignalblog/src/payload/blocks/LongForm.js

@@ -1,4 +1,4 @@
-import content from "../fields/content";
+import content from "#civicsignalblog/payload/fields/content";
 
 const LongForm = {
   slug: "longform",

apps/civicsignalblog/src/payload/blocks/MediaBlock.js

@@ -1,4 +1,4 @@
-import blockFields from "../fields/blockFields";
+import blockFields from "#civicsignalblog/payload/fields/blockFields";
 
 const MediaBlock = {
   slug: "mediaBlock",

apps/civicsignalblog/src/payload/blocks/RichText.js

@@ -1,7 +1,7 @@
 import { slateEditor } from "@payloadcms/richtext-slate";
 
-import blockFields from "../fields/blockFields";
-import richText from "../fields/richText";
+import blockFields from "#civicsignalblog/payload/fields/blockFields";
+import richText from "#civicsignalblog/payload/fields/richText";
 
 const RichText = {
   slug: "richText",

apps/civicsignalblog/src/payload/collections/Main/Pages.js

@@ -1,12 +1,12 @@
-import canRead from "../../access/applications/main";
-import CustomPageHeader from "../../blocks/CustomPageHeader";
-import Error from "../../blocks/Error";
-import FeaturedStories from "../../blocks/FeaturedStories";
-import LongForm from "../../blocks/LongForm";
-import PageHeader from "../../blocks/PageHeader";
-import Posts from "../../blocks/Posts";
-import { MAIN } from "../../lib/data/common/applications";
-import pages from "../../utils/createPagesCollection";
+import canRead from "#civicsignalblog/payload/access/applications/main";
+import CustomPageHeader from "#civicsignalblog/payload/blocks/CustomPageHeader";
+import Error from "#civicsignalblog/payload/blocks/Error";
+import FeaturedStories from "#civicsignalblog/payload/blocks/FeaturedStories";
+import LongForm from "#civicsignalblog/payload/blocks/LongForm";
+import PageHeader from "#civicsignalblog/payload/blocks/PageHeader";
+import Posts from "#civicsignalblog/payload/blocks/Posts";
+import { MAIN } from "#civicsignalblog/payload/lib/data/common/applications";
+import pages from "#civicsignalblog/payload/utils/createPagesCollection";
 
 const Pages = pages({
   pageSlug: `${MAIN}-pages`,

apps/civicsignalblog/src/payload/collections/Research/Authors.js

@@ -1,4 +1,4 @@
-import canRead from "../../access/applications/research";
+import canRead from "#civicsignalblog/payload/access/applications/research";
 
 const Authors = {
   slug: "author",

apps/civicsignalblog/src/payload/collections/Research/Pages.js

@@ -1,12 +1,12 @@
-import canRead from "../../access/applications/research";
-import CustomPageHeader from "../../blocks/CustomPageHeader";
-import Error from "../../blocks/Error";
-import FeaturedStories from "../../blocks/FeaturedStories";
-import LongForm from "../../blocks/LongForm";
-import PageHeader from "../../blocks/PageHeader";
-import Posts from "../../blocks/Posts";
-import { RESEARCH } from "../../lib/data/common/applications";
-import pages from "../../utils/createPagesCollection";
+import canRead from "#civicsignalblog/payload/access/applications/research";
+import CustomPageHeader from "#civicsignalblog/payload/blocks/CustomPageHeader";
+import Error from "#civicsignalblog/payload/blocks/Error";
+import FeaturedStories from "#civicsignalblog/payload/blocks/FeaturedStories";
+import LongForm from "#civicsignalblog/payload/blocks/LongForm";
+import PageHeader from "#civicsignalblog/payload/blocks/PageHeader";
+import Posts from "#civicsignalblog/payload/blocks/Posts";
+import { RESEARCH } from "#civicsignalblog/payload/lib/data/common/applications";
+import pages from "#civicsignalblog/payload/utils/createPagesCollection";
 
 const Pages = pages({
   pageSlug: `${RESEARCH}-pages`,

apps/civicsignalblog/src/payload/collections/Research/Posts.js

@@ -1,11 +1,11 @@
-import canRead from "../../access/applications/research";
-import authors from "../../fields/authors";
-import content from "../../fields/content";
-import image from "../../fields/image";
-import publishedOn from "../../fields/publishedOn";
-import slug from "../../fields/slug";
-import tags from "../../fields/tags";
-import formatDraftUrl from "../../utils/formatDraftUrl";
+import canRead from "#civicsignalblog/payload/access/applications/research";
+import authors from "#civicsignalblog/payload/fields/authors";
+import content from "#civicsignalblog/payload/fields/content";
+import image from "#civicsignalblog/payload/fields/image";
+import publishedOn from "#civicsignalblog/payload/fields/publishedOn";
+import slug from "#civicsignalblog/payload/fields/slug/index";
+import tags from "#civicsignalblog/payload/fields/tags";
+import formatDraftUrl from "#civicsignalblog/payload/utils/formatDraftUrl";
 
 const Posts = {
   slug: "posts",

apps/civicsignalblog/src/payload/collections/Research/Tags.js

@@ -1,5 +1,5 @@
-import canRead from "../../access/applications/research";
-import slug from "../../fields/slug";
+import canRead from "#civicsignalblog/payload/access/applications/research";
+import slug from "#civicsignalblog/payload/fields/slug/index";
 
 const Tags = {
   slug: "tag",

apps/civicsignalblog/src/payload/collections/Users.js

@@ -1,12 +1,20 @@
 import payload from "payload";
 
-import { isAdmin, isAdminFieldLevel } from "../access/isAdmin";
+import {
+  isAdmin,
+  isAdminFieldLevel,
+} from "#civicsignalblog/payload/access/isAdmin";
 import {
   isAdminOrSelf,
   isAdminOrSelfFieldLevel,
-} from "../access/isAdminOrSelf";
-import { ROLE_DEFAULT, ROLE_OPTIONS } from "../access/roles";
-import applications, { RESEARCH } from "../lib/data/common/applications";
+} from "#civicsignalblog/payload/access/isAdminOrSelf";
+import {
+  ROLE_DEFAULT,
+  ROLE_OPTIONS,
+} from "#civicsignalblog/payload/access/roles";
+import applications, {
+  RESEARCH,
+} from "#civicsignalblog/payload/lib/data/common/applications";
 
 const Users = {
   slug: "users",

apps/civicsignalblog/src/payload/components/actions/index.tsx

@@ -1,7 +1,11 @@
+/* eslint-env browser */
+
 import { useAuth } from "payload/components/utilities";
 import React, { useEffect, useState } from "react";
 
-import applications, { RESEARCH } from "../../lib/data/common/applications";
+import applications, {
+  RESEARCH,
+} from "#civicsignalblog/payload/lib/data/common/applications";
 
 function BeforeDashboard() {
   const { user } = useAuth();
@@ -32,7 +36,6 @@ function BeforeDashboard() {
           if (!response.ok) {
             throw new Error("Network response was not ok");
           }
-
           const data = await response.json();
           window.location.replace(`/admin?app=${encodeURI(data.currentApp)}`);
         } catch (error) {
@@ -44,7 +47,7 @@ function BeforeDashboard() {
     };
 
     updateCurrentApp();
-  }, [selectedApp]);
+  }, [selectedApp, user.currentApp]);
 
   const handleChange = (event) => {
     const selectedValue = event.target.value;
@@ -64,12 +67,11 @@ function BeforeDashboard() {
           Loading...
         </p>
       ) : (
-        <>
-          <label
-            style={{ marginRight: "10px", color: "var(--theme-elevation-500)" }}
-          >
-            Application:
-          </label>
+        <label
+          htmlFor="lang"
+          style={{ marginRight: "10px", color: "var(--theme-elevation-500)" }}
+        >
+          Application:
           <select
             id="lang"
             onChange={handleChange}
@@ -89,7 +91,7 @@ function BeforeDashboard() {
               </option>
             ))}
           </select>
-        </>
+        </label>
       )}
     </div>
   );

apps/civicsignalblog/src/payload/fields/content.js

@@ -1,8 +1,8 @@
 import { deepmerge } from "@mui/utils";
 
-import ExternalEmbed from "../blocks/ExternalEmbed";
-import MediaBlock from "../blocks/MediaBlock";
-import RichText from "../blocks/RichText";
+import ExternalEmbed from "#civicsignalblog/payload/blocks/ExternalEmbed";
+import MediaBlock from "#civicsignalblog/payload/blocks/MediaBlock";
+import RichText from "#civicsignalblog/payload/blocks/RichText";
 
 const content = (overrides) =>
   deepmerge(

apps/civicsignalblog/src/payload/fields/links/link.js

@@ -1,7 +1,10 @@
 import { deepmerge } from "@mui/utils";
 
-import { RESEARCH, MAIN } from "../../lib/data/common/applications";
-import mapLinkTypeToHref from "../../utils/mapLinkTypeToHref";
+import {
+  RESEARCH,
+  MAIN,
+} from "#civicsignalblog/payload/lib/data/common/applications";
+import mapLinkTypeToHref from "#civicsignalblog/payload/utils/mapLinkTypeToHref";
 
 export async function mapLinkToHrefBeforeValidate({
   siblingData,

apps/civicsignalblog/src/payload/fields/richText.js

@@ -1,6 +1,6 @@
 import { deepmerge } from "@mui/utils";
 
-import mapLinkTypeToHref from "../utils/mapLinkTypeToHref";
+import mapLinkTypeToHref from "#civicsignalblog/payload/utils/mapLinkTypeToHref";
 
 async function insertHref(nodes, payload) {
   if (!nodes?.length) {

apps/civicsignalblog/src/payload/globals/Publication/index.js

@@ -1,7 +1,7 @@
-import canRead from "../../access/applications/research";
-
 import PostTab from "./PostTab";
 
+import canRead from "#civicsignalblog/payload/access/applications/research";
+
 const Publication = {
   slug: "settings-publication",
   label: "Publication",

apps/civicsignalblog/src/payload/globals/Site/Components/EngagementTab.js

@@ -1,4 +1,4 @@
-import socialLinks from "../../../fields/socialLinks";
+import socialLinks from "#civicsignalblog/payload/fields/socialLinks";
 
 const EngagementTab = {
   label: "Engagement",

apps/civicsignalblog/src/payload/globals/Site/Components/GeneralTab.js

@@ -1,5 +1,5 @@
-import image from "../../../fields/image";
-import richText from "../../../fields/richText";
+import image from "#civicsignalblog/payload/fields/image";
+import richText from "#civicsignalblog/payload/fields/richText";
 
 const GeneralTab = {
   label: "General",

apps/civicsignalblog/src/payload/globals/Site/Components/NavigationTab.js

@@ -1,6 +1,6 @@
-import link from "../../../fields/links/link";
-import linkArray from "../../../fields/links/linkArray";
-import { socialMediaOptions } from "../../../fields/socialLinks";
+import link from "#civicsignalblog/payload/fields/links/link";
+import linkArray from "#civicsignalblog/payload/fields/links/linkArray";
+import { socialMediaOptions } from "#civicsignalblog/payload/fields/socialLinks";
 
 const linkField = link({
   disableOpenInNewTab: true,