From 25a09d14d7531e8bdd9795c6ecb41efa2bbb7b64 Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Mon, 13 Oct 2025 16:56:25 +0200 Subject: [PATCH 1/8] input stepper --- public/rich-components/input-stepper.svg | 15 +++ .../front-rich-components/index.ts | 1 + .../front-rich-components/input-stepper.tsx | 114 ++++++++++++++++++ src/core/model/index.ts | 7 ++ src/pods/canvas/model/shape-size.mapper.ts | 4 +- src/pods/canvas/shape-renderer/index.tsx | 3 + .../simple-rich-components/index.ts | 1 + .../input-stepper.renderer.tsx | 29 +++++ .../rich-components-gallery-data/index.ts | 4 + 9 files changed, 177 insertions(+), 1 deletion(-) create mode 100644 public/rich-components/input-stepper.svg create mode 100644 src/common/components/mock-components/front-rich-components/input-stepper.tsx create mode 100644 src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx diff --git a/public/rich-components/input-stepper.svg b/public/rich-components/input-stepper.svg new file mode 100644 index 00000000..be747f48 --- /dev/null +++ b/public/rich-components/input-stepper.svg @@ -0,0 +1,15 @@ + + + + + + 0 + + + + ▲ + + + + ▼ + \ No newline at end of file diff --git a/src/common/components/mock-components/front-rich-components/index.ts b/src/common/components/mock-components/front-rich-components/index.ts index b1e5f180..0ef87edb 100644 --- a/src/common/components/mock-components/front-rich-components/index.ts +++ b/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'; diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx new file mode 100644 index 00000000..9e81e4fa --- /dev/null +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -0,0 +1,114 @@ +import { useState, forwardRef } from 'react'; +import { Group, Rect, Text } from 'react-konva'; +import { ShapeConfig } from 'konva/lib/Shape'; +import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; + +interface InputWithStepperProps extends ShapeConfig { + id: string; + x: number; + y: number; + width: number; + height: number; + initialValue?: number; +} + +// 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( + ({ x, y, width, height, initialValue = 0, id, ...shapeProps }, ref) => { + const [value, setValue] = useState(initialValue); + + const handleIncrement = () => { + setValue(value + 1); + }; + + const handleDecrement = () => { + setValue(value - 1); + }; + + const inputWidth = width - 30; // Reservar espacio para el stepper + const buttonHeight = height / 2; + + return ( + + {/* Caja del input */} + + + {/* Texto del input */} + + + {/* Botón de incremento (flecha arriba) */} + + + + + + {/* Botón de decremento (flecha abajo) */} + + + + + + ); + } +); + +export default InputWithStepper; diff --git a/src/core/model/index.ts b/src/core/model/index.ts index bf189305..f2dbc4b4 100644 --- a/src/core/model/index.ts +++ b/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 = { 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; +} diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index 3c4ea531..19dcbf18 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/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 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 ShapeSizeRestrictions> = { rectangleLow: getRectangleLowShapeRestrictions, circleLow: getCircleLowShapeSizeRestrictions, textScribbled: getTextScribbledShapeRestrictions, - paragraphScribbled: getParagraphScribbledShapeRestrictions, fabButton: getFabButtonShapeSizeRestrictions, fileTree: getFileTreeShapeSizeRestrictions, + paragraphScribbled: getParagraphScribbledShapeRestrictions, }; export default shapeSizeMap; diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index 37a59949..62cdc417 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/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': diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/index.ts b/src/pods/canvas/shape-renderer/simple-rich-components/index.ts index 2a32d3d1..48b03e78 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/index.ts +++ b/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'; diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx new file mode 100644 index 00000000..fd1ab8ac --- /dev/null +++ b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx @@ -0,0 +1,29 @@ +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 ( + + ); +}; diff --git a/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts b/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts index b44eee90..a96a8ca5 100644 --- a/src/pods/galleries/rich-components-gallery/rich-components-gallery-data/index.ts +++ b/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', + }, ]; From 1b8fcb9baeffaa5636e33beb5f44d99cfced8437 Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Tue, 14 Oct 2025 17:33:39 +0200 Subject: [PATCH 2/8] fix type of transformer --- .../front-rich-components/input-stepper.tsx | 160 +++++++++--------- src/pods/canvas/model/transformer.model.ts | 1 + .../input-stepper.renderer.tsx | 1 + 3 files changed, 82 insertions(+), 80 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 9e81e4fa..9d3168a5 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -1,16 +1,10 @@ -import { useState, forwardRef } from 'react'; +import { forwardRef } from 'react'; import { Group, Rect, Text } from 'react-konva'; -import { ShapeConfig } from 'konva/lib/Shape'; import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; - -interface InputWithStepperProps extends ShapeConfig { - id: string; - x: number; - y: number; - width: number; - height: number; - initialValue?: number; -} +import { useGroupShapeProps } from '../mock-components.utils'; +import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; +import { ShapeType } from '@/core/model'; +import { ShapeProps } from '../shape.model'; // Size restrictions (igual patrón que file-tree) export const inputStepperShapeRestrictions: ShapeSizeRestrictions = { @@ -25,90 +19,96 @@ export const inputStepperShapeRestrictions: ShapeSizeRestrictions = { export const getInputStepperShapeSizeRestrictions = (): ShapeSizeRestrictions => inputStepperShapeRestrictions; -export const InputWithStepper = forwardRef( - ({ x, y, width, height, initialValue = 0, id, ...shapeProps }, ref) => { - const [value, setValue] = useState(initialValue); +export const InputWithStepper = forwardRef((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 handleIncrement = () => { - setValue(value + 1); - }; + const shapeType: ShapeType = 'input-stepper'; - const handleDecrement = () => { - setValue(value - 1); - }; + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); - const inputWidth = width - 30; // Reservar espacio para el stepper - const buttonHeight = height / 2; + return ( + + {/* Caja del input */} + - return ( - - {/* Caja del input */} + {/* Texto del input */} + + + {/* Botón de incremento (flecha arriba) */} + - - {/* Texto del input */} + - {/* Botón de incremento (flecha arriba) */} - - - - - - {/* Botón de decremento (flecha abajo) */} - - - - + {/* Botón de decremento (flecha abajo) */} + + + - ); - } -); + + ); +}); export default InputWithStepper; diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index bf601b42..e6a71e22 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/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': diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx index fd1ab8ac..33f2d4f3 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx @@ -24,6 +24,7 @@ export const renderInputStepper = ( onTransform={handleTransform} onTransformEnd={handleTransform} initialValue={0} + typeOfTransformer={shape.typeOfTransformer} /> ); }; From 6ddce33fd873d9150b365a43d5a6a3ec90eb00c5 Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Wed, 15 Oct 2025 12:28:51 +0200 Subject: [PATCH 3/8] cambios esteticos input stepper --- .../front-rich-components/input-stepper.tsx | 13 ++++++++++--- src/pods/canvas/model/inline-editable.model.ts | 3 +++ src/pods/canvas/model/shape-other-props.utils.ts | 7 +++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 9d3168a5..5fcc5dac 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -5,6 +5,8 @@ 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 = { @@ -40,7 +42,10 @@ export const InputWithStepper = forwardRef((props, ref) => { shapeType, ref ); - + const { stroke, textColor, strokeStyle } = useShapeProps( + otherProps, + INPUT_SHAPE + ); return ( {/* Caja del input */} @@ -49,8 +54,9 @@ export const InputWithStepper = forwardRef((props, ref) => { y={0} width={inputWidth / 2} // Reducir ancho a la mitad height={height} + strokeStyle={strokeStyle} fill="white" - stroke="black" + stroke={stroke} strokeWidth={2} cornerRadius={0} // Sin bordes redondeados /> @@ -62,6 +68,7 @@ export const InputWithStepper = forwardRef((props, ref) => { text={'0'} fontFamily="Arial" fontSize={16} + textColor={textColor} fill="black" align="right" /> @@ -95,7 +102,7 @@ export const InputWithStepper = forwardRef((props, ref) => { width={30} height={buttonHeight} fill="lightgray" - stroke="black" + stroke={stroke} strokeWidth={2} /> ([ 'gauge', 'loading-indicator', 'fileTree', + 'input-stepper', ]); // Check if a shape type allows inline editing @@ -62,6 +63,7 @@ const shapeTypesWithDefaultText = new Set([ 'listbox', 'horizontal-menu', 'vertical-menu', + 'input-stepper', 'heading1', 'heading2', 'heading3', @@ -125,6 +127,7 @@ const defaultTextValueMap: Partial> = { browser: 'https://example.com', modalDialog: 'Title here...', 'loading-indicator': 'Loading...', + 'input-stepper': '0', }; export const generateDefaultTextValue = ( diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index f2c1007f..8ad7a6d3 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -49,6 +49,13 @@ export const generateDefaultOtherProps = ( borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`, activeElement: 0, }; + 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': return { From a49dc1a8926390d66351b416c4317bed7f467f15 Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Wed, 15 Oct 2025 17:29:56 +0200 Subject: [PATCH 4/8] cambios esteticos input stepper FIN --- .../front-rich-components/input-stepper.tsx | 28 ++++++++++--------- .../input-stepper.renderer.tsx | 2 ++ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 5fcc5dac..2485f66c 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -42,10 +42,11 @@ export const InputWithStepper = forwardRef((props, ref) => { shapeType, ref ); - const { stroke, textColor, strokeStyle } = useShapeProps( + const { stroke, textColor, strokeStyle, fill, strokeWidth } = useShapeProps( otherProps, INPUT_SHAPE ); + return ( {/* Caja del input */} @@ -54,10 +55,10 @@ export const InputWithStepper = forwardRef((props, ref) => { y={0} width={inputWidth / 2} // Reducir ancho a la mitad height={height} - strokeStyle={strokeStyle} - fill="white" + fill={fill} stroke={stroke} - strokeWidth={2} + strokeWidth={strokeWidth} + dash={strokeStyle} cornerRadius={0} // Sin bordes redondeados /> @@ -68,8 +69,7 @@ export const InputWithStepper = forwardRef((props, ref) => { text={'0'} fontFamily="Arial" fontSize={16} - textColor={textColor} - fill="black" + fill={textColor} align="right" /> @@ -80,9 +80,10 @@ export const InputWithStepper = forwardRef((props, ref) => { y={0} width={30} height={buttonHeight} - fill="lightgray" - stroke="black" - strokeWidth={2} + fill={fill} + stroke={stroke} + strokeWidth={strokeWidth} + dash={strokeStyle} /> ((props, ref) => { text="▲" fontFamily="Arial" fontSize={14} - fill="black" + fill={textColor} /> @@ -101,9 +102,10 @@ export const InputWithStepper = forwardRef((props, ref) => { y={0} width={30} height={buttonHeight} - fill="lightgray" + fill={fill} stroke={stroke} - strokeWidth={2} + strokeWidth={strokeWidth} + dash={strokeStyle} /> ((props, ref) => { text="▼" fontFamily="Arial" fontSize={14} - fill="black" + fill={textColor} /> diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx index 33f2d4f3..2cbc2e8f 100644 --- a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx +++ b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx @@ -25,6 +25,8 @@ export const renderInputStepper = ( onTransformEnd={handleTransform} initialValue={0} typeOfTransformer={shape.typeOfTransformer} + text={shape.text} + otherProps={shape.otherProps} /> ); }; From 989e282d23a09b8f2db3a7a18011643d6cebddd7 Mon Sep 17 00:00:00 2001 From: Gorka Reguero Date: Thu, 16 Oct 2025 17:45:54 +0200 Subject: [PATCH 5/8] ajuste anchura inpput stepper --- .../front-rich-components/input-stepper.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 2485f66c..65620437 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -7,6 +7,7 @@ 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 { i } from 'vitest/dist/reporters-yx5ZTtEV.js'; // Size restrictions (igual patrón que file-tree) export const inputStepperShapeRestrictions: ShapeSizeRestrictions = { @@ -64,13 +65,13 @@ export const InputWithStepper = forwardRef((props, ref) => { {/* Texto del input */} {/* Botón de incremento (flecha arriba) */} From 59632b62e9b8e26912bc1f460f308e5269020faf Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Thu, 16 Oct 2025 18:14:36 +0200 Subject: [PATCH 6/8] fix with --- .../front-rich-components/input-stepper.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 65620437..35cf895c 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -7,7 +7,6 @@ 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 { i } from 'vitest/dist/reporters-yx5ZTtEV.js'; // Size restrictions (igual patrón que file-tree) export const inputStepperShapeRestrictions: ShapeSizeRestrictions = { @@ -48,13 +47,15 @@ export const InputWithStepper = forwardRef((props, ref) => { INPUT_SHAPE ); + const { width: restrictedWidth } = restrictedSize; + return ( {/* Caja del input */} ((props, ref) => { /> {/* Botón de incremento (flecha arriba) */} - + ((props, ref) => { {/* Botón de decremento (flecha abajo) */} - + Date: Thu, 16 Oct 2025 18:28:44 +0200 Subject: [PATCH 7/8] fix wrap --- .../mock-components/front-rich-components/input-stepper.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index 35cf895c..ec9e627c 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -68,11 +68,13 @@ export const InputWithStepper = forwardRef((props, ref) => { {/* Botón de incremento (flecha arriba) */} From 5395947e7cf82b52ed9dbebb6d353e296e35c16c Mon Sep 17 00:00:00 2001 From: Antonio Contreras Date: Fri, 17 Oct 2025 18:23:39 +0200 Subject: [PATCH 8/8] fix align --- .../mock-components/front-rich-components/input-stepper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx index ec9e627c..9d60dd2a 100644 --- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx +++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx @@ -73,7 +73,7 @@ export const InputWithStepper = forwardRef((props, ref) => { fontFamily="Arial" fontSize={16} fill={textColor} - align="left" + align="center" wrap="none" />