refactor: change useForm on FieldEdition (#4320)

Closes: #4170

Author: Sebastien-Ahkrin

src/component/1d-2d/FieldEdition.tsx

@@ -1,14 +1,12 @@
 import type { PopoverNextProps } from '@blueprintjs/core';
 import { PopoverNext } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import { yupResolver } from '@hookform/resolvers/yup';
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import * as Yup from 'yup';
-
-import { Input2Controller } from '../elements/Input2Controller.js';
-import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
+import { revalidateLogic } from '@tanstack/react-form';
+import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import { AppForm, coerceNumberInput, useForm } from 'react-science/ui';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
 
 const StyledPopover = styled(PopoverNext)`
   .field-edition-popover {
@@ -21,33 +19,20 @@ type InputType = 'number' | 'text';
 interface FieldProps {
   value: number | string;
   inputType?: InputType;
-  onChange: (value: any) => void;
+  onChange: (value: string) => void;
 }
+
 interface FieldEditionsProps extends FieldProps {
   children: ReactNode;
   PopoverProps?: PopoverNextProps;
 }
-const InputDimension = { height: 28, width: 100 };
-
-const validationSchema = (inputType: 'number' | 'text') =>
-  Yup.object({
-    value: (inputType === 'number' ? Yup.number() : Yup.string()).required(),
-  });
-
-function stopPropagation(e: MouseEvent) {
-  e.stopPropagation();
-}
 
 export function FieldEdition(props: FieldEditionsProps) {
   const { value, inputType = 'text', onChange, children, PopoverProps } = props;
   const [isOpen, setIsOpen] = useState(false);
 
-  function handleChange({
-    value: newValue,
-  }: {
-    value: FieldEditionsProps['value'];
-  }) {
-    onChange(newValue);
+  function handleChange(newValue: FieldEditionsProps['value']) {
+    onChange(String(newValue));
     setIsOpen(false);
   }
 
@@ -67,49 +52,57 @@ export function FieldEdition(props: FieldEditionsProps) {
   );
 }
 
+function validationSchema(
+  inputType: InputType,
+): z.ZodType<{ value: string } | { value: number }, { value: string }> {
+  return match(inputType)
+    .with('number', () =>
+      z.object({
+        value: coerceNumberInput(),
+      }),
+    )
+    .with('text', () =>
+      z.object({
+        value: z.string(),
+      }),
+    )
+    .exhaustive();
+}
+
 function Field(props: FieldProps) {
   const { value, inputType = 'text', onChange } = props;
 
-  const { control, handleSubmit } = useForm({
-    defaultValues: { value },
-    resolver: yupResolver(validationSchema(inputType)),
-  });
-
-  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
-    if (event.key === 'Enter') {
-      void handleSubmit(onChange)();
-    }
-  }
+  const validation = useMemo(() => {
+    return validationSchema(inputType).transform(({ value }) => {
+      return String(value);
+    });
+  }, [inputType]);
 
-  const style = {
-    height: `${InputDimension.height}px`,
-    outline: 'none',
-  };
-
-  if (inputType === 'number') {
-    return (
-      <NumberInput2Controller
-        name="value"
-        control={control}
-        style={style}
-        onKeyDown={handleKeyDown}
-        onClick={stopPropagation}
-        onMouseDown={stopPropagation}
-        autoFocus
-        buttonPosition="none"
-      />
-    );
-  }
+  const form = useForm({
+    validationLogic: revalidateLogic({ mode: 'change' }),
+    defaultValues: {
+      value,
+    },
+    validators: {
+      onDynamic: validation,
+    },
+    onSubmit: ({ value }) => {
+      const parsedValue = validation.parse(value);
+      onChange(parsedValue);
+    },
+  });
 
   return (
-    <Input2Controller
-      name="value"
-      control={control}
-      style={style}
-      onKeyDown={handleKeyDown}
-      onClick={stopPropagation}
-      onMouseDown={stopPropagation}
-      autoFocus
-    />
+    <AppForm form={form}>
+      <form.AppField name="value">
+        {(field) =>
+          inputType === 'number' ? (
+            <field.NumericInput autoFocus />
+          ) : (
+            <field.Input autoFocus />
+          )
+        }
+      </form.AppField>
+    </AppForm>
   );
 }

src/component/1d/ranges/AssignmentLabel.tsx

@@ -44,6 +44,7 @@ export function AssignmentLabel(props: AssignmentLabelProps) {
   }
   const baseYOffset = margin?.top + marginTop;
   const yOffset = baseYOffset + stackIndex * 12;
+
   return (
     <g transform={`translate(${width / 2} ${yOffset})`}>
       <FieldEdition