fix(toolkit): fix a bug when trigger pipeline, we wrongly parsed stri…

…ng value to number (#955)

Because

- when trigger pipeline, we wrongly parsed string value to number

This commit

- fix a bug when trigger pipeline, we wrongly parsed string value to
number

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.55",
+  "version": "0.68.3-rc.58",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/view/pipeline-builder/components/start-node/StartNode.tsx

@@ -67,7 +67,7 @@ export const StartNode = ({ data, id }: NodeProps<StartNodeData>) => {
     if (!pipelineName) return;
 
     const input = recursiveRemoveUndefinedAndNullFromArray(
-      recursiveReplaceNullAndEmptyStringWithUndefined(recursiveParseToNum(data))
+      recursiveReplaceNullAndEmptyStringWithUndefined(data)
     );
 
     setIsTriggering(true);

packages/toolkit/src/view/pipeline-builder/use-node-input-fields/NumberField.tsx

@@ -22,13 +22,13 @@ export const NumberField = (props: {
               <Input.Root>
                 <Input.Core
                   {...field}
-                  type="text"
+                  type="number"
                   value={field.value ?? ""}
                   autoComplete="off"
                   // AlphaValueIssue: We still have alpha value issue in
                   // out design-token, so we need to use the hex value
                   // here
-                  className="!text-[#1D2433] !text-opacity-80 !product-body-text-3-regular"
+                  className="!text-[#1D2433] !text-opacity-80 !product-body-text-3-regular appearance-none"
                 />
               </Input.Root>
             </Form.Control>

packages/toolkit/src/view/pipeline-builder/use-node-input-fields/NumbersField.tsx

@@ -56,10 +56,10 @@ export const NumbersField = (props: {
                   >
                     <Input.Root className="flex-1">
                       <Input.Core
-                        type="text"
+                        type="number"
                         value={numberFieldsValue[idx] ?? undefined}
                         autoComplete="off"
-                        className="text-semantic-fg-primary product-body-text-4-regular"
+                        className="text-semantic-fg-primary product-body-text-4-regular appearance-none"
                         onChange={(e) => {
                           const newNumberFieldsValue = [...numberFieldsValue];
                           newNumberFieldsValue[idx] = e.target.value;

packages/toolkit/src/view/pipeline-builder/use-node-input-fields/useStartOperatorTestModeInputForm.tsx

@@ -100,12 +100,15 @@ export function transformStartOperatorBodyToZod(
         zodSchema = zodSchema.setKey(key, z.boolean().nullable().optional());
         break;
       case "number":
-        zodSchema = zodSchema.setKey(key, z.string());
+        zodSchema = zodSchema.setKey(
+          key,
+          z.coerce.number().nullable().optional()
+        );
         break;
       case "number_array":
         zodSchema = zodSchema.setKey(
           key,
-          z.array(z.string().nullable().optional()).nullable().optional()
+          z.array(z.coerce.number().nullable().optional()).nullable().optional()
         );
         break;
       case "audio":