fix: Inherit form layout from parent and preview layout changes in storybook (#160)

* Inherit form layout from parent and preview layout changes in storybook

* Revert formatting change

* fix: prettier formatting in VerticalLayout

Made-with: Cursor

* fix: inherit parent form layout via FormContext

Keep the <Form> wrapper (required for Form.List in array controls)
but read the parent form's layout from antd's FormContext and
forward it, so consumers' <Form layout="vertical"> propagates
through layout renderers.

Made-with: Cursor

* fix: inherit parent form layout in HorizontalLayout

Apply the same FormContext layout inheritance pattern used in
VerticalLayout, so both layout renderers consistently forward
the parent form's layout.

Made-with: Cursor

* fix: detect parent form layout via DOM instead of FormContext import

The previous approach imported FormContext from antd/es/form/context to
read the parent form's layout. This broke across CJS/ESM module boundaries
in consuming apps due to context identity mismatch.

Replace with a DOM-based approach: a hidden probe element detects the
parent <form> element's CSS class (ant-form-vertical, ant-form-inline)
and passes the detected layout to the intermediate Form wrapper.

Made-with: Cursor

* refactor: simplify useParentFormLayout hook and improve docs

Rename probeRef → ref, flatten guard clauses, and expand the JSDoc to
explain *why* we use DOM-based detection (CJS/ESM module identity
mismatch with antd's internal FormContext).

Made-with: Cursor

* fix: make Storybook layout arg reactive and reorder it below uiSchema

- Remove empty dependency array from useParentFormLayout so it re-reads
  the parent form's CSS class after every render, picking up layout
  changes from Storybook args.
- Add else branch to reset layout to undefined when switching back to
  the default "horizontal".
- Move layout prop above uiSchemaRegistryEntries in the Props type so
  it appears just below uiSchema in Storybook controls.

Made-with: Cursor

* docs: note Form.List coupling in useParentFormLayout JSDoc

Made-with: Cursor

* docs: enumerate reasons in useParentFormLayout JSDoc

Made-with: Cursor

* docs: note FormContext is not public API

Made-with: Cursor

* fix: position layout arg after uiSchema in Storybook controls

Add layout: {} to each story meta's argTypes to control ordering,
placing it right after uiSchema (or jsonSchema when uiSchema is absent).

Made-with: Cursor

* fix: ensure layout arg appears after uiSchema in all Storybook stories

Add uiSchema to meta argTypes in stories that were missing it so
layout consistently appears directly below uiSchema in the controls.

Made-with: Cursor

* fix: hide noise props in minimal story argTypes so layout appears after uiSchema

Add rendererRegistryEntries, uiSchemaRegistryEntries, data, and
onChange disable entries to stories that were missing them. Without
these, Storybook renders the component props in their type order,
pushing layout below data and rendererRegistryEntries.

Made-with: Cursor

* fix: align horizontal layout items to bottom so checkboxes line up with inputs

Change Row align from "middle" to "bottom" so controls without a top
label (e.g. checkboxes) align with the input portion of adjacent
controls when vertical labels are used.

Made-with: Cursor

Author: NathanFarmer

.gitignore

@@ -25,6 +25,9 @@ dist-ssr
 *.sln
 *.sw?
 
+# Storybook
+storybook-static
+
 # Built package
 great-expectations-jsonforms-antd-renderers-*.tgz
 

.storybook/preview.ts

@@ -9,6 +9,12 @@ const preview: Preview = {
       },
     },
   },
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["horizontal", "vertical", "inline"],
+    },
+  },
 }
 
 export default preview

src/common/StorybookAntDJsonForm.tsx

@@ -14,10 +14,10 @@ type Props<T> = {
   jsonSchema: T
   rendererRegistryEntries: JsonFormsRendererRegistryEntry[]
   uiSchema?: UISchema<T>
+  layout?: FormProps["layout"]
   uiSchemaRegistryEntries?: JsonFormsUISchemaRegistryEntry[]
   config?: Record<string, unknown>
   onChange: JsonFormsReactProps["onChange"]
-  layout?: FormProps["layout"]
 }
 
 // this component exists to facilitate storybook rendering

src/hooks/useParentFormLayout.ts

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef, useState } from "react"
+import type { FormProps } from "antd"
+
+/**
+ * Returns a ref and the detected layout of the nearest ancestor Ant Design Form.
+ *
+ * Attach `ref` to any element rendered inside the parent Form. The hook reads
+ * the CSS class on the closest `.ant-form` ancestor (`ant-form-vertical`,
+ * `ant-form-inline`) to determine the layout. When no ancestor form exists or
+ * the layout is the default "horizontal", `layout` is `undefined`.
+ *
+ * We take this approach for two reasons:
+ *
+ * 1. We keep the intermediate `<Form>` wrapper (with `component={false}` when
+ *    nested) rather than conditionally removing it because `Form.List` in the
+ *    array controls depends on it for correct store structure.
+ * 2. We detect layout via the DOM rather than importing antd's internal
+ *    `FormContext` because it is not part of antd's public API and is a
+ *    different object in CJS vs ESM builds, which breaks context sharing
+ *    when this library is consumed as CJS.
+ */
+export function useParentFormLayout() {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [layout, setLayout] = useState<FormProps["layout"]>()
+
+  // No dependency array — re-reads the DOM class after every render so the
+  // layout stays in sync when the parent Form's `layout` prop changes.
+  // Safe from infinite loops: setLayout is a no-op when the value is unchanged.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    const formEl = ref.current?.closest(".ant-form")
+    if (formEl?.classList.contains("ant-form-vertical")) setLayout("vertical")
+    else if (formEl?.classList.contains("ant-form-inline")) setLayout("inline")
+    else setLayout(undefined)
+  })
+
+  return { ref, layout }
+}

