From d133810650a3916a2b6fa1abd11ff515966e60f2 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 9 Oct 2023 18:16:02 +0100
Subject: [PATCH 1/9] refactor: split InputOrGroup into smaller files

---
 .../InputOrGroup/fields/ArrayField/index.tsx  |  90 ++++++
 .../fields/DefaultField/index.tsx             |  42 +++
 .../fields/ExternalField/index.tsx            |  28 ++
 .../InputOrGroup/fields/RadioField/index.tsx  |  63 +++++
 .../InputOrGroup/fields/SelectField/index.tsx |  52 ++++
 .../fields/TextareaField/index.tsx            |  34 +++
 .../components/InputOrGroup/fields/index.tsx  |   6 +
 .../core/components/InputOrGroup/index.tsx    | 256 ++----------------
 8 files changed, 334 insertions(+), 237 deletions(-)
 create mode 100644 packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/RadioField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/SelectField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
 create mode 100644 packages/core/components/InputOrGroup/fields/index.tsx

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
new file mode 100644
index 000000000..7c713496a
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -0,0 +1,90 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import { List, Trash } from "react-feather";
+import { InputOrGroup, type InputProps } from "../..";
+import { IconButton } from "../../../IconButton";
+import { replace } from "../../../../lib";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const ArrayField = ({
+  field,
+  onChange,
+  value,
+  name,
+  label,
+}: InputProps) => {
+  if (!field.arrayFields) {
+    return null;
+  }
+
+  return (
+    <div className={getClassName()}>
+      <b className={getClassName("label")}>
+        <div className={getClassName("labelIcon")}>
+          <List size={16} />
+        </div>
+        {label || name}
+      </b>
+      <div className={getClassName("array")}>
+        {Array.isArray(value) ? (
+          value.map((item, i) => (
+            <details key={`${name}_${i}`} className={getClassName("arrayItem")}>
+              <summary>
+                {field.getItemSummary
+                  ? field.getItemSummary(item, i)
+                  : `Item #${i}`}
+
+                <div className={getClassName("arrayItemAction")}>
+                  <IconButton
+                    onClick={() => {
+                      const existingValue = value || [];
+
+                      existingValue.splice(i, 1);
+                      onChange(existingValue);
+                    }}
+                    title="Delete"
+                  >
+                    <Trash size={21} />
+                  </IconButton>
+                </div>
+              </summary>
+              <fieldset className={getClassName("fieldset")}>
+                {Object.keys(field.arrayFields!).map((fieldName) => {
+                  const subField = field.arrayFields![fieldName];
+
+                  return (
+                    <InputOrGroup
+                      key={`${name}_${i}_${fieldName}`}
+                      name={`${name}_${i}_${fieldName}`}
+                      label={subField.label || fieldName}
+                      field={subField}
+                      value={item[fieldName]}
+                      onChange={(val) =>
+                        onChange(
+                          replace(value, i, { ...item, [fieldName]: val })
+                        )
+                      }
+                    />
+                  );
+                })}
+              </fieldset>
+            </details>
+          ))
+        ) : (
+          <div />
+        )}
+
+        <button
+          className={getClassName("addButton")}
+          onClick={() => {
+            const existingValue = value || [];
+            onChange([...existingValue, field.defaultItemProps || {}]);
+          }}
+        >
+          + Add item
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
new file mode 100644
index 000000000..dfb9f2c90
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
@@ -0,0 +1,42 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import { Hash, Type } from "react-feather";
+import type { InputProps } from "../..";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const DefaultField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name,
+  label,
+}: InputProps) => {
+  return (
+    <label className={getClassName({ readOnly })}>
+      <div className={getClassName("label")}>
+        <div className={getClassName("labelIcon")}>
+          {field.type === "text" && <Type size={16} />}
+          {field.type === "number" && <Hash size={16} />}
+        </div>
+        {label || name}
+      </div>
+      <input
+        className={getClassName("input")}
+        autoComplete="off"
+        type={field.type}
+        name={name}
+        value={typeof value === "undefined" ? "" : value}
+        onChange={(e) => {
+          if (field.type === "number") {
+            onChange(Number(e.currentTarget.value));
+          } else {
+            onChange(e.currentTarget.value);
+          }
+        }}
+        readOnly={readOnly}
+      />
+    </label>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
new file mode 100644
index 000000000..672d6e63e
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
@@ -0,0 +1,28 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import type { InputProps } from "../..";
+import { ExternalInput } from "../../../ExternalInput";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const ExternalField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name,
+  label,
+}: InputProps) => {
+  if (!field.adaptor) {
+    return null;
+  }
+
+  return (
+    <div className={getClassName("")}>
+      <div className={getClassName("label")}>
+        {name === "_data" ? "External content" : label || name}
+      </div>
+      <ExternalInput field={field} onChange={onChange} value={value} />
+    </div>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/RadioField/index.tsx b/packages/core/components/InputOrGroup/fields/RadioField/index.tsx
new file mode 100644
index 000000000..3dc630b56
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/RadioField/index.tsx
@@ -0,0 +1,63 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import { CheckCircle } from "react-feather";
+import type { InputProps } from "../..";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const RadioField = ({
+  field,
+  onChange,
+  readOnly,
+  value,
+  name,
+}: InputProps) => {
+  if (!field.options) {
+    return null;
+  }
+
+  return (
+    <div className={getClassName()}>
+      <div className={getClassName("radioGroup")}>
+        <div className={getClassName("label")}>
+          <div className={getClassName("labelIcon")}>
+            <CheckCircle size={16} />
+          </div>
+          {field.label || name}
+        </div>
+
+        <div className={getClassName("radioGroupItems")}>
+          {field.options.map((option) => (
+            <label
+              key={option.label + option.value}
+              className={getClassName("radio")}
+            >
+              <input
+                type="radio"
+                className={getClassName("radioInput")}
+                value={option.value as string | number}
+                name={name}
+                onChange={(e) => {
+                  if (
+                    e.currentTarget.value === "true" ||
+                    e.currentTarget.value === "false"
+                  ) {
+                    onChange(JSON.parse(e.currentTarget.value));
+                    return;
+                  }
+
+                  onChange(e.currentTarget.value);
+                }}
+                readOnly={readOnly}
+                defaultChecked={value === option.value}
+              />
+              <div className={getClassName("radioInner")}>
+                {option.label || option.value}
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/SelectField/index.tsx b/packages/core/components/InputOrGroup/fields/SelectField/index.tsx
new file mode 100644
index 000000000..f98ef53ca
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/SelectField/index.tsx
@@ -0,0 +1,52 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import { ChevronDown } from "react-feather";
+import type { InputProps } from "../..";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const SelectField = ({
+  field,
+  onChange,
+  label,
+  value,
+  name,
+}: InputProps) => {
+  if (!field.options) {
+    return null;
+  }
+
+  return (
+    <label className={getClassName()}>
+      <div className={getClassName("label")}>
+        <div className={getClassName("labelIcon")}>
+          <ChevronDown size={16} />
+        </div>
+        {label || name}
+      </div>
+      <select
+        className={getClassName("input")}
+        onChange={(e) => {
+          if (
+            e.currentTarget.value === "true" ||
+            e.currentTarget.value === "false"
+          ) {
+            onChange(Boolean(e.currentTarget.value));
+            return;
+          }
+
+          onChange(e.currentTarget.value);
+        }}
+        value={value}
+      >
+        {field.options.map((option) => (
+          <option
+            key={option.label + option.value}
+            label={option.label}
+            value={option.value as string | number}
+          />
+        ))}
+      </select>
+    </label>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
new file mode 100644
index 000000000..8fae006c7
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
@@ -0,0 +1,34 @@
+import getClassNameFactory from "../../../../lib/get-class-name-factory";
+import styles from "../../styles.module.css";
+import { Type } from "react-feather";
+import type { InputProps } from "../..";
+
+const getClassName = getClassNameFactory("Input", styles);
+
+export const TextareaField = ({
+  onChange,
+  readOnly,
+  value,
+  name,
+  label,
+}: InputProps) => {
+  return (
+    <label className={getClassName({ readOnly })}>
+      <div className={getClassName("label")}>
+        <div className={getClassName("labelIcon")}>
+          <Type size={16} />
+        </div>
+        {label || name}
+      </div>
+      <textarea
+        className={getClassName("input")}
+        autoComplete="off"
+        name={name}
+        value={typeof value === "undefined" ? "" : value}
+        onChange={(e) => onChange(e.currentTarget.value)}
+        readOnly={readOnly}
+        rows={5}
+      />
+    </label>
+  );
+};
diff --git a/packages/core/components/InputOrGroup/fields/index.tsx b/packages/core/components/InputOrGroup/fields/index.tsx
new file mode 100644
index 000000000..8eef38752
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/index.tsx
@@ -0,0 +1,6 @@
+export * from "./ArrayField";
+export * from "./DefaultField";
+export * from "./ExternalField";
+export * from "./RadioField";
+export * from "./SelectField";
+export * from "./TextareaField";
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
index 57f57906f..2ec4ec16e 100644
--- a/packages/core/components/InputOrGroup/index.tsx
+++ b/packages/core/components/InputOrGroup/index.tsx
@@ -1,19 +1,16 @@
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Field } from "../../types/Config";
-import { ExternalInput } from "../ExternalInput";
 
 import styles from "./styles.module.css";
-import { replace } from "../../lib";
-import {
-  Trash,
-  Type,
-  List,
-  ChevronDown,
-  CheckCircle,
-  Hash,
-} from "react-feather";
-import { IconButton } from "../IconButton";
 import { ReactNode } from "react";
+import {
+  RadioField,
+  SelectField,
+  ExternalField,
+  ArrayField,
+  DefaultField,
+  TextareaField,
+} from "./fields";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -37,226 +34,36 @@ export const FieldLabel = ({
   );
 };
 
-export const InputOrGroup = ({
-  name,
-  field,
-  value,
-  label,
-  onChange,
-  readOnly,
-}: {
+export type InputProps = {
   name: string;
   field: Field<any>;
   value: any;
   label?: string;
   onChange: (value: any) => void;
   readOnly?: boolean;
-}) => {
-  if (field.type === "array") {
-    if (!field.arrayFields) {
-      return null;
-    }
-
-    return (
-      <div className={getClassName()}>
-        <b className={getClassName("label")}>
-          <div className={getClassName("labelIcon")}>
-            <List size={16} />
-          </div>
-          {label || name}
-        </b>
-        <div className={getClassName("array")}>
-          {Array.isArray(value) ? (
-            value.map((item, i) => (
-              <details
-                key={`${name}_${i}`}
-                className={getClassName("arrayItem")}
-              >
-                <summary>
-                  {field.getItemSummary
-                    ? field.getItemSummary(item, i)
-                    : `Item #${i}`}
-
-                  <div className={getClassName("arrayItemAction")}>
-                    <IconButton
-                      onClick={() => {
-                        const existingValue = value || [];
-
-                        existingValue.splice(i, 1);
-                        onChange(existingValue);
-                      }}
-                      title="Delete"
-                    >
-                      <Trash size={21} />
-                    </IconButton>
-                  </div>
-                </summary>
-                <fieldset className={getClassName("fieldset")}>
-                  {Object.keys(field.arrayFields!).map((fieldName) => {
-                    const subField = field.arrayFields![fieldName];
+};
 
-                    return (
-                      <InputOrGroup
-                        key={`${name}_${i}_${fieldName}`}
-                        name={`${name}_${i}_${fieldName}`}
-                        label={subField.label || fieldName}
-                        field={subField}
-                        value={item[fieldName]}
-                        onChange={(val) =>
-                          onChange(
-                            replace(value, i, { ...item, [fieldName]: val })
-                          )
-                        }
-                      />
-                    );
-                  })}
-                </fieldset>
-              </details>
-            ))
-          ) : (
-            <div />
-          )}
+export const InputOrGroup = (props: InputProps) => {
+  const { name, field, value, onChange, readOnly } = props;
 
-          <button
-            className={getClassName("addButton")}
-            onClick={() => {
-              const existingValue = value || [];
-              onChange([...existingValue, field.defaultItemProps || {}]);
-            }}
-          >
-            + Add item
-          </button>
-        </div>
-      </div>
-    );
+  if (field.type === "array") {
+    return <ArrayField {...props} />;
   }
 
   if (field.type === "external") {
-    if (!field.adaptor) {
-      return null;
-    }
-
-    return (
-      <div className={getClassName("")}>
-        <div className={getClassName("label")}>
-          {name === "_data" ? "External content" : label || name}
-        </div>
-        <ExternalInput field={field} onChange={onChange} value={value} />
-      </div>
-    );
+    return <ExternalField {...props} />;
   }
 
   if (field.type === "select") {
-    if (!field.options) {
-      return null;
-    }
-
-    return (
-      <label className={getClassName()}>
-        <div className={getClassName("label")}>
-          <div className={getClassName("labelIcon")}>
-            <ChevronDown size={16} />
-          </div>
-          {label || name}
-        </div>
-        <select
-          className={getClassName("input")}
-          onChange={(e) => {
-            if (
-              e.currentTarget.value === "true" ||
-              e.currentTarget.value === "false"
-            ) {
-              onChange(Boolean(e.currentTarget.value));
-              return;
-            }
-
-            onChange(e.currentTarget.value);
-          }}
-          value={value}
-        >
-          {field.options.map((option) => (
-            <option
-              key={option.label + option.value}
-              label={option.label}
-              value={option.value as string | number}
-            />
-          ))}
-        </select>
-      </label>
-    );
+    return <SelectField {...props} />;
   }
 
   if (field.type === "textarea") {
-    return (
-      <label className={getClassName({ readOnly })}>
-        <div className={getClassName("label")}>
-          <div className={getClassName("labelIcon")}>
-            <Type size={16} />
-          </div>
-          {label || name}
-        </div>
-        <textarea
-          className={getClassName("input")}
-          autoComplete="off"
-          name={name}
-          value={typeof value === "undefined" ? "" : value}
-          onChange={(e) => onChange(e.currentTarget.value)}
-          readOnly={readOnly}
-          rows={5}
-        />
-      </label>
-    );
+    return <TextareaField {...props} />;
   }
 
   if (field.type === "radio") {
-    if (!field.options) {
-      return null;
-    }
-
-    return (
-      <div className={getClassName()}>
-        <div className={getClassName("radioGroup")}>
-          <div className={getClassName("label")}>
-            <div className={getClassName("labelIcon")}>
-              <CheckCircle size={16} />
-            </div>
-            {field.label || name}
-          </div>
-
-          <div className={getClassName("radioGroupItems")}>
-            {field.options.map((option) => (
-              <label
-                key={option.label + option.value}
-                className={getClassName("radio")}
-              >
-                <input
-                  type="radio"
-                  className={getClassName("radioInput")}
-                  value={option.value as string | number}
-                  name={name}
-                  onChange={(e) => {
-                    if (
-                      e.currentTarget.value === "true" ||
-                      e.currentTarget.value === "false"
-                    ) {
-                      onChange(JSON.parse(e.currentTarget.value));
-                      return;
-                    }
-
-                    onChange(e.currentTarget.value);
-                  }}
-                  readOnly={readOnly}
-                  defaultChecked={value === option.value}
-                />
-                <div className={getClassName("radioInner")}>
-                  {option.label || option.value}
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
+    return <RadioField {...props} />;
   }
 
   if (field.type === "custom") {
@@ -277,30 +84,5 @@ export const InputOrGroup = ({
     );
   }
 
-  return (
-    <label className={getClassName({ readOnly })}>
-      <div className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
-          {field.type === "text" && <Type size={16} />}
-          {field.type === "number" && <Hash size={16} />}
-        </div>
-        {label || name}
-      </div>
-      <input
-        className={getClassName("input")}
-        autoComplete="off"
-        type={field.type}
-        name={name}
-        value={typeof value === "undefined" ? "" : value}
-        onChange={(e) => {
-          if (field.type === "number") {
-            onChange(Number(e.currentTarget.value));
-          } else {
-            onChange(e.currentTarget.value);
-          }
-        }}
-        readOnly={readOnly}
-      />
-    </label>
-  );
+  return <DefaultField {...props} />;
 };

From 5ff7df38b9d54492cbebc6182e4e61ae238c6c48 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 9 Oct 2023 18:18:16 +0100
Subject: [PATCH 2/9] docs: add default item props to demo ButtonGroup items

---
 apps/demo/config/blocks/ButtonGroup/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/demo/config/blocks/ButtonGroup/index.tsx b/apps/demo/config/blocks/ButtonGroup/index.tsx
index 3d30e5792..18414b2ef 100644
--- a/apps/demo/config/blocks/ButtonGroup/index.tsx
+++ b/apps/demo/config/blocks/ButtonGroup/index.tsx
@@ -10,7 +10,7 @@ const getClassName = getClassNameFactory("ButtonGroup", styles);
 
 export type ButtonGroupProps = {
   align?: string;
-  buttons: { label: string; href: string; variant?: "primary" | "secondary" }[];
+  buttons: { label: string; href: string; variant: "primary" | "secondary" }[];
 };
 
 export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
@@ -29,6 +29,11 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
           ],
         },
       },
+      defaultItemProps: {
+        label: "Button",
+        href: "#",
+        variant: "primary",
+      },
     },
     align: {
       type: "radio",
@@ -39,7 +44,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
     },
   },
   defaultProps: {
-    buttons: [{ label: "Learn more", href: "#" }],
+    buttons: [{ label: "Learn more", href: "#", variant: "primary" }],
   },
   render: ({ align, buttons }) => {
     return (

From fbf2c6970d268a288a635dd45fe9fbf192a517bf Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 9 Oct 2023 18:30:48 +0100
Subject: [PATCH 3/9] fix: prevent style pollution for select fields

---
 packages/core/components/InputOrGroup/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 6dc1a882f..330fee868 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -46,7 +46,7 @@
   width: 100%;
 }
 
-.Input select {
+.Input select.Input-input {
   /* Safari */
   appearance: none;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>")

From 1934b1b721e91c2a2bd98c29d2e2299944494565 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 9 Oct 2023 18:44:18 +0100
Subject: [PATCH 4/9] refactor: separate out Draggable from ComponentList

---
 .../core/components/ComponentList/index.tsx   | 53 +++++--------------
 .../ComponentList/styles.module.css           |  8 ++-
 packages/core/components/Draggable/index.tsx  | 43 +++++++++++++++
 3 files changed, 60 insertions(+), 44 deletions(-)
 create mode 100644 packages/core/components/Draggable/index.tsx

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index 690c7ea60..5272f8992 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -1,10 +1,10 @@
 import DroppableStrictMode from "../DroppableStrictMode";
-import { ComponentConfig, Config } from "../../types/Config";
-import { Draggable } from "react-beautiful-dnd";
+import { Config } from "../../types/Config";
 
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Grid } from "react-feather";
+import { Draggable } from "../Draggable";
 
 const getClassName = getClassNameFactory("ComponentList", styles);
 
@@ -15,50 +15,25 @@ export const ComponentList = ({ config }: { config: Config }) => {
         <div
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={getClassName()}
+          className={getClassName({
+            isDraggingFrom: !!snapshot.draggingFromThisWith,
+          })}
         >
           {Object.keys(config.components).map((componentKey, i) => {
-            const componentConfig: ComponentConfig = config[componentKey];
-
             return (
               <Draggable
                 key={componentKey}
-                draggableId={componentKey}
+                id={componentKey}
                 index={i}
+                showShadow
+                disableAnimations
               >
-                {(provided, snapshot) => (
-                  <>
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      className={getClassName("item")}
-                      style={{
-                        ...provided.draggableProps.style,
-                        transform: snapshot.isDragging
-                          ? provided.draggableProps.style?.transform
-                          : "translate(0px, 0px)",
-                      }}
-                    >
-                      {componentKey}
-                      <div className={getClassName("itemIcon")}>
-                        <Grid size={18} />
-                      </div>
-                    </div>
-                    {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
-                    {snapshot.isDragging && (
-                      <div
-                        className={getClassName("itemShadow")}
-                        style={{ transform: "none !important" }}
-                      >
-                        {componentKey}
-                        <div className={getClassName("itemIcon")}>
-                          <Grid size={18} />
-                        </div>
-                      </div>
-                    )}
-                  </>
-                )}
+                <div className={getClassName("item")}>
+                  {componentKey}
+                  <div className={getClassName("itemIcon")}>
+                    <Grid size={18} />
+                  </div>
+                </div>
               </Draggable>
             );
           })}
diff --git a/packages/core/components/ComponentList/styles.module.css b/packages/core/components/ComponentList/styles.module.css
index 2eff94fde..05885e706 100644
--- a/packages/core/components/ComponentList/styles.module.css
+++ b/packages/core/components/ComponentList/styles.module.css
@@ -6,8 +6,7 @@
   grid-gap: 12px;
 }
 
-.ComponentList-item,
-.ComponentList-itemShadow {
+.ComponentList-item {
   background: white;
   padding: 12px;
   display: flex;
@@ -20,8 +19,7 @@
   cursor: grab;
 }
 
-.ComponentList-item:last-of-type,
-.ComponentList-itemShadow:last-of-type {
+.ComponentList-item:last-of-type {
   margin-bottom: 0px;
 }
 
@@ -29,6 +27,6 @@
   color: var(--puck-color-grey-4);
 }
 
-.ComponentList-item:hover {
+.ComponentList:not(.ComponentList--isDraggingFrom) .ComponentList-item:hover {
   background-color: var(--puck-color-azure-9);
 }
diff --git a/packages/core/components/Draggable/index.tsx b/packages/core/components/Draggable/index.tsx
new file mode 100644
index 000000000..510ee8375
--- /dev/null
+++ b/packages/core/components/Draggable/index.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { Draggable as DndDraggable } from "react-beautiful-dnd";
+
+export const Draggable = ({
+  children,
+  id,
+  index,
+  showShadow,
+  disableAnimations = false,
+}: {
+  children: ReactNode;
+  id: string;
+  index: number;
+  showShadow?: boolean;
+  disableAnimations?: boolean;
+}) => {
+  return (
+    <DndDraggable draggableId={id} index={index}>
+      {(provided, snapshot) => (
+        <>
+          <div
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            style={{
+              ...provided.draggableProps.style,
+              transform:
+                snapshot.isDragging || !disableAnimations
+                  ? provided.draggableProps.style?.transform
+                  : "translate(0px, 0px)",
+            }}
+          >
+            {children}
+          </div>
+          {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
+          {showShadow && snapshot.isDragging && (
+            <div style={{ transform: "none !important" }}>{children}</div>
+          )}
+        </>
+      )}
+    </DndDraggable>
+  );
+};

From a864e45405df6b5fdaabe75c22a79385226208b7 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 10 Oct 2023 15:40:33 +0100
Subject: [PATCH 5/9] feat: enable drag-and-drop of array items

---
 .../InputOrGroup/fields/ArrayField/index.tsx  | 168 ++++++++++++------
 .../components/InputOrGroup/styles.module.css |  21 +--
 2 files changed, 122 insertions(+), 67 deletions(-)

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
index 7c713496a..28c7eaed7 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -3,10 +3,20 @@ import styles from "../../styles.module.css";
 import { List, Trash } from "react-feather";
 import { InputOrGroup, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
-import { replace } from "../../../../lib";
+import { reorder, replace } from "../../../../lib";
+import DroppableStrictMode from "../../../DroppableStrictMode";
+import { DragDropContext } from "react-beautiful-dnd";
+import { Draggable } from "../../../Draggable";
+import { generateId } from "../../../../lib/generate-id";
+import { useEffect, useState } from "react";
 
 const getClassName = getClassNameFactory("Input", styles);
 
+type ItemWithId = {
+  _arrayId: string;
+  data: any;
+};
+
 export const ArrayField = ({
   field,
   onChange,
@@ -14,6 +24,18 @@ export const ArrayField = ({
   name,
   label,
 }: InputProps) => {
+  const [valueWithIds, setValueWithIds] = useState<ItemWithId[]>(value);
+
+  // Create a mirror of value with IDs added for drag and drop
+  useEffect(() => {
+    const newValueWithIds = value.map((item, idx) => ({
+      _arrayId: valueWithIds[idx]?._arrayId || generateId("ArrayItem"),
+      data: item,
+    }));
+
+    setValueWithIds(newValueWithIds);
+  }, [value]);
+
   if (!field.arrayFields) {
     return null;
   }
@@ -26,65 +48,101 @@ export const ArrayField = ({
         </div>
         {label || name}
       </b>
-      <div className={getClassName("array")}>
-        {Array.isArray(value) ? (
-          value.map((item, i) => (
-            <details key={`${name}_${i}`} className={getClassName("arrayItem")}>
-              <summary>
-                {field.getItemSummary
-                  ? field.getItemSummary(item, i)
-                  : `Item #${i}`}
+      <DragDropContext
+        onDragEnd={(event) => {
+          if (event.destination) {
+            const newValue: ItemWithId[] = reorder(
+              valueWithIds,
+              event.source.index,
+              event.destination?.index
+            );
+
+            setValueWithIds(newValue);
+            onChange(newValue.map(({ _arrayId, data }) => data));
+          }
+        }}
+      >
+        <DroppableStrictMode droppableId="array">
+          {(provided) => {
+            return (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                className={getClassName("array")}
+              >
+                {Array.isArray(value) ? (
+                  valueWithIds.map(({ _arrayId, data }, i) => (
+                    <Draggable id={_arrayId} index={i} key={_arrayId}>
+                      <details className={getClassName("arrayItem")}>
+                        <summary>
+                          {field.getItemSummary
+                            ? field.getItemSummary(data, i)
+                            : `Item #${i}`}
+
+                          <div className={getClassName("arrayItemAction")}>
+                            <IconButton
+                              onClick={() => {
+                                const existingValue = value || [];
+                                const existingValueWithIds = valueWithIds || [];
+
+                                existingValue.splice(i, 1);
+                                existingValueWithIds.splice(i, 1);
 
-                <div className={getClassName("arrayItemAction")}>
-                  <IconButton
-                    onClick={() => {
-                      const existingValue = value || [];
+                                onChange(existingValue);
+                                setValueWithIds(existingValueWithIds);
+                              }}
+                              title="Delete"
+                            >
+                              <Trash size={21} />
+                            </IconButton>
+                          </div>
+                        </summary>
+                        <fieldset className={getClassName("fieldset")}>
+                          {Object.keys(field.arrayFields!).map((fieldName) => {
+                            const subField = field.arrayFields![fieldName];
 
-                      existingValue.splice(i, 1);
-                      onChange(existingValue);
-                    }}
-                    title="Delete"
-                  >
-                    <Trash size={21} />
-                  </IconButton>
-                </div>
-              </summary>
-              <fieldset className={getClassName("fieldset")}>
-                {Object.keys(field.arrayFields!).map((fieldName) => {
-                  const subField = field.arrayFields![fieldName];
+                            return (
+                              <InputOrGroup
+                                key={`${name}_${i}_${fieldName}`}
+                                name={`${name}_${i}_${fieldName}`}
+                                label={subField.label || fieldName}
+                                field={subField}
+                                value={data[fieldName]}
+                                onChange={(val) =>
+                                  onChange(
+                                    replace(value, i, {
+                                      ...data,
+                                      [fieldName]: val,
+                                    })
+                                  )
+                                }
+                              />
+                            );
+                          })}
+                        </fieldset>
+                      </details>
+                    </Draggable>
+                  ))
+                ) : (
+                  <div />
+                )}
 
-                  return (
-                    <InputOrGroup
-                      key={`${name}_${i}_${fieldName}`}
-                      name={`${name}_${i}_${fieldName}`}
-                      label={subField.label || fieldName}
-                      field={subField}
-                      value={item[fieldName]}
-                      onChange={(val) =>
-                        onChange(
-                          replace(value, i, { ...item, [fieldName]: val })
-                        )
-                      }
-                    />
-                  );
-                })}
-              </fieldset>
-            </details>
-          ))
-        ) : (
-          <div />
-        )}
+                {provided.placeholder}
 
-        <button
-          className={getClassName("addButton")}
-          onClick={() => {
-            const existingValue = value || [];
-            onChange([...existingValue, field.defaultItemProps || {}]);
+                <button
+                  className={getClassName("addButton")}
+                  onClick={() => {
+                    const existingValue = value || [];
+                    onChange([...existingValue, field.defaultItemProps || {}]);
+                  }}
+                >
+                  + Add item
+                </button>
+              </div>
+            );
           }}
-        >
-          + Add item
-        </button>
-      </div>
+        </DroppableStrictMode>
+      </DragDropContext>
     </div>
   );
 };
diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 330fee868..35f4cb66b 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -100,13 +100,15 @@
   padding: 16px;
 }
 
-.Input-arrayItem
-  > .Input-fieldset
-  .Input
-  + .Input-arrayItem
-  > .Input-fieldset
-  .Input {
-  margin-top: 16px;
+.Input-array {
+  display: flex;
+  flex-direction: column;
+}
+
+.Input-arrayItem {
+  display: block;
+  overflow: hidden;
+  margin-bottom: 12px;
 }
 
 .Input-arrayItem > .Input-fieldset .Input-label {
@@ -128,10 +130,6 @@
   cursor: pointer;
 }
 
-.Input-arrayItem + .Input-arrayItem {
-  margin-top: 12px;
-}
-
 .Input-addButton {
   background-color: white;
   border: none;
@@ -140,7 +138,6 @@
   cursor: pointer;
   width: 100%;
   margin: 0;
-  margin-top: 12px;
   padding: 12px 16px;
   text-align: left;
 }

From eb1faaa035b88f34d7da14b7dafc56aaba332694 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 10 Oct 2023 17:31:05 +0100
Subject: [PATCH 6/9] feat: refresh UI for array fields

---
 .../core/components/ComponentList/index.tsx   |  12 +-
 packages/core/components/DragIcon/index.tsx   |  13 ++
 .../components/DragIcon/styles.module.css     |  10 ++
 packages/core/components/Draggable/index.tsx  |  23 ++-
 .../InputOrGroup/fields/ArrayField/index.tsx  | 164 +++++++++++-------
 .../fields/ArrayField/styles.module.css       | 140 +++++++++++++++
 .../components/InputOrGroup/styles.module.css |  84 ---------
 7 files changed, 292 insertions(+), 154 deletions(-)
 create mode 100644 packages/core/components/DragIcon/index.tsx
 create mode 100644 packages/core/components/DragIcon/styles.module.css
 create mode 100644 packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index 5272f8992..07b5f99b0 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -28,12 +28,14 @@ export const ComponentList = ({ config }: { config: Config }) => {
                 showShadow
                 disableAnimations
               >
-                <div className={getClassName("item")}>
-                  {componentKey}
-                  <div className={getClassName("itemIcon")}>
-                    <Grid size={18} />
+                {() => (
+                  <div className={getClassName("item")}>
+                    {componentKey}
+                    <div className={getClassName("itemIcon")}>
+                      <Grid size={18} />
+                    </div>
                   </div>
-                </div>
+                )}
               </Draggable>
             );
           })}
diff --git a/packages/core/components/DragIcon/index.tsx b/packages/core/components/DragIcon/index.tsx
new file mode 100644
index 000000000..501ecf4f9
--- /dev/null
+++ b/packages/core/components/DragIcon/index.tsx
@@ -0,0 +1,13 @@
+import { getClassNameFactory } from "../../lib";
+
+import styles from "./styles.module.css";
+
+const getClassName = getClassNameFactory("DragIcon", styles);
+
+export const DragIcon = () => (
+  <div className={getClassName()}>
+    <svg viewBox="0 0 20 20" width="12" fill="currentColor">
+      <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+    </svg>
+  </div>
+);
diff --git a/packages/core/components/DragIcon/styles.module.css b/packages/core/components/DragIcon/styles.module.css
new file mode 100644
index 000000000..db0ebaf01
--- /dev/null
+++ b/packages/core/components/DragIcon/styles.module.css
@@ -0,0 +1,10 @@
+.DragIcon {
+  color: var(--puck-color-grey-4);
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.DragIcon:hover {
+  cursor: grab;
+  background: var(--puck-color-grey-9);
+}
diff --git a/packages/core/components/Draggable/index.tsx b/packages/core/components/Draggable/index.tsx
index 510ee8375..7ca2439dd 100644
--- a/packages/core/components/Draggable/index.tsx
+++ b/packages/core/components/Draggable/index.tsx
@@ -1,14 +1,26 @@
 import { ReactNode } from "react";
-import { Draggable as DndDraggable } from "react-beautiful-dnd";
+import {
+  Draggable as DndDraggable,
+  DraggableProvided,
+  DraggableStateSnapshot,
+} from "react-beautiful-dnd";
 
 export const Draggable = ({
+  className,
   children,
   id,
   index,
   showShadow,
   disableAnimations = false,
 }: {
-  children: ReactNode;
+  className?: (
+    provided: DraggableProvided,
+    snapshot: DraggableStateSnapshot
+  ) => string;
+  children: (
+    provided: DraggableProvided,
+    snapshot: DraggableStateSnapshot
+  ) => ReactNode;
   id: string;
   index: number;
   showShadow?: boolean;
@@ -19,6 +31,7 @@ export const Draggable = ({
       {(provided, snapshot) => (
         <>
           <div
+            className={className && className(provided, snapshot)}
             ref={provided.innerRef}
             {...provided.draggableProps}
             {...provided.dragHandleProps}
@@ -30,11 +43,13 @@ export const Draggable = ({
                   : "translate(0px, 0px)",
             }}
           >
-            {children}
+            {children(provided, snapshot)}
           </div>
           {/* See https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-906890987 */}
           {showShadow && snapshot.isDragging && (
-            <div style={{ transform: "none !important" }}>{children}</div>
+            <div style={{ transform: "none !important" }}>
+              {children(provided, snapshot)}
+            </div>
           )}
         </>
       )}
diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
index 28c7eaed7..19472cf98 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -1,6 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
-import styles from "../../styles.module.css";
-import { List, Trash } from "react-feather";
+import inputStyles from "../../styles.module.css";
+import styles from "./styles.module.css";
+import { List, Plus, Trash } from "react-feather";
 import { InputOrGroup, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
@@ -9,8 +10,11 @@ import { DragDropContext } from "react-beautiful-dnd";
 import { Draggable } from "../../../Draggable";
 import { generateId } from "../../../../lib/generate-id";
 import { useEffect, useState } from "react";
+import { DragIcon } from "../../../DragIcon";
 
-const getClassName = getClassNameFactory("Input", styles);
+const getClassNameInput = getClassNameFactory("Input", inputStyles);
+const getClassName = getClassNameFactory("ArrayField", styles);
+const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
 
 type ItemWithId = {
   _arrayId: string;
@@ -36,14 +40,16 @@ export const ArrayField = ({
     setValueWithIds(newValueWithIds);
   }, [value]);
 
+  const [openId, setOpenId] = useState("");
+
   if (!field.arrayFields) {
     return null;
   }
 
   return (
-    <div className={getClassName()}>
-      <b className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
+    <div className={getClassNameInput()}>
+      <b className={getClassNameInput("label")}>
+        <div className={getClassNameInput("labelIcon")}>
           <List size={16} />
         </div>
         {label || name}
@@ -63,69 +69,105 @@ export const ArrayField = ({
         }}
       >
         <DroppableStrictMode droppableId="array">
-          {(provided) => {
+          {(provided, snapshot) => {
             return (
               <div
                 {...provided.droppableProps}
                 ref={provided.innerRef}
-                className={getClassName("array")}
+                className={getClassName({
+                  isDraggingFrom: !!snapshot.draggingFromThisWith,
+                  hasItems: value.length > 0,
+                })}
               >
-                {Array.isArray(value) ? (
-                  valueWithIds.map(({ _arrayId, data }, i) => (
-                    <Draggable id={_arrayId} index={i} key={_arrayId}>
-                      <details className={getClassName("arrayItem")}>
-                        <summary>
-                          {field.getItemSummary
-                            ? field.getItemSummary(data, i)
-                            : `Item #${i}`}
-
-                          <div className={getClassName("arrayItemAction")}>
-                            <IconButton
+                {Array.isArray(value) && value.length > 0
+                  ? valueWithIds.map(({ _arrayId, data }, i) => (
+                      <Draggable
+                        id={_arrayId}
+                        index={i}
+                        key={_arrayId}
+                        className={(_, snapshot) =>
+                          getClassNameItem({
+                            isExpanded: openId === _arrayId,
+                            isDragging: snapshot.isDragging,
+                          })
+                        }
+                      >
+                        {() => (
+                          <>
+                            <div
                               onClick={() => {
-                                const existingValue = value || [];
-                                const existingValueWithIds = valueWithIds || [];
-
-                                existingValue.splice(i, 1);
-                                existingValueWithIds.splice(i, 1);
-
-                                onChange(existingValue);
-                                setValueWithIds(existingValueWithIds);
+                                if (openId === _arrayId) {
+                                  setOpenId("");
+                                } else {
+                                  setOpenId(_arrayId);
+                                }
                               }}
-                              title="Delete"
+                              className={getClassNameItem("summary")}
                             >
-                              <Trash size={21} />
-                            </IconButton>
-                          </div>
-                        </summary>
-                        <fieldset className={getClassName("fieldset")}>
-                          {Object.keys(field.arrayFields!).map((fieldName) => {
-                            const subField = field.arrayFields![fieldName];
+                              {field.getItemSummary
+                                ? field.getItemSummary(data, i)
+                                : `Item #${i}`}
+                              <div className={getClassNameItem("rhs")}>
+                                <div className={getClassNameItem("actions")}>
+                                  <div className={getClassNameItem("action")}>
+                                    <IconButton
+                                      onClick={() => {
+                                        const existingValue = value || [];
+                                        const existingValueWithIds =
+                                          valueWithIds || [];
 
-                            return (
-                              <InputOrGroup
-                                key={`${name}_${i}_${fieldName}`}
-                                name={`${name}_${i}_${fieldName}`}
-                                label={subField.label || fieldName}
-                                field={subField}
-                                value={data[fieldName]}
-                                onChange={(val) =>
-                                  onChange(
-                                    replace(value, i, {
-                                      ...data,
-                                      [fieldName]: val,
-                                    })
-                                  )
-                                }
-                              />
-                            );
-                          })}
-                        </fieldset>
-                      </details>
-                    </Draggable>
-                  ))
-                ) : (
-                  <div />
-                )}
+                                        existingValue.splice(i, 1);
+                                        existingValueWithIds.splice(i, 1);
+
+                                        onChange(existingValue);
+                                        setValueWithIds(existingValueWithIds);
+                                      }}
+                                      title="Delete"
+                                    >
+                                      <Trash size={16} />
+                                    </IconButton>
+                                  </div>
+                                </div>
+                                <div>
+                                  <DragIcon />
+                                </div>
+                              </div>
+                            </div>
+                            <div className={getClassNameItem("body")}>
+                              <fieldset
+                                className={getClassNameItem("fieldset")}
+                              >
+                                {Object.keys(field.arrayFields!).map(
+                                  (fieldName) => {
+                                    const subField =
+                                      field.arrayFields![fieldName];
+
+                                    return (
+                                      <InputOrGroup
+                                        key={`${name}_${i}_${fieldName}`}
+                                        name={`${name}_${i}_${fieldName}`}
+                                        label={subField.label || fieldName}
+                                        field={subField}
+                                        value={data[fieldName]}
+                                        onChange={(val) =>
+                                          onChange(
+                                            replace(value, i, {
+                                              ...data,
+                                              [fieldName]: val,
+                                            })
+                                          )
+                                        }
+                                      />
+                                    );
+                                  }
+                                )}
+                              </fieldset>
+                            </div>
+                          </>
+                        )}
+                      </Draggable>
+                    ))
+                  : null}
 
                 {provided.placeholder}
 
@@ -136,7 +178,7 @@ export const ArrayField = ({
                     onChange([...existingValue, field.defaultItemProps || {}]);
                   }}
                 >
-                  + Add item
+                  <Plus size="21" />
                 </button>
               </div>
             );
diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
new file mode 100644
index 000000000..ff580e177
--- /dev/null
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
@@ -0,0 +1,140 @@
+/**
+ * ArrayField
+ */
+
+.ArrayField {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--puck-color-grey-8);
+  border: 1px solid var(--puck-color-grey-8);
+  border-radius: 4px;
+}
+
+.ArrayField--isDraggingFrom {
+  background-color: var(--puck-color-azure-9);
+}
+
+.ArrayField-addButton {
+  background-color: white;
+  border: none;
+  border-radius: 4px;
+  display: flex;
+  color: var(--puck-color-azure-4);
+  justify-content: center;
+  cursor: pointer;
+  width: 100%;
+  margin: 0;
+  padding: 16px;
+  text-align: left;
+}
+
+.ArrayField--hasItems > .ArrayField-addButton {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover {
+  background: var(--puck-color-azure-9);
+  color: var(--puck-color-azure-4);
+}
+
+/**
+ * ArrayFieldItem
+ */
+
+.ArrayFieldItem {
+  background: white;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  display: block;
+  margin-bottom: 1px; /* Simulate border with margin so we can hide it whilst dragging */
+}
+
+.ArrayField--isDraggingFrom > .ArrayFieldItem:not(.ArrayFieldItem--isDragging) {
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  margin-bottom: 0;
+}
+
+.ArrayFieldItem--isExpanded {
+  border-bottom: 0;
+  outline: 1px solid var(--puck-color-azure-6);
+}
+
+.ArrayFieldItem--isDragging {
+  box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
+}
+
+.ArrayFieldItem + .ArrayFieldItem {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ArrayFieldItem-summary {
+  color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--puck-font-size-xxs);
+  list-style: none;
+  padding: 12px 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.ArrayFieldItem--isExpanded > .ArrayFieldItem-summary {
+  font-weight: 600;
+}
+
+.ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.ArrayFieldItem-summary:hover,
+.ArrayFieldItem--isExpanded > .ArrayFieldItem-summary {
+  background: var(--puck-color-azure-9);
+  cursor: pointer;
+  color: var(--puck-color-azure-4);
+}
+
+.ArrayFieldItem-summary::-webkit-details-marker {
+  display: none;
+}
+
+.ArrayFieldItem-body {
+  display: none;
+}
+
+.ArrayFieldItem--isExpanded > .ArrayFieldItem-body {
+  display: block;
+}
+
+.ArrayFieldItem-fieldset {
+  border: none;
+  border-top: 1px solid var(--puck-color-grey-8);
+  margin: 0;
+  padding: 16px;
+}
+
+.ArrayFieldItem-rhs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ArrayFieldItem-actions {
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+}
+
+.ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions {
+  opacity: 1;
+}
+
+.ArrayFieldItem-action:hover {
+  background: var(--puck-color-grey-9);
+  border-radius: 4px;
+  color: var(--puck-color-blue);
+  cursor: pointer;
+}
diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 35f4cb66b..f622dd55b 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -66,90 +66,6 @@
   border-color: var(--puck-color-neutral-3);
 }
 
-.Input-arrayItem {
-  background: white;
-  border: 1px solid var(--puck-color-grey-8);
-  border-radius: 4px;
-}
-
-.Input-arrayItem > summary {
-  color: var(--puck-color-grey-3);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--puck-font-size-xxs);
-  list-style: none;
-  padding: 12px 16px;
-  position: relative;
-}
-
-.Input-arrayItem > summary:hover {
-  cursor: pointer;
-  color: var(--puck-color-blue);
-}
-
-.Input-arrayItem > summary::-webkit-details-marker {
-  display: none;
-}
-
-.Input-arrayItem > .Input-fieldset {
-  background-color: var(--puck-color-grey-11);
-  border: none;
-  border-top: 1px solid var(--puck-color-grey-8);
-  margin: 0;
-  padding: 16px;
-}
-
-.Input-array {
-  display: flex;
-  flex-direction: column;
-}
-
-.Input-arrayItem {
-  display: block;
-  overflow: hidden;
-  margin-bottom: 12px;
-}
-
-.Input-arrayItem > .Input-fieldset .Input-label {
-  padding-bottom: 4px;
-}
-
-.Input-arrayItem .Input-arrayItemAction {
-  border-radius: 4px;
-  opacity: 0;
-}
-
-.Input-arrayItem summary:hover .Input-arrayItemAction {
-  opacity: 1;
-}
-
-.Input-arrayItem .Input-arrayItemAction:hover {
-  background: var(--puck-color-grey-9);
-  color: var(--puck-color-blue);
-  cursor: pointer;
-}
-
-.Input-addButton {
-  background-color: white;
-  border: none;
-  border-radius: 4px;
-  color: var(--puck-color-blue);
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  padding: 12px 16px;
-  text-align: left;
-}
-
-.Input-addButton:hover {
-  background: var(--puck-color-grey-10);
-}
-
-.Input-array {
-  overflow: hidden;
-}
-
 .Input-radioGroupItems {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);

From dd3804547d63f889fc66de304c1b6e12a8f98ed1 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 16 Oct 2023 13:50:12 +0100
Subject: [PATCH 7/9] refactor: add global app context to expose AppData

---
 packages/core/components/Puck/context.tsx |  39 ++
 packages/core/components/Puck/index.tsx   | 783 +++++++++++-----------
 2 files changed, 435 insertions(+), 387 deletions(-)
 create mode 100644 packages/core/components/Puck/context.tsx

diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx
new file mode 100644
index 000000000..94195bc8d
--- /dev/null
+++ b/packages/core/components/Puck/context.tsx
@@ -0,0 +1,39 @@
+import { createContext, useContext } from "react";
+import { AppData } from "../../types/Config";
+import { PuckAction } from "../../reducer";
+
+export const defaultAppData: AppData = {
+  data: { content: [], root: { title: "" } },
+  state: {
+    leftSideBarVisible: true,
+    arrayFieldConfig: {},
+  },
+};
+
+type AppContext = {
+  appData: AppData;
+  dispatch: (action: PuckAction) => void;
+};
+
+export const appContext = createContext<AppContext>({
+  appData: defaultAppData,
+  dispatch: () => null,
+});
+
+export const AppProvider = appContext.Provider;
+
+export const useAppContext = () => {
+  const mainContext = useContext(appContext);
+
+  return {
+    ...mainContext,
+    // Helper
+    setState: (state: Partial<AppState>, recordHistory?: boolean) => {
+      return mainContext.dispatch({
+        type: "setState",
+        state,
+        recordHistory,
+      });
+    },
+  };
+};
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 54d97c7e1..08cc291f1 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from "react";
 import { DragDropContext, DragStart, DragUpdate } from "react-beautiful-dnd";
-import type { Config, Data, Field } from "../../types/Config";
+import type { AppData, Config, Data, Field } from "../../types/Config";
 import { InputOrGroup } from "../InputOrGroup";
 import { ComponentList } from "../ComponentList";
 import { filter } from "../../lib";
@@ -31,6 +31,7 @@ import { findZonesForArea } from "../../lib/find-zones-for-area";
 import { areaContainsZones } from "../../lib/area-contains-zones";
 import { flushZones } from "../../lib/flush-zones";
 import { usePuckHistory } from "../../lib/use-puck-history";
+import { AppProvider } from "./context";
 
 const Field = () => {};
 
@@ -88,9 +89,11 @@ export function Puck({
 }) {
   const [reducer] = useState(() => createReducer({ config }));
 
-  const initialAppData = {
+  const initialAppData: AppData = {
     data: initialData,
-    state: { leftSideBarVisible: true, itemSelector: null },
+    state: {
+      leftSideBarVisible: true,
+    },
   };
 
   const [appData, dispatch] = useReducer<StateReducer>(
@@ -183,443 +186,449 @@ export function Puck({
 
   return (
     <div className="puck">
-      <DragDropContext
-        onDragUpdate={(update) => {
-          setDraggedItem({ ...draggedItem, ...update });
-          onDragStartOrUpdate(update);
-        }}
-        onBeforeDragStart={(start) => {
-          onDragStartOrUpdate(start);
-          setItemSelector(null);
-        }}
-        onDragEnd={(droppedItem) => {
-          setDraggedItem(undefined);
-
-          // User cancel drag
-          if (!droppedItem.destination) {
-            return;
-          }
-
-          // New component
-          if (
-            droppedItem.source.droppableId === "component-list" &&
-            droppedItem.destination
-          ) {
-            dispatch({
-              type: "insert",
-              componentType: droppedItem.draggableId,
-              destinationIndex: droppedItem.destination!.index,
-              destinationZone: droppedItem.destination.droppableId,
-            });
-
-            setItemSelector({
-              index: droppedItem.destination!.index,
-              zone: droppedItem.destination.droppableId,
-            });
-
-            return;
-          } else {
-            const { source, destination } = droppedItem;
-
-            if (source.droppableId === destination.droppableId) {
+      <AppProvider value={{ appData, dispatch }}>
+        <DragDropContext
+          onDragUpdate={(update) => {
+            setDraggedItem({ ...draggedItem, ...update });
+            onDragStartOrUpdate(update);
+          }}
+          onBeforeDragStart={(start) => {
+            onDragStartOrUpdate(start);
+            setItemSelector(null);
+          }}
+          onDragEnd={(droppedItem) => {
+            setDraggedItem(undefined);
+
+            // User cancel drag
+            if (!droppedItem.destination) {
+              return;
+            }
+
+            // New component
+            if (
+              droppedItem.source.droppableId === "component-list" &&
+              droppedItem.destination
+            ) {
               dispatch({
-                type: "reorder",
-                sourceIndex: source.index,
-                destinationIndex: destination.index,
-                destinationZone: destination.droppableId,
+                type: "insert",
+                componentType: droppedItem.draggableId,
+                destinationIndex: droppedItem.destination!.index,
+                destinationZone: droppedItem.destination.droppableId,
+              });
+
+              setItemSelector({
+                index: droppedItem.destination!.index,
+                zone: droppedItem.destination.droppableId,
               });
+
+              return;
             } else {
-              dispatch({
-                type: "move",
-                sourceZone: source.droppableId,
-                sourceIndex: source.index,
-                destinationIndex: destination.index,
-                destinationZone: destination.droppableId,
+              const { source, destination } = droppedItem;
+
+              if (source.droppableId === destination.droppableId) {
+                dispatch({
+                  type: "reorder",
+                  sourceIndex: source.index,
+                  destinationIndex: destination.index,
+                  destinationZone: destination.droppableId,
+                });
+              } else {
+                dispatch({
+                  type: "move",
+                  sourceZone: source.droppableId,
+                  sourceIndex: source.index,
+                  destinationIndex: destination.index,
+                  destinationZone: destination.droppableId,
+                });
+              }
+
+              setItemSelector({
+                index: destination.index,
+                zone: destination.droppableId,
               });
             }
-
-            setItemSelector({
-              index: destination.index,
-              zone: destination.droppableId,
-            });
-          }
-        }}
-      >
-        <DropZoneProvider
-          value={{
-            data,
-            itemSelector,
-            setItemSelector,
-            config,
-            dispatch,
-            draggedItem,
-            placeholderStyle,
-            mode: "edit",
-            areaId: "root",
           }}
         >
-          <dropZoneContext.Consumer>
-            {(ctx) => {
-              let path =
-                ctx?.pathData && selectedItem
-                  ? ctx?.pathData[selectedItem?.props.id]
-                  : undefined;
-
-              if (path) {
-                path = [{ label: "Page", selector: null }, ...path];
-                path = path.slice(path.length - 2, path.length - 1);
-              }
-
-              return (
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateAreas:
-                      '"header header header" "left editor right"',
-                    gridTemplateColumns: `${
-                      leftSideBarVisible ? "288px" : "0px"
-                    } auto 288px`,
-                    gridTemplateRows: "min-content auto",
-                    height: "100vh",
-                    position: "fixed",
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                  }}
-                >
-                  <header
+          <DropZoneProvider
+            value={{
+              data,
+              itemSelector,
+              setItemSelector,
+              config,
+              dispatch,
+              draggedItem,
+              placeholderStyle,
+              mode: "edit",
+              areaId: "root",
+            }}
+          >
+            <dropZoneContext.Consumer>
+              {(ctx) => {
+                let path =
+                  ctx?.pathData && selectedItem
+                    ? ctx?.pathData[selectedItem?.props.id]
+                    : undefined;
+
+                if (path) {
+                  path = [{ label: "Page", selector: null }, ...path];
+                  path = path.slice(path.length - 2, path.length - 1);
+                }
+
+                return (
+                  <div
                     style={{
-                      gridArea: "header",
-                      color: "var(--puck-color-black)",
-                      background: "var(--puck-color-white)",
-                      borderBottom: "1px solid var(--puck-color-grey-8)",
+                      display: "grid",
+                      gridTemplateAreas:
+                        '"header header header" "left editor right"',
+                      gridTemplateColumns: `${
+                        leftSideBarVisible ? "288px" : "0px"
+                      } auto 288px`,
+                      gridTemplateRows: "min-content auto",
+                      height: "100vh",
+                      position: "fixed",
+                      top: 0,
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
                     }}
                   >
-                    {renderHeader ? (
-                      renderHeader({
-                        children: (
-                          <Button
-                            onClick={() => {
-                              onPublish(data);
-                            }}
-                            icon={<Globe size="14px" />}
-                          >
-                            Publish
-                          </Button>
-                        ),
-                        data,
-                        dispatch,
-                      })
-                    ) : (
-                      <div
-                        style={{
-                          display: "grid",
-                          padding: 16,
-                          gridTemplateAreas: '"left middle right"',
-                          gridTemplateColumns: "288px auto 288px",
-                          gridTemplateRows: "auto",
-                        }}
-                      >
+                    <header
+                      style={{
+                        gridArea: "header",
+                        color: "var(--puck-color-black)",
+                        background: "var(--puck-color-white)",
+                        borderBottom: "1px solid var(--puck-color-grey-8)",
+                      }}
+                    >
+                      {renderHeader ? (
+                        renderHeader({
+                          children: (
+                            <Button
+                              onClick={() => {
+                                onPublish(data);
+                              }}
+                              icon={<Globe size="14px" />}
+                            >
+                              Publish
+                            </Button>
+                          ),
+                          data,
+                          dispatch,
+                        })
+                      ) : (
                         <div
                           style={{
-                            display: "flex",
-                            gap: 16,
+                            display: "grid",
+                            padding: 16,
+                            gridTemplateAreas: '"left middle right"',
+                            gridTemplateColumns: "288px auto 288px",
+                            gridTemplateRows: "auto",
                           }}
                         >
-                          <IconButton
-                            onClick={() =>
-                              dispatch({
-                                type: "setState",
-                                state: {
-                                  leftSideBarVisible: !leftSideBarVisible,
-                                },
-                              })
-                            }
-                            title="Toggle left sidebar"
+                          <div
+                            style={{
+                              display: "flex",
+                              gap: 16,
+                            }}
                           >
-                            <Sidebar />
-                          </IconButton>
-                        </div>
-                        <div
-                          style={{
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                          }}
-                        >
-                          <Heading rank={2} size="xs">
-                            {headerTitle || data.root.title || "Page"}
-                            {headerPath && (
-                              <small style={{ fontWeight: 400, marginLeft: 4 }}>
-                                <code>{headerPath}</code>
-                              </small>
-                            )}
-                          </Heading>
-                        </div>
-                        <div
-                          style={{
-                            display: "flex",
-                            gap: 16,
-                            justifyContent: "flex-end",
-                          }}
-                        >
-                          <div style={{ display: "flex" }}>
                             <IconButton
-                              title="undo"
-                              disabled={!canRewind}
-                              onClick={rewind}
-                            >
-                              <ChevronLeft
-                                size={21}
-                                stroke={
-                                  canRewind
-                                    ? "var(--puck-color-black)"
-                                    : "var(--puck-color-grey-7)"
-                                }
-                              />
-                            </IconButton>
-                            <IconButton
-                              title="redo"
-                              disabled={!canForward}
-                              onClick={forward}
+                              onClick={() =>
+                                dispatch({
+                                  type: "setState",
+                                  state: {
+                                    leftSideBarVisible: !leftSideBarVisible,
+                                  },
+                                })
+                              }
+                              title="Toggle left sidebar"
                             >
-                              <ChevronRight
-                                size={21}
-                                stroke={
-                                  canForward
-                                    ? "var(--puck-color-black)"
-                                    : "var(--puck-color-grey-7)"
-                                }
-                              />
+                              <Sidebar />
                             </IconButton>
                           </div>
-                          {renderHeaderActions &&
-                            renderHeaderActions({ data, dispatch })}
-                          <Button
-                            onClick={() => {
-                              onPublish(data);
+                          <div
+                            style={{
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                            }}
+                          >
+                            <Heading rank={2} size="xs">
+                              {headerTitle || data.root.title || "Page"}
+                              {headerPath && (
+                                <small
+                                  style={{ fontWeight: 400, marginLeft: 4 }}
+                                >
+                                  <code>{headerPath}</code>
+                                </small>
+                              )}
+                            </Heading>
+                          </div>
+                          <div
+                            style={{
+                              display: "flex",
+                              gap: 16,
+                              justifyContent: "flex-end",
                             }}
-                            icon={<Globe size="14px" />}
                           >
-                            Publish
-                          </Button>
+                            <div style={{ display: "flex" }}>
+                              <IconButton
+                                title="undo"
+                                disabled={!canRewind}
+                                onClick={rewind}
+                              >
+                                <ChevronLeft
+                                  size={21}
+                                  stroke={
+                                    canRewind
+                                      ? "var(--puck-color-black)"
+                                      : "var(--puck-color-grey-7)"
+                                  }
+                                />
+                              </IconButton>
+                              <IconButton
+                                title="redo"
+                                disabled={!canForward}
+                                onClick={forward}
+                              >
+                                <ChevronRight
+                                  size={21}
+                                  stroke={
+                                    canForward
+                                      ? "var(--puck-color-black)"
+                                      : "var(--puck-color-grey-7)"
+                                  }
+                                />
+                              </IconButton>
+                            </div>
+                            {renderHeaderActions &&
+                              renderHeaderActions({ data, dispatch })}
+                            <Button
+                              onClick={() => {
+                                onPublish(data);
+                              }}
+                              icon={<Globe size="14px" />}
+                            >
+                              Publish
+                            </Button>
+                          </div>
                         </div>
-                      </div>
-                    )}
-                  </header>
-                  <div
-                    style={{
-                      gridArea: "left",
-                      background: "var(--puck-color-grey-11)",
-                      borderRight: "1px solid var(--puck-color-grey-8)",
-                      overflowY: "auto",
-                      display: "flex",
-                      flexDirection: "column",
-                    }}
-                  >
-                    <SidebarSection title="Components">
-                      <ComponentList config={config} />
-                    </SidebarSection>
-                    <SidebarSection title="Outline">
-                      {ctx?.activeZones &&
-                        ctx?.activeZones[rootDroppableId] && (
-                          <LayerTree
-                            data={data}
-                            label={
-                              areaContainsZones(data, "root")
-                                ? rootDroppableId
-                                : ""
-                            }
-                            zoneContent={data.content}
-                            setItemSelector={setItemSelector}
-                            itemSelector={itemSelector}
-                          />
-                        )}
-
-                      {Object.entries(findZonesForArea(data, "root")).map(
-                        ([zoneKey, zone]) => {
-                          return (
+                      )}
+                    </header>
+                    <div
+                      style={{
+                        gridArea: "left",
+                        background: "var(--puck-color-grey-11)",
+                        borderRight: "1px solid var(--puck-color-grey-8)",
+                        overflowY: "auto",
+                        display: "flex",
+                        flexDirection: "column",
+                      }}
+                    >
+                      <SidebarSection title="Components">
+                        <ComponentList config={config} />
+                      </SidebarSection>
+                      <SidebarSection title="Outline">
+                        {ctx?.activeZones &&
+                          ctx?.activeZones[rootDroppableId] && (
                             <LayerTree
-                              key={zoneKey}
                               data={data}
-                              label={zoneKey}
-                              zone={zoneKey}
-                              zoneContent={zone}
+                              label={
+                                areaContainsZones(data, "root")
+                                  ? rootDroppableId
+                                  : ""
+                              }
+                              zoneContent={data.content}
                               setItemSelector={setItemSelector}
                               itemSelector={itemSelector}
                             />
-                          );
-                        }
-                      )}
-                    </SidebarSection>
-                  </div>
+                          )}
+
+                        {Object.entries(findZonesForArea(data, "root")).map(
+                          ([zoneKey, zone]) => {
+                            return (
+                              <LayerTree
+                                key={zoneKey}
+                                data={data}
+                                label={zoneKey}
+                                zone={zoneKey}
+                                zoneContent={zone}
+                                setItemSelector={setItemSelector}
+                                itemSelector={itemSelector}
+                              />
+                            );
+                          }
+                        )}
+                      </SidebarSection>
+                    </div>
 
-                  <div
-                    style={{
-                      overflowY: "auto",
-                      gridArea: "editor",
-                      position: "relative",
-                      display: "flex",
-                      flexDirection: "column",
-                    }}
-                    onClick={() => setItemSelector(null)}
-                    id="puck-frame"
-                  >
                     <div
-                      className="puck-root"
                       style={{
-                        boxShadow: "0px 0px 0px 32px var(--puck-color-grey-10)",
-                        margin: 32,
-                        zoom: 0.75,
+                        overflowY: "auto",
+                        gridArea: "editor",
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "column",
                       }}
+                      onClick={() => setItemSelector(null)}
+                      id="puck-frame"
                     >
                       <div
+                        className="puck-root"
                         style={{
-                          border: "1px solid var(--puck-color-grey-8)",
+                          boxShadow:
+                            "0px 0px 0px 32px var(--puck-color-grey-10)",
+                          margin: 32,
+                          zoom: 0.75,
                         }}
                       >
-                        <Page data={data} {...data.root}>
-                          <DropZone zone={rootDroppableId} />
-                        </Page>
+                        <div
+                          style={{
+                            border: "1px solid var(--puck-color-grey-8)",
+                          }}
+                        >
+                          <Page data={data} {...data.root}>
+                            <DropZone zone={rootDroppableId} />
+                          </Page>
+                        </div>
                       </div>
+                      {/* Fill empty space under root */}
+                      <div
+                        style={{
+                          background: "var(--puck-color-grey-10)",
+                          height: "100%",
+                          flexGrow: 1,
+                        }}
+                      ></div>
                     </div>
-                    {/* Fill empty space under root */}
                     <div
                       style={{
-                        background: "var(--puck-color-grey-10)",
-                        height: "100%",
-                        flexGrow: 1,
+                        borderLeft: "1px solid var(--puck-color-grey-8)",
+                        overflowY: "auto",
+                        gridArea: "right",
+                        fontFamily: "var(--puck-font-stack)",
+                        display: "flex",
+                        flexDirection: "column",
+                        background: "var(--puck-color-white)",
                       }}
-                    ></div>
-                  </div>
-                  <div
-                    style={{
-                      borderLeft: "1px solid var(--puck-color-grey-8)",
-                      overflowY: "auto",
-                      gridArea: "right",
-                      fontFamily: "var(--puck-font-stack)",
-                      display: "flex",
-                      flexDirection: "column",
-                      background: "var(--puck-color-white)",
-                    }}
-                  >
-                    <FieldWrapper data={data}>
-                      <SidebarSection
-                        noPadding
-                        breadcrumbs={path}
-                        breadcrumbClick={(breadcrumb) =>
-                          setItemSelector(breadcrumb.selector)
-                        }
-                        title={selectedItem ? selectedItem.type : "Page"}
-                      >
-                        {Object.keys(fields).map((fieldName) => {
-                          const field = fields[fieldName];
-
-                          const onChange = (value: any) => {
-                            let currentProps;
-                            let newProps;
-
-                            if (selectedItem) {
-                              currentProps = selectedItem.props;
-                            } else {
-                              currentProps = data.root;
-                            }
+                    >
+                      <FieldWrapper data={data}>
+                        <SidebarSection
+                          noPadding
+                          breadcrumbs={path}
+                          breadcrumbClick={(breadcrumb) =>
+                            setItemSelector(breadcrumb.selector)
+                          }
+                          title={selectedItem ? selectedItem.type : "Page"}
+                        >
+                          {Object.keys(fields).map((fieldName) => {
+                            const field = fields[fieldName];
 
-                            if (fieldName === "_data") {
-                              // Reset the link if value is falsey
-                              if (!value) {
-                                const { locked, ..._meta } =
-                                  currentProps._meta || {};
+                            const onChange = (value: any) => {
+                              let currentProps;
+                              let newProps;
 
-                                newProps = {
-                                  ...currentProps,
-                                  _data: undefined,
-                                  _meta: _meta,
-                                };
+                              if (selectedItem) {
+                                currentProps = selectedItem.props;
                               } else {
-                                const changedFields = filter(
-                                  // filter out anything not supported by this component
-                                  value,
-                                  Object.keys(fields)
-                                );
+                                currentProps = data.root;
+                              }
 
+                              if (fieldName === "_data") {
+                                // Reset the link if value is falsey
+                                if (!value) {
+                                  const { locked, ..._meta } =
+                                    currentProps._meta || {};
+
+                                  newProps = {
+                                    ...currentProps,
+                                    _data: undefined,
+                                    _meta: _meta,
+                                  };
+                                } else {
+                                  const changedFields = filter(
+                                    // filter out anything not supported by this component
+                                    value,
+                                    Object.keys(fields)
+                                  );
+
+                                  newProps = {
+                                    ...currentProps,
+                                    ...changedFields,
+                                    _data: value, // TODO perf - this is duplicative and will make payload larger
+                                    _meta: {
+                                      locked: Object.keys(changedFields),
+                                    },
+                                  };
+                                }
+                              } else {
                                 newProps = {
                                   ...currentProps,
-                                  ...changedFields,
-                                  _data: value, // TODO perf - this is duplicative and will make payload larger
-                                  _meta: {
-                                    locked: Object.keys(changedFields),
-                                  },
+                                  [fieldName]: value,
                                 };
                               }
-                            } else {
-                              newProps = {
-                                ...currentProps,
-                                [fieldName]: value,
-                              };
-                            }
 
-                            if (itemSelector) {
-                              dispatch({
-                                type: "replace",
-                                destinationIndex: itemSelector.index,
-                                destinationZone:
-                                  itemSelector.zone || rootDroppableId,
-                                data: { ...selectedItem, props: newProps },
-                              });
+                              if (itemSelector) {
+                                dispatch({
+                                  type: "replace",
+                                  destinationIndex: itemSelector.index,
+                                  destinationZone:
+                                    itemSelector.zone || rootDroppableId,
+                                  data: { ...selectedItem, props: newProps },
+                                });
+                              } else {
+                                dispatch({
+                                  type: "setData",
+                                  data: { root: newProps },
+                                });
+                              }
+                            };
+
+                            if (selectedItem && itemSelector) {
+                              return (
+                                <InputOrGroup
+                                  key={`${selectedItem.props.id}_${fieldName}`}
+                                  field={field}
+                                  name={fieldName}
+                                  label={field.label}
+                                  readOnly={
+                                    getItem(
+                                      itemSelector,
+                                      data
+                                    )!.props._meta?.locked?.indexOf(fieldName) >
+                                    -1
+                                  }
+                                  value={selectedItem.props[fieldName]}
+                                  onChange={onChange}
+                                />
+                              );
                             } else {
-                              dispatch({
-                                type: "setData",
-                                data: { root: newProps },
-                              });
+                              return (
+                                <InputOrGroup
+                                  key={`page_${fieldName}`}
+                                  field={field}
+                                  name={fieldName}
+                                  label={field.label}
+                                  readOnly={
+                                    data.root._meta?.locked?.indexOf(
+                                      fieldName
+                                    ) > -1
+                                  }
+                                  value={data.root[fieldName]}
+                                  onChange={onChange}
+                                />
+                              );
                             }
-                          };
-
-                          if (selectedItem && itemSelector) {
-                            return (
-                              <InputOrGroup
-                                key={`${selectedItem.props.id}_${fieldName}`}
-                                field={field}
-                                name={fieldName}
-                                label={field.label}
-                                readOnly={
-                                  getItem(
-                                    itemSelector,
-                                    data
-                                  )!.props._meta?.locked?.indexOf(fieldName) >
-                                  -1
-                                }
-                                value={selectedItem.props[fieldName]}
-                                onChange={onChange}
-                              />
-                            );
-                          } else {
-                            return (
-                              <InputOrGroup
-                                key={`page_${fieldName}`}
-                                field={field}
-                                name={fieldName}
-                                label={field.label}
-                                readOnly={
-                                  data.root._meta?.locked?.indexOf(fieldName) >
-                                  -1
-                                }
-                                value={data.root[fieldName]}
-                                onChange={onChange}
-                              />
-                            );
-                          }
-                        })}
-                      </SidebarSection>
-                    </FieldWrapper>
+                          })}
+                        </SidebarSection>
+                      </FieldWrapper>
+                    </div>
                   </div>
-                </div>
-              );
-            }}
-          </dropZoneContext.Consumer>
-        </DropZoneProvider>
-      </DragDropContext>
+                );
+              }}
+            </dropZoneContext.Consumer>
+          </DropZoneProvider>
+        </DragDropContext>
+      </AppProvider>
     </div>
   );
 }

From 25a47a193bfe01293c6727b77a054bffac1e7c2e Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 16 Oct 2023 13:54:52 +0100
Subject: [PATCH 8/9] refactor: store array field state in app state

---
 .../InputOrGroup/fields/ArrayField/index.tsx  | 81 +++++++++++++------
 packages/core/components/Puck/context.tsx     |  4 +-
 packages/core/components/Puck/index.tsx       |  1 +
 packages/core/reducer/__tests__/data.spec.tsx |  5 +-
 .../core/reducer/__tests__/state.spec.tsx     |  5 +-
 packages/core/types/Config.tsx                |  8 +-
 6 files changed, 74 insertions(+), 30 deletions(-)

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
index 19472cf98..98fd8bd0d 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -9,18 +9,15 @@ import DroppableStrictMode from "../../../DroppableStrictMode";
 import { DragDropContext } from "react-beautiful-dnd";
 import { Draggable } from "../../../Draggable";
 import { generateId } from "../../../../lib/generate-id";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
+import { ArrayState, ItemWithId } from "../../../../types/Config";
+import { useAppContext } from "../../../Puck/context";
 
 const getClassNameInput = getClassNameFactory("Input", inputStyles);
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
 
-type ItemWithId = {
-  _arrayId: string;
-  data: any;
-};
-
 export const ArrayField = ({
   field,
   onChange,
@@ -28,20 +25,44 @@ export const ArrayField = ({
   name,
   label,
 }: InputProps) => {
-  const [valueWithIds, setValueWithIds] = useState<ItemWithId[]>(value);
+  const [arrayFieldId] = useState(generateId("ArrayField"));
+
+  const { appData, setState } = useAppContext();
+
+  const arrayState: ArrayState = appData.state.arrayState[arrayFieldId] || {
+    items: Array.from(value).map<ItemWithId>((v) => ({
+      _arrayId: generateId("ArrayItem"),
+      data: v,
+    })),
+    openId: "",
+  };
+
+  const setArrayState = useCallback(
+    (newArrayState: Partial<ArrayState>, recordHistory: boolean = false) => {
+      setState(
+        {
+          arrayState: {
+            ...appData.state.arrayState,
+            [arrayFieldId]: { ...arrayState, ...newArrayState },
+          },
+        },
+        recordHistory
+      );
+    },
+    [arrayState]
+  );
 
   // Create a mirror of value with IDs added for drag and drop
   useEffect(() => {
-    const newValueWithIds = value.map((item, idx) => ({
-      _arrayId: valueWithIds[idx]?._arrayId || generateId("ArrayItem"),
+    const newItems = Array.from(value).map((item, idx) => ({
+      _arrayId: arrayState.items[idx]?._arrayId || generateId("ArrayItem"),
       data: item,
     }));
 
-    setValueWithIds(newValueWithIds);
+    // We don't need to record history during this useEffect, as the history has already been set by onDragEnd
+    setArrayState({ items: newItems });
   }, [value]);
 
-  const [openId, setOpenId] = useState("");
-
   if (!field.arrayFields) {
     return null;
   }
@@ -58,13 +79,13 @@ export const ArrayField = ({
         onDragEnd={(event) => {
           if (event.destination) {
             const newValue: ItemWithId[] = reorder(
-              valueWithIds,
+              arrayState.items,
               event.source.index,
               event.destination?.index
             );
 
-            setValueWithIds(newValue);
-            onChange(newValue.map(({ _arrayId, data }) => data));
+            setArrayState({ ...arrayState, items: newValue }, false);
+            onChange(newValue.map(({ data }) => data));
           }
         }}
       >
@@ -80,14 +101,14 @@ export const ArrayField = ({
                 })}
               >
                 {Array.isArray(value) && value.length > 0
-                  ? valueWithIds.map(({ _arrayId, data }, i) => (
+                  ? arrayState.items.map(({ _arrayId, data }, i) => (
                       <Draggable
                         id={_arrayId}
                         index={i}
                         key={_arrayId}
                         className={(_, snapshot) =>
                           getClassNameItem({
-                            isExpanded: openId === _arrayId,
+                            isExpanded: arrayState.openId === _arrayId,
                             isDragging: snapshot.isDragging,
                           })
                         }
@@ -96,10 +117,14 @@ export const ArrayField = ({
                           <>
                             <div
                               onClick={() => {
-                                if (openId === _arrayId) {
-                                  setOpenId("");
+                                if (arrayState.openId === _arrayId) {
+                                  setArrayState({
+                                    openId: "",
+                                  });
                                 } else {
-                                  setOpenId(_arrayId);
+                                  setArrayState({
+                                    openId: _arrayId,
+                                  });
                                 }
                               }}
                               className={getClassNameItem("summary")}
@@ -112,15 +137,21 @@ export const ArrayField = ({
                                   <div className={getClassNameItem("action")}>
                                     <IconButton
                                       onClick={() => {
-                                        const existingValue = value || [];
-                                        const existingValueWithIds =
-                                          valueWithIds || [];
+                                        const existingValue = [
+                                          ...(value || []),
+                                        ];
+                                        const existingItems = [
+                                          ...(arrayState.items || []),
+                                        ];
 
                                         existingValue.splice(i, 1);
-                                        existingValueWithIds.splice(i, 1);
+                                        existingItems.splice(i, 1);
 
+                                        setArrayState(
+                                          { items: existingItems },
+                                          true
+                                        );
                                         onChange(existingValue);
-                                        setValueWithIds(existingValueWithIds);
                                       }}
                                       title="Delete"
                                     >
diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx
index 94195bc8d..04c41ff75 100644
--- a/packages/core/components/Puck/context.tsx
+++ b/packages/core/components/Puck/context.tsx
@@ -1,12 +1,12 @@
 import { createContext, useContext } from "react";
-import { AppData } from "../../types/Config";
+import { AppData, AppState } from "../../types/Config";
 import { PuckAction } from "../../reducer";
 
 export const defaultAppData: AppData = {
   data: { content: [], root: { title: "" } },
   state: {
     leftSideBarVisible: true,
-    arrayFieldConfig: {},
+    arrayState: {},
   },
 };
 
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 08cc291f1..ba1528795 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -93,6 +93,7 @@ export function Puck({
     data: initialData,
     state: {
       leftSideBarVisible: true,
+      arrayState: {},
     },
   };
 
diff --git a/packages/core/reducer/__tests__/data.spec.tsx b/packages/core/reducer/__tests__/data.spec.tsx
index 2ec967568..3eb4461fc 100644
--- a/packages/core/reducer/__tests__/data.spec.tsx
+++ b/packages/core/reducer/__tests__/data.spec.tsx
@@ -26,7 +26,10 @@ type Props = {
 };
 const defaultData: Data = { root: { title: "" }, content: [], zones: {} };
 
-const defaultState: AppState = { leftSideBarVisible: true };
+const defaultState: AppState = {
+  leftSideBarVisible: true,
+  arrayState: {},
+};
 
 describe("Data reducer", () => {
   const config: Config<Props> = {
diff --git a/packages/core/reducer/__tests__/state.spec.tsx b/packages/core/reducer/__tests__/state.spec.tsx
index 4459aa5cb..f45b1b36d 100644
--- a/packages/core/reducer/__tests__/state.spec.tsx
+++ b/packages/core/reducer/__tests__/state.spec.tsx
@@ -8,7 +8,10 @@ type Props = {
 };
 const defaultData: Data = { root: { title: "" }, content: [], zones: {} };
 
-const defaultState: AppState = { leftSideBarVisible: true };
+const defaultState: AppState = {
+  leftSideBarVisible: true,
+  arrayState: {},
+};
 
 describe("State reducer", () => {
   const config: Config<Props> = {
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
index e13ec4c45..5f359b29d 100644
--- a/packages/core/types/Config.tsx
+++ b/packages/core/types/Config.tsx
@@ -114,11 +114,17 @@ export type Data<
   zones?: Record<string, Content<Props>>;
 };
 
-type DraggedItem = DragStart & Partial<DragUpdate>;
+export type ItemWithId = {
+  _arrayId: string;
+  data: any;
+};
+
+export type ArrayState = { items: ItemWithId[]; openId: string };
 
 export type AppState = {
   leftSideBarVisible: boolean;
   itemSelector?: ItemSelector | null;
+  arrayState: Record<string, ArrayState | undefined>;
 };
 
 export type AppData = { data: Data; state: AppState };

From fbfb555c069ca8edb2214c20dff30640e1284072 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 16 Oct 2023 14:14:58 +0100
Subject: [PATCH 9/9] test: add unit tests for use-puck-history

---
 .../lib/__tests__/use-puck-history.spec.tsx   | 208 ++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 packages/core/lib/__tests__/use-puck-history.spec.tsx

diff --git a/packages/core/lib/__tests__/use-puck-history.spec.tsx b/packages/core/lib/__tests__/use-puck-history.spec.tsx
new file mode 100644
index 000000000..f031ed7dc
--- /dev/null
+++ b/packages/core/lib/__tests__/use-puck-history.spec.tsx
@@ -0,0 +1,208 @@
+import { _recordHistory } from "../use-puck-history";
+import { AppData } from "../../types/Config";
+import { defaultAppData } from "../../components/Puck/context";
+
+const mockDispatch = jest.fn();
+
+const mockedAppData1: AppData = {
+  ...defaultAppData,
+  data: {
+    ...defaultAppData.data,
+    content: [
+      {
+        type: "MyComponent",
+        props: {
+          id: "123",
+          title: "Hello, world",
+        },
+      },
+    ],
+  },
+};
+
+const mockedAppData2: AppData = {
+  ...defaultAppData,
+  data: {
+    ...defaultAppData.data,
+    content: [
+      {
+        type: "MyComponent",
+        props: {
+          id: "123",
+          title: "Goodbye, world",
+        },
+      },
+    ],
+  },
+};
+
+const mockedAppDataArray1: AppData = {
+  data: {
+    content: [
+      {
+        type: "ButtonGroup",
+        props: {
+          buttons: [
+            { label: "Learn more", href: "#", variant: "primary" },
+            { label: "Button", href: "#", variant: "primary" },
+            { label: "Button", href: "#", variant: "primary" },
+          ],
+          id: "ButtonGroup-7fc86319954fbb0551a24282018c3d2a10b14fbd",
+        },
+      },
+    ],
+    root: { title: "" },
+    zones: {},
+  },
+  state: {
+    leftSideBarVisible: true,
+    arrayState: {
+      "ArrayField-6f94973722d42695d4e7b8678e7dcca5affc70df": {
+        items: [
+          {
+            _arrayId: "ArrayItem-46a064dbef49e8441afd782b10320b74f27f8bcb",
+            data: { label: "Learn more", href: "#", variant: "primary" },
+          },
+          {
+            _arrayId: "ArrayItem-5d99e3a7721edad0d127c9a6b010a37097dad610",
+            data: { label: "Button", href: "#", variant: "primary" },
+          },
+          {
+            _arrayId: "ArrayItem-222ea8b444fa799a8863eb32d057f3080ec99c65",
+            data: { label: "Button", href: "#", variant: "primary" },
+          },
+        ],
+        openId: "",
+      },
+    },
+    itemSelector: { index: 0, zone: "default-zone" },
+  },
+};
+
+const mockedAppDataArray2: AppData = {
+  data: {
+    content: [
+      {
+        type: "ButtonGroup",
+        props: {
+          buttons: [
+            { label: "Button", href: "#", variant: "primary" },
+            { label: "Button", href: "#", variant: "primary" },
+          ],
+          id: "ButtonGroup-7fc86319954fbb0551a24282018c3d2a10b14fbd",
+        },
+      },
+    ],
+    root: { title: "" },
+    zones: {},
+  },
+  state: {
+    leftSideBarVisible: true,
+    arrayState: {
+      "ArrayField-6f94973722d42695d4e7b8678e7dcca5affc70df": {
+        items: [
+          {
+            _arrayId: "ArrayItem-5d99e3a7721edad0d127c9a6b010a37097dad610",
+            data: { label: "Button", href: "#", variant: "primary" },
+          },
+          {
+            _arrayId: "ArrayItem-222ea8b444fa799a8863eb32d057f3080ec99c65",
+            data: { label: "Button", href: "#", variant: "primary" },
+          },
+          {
+            _arrayId: "ArrayItem-46a064dbef49e8441afd782b10320b74f27f8bcb",
+            data: { label: "Learn more", href: "#", variant: "primary" },
+          },
+        ],
+        openId: "",
+      },
+    },
+    itemSelector: { index: 0, zone: "default-zone" },
+  },
+};
+
+describe("usePuckHistory", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("rewinds a diff correctly", () => {
+    const histories: { rewind: () => void; forward: () => void }[] = [];
+    const record = (history) => histories.push(history);
+
+    _recordHistory({
+      snapshot: mockedAppData1,
+      newSnapshot: mockedAppData2,
+      dispatch: mockDispatch,
+      record,
+    });
+
+    // Rewind last history
+    histories[histories.length - 1].rewind();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "set",
+      appData: mockedAppData1,
+    });
+  });
+
+  it("fast-forwards a diff correctly", () => {
+    const histories: { rewind: () => void; forward: () => void }[] = [];
+    const record = (history) => {
+      histories.push(history);
+    };
+
+    _recordHistory({
+      snapshot: mockedAppData1,
+      newSnapshot: mockedAppData2,
+      dispatch: mockDispatch,
+      record,
+    });
+
+    histories[histories.length - 1].forward();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "set",
+      appData: mockedAppData2,
+    });
+  });
+
+  it("rewinds an array diff correctly", () => {
+    const histories: any[] = [];
+    const record = (history) => histories.push(history);
+
+    _recordHistory({
+      snapshot: mockedAppDataArray1,
+      newSnapshot: mockedAppDataArray2,
+      dispatch: mockDispatch,
+      record,
+    });
+
+    // Rewind last history
+    histories[histories.length - 1].rewind();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "set",
+      appData: mockedAppDataArray1,
+    });
+  });
+
+  it("fast-forwards a diff correctly", () => {
+    const histories: any[] = [];
+    const record = (history) => histories.push(history);
+
+    _recordHistory({
+      snapshot: mockedAppDataArray1,
+      newSnapshot: mockedAppDataArray2,
+      dispatch: mockDispatch,
+      record,
+    });
+
+    histories[histories.length - 1].forward();
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: "set",
+      appData: mockedAppDataArray2,
+    });
+  });
+});