Merge branch 'fix/civicsignal_live_previews' of github.com:CodeForAfr…

…ica/ui into fix/civicsignal_live_previews

.dockerignore

@@ -10,3 +10,4 @@ README.md
 **/.turbo
 **/.vscode
 **/build
+**/media

.gitignore

@@ -57,7 +57,7 @@ storybook-static
 
 mongo-keyfile
 
-#Google credentials
+# Google credentials
 credentials.json
 
 # Sentry Config File
@@ -67,3 +67,6 @@ credentials.json
 # SQLite files
 **.db
 **.sqlite
+
+# Payload media folder
+media

apps/climatemappedafrica/.env

@@ -1,3 +1,3 @@
 SENTRY_ENVIRONMENT=local
 SENTRY_ORG=code-for-africa
-SENTRY_PROJECT=hurumapclimate
+SENTRY_PROJECT=climatemapafrica

apps/climatemappedafrica/.env.template

@@ -1,12 +1,4 @@
-# Learn more about ENV variables at https://github.com/WebDevStudios/nextjs-wordpress-starter/wiki/env-variables
-
-# Tells Next.js we're in development mode. You do not need a Vercel account for this.
-VERCEL_ENV="development"
-
-NEXT_PUBLIC_APP_URL = 'http://localhost:3000'
-
-# Allows Node to work with local, self-signed certificates.
-NODE_TLS_REJECT_UNAUTHORIZED="0"
+NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 # The domain where your images are hosted on.
 # See https://nextjs.org/docs/basic-features/image-optimization#domains
@@ -16,9 +8,6 @@ NEXT_PUBLIC_IMAGE_DOMAINS="cms.dev.codeforafrica.org"
 # See https://vega.github.io/vega/docs/api/view/#view_toImageURL
 NEXT_PUBLIC_IMAGE_SCALE_FACTOR=2
 
-# HURUmap URL
-HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"
-
 # openAFRICA domains
 # A comma-separated list of domains to openAFRICA (or any CKAN-based site domain)
 NEXT_PUBLIC_OPENAFRICA_DOMAINS=
@@ -28,11 +17,19 @@ NEXT_PUBLIC_OPENAFRICA_DOMAINS=
 # based site domain)
 NEXT_PUBLIC_SOURCEAFRICA_DOMAINS=
 
+# Google Analytics
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
+
 # AWS S3 bucket for storing images
-S3_UPLOAD_KEY=AAAAAAAAAAAAAAAAAAAA
-S3_UPLOAD_SECRET=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
-S3_UPLOAD_BUCKET=name-of-s3-bucket
-S3_UPLOAD_REGION=bucket-region-us-east-1
+S3_ACCESS_KEY_ID=AAAAAAAAAAAAAAAAAAAA
+S3_SECRET_ACCESS_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+S3_BUCKET=name-of-s3-bucket
+S3_REGION=bucket-region-us-east-1
 
-#Analytics
-NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = "G-xxxxxxxx"
+# Payload
+MONGO_URL="mongodb+srv://<user>:<pass>@host/db"
+PAYLOAD_PUBLIC_APP_URL="http://localhost:3000"
+PAYLOAD_SECRET="secure random string"
+
+# HURUmap
+HURUMAP_API_URL="https://ng.hurumap.org/api/v1/"

apps/climatemappedafrica/.eslintignore

@@ -0,0 +1,36 @@
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.pnpm-debug.log
+
+# typescript
+dist/
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# payload
+build/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+.now
+
+# turbo
+.turbo
+test-results/
+playwright-report/

apps/climatemappedafrica/next.config.js

@@ -13,6 +13,8 @@ module.exports = {
     domains: process.env.NEXT_PUBLIC_IMAGE_DOMAINS?.split(",")
       ?.map((d) => d.trim())
       ?.filter((d) => d),
+    loader: "custom",
+    loaderFile: "./payload.image.loader.js",
     unoptimized:
       process.env.NEXT_PUBLIC_IMAGE_UNOPTIMIZED?.trim()?.toLowerCase() ===
       "true",
@@ -23,7 +25,6 @@ module.exports = {
       transform: "@mui/material/{{member}}",
     },
   },