src/layouts/HorizontalLayout.tsx

@@ -4,6 +4,7 @@ import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
 import { HorizontalLayoutUISchema } from "../ui-schema"
 import { Form, Row } from "antd"
 import { withJsonFormsLayoutProps } from "@jsonforms/react"
+import { useParentFormLayout } from "../hooks/useParentFormLayout"
 
 export const HORIZONTAL_LAYOUT_FORM_TEST_ID = "horizontal-layout-form"
 
@@ -26,6 +27,8 @@ export function HorizontalLayout({
     visible,
   }
   const form = Form.useFormInstance()
+  const { ref, layout } = useParentFormLayout()
+
   if (visible === false) {
     return null
   }
@@ -36,7 +39,7 @@ export function HorizontalLayout({
       <Row
         justify="space-between"
         gutter={12}
-        align="middle"
+        align="bottom"
         style={{ maxWidth: "100%" }}
       >
         <AntDLayout
@@ -49,11 +52,19 @@ export function HorizontalLayout({
     </>
   )
 
-  if (form) {
-    return content
-  }
-
-  return <Form data-testid={HORIZONTAL_LAYOUT_FORM_TEST_ID}>{content}</Form>
+  return (
+    <>
+      <span ref={ref} style={{ display: "none" }} />
+      <Form
+        data-testid={HORIZONTAL_LAYOUT_FORM_TEST_ID}
+        component={form ? false : "form"}
+        layout={layout}
+        form={form}
+      >
+        {content}
+      </Form>
+    </>
+  )
 }
 
 export const HorizontalLayoutRenderer =

src/layouts/VerticalLayout.tsx

@@ -3,6 +3,7 @@ import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
 import { Form } from "antd"
 import { VerticalLayoutUISchema } from "../ui-schema"
 import { withJsonFormsLayoutProps } from "@jsonforms/react"
+import { useParentFormLayout } from "../hooks/useParentFormLayout"
 
 export const VERTICAL_LAYOUT_FORM_TEST_ID = "vertical-layout-form"
 
@@ -24,20 +25,25 @@ export function VerticalLayout({
     visible,
   }
   const form = Form.useFormInstance()
+  const { ref, layout } = useParentFormLayout()
 
   if (visible === false) {
     return null
   }
 
   return (
-    <Form
-      data-testid={VERTICAL_LAYOUT_FORM_TEST_ID}
-      component={form ? false : "form"}
-      scrollToFirstError
-      form={form}
-    >
-      <AntDLayout {...childProps} renderers={renderers} cells={cells} />
-    </Form>
+    <>
+      <span ref={ref} style={{ display: "none" }} />
+      <Form
+        data-testid={VERTICAL_LAYOUT_FORM_TEST_ID}
+        component={form ? false : "form"}
+        layout={layout}
+        scrollToFirstError
+        form={form}
+      >
+        <AntDLayout {...childProps} renderers={renderers} cells={cells} />
+      </Form>
+    </>
   )
 }
 

src/stories/controls/AnyOfControl.stories.tsx

@@ -41,6 +41,8 @@ const meta: Meta<typeof StorybookAntDJsonForm<typeof splitterAnyOfJsonSchema>> =
         control: "object",
         description: "this is a minimal anyOf combinator schema",
       },
+      uiSchema: { control: "object" },
+      layout: {},
       uiSchemaRegistryEntries: { table: { disable: true } },
       data: { table: { disable: true } },
       config: { control: "object" },

src/stories/controls/BooleanControl.stories.tsx

@@ -41,6 +41,8 @@ const meta: Meta<typeof StorybookAntDJsonForm> = {
     jsonSchema: {
       control: "object",
     },
+    uiSchema: { control: "object" },
+    layout: {},
     data: { table: { disable: true } },
     config: { control: "object" },
     onChange: { table: { disable: true, action: "on-change" } },

src/stories/controls/DateTimeControl.stories.tsx

@@ -17,7 +17,15 @@ const meta: Meta<typeof StorybookAntDJsonForm> = {
     jsonSchema: dateTimeSchema,
     uiSchema: dateTimeUISchema,
   },
-  argTypes: {},
+  argTypes: {
+    rendererRegistryEntries: { table: { disable: true } },
+    uiSchema: { control: "object" },
+    layout: {},
+    uiSchemaRegistryEntries: { table: { disable: true } },
+    data: { table: { disable: true } },
+    config: { control: "object" },
+    onChange: { table: { disable: true, action: "on-change" } },
+  },
 }
 
 export default meta

src/stories/controls/EnumControl.stories.tsx

@@ -20,9 +20,13 @@ const meta: Meta<typeof StorybookAntDJsonForm> = {
     uiSchema: enumProfessionUISchema,
   },
   argTypes: {
-    uiSchema: {
-      control: "object",
-    },
+    rendererRegistryEntries: { table: { disable: true } },
+    uiSchema: { control: "object" },
+    layout: {},
+    uiSchemaRegistryEntries: { table: { disable: true } },
+    data: { table: { disable: true } },
+    config: { control: "object" },
+    onChange: { table: { disable: true, action: "on-change" } },
   },
 }