feat(GroupLayout): add GroupLayout stories + Card rendering, make dividers configurable

src/common/ControlLabel.test.tsx

@@ -41,7 +41,9 @@ describe("ControlLabel", () => {
           {
             type: "Control",
             scope: "#/properties/labelMe",
-            label: { text: "Srsly, label me instead" },
+            label: {
+              text: "Srsly, label me instead",
+            },
           },
         ],
       } satisfies UISchema,

src/layouts/GroupLayout.tsx

@@ -1,11 +1,9 @@
-import {
-  GroupLayout as GroupLayoutUISchema,
-  OwnPropsOfRenderer,
-} from "@jsonforms/core"
-import { UISchema } from "../ui-schema"
-import { Divider } from "antd"
+import { OwnPropsOfRenderer } from "@jsonforms/core"
+import { UISchema, GroupLayoutUISchema } from "../ui-schema"
+import { Card, Divider } from "antd"
 import { AntDLayout } from "./LayoutRenderer"
 import React from "react"
+import { assertNever } from "../common/assert-never"
 
 export type LayoutRendererProps = OwnPropsOfRenderer & {
   elements: UISchema[]
@@ -18,6 +16,45 @@ export function GroupLayout({
   ...props
 }: LayoutRendererProps) {
   const groupLayout = uischema as GroupLayoutUISchema
+  if ("groupType" in groupLayout) {
+    const type = groupLayout.groupType
+    switch (type) {
+      case "Card":
+        return (
+          <Card {...groupLayout.cardProps}>
+            {groupLayout?.label && <b>{groupLayout.label}</b>}
+            <AntDLayout
+              {...props}
+              visible={visible}
+              enabled={enabled}
+              elements={groupLayout.elements}
+            />
+          </Card>
+        )
+      case "Divider":
+        return (
+          <>
+            <Divider {...groupLayout.topDividerProps} />
+            {groupLayout?.label && <b>{groupLayout.label}</b>}
+            <AntDLayout
+              {...props}
+              visible={visible}
+              enabled={enabled}
+              elements={groupLayout.elements}
+            />
+            <Divider {...groupLayout.bottomDividerProps} />
+          </>
+        )
+      default:
+        try {
+          assertNever(type)
+        } catch (e) {
+          console.error(
+            `Invalid value configured in GroupLayout UI Schema for groupType: '${type as string}'`,
+          )
+        }
+    }
+  }
   return (
     <>
       <Divider />

src/renderer-registry-entries.ts

@@ -45,7 +45,7 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
     renderer: UnknownRenderer,
   },
   {
-    tester: rankWith(1, uiTypeIs("Group")),
+    tester: rankWith(2, uiTypeIs("Group")),
     renderer: GroupLayoutRenderer,
   },
   {

src/stories/controls/OneOfControl.stories.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react"
 import { rendererRegistryEntries } from "../../renderer-registry-entries"
-import { OneOfControlOptions, UISchema } from "../../ui-schema"
+import {
+  LabelDescription,
+  OneOfControlOptions,
+  UISchema,
+} from "../../ui-schema"
 import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 import { JSONSchema } from "json-schema-to-ts"
 
@@ -176,7 +180,7 @@ export const OneOfTitleLabelStyling: Story = {
             type: "Title",
             text: "Titles are configurable with AntD Title Props",
             titleProps: { level: 5, delete: true, type: "danger" },
-          },
+          } satisfies LabelDescription,
           scope: "#/properties/deliveryOption",
           options: { optionType: "dropdown" } satisfies OneOfControlOptions,
         },

src/stories/layouts/GroupLayout.stories.tsx

@@ -0,0 +1,158 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { rendererRegistryEntries } from "../../renderer-registry-entries"
+import { UISchema } from "../../ui-schema"
+import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
+import { JSONSchema } from "json-schema-to-ts"
+
+const reindeerSchema = {
+  type: "object",
+  properties: {
+    dancer: { type: "string", title: "Dancer" },
+    prancer: { type: "string", title: "Prancer" },
+    comet: { type: "string", title: "Comet" },
+    rudolph: { type: "string", title: "Rudolph" },
+  },
+} satisfies JSONSchema
+
+const addressSchema = {
+  type: "object",
+  properties: {
+    address: { type: "string", title: "Address" },
+    city: { type: "string", title: "City" },
+    state: { type: "string", title: "State" },
+    zip: { type: "string", title: "Zip" },
+  },
+} satisfies JSONSchema
+
+const meta: Meta<typeof StorybookAntDJsonForm> = {
+  title: "Layout/Group",
+  component: StorybookAntDJsonForm,
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: reindeerSchema,
+    rendererRegistryEntries: [...rendererRegistryEntries],
+  },
+  argTypes: {
+    rendererRegistryEntries: { table: { disable: true } },
+    uiSchemaRegistryEntries: { table: { disable: true } },
+    jsonSchema: {
+      control: "object",
+    },
+    data: { table: { disable: true } },
+    config: { control: "object" },
+    onChange: { table: { disable: true, action: "on-change" } },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StorybookAntDJsonForm>
+
+export const Divider: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: reindeerSchema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/dancer",
+        },
+        {
+          type: "Control",
+          scope: "#/properties/prancer",
+        },
+        {
+          type: "Control",
+          scope: "#/properties/comet",
+        },
+        {
+          type: "Group",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/rudolph",
+            },
+          ],
+        },
+      ],
+    } satisfies UISchema,
+  },
+}
+
+export const DividerWithCustomStyles: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: reindeerSchema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/dancer",
+        },
+        {
+          type: "Control",
+          scope: "#/properties/prancer",
+        },
+        {
+          type: "Control",
+          scope: "#/properties/comet",
+        },
+        {
+          type: "Group",
+          groupType: "Divider",
+          bottomDividerProps: {
+            dashed: true,
+            style: { borderColor: "green", borderWidth: "3px" },
+          },
+          topDividerProps: {
+            dashed: true,
+            style: { borderColor: "red", borderWidth: "3px" },
+          },
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/rudolph",
+            },
+          ],
+        },
+      ],
+    } satisfies UISchema,
+  },
+}
+
+export const Card: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: addressSchema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          type: "Group",
+          groupType: "Card",
+          cardProps: { title: "Billing Address", hoverable: true },
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/address",
+            },
+            {
+              type: "Control",
+              scope: "#/properties/city",
+            },
+            {
+              type: "Control",
+              scope: "#/properties/state",
+            },
+            {
+              type: "Control",
+              scope: "#/properties/zip",
+            },
+          ],
+        },
+      ],
+    } satisfies UISchema,
+  },
+}

