Feature/#216 create input stepper component

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

@@ -18,3 +18,4 @@ export * from './loading-indicator';
 export * from './videoconference';
 export * from './togglelightdark-shape';
 export * from './gauge/gauge';
+export * from './input-with-stepper';

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

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

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

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+
+type MustBeANumberError = 'You must enter a number';
+
+interface handleCounterInputWithStepperHook {
+  valueToString: string | MustBeANumberError;
+  handleIncrement: () => void;
+  handleDecrement: () => void;
+  isTextANumber: boolean;
+}
+
+const MUST_BE_A_NUMBER: MustBeANumberError = 'You must enter a number';
+
+export const useHandleCounterInputWithStepper = (
+  text: string
+): handleCounterInputWithStepperHook => {
+  const [value, setValue] = React.useState<number | MustBeANumberError>(0);
+
+  const textToNumber = parseInt(text);
+
+  const isTextANumber: boolean = !isNaN(textToNumber);
+
+  useEffect(() => {
+    if (isTextANumber) {
+      setValue(textToNumber);
+    } else {
+      setValue(MUST_BE_A_NUMBER);
+    }
+  }, [text]);
+
+  const handleIncrement = () => {
+    if (typeof value === 'number') {
+      setValue(value + 1);
+    }
+  };
+
+  const handleDecrement = () => {
+    if (typeof value === 'number') {
+      if (value === 0) return;
+      setValue(value - 1);
+    }
+  };
+
+  const valueToString: string =
+    typeof value === 'string' ? value : value.toString();
+
+  return {
+    valueToString,
+    handleIncrement,
+    handleDecrement,
+    isTextANumber,
+  };
+};
+
+export const handleButtonWidth = (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;
+};

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

@@ -0,0 +1,176 @@
+import { forwardRef } from 'react';
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { ShapeType } from '../../../../../core/model/index';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { useShapeComponentSelection } from '../../../shapes/use-shape-selection.hook';
+import { ShapeProps } from '../../shape.model';
+import {
+  handleButtonWidth,
+  useHandleCounterInputWithStepper,
+} from './input-with-stepper.business';
+import { INPUT_SHAPE } from '../../front-components/shape.const';
+import { KonvaEventObject } from 'konva/lib/Node';
+import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../../mock-components.utils';
+
+const inputWithStepperSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 60,
+  minHeight: 35,
+  maxWidth: 500,
+  maxHeight: 35,
+  defaultWidth: 100,
+  defaultHeight: 35,
+};
+
+export const getInputWithStepperSizeRestrictions = (): ShapeSizeRestrictions =>
+  inputWithStepperSizeRestrictions;
+
+const shapeType: ShapeType = 'inputWithStepper';
+
+export const InputWithStepperShape = forwardRef<any, ShapeProps>(
+  (props, ref) => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      id,
+      text,
+      onSelected,
+      otherProps,
+      ...shapeProps
+    } = props;
+
+    const restrictedSize = fitSizeToShapeSizeRestrictions(
+      inputWithStepperSizeRestrictions,
+      width,
+      height
+    );
+    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+    const { handleSelection } = useShapeComponentSelection(props, shapeType);
+
+    const handleDoubleClickInButtons = (e: KonvaEventObject<MouseEvent>) =>
+      (e.cancelBubble = true);
+
+    const {
+      valueToString: value,
+      handleIncrement,
+      handleDecrement,
+      isTextANumber,
+    } = useHandleCounterInputWithStepper(text);
+
+    const { stroke, strokeStyle, fill, textColor } = useShapeProps(
+      otherProps,
+      INPUT_SHAPE
+    );
+
+    // Reservar espacio para el stepper
+    const buttonWidth = handleButtonWidth(restrictedWidth);
+    const buttonHeight = restrictedHeight / 2;
+
+    const commonGroupProps = useGroupShapeProps(
+      props,
+      restrictedSize,
+      shapeType,
+      ref
+    );
+
+    return (
+      <Group {...commonGroupProps} {...shapeProps} onClick={handleSelection}>
+        {/* Caja del input */}
+        <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={isTextANumber ? value : ''}
+          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={0}
+          onClick={handleIncrement}
+          onDblClick={handleDoubleClickInButtons}
+        >
+          <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>
+
+        {/* Botón de decremento (flecha abajo) */}
+        <Group
+          x={restrictedWidth - buttonWidth}
+          y={buttonHeight}
+          onClick={handleDecrement}
+          onDblClick={handleDoubleClickInButtons}
+        >
+          <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>
+        {!isTextANumber && (
+          <Group x={0} y={40}>
+            <Text
+              x={0}
+              y={0}
+              text={value}
+              fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
+              fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
+              fill="gray"
+            />
+          </Group>
+        )}
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -68,6 +68,7 @@ export type ShapeType =
   | 'appBar'
   | 'buttonBar'
   | 'tooltip'
+  | 'inputWithStepper'
   | 'slider'
   | 'chip'
   | 'link'
@@ -137,6 +138,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   buttonBar: 'Button Bar',
   tooltip: 'Tooltip',
   slider: 'Slider',
+  inputWithStepper: 'Input With Stepper',
   chip: 'Chip',
   richtext: 'Rich Text',
   cilinder: 'Cilinder',

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

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

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

@@ -260,6 +260,15 @@ export const generateDefaultOtherProps = (
         textColor: '#000000',
         strokeStyle: [],
       };
+    case 'inputWithStepper':
+      return {
+        stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        disabled: INPUT_SHAPE.DEFAULT_DISABLED,
+        strokeStyle: [],
+      };
     default:
       return undefined;
   }

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

@@ -156,6 +156,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   gauge: getGaugeShapeSizeRestrictions,
   imagePlaceholder: getImagePlaceholderShapeSizeRestrictions,
   chip: getChipShapeSizeRestrictions,
+  inputWithStepper: getChipShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

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

@@ -78,6 +78,8 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
       return [];
     case 'image':
       return ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+    case 'inputWithStepper':
+      return ['middle-left', 'middle-right'];
     default:
       return [
         'top-left',

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

@@ -48,6 +48,7 @@ import {
   renderCalendar,
   renderAppBar,
   renderLoadingIndicator,
+  renderInputWithStepper,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -206,6 +207,8 @@ export const renderShapeComponent = (
       return renderImagePlaceHolder(shape, shapeRenderedProps);
     case 'chip':
       return renderChip(shape, shapeRenderedProps);
+    case 'inputWithStepper':
+      return renderInputWithStepper(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -15,6 +15,7 @@ export * from './pie-chart.renderer';
 export * from './gauge.renderer';
 export * from './table.renderer';
 export * from './tabsbar.renderer';
+export * from './input-with-stepper.renderer';
 export * from './vertical-menu.renderer';
 export * from './video-player.renderer';
 export * from './audio-player.renderer';

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

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

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

@@ -30,6 +30,10 @@ export const mockRichComponentsCollection: ItemInfo[] = [
   { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
   { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/tabsbar.svg', type: 'tabsBar' },
+  {
+    thumbnailSrc: '/rich-components/input-with-stepper.svg',
+    type: 'inputWithStepper',
+  },
   { thumbnailSrc: '/widgets/togglelightdark.svg', type: 'toggleLightDark' },
   { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
   {