feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

platform/ui/src/components/InputNumber/InputNumber.css

@@ -2,6 +2,18 @@ input[type='text'] {
   -webkit-appearance: none;
 }
 
+/* For most modern browsers */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* For Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
 .input-number:focus {
   border: none;
   outline: none;

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import IconButton from '../IconButton';
 import Icon from '../Icon';
 import './InputNumber.css';
 import Label from '../Label';
+import getMaxDigits from '../../utils/getMaxDigits';
 
 /**
  *  React Number Input component'
@@ -20,14 +21,15 @@ const sizesClasses = {
 
 const InputNumber: React.FC<{
   value: number;
-  onChange: (value) => void;
+  onChange: (value: number) => void;
   minValue?: number;
   maxValue?: number;
-  step: number;
-  size?: string;
+  step?: number;
+  size?: 'sm' | 'lg';
   className?: string;
   labelClassName?: string;
   label?: string;
+  showAdjustmentArrows?: boolean;
 }> = ({
   value,
   onChange,
@@ -38,96 +40,99 @@ const InputNumber: React.FC<{
   maxValue = 100,
   labelClassName,
   label,
+  showAdjustmentArrows = true,
 }) => {
   const [numberValue, setNumberValue] = useState(value);
 
+  const maxDigits = getMaxDigits(maxValue, step);
+  const inputWidth = Math.max(maxDigits * 10, showAdjustmentArrows ? 20 : 28);
+  const arrowWidth = showAdjustmentArrows ? 20 : 0;
+  const containerWidth = `${inputWidth + arrowWidth}px`;
+
+  useEffect(() => {
+    setNumberValue(value);
+  }, [value]);
+
   const handleMinMax = useCallback(
-    (value: number) => {
-      if (value > maxValue) {
-        return maxValue;
-      } else if (value < minValue) {
-        return minValue;
-      } else {
-        return value;
-      }
-    },
+    (val: number) => Math.min(Math.max(val, minValue), maxValue),
     [maxValue, minValue]
   );
 
-  const handleChange = useCallback(
-    e => {
-      const numberValue = handleMinMax(Number(e.target.value));
-      setNumberValue(numberValue);
-      onChange(numberValue);
-    },
-    [onChange, setNumberValue, handleMinMax]
-  );
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
 
-  const handleIncrement = useCallback(
-    e => {
-      const newNum = handleMinMax(Number(numberValue) + step);
-      setNumberValue(newNum);
-      onChange(newNum);
-    },
-    [onChange, setNumberValue, step, numberValue, handleMinMax]
-  );
+    // Allow negative sign, empty string, or single decimal point for user flexibility
+    if (inputValue === '-' || inputValue === '' || inputValue === '.') {
+      setNumberValue(inputValue);
+      return;
+    }
 
-  const handleDecrement = useCallback(
-    e => {
-      const newNum = handleMinMax(Number(numberValue) - step);
-      setNumberValue(newNum);
-      onChange(newNum);
-    },
-    [onChange, setNumberValue, step, numberValue, handleMinMax]
-  );
+    const number = Number(inputValue);
+
+    // Filter out invalid inputs like 'NaN'
+    if (!isNaN(number)) {
+      updateValue(number);
+    }
+  };
+
+  const updateValue = (val: number) => {
+    const newValue = handleMinMax(val);
+    setNumberValue(newValue);
+    onChange(newValue);
+  };
+
+  const increment = () => updateValue(numberValue + step);
+  const decrement = () => updateValue(numberValue - step);
 
   return (
-    <div className={'flex flex-1 flex-col'}>
+    <div className="flex flex-1 flex-col">
       {label && (
         <Label
           className={labelClassName}
           text={label}
-        ></Label>
+        />
       )}
       <div
         className={`border-secondary-light flex items-center justify-center overflow-hidden rounded-md border-2 bg-black px-1 ${
           sizesClasses[size]
-        } ${className ? className : ''}`}
+        } ${className || ''}`}
+        style={{ width: containerWidth }}
       >
         <div className="flex">
           <input
-            type="text"
+            type="number"
             value={numberValue}
+            step={step}
             onChange={handleChange}
-            className={`input-number w-full bg-black text-center text-[12px] text-white`}
+            className={'input-number w-full bg-black text-center text-[12px] text-white'}
+            style={{ width: inputWidth }}
           />
-
-          <div className="up-arrowsize flex flex-col items-center justify-around">
-            <IconButton
-              id={'down-arrow-icon'}
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="rotate-180 transform text-[#726f7e]"
-              onClick={handleIncrement}
-            >
-              <Icon name="ui-arrow-down" />
-            </IconButton>
-            <IconButton
-              id={'down-arrow-icon'}
-              variant="text"
-              color="inherit"
-              size="initial"
-              className="text-[#726f7e]"
-              onClick={handleDecrement}
-            >
-              <Icon name="ui-arrow-down" />
-            </IconButton>
-          </div>
+          {showAdjustmentArrows && (
+            <div className="up-arrowsize flex flex-col items-center justify-around">
+              <ArrowButton
+                onClick={increment}
+                rotate
+              />
+              <ArrowButton onClick={decrement} />
+            </div>
+          )}
         </div>
       </div>
     </div>
   );
 };
 
+const ArrowButton = ({ onClick, rotate = false }: { onClick: () => void; rotate?: boolean }) => (
+  <IconButton
+    id="arrow-icon"
+    variant="text"
+    color="inherit"
+    size="initial"
+    className={`text-[#726f7e] ${rotate ? 'rotate-180 transform' : ''}`}
+    onClick={onClick}
+  >
+    <Icon name="ui-arrow-down" />
+  </IconButton>
+);
+
 export default InputNumber;

platform/ui/src/components/InputNumber/__stories__/inputNumber.stories.mdx

@@ -35,8 +35,11 @@ InputNumber is a component that allows you to use as a number value
     name="Overview"
     args={{
       step: 1,
-      value: 3,
+      value: 1000,
+      minValue: 0,
+      maxValue: 1000,
       size: 'sm',
+      showAdjustmentArrows: true,
       onChange: () => console.log('input range change'),
     }}
   >