src/ui-schema.ts

@@ -1,5 +1,11 @@
 import type { JsonSchema } from "@jsonforms/core"
-import type { ButtonProps, InputNumberProps, AlertProps } from "antd"
+import type {
+  ButtonProps,
+  InputNumberProps,
+  AlertProps,
+  CardProps,
+  DividerProps,
+} from "antd"
 import type { RuleObject as AntDRule } from "antd/es/form"
 import type { TitleProps } from "antd/es/typography/Title"
 import type { TextProps } from "antd/es/typography/Text"
@@ -101,7 +107,20 @@ export interface HorizontalLayoutUISchema extends LayoutUISchema {
  * A group resembles a vertical layout, but additionally might have a label.
  * This layout is useful when grouping different elements by a certain criteria.
  */
-interface GroupLayoutUISchema
+export type GroupLayoutUISchema = BaseGroupLayoutUISchema &
+  // using {} is safe and appropriate when used in an intersection type
+  // see last section of this comment: https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-675156492
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  (| {}
+    | { groupType: "Card"; cardProps: CardProps }
+    | {
+        groupType: "Divider"
+        topDividerProps: DividerProps
+        bottomDividerProps: DividerProps
+      }
+  )
+
+interface BaseGroupLayoutUISchema
   extends LayoutUISchema,
     Labelable,
     Internationalizable {
@@ -110,13 +129,15 @@ interface GroupLayoutUISchema
 /**
  * Represents an object that can be used to configure a label.
  */
-export type LabelDescription =
-  | BaseLabelDescription
-  | (BaseLabelDescription &
-      (
-        | { type: "Title"; titleProps: TitleProps }
-        | { type: "Text"; textProps: TextProps }
-      ))
+export type LabelDescription = BaseLabelDescription &
+  // using {} is safe and appropriate when used in an intersection type
+  // see last section of this comment: https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-675156492
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  (| {}
+    | { type: "Title"; titleProps: TitleProps }
+    | { type: "Text"; textProps: TextProps }
+  )
+
 type BaseLabelDescription = {
   text: string
   show?: boolean