feat: HorizontalLayout

src/controls/NumericControls/NumericControl.test.tsx

@@ -9,7 +9,7 @@ import {
   numericWeightSchema,
   numericSheepSchema,
   numericBeansSchema,
-  numericUISchema,
+  numericVerticalUISchema,
   numericUISchemaWithRule,
   numericPriceSchema,
   numericUSDUISchema,
@@ -90,7 +90,7 @@ describe("NumericControl", () => {
       render({
         data: data,
         schema: numericTheNumberSchema, // this has a default of 42.42
-        uischema: numericUISchema,
+        uischema: numericVerticalUISchema,
       })
       screen.getByText("The Number")
       expect(screen.getByRole("spinbutton")).toHaveValue(`${dataVal}`)
@@ -100,7 +100,7 @@ describe("NumericControl", () => {
   it("renders default value when no data is provided", () => {
     render({
       schema: numericTheNumberSchema,
-      uischema: numericUISchema,
+      uischema: numericVerticalUISchema,
     })
     expect(screen.getByRole("spinbutton")).toHaveValue("42.42")
   })
@@ -109,7 +109,7 @@ describe("NumericControl", () => {
     let data: JSONSchema
     render({
       schema: numericMagnitudeSchema,
-      uischema: numericUISchema,
+      uischema: numericVerticalUISchema,
       onChange: (state: { data: JSONSchema }) => {
         data = state.data
       },
@@ -126,7 +126,7 @@ describe("NumericControl", () => {
   it("shows error message onBlur when field is required and empty", async () => {
     render({
       schema: numericTheNumberSchema,
-      uischema: numericUISchema,
+      uischema: numericVerticalUISchema,
     })
     const input = screen.getByRole("spinbutton")
     await userEvent.clear(input)
@@ -147,7 +147,7 @@ describe("NumericControl", () => {
     async (schema: JSONSchema) => {
       render({
         schema: schema,
-        uischema: numericUISchema,
+        uischema: numericVerticalUISchema,
       })
       const input = screen.getByRole("spinbutton")
       await userEvent.type(input, "123.45") // try to input a float

src/layouts/HorizontalLayoutRenderer.test.tsx

@@ -0,0 +1,16 @@
+import { test } from "vitest"
+import { screen } from "@testing-library/react"
+import { render } from "../common/test-render"
+
+import {
+  numericMagnitudeSchema,
+  numericHorizontalUISchema,
+} from "../testSchemas/numericSchema/numericSchema"
+
+test("Horizontal layout renders", async () => {
+  render({
+    schema: numericMagnitudeSchema,
+    uischema: numericHorizontalUISchema,
+  })
+  await screen.findByRole("spinbutton")
+})

src/layouts/HorizontalLayoutRenderer.tsx

@@ -0,0 +1,39 @@
+import { LayoutProps, GroupLayout } from "@jsonforms/core"
+import isEmpty from "lodash.isempty"
+import { AntDLayoutRenderer, AntDLayoutRendererProps } from "./LayoutRenderer"
+import { HorizontalLayout } from "../ui-schema"
+import { Form, Row } from "antd"
+
+export function HorizontalLayoutRenderer({
+  uischema,
+  schema,
+  path,
+  enabled,
+  visible,
+  renderers,
+  cells,
+}: LayoutProps) {
+  const horizontalLayout = uischema as HorizontalLayout
+  const groupLayout = uischema as GroupLayout
+  const childProps: AntDLayoutRendererProps = {
+    elements: horizontalLayout.elements,
+    schema,
+    path,
+    enabled,
+    visible,
+  }
+  const form = Form.useFormInstance()
+  return (
+    <Form component={form ? false : "form"} form={form}>
+      {!isEmpty(groupLayout.label) && groupLayout.label}
+      <Row justify="space-between" gutter={12}>
+        <AntDLayoutRenderer
+          {...childProps}
+          direction="row"
+          renderers={renderers}
+          cells={cells}
+        />
+      </Row>
+    </Form>
+  )
+}

src/layouts/VerticalLayoutRenderer.test.tsx

@@ -0,0 +1,16 @@
+import { test } from "vitest"
+import { screen } from "@testing-library/react"
+import { render } from "../common/test-render"
+
+import {
+  numericMagnitudeSchema,
+  numericVerticalUISchema,
+} from "../testSchemas/numericSchema/numericSchema"
+
+test("Vertical layout renders", async () => {
+  render({
+    schema: numericMagnitudeSchema,
+    uischema: numericVerticalUISchema,
+  })
+  await screen.findByRole("spinbutton")
+})

src/renderers.ts

@@ -22,6 +22,7 @@ import { BooleanControl } from "./controls/BooleanControl"
 import { AlertControl } from "./controls/AlertControl"
 import { TextControl } from "./controls/TextControl"
 import { UnknownControl } from "./controls/UnknownControl"
+import { HorizontalLayoutRenderer } from "./layouts/HorizontalLayoutRenderer"
 import { VerticalLayoutRenderer } from "./layouts/VerticalLayoutRenderer"
 import { ObjectControl } from "./controls/ObjectControl"
 import { GroupLayoutRenderer } from "./layouts/GroupLayoutRenderer"
@@ -44,6 +45,10 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
     tester: rankWith(1, uiTypeIs("Group")),
     renderer: React.memo(GroupLayoutRenderer),
   },
+  {
+    tester: rankWith(2, uiTypeIs("HorizontalLayout")),
+    renderer: withJsonFormsLayoutProps(HorizontalLayoutRenderer),
+  },
   {
     tester: rankWith(2, uiTypeIs("VerticalLayout")),
     renderer: withJsonFormsLayoutProps(VerticalLayoutRenderer),

src/stories/controls/NumericControls/NumericControl.stories.tsx

@@ -6,7 +6,7 @@ import {
   numericTheNumberSchema,
   numericWeightSchema,
   numericSheepSchema,
-  numericUISchema,
+  numericVerticalUISchema,
   numericPriceSchema,
   numericUSDUISchema,
   numericROISchema,
@@ -18,7 +18,7 @@ const meta: Meta<typeof StorybookAntDJsonForm> = {
   component: StorybookAntDJsonForm,
   tags: ["autodocs"],
   args: {
-    uiSchema: numericUISchema,
+    uiSchema: numericVerticalUISchema,
   },
   argTypes: {
     uiSchema: {
@@ -34,31 +34,31 @@ export const RequiredFloatingPoint: Story = {
   tags: ["autodocs"],
   args: {
     jsonSchema: numericMagnitudeSchema,
-    uiSchema: numericUISchema,
+    uiSchema: numericVerticalUISchema,
   },
 }
 
 export const RequiredFloatingPointWithDefault: Story = {
   tags: ["autodocs"],
   args: {
     jsonSchema: numericTheNumberSchema,
-    uiSchema: numericUISchema,
+    uiSchema: numericVerticalUISchema,
   },
 }
 
 export const OptionalFloatingPoint: Story = {
   tags: ["autodocs"],
   args: {
     jsonSchema: numericWeightSchema,
-    uiSchema: numericUISchema,
+    uiSchema: numericVerticalUISchema,
   },
 }
 
 export const RequiredInteger: Story = {
   tags: ["autodocs"],
   args: {
     jsonSchema: numericSheepSchema,
-    uiSchema: numericUISchema,
+    uiSchema: numericVerticalUISchema,
   },
 }
 

src/stories/layouts/HorizontalLayoutRenderer.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
+
+import {
+  numericMagnitudeSchema,
+  numericHorizontalUISchema,
+} from "../../testSchemas/numericSchema/numericSchema"
+
+const meta: Meta<typeof StorybookAntDJsonForm> = {
+  title: "Layout/Horizontal",
+  component: StorybookAntDJsonForm,
+  tags: ["autodocs"],
+  args: {
+    uiSchema: numericHorizontalUISchema,
+  },
+  argTypes: {
+    uiSchema: {
+      control: "object",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StorybookAntDJsonForm>
+
+export const NumericControl: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: numericMagnitudeSchema,
+    uiSchema: numericHorizontalUISchema,
+  },
+}

src/stories/layouts/VerticalLayoutRenderer.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
+
+import {
+  numericMagnitudeSchema,
+  numericVerticalUISchema,
+} from "../../testSchemas/numericSchema/numericSchema"
+
+const meta: Meta<typeof StorybookAntDJsonForm> = {
+  title: "Layout/Vertical",
+  component: StorybookAntDJsonForm,
+  tags: ["autodocs"],
+  args: {
+    uiSchema: numericVerticalUISchema,
+  },
+  argTypes: {
+    uiSchema: {
+      control: "object",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StorybookAntDJsonForm>
+
+export const NumericControl: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: numericMagnitudeSchema,
+    uiSchema: numericVerticalUISchema,
+  },
+}

src/testSchemas/numericSchema/numericSchema.ts

@@ -79,7 +79,7 @@ export const numericROISchema = {
   required: ["numericValue"],
 } satisfies JSONSchema
 
-export const numericUISchema = {
+export const numericVerticalUISchema = {
   type: "VerticalLayout",
   elements: [
     {
@@ -89,6 +89,16 @@ export const numericUISchema = {
   ],
 } satisfies UISchema
 
+export const numericHorizontalUISchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/numericValue",
+    },
+  ],
+} satisfies UISchema
+
 export const numericUSDUISchema = {
   type: "VerticalLayout",
   elements: [