From 031fa18cb3e7392a9b1f3f2c8fac4335447c5d59 Mon Sep 17 00:00:00 2001
From: Diego Alzate <diego35.da@gmail.com>
Date: Tue, 21 May 2024 18:04:15 +0100
Subject: [PATCH] Add number support (#539)

* add number input

* min 0 validation on number

* validate integer

* Update packages/berlin/src/pages/Register.tsx

Co-authored-by: Martin Benedikt Busch <43137759+MartinBenediktBusch@users.noreply.github.com>

* Update packages/berlin/src/pages/Register.tsx

Co-authored-by: Martin Benedikt Busch <43137759+MartinBenediktBusch@users.noreply.github.com>

---------

Co-authored-by: Martin Benedikt Busch <43137759+MartinBenediktBusch@users.noreply.github.com>
---
 packages/berlin/src/pages/Register.tsx | 58 ++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx
index 65edc8c0..13400b07 100644
--- a/packages/berlin/src/pages/Register.tsx
+++ b/packages/berlin/src/pages/Register.tsx
@@ -688,6 +688,18 @@ function FormField({
           value={value}
         />
       );
+    case 'NUMBER':
+      return (
+        <NumberInput
+          id={id}
+          name={name}
+          register={register}
+          required={required}
+          disabled={disabled}
+          errors={errors}
+          value={value}
+        />
+      );
     default:
       return null;
   }
@@ -821,6 +833,52 @@ function TextAreaInput(props: {
   );
 }
 
+function NumberInput(props: {
+  id: string;
+  name: string;
+  required: boolean | null;
+  disabled: boolean;
+  register: UseFormRegister<Record<string, string>>;
+  errors: FieldErrors<Record<string, string>>;
+  value: string;
+}) {
+  return (
+    <FlexColumn $gap="0.5rem">
+      <Input
+        type="number"
+        label={props.name}
+        required={!!props.required}
+        placeholder="Enter a value"
+        {...props.register(props.id, {
+          validate: (value) => {
+            if (!props.required) {
+              return true;
+            }
+
+            const v = z.coerce
+              .number()
+              .int('Value has to be an integer')
+              .min(0, 'Value must be positive')
+              .safeParse(value);
+
+            if (v.success) {
+              return true;
+            }
+
+            return v.error.errors[0].message;
+          },
+        })}
+        onChange={(event) => {
+          props.register(props.id, {
+            value: event.target.value,
+          });
+        }}
+      />
+      {props.errors?.[props.id] && <Error>{props.errors?.[props.id]?.message}</Error>}
+    </FlexColumn>
+  );
+}
+
 function SelectInput(props: {
   id: string;
   name: string;