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/GroupLayoutRenderer.tsx → src/layouts/GroupLayout.tsx

@@ -1,24 +1,24 @@
-import { GroupLayout, OwnPropsOfRenderer } from "@jsonforms/core"
+import { GroupLayout as GroupLayoutUISchema, OwnPropsOfRenderer } from "@jsonforms/core"
 import { UISchema } from "../ui-schema"
 import { Divider } from "antd"
-import { AntDLayoutRenderer } from "./LayoutRenderer"
+import { AntDLayout } from "./LayoutRenderer"
 
 export type LayoutRendererProps = OwnPropsOfRenderer & {
   elements: UISchema[]
 }
 
-export function GroupLayoutRenderer({
+export function GroupLayout({
   visible,
   enabled,
   uischema,
   ...props
 }: LayoutRendererProps) {
-  const groupLayout = uischema as GroupLayout
+  const groupLayout = uischema as GroupLayoutUISchema
   return (
     <>
       <Divider />
       {groupLayout?.label && <b>{groupLayout.label}</b>}
-      <AntDLayoutRenderer
+      <AntDLayout
         {...props}
         visible={visible}
         enabled={enabled}

src/layouts/HorizontalLayout.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/HorizontalLayout.tsx

@@ -0,0 +1,39 @@
+import { LayoutProps, GroupLayout } from "@jsonforms/core"
+import isEmpty from "lodash.isempty"
+import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
+import { HorizontalLayout as HorizontalLayoutUISchema } from "../ui-schema"
+import { Form, Row } from "antd"
+
+export function HorizontalLayout({
+  uischema,
+  schema,
+  path,
+  enabled,
+  visible,
+  renderers,
+  cells,
+}: LayoutProps) {
+  const horizontalLayout = uischema as HorizontalLayoutUISchema
+  const groupLayout = uischema as GroupLayout
+  const childProps: AntDLayoutProps = {
+    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}>
+        <AntDLayout
+          {...childProps}
+          direction="row"
+          renderers={renderers}
+          cells={cells}
+        />
+      </Row>
+    </Form>
+  )
+}

src/layouts/LayoutRenderer.tsx

@@ -3,7 +3,7 @@ import { JsonSchema, OwnPropsOfRenderer } from "@jsonforms/core"
 import { renderLayoutElements } from "./render-layout-elements"
 import { UISchema } from "../ui-schema"
 
-export interface AntDLayoutRendererProps extends OwnPropsOfRenderer {
+export interface AntDLayoutProps extends OwnPropsOfRenderer {
   elements: UISchema[]
   direction?: "row" | "column"
 }
@@ -16,7 +16,7 @@ function AntDLayoutComponent({
   renderers,
   cells,
   direction = "column",
-}: AntDLayoutRendererProps) {
+}: AntDLayoutProps) {
   if (!elements?.length && !Object.keys(elements).length) {
     return null
   }
@@ -34,4 +34,4 @@ function AntDLayoutComponent({
     </>
   )
 }
-export const AntDLayoutRenderer = React.memo(AntDLayoutComponent)
+export const AntDLayout = React.memo(AntDLayoutComponent)

src/layouts/VerticalLayout.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/layouts/VerticalLayoutRenderer.tsx → src/layouts/VerticalLayout.tsx

@@ -1,9 +1,9 @@
 import { LayoutProps, GroupLayout } from "@jsonforms/core"
-import { AntDLayoutRenderer, AntDLayoutRendererProps } from "./LayoutRenderer"
+import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
 import { Form, FormInstance, FormProps } from "antd"
-import { VerticalLayout } from "../ui-schema"
+import { VerticalLayout as VerticalLayoutUISchema } from "../ui-schema"
 
-export function VerticalLayoutRenderer({
+export function VerticalLayout({
   uischema,
   schema,
   path,
@@ -12,9 +12,9 @@ export function VerticalLayoutRenderer({
   renderers,
   cells,
 }: LayoutProps) {
-  const verticalLayout = uischema as VerticalLayout
+  const verticalLayout = uischema as VerticalLayoutUISchema
   const groupLayout = uischema as GroupLayout
-  const childProps: AntDLayoutRendererProps = {
+  const childProps: AntDLayoutProps = {
     elements: verticalLayout.elements,
     schema,
     path,
@@ -27,7 +27,7 @@ export function VerticalLayoutRenderer({
       {!groupLayout.label && (
         <div>{groupLayout.label}</div> // this was SubtitleSemiBold
       )}
-      <AntDLayoutRenderer {...childProps} renderers={renderers} cells={cells} />
+      <AntDLayout {...childProps} renderers={renderers} cells={cells} />
     </Form>
   )
 }

src/renderers.ts

@@ -22,9 +22,10 @@ import { BooleanControl } from "./controls/BooleanControl"
 import { AlertControl } from "./controls/AlertControl"
 import { TextControl } from "./controls/TextControl"
 import { UnknownControl } from "./controls/UnknownControl"
-import { VerticalLayoutRenderer } from "./layouts/VerticalLayoutRenderer"
+import { HorizontalLayout } from "./layouts/HorizontalLayout"
+import { VerticalLayout } from "./layouts/VerticalLayout"
 import { ObjectControl } from "./controls/ObjectControl"
-import { GroupLayoutRenderer } from "./layouts/GroupLayoutRenderer"
+import { GroupLayout } from "./layouts/GroupLayout"
 import { NumericControl } from "./controls/NumericControls/NumericControl"
 import { NumericSliderControl } from "./controls/NumericControls/NumericSliderControl"
 import React from "react"
@@ -42,11 +43,15 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
   },
   {
     tester: rankWith(1, uiTypeIs("Group")),
-    renderer: React.memo(GroupLayoutRenderer),
+    renderer: React.memo(GroupLayout),
+  },
+  {
+    tester: rankWith(2, uiTypeIs("HorizontalLayout")),
+    renderer: withJsonFormsLayoutProps(HorizontalLayout),
   },
   {
     tester: rankWith(2, uiTypeIs("VerticalLayout")),
-    renderer: withJsonFormsLayoutProps(VerticalLayoutRenderer),
+    renderer: withJsonFormsLayoutProps(VerticalLayout),
   },
   {
     tester: rankWith(2, isBooleanControl),

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/HorizontalLayout.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/VerticalLayout.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: [