From 1530de764aced4dd8bbbdbe8eeec40461f6329f0 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 26 Oct 2023 22:36:33 +0100
Subject: [PATCH] refactor: share common label code between fields

---
 .../InputOrGroup/fields/ArrayField/index.tsx  | 17 ++--
 .../fields/DefaultField/index.tsx             | 18 +++--
 .../fields/ExternalField/index.tsx            | 17 ++--
 .../InputOrGroup/fields/RadioField/index.tsx  | 78 +++++++++----------
 .../InputOrGroup/fields/SelectField/index.tsx | 16 ++--
 .../fields/TextareaField/index.tsx            | 16 ++--
 .../core/components/InputOrGroup/index.tsx    | 38 ++++++++-
 .../components/InputOrGroup/styles.module.css |  4 +-
 8 files changed, 114 insertions(+), 90 deletions(-)

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
index 06f25131db..97d0ef2bf1 100644
--- a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -2,7 +2,7 @@ import getClassNameFactory from "../../../../lib/get-class-name-factory";
 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 { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
 import DroppableStrictMode from "../../../DroppableStrictMode";
@@ -69,13 +69,12 @@ export const ArrayField = ({
   }
 
   return (
-    <div className={getClassNameInput()}>
-      <b className={getClassNameInput("label")}>
-        <div className={getClassNameInput("labelIcon")}>
-          <List size={16} />
-        </div>
-        {label || name}
-      </b>
+    <FieldLabelInternal
+      label={label || name}
+      icon={<List size={16} />}
+      el="div"
+      readOnly={readOnly}
+    >
       <DragDropContext
         onDragEnd={(event) => {
           if (event.destination) {
@@ -221,6 +220,6 @@ export const ArrayField = ({
           }}
         </DroppableStrictMode>
       </DragDropContext>
-    </div>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
index dfb9f2c90b..010fc6739e 100644
--- a/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/DefaultField/index.tsx
@@ -1,7 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { Hash, Type } from "react-feather";
-import type { InputProps } from "../..";
+import { FieldLabelInternal, type InputProps } from "../..";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -14,14 +14,16 @@ export const DefaultField = ({
   label,
 }: InputProps) => {
   return (
-    <label className={getClassName({ readOnly })}>
-      <div className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
+    <FieldLabelInternal
+      label={label || name}
+      icon={
+        <>
           {field.type === "text" && <Type size={16} />}
           {field.type === "number" && <Hash size={16} />}
-        </div>
-        {label || name}
-      </div>
+        </>
+      }
+      readOnly={readOnly}
+    >
       <input
         className={getClassName("input")}
         autoComplete="off"
@@ -37,6 +39,6 @@ export const DefaultField = ({
         }}
         readOnly={readOnly}
       />
-    </label>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
index 773c1bc5d4..80cc59ab89 100644
--- a/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
@@ -1,6 +1,6 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
-import type { InputProps } from "../..";
+import { FieldLabelInternal, type InputProps } from "../..";
 import { ExternalInput } from "../../../ExternalInput";
 import { Link } from "react-feather";
 
@@ -18,15 +18,12 @@ export const ExternalField = ({
   }
 
   return (
-    <div className={getClassName()}>
-      <div className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
-          <Link size={16} />
-        </div>
-
-        {label || name}
-      </div>
+    <FieldLabelInternal
+      label={label || name}
+      icon={<Link size={16} />}
+      el="div"
+    >
       <ExternalInput field={field} onChange={onChange} value={value} />
-    </div>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/fields/RadioField/index.tsx b/packages/core/components/InputOrGroup/fields/RadioField/index.tsx
index 091bb4e6ea..57749e47e1 100644
--- a/packages/core/components/InputOrGroup/fields/RadioField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/RadioField/index.tsx
@@ -1,7 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { CheckCircle } from "react-feather";
-import type { InputProps } from "../..";
+import { FieldLabelInternal, type InputProps } from "../..";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -17,47 +17,43 @@ export const RadioField = ({
   }
 
   return (
-    <div className={getClassName({ readOnly })}>
-      <div className={getClassName("radioGroup")}>
-        <div className={getClassName("label")}>
-          <div className={getClassName("labelIcon")}>
-            <CheckCircle size={16} />
-          </div>
-          {field.label || name}
-        </div>
+    <FieldLabelInternal
+      icon={<CheckCircle size={16} />}
+      label={field.label || name}
+      readOnly={readOnly}
+      el="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;
+                }
 
-        <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);
-                }}
-                disabled={readOnly}
-                defaultChecked={value === option.value}
-              />
-              <div className={getClassName("radioInner")}>
-                {option.label || option.value}
-              </div>
-            </label>
-          ))}
-        </div>
+                onChange(e.currentTarget.value);
+              }}
+              disabled={readOnly}
+              defaultChecked={value === option.value}
+            />
+            <div className={getClassName("radioInner")}>
+              {option.label || option.value}
+            </div>
+          </label>
+        ))}
       </div>
