Merge pull request #744 from CodeForAfrica/ft/roboshield-about-page-cms

About Page CMS

apps/roboshield/payload-types.ts

@@ -55,6 +55,57 @@ export interface Page {
             blockName?: string | null;
             blockType: "page-header";
           }
+        | {
+            content?:
+              | (
+                  | {
+                      content: {
+                        [k: string]: unknown;
+                      }[];
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "richtext";
+                    }
+                  | {
+                      image: string | Media;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "mediaBlock";
+                    }
+                  | {
+                      externalEmbeddFields?: {
+                        embedType?: ("url" | "code") | null;
+                        url?: string | null;
+                        caption?: string | null;
+                        code?: string | null;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "externalEmbedd";
+                    }
+                )[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "content";
+          }
+        | {
+            title: string;
+            statistics?:
+              | {
+                  name: string;
+                  value: string;
+                  description: {
+                    [k: string]: unknown;
+                  }[];
+                  icon?: string | Media | null;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "statistics";
+          }
         | {
             toolTipText: string;
             steps?:

apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx

@@ -1,4 +1,6 @@
-import PageHeader from "@/roboshield/components/PageHeader/PageHeader";
+import PageHeader from "@/roboshield/components/PageHeader";
+import Content from "@/roboshield/components/Content";
+import Statistics from "@/roboshield/components/Statistics";
 import { Page } from "@/root/payload-types";
 import RoboForm from "@/roboshield/components/RoboForm";
 import { FC } from "react";
@@ -7,17 +9,19 @@ interface BlockRendererProps extends Pick<Page, "blocks"> {}
 
 const components = {
   "page-header": PageHeader,
+  content: Content,
+  statistics: Statistics,
   "robo-form": RoboForm,
 };
 
 export default function BlockRenderer({ blocks }: BlockRendererProps) {
   return (
     <>
-      {blocks?.map((block, index) => {
+      {blocks?.map((block) => {
         const Component: FC<any> = components[block.blockType];
 
         if (Component) {
-          return <Component key={index} {...block} />;
+          return <Component key={block.blockType} {...block} />;
         }
 
         return null;

apps/roboshield/src/components/Content/Content.tsx

@@ -0,0 +1,63 @@
+import { Section } from "@commons-ui/core";
+import { Page } from "@/root/payload-types";
+import {
+  ExtractBlockType,
+  ExtractNestedBlockType,
+} from "@/roboshield/utils/blocks";
+import LongFormRichText from "@/roboshield/components/LongFormRichText";
+import LongFormMedia from "@/roboshield/components/LongFormMedia";
+import LongFormExternalEmbed from "@/roboshield/components/LongFormExternalEmbed";
+
+type ContentProps = ExtractBlockType<
+  NonNullable<Page["blocks"]>[number],
+  "content"
+>;
+
+export type ExternalEmbeddBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "externalEmbedd"
+>;
+
+export type RichTextBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "richtext"
+>;
+
+export type MediaBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "mediaBlock"
+>;
+
+type ComponentMap = {
+  richtext: (props: RichTextBlock) => JSX.Element;
+  mediaBlock?: (props: MediaBlock) => JSX.Element;
+  externalEmbedd?: (props: ExternalEmbeddBlock) => JSX.Element;
+};
+export default function Content({ content }: ContentProps) {
+  const COMPONENT_BY_CONTENT_TYPE: ComponentMap = {
+    richtext: LongFormRichText,
+    mediaBlock: LongFormMedia,
+    externalEmbedd: LongFormExternalEmbed,
+  };
+
+  return (
+    <Section
+      component="section"
+      variant="body3"
+      sx={{
+        px: { xs: 2.5, sm: 0 },
+        my: 10,
+      }}
+    >
+      {content?.map((child) => {
+        const Component = COMPONENT_BY_CONTENT_TYPE[child.blockType];
+
+        if (Component) {
+          return <Component key={child.id} {...child} />;
+        }
+
+        return null;
+      })}
+    </Section>
+  );
+}

apps/roboshield/src/components/Content/index.ts

@@ -0,0 +1,3 @@
+import Content from "./Content";
+
+export default Content;

apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx

@@ -0,0 +1,30 @@
+import { RichTypography } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+import { ExternalEmbeddBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormExternalEmbed(props: ExternalEmbeddBlock) {
+  const { externalEmbeddFields: { code = "", caption = "", url = "" } = {} } =
+    props;
+
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      {code && <RichTypography>{code}</RichTypography>}
+      {url && (
+        <iframe
+          src={url}
+          title={caption!}
+          style={{
+            width: "100%",
+            height: "500px",
+            border: "none",
+          }}
+        />
+      )}
+    </Box>
+  );
+}

apps/roboshield/src/components/LongFormExternalEmbed/index.ts

@@ -0,0 +1,3 @@
+import LongFormExternalEmbed from "./LongFormExternalEmbed";
+
+export default LongFormExternalEmbed;

apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx

@@ -0,0 +1,43 @@
+import { Figure } from "@commons-ui/next";
+import { Box } from "@mui/material";
+import React from "react";
+import { MediaBlock } from "@/roboshield/components/Content/Content";
+import { Media } from "@/root/payload-types";
+
+export default function LongFormMedia({ image }: MediaBlock) {
+  const mediaImage = image as Media;
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      <Figure
+        ImageProps={{
+          alt: mediaImage.alt,
+          sx: {
+            objectFit: "cover",
+            position: "relative !important",
+          },
+          src: mediaImage.url,
+        }}
+        sx={{
+          height: {
+            xs: "200px",
+            md: "500px",
+          },
+          width: "100%",
+        }}
+      >
+        <figcaption
+          style={{
+            width: "100%",
+            margin: "0 auto",
+          }}
+        >
+          {mediaImage.alt}
+        </figcaption>
+      </Figure>
+    </Box>
+  );
+}

apps/roboshield/src/components/LongFormMedia/index.ts

@@ -0,0 +1,3 @@
+import LongFormMedia from "./LongFormMedia";
+
+export default LongFormMedia;

apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import RichText from "@/roboshield/components/RichText";
+import { RichTextBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormRichText({ content }: RichTextBlock) {
+  return (
+    <RichText
+      elements={content}
+      sx={(theme) => ({
+        color: "inherit",
+        "& a, & a:visited, & a:hover": {
+          color: "inherit",
+        },
+        "& h1": {
+          ...theme.typography.h1,
+          mb: 3.75,
+          mt: 5,
+        },
+        "& h2": {
+          mb: 2.5,
+          mt: 5,
+          ...theme.typography.h2,
+        },
+        "& h3": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h3,
+        },
+        "& h4": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h4,
+        },
+        "& h5": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h5Small,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.h5,
+          },
+        },
+        "& h6": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h6,
+        },
+        "& p": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& a": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& ul": {
+          mb: 2,
+        },
+        "& li": {
+          ...theme.typography.body1,
+          mt: 1,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& :last-child": {
+          mb: 0,
+        },
+      })}
+    />
+  );
+}

apps/roboshield/src/components/LongFormRichText/index.ts

@@ -0,0 +1,3 @@
+import LongFormRichText from "./LongFormRichText";
+
+export default LongFormRichText;