fix: schema (#351)

* fix: prose control and interfaces prose control now uses schema to determine whether to render for complex components, i now export a function to generate prose schema - this omits id if not specified * fix: heading make content optinoal * chore: lint + rename * chore: schemaMatches add back schemaMatches + lint fixes
opengovsg · Jul 23, 2024 · c0d55f9 · c0d55f9
1 parent 9a70c6f
commit c0d55f9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 35 deletions.
diff --git a/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx b/...s/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx
@@ -1,16 +1,16 @@
 import type { ControlProps, RankedTester } from "@jsonforms/core"
 import { Box, FormControl } from "@chakra-ui/react"
-import { hasType, rankWith, schemaMatches } from "@jsonforms/core"
+import { rankWith, schemaMatches } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { FormLabel, Textarea } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
 
 export const jsonFormsProseControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.ProseControl,
-  schemaMatches(
-    (schema) => hasType(schema, "array") && schema.format === "prose",
-  ),
+  schemaMatches((_, schema) => {
+    return schema.format === "prose"
+  }),
 )
 
 // TODO: Replace this with the Tiptap editor

diff --git a/packages/components/src/interfaces/complex/Accordion.ts b/packages/components/src/interfaces/complex/Accordion.ts
@@ -1,15 +1,15 @@
 import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
 
-import { ProseSchema } from "../native"
+import { BaseProseSchema } from "../native/Prose"
 
 export const AccordionSchema = Type.Object(
   {
     type: Type.Literal("accordion", { default: "accordion" }),
     summary: Type.String({
       title: "Title",
     }),
-    details: Type.Ref(ProseSchema),
+    details: BaseProseSchema,
   },
   { title: "Accordion component" },
 )

diff --git a/packages/components/src/interfaces/complex/Callout.ts b/packages/components/src/interfaces/complex/Callout.ts
@@ -1,12 +1,12 @@
 import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
 
-import { ProseSchema } from "../native"
+import { BaseProseSchema } from "../native/Prose"
 
 export const CalloutSchema = Type.Object(
   {
     type: Type.Literal("callout", { default: "callout" }),
-    content: Type.Ref(ProseSchema),
+    content: BaseProseSchema,
   },
   {
     title: "Callout component",

diff --git a/packages/components/src/interfaces/native/Heading.ts b/packages/components/src/interfaces/native/Heading.ts
@@ -27,7 +27,7 @@ export const HeadingSchema = Type.Object(
         },
       ),
     }),
-    content: Type.Array(TextSchema),
+    content: Type.Optional(Type.Array(TextSchema)),
   },
   {
     $id: "components-native-heading",

diff --git a/packages/components/src/interfaces/native/Prose.ts b/packages/components/src/interfaces/native/Prose.ts
@@ -8,33 +8,43 @@ import { ParagraphSchema } from "./Paragraph"
 import { TableSchema } from "./Table"
 import { UnorderedListSchema } from "./UnorderedList"
 
-export const ProseSchema = Type.Object(
-  {
-    type: Type.Literal("prose"),
-    content: Type.Optional(
-      Type.Array(
-        Type.Union([
-          Type.Ref(DividerSchema),
-          Type.Ref(HeadingSchema),
-          Type.Ref(OrderedListSchema),
-          Type.Ref(ParagraphSchema),
-          Type.Ref(TableSchema),
-          Type.Ref(UnorderedListSchema),
-        ]),
-        {
-          title: "Content block",
-          description: "A collection of native content components.",
-          minItems: 1,
-        },
+const BASE_PROSE_META = {
+  title: "Content block",
+  description: "A collection of native content components.",
+  format: "prose",
+}
+
+const generateProseSchema = (id?: string) => {
+  return Type.Object(
+    {
+      type: Type.Literal("prose"),
+      content: Type.Optional(
+        Type.Array(
+          Type.Union([
+            Type.Ref(DividerSchema),
+            Type.Ref(HeadingSchema),
+            Type.Ref(OrderedListSchema),
+            Type.Ref(ParagraphSchema),
+            Type.Ref(TableSchema),
+            Type.Ref(UnorderedListSchema),
+          ]),
+          {
+            title: "Content block",
+            description: "A collection of native content components.",
+            minItems: 1,
+          },
+        ),
       ),
-    ),
-  },
-  {
-    $id: "components-native-prose",
-    title: "Content block",
-    description: "A collection of native content components.",
-  },
-)
+    },
+    {
+      ...(id && { $id: id }),
+      ...BASE_PROSE_META,
+    },
+  )
+}
+
+export const ProseSchema = generateProseSchema("components-native-prose")
+export const BaseProseSchema = generateProseSchema()
 
 export type ProseProps = Static<typeof ProseSchema>
 export type ProseContent = ProseProps["content"]