Feature/#216 create input stepper component

src/common/components/front-components/input-shape.tsx

@@ -10,10 +10,10 @@ import { useShapeProps } from '../shapes/use-shape-props.hook';
 const inputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 60,
   minHeight: 38,
-  maxWidth: -1,
+  maxWidth: 2000,
   maxHeight: 38,
-  defaultWidth: INPUT_SHAPE.DEFAULT_TEXT_WIDTH,
-  defaultHeight: INPUT_SHAPE.DEFAULT_TEXT_HEIGHT,
+  defaultWidth: 155,
+  defaultHeight: 38,
 };
 
 export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions =>

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

@@ -13,3 +13,4 @@ export * from './modal/modal';
 export * from './appBar';
 export * from './buttonBar/buttonBar';
 export * from './tabsbar';
+export * from './input-with-stepper/';

src/common/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/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/front-rich-components/input-with-stepper/input-with-stepper.tsx

@@ -0,0 +1,182 @@
+import { forwardRef, useMemo } 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 '../../front-components/shape.model';
+import {
+  handleButtonWidth,
+  useHandleCounterInputWithStepper,
+} from './input-with-stepper.business';
+import { INPUT_SHAPE } from '../../front-components/shape.const';
+import { KonvaEventObject } from 'konva/lib/Node';
+
+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, otherProps, ...shapeProps } = props;
+
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        inputWithStepperSizeRestrictions,
+        width,
+        height
+      );
+
+    const { handleSelection } = useShapeComponentSelection(props, shapeType);
+
+    const handleDoubleClickInButtons = (e: KonvaEventObject<MouseEvent>) =>
+      (e.cancelBubble = true);
+
+    const {
+      valueToString: value,
+      handleIncrement,
+      handleDecrement,
+      isTextANumber,
+    } = useHandleCounterInputWithStepper(text);
+
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+      [otherProps?.backgroundColor]
+    );
+
+    const textColor = useMemo(
+      () => otherProps?.textColor ?? INPUT_SHAPE.DEFAULT_FILL_TEXT,
+      [otherProps?.textColor]
+    );
+
+    const strokeStyle = useMemo(
+      () => otherProps?.strokeStyle ?? [],
+      [otherProps?.strokeStyle]
+    );
+
+    // Reservar espacio para el stepper
+    const buttonWidth = handleButtonWidth(restrictedWidth);
+    const buttonHeight = restrictedHeight / 2;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        ref={ref}
+        onClick={handleSelection}
+        {...shapeProps}
+      >
+        {/* 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>
+    );
+  }
+);
+
+export default InputWithStepperShape;

src/core/model/index.ts

@@ -64,6 +64,7 @@ export type ShapeType =
   | 'appBar'
   | 'buttonBar'
   | 'tooltip'
+  | 'inputWithStepper'
   | 'slider';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
@@ -119,6 +120,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   buttonBar: 'Button Bar',
   tooltip: 'Tooltip',
   slider: 'Slider',
+  inputWithStepper: 'Input With Stepper',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/canvas.model.ts

@@ -61,6 +61,7 @@ import {
   getAppBarShapeSizeRestrictions,
   getButtonBarShapeSizeRestrictions,
   getTabsBarShapeSizeRestrictions,
+  getInputWithStepperSizeRestrictions,
 } from '@/common/components/front-rich-components';
 import {
   getHeading1SizeRestrictions,
@@ -181,6 +182,8 @@ export const getSizeRestrictionFromShape = (
       return getTooltipShapeSizeRestrictions();
     case 'slider':
       return getSliderShapeSizeRestrictions();
+    case 'inputWithStepper':
+      return getInputWithStepperSizeRestrictions();
     default:
       console.warn(
         `** Shape ${shapeType} has not defined default size, check getDefaultSizeFromShape helper function`
@@ -238,6 +241,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
     case 'buttonBar':
     case 'tabsBar':
     case 'tooltip':
+    case 'inputWithStepper':
       return true;
     default:
       return false;
@@ -269,6 +273,7 @@ const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'appBar':
     case 'buttonBar':
     case 'slider':
+    case 'inputWithStepper':
       return ['middle-left', 'middle-right'];
     case 'verticalScrollBar':
       return ['top-center', 'bottom-center'];
@@ -343,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;
   }
@@ -376,6 +383,13 @@ export const generateDefaultOtherProps = (
   shapeType: ShapeType
 ): OtherProps | undefined => {
   switch (shapeType) {
+    case 'inputWithStepper':
+      return {
+        stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
+      };
     case 'input':
       return {
         stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,

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

@@ -40,6 +40,7 @@ import {
   renderModal,
   renderButtonBar,
   renderTabsBar,
+  renderInputWithStepper,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -170,6 +171,8 @@ export const renderShapeComponent = (
       return renderTooltip(shape, shapeRenderedProps);
     case 'slider':
       return renderSlider(shape, shapeRenderedProps);
+    case 'inputWithStepper':
+      return renderInputWithStepper(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -13,3 +13,4 @@ export * from './modal.renderer';
 export * from './appBar.renderer';
 export * from './button-bar.renderer';
 export * from './tabsbar.renderer';
+export * from './input-with-stepper.renderer';