ArgControl: Add Union Type Arg Control

code/ui/blocks/src/components/ArgsTable/ArgControl.tsx

@@ -68,6 +68,55 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
   // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
   // row.key is a hash key and therefore a much safer choice
   const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
-  const Control = Controls[control.type] || NoControl;
-  return <Control {...props} {...control} controlType={control.type} />;
+
+  const controls = getControlTypesFromArgType(row);
+
+  const tsTypes: string[] =
+    row.type?.name === 'union'
+      ? row.type.value.map((t: { name: any }) => t.name)
+      : [row.type?.name];
+
+  return (
+    <div style={{ display: 'flex', gap: 10 }}>
+      {controls.map((controlType: string) => {
+        const UninonControl = Controls[controlType] || NoControl;
+        const argValueType = typeof boxedValue.value;
+        const controlValue = [tsTypes.shift(), controlType].includes(argValueType)
+          ? boxedValue.value
+          : undefined;
+
+        const controlKey = controls.length > 1 ? `${controlType}-${key}` : key;
+
+        return (
+          <UninonControl
+            {...props}
+            {...control}
+            key={controlKey}
+            name={controlKey}
+            value={controlValue}
+            controlType={controlType}
+          />
+        );
+      })}
+    </div>
+  );
 };
+/**
+ * function to get control types from union arg type
+ * example : argType = { name: 'union', value: [{ name: 'string' }, { name: 'number' }] }
+ * @param argType
+ * @returns
+ */
+function getControlTypesFromArgType(argType: ArgType) {
+  return argType.type?.value && argType.type?.name === 'union' && !argType.options
+    ? argType.type.value.map((t: { name: any }) => {
+        switch (t.name) {
+          case 'string':
+            return 'text';
+
+          default:
+            return t.name;
+        }
+      })
+    : [argType.control.type];
+}

code/ui/blocks/src/controls/Number.tsx

@@ -64,6 +64,10 @@ export const NumberControl: FC<NumberProps> = ({
     if (inputValue !== newInputValue) {
       setInputValue(value);
     }
+    console.log('useEffect', value, newInputValue, inputValue);
+    if (!value && newInputValue === '') {
+      setForceVisible(false);
+    }
   }, [value]);
 
   if (!forceVisible && value === undefined) {

code/ui/components/src/form/input/input.tsx

@@ -33,6 +33,11 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({
   lineHeight: '20px',
   padding: '6px 10px', // 32
 
+  '&[type="number"]': {
+    /* without this we will have inconsistant height  */
+    padding: '0px 10px',
+  },
+
   '&:focus': {
     boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
     outline: 'none',