Merge branch 'main' into #56-Progressbar

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI Workflow
+
+on: pull_request
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js 18.13.0
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.13.0'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run tsc-check
+
+      - name: Run tests
+        run: npm test

package.json

@@ -9,7 +9,8 @@
     "test": "vitest",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "tsc-check": "tsc --noEmit"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",

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

@@ -25,8 +25,8 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
         onClick={() => onSelected(id, 'button')}
       >
         <Rect
-          x={10}
-          y={20}
+          x={0}
+          y={0}
           width={width}
           height={height}
           cornerRadius={14}
@@ -35,13 +35,16 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
           fill="white"
         />
         <Text
-          x={50}
-          y={40}
-          width={width - 50}
+          x={0}
+          y={20}
+          width={width}
           text="Click Me!"
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}
           fill="black"
+          align="center"
+          ellipsis={true}
+          wrap="none"
         />
       </Group>
     );

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

@@ -4,7 +4,7 @@ import { Path, Group, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
 
 export const getComboBoxShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
-  minWidth: 80,
+  minWidth: 100,
   minHeight: 50,
   maxWidth: -1,
   maxHeight: 50,
@@ -54,7 +54,8 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>(
           fontFamily="Arial"
           fill="black"
           width={width - 50}
-          height={height - 10}
+          ellipsis={true}
+          wrap="none"
         />
       </Group>
     );

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

@@ -0,0 +1,69 @@
+import { Group, Rect, Line } from 'react-konva';
+import { forwardRef } from 'react';
+import { ShapeProps } from './shape.model';
+import { ShapeSizeRestrictions } from '@/core/model';
+
+export const getDatepickerInputShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => ({
+    minWidth: 80,
+    minHeight: 50,
+    maxWidth: -1,
+    maxHeight: 50,
+    defaultWidth: 220,
+    defaultHeight: 50,
+  });
+
+export const DatepickerInputShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const margin = 10;
+    const separatorPadding = 15; // Extra padding for spacers
+    const separator1X = width / 3 + margin;
+    const separator2X = (2 * width) / 3 - margin;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={width}
+        height={height}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'datepickerinput')}
+      >
+        {/* input frame */}
+        <Rect
+          x={margin}
+          y={margin * 3}
+          width={width - 2 * margin}
+          height={height}
+          cornerRadius={10}
+          stroke="black"
+          strokeWidth={2}
+          fill="white"
+        />
+
+        {/* Inverted diagonal spacers */}
+        <Line
+          points={[
+            separator1X + separatorPadding,
+            margin * 2 + separatorPadding,
+            separator1X - separatorPadding,
+            margin * 4 + height - separatorPadding,
+          ]}
+          stroke="black"
+          strokeWidth={2}
+        />
+        <Line
+          points={[
+            separator2X + separatorPadding,
+            margin * 2 + separatorPadding,
+            separator2X - separatorPadding,
+            margin * 4 + height - separatorPadding,
+          ]}
+          stroke="black"
+          strokeWidth={2}
+        />
+      </Group>
+    );
+  }
+);

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

@@ -4,3 +4,7 @@ export * from './input-shape';
 export * from './toggleswitch-shape';
 export * from './checkbox-shape';
 export * from './progressbar-shape';
+export * from './listbox-shape';
+export * from './datepickerinput-shape';
+export * from './button-shape';
+export * from './timepickerinput-shape';

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

@@ -2,46 +2,57 @@ import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
 import { Group, Rect, Text } from 'react-konva';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 
-export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
+const inputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 60,
   minHeight: 50,
   maxWidth: -1,
   maxHeight: 50,
   defaultWidth: 190,
   defaultHeight: 50,
-});
+};
+
+export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  inputShapeRestrictions;
 
 export const InputShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(inputShapeRestrictions, width, height);
+
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'input')}
       >
         <Rect
-          x={10}
-          y={10}
-          width={width}
-          height={height}
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={5}
           stroke="black"
           strokeWidth={2}
           fill="white"
         />
         <Text
-          x={20}
-          y={30}
-          width={width - 5}
-          text="Input"
+          x={10}
+          y={20}
+          width={width - 10}
+          height={height - 20}
+          text="Input text..."
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}
           fill="gray"
+          align="left"
+          ellipsis={true}
+          wrap="none"
         />
       </Group>
     );

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

@@ -0,0 +1,98 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const listboxShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 75,
+  minHeight: 180,
+  maxWidth: 300,
+  maxHeight: 300,
+  defaultWidth: 120,
+  defaultHeight: 220,
+};
+
+export const getListboxShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  listboxShapeSizeRestrictions;
+
+interface ListBoxShapeProps extends ShapeProps {
+  items: string[];
+}
+
+export const ListBoxShape = forwardRef<any, ListBoxShapeProps>(
+  ({ x, y, width, height, id, items, onSelected, ...shapeProps }, ref) => {
+    const [selectedItem, setSelectedItem] = useState<number | null>(null);
+    const rectRef = useRef<any>(null);
+    const listRef = useRef<any>(null);
+
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        listboxShapeSizeRestrictions,
+        width,
+        height
+      );
+
+    useEffect(() => {
+      rectRef?.current.moveToTop();
+    }, []);
+
+    const handleClick = (itemIndex: number) => {
+      setSelectedItem(itemIndex);
+      onSelected(id, 'listbox');
+    };
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        ref={ref}
+        {...shapeProps}
+        clipFunc={ctx => {
+          ctx.rect(0, 0, restrictedWidth, restrictedHeight);
+        }}
+      >
+        {/* Rectángulo del listbox */}
+        <Rect
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          ref={rectRef}
+          cornerRadius={10}
+          stroke="black"
+          strokeWidth={4}
+          fill="transparent"
+          listening={false}
+        />
+
+        {/* Elementos de la lista con desplazamiento */}
+        <Group ref={listRef}>
+          {items.map((item, index) => (
+            <Group key={index} onClick={() => handleClick(index)}>
+              <Rect
+                x={2}
+                y={index === 0 ? 4 : index * 30}
+                width={width - 4}
+                height={30}
+                fill={selectedItem === index ? 'lightblue' : 'white'}
+              />
+              <Text
+                x={10}
+                y={30 * index + 5}
+                text={item}
+                fontFamily="Comic Sans MS, cursive"
+                fontSize={20}
+                fill="black"
+              />
+            </Group>
+          ))}
+        </Group>
+      </Group>
+    );
+  }
+);
+
+export default ListBoxShape;