Merge pull request #747 from CodeForAfrica/ft/blockify-components

Blockify CMS Blocks

apps/roboshield/package.json

@@ -11,7 +11,8 @@
     "clean": "rm -rf .next .turbo node_modules",
     "jest": "jest --passWithNoTests",
     "lint-check": "TIMING=1 next lint './'",
-    "lint": "TIMING=1 next lint --fix './'"
+    "lint": "TIMING=1 next lint --fix './'",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
     "@commons-ui/core": "workspace:*",
@@ -70,6 +71,6 @@
     "jest-config-commons-ui": "workspace:*",
     "prettier": "3.1.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.2"
+    "typescript": "5.4.5"
   }
 }

apps/roboshield/payload-types.ts

@@ -0,0 +1,224 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * This file was automatically generated by Payload.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+export interface Config {
+  collections: {
+    media: Media;
+    pages: Page;
+    users: User;
+    "payload-preferences": PayloadPreference;
+    "payload-migrations": PayloadMigration;
+  };
+  globals: {
+    "settings-site": SettingsSite;
+  };
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media".
+ */
+export interface Media {
+  id: string;
+  alt: string;
+  prefix?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "pages".
+ */
+export interface Page {
+  id: string;
+  title: string;
+  fullTitle?: string | null;
+  slug?: string | null;
+  blocks?:
+    | {
+        title: string;
+        subtitle: string;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: "page-header";
+      }[]
+    | null;
+  meta?: {
+    title?: string | null;
+    description?: string | null;
+    image?: string | Media | null;
+  };
+  parent?: (string | null) | Page;
+  breadcrumbs?:
+    | {
+        doc?: (string | null) | Page;
+        url?: string | null;
+        label?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt: string;
+  createdAt: string;
+  _status?: ("draft" | "published") | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users".
+ */
+export interface User {
+  id: string;
+  firstName: string;
+  lastName: string;
+  roles: ("admin" | "editor")[];
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  _verified?: boolean | null;
+  _verificationToken?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  password: string | null;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-preferences".
+ */
+export interface PayloadPreference {
+  id: string;
+  user: {
+    relationTo: "users";
+    value: string | User;
+  };
+  key?: string | null;
+  value?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "payload-migrations".
+ */
+export interface PayloadMigration {
+  id: string;
+  name?: string | null;
+  batch?: number | null;
+  updatedAt: string;
+  createdAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "settings-site".
+ */
+export interface SettingsSite {
+  id: string;
+  title: string;
+  description: {
+    [k: string]: unknown;
+  }[];
+  primaryLogo: string | Media;
+  secondaryLogo?: string | Media | null;
+  primaryNavigation?: {
+    menus?:
+      | {
+          label: string;
+          linkType?: ("custom" | "internal") | null;
+          doc?: {
+            relationTo: "pages";
+            value: string | Page;
+          } | null;
+          url?: string | null;
+          href: string;
+          id?: string | null;
+        }[]
+      | null;
+    connect?:
+      | ("Facebook" | "Twitter" | "Instagram" | "Linkedin" | "Github" | "Slack")
+      | null;
+  };
+  secondaryNavigation?: {
+    menus?:
+      | {
+          label: string;
+          linkType?: ("custom" | "internal") | null;
+          doc?: {
+            relationTo: "pages";
+            value: string | Page;
+          } | null;
+          url?: string | null;
+          href: string;
+          id?: string | null;
+        }[]
+      | null;
+  };
+  connect: {
+    title: string;
+    links?:
+      | {
+          platform:
+            | "Facebook"
+            | "Twitter"
+            | "Instagram"
+            | "Linkedin"
+            | "Github"
+            | "Slack";
+          url: string;
+          id?: string | null;
+        }[]
+      | null;
+  };
+  newsletter: {
+    title: string;
+    embedCode: string;
+  };
+  initiative: {
+    title: string;
+    description: {
+      [k: string]: unknown;
+    }[];
+    partners?:
+      | {
+          name: string;
+          logo: string | Media;
+          label: string;
+          linkType?: ("custom" | "internal") | null;
+          doc?: {
+            relationTo: "pages";
+            value: string | Page;
+          } | null;
+          url?: string | null;
+          href: string;
+          id?: string | null;
+        }[]
+      | null;
+  };
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
+
+declare module "payload" {
+  export interface GeneratedTypes extends Config {}
+}

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

@@ -0,0 +1,24 @@
+import PageHeader from "@/roboshield/components/PageHeader/PageHeader";
+import { Page } from "@/root/payload-types";
+
+interface BlockRendererProps extends Pick<Page, "blocks"> {}
+
+const components = {
+  "page-header": PageHeader,
+};
+
+export default function BlockRenderer({ blocks }: BlockRendererProps) {
+  return (
+    <>
+      {blocks?.map((block, index) => {
+        const Component = components[block.blockType];
+
+        if (Component) {
+          return <Component key={index} {...block} />;
+        }
+
+        return null;
+      })}
+    </>
+  );
+}

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

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

apps/roboshield/src/components/Footer/Footer.tsx

@@ -8,9 +8,11 @@ import StayInTouch from "@/roboshield/components/StayInTouch";
 import RichText from "@/roboshield/components/RichText";
 import type { Children } from "@/roboshield/components/RichText";
 import FooterDescription from "./FooterDescription";
-import { Partner } from "@/roboshield/lib/data/payload.types";
+import { SettingsSite } from "@/root/payload-types";
 import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon";
 
+type Partner = SettingsSite["initiative"]["partners"];
+
 export interface FooterProps {
   connect: {
     links: SocialMediaLink[];

apps/roboshield/src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,42 @@
+import { Section } from "@commons-ui/core";
+import { RichTypography } from "@commons-ui/next";
+import TwoToneBackground from "@/roboshield/components/TwoToneBackground";
+import { Page } from "@/root/payload-types";
+import { ExtractBlockType } from "@/roboshield/utils/blocks";
+
+type PageHeaderProps = ExtractBlockType<
+  NonNullable<Page["blocks"]>[number],
+  "page-header"
+>;
+
+export default function PageHeader({ title, subtitle }: PageHeaderProps) {
+  return (
+    <>
+      <TwoToneBackground sx={{ backgroundColor: "background.default" }}>
+        <Section
+          sx={{
+            px: { xs: 2.5, sm: 0 },
+            py: { xs: 3.75, sm: 5.5, md: 6.75, lg: 9.6 },
+            zIndex: 1,
+            textAlign: "center",
+          }}
+        >
+          <RichTypography
+            component="h2"
+            sx={{
+              color: "primary.main",
+              paddingBottom: 2.5,
+              textTransform: "uppercase",
+            }}
+            variant="h5ExtraBold"
+          >
+            {title}
+          </RichTypography>
+          <RichTypography component="h2" variant="h2">
+            {subtitle}
+          </RichTypography>
+        </Section>
+      </TwoToneBackground>
+    </>
+  );
+}

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

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

apps/roboshield/src/components/TwoToneBackground/TwoToneBackground.tsx

@@ -0,0 +1,55 @@
+import { Box } from "@mui/material";
+import { alpha, styled, Theme } from "@mui/material/styles";
+import React from "react";
+
+import bg from "@/roboshield/assets/images/1920x668px bg - 2 2.png";
+
+const TwoToneBackgroundRoot = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  width: "100%",
+  position: "relative",
+  backgroundColor: theme.palette.background.default,
+  backgroundImage: `url('${bg.src}')`,
+  backgroundPosition: "top left",
+  "&:before": {
+    content: '""',
+    top: 0,
+    left: 0,
+    position: "absolute",
+    height: "100%",
+    width: "100%",
+    background: `linear-gradient(to right, ${theme.palette.background.default}, transparent 30%)`,
+    [theme.breakpoints.up("sm")]: {
+      background: `linear-gradient(to right, ${theme.palette.background.default} 20%, transparent 30%)`,
+    },
+    [theme.breakpoints.up("md")]: {
+      background: `linear-gradient(to right, ${
+        theme.palette.background.default
+      } 30%, transparent 40%, transparent 95%, ${alpha(
+        theme.palette.background.default,
+        0.7,
+      )} 98%)`,
+    },
+    [theme.breakpoints.up("lg")]: {
+      background: `linear-gradient(to right, ${theme.palette.background.default} 30%, transparent 40%, transparent 95%, ${theme.palette.background.default} 99%)`,
+    },
+    [theme.breakpoints.up("xl")]: {
+      background: `linear-gradient(to right, ${theme.palette.background.default} 35%, transparent 45%, transparent 80%, ${theme.palette.background.default} 90%)`,
+    },
+  },
+}));
+
+interface Props {
+  children: React.ReactNode;
+  sx: any;
+}
+
+const TwoToneBackground = React.forwardRef(function TwoToneBackground({
+  children,
+  ...props
+}: Props) {
+  return <TwoToneBackgroundRoot {...props}>{children}</TwoToneBackgroundRoot>;
+});
+
+export default TwoToneBackground;

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

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