Feature/#216 create an input stepper component (place it under rich components)

src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx

@@ -10,7 +10,6 @@ import {
   splitCSVContentIntoRows,
 } from '@/common/utils/active-element-selector.utils';
 import { useGroupShapeProps } from '../../mock-components.utils';
-import { useResizeOnFontSizeChange } from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook';
 
 const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
@@ -42,7 +41,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
   const csvData = splitCSVContentIntoRows(text);
   const headers = extractCSVHeaders(csvData[0]);
   const itemLabels = headers.map(header => header.text);
-  const verticalPadding = 8;
+
   const numberOfItems = itemLabels.length;
   const itemSpacing = 10;
 
@@ -55,15 +54,10 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
   const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
   const itemWidth = totalMargins / numberOfItems;
 
-  const {
-    stroke,
-    strokeStyle,
-    fill,
-    textColor,
-    borderRadius,
-    fontSize,
-    fontVariant,
-  } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
   const itemVerticalPadding = 4;
 
@@ -75,7 +69,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     shapeType,
     ref
   );
-  useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant);
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Rect
@@ -96,21 +90,20 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
             x={itemSpacing * (index + 1) + itemWidth * index}
             y={itemVerticalPadding}
             width={itemWidth}
-            height={restrictedHeight - verticalPadding}
+            height={restrictedHeight - 2 * itemVerticalPadding}
             fill={index === activeSelected ? 'lightblue' : fill}
           />
           <Text
             x={itemSpacing * (index + 1) + itemWidth * index}
-            y={restrictedHeight / 2 - fontSize / 2}
+            y={restrictedHeight / 2 - 8}
             text={header}
             fontFamily="Arial"
-            fontSize={fontSize}
+            fontSize={16}
             fill={textColor}
             width={itemWidth}
             align="center"
             wrap="none"
             ellipsis={true}
-            fontVariant={fontVariant}
           />
         </Group>
       ))}

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

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './breadcrumb/breadcrumb';
 export * from './pie-chart';
 export * from './horizontal-menu/horizontal-menu';
+export * from './input-stepper';
 export * from './map-chart';
 export * from './video-player';
 export * from './bar-chart';

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

@@ -0,0 +1,127 @@
+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 { 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';
+
+// Size restrictions (igual patrón que file-tree)
+export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 80,
+  minHeight: 24,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 120,
+  defaultHeight: 32,
+};
+
+export const getInputStepperShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  inputStepperShapeRestrictions;
+
+export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, text, onSelect, otherProps, id, ...shapeProps } =
+    props;
+
+  const inputWidth = width - 30; // Reservar espacio para el stepper
+  const buttonHeight = height / 2;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    inputStepperShapeRestrictions,
+    width,
+    height
+  );
+
+  const shapeType: ShapeType = 'input-stepper';
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+  const { stroke, textColor, strokeStyle, fill, strokeWidth } = useShapeProps(
+    otherProps,
+    INPUT_SHAPE
+  );
+
+  const { width: restrictedWidth } = restrictedSize;
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      {/* Caja del input */}
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={height}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        dash={strokeStyle}
+        cornerRadius={0} // Sin bordes redondeados
+      />
+
+      {/* Texto del input */}
+      <Text
+        x={0} // Alinear a la derecha
+        y={height / 2 - 8} // Centrar verticalmente
+        width={restrictedWidth}
+        text={text}
+        fontFamily="Arial"
+        fontSize={16}
+        fill={textColor}
+        align="center"
+        wrap="none"
+      />
+
+      {/* Botón de incremento (flecha arriba) */}
+      <Group x={inputWidth} y={0}>
+        <Rect
+          x={0}
+          y={0}
+          width={30}
+          height={buttonHeight}
+          fill="lightgrey"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          dash={strokeStyle}
+        />
+        <Text
+          x={10}
+          y={buttonHeight / 2 - 8}
+          text="▲"
+          fontFamily="Arial"
+          fontSize={14}
+          fill={textColor}
+        />
+      </Group>
+
+      {/* Botón de decremento (flecha abajo) */}
+      <Group x={inputWidth} y={buttonHeight}>
+        <Rect
+          x={0}
+          y={0}
+          width={30}
+          height={buttonHeight}
+          fill="lightgrey"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          dash={strokeStyle}
+        />
+        <Text
+          x={10}
+          y={buttonHeight / 2 - 8}
+          text="▼"
+          fontFamily="Arial"
+          fontSize={14}
+          fill={textColor}
+        />
+      </Group>
+    </Group>
+  );
+});
+
+export default InputWithStepper;

src/core/model/index.ts

@@ -38,6 +38,7 @@ export type ShapeType =
   | 'accordion'
   | 'pie'
   | 'horizontal-menu'
