..

src/common/components/front-rich-components/input-with-stepper/input-with-stepper.business.ts

@@ -1,8 +1,6 @@
 import React, { useEffect } from 'react';
 
-type MustBeANumberError =
-  | 'You must enter a number'
-  | 'You must enter a integer number';
+type MustBeANumberError = 'You must enter a number';
 
 interface handleCounterInputWithStepperHook {
   valueToString: string | MustBeANumberError;
@@ -18,11 +16,13 @@ export const useHandleCounterInputWithStepper = (
 ): handleCounterInputWithStepperHook => {
   const [value, setValue] = React.useState<number | MustBeANumberError>(0);
 
-  const isTextANumber: boolean = !isNaN(parseInt(text));
+  const textToNumber = parseInt(text);
+
+  const isTextANumber: boolean = !isNaN(textToNumber);
 
   useEffect(() => {
     if (isTextANumber) {
-      setValue(parseInt(text));
+      setValue(textToNumber);
     } else {
       setValue(MUST_BE_A_NUMBER);
     }
@@ -55,7 +55,7 @@ export const useHandleCounterInputWithStepper = (
 export const adjustAlignmentByDigitCount = (
   value: string | MustBeANumberError
 ): number => {
-  const valueToNumber = Number(value);
+  const valueToNumber = parseInt(value);
 
   const pixelsToMove = 20;
 

src/common/components/front-rich-components/input-with-stepper/input-with-stepper.tsx

@@ -14,7 +14,7 @@ import { INPUT_SHAPE } from '../../front-components/shape.const';
 const inputWithStepperSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 70,
   minHeight: 30,
-  maxWidth: 250,
+  maxWidth: 500,
   maxHeight: 30,
   defaultWidth: 150,
   defaultHeight: 30,
@@ -65,7 +65,7 @@ export const InputWithStepperShape = forwardRef<any, ShapeProps>(
       [otherProps?.strokeStyle]
     );
 
-    const inputWidth = restrictedWidth * 0.8; // Reservar espacio para el stepper
+    const inputWidth = restrictedWidth - 30; // Reservar espacio para el stepper
     const buttonWidth = restrictedWidth * 0.2;
     const buttonHeight = restrictedHeight / 2;
 

src/pods/canvas/canvas.model.ts

@@ -298,8 +298,6 @@ const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
 
 const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
   switch (shapeType) {
-    case 'inputWithStepper':
-      return '0';
     case 'input':
       return 'Placeholder';
     case 'label':
@@ -350,6 +348,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return 'Button 1, Button 2, Button 3';
     case 'tabsBar':
       return 'Tab 1, Tab 2, Tab 3';
+    case 'inputWithStepper':
+      return '0';
     default:
       return undefined;
   }