-    </div>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/fields/SelectField/index.tsx b/packages/core/components/InputOrGroup/fields/SelectField/index.tsx
index d4a0c52c4f..6010453121 100644
--- a/packages/core/components/InputOrGroup/fields/SelectField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/SelectField/index.tsx
@@ -1,7 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { ChevronDown } from "react-feather";
-import type { InputProps } from "../..";
+import { FieldLabelInternal, type InputProps } from "../..";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -18,13 +18,11 @@ export const SelectField = ({
   }
 
   return (
-    <label className={getClassName({ readOnly })}>
-      <div className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
-          <ChevronDown size={16} />
-        </div>
-        {label || name}
-      </div>
+    <FieldLabelInternal
+      label={label || name}
+      icon={<ChevronDown size={16} />}
+      readOnly={readOnly}
+    >
       <select
         className={getClassName("input")}
         disabled={readOnly}
@@ -49,6 +47,6 @@ export const SelectField = ({
           />
         ))}
       </select>
-    </label>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
index 8fae006c7d..94d2193b30 100644
--- a/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
+++ b/packages/core/components/InputOrGroup/fields/TextareaField/index.tsx
@@ -1,7 +1,7 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "../../styles.module.css";
 import { Type } from "react-feather";
-import type { InputProps } from "../..";
+import { FieldLabelInternal, type InputProps } from "../..";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -13,13 +13,11 @@ export const TextareaField = ({
   label,
 }: InputProps) => {
   return (
-    <label className={getClassName({ readOnly })}>
-      <div className={getClassName("label")}>
-        <div className={getClassName("labelIcon")}>
-          <Type size={16} />
-        </div>
-        {label || name}
-      </div>
+    <FieldLabelInternal
+      label={label || name}
+      icon={<Type size={16} />}
+      readOnly={readOnly}
+    >
       <textarea
         className={getClassName("input")}
         autoComplete="off"
@@ -29,6 +27,6 @@ export const TextareaField = ({
         readOnly={readOnly}
         rows={5}
       />
-    </label>
+    </FieldLabelInternal>
   );
 };
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
index 2ec4ec16ed..b267ee137a 100644
--- a/packages/core/components/InputOrGroup/index.tsx
+++ b/packages/core/components/InputOrGroup/index.tsx
@@ -18,19 +18,53 @@ export const FieldLabel = ({
   children,
   icon,
   label,
+  el = "label",
+  readOnly,
+  className,
 }: {
   children?: ReactNode;
   icon?: ReactNode;
   label: string;
+  el?: "label" | "div";
+  readOnly?: boolean;
+  className?: string;
 }) => {
+  const El = el;
   return (
-    <label>
+    <El className={className}>
       <div className={getClassName("label")}>
         {icon ? <div className={getClassName("labelIcon")}>{icon}</div> : <></>}
         {label}
       </div>
       {children}
-    </label>
+    </El>
+  );
+};
+
+export const FieldLabelInternal = ({
+  children,
+  icon,
+  label,
+  el = "label",
+  readOnly,
+}: {
+  children?: ReactNode;
+  icon?: ReactNode;
+  label: string;
+  el?: "label" | "div";
+  readOnly?: boolean;
+}) => {
+  const El = el;
+  return (
+    <FieldLabel
+      label={label}
+      icon={icon}
+      className={getClassName({ readOnly })}
+      readOnly={readOnly}
+      el={el}
+    >
+      {children}
+    </FieldLabel>
   );
 };
 
diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
index 5a073894e4..93e3faab22 100644
--- a/packages/core/components/InputOrGroup/styles.module.css
+++ b/packages/core/components/InputOrGroup/styles.module.css
@@ -57,8 +57,8 @@
   background-color: white;
 }
 
-.Input--readOnly .Input-input,
-.Input--readOnly select.Input-input {
+.Input--readOnly > .Input-input,
+.Input--readOnly > select.Input-input {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-8);
   color: var(--puck-color-grey-5);