From 250d7d5d9f7d4d51d7df6fb44e8c0d6122a09d49 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 9 Oct 2023 18:16:02 +0100
Subject: [PATCH] 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 0000000000..7c713496a6
--- /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 0000000000..dfb9f2c90b
--- /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 0000000000..672d6e63e3
--- /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 0000000000..3dc630b56f
--- /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 0000000000..f98ef53ca7
--- /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 0000000000..8fae006c7d
--- /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 0000000000..8eef387521
--- /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 57f57906f7..2ec4ec16ed 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} />;
 };