Significantly improved editing experience; Updated form to change variable value on field change

Author: aidankemp

src/components/TokenDetails/IntegerStep.tsx

@@ -0,0 +1,62 @@
+import { Col, Form, InputNumber, Row, Slider } from "antd";
+
+export const IntegerStep = ({
+  name,
+  defaultValue,
+  onChange,
+}: {
+  name: string;
+  defaultValue: string;
+  onChange: (name: string, value: string) => void;
+}) => {
+  const form = Form.useFormInstance();
+  const inputValue = Form.useWatch(name, { form, preserve: true });
+
+  const parseStringValue = (stringValue: string) => {
+    const valueAsInteger = parseFloat(stringValue.replace(/^[^\d.-]+/, "")); // Replace all leading non-digits (except decimal points and dashes) with nothing
+    const valueSuffix = stringValue.replace(/^[\d.-]+/, "").trim(); // Replace all leading digits (and decimal points and dashes) with nothing
+
+    return { value: valueAsInteger, suffix: valueSuffix };
+  };
+
+  const { value: numberCurrentValue, suffix } = parseStringValue(
+    inputValue || defaultValue
+  );
+
+  const { value: numberDefaultValue } = parseStringValue(defaultValue);
+
+  const onStepChange = (value: number | null) => {
+    if (value === null) return; // Handle null case for InputNumber
+
+    const valueAsString = `${value}${suffix || ""}`;
+    if (inputValue !== valueAsString) {
+      form.setFieldValue(name, valueAsString);
+    }
+
+    if (onChange) {
+      onChange(name, valueAsString);
+    }
+  };
+
+  return (
+    <Row>
+      <Col span={14}>
+        <Slider
+          min={numberDefaultValue / 2}
+          max={numberDefaultValue * 2}
+          step={(numberDefaultValue * 2 - numberDefaultValue / 2) / 100}
+          value={numberCurrentValue}
+          onChange={onStepChange}
+        />
+      </Col>
+      <Col span={10}>
+        <InputNumber
+          style={{ margin: "0 16px" }}
+          addonAfter={suffix}
+          value={numberCurrentValue}
+          onChange={onStepChange}
+        />
+      </Col>
+    </Row>
+  );
+};

src/components/TokenDetails/TokenDetails.scss

@@ -1,6 +1,14 @@
 .token-details {
   &__selected-target {
-    border: 2px solid red !important;
+    border: 3px solid red;
     cursor: pointer;
+
+    &--frozen {
+      border-color: green;
+    }
   }
 }
+
+.ant-color-picker {
+  z-index: 100000;
+}

src/components/TokenDetails/TokenDetails.tsx

@@ -1,79 +1,146 @@
 import _ from "lodash";
 import { type ReactNode, useEffect, useState } from "react";
-import { Button, Typography } from "antd";
+import { Button, Flex, Form, Typography } from "antd";
 import { variablesUsedByElement } from "../../utils/variable-parsing/findVariablesUsedByElement";
 import { transformVariableToReact } from "../../utils/variable-parsing/transformVariableToReact";
 import "./TokenDetails.scss";
