Feature/temporal create an input stepper component

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

@@ -20,3 +20,4 @@ export * from './togglelightdark-shape';
 export * from './gauge/gauge';
 export * from './fab-button/fab-button';
 export * from './file-tree/file-tree';
+export * from './input-stepper';

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

@@ -0,0 +1,144 @@
+import { forwardRef } from 'react';
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { ShapeProps } from '../shape.model';
+import { useGroupShapeProps } from '../mock-components.utils';
+import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
+import { INPUT_SHAPE } from '../front-components/shape.const';
+
+const InputStepperShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 60,
+  minHeight: 35,
+  maxWidth: 500,
+  maxHeight: 35,
+  defaultWidth: 100,
+  defaultHeight: 35,
+};
+
+export const getInputStepperShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  InputStepperShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'inputStepper';
+
+export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    text,
+    onSelected,
+    otherProps,
+    ...shapeProps
+  } = props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    InputStepperShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const getButtonWidth = (restrictedWidth: number): number => {
+    const buttonWidth = restrictedWidth * 0.3;
+    const minButtonWidth = 30;
+    const maxButtonWidth = 70;
+
+    if (buttonWidth < minButtonWidth) return minButtonWidth;
+    if (buttonWidth > maxButtonWidth) return maxButtonWidth;
+    return buttonWidth;
+  };
+
+  const buttonWidth = getButtonWidth(restrictedWidth);
+  const buttonHeight = restrictedHeight / 2;
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  const { stroke, strokeStyle, fill, textColor } = useShapeProps(
+    otherProps,
+    INPUT_SHAPE
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth - buttonWidth}
+        height={restrictedHeight}
+        fill={fill}
+        stroke={stroke}
+        strokeWidth={2}
+        dash={strokeStyle}
+      />
+
+      {/* Texto del input */}
+      <Text
+        width={restrictedWidth - buttonWidth - 8}
+        x={0} // Alinear a la derecha dependiendo de la cantidad de dígitos
+        y={restrictedHeight / 2 - 6} // Centrar verticalmente
+        text={text}
+        fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
+        fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE + 2}
+        fill={textColor}
+        align="right"
+      />
+
+      {/* Botón de incremento (flecha arriba) */}
+      <Group x={restrictedWidth - buttonWidth} y={buttonHeight}>
+        <Rect
+          x={0}
+          y={-17}
+          width={buttonWidth}
+          height={buttonHeight}
+          fill={fill}
+          stroke={stroke}
+          strokeWidth={2}
+          dash={strokeStyle}
+        />
+        <Text
+          x={buttonWidth / 2 - 7}
+          y={buttonHeight / 2 - 25}
+          text="▲"
+          fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
+          fill={textColor}
+          align="center"
+        />
+      </Group>
+
+      {/* Botón de decremento (flecha abajo) */}
+      <Group x={restrictedWidth - buttonWidth} y={buttonHeight}>
+        <Rect
+          x={0}
+          y={0}
+          width={buttonWidth}
+          height={buttonHeight}
+          fill={fill}
+          stroke={stroke}
+          strokeWidth={2}
+          dash={strokeStyle}
+        />
+        <Text
+          x={buttonWidth / 2 - 6}
+          y={buttonHeight / 2 - 6}
+          text="▼"
+          fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
+          fill={textColor}
+          align="center"
+        />
+      </Group>
+    </Group>
+  );
+});
+
+export default InputStepperShape;

src/core/model/index.ts

@@ -86,7 +86,8 @@ export type ShapeType =
   | 'textScribbled'
   | 'paragraphScribbled'
   | 'fabButton'
-  | 'fileTree';
+  | 'fileTree'
+  | 'inputStepper';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -162,6 +163,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   paragraphScribbled: 'Paragraph Scribbled',
   fabButton: 'Fab Button',
   fileTree: 'File Tree',
+  inputStepper: 'Input Stepper',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

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

@@ -84,6 +84,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'loading-indicator',
   'gauge',
   'fileTree',
+  'inputStepper',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -125,6 +126,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   browser: 'https://example.com',
   modalDialog: 'Title here...',
   'loading-indicator': 'Loading...',
+  inputStepper: '0',
 };
 
 export const generateDefaultTextValue = (

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

@@ -287,6 +287,13 @@ export const generateDefaultOtherProps = (
         textColor: '#000000',
         strokeStyle: [],
       };
+    case 'inputStepper':
+      return {
+        stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
+      };
     default:
       return undefined;
   }

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

@@ -66,6 +66,7 @@ import {
   getGaugeShapeSizeRestrictions,
   getFabButtonShapeSizeRestrictions,
   getFileTreeShapeSizeRestrictions,
+  getInputStepperShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -175,6 +176,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   paragraphScribbled: getParagraphScribbledShapeRestrictions,
   fabButton: getFabButtonShapeSizeRestrictions,
   fileTree: getFileTreeShapeSizeRestrictions,
+  inputStepper: getInputStepperShapeSizeRestrictions,
 };
 
 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 'inputStepper':
       return ['middle-left', 'middle-right'];
     case 'verticalLine':
     case 'verticalScrollBar':

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

@@ -50,6 +50,7 @@ import {
   renderLoadingIndicator,
   renderFabButton,
   renderFileTree,
+  renderInputStepper,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -235,6 +236,8 @@ export const renderShapeComponent = (
       return renderTextScribbled(shape, shapeRenderedProps);
     case 'paragraphScribbled':
       return renderParagraphScribbled(shape, shapeRenderedProps);
+    case 'inputStepper':
+      return renderInputStepper(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -22,3 +22,4 @@ export * from './loading-indicator.renderer';
 export * from './videoconference.renderer';
 export * from './fab-button.renderer';
 export * from './file-tree.renderer';
+export * from './input-stepper.renderer';

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

@@ -0,0 +1,34 @@
+import { InputStepperShape } from '@/common/components/mock-components/front-rich-components';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderInputStepper = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <InputStepperShape
+      id={shape.id}
+      key={shape.id}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      name="shape"
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      ref={shapeRefs.current[shape.id]}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      editType={shape.editType}
+      isEditable={true}
+      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: 'inputStepper',
+  },
 ];