Zod config validation (#635)

* Zod WIP

* Zod form validation

* DynamicForm testing

* Fix linting

* Delete rasterSource.ts

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>

src/components/Form/DynamicForm.tsx

@@ -9,11 +9,19 @@ import {
   type Control,
   type DefaultValues,
   type FieldValues,
+  FormProvider,
+  get,
   type Path,
   type SubmitHandler,
   useForm,
 } from "react-hook-form";
 import { Heading } from "@components/UI/Typography/Heading.tsx";
+import { ZodType } from "zod/v4";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { createZodResolver } from "@components/Form/createZodResolver.ts";
+import { useAppStore } from "@core/stores/appStore.ts";
+import { dotPaths } from "@core/utils/dotPath.ts";
 
 interface DisabledBy<T> {
   fieldName: Path<T>;
@@ -51,6 +59,8 @@ export interface DynamicFormProps<T extends FieldValues> {
     validationText?: string;
     fields: FieldProps<T>[];
   }[];
+  validationSchema?: ZodType<T>;
+  formId?: string;
 }
 
 export function DynamicForm<T extends FieldValues>({
@@ -59,11 +69,45 @@ export function DynamicForm<T extends FieldValues>({
   hasSubmitButton,
   defaultValues,
   fieldGroups,
+  validationSchema,
+  formId,
 }: DynamicFormProps<T>) {
-  const { handleSubmit, control, getValues } = useForm<T>({
-    mode: submitType,
+  const { t } = useTranslation();
+  const {
+    addError,
+    removeError,
+  } = useAppStore();
+
+  const methods = useForm<
+    T
+  >({
+    mode: "onChange",
     defaultValues: defaultValues,
+    resolver: validationSchema
+      ? createZodResolver(validationSchema)
+      : undefined,
+    shouldFocusError: false,
   });
+  const { handleSubmit, control, getValues, formState } = methods;
+
+  useEffect(() => {
+    const errorKeys = Object.keys(formState.errors);
+    if (formId) {
+      if (
+        errorKeys.length === 0
+      ) {
+        dotPaths(getValues()).forEach((key) => {
+          removeError(key);
+        });
+        removeError(formId);
+      } else {
+        errorKeys.forEach((key) => {
+          addError(key, "");
+        });
+        addError(formId, "");
+      }
+    }
+  }, [formState.errors]);
 
   const isDisabled = (
     disabledBy?: DisabledBy<T>[],
@@ -86,46 +130,66 @@ export function DynamicForm<T extends FieldValues>({
   };
 
   return (
-    <form
-      className="space-y-8"
-      {...(submitType === "onSubmit" ? { onSubmit: handleSubmit(onSubmit) } : {
-        onChange: handleSubmit(onSubmit),
-      })}
-    >
-      {fieldGroups.map((fieldGroup) => (
-        <div key={fieldGroup.label} className="space-y-8 sm:space-y-5">
-          <div>
-            <Heading as="h4" className="font-medium">
-              {fieldGroup.label}
-            </Heading>
-            <Subtle>{fieldGroup.description}</Subtle>
-            <Subtle className="font-semibold">{fieldGroup?.notes}</Subtle>
-          </div>
+    <FormProvider {...methods}>
+      <form
+        className="space-y-8"
+        {...(submitType === "onSubmit"
+          ? { onSubmit: handleSubmit(onSubmit) }
+          : { onChange: handleSubmit(onSubmit) })}
+      >
+        {fieldGroups.map((fieldGroup) => (
+          <div key={fieldGroup.label} className="space-y-8 sm:space-y-5">
+            <div>
+              <Heading as="h4" className="font-medium">
+                {fieldGroup.label}
+              </Heading>
+              <Subtle>{fieldGroup.description}</Subtle>
+              <Subtle className="font-semibold">{fieldGroup?.notes}</Subtle>
+            </div>
 
-          {fieldGroup.fields.map((field) => {
-            return (
-              <FieldWrapper
-                key={field.label}
-                label={field.label}
-                fieldName={field.name}
-                description={field.description}
-                valid={field.validationText === undefined ||
-                  field.validationText === ""}
-                validationText={field.validationText}
-              >
-                <DynamicFormField
-                  field={field}
-                  control={control}
-                  disabled={isDisabled(field.disabledBy, field.disabled)}
-                />
-              </FieldWrapper>
-            );
-          })}
-        </div>
-      ))}
-      {hasSubmitButton && (
-        <Button type="submit" variant="outline">Submit</Button>
-      )}
-    </form>
+            {fieldGroup.fields.map((field) => {
+              const error = get(formState.errors, field.name as string);
+              return (
+                <FieldWrapper
+                  key={field.label}
+                  label={field.label}
+                  fieldName={field.name}
+                  description={field.description}
+                  valid={validationSchema // keep backwards compat with not updated cfg pages
+                    ? !error
+                    : field.validationText === undefined ||
+                      field.validationText === ""}
+                  validationText={validationSchema
+                    ? (error
+                      ? String(
+                        t([`formValidation.${error.type}`, error.message], {
+                          returnObjects: false,
+                          ...error.params,
+                        }),
+                      )
+                      : "")
+                    : field.validationText}
+                >
+                  <DynamicFormField
+                    field={field}
+                    control={control}
+                    disabled={isDisabled(field.disabledBy, field.disabled)}
+                  />
+                </FieldWrapper>
+              );
+            })}
+          </div>
+        ))}
+        {hasSubmitButton && (
+          <Button
+            type="submit"
+            variant="outline"
+            disabled={!formState.isValid}
+          >
+            Submit
+          </Button>
+        )}
+      </form>
+    </FormProvider>
   );
 }