Merge pull request #742 from CodeForAfrica/fix/roboshield_richtext

Fix @/roboshield RichText types
CodeForAfrica · Jun 27, 2024 · 26d688c · 26d688c
2 parents f5264c5 + 9f2c789
commit 26d688c
Show file tree

Hide file tree

Showing 9 changed files with 545 additions and 624 deletions.
diff --git a/apps/charterafrica/package.json b/apps/charterafrica/package.json
@@ -69,7 +69,7 @@
     "next": "^14.2.4",
     "next-seo": "^6.5.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "^2.22.1",
+    "payload": "^2.22.2",
     "prop-types": "^15.8.1",
     "qs": "^6.12.1",
     "react": "^18.3.1",

diff --git a/apps/codeforafrica/package.json b/apps/codeforafrica/package.json
@@ -63,7 +63,7 @@
     "next": "^14.2.4",
     "next-seo": "^6.5.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "^2.22.1",
+    "payload": "^2.22.2",
     "prop-types": "^15.8.1",
     "qs": "^6.12.1",
     "react": "^18.3.1",

diff --git a/apps/commons-ui-docs/package.json b/apps/commons-ui-docs/package.json
@@ -46,22 +46,22 @@
   "devDependencies": {
     "@babel/core": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/cli": "^8.1.10",
-    "@storybook/nextjs": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/test": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/cli": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
     "eslint-config-commons-ui": "workspace:*",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-import": "^2.29.1",
     "prettier": "^3.3.2",
-    "storybook": "^8.1.10",
+    "storybook": "^8.1.11",
     "typescript": "^5.5.2",
     "webpack": "^5.92.1"
   },

diff --git a/apps/pesayetu/package.json b/apps/pesayetu/package.json
@@ -32,7 +32,7 @@
     "clean": "rm -rf .next .turbo node_modules"
   },
   "dependencies": {
-    "@apollo/client": "^3.10.6",
+    "@apollo/client": "^3.10.7",
     "@commons-ui/core": "^0.1.0",
     "@commons-ui/next": "workspace:*",
     "@emotion/react": "^11.11.4",
@@ -42,7 +42,7 @@
     "@mui/styles": "^5.15.20",
     "@mui/utils": "^5.15.20",
     "@reactour/tour": "^3.7.0",
-    "aws-sdk": "^2.1648.0",
+    "aws-sdk": "^2.1649.0",
     "clsx": "^2.1.1",
     "d3-format": "^3.1.0",
     "deepmerge": "^4.3.1",
@@ -81,14 +81,14 @@
     "@commons-ui/testing-library": "workspace:*",
     "@material-ui/codemod": "^4.5.1",
     "@playwright/test": "^1.45.0",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/cli": "^8.1.10",
-    "@storybook/nextjs": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/test": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/cli": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
@@ -114,7 +114,7 @@
     "playwright-config-commons-ui": "workspace:*",
     "prettier": "^3.3.2",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.1.10",
+    "storybook": "^8.1.11",
     "svg-url-loader": "^8.0.0",
     "typescript": "^5.5.2"
   },

diff --git a/apps/roboshield/src/components/Footer/Footer.tsx b/apps/roboshield/src/components/Footer/Footer.tsx
@@ -6,6 +6,7 @@ import { Theme, styled } from "@mui/material/styles";
 import NewsletterSubscription from "@/roboshield/components/NewsletterSubscription";
 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";
 
@@ -14,7 +15,7 @@ export interface FooterProps {
     links: { url: string; platform: string }[];
     title: string;
   };
-  description: string;
+  description: Children;
   logo: any;
   newsletter: {
     children: React.ReactNode;
@@ -24,8 +25,8 @@ export interface FooterProps {
   };
   initiative: {
     partners: Partner[];
-    title: string;
-    description: string;
+    title: Children;
+    description: Children;
   };
 }
 
