feat: add oneOf renderer

package.json

@@ -70,7 +70,9 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash.isempty": "^4.4.9",
+    "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
+    "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -96,6 +98,8 @@
   },
   "dependencies": {
     "lodash.isempty": "^4.4.0",
-    "lodash.range": "^3.2.0"
+    "lodash.merge": "^4.6.2",
+    "lodash.range": "^3.2.0",
+    "lodash.startcase": "^4.4.0"
   }
 }

src/common/ControlLabel.test.tsx

@@ -0,0 +1,95 @@
+import { JSONSchema } from "json-schema-to-ts"
+import { screen } from "@testing-library/react"
+import { test, describe, expect } from "vitest"
+import { render } from "../common/test-render"
+import { UISchema } from "../ui-schema"
+
+const schema = {
+  type: "object",
+  properties: {
+    labelMe: { title: "Label Me", oneOf: [{ type: "string" }] },
+  },
+} satisfies JSONSchema
+
+describe("ControlLabel", () => {
+  test("ControlLabel renders a title jsonschema property as the label", async () => {
+    render({ schema })
+    await screen.findByText("Label Me")
+  })
+  test("ControlLabel gives precedence to a string literal label property over the jsonschema title", async () => {
+    render({
+      schema,
+      uischema: {
+        type: "VerticalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/labelMe",
+            label: "No, Label ME",
+          },
+        ],
+      } satisfies UISchema,
+    })
+    await screen.findByText("No, Label ME")
+  })
+  test("ControlLabel renders text from a label property that is a LabelDescription", async () => {
+    render({
+      schema,
+      uischema: {
+        type: "VerticalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/labelMe",
+            label: { text: "Srsly, label me instead" },
+          },
+        ],
+      } satisfies UISchema,
+    })
+    await screen.findByText("Srsly, label me instead")
+  })
+  test("ControlLabel renders an AntD Text component from a LabelDescription", async () => {
+    render({
+      schema,
+      uischema: {
+        type: "VerticalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/labelMe",
+            label: {
+              text: "Srsly, label me instead",
+              type: "Text",
+              textProps: { disabled: true },
+            },
+          },
+        ],
+      } satisfies UISchema,
+    })
+    await screen.findByText("Srsly, label me instead")
+
+    expect(screen.getByText("Srsly, label me instead")).toHaveClass(
+      "ant-typography-disabled",
+    )
+  })
+  test("ControlLabel renders an AntD Title component from a LabelDescription", async () => {
+    render({
+      schema,
+      uischema: {
+        type: "VerticalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/labelMe",
+            label: {
+              text: "Srsly, label me instead",
+              type: "Title",
+              titleProps: { copyable: true },
+            },
+          },
+        ],
+      } satisfies UISchema,
+    })
+    await screen.findByLabelText("copy")
+  })
+})

src/common/ControlLabel.tsx

@@ -0,0 +1,48 @@
+import { JsonSchema, Helpers } from "@jsonforms/core"
+import { ControlUISchema } from "../ui-schema"
+import { Typography } from "antd"
+import { assertNever } from "./assert-never"
+
+// This consumes a LabelDescription (+ other formats) in a Control UI Schema
+export function ControlLabel({
+  uischema,
+  schema,
+}: {
+  uischema: ControlUISchema
+  schema: JsonSchema
+}) {
+  const controlUISchema: ControlUISchema = uischema
+  const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
+  const text = labelDescription.show ? labelDescription.text : null
+
+  if (
+    typeof controlUISchema.label === "object" &&
+    "type" in controlUISchema.label
+  ) {
+    const labelType = controlUISchema.label.type
+    switch (labelType) {
+      case "Text":
+        return (
+          <Typography.Text {...controlUISchema.label.textProps}>
+            {text}
+          </Typography.Text>
+        )
+
+      case "Title":
+        return (
+          <Typography.Title {...controlUISchema.label.titleProps}>
+            {text}
+          </Typography.Title>
+        )
+      default:
+        try {
+          assertNever(labelType)
+        } catch (e) {
+          console.error(
+            `Invalid value configured in Control UI Schema for label.type: '${labelType as string}'`,
+          )
+        }
+    }
+  }
+  return <Typography.Title>{text}</Typography.Title>
+}

src/common/StorybookAntDJsonForm.tsx

@@ -6,10 +6,11 @@ import {
 import { UISchema } from "../ui-schema"
 import { AntDJsonForm } from "./AntDJsonForm"
 import { useState } from "react"
+import { JSONSchema } from "json-schema-to-ts"
 
 type Props = {
   data?: Record<string, unknown>
-  jsonSchema: JsonSchema7
+  jsonSchema: JSONSchema
   rendererRegistryEntries: JsonFormsRendererRegistryEntry[]
   uiSchema?: UISchema
   uiSchemaRegistryEntries?: JsonFormsUISchemaRegistryEntry[]
@@ -35,7 +36,7 @@ export function StorybookAntDJsonForm({
   return (
     <AntDJsonForm
       uiSchema={uiSchema}
-      jsonSchema={jsonSchema}
+      jsonSchema={jsonSchema as JsonSchema7}
       data={data}
       updateData={(newData) => updateData(newData)}
       uiSchemaRegistryEntries={uiSchemaRegistryEntries}

src/common/usePreviousValue.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react"
+
+/**
+ * Hook that returns the what was passed in the previous render.
+ * On the first render, returns undefined. Eventually
+ * "catches up" to the current value.
+ */
+export function usePreviousValue<T>(value: T): T | undefined {
+  const [prev, setPrev] = useState<T | undefined>(undefined)
+
+  useEffect(() => {
+    if (value !== prev) {
+      setPrev(value)
+    }
+  }, [value, prev])
+
+  return prev
+}

src/controls/BooleanControl.test.tsx

@@ -29,7 +29,6 @@ test("handles onChange event correctly", async () => {
     },
     data: { name: false },
     onChange: (result) => {
-      console.log(result)
       updateData(result)
     },
   })