Shapes in the palette, and a radio kind

packages/payload-plugin-json-form-builder/src/components/JsonBuilder.tsx

@@ -25,6 +25,7 @@ import { labelOf } from "./JsonNode.js";
 import { schemaErrors } from "../field/checks.js";
 import {
   addAt,
+  addManyAt,
   addSection,
   editAt,
   keyFault,
@@ -65,7 +66,7 @@ export const JsonBuilder = ({
   const [key, setKey] = useState("");
   const [hovered, setHovered] = useState("");
   const [making, setMaking] = useState<"field" | "section" | null>(null);
-  const { anchor: richTextAnchor, library: held, uploads } = useJsonFormConfig();
+  const { anchor: richTextAnchor, library: held, shapes, uploads } = useJsonFormConfig();
   const missing: NodeType[] = [
     ...(uploads ? [] : ["upload" as NodeType]),
     ...(richTextAnchor ? [] : ["richText" as NodeType]),
@@ -159,6 +160,15 @@ export const JsonBuilder = ({
     openModal(formSlug);
   };
 
+  const addShape = (shape: string, fields: TypedNode[]) =>
+    setDraft(
+      addManyAt(
+        draft,
+        here,
+        fields.map((field) => ({ ...field, shape }))
+      )
+    );
+
   const edit = (spot: Spot) => {
     const node = nodeAt(draft, spot);
     setPicked(spot);
@@ -354,6 +364,12 @@ export const JsonBuilder = ({
                   onOrder: reorder,
                   onOpen: (index) => setAt([...at, index]),
                   onRemove: (index) => remove({ section: current, at: [...at, index] }),
+                  onRemoveShape: (from, upto) =>
+                    setDraft(
+                      editAt(draft, here, (node) =>
+                        withShape(node, shapeOf(node).toSpliced(from, upto - from))
+                      )
+                    ),
                 }}
               />
             </>
@@ -373,6 +389,22 @@ export const JsonBuilder = ({
                 ? "A strip of tabs holds tabs only."
                 : "It lands where you are standing."}
           </p>
+          {section && Object.keys(shapes).length > 0 && holder?.type !== "tabs" && (
+            <div className="json-builder__palette">
+              <h5 className="json-builder__group">Custom</h5>
+              {Object.entries(shapes).map(([name, fields]) => (
+                <button
+                  className="json-builder__kind-card"
+                  key={name}
+                  onClick={() => addShape(name, fields)}
+                  type="button"
+                >
+                  <span className="json-builder__tile json-builder__tile--custom">◆</span>
+                  <span className="json-builder__kind-name">{name}</span>
+                </button>
+              ))}
+            </div>
+          )}
           {section &&
             GROUPS.map((group) => {
               const inGroup = offered.filter((type) => KINDS[type].group === group);

packages/payload-plugin-json-form-builder/src/components/JsonBuilderLevel.tsx

@@ -19,6 +19,7 @@ import type { NodeType, TypedNode } from "../field/typedJson.js";
 
 const marks = (node: TypedNode) =>
   [
+    node.type,
     node.required && "required",
     node.readOnly && "read only",
     node.hidden && "hidden",
@@ -30,85 +31,171 @@ type Hands = {
   onOpen: (index: number) => void;
   onEdit: (index: number) => void;
   onRemove: (index: number) => void;
+  onRemoveShape: (from: number, upto: number) => void;
   onOrder: (fields: TypedNode[]) => void;
 };
 
+type Row = { from: number; upto: number; shape?: string };
+
+const rowsOf = (fields: TypedNode[]): Row[] => {
+  const rows: Row[] = [];
+  for (let at = 0; at < fields.length; ) {
+    const shape = fields[at].shape;
+    if (!shape) {
+      rows.push({ from: at, upto: at + 1 });
+      at += 1;
+      continue;
+    }
+    let upto = at + 1;
+    while (upto < fields.length && fields[upto].shape === shape) upto += 1;
+    rows.push({ from: at, shape, upto });
+    at = upto;
+  }
+  return rows;
+};
+
+const Card = ({
+  grip,
+  hands,
+  index,
+  node,
+}: {
+  grip: React.ReactNode;
+  hands: Hands;
+  index: number;
+  node: TypedNode;
+}) => {
+  const kind = KINDS[node.type as NodeType];
+  const holds = holdsFields(node);
+  const fixed = Boolean(node.shape);
+  const Body = fixed ? "span" : "button";
+
+  return (
+    <>
+      {grip}
+      <Body
+        className="json-builder__card-open"
+        onClick={fixed ? undefined : () => (holds ? hands.onOpen(index) : hands.onEdit(index))}
+        type={fixed ? undefined : "button"}
+      >
+        <span
+          className={cn(
+            "json-builder__tile",
+            `json-builder__tile--${kind?.group.toLowerCase() ?? "structure"}`
+          )}
+        >
+          {kind?.glyph ?? "?"}
+        </span>
+        <span className="json-builder__card-text">
+          <span className="json-builder__name">
+            {labelOf(node) || <em>no name</em>}
+            {node.name ? <code className="json-builder__key">#{node.name}</code> : null}
+          </span>
+          <span className="json-builder__marks">
+            {marks(node).map((mark) => (
+              <Pill key={mark} pillStyle="light-gray" size="small">
+                {mark}
+              </Pill>
+            ))}
+          </span>
+        </span>
+      </Body>
+      {fixed ? null : (
+        <div className="json-builder__card-actions">
+          <IconButton label="Edit this field" onClick={() => hands.onEdit(index)}>
+            <EditIcon />
+          </IconButton>
+          <IconButton
+            className="json-builder__drop"
+            label="Remove this field"
+            onClick={() => hands.onRemove(index)}
+          >
+            <XIcon />
+          </IconButton>
+          {holds ? (
+            <span className="json-builder__door">
+              <ChevronIcon direction="right" />
+            </span>
+          ) : null}
+        </div>
+      )}
+    </>
+  );
+};
+
 export const JsonBuilderLevel = ({ fields, hands }: { fields: TypedNode[]; hands: Hands }) => {
-  const ids = fields.map((node, index) => node.name || `#${index + 1}`);
+  const rows = rowsOf(fields);
+  const ids = rows.map((row) => fields[row.from].name || `#${row.from + 1}`);
 
   return (
     <DraggableSortable
       className="json-builder__cards"
       ids={ids}
       onDragEnd={({ moveFromIndex, moveToIndex }) =>
         hands.onOrder(
-          fields.toSpliced(moveFromIndex, 1).toSpliced(moveToIndex, 0, fields[moveFromIndex])
+          rows
+            .toSpliced(moveFromIndex, 1)
+            .toSpliced(moveToIndex, 0, rows[moveFromIndex])
+            .flatMap((row) => fields.slice(row.from, row.upto))
         )
       }
     >
-      {fields.map((node, index) => {
-        const kind = KINDS[node.type as NodeType];
-        const holds = holdsFields(node);
-        return (
-          <DraggableSortableItem id={ids[index]} key={ids[index]}>
+      {rows.map((row, at) =>
+        row.shape ? (
+          <DraggableSortableItem id={ids[at]} key={ids[at]}>
             {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (
               <div
-                className={cn("json-builder__card", holds && "json-builder__card--holds")}
+                className="json-builder__shape"
                 ref={setNodeRef}
                 style={{ transform, transition, zIndex: isDragging ? 1 : undefined }}
               >
-                <span className="json-builder__grip" {...attributes} {...listeners}>
-                  <DragHandleIcon />
-                </span>
-                <button
-                  className="json-builder__card-open"
-                  onClick={() => (holds ? hands.onOpen(index) : hands.onEdit(index))}
-                  type="button"
-                >
-                  <span
-                    className={cn(
-                      "json-builder__tile",
-                      `json-builder__tile--${kind?.group.toLowerCase() ?? "structure"}`
-                    )}
-                  >
-                    {kind?.glyph ?? "?"}
-                  </span>
-                  <span className="json-builder__card-text">
-                    <span className="json-builder__name">
-                      {labelOf(node) || <em>no name</em>}
-                      {node.name ? <code className="json-builder__key">#{node.name}</code> : null}
-                    </span>
-                    <span className="json-builder__marks">
-                      {marks(node).map((mark) => (
-                        <Pill key={mark} pillStyle="light-gray" size="small">
-                          {mark}
-                        </Pill>
-                      ))}
-                    </span>
+                <div className="json-builder__shape-head">
+                  <span className="json-builder__grip" {...attributes} {...listeners}>
+                    <DragHandleIcon />
                   </span>
-                </button>
-                <div className="json-builder__card-actions">
-                  <IconButton label="Edit this field" onClick={() => hands.onEdit(index)}>
-                    <EditIcon />
-                  </IconButton>
+                  <span className="json-builder__shape-name">{row.shape}</span>
                   <IconButton
                     className="json-builder__drop"
-                    label="Remove this field"
-                    onClick={() => hands.onRemove(index)}
+                    label={`Remove this ${row.shape}`}
+                    onClick={() => hands.onRemoveShape(row.from, row.upto)}
                   >
                     <XIcon />
                   </IconButton>
-                  {holds ? (
-                    <span className="json-builder__door">
-                      <ChevronIcon direction="right" />
-                    </span>
-                  ) : null}
                 </div>
+                {fields.slice(row.from, row.upto).map((node, offset) => (
+                  <div className="json-builder__card" key={`${ids[at]}-${node.name ?? offset}`}>
+                    <Card grip={null} hands={hands} index={row.from + offset} node={node} />
+                  </div>
+                ))}
               </div>
             )}
           </DraggableSortableItem>
-        );
-      })}
+        ) : (
+          <DraggableSortableItem id={ids[at]} key={ids[at]}>
+            {({ attributes, isDragging, listeners, setNodeRef, transform, transition }) => (
+              <div
+                className={cn(
+                  "json-builder__card",
+                  holdsFields(fields[row.from]) && "json-builder__card--holds"
+                )}
+                ref={setNodeRef}
+                style={{ transform, transition, zIndex: isDragging ? 1 : undefined }}
+              >
+                <Card
+                  grip={
+                    <span className="json-builder__grip" {...attributes} {...listeners}>
+                      <DragHandleIcon />
+                    </span>
+                  }
+                  hands={hands}
+                  index={row.from}
+                  node={fields[row.from]}
+                />
+              </div>
+            )}
+          </DraggableSortableItem>
+        )
+      )}
       {fields.length ? null : (
         <Banner type="default">
           Nothing here yet. Pick a kind on the right and it lands in this level.

packages/payload-plugin-json-form-builder/src/components/JsonBuilderSettings.tsx

@@ -99,7 +99,9 @@ export const JsonBuilderSettings = ({ node, onChange }: Settings) => {
           value={node.label ?? ""}
         />
       )}
-      {node.type === "select" && <Options node={node} onChange={onChange} />}
+      {(node.type === "select" || node.type === "radio") && (
+        <Options node={node} onChange={onChange} />
+      )}
       {node.type === "number" && (
         <>
           <Limit name="min" node={node} onChange={onChange} />