-  output: "standalone",
   reactStrictMode: false,
   transpilePackages: [
     "@commons-ui/core",

apps/climatemappedafrica/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.3",
   "private": true,
   "author": "Code for Africa <[email protected]>",
-  "description": "Climate Mapped Africa ",
+  "description": "ClimateMapped Africa",
   "keywords": [
     "climatemappedafrica",
     "next",
@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "@apollo/client": "catalog:",
-    "@commons-ui/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
+    "@commons-ui/legacy": "catalog:",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
     "@emotion/react": "catalog:",
@@ -64,7 +65,6 @@
     "next": "catalog:",
     "next-images": "catalog:",
     "next-seo": "catalog:",
-    "nodemailer-sendgrid": "catalog:",
     "papaparse": "catalog:",
     "payload": "catalog:",
     "plaiceholder": "catalog:",

apps/climatemappedafrica/payload.config.ts

@@ -34,12 +34,16 @@ const csrf =
     ?.map((d) => d.trim())
     ?.filter(Boolean) ?? [];
 
-const adapter = s3Adapter({
+const accessKeyId = process?.env?.S3_ACCESS_KEY_ID;
+const secretAccessKey = process?.env?.S3_SECRET_ACCESS_KEY;
+const enableCloudStorage = Boolean(accessKeyId && secretAccessKey);
+
+const cloudStorageAdapter = s3Adapter({
   config: {
     region: process?.env?.S3_REGION,
     credentials: {
-      accessKeyId: process?.env?.S3_ACCESS_KEY_ID,
-      secretAccessKey: process?.env?.S3_SECRET_ACCESS_KEY,
+      accessKeyId,
+      secretAccessKey,
     },
   },
   bucket: process?.env?.S3_BUCKET,
@@ -106,11 +110,11 @@ export default buildConfig({
   },
   plugins: [
     cloudStorage({
+      enabled: enableCloudStorage,
       collections: {
         media: {
-          adapter,
-          // TODO(kilemensi): Toogle this depending on ENV?
-          disableLocalStorage: false,
+          adapter: cloudStorageAdapter,
+          disableLocalStorage: enableCloudStorage,
           prefix: "media",
         },
       },

apps/climatemappedafrica/payload.image.loader.js

@@ -0,0 +1,12 @@
+"use client";
+
+import site from "@/climatemappedafrica/utils/site";
+
+export default function payloadImageLoader({ src }) {
+  // Handle relative paths (i.e. `/media`) only
+  if (src?.startsWith("/media")) {
+    // site.url has a trailing `/`
+    return `${site.url}${src.substring(1)}`;
+  }
+  return src;
+}

apps/climatemappedafrica/server.ts

@@ -2,18 +2,29 @@ import path from "path";
 import { spawn } from "child_process";
 import express from "express";
 import next from "next";
-import nodemailerSendgrid from "nodemailer-sendgrid";
-import payload from "payload";
-import { Payload } from "payload/dist/payload";
 import { loadEnvConfig } from "@next/env";
+import type { Payload } from "payload/dist/payload";
+
+// TODO(kilemensi): Figure out why alias "@/climatemappedafrica" doesn't work here
+import { getClient } from "./src/lib/payload/payload-client";
 
 const projectDir = process.cwd();
 loadEnvConfig(projectDir);
 
 const dev = process.env.NODE_ENV !== "production";
 const hostname = process.env.NEXT_HOSTNAME || "localhost";
 const port = parseInt(process.env.PORT || "3000", 10);
-const sendGridAPIKey = process.env.SENDGRID_API_KEY;
+// TODO(kilemensi): Migrate to SMTP email setup instead of SendGrid specific
+const smtpAuthPass = process.env.SMTP_PASS || process.env.SENDGRID_API_KEY;
+const smtpFromName =
+  process.env.SMTP_FROM_NAME ||
+  process.env.SENDGRID_FROM_NAME ||
+  "ClimateMapped Africa CMS";
+const smtpFromAddress =
+  process.env.SMTP_FROM_ADDRESS ||
+  process.env.SENDGRID_FROM_EMAIL ||
+  "[email protected]";
+const smtpPort = Number(process.env.SMTP_PORT || 587);
 
 if (!process.env.NEXT_MANUAL_SIG_HANDLE) {
   process.on("SIGTERM", () => process.exit(0));
@@ -25,24 +36,30 @@ const app = express();
 const start = async (): Promise<void> => {
   let localPayload: Payload;
   try {
-    localPayload = await payload.init({
-      ...(sendGridAPIKey
+    localPayload = await getClient({
+      ...(smtpAuthPass
         ? {
             email: {
-              transportOptions: nodemailerSendgrid({
-                apiKey: sendGridAPIKey,
-              }),
-              fromName:
-                process.env.SENDGRID_FROM_NAME || "ClimateMapped Africa CMS",
-              fromAddress:
-                process.env.SENDGRID_FROM_EMAIL || "[email protected]",
+              transportOptions: {
+                auth: {
+                  user: process.env.SMTP_USER || "apikey",
+                  apiKey: smtpAuthPass,
+                },
+                host: process.env.SMTP_HOST || "smtp.sendgrid.net",
+                port: smtpPort,
+                secure: smtpPort === 465, // true for port 465, false (the default) for 587 and others
+              },
+              fromName: smtpFromName,
+              fromAddress: smtpFromAddress,
             },
           }
         : undefined),
-      secret: process.env.PAYLOAD_SECRET,
       express: app,
+      local: false,
       onInit: (initPayload) => {
-        initPayload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
+        initPayload.logger.info(
+          `Payload Admin URL: ${initPayload.getAdminURL()}`,
+        );
       },
     });
   } catch (e: any) {

apps/climatemappedafrica/src/components/Card/Card.js

@@ -124,7 +124,7 @@ Card.propTypes = {
   descriptionProps: PropTypes.shape({}),
   embed: PropTypes.string,
   href: PropTypes.string,
-  image: PropTypes.string,
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
   imageProps: PropTypes.shape({}),
   linkProps: PropTypes.shape({}),
   media: PropTypes.string,

apps/climatemappedafrica/src/components/Card/Content.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
 import { CardContent } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";

apps/climatemappedafrica/src/components/Card/Media.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";

apps/climatemappedafrica/src/components/DataIndicators/Icon.js

@@ -22,7 +22,7 @@ function Icon({ item, handleIconClick, currentItemIndex, index }) {
       >
         <Image
           src={index === currentItemIndex ? secondaryIcon : primaryIcon}
-          layout="fill"
+          fill
         />
       </Box>
       <Typography

apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
 import { ButtonBase, Slide } from "@mui/material";
 import PropTypes from "prop-types";

apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/legacy";
 import { useMediaQuery, Box, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
@@ -83,7 +83,7 @@ DataVisualisationGuide.propTypes = {
   title: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      description: PropTypes.string || PropTypes.array,
+      description: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
       image: PropTypes.string,
     }),
   ),

apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js

@@ -16,7 +16,7 @@ import Link from "@/climatemappedafrica/components/Link";
 
 function DropdownSearch({
   href: hrefProp = "/explore",
-  label = "Search for a location",
+  label,
   locations,
   onClick,
   icon: IconProp = SearchIcon,
@@ -87,8 +87,8 @@ function DropdownSearch({
         component={iconComponent}
         viewBox="0 0 48 48"
         sx={{
-          width: 48,
-          height: 48,
+          width: 40,
+          height: 40,
           ...iconBorder,
         }}
       />
@@ -97,34 +97,35 @@ function DropdownSearch({
 
   return (
     <Box id="location-search">
-      <Typography
-        variant="body1"
-        sx={({ palette, typography }) => ({
-          color: palette.text.primary,
-          marginBottom: typography.pxToRem(10),
-        })}
-      >
-        {label}
-      </Typography>
+      {label && (
+        <Typography
+          variant="body1"
+          sx={({ palette, typography }) => ({
+            color: palette.text.primary,
+            marginBottom: typography.pxToRem(10),
+          })}
+        >
+          {label}
+        </Typography>
+      )}
       <InputBase
         inputProps={{ "aria-label": "search" }}
         onChange={handleChange}
         placeholder={placeholder}
         value={query}
-        {...props}
         sx={({ typography, palette }) => ({
           borderRadius: typography.pxToRem(10),
           color: palette.primary.main,
           border: `2px solid ${palette.text.hint}`,
           width: typography.pxToRem(278),
           backgroundColor: "inherit",
           height: typography.pxToRem(48),
-          padding: `0 ${typography.pxToRem(20)}`,
+          padding: 0,
           "&.MuiInputBase-input": {
             backgroundColor: "inherit",
             height: typography.pxToRem(48),
             borderRadius: typography.pxToRem(10),
-            padding: `0 ${typography.pxToRem(20)}`,
+            padding: 0,
             textTransform: "capitalize",
           },
           "&.Mui-focused": {