+import { changeVariableValue } from "../../utils/variable-updates/changeVariableValue";
+import type { Color } from "antd/es/color-picker";
 
 const { Text } = Typography;
 
 export const TokenDetails = () => {
   const [target, setTarget] = useState<HTMLElement | null>(null);
   const [frozen, setFrozen] = useState(false); // State to manage if the target is frozen
   const [editable, setEditable] = useState(false); // State to manage if the variable values should be editable
+  const [tokenEditingForm] = Form.useForm();
 
-  const saveVariableValues = () => {
+  const onValuesChange = (values: Record<string, string | Color>) => {
+    for (const [key, value] of Object.entries(values)) {
+      if (typeof value === "object") {
+        if ("toCssString" in value) {
+          // If the value is a ColorPicker, convert it to a CSS string
+          changeVariableValue(key, value.toCssString());
+          continue;
+        }
+      }
+      changeVariableValue(key, value);
+    }
+  };
+
+  const onFinish = () => {
     setEditable(false);
+    setFrozen(false);
   };
 
   const targetTokenDetails = (target: HTMLElement | null): ReactNode => {
-    if (target) {
-      try {
-        const elementName = target.tagName;
-        const elementVariables = variablesUsedByElement(target);
-        return (
-          <>
-            <Text strong>{_.lowerCase(elementName)}</Text>
-            <br />
-            <br />
+    if (!target) {
+      return <h4>No target selected </h4>;
+    }
+
+    try {
+      const elementName = target.tagName;
+      const elementVariables = variablesUsedByElement(target);
+      return (
+        <>
+          <Text strong>{_.lowerCase(elementName)}</Text>
+          <br />
+          <br />
+          <Form
+            form={tokenEditingForm}
+            name="variableValues"
+            onValuesChange={onValuesChange}
+            onFinish={onFinish}
+          >
             {elementVariables.map((variable) =>
-              transformVariableToReact(variable, editable)
+              transformVariableToReact(
+                variable,
+                editable,
+                (name: string, value: string) => {
+                  changeVariableValue(name, value);
+                }
+              )
             )}
             <br />
-            <Button
-              onClick={() =>
-                editable ? saveVariableValues() : setEditable(true)
-              }
-              type="primary"
-              size="small"
-            >
-              {editable ? "Save" : "Edit"}
-            </Button>
-            <br />
-            <br />
-            <Button
-              onClick={() => setFrozen(false)}
-              color="cyan"
-              variant="solid"
-              size="small"
-            >
-              Unfreeze
-            </Button>
-          </>
-        );
-      } catch (e) {
-        console.log(e);
-      }
-    } else {
-      return <h4>No target selected </h4>;
+            <Flex gap={8}>
+              {editable ? (
+                <Form.Item noStyle>
+                  <Button type="primary" size="small" htmlType="submit">
+                    Save
+                  </Button>
+                </Form.Item>
+              ) : null}
+              {editable ? null : (
+                <Button
+                  onClick={() => setEditable(true)}
+                  type="primary"
+                  size="small"
+                >
+                  Edit
+                </Button>
+              )}
+              {frozen ? (
+                <>
+                  <br />
+                  <Button
+                    id="unfreeze-button"
+                    onClick={() => {
+                      setFrozen(false);
+                    }}
+                    color="cyan"
+                    variant="solid"
+                    size="small"
+                  >
+                    Unfreeze
+                  </Button>
+                </>
+              ) : null}
+            </Flex>
+          </Form>
+        </>
+      );
+    } catch (e) {
+      console.log(e);
     }
   };
 
+  useEffect(() => {
+    if (target) {
+      if (frozen) {
+        target.classList.add("token-details__selected-target--frozen");
+      } else {
+        target.classList.remove("token-details__selected-target--frozen");
+      }
+    }
+  }, [target, frozen]);
+
   useEffect(() => {
     const interceptClick = (event: MouseEvent) => {
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
 
-      if (event.target.matches(".tokenInspector *")) {
-        console.log("Click on token inspector, NOT freezing target");
+      if (
+        event.target.matches(".tokenInspector *") ||
+        event.target.matches("#unfreeze-button *")
+      ) {
         // If the click is not on the token inspector, do not freeze
         return;
       }
 
       event.preventDefault();
       event.stopPropagation();
 
+      if (frozen) {
+        if (event.target.matches(".token-details__selected-target")) {
+          // If the click is on the selected target, unfreeze it
+          setFrozen(false);
+          return;
+        }
+        // If the target is currently frozen, do not change anything
+        return;
+      }
+
       setFrozen(true);
     };
 
@@ -99,7 +166,6 @@ export const TokenDetails = () => {
               el.classList.remove("token-details__selected-target");
             }
           });
-        console.log("Changing target!");
         setTarget(newTarget);
       }
     };

src/utils/variable-parsing/transformVariableToReact.tsx

@@ -7,16 +7,27 @@ const { Text } = Typography;
 
 export const transformVariableToReact = (
   variable: Variable,
-  editable: boolean = false
+  editable: boolean = false,
+  onChange?: (name: string, value: string) => void
 ): ReactNode => {
+  const usedIn = (
+    <>
+      (used in <Text strong>{variable.property}</Text>)
+    </>
+  );
   return (
     <div>
-      {variable.formattedName ?? variable.name}: <code>{variable.value}</code>{" "}
-      (used in{" "}
-      <Text strong>
-        {editable ? variableToFormInput(variable) : variable.property}
-      </Text>
-      )
+      {variable.formattedName ?? variable.name}:{" "}
+      {editable && onChange ? (
+        <>
+          {usedIn} <br />
+          {variableToFormInput(variable, onChange)}
+        </>
+      ) : (
+        <>
+          <code>{variable.value}</code> {usedIn}
+        </>
+      )}
       <br />
     </div>
   );

src/utils/variable-parsing/variableToFormInput.tsx

@@ -1,16 +1,42 @@
 import type { ReactNode } from "react";
-import { ColorPicker, Input, InputNumber } from "antd";
+import { ColorPicker, Form, InputNumber } from "antd";
 import type { Variable } from "../../types/variables";
+import { IntegerStep } from "../../components/TokenDetails/IntegerStep";
 
-export const variableToFormInput = (variable: Variable): ReactNode => {
+const formItemWrapper = (
+  formInput: ReactNode,
+  variableName: string,
+  initialValue: string | number
+) => (
+  <Form.Item name={variableName} initialValue={initialValue} noStyle>
+    {formInput}
+  </Form.Item>
+);
+
+export const variableToFormInput = (
+  variable: Variable,
+  onChange: (name: string, value: string) => void
+): ReactNode => {
   const { value } = variable;
+
+  let formInput: ReactNode | null = null;
+
+  // Determine the type of input based on the value
   if (typeof value === "string") {
     if (value.startsWith("#") || value.startsWith("rgb")) {
-      return <ColorPicker defaultValue={value} showText size="small" />;
+      formInput = <ColorPicker showText size="small" />;
     } else {
-      return <Input defaultValue={value} />;
+      return (
+        <IntegerStep
+          defaultValue={value}
+          name={variable.name}
+          onChange={onChange}
+        />
+      );
     }
   } else if (typeof value === "number") {
-    return <InputNumber defaultValue={value} />;
+    formInput = <InputNumber />;
   }
+
+  return formItemWrapper(formInput, variable.name, value);
 };