Feature/#270 horizontal menu selected option

src/common/components/front-rich-components/accordion/components/accordion-all-parts.component.tsx

@@ -1,3 +1,4 @@
+import { Group } from 'react-konva';
 import { AccordionBody } from './accordion-body.component';
 import { AccordionHeader } from './accordion-header.component';
 
@@ -35,7 +36,7 @@ export const AccordionAllParts: React.FC<Props> = props => {
   const renderAccordion = () => {
     const textMarginLeft = 10;
     return sections.map((section, index) => (
-      <>
+      <Group key={index}>
         <AccordionHeader
           x={textMarginLeft}
           y={singleHeaderHeight * index + accordionBodyAppliedOffset}
@@ -45,7 +46,7 @@ export const AccordionAllParts: React.FC<Props> = props => {
           isSelected={selectedSectionIndex === index}
         />
         {selectedSectionIndex === index ? renderAccordionBody(index) : null}
-      </>
+      </Group>
     ));
   };
 

src/common/components/front-rich-components/buttonBar/buttonBar.tsx

@@ -1,9 +1,10 @@
-import { ShapeSizeRestrictions } from '@/core/model';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { Group, Path, Text } from 'react-konva';
 import { ShapeProps } from '../../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { mapButtonBarTextToItems } from './buttonBar.utils';
+import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook';
 
 const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 75,
@@ -17,96 +18,106 @@ const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
 export const getButtonBarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   horizontalMenuShapeSizeRestrictions;
 
-export const ButtonBarShape = forwardRef<any, ShapeProps>(
-  (
-    { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps },
-    ref
-  ) => {
-    const [buttonItems, setButtonItems] = useState<string[]>([]);
+const shapeType: ShapeType = 'buttonBar';
 
-    useEffect(() => {
-      if (typeof text === 'string') {
-        const { items } = mapButtonBarTextToItems(text);
-        setButtonItems(items);
-      } else {
-        setButtonItems([]);
-      }
-    }, [text]);
+export const ButtonBarShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const [buttonItems, setButtonItems] = useState<string[]>([]);
 
-    const numberOfItems = buttonItems.length;
+  useEffect(() => {
+    console.log('Hola');
+    if (typeof text === 'string') {
+      const { items } = mapButtonBarTextToItems(text);
+      setButtonItems(items);
+    } else {
+      setButtonItems([]);
+    }
+  }, [text]);
 
-    const { width: restrictedWidth, height: restrictedHeight } =
-      fitSizeToShapeSizeRestrictions(
-        horizontalMenuShapeSizeRestrictions,
-        width,
-        height
-      );
+  const numberOfItems = buttonItems.length;
 
-    const itemWidth =
-      numberOfItems > 0 ? restrictedWidth / numberOfItems : restrictedWidth;
-
-    const textColor = useMemo(
-      () => otherProps?.textColor ?? 'black',
-      [otherProps?.textColor]
-    );
-    const backgroundColor = useMemo(
-      () => otherProps?.backgroundColor ?? 'white',
-      [otherProps?.backgroundColor]
-    );
-    const strokeColor = useMemo(
-      () => otherProps?.stroke ?? 'black',
-      [otherProps?.stroke]
-    );
-    const strokeStyle = useMemo(
-      () => otherProps?.strokeStyle ?? [],
-      [otherProps?.strokeStyle]
+  const { width: restrictedWidth, height: restrictedHeight } =
+    fitSizeToShapeSizeRestrictions(
+      horizontalMenuShapeSizeRestrictions,
+      width,
+      height
     );
 
-    return (
-      <Group
-        x={x}
-        y={y}
-        width={restrictedWidth}
-        height={restrictedHeight}
-        ref={ref}
-        {...shapeProps}
-        onClick={() => onSelected(id, 'horizontal-menu', true)}
-      >
-        <Path
-          data={`M0,0 H${restrictedWidth} V${restrictedHeight} H0 Z`}
-          stroke={strokeColor}
-          strokeWidth={2}
-          dash={strokeStyle}
-          fill={backgroundColor}
-        />
+  const itemWidth =
+    numberOfItems > 0 ? restrictedWidth / numberOfItems : restrictedWidth;
 
-        {buttonItems.map((e: string, index: number) => (
-          <Group key={index}>
-            {/* Vertical strokes */}
-            <Path
-              data={`M${index * itemWidth},0 V${restrictedHeight} M${
-                (index + 1) * itemWidth
-              },0 V${restrictedHeight}`}
-              stroke={strokeColor}
-              strokeWidth={1}
-            />
-            <Text
-              x={index * itemWidth}
-              y={restrictedHeight / 2 - 8}
-              text={e}
-              fontFamily="Arial"
-              fontSize={16}
-              fill={textColor}
-              width={itemWidth}
-              align="center"
-              wrap="none"
-              ellipsis={true}
-            />
-          </Group>
-        ))}
-      </Group>
-    );
-  }
-);
+  const textColor = useMemo(
+    () => otherProps?.textColor ?? 'black',
+    [otherProps?.textColor]
+  );
+  const backgroundColor = useMemo(
+    () => otherProps?.backgroundColor ?? 'white',
+    [otherProps?.backgroundColor]
+  );
+  const strokeColor = useMemo(
+    () => otherProps?.stroke ?? 'black',
+    [otherProps?.stroke]
+  );
+  const strokeStyle = useMemo(
+    () => otherProps?.strokeStyle ?? [],
+    [otherProps?.strokeStyle]
+  );
+
+  const { handleSelection } = useShapeComponentSelection(props, shapeType);
+
+  return (
+    <Group
+      x={x}
+      y={y}
+      width={restrictedWidth}
+      height={restrictedHeight}
+      ref={ref}
+      {...shapeProps}
+      onClick={handleSelection}
+    >
+      <Path
+        data={`M0,0 H${restrictedWidth} V${restrictedHeight} H0 Z`}
+        stroke={strokeColor}
+        strokeWidth={2}
+        dash={strokeStyle}
+        fill={backgroundColor}
+      />
+
+      {buttonItems.map((e: string, index: number) => (
+        <Group key={index}>
+          {/* Vertical strokes */}
+          <Path
+            data={`M${index * itemWidth},0 V${restrictedHeight}`}
+            stroke={strokeColor}
+            strokeWidth={1}
+            dash={strokeStyle}
+          />
+          <Text
+            x={index * itemWidth}
+            y={restrictedHeight / 2 - 8}
+            text={e}
+            fontFamily="Arial"
+            fontSize={16}
+            fill={textColor}
+            width={itemWidth}
+            align="center"
+            wrap="none"
+            ellipsis={true}
+          />
+        </Group>
+      ))}
+    </Group>
+  );
+});
 
 export default ButtonBarShape;

src/common/components/front-rich-components/calendar/calendar.business.spec.ts

@@ -0,0 +1,104 @@
+import {
+  calculateNextMonth,
+  calculatePreviousMonth,
+  getCurrentMonthDays,
+} from './calendar.business';
+
+describe('calculatePreviousMonth', () => {
+  it('should return previous month', () => {
+    //Arrange
+    const date = new Date(2024, 11, 4);
+    //Act
+    const prevMonth = calculatePreviousMonth(date);
+    //Assert
+    expect(prevMonth.getMonth()).toBe(10);
+  });
+  it('should return previous month', () => {
+    //Arrange
+    const date = new Date(1992, 8, 20);
+    //Act
+    const prevMonth = calculatePreviousMonth(date);
+    //Assert
+    expect(prevMonth.getMonth()).toBe(7);
+  });
+  it('should return previous month', () => {
+    //Arrange
+    const date = new Date(2121, 6, 20);
+    //Act
+    const prevMonth = calculatePreviousMonth(date);
+    //Assert
+    expect(prevMonth.getMonth()).toBe(5);
+  });
+});
+
+describe('calculateNextMonth', () => {
+  it('should return next month', () => {
+    //Arrange
+    const date = new Date(2024, 1, 4);
+    //Act
+    const nextMonth = calculateNextMonth(date);
+    //Assert
+    expect(nextMonth.getMonth()).toBe(2);
+  });
+  it('should return next month', () => {
+    //Arrange
+    const date = new Date(2011, 5, 4);
+    //Act
+    const nextMonth = calculateNextMonth(date);
+    //Assert
+    expect(nextMonth.getMonth()).toBe(6);
+  });
+  it('should return next month', () => {
+    //Arrange
+    const date = new Date(2532, 12, 4);
+    //Act
+    const nextMonth = calculateNextMonth(date);
+    //Assert
+    expect(nextMonth.getMonth()).toBe(1);
+  });
+});
+
+describe('getCurrentMonthDays', () => {
+  it('should return 31 days when selected month is july', () => {
+    //Arrange
+    const date = new Date(2024, 6, 1);
+    //Act
+    const result = getCurrentMonthDays(date);
+    //Assert
+    expect(result.days).toEqual([
+      [null, 1, 2, 3, 4, 5, 6],
+      [7, 8, 9, 10, 11, 12, 13],
+      [14, 15, 16, 17, 18, 19, 20],
+      [21, 22, 23, 24, 25, 26, 27],
+      [28, 29, 30, 31],
+    ]);
+  });
+  it('should return 30 days when selected month is september', () => {
+    //Arrange
+    const date = new Date(2024, 8, 1);
+    //Act
+    const result = getCurrentMonthDays(date);
+    //Assert
+    expect(result.days).toEqual([
+      [1, 2, 3, 4, 5, 6, 7],
+      [8, 9, 10, 11, 12, 13, 14],
+      [15, 16, 17, 18, 19, 20, 21],
+      [22, 23, 24, 25, 26, 27, 28],
+      [29, 30],
+    ]);
+  });
+  it('should return 31 days when selected month is january', () => {
+    //Arrange
+    const date = new Date(2024, 0, 1);
+    //Act
+    const result = getCurrentMonthDays(date);
+    //Assert
+    expect(result.days).toEqual([
+      [null, 1, 2, 3, 4, 5, 6],
+      [7, 8, 9, 10, 11, 12, 13],
+      [14, 15, 16, 17, 18, 19, 20],
+      [21, 22, 23, 24, 25, 26, 27],
+      [28, 29, 30, 31],
+    ]);
+  });
+});