From ee1c6bdeaa9aaaf4524dd78c7dc7083891910ff6 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:55:59 +0300
Subject: [PATCH] Add contents building blocks

---
 .../src/payload/blocks/ExternalEmbed.js       | 81 +++++++++++++++++++
 .../src/payload/blocks/MediaBlock.js          | 23 ++++++
 .../src/payload/blocks/RichText.js            | 32 ++++++++
 .../src/payload/fields/blockFields.js         | 21 +++++
 .../src/payload/fields/content.js             | 18 +++++
 5 files changed, 175 insertions(+)
 create mode 100644 apps/codeforafrica/src/payload/blocks/ExternalEmbed.js
 create mode 100644 apps/codeforafrica/src/payload/blocks/MediaBlock.js
 create mode 100644 apps/codeforafrica/src/payload/blocks/RichText.js
 create mode 100644 apps/codeforafrica/src/payload/fields/blockFields.js
 create mode 100644 apps/codeforafrica/src/payload/fields/content.js

diff --git a/apps/codeforafrica/src/payload/blocks/ExternalEmbed.js b/apps/codeforafrica/src/payload/blocks/ExternalEmbed.js
new file mode 100644
index 000000000..d12c71f85
--- /dev/null
+++ b/apps/codeforafrica/src/payload/blocks/ExternalEmbed.js
@@ -0,0 +1,81 @@
+import blockFields from "../fields/blockFields";
+
+const ExternalEmbed = {
+  slug: "external-embed",
+  fields: [
+    blockFields({
+      name: "embedBlockFields",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "embedType",
+              type: "radio",
+              defaultValue: "url",
+              options: [
+                {
+                  label: {
+                    en: "URL",
+                    fr: "URL",
+                    pt: "URL",
+                  },
+                  value: "url",
+                },
+                {
+                  label: {
+                    en: "Code",
+                    fr: "Code",
+                    pt: "Código",
+                  },
+                  value: "code",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: "url",
+          label: {
+            en: "URL",
+            fr: "URL",
+            pt: "URL",
+          },
+          type: "text",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "caption",
+          label: {
+            en: "Caption",
+            fr: "Légende",
+            pt: "Rubrica",
+          },
+          type: "text",
+          localized: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "code",
+          label: {
+            en: "Code",
+            fr: "Code",
+            pt: "Código",
+          },
+          type: "code",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "code",
+          },
+        },
+      ],
+    }),
+  ],
+};
+
+export default ExternalEmbed;
diff --git a/apps/codeforafrica/src/payload/blocks/MediaBlock.js b/apps/codeforafrica/src/payload/blocks/MediaBlock.js
new file mode 100644
index 000000000..08b2530a6
--- /dev/null
+++ b/apps/codeforafrica/src/payload/blocks/MediaBlock.js
@@ -0,0 +1,23 @@
+import blockFields from "../fields/blockFields";
+
+const MediaBlock = {
+  slug: "mediaBlock",
+  fields: [
+    blockFields({
+      name: "mediaBlockFields",
+      fields: [
+        {
+          name: "image",
+          type: "upload",
+          relationTo: "media",
+          required: true,
+          filterOptions: {
+            mimeType: { contains: "image" },
+          },
+        },
+      ],
+    }),
+  ],
+};
+
+export default MediaBlock;
diff --git a/apps/codeforafrica/src/payload/blocks/RichText.js b/apps/codeforafrica/src/payload/blocks/RichText.js
new file mode 100644
index 000000000..ae19f33fc
--- /dev/null
+++ b/apps/codeforafrica/src/payload/blocks/RichText.js
@@ -0,0 +1,32 @@
+import blockFields from "../fields/blockFields";
+import richText from "../fields/richText";
+
+const RichText = {
+  slug: "richText",
+  fields: [
+    blockFields({
+      name: "richTextBlockFields",
+      fields: [
+        richText({
+          name: "content",
+          admin: {
+            elements: [
+              "h1",
+              "h2",
+              "h3",
+              "h4",
+              "h5",
+              "h6",
+              "link",
+              "ol",
+              "ul",
+              "indent",
+            ],
+          },
+        }),
+      ],
+    }),
+  ],
+};
+
+export default RichText;
diff --git a/apps/codeforafrica/src/payload/fields/blockFields.js b/apps/codeforafrica/src/payload/fields/blockFields.js
new file mode 100644
index 000000000..55188a7c5
--- /dev/null
+++ b/apps/codeforafrica/src/payload/fields/blockFields.js
@@ -0,0 +1,21 @@
+import { deepmerge } from "@mui/utils";
+
+const blockFields = ({ name, fields, overrides }) =>
+  deepmerge(
+    {
+      name,
+      label: false,
+      type: "group",
+      admin: {
+        hideGutter: true,
+        style: {
+          margin: 0,
+          padding: 0,
+        },
+      },
+      fields,
+    },
+    overrides,
+  );
+
+export default blockFields;
diff --git a/apps/codeforafrica/src/payload/fields/content.js b/apps/codeforafrica/src/payload/fields/content.js
new file mode 100644
index 000000000..893bfaf00
--- /dev/null
+++ b/apps/codeforafrica/src/payload/fields/content.js
@@ -0,0 +1,18 @@
+import { deepmerge } from "@mui/utils";
+
+import ExternalEmbed from "../blocks/ExternalEmbed";
+import MediaBlock from "../blocks/MediaBlock";
+import RichText from "../blocks/RichText";
+
+const content = (overrides) =>
+  deepmerge(
+    {
+      name: "content",
+      type: "blocks",
+      blocks: [RichText, MediaBlock, ExternalEmbed],
+      localized: true,
+    },
+    overrides,
+  );
+
+export default content;