feat: Primitive Array Control

src/antd/Button.tsx

@@ -0,0 +1,61 @@
+import { Button as AntDButton, ButtonProps as AntDButtonProps } from "antd"
+
+import React, { ForwardedRef } from "react"
+
+function ButtonForwardRef(
+  {
+    type = "default",
+    size,
+    loading = false,
+    disabled = false,
+    danger = false,
+    icon: iconName,
+    title: _title,
+    "aria-label": _ariaLabel,
+    ...props
+  }: AntDButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  const iconOnly = Boolean(iconName && !props.children)
+  const title = _title ?? _ariaLabel
+  const ariaLabel = _ariaLabel ?? _title
+
+  if (iconOnly && !title) {
+    console.warn("Untitled icon button", iconName)
+  }
+
+  // const icon = iconName && !loading ? <Icon name={iconName} size={"14px"} disabled={disabled} /> : undefined
+
+  const defaultIconStyles = iconOnly
+    ? {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }
+    : {
+        textOverflow: "initial",
+        overflow: "initial",
+      }
+
+  const styles = { icon: { ...defaultIconStyles, ...props.styles?.icon }, ...props.styles }
+
+  return (
+    <AntDButton
+      ref={ref}
+      type={type}
+      size={size}
+      loading={loading}
+      disabled={disabled}
+      danger={danger}
+      // icon={icon}
+      styles={styles}
+      title={title}
+      aria-label={ariaLabel}
+      {...props}
+    />
+  )
+}
+
+const Button = React.forwardRef<HTMLButtonElement, AntDButtonProps>(ButtonForwardRef)
+
+export { Button }

src/controls/PrimitiveArrayControl.tsx

@@ -0,0 +1,72 @@
+import { useMemo } from "react"
+import {
+  findUISchema,
+  composePaths,
+  ArrayControlProps,
+  createDefaultValue,
+} from "@jsonforms/core"
+import { JsonFormsDispatch } from "@jsonforms/react"
+import { Button } from "../antd/Button"
+import { Row } from "antd"
+
+export function PrimitiveArrayControl({
+  renderers,
+  uischemas,
+  schema,
+  data,
+  label,
+  path,
+  visible,
+  uischema,
+  rootSchema,
+  addItem,
+  removeItems,
+}: ArrayControlProps) {
+  const childUiSchema = useMemo(
+    () => findUISchema(uischemas ?? [], schema, uischema.scope, path, undefined, uischema, rootSchema),
+    [uischemas, schema, path, uischema, rootSchema],
+  )
+
+  if (!visible) {
+    return null
+  }
+
+  const ariaLabelWithFallback = label || "Value"
+
+  return (
+    <div>
+      <Row>
+        <Button
+          size="small"
+          onClick={addItem(path, createDefaultValue(schema, rootSchema))}
+          aria-label={`Add ${ariaLabelWithFallback}`}
+          icon="plus"
+        >
+          Add
+        </Button>
+      </Row>
+        {data?.map((_: unknown, index: number) => {
+          const childPath = composePaths(path, `${index}`)
+          return (
+            <Row key={childPath}>
+              <JsonFormsDispatch
+                schema={{ ...schema, description: `${ariaLabelWithFallback} ${index + 1}` }}
+                uischema={childUiSchema || uischema}
+                path={childPath}
+                renderers={renderers}
+              />
+              <Button
+                size="small"
+                aria-label="Remove list item"
+                onClick={() => {
+                  removeItems?.(path, [index])?.()
+                }}
+                title="Delete element"
+                icon="trash"
+              />
+            </Row>
+          )
+        })}
+    </div>
+  )
+}

src/renderers.ts

@@ -2,6 +2,7 @@ import {
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
   isBooleanControl,
+  isPrimitiveArrayControl,
   isStringControl,
   rankWith,
   uiTypeIs,
@@ -11,6 +12,7 @@ import {
   and,
 } from "@jsonforms/core"
 import {
+  withJsonFormsArrayControlProps,
   withJsonFormsControlProps,
   withJsonFormsLabelProps,
   withJsonFormsCellProps,
@@ -27,6 +29,7 @@ import { ObjectControl } from "./controls/ObjectControl"
 import { GroupLayoutRenderer } from "./layouts/GroupLayoutRenderer"
 import { NumericControl } from "./controls/NumericControls/NumericControl"
 import { NumericSliderControl } from "./controls/NumericControls/NumericSliderControl"
+import { PrimitiveArrayControl } from "./controls/PrimitiveArrayControl";
 import React from "react"
 
 import {
@@ -80,6 +83,10 @@ export const rendererRegistryEntries: JsonFormsRendererRegistryEntry[] = [
     tester: rankWith(10, and(isObjectControl, not(isLayout))),
     renderer: withJsonFormsDetailProps(ObjectControl),
   },
+  { 
+    tester: rankWith(30, isPrimitiveArrayControl), 
+    renderer: withJsonFormsArrayControlProps(PrimitiveArrayControl) 
+  },
 ]
 
 export const cellRegistryEntries: JsonFormsCellRendererRegistryEntry[] = [

src/stories/controls/PrimitiveArrayControl.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { rendererRegistryEntries } from "../../renderers";
+import { UISchema } from "../../ui-schema";
+import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm";
+
+const PrimitiveArrayControlUISchema: UISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      scope: "#/properties/pokemon",
+      type: "Control",
+    },
+  ],
+};
+
+const schema = {
+  type: "object",
+  properties: {
+    pokemon: {
+      title: "Pokémon",
+      type: "array",
+      items: {
+        type: "number",
+      },
+    },
+  },
+};
+
+const meta: Meta<typeof StorybookAntDJsonForm> = {
+  title: "Control/Primitive Array",
+  component: StorybookAntDJsonForm,
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: schema,
+    rendererRegistryEntries: [...rendererRegistryEntries],
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    rendererRegistryEntries: { table: { disable: true } },
+    jsonSchema: {
+      control: "object",
+    },
+    uiSchemaRegistryEntries: { table: { disable: true } },
+    data: { table: { disable: true } },
+    config: { control: "object" },
+    onChange: { table: { disable: true, action: "on-change" } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StorybookAntDJsonForm>;
+
+export const PrimitiveArrayOfNumbers: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: schema,
+    uiSchema: PrimitiveArrayControlUISchema,
+  },
+};

src/testSchemas/arraySchema.ts

@@ -0,0 +1,44 @@
+import { JSONSchema } from "json-schema-to-ts"
+import { UISchema } from "../ui-schema"
+
+export const sampleArrayOfStringsSchema = {
+  type: "object",
+  properties: {
+    array: {
+      title: "My Array",
+      type: "array",
+      items: {
+        type: "string",
+      },
+    }
+  },
+} satisfies JSONSchema
+
+export const uiSchemaWithNoElements = {
+  type: "VerticalLayout",
+  elements: [],
+} satisfies UISchema
+
+export const uiSchemaWithTheArray = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/array",
+    },
+  ],
+} satisfies UISchema
+
+export const uiSchemaWithHideRule = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/array",
+      rule: {
+        effect: "HIDE",
+        condition: {},
+      },
+    },
+  ],
+} satisfies UISchema