feat: add placeholders for array, oneOf and prose inputs

apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx

@@ -5,12 +5,18 @@ import { useState } from 'react'
 import IsomerSchema from '../../data/0.1.0.json'
 
 import {
+  JsonFormsArrayControl,
+  jsonFormsArrayControlTester,
   JsonFormsBooleanControl,
   jsonFormsBooleanControlTester,
   JsonFormsDropdownControl,
   jsonFormsDropdownControlTester,
   JsonFormsIntegerControl,
   jsonFormsIntegerControlTester,
+  JsonFormsOneOfControl,
+  jsonFormsOneOfControlTester,
+  JsonFormsProseControl,
+  jsonFormsProseControlTester,
   JsonFormsRadioControl,
   jsonFormsRadioControlTester,
   JsonFormsTextControl,
@@ -20,13 +26,16 @@ import {
 } from './renderers'
 
 const renderers: JsonFormsRendererRegistryEntry[] = [
+  { tester: jsonFormsArrayControlTester, renderer: JsonFormsArrayControl },
   { tester: jsonFormsBooleanControlTester, renderer: JsonFormsBooleanControl },
   {
     tester: jsonFormsDropdownControlTester,
     renderer: JsonFormsDropdownControl,
   },
   { tester: jsonFormsIntegerControlTester, renderer: JsonFormsIntegerControl },
   { tester: jsonFormsTextControlTester, renderer: JsonFormsTextControl },
+  { tester: jsonFormsOneOfControlTester, renderer: JsonFormsOneOfControl },
+  { tester: jsonFormsProseControlTester, renderer: JsonFormsProseControl },
   { tester: jsonFormsRadioControlTester, renderer: JsonFormsRadioControl },
   {
     tester: jsonFormsVerticalLayoutTester,

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsArrayControl.tsx

@@ -0,0 +1,44 @@
+import { Box, Heading } from '@chakra-ui/react'
+import {
+  createDefaultValue,
+  isObjectArrayControl,
+  rankWith,
+  type ArrayLayoutProps,
+  type RankedTester,
+} from '@jsonforms/core'
+import { withJsonFormsArrayLayoutProps } from '@jsonforms/react'
+import { Button } from '@opengovsg/design-system-react'
+
+export const jsonFormsArrayControlTester: RankedTester = rankWith(
+  3,
+  isObjectArrayControl,
+)
+
+export function JsonFormsArrayControl({
+  path,
+  label,
+  addItem,
+  schema,
+  rootSchema,
+}: ArrayLayoutProps) {
+  return (
+    <Box py={2}>
+      <Heading as="h3" size="sm" variant="subhead-1">
+        {label}
+      </Heading>
+
+      <p>Placeholder for drag-and-drop of objects</p>
+
+      <Button
+        onClick={addItem(path, createDefaultValue(schema, rootSchema))}
+        mt={3}
+        w="100%"
+        variant="outline"
+      >
+        Add item
+      </Button>
+    </Box>
+  )
+}
+
+export default withJsonFormsArrayLayoutProps(JsonFormsArrayControl)

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsDropdownControl.tsx

@@ -23,10 +23,11 @@ export function JsonFormsDropdownControl({
   description,
   required,
   options,
+  schema,
 }: ControlProps & OwnPropsOfEnum) {
   const [dropdownValue, setDropdownValue] = useState(data || '')
 
-  if (!options) {
+  if (!options || (options.length === 1 && !!schema.default)) {
     return null
   }
 

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsOneOfControl.tsx

@@ -0,0 +1,74 @@
+import { Box, FormControl } from '@chakra-ui/react'
+import {
+  createCombinatorRenderInfos,
+  isOneOfControl,
+  rankWith,
+  type CombinatorRendererProps,
+  type RankedTester,
+} from '@jsonforms/core'
+import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react'
+import { FormLabel, SingleSelect } from '@opengovsg/design-system-react'
+import { useState } from 'react'
+
+export const jsonFormsOneOfControlTester: RankedTester = rankWith(
+  3,
+  isOneOfControl,
+)
+
+export function JsonFormsOneOfControl({
+  schema,
+  path,
+  renderers,
+  cells,
+  rootSchema,
+  uischema,
+  uischemas,
+  label,
+  description,
+}: CombinatorRendererProps) {
+  const oneOfRenderInfos = createCombinatorRenderInfos(
+    schema.oneOf || [],
+    rootSchema,
+    'oneOf',
+    uischema,
+    path,
+    uischemas,
+  )
+  const variants = oneOfRenderInfos.map((oneOfRenderInfo) => ({
+    label: oneOfRenderInfo.label,
+    value: oneOfRenderInfo.label,
+  }))
+
+  const [variant, setVariant] = useState(oneOfRenderInfos[0]?.label || '')
+
+  return (
+    <Box py={2}>
+      <FormControl isRequired>
+        <FormLabel description={description}>{label}</FormLabel>
+        <SingleSelect
+          value={variant}
+          name={label}
+          items={variants}
+          isClearable={false}
+          onChange={setVariant}
+        />
+      </FormControl>
+
+      {oneOfRenderInfos.map(
+        (oneOfRenderInfo) =>
+          variant === oneOfRenderInfo.label && (
+            <JsonFormsDispatch
+              key={oneOfRenderInfo.label}
+              uischema={oneOfRenderInfo.uischema}
+              schema={oneOfRenderInfo.schema}
+              path={path}
+              renderers={renderers}
+              cells={cells}
+            />
+          ),
+      )}
+    </Box>
+  )
+}
+
+export default withJsonFormsOneOfProps(JsonFormsOneOfControl)

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx

@@ -0,0 +1,42 @@
+import { Box, FormControl } from '@chakra-ui/react'
+import {
+  hasType,
+  rankWith,
+  schemaMatches,
+  type ControlProps,
+  type RankedTester,
+} from '@jsonforms/core'
+import { withJsonFormsControlProps } from '@jsonforms/react'
+import { FormLabel, Textarea } from '@opengovsg/design-system-react'
+
+export const jsonFormsProseControlTester: RankedTester = rankWith(
+  2,
+  schemaMatches(
+    (schema) => hasType(schema, 'array') && schema.format === 'prose',
+  ),
+)
+
+// TODO: Replace this with the Tiptap editor
+export function JsonFormsProseControl({
+  data,
+  label,
+  handleChange,
+  path,
+  description,
+  required,
+}: ControlProps) {
+  return (
+    <Box py={2}>
+      <FormControl isRequired={required}>
+        <FormLabel description={description}>{label}</FormLabel>
+        <Textarea
+          value={data || ''}
+          onChange={(e) => handleChange(path, e.target.value)}
+          placeholder={label}
+        />
+      </FormControl>
+    </Box>
+  )
+}
+
+export default withJsonFormsControlProps(JsonFormsProseControl)

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts

@@ -1,3 +1,7 @@
+export {
+  default as JsonFormsArrayControl,
+  jsonFormsArrayControlTester,
+} from './JsonFormsArrayControl'
 export {
   default as JsonFormsBooleanControl,
   jsonFormsBooleanControlTester,
@@ -10,6 +14,14 @@ export {
   default as JsonFormsIntegerControl,
   jsonFormsIntegerControlTester,
 } from './JsonFormsIntegerControl'
+export {
+  default as JsonFormsOneOfControl,
+  jsonFormsOneOfControlTester,
+} from './JsonFormsOneOfControl'
+export {
+  default as JsonFormsProseControl,
+  jsonFormsProseControlTester,
+} from './JsonFormsProseControl'
 export {
   default as JsonFormsRadioControl,
   jsonFormsRadioControlTester,