@@ -92,12 +93,13 @@ export default function Footer({
                   sx={{ height: "113px", mt: { xs: "52px", md: 0 } }}
                 >
                   <RichTypography
-                    variant="h5SemiBold"
+                    typographyProps={{
+                      variant: "h5SemiBold",
+                    }}
                     sx={{ color: "text.secondary", mb: "0" }}
                   >
                     {initiative?.title}
                   </RichTypography>
-                  <RichText />
                   <Stack alignItems="center" direction="row" spacing={0.5}>
                     {initiative?.partners?.map((partner: any) => (
                       <Link
@@ -125,17 +127,17 @@ export default function Footer({
                   </Stack>
                 </Stack>
                 <RichText
-                  variant="footer"
                   typographyProps={{
+                    LinkProps: {
+                      color: "text.secondary",
+                      sx: { textDecorationColor: "text.secondary" },
+                    },
+                    variant: "footer",
                     sx: {
                       mt: {
                         md: 6.5,
                       },
                     },
-                    LinkProps: {
-                      color: "text.secondary",
-                      sx: { textDecorationColor: "text.secondary" },
-                    },
                   }}
                   sx={(theme: Theme) => ({
                     a: {

diff --git a/apps/roboshield/src/components/Footer/FooterDescription.tsx b/apps/roboshield/src/components/Footer/FooterDescription.tsx
@@ -2,9 +2,10 @@ import { Figure, Link } from "@commons-ui/next";
 import { Stack, Theme } from "@mui/material";
 import React from "react";
 import RichText from "@/roboshield/components/RichText";
+import type { Children } from "@/roboshield/components/RichText";
 
 interface FooterDescriptionProps {
-  description: any;
+  description: Children;
   logo: any;
   sx?: any;
 }
@@ -34,12 +35,12 @@ function FooterDescription({ description, logo, sx }: FooterDescriptionProps) {
         />
       </Link>
       <RichText
-        variant="footer"
         typographyProps={{
           LinkProps: {
             color: "text.secondary",
             sx: { textDecorationColor: "text.secondary" },
           },
+          variant: "footer",
         }}
         sx={(theme: Theme) => ({
           a: {

diff --git a/apps/roboshield/src/components/RichText/RichText.tsx b/apps/roboshield/src/components/RichText/RichText.tsx
@@ -1,35 +1,45 @@
 /* eslint-disable react/no-array-index-key */
 import { Link, RichTypography } from "@commons-ui/next";
 import { Box } from "@mui/material";
+import type { BoxProps, TypographyProps } from "@mui/material";
 import React, { Fragment, ReactNode, forwardRef } from "react";
-import { Node, Text } from "slate";
+import { Text } from "slate";
 
 const DEFAULT_PROPS = {
   html: false,
 };
 
-interface NodeProps {
-  children?: Node[];
+// eslint-disable-next-line no-use-before-define
+type Children = Leaf[];
+
+interface Leaf {
+  children?: Children;
   type?: string;
-  href?: string;
   bold?: boolean;
   code?: boolean;
+  href?: string;
   italic?: boolean;
+  strikethrough?: boolean;
   text?: ReactNode;
+  underline?: boolean;
+  [key: string]: unknown;
 }
 
 interface SerializeProps {
   html?: boolean;
   [key: string]: any;
 }
 
-const serialize = (
-  children: NodeProps[] | undefined,
+function serialize(
+  children: Children | undefined,
   props?: SerializeProps,
-): ReactNode[] | null =>
-  children?.map((node, i) => {
+): ReactNode | null {
+  if (!children) {
+    return null;
+  }
+  return children.map((node, i) => {
     if (Text.isText(node)) {
-      let { text } = node;
+      let text = <span dangerouslySetInnerHTML={{ __html: node.text }} />;
       if (node.bold) {
         text = <strong key={i}>{text}</strong>;
       }
@@ -39,6 +49,20 @@ const serialize = (
       if (node.italic) {
         text = <em key={i}>{text}</em>;
       }
+      if (node.underline) {
+        text = (
+          <span style={{ textDecoration: "underline" }} key={i}>
+            {text}
+          </span>
+        );
+      }
+      if (node.strikethrough) {
+        text = (
+          <span style={{ textDecoration: "line-through" }} key={i}>
+            {text}
+          </span>
+        );
+      }
       return <Fragment key={i}>{text}</Fragment>;
     }
 
@@ -105,18 +129,17 @@ const serialize = (
           </RichTypography>
         );
     }
-  }) || null;
+  });
+}
 
-interface RichTextProps {
-  elements: NodeProps[];
-  variant?: string;
+interface RichTextProps extends BoxProps {
+  elements?: Children;
   typographyProps?: SerializeProps;
-  [key: string]: any;
 }
 
-const RichText = forwardRef<HTMLDivElement, RichTextProps>(
+const RichText = forwardRef<BoxProps, RichTextProps>(
   function RichText(props, ref) {
-    const { elements, variant, typographyProps, ...other } = props;
+    const { elements, typographyProps, ...other } = props;
 
     if (!elements?.length) {
       return null;
@@ -129,4 +152,5 @@ const RichText = forwardRef<HTMLDivElement, RichTextProps>(
   },
 );
 
+export type { Children };
 export default RichText;
diff --git a/apps/roboshield/src/components/RichText/index.ts b/apps/roboshield/src/components/RichText/index.ts
@@ -1,3 +1,5 @@
 import RichText from "./RichText";
+import type { Children } from "./RichText";
 
+export type { Children };
 export default RichText;