create getTextFieldWidth business function

Author: antonio06

src/common/components/mock-components/front-rich-components/input-stepper/index.ts

@@ -0,0 +1 @@
+export * from './input-stepper';

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

@@ -0,0 +1,13 @@
+export const getTextFieldWidth = (restrictedWidth: number): number => {
+  const inputWidth = restrictedWidth * 0.3;
+  const minInputWidth = 30;
+  const maxInputWidth = 70;
+
+  if (inputWidth < minInputWidth) {
+    return minInputWidth;
+  } else if (inputWidth > maxInputWidth) {
+    return maxInputWidth;
+  }
+
+  return inputWidth;
+};

…/front-rich-components/input-stepper.tsx …mponents/input-stepper/input-stepper.tsxsrc/common/components/mock-components/front-rich-components/input-stepper.tsx renamed to src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx src/common/components/mock-components/front-rich-components/input-stepper.tsx renamed to src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx

@@ -1,12 +1,13 @@
 import { forwardRef } from 'react';
 import { Group, Rect, Text } from 'react-konva';
 import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { useGroupShapeProps } from '../mock-components.utils';
+import { useGroupShapeProps } from '../../mock-components.utils';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeType } from '@/core/model';
-import { ShapeProps } from '../shape.model';
-import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { INPUT_SHAPE } from '../front-components/shape.const';
+import { ShapeProps } from '../../shape.model';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+import { INPUT_SHAPE } from '../../front-components/shape.const';
+import { getTextFieldWidth } from './input-stepper.business';
 
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
@@ -49,17 +50,7 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth } = restrictedSize;
 
-  const getInputWidth = (restrictedWidth: number): number => {
-    const inputWidth = restrictedWidth * 0.3;
-    const minInputWidth = 30;
-    const maxInputWidth = 70;
-
-    if (inputWidth < minInputWidth) return minInputWidth;
-    if (inputWidth > maxInputWidth) return maxInputWidth;
-    return inputWidth;
-  };
-
-  const a = getInputWidth(restrictedWidth);
+  const textFieldWidth = getTextFieldWidth(restrictedWidth);
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
@@ -78,9 +69,9 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
       {/* Texto del input */}
       <Text
-        x={0} // Alinear a la derecha
+        x={0}
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth - a - 8}
+        width={restrictedWidth - textFieldWidth - 8}
         text={text}
         fontFamily="Arial"
         fontSize={16}

src/pods/canvas/model/shape-size.mapper.ts

@@ -1,6 +1,6 @@
 // src/common/shape-utils/shapeSizeMap.ts
 import { ShapeType, ShapeSizeRestrictions } from '@/core/model';
-import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper';
+import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
 import {
   getButtonShapeSizeRestrictions,
   getCheckboxShapeSizeRestrictions,

src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx

@@ -1,4 +1,4 @@
-import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper';
+import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
 import { ShapeRendererProps } from '../model';
 import { ShapeModel } from '@/core/model';