+  | 'input-stepper'
   | 'breadcrumb'
   | 'map'
   | 'circle'
@@ -130,6 +131,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   link: 'Link',
   triangle: 'Triangle',
   'horizontal-menu': 'Horizontal Menu',
+  'input-stepper': 'Input Stepper',
   largeArrow: 'Large Arrow',
   icon: 'Icon',
   bar: 'Bar Chart',
@@ -238,3 +240,8 @@ export interface ShapeModel {
   text?: string;
   otherProps?: OtherProps;
 }
+
+export interface inputStepper {
+  id: string;
+  min: number;
+}

src/pods/canvas/model/inline-editable.model.ts

@@ -40,6 +40,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'gauge',
   'loading-indicator',
   'fileTree',
+  'input-stepper',
 ]);
 
 // Check if a shape type allows inline editing
@@ -62,6 +63,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'listbox',
   'horizontal-menu',
   'vertical-menu',
+  'input-stepper',
   'heading1',
   'heading2',
   'heading3',
@@ -125,6 +127,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   browser: 'https://example.com',
   modalDialog: 'Title here...',
   'loading-indicator': 'Loading...',
+  'input-stepper': '0',
 };
 
 export const generateDefaultTextValue = (

src/pods/canvas/model/shape-other-props.utils.ts

@@ -48,8 +48,13 @@ export const generateDefaultOtherProps = (
         strokeStyle: [],
         borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
         activeElement: 0,
-        fontSize: FONT_SIZE_VALUES.NORMALTEXT,
-        fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
+      };
+    case 'input-stepper':
+      return {
+        stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
       };
     case 'datepickerinput':
     case 'timepickerinput':

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

@@ -1,5 +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 {
   getButtonShapeSizeRestrictions,
   getCheckboxShapeSizeRestrictions,
@@ -128,6 +129,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   postit: getPostItShapeSizeRestrictions,
   pie: getPieChartShapeSizeRestrictions,
   'horizontal-menu': getHorizontalMenuShapeSizeRestrictions,
+  'input-stepper': getInputStepperShapeSizeRestrictions,
   'vertical-menu': getVerticalMenuShapeSizeRestrictions,
   breadcrumb: getBreadcrumbShapeSizeRestrictions,
   map: getMapChartShapeSizeRestrictions,
@@ -172,9 +174,9 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   rectangleLow: getRectangleLowShapeRestrictions,
   circleLow: getCircleLowShapeSizeRestrictions,
   textScribbled: getTextScribbledShapeRestrictions,
-  paragraphScribbled: getParagraphScribbledShapeRestrictions,
   fabButton: getFabButtonShapeSizeRestrictions,
   fileTree: getFileTreeShapeSizeRestrictions,
+  paragraphScribbled: getParagraphScribbledShapeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/model/transformer.model.ts

@@ -71,6 +71,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'buttonBar':
     case 'slider':
     case 'chip':
+    case 'input-stepper':
       return ['middle-left', 'middle-right'];
     case 'verticalLine':
     case 'verticalScrollBar':

src/pods/canvas/shape-renderer/index.tsx

@@ -29,6 +29,7 @@ import {
 } from './simple-container';
 import {
   renderVideoPlayer,
+  renderInputStepper,
   renderAccordion,
   renderHorizontalMenu,
   renderPieChart,
@@ -153,6 +154,8 @@ export const renderShapeComponent = (
       return renderTriangle(shape, shapeRenderedProps);
     case 'horizontal-menu':
       return renderHorizontalMenu(shape, shapeRenderedProps);
+    case 'input-stepper':
+      return renderInputStepper(shape, shapeRenderedProps);
     case 'vertical-menu':
       return renderVerticalMenuShape(shape, shapeRenderedProps);
     case 'breadcrumb':

src/pods/canvas/shape-renderer/simple-rich-components/index.ts

@@ -6,6 +6,7 @@ export * from './breadcrumb.renderer';
 export * from './button-bar.renderer';
 export * from './calendar.renderer';
 export * from './horizontal-menu.renderer';
+export * from './input-stepper.renderer';
 export * from './line-chart.renderer';
 export * from './map-chart.renderer';
 export * from './table.renderer';

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

@@ -0,0 +1,32 @@
+import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderInputStepper = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <InputWithStepper
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      draggable
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      initialValue={0}
+      typeOfTransformer={shape.typeOfTransformer}
+      text={shape.text}
+      otherProps={shape.otherProps}
+    />
+  );
+};

src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts

@@ -44,4 +44,8 @@ export const mockRichComponentsCollection: ItemInfo[] = [
     thumbnailSrc: '/rich-components/file-tree.svg',
     type: 'fileTree',
   },
+  {
+    thumbnailSrc: '/rich-components/input-stepper.svg',
+    type: 'input-stepper',
+  },
 ];