@/CivicSignalBlog - Use aliases in Payload CMS

apps/civicsignalblog/.eslintrc.js

@@ -1,6 +1,12 @@
 module.exports = {
   root: true,
   extends: ["eslint-config-commons-ui/next"],
+  rules: {
+    "react/jsx-filename-extension": [
+      "warn",
+      { extensions: [".js", ".jsx", "ts", ".tsx"] },
+    ],
+  },
   settings: {
     "import/resolver": {
       webpack: {

apps/civicsignalblog/package.json

@@ -21,11 +21,11 @@
     "url": "https://github.com/codeforafrica/ui/issues"
   },
   "scripts": {
-    "build-server": "tsc --project tsconfig.server.json",
+    "build-server": "tsc --project tsconfig.server.json && tsc-alias -p tsconfig.server.json",
     "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' ts-node --project tsconfig.server.json -r tsconfig-paths/register server.ts",
     "lint-check": "TIMING=1 eslint './'",
     "lint": "TIMING=1 eslint --fix './'",
     "jest": "jest",
@@ -98,6 +98,8 @@
     "prettier": "catalog:",
     "react-test-renderer": "catalog:",
     "ts-node": "catalog:",
+    "tsc-alias": "catalog:",
+    "tsconfig-paths": "catalog:",
     "typescript": "catalog:",
     "webpack": "catalog:"
   },

apps/civicsignalblog/payload.config.ts

@@ -1,5 +1,3 @@
-import path from "path";
-
 import { buildConfig } from "payload/config";
 import { slateEditor } from "@payloadcms/richtext-slate";
 import { mongooseAdapter } from "@payloadcms/db-mongodb";
@@ -11,20 +9,18 @@ import seo from "@payloadcms/plugin-seo";
 import nestedDocs from "@payloadcms/plugin-nested-docs";
 import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
 import { loadEnvConfig } from "@next/env";
-
+import resolveTsconfigPathsToAlias from "./tsconfigPathToWebpackAlias";
 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";
 import Main from "./src/payload/globals/Site/main";
 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";
@@ -81,7 +77,6 @@ export default buildConfig({
       }
     : undefined),
   admin: {
-    css: path.resolve(__dirname, "./src/payload/admin/scss/custom.scss"),
     user: Users.slug,
     components: {
       actions: [Actions],
@@ -100,6 +95,10 @@ export default buildConfig({
       ...config,
       resolve: {
         ...config.resolve,
+        alias: {
+          ...(config.resolve.alias || {}),
+          ...resolveTsconfigPathsToAlias(),
+        },
         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";
+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";
 
 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,9 @@
 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();
@@ -34,6 +36,7 @@ function BeforeDashboard() {
           }
 
           const data = await response.json();
+          // eslint-disable-next-line no-undef
           window.location.replace(`/admin?app=${encodeURI(data.currentApp)}`);
         } catch (error) {
           console.error("Error updating current app:", 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,