Merge pull request #638 from Lemoncode/dev

Push to production
Lemoncode · Dec 29, 2024 · b061dc1 · b061dc1
2 parents 0019c42 + c7ac160
commit b061dc1
Show file tree

Hide file tree

Showing 57 changed files with 568 additions and 101 deletions.
diff --git a/e2e/helpers/konva-testing.helpers.ts b/e2e/helpers/konva-testing.helpers.ts
@@ -87,7 +87,7 @@ export const clickOnCanvasItem = async (
   item: E2E_CanvasItemKeyAttrs
 ) => {
   const { x, y } = item;
-  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const stageCanvas = await page.locator('#konva-stage canvas').nth(1);
   const canvasWindowPos = await stageCanvas.boundingBox();
   if (!canvasWindowPos) throw new Error('Canvas is not loaded on ui');
   await page.mouse.move(

diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts
@@ -49,7 +49,7 @@ export const addComponentsToCanvas = async (
   components: string[],
   displacementQty: number = 120
 ) => {
-  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const stageCanvas = await page.locator('#konva-stage canvas').nth(1);
   const canvasPosition = await stageCanvas.boundingBox();
   if (!canvasPosition) throw new Error('No canvas found');
 

diff --git a/e2e/inline-edit/multiple-line-inline-edit.spec.ts b/e2e/inline-edit/multiple-line-inline-edit.spec.ts
@@ -46,7 +46,7 @@ test('cancels textarea edit on Escape and verifies original shape text', async (
   };
   await dragAndDrop(page, position, targetPosition);
   await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
-  const textarea = page.getByRole('textbox').first();
+  const textarea = page.getByTestId('textareaedit');
 
   const textContent = 'Hello';
   await textarea.fill(textContent);

diff --git a/e2e/selection/multiple-selection.spec.ts b/e2e/selection/multiple-selection.spec.ts
@@ -24,7 +24,7 @@ test('Should perform multiple selection when dragging and dropping over multiple
 
   //Assert
   const selectedItems = await getTransformer(page);
-  expect(selectedItems._nodes.length).toEqual(3);
+  expect(selectedItems._nodes.length).toEqual(2);
 });
 
 test('Should deselect all previously selected items when clicking on an empty point on the canvas', async ({
@@ -44,7 +44,7 @@ test('Should deselect all previously selected items when clicking on an empty po
 
   //Assert
   const selectedItems = await getTransformer(page);
-  expect(selectedItems._nodes.length).toEqual(3);
+  expect(selectedItems._nodes.length).toEqual(2);
 
   //Click Away
   await page.mouse.click(800, 130);

diff --git a/e2e/ui-functionality/copy-paste.spec.ts b/e2e/ui-functionality/copy-paste.spec.ts
@@ -123,7 +123,7 @@ test.describe('Copy/Paste functionality tests', () => {
     await addComponentsToCanvas(page, addInputIntoCanvas);
 
     //Select items by drag and drop
-    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 650 });
 
     //Copy and assert there are 3 components within the canvas
     await page.keyboard.press('ControlOrMeta+c');

diff --git a/e2e/z-index/z-index.spec.ts b/e2e/z-index/z-index.spec.ts
@@ -23,7 +23,7 @@ test('drop three shapes in canvas, select one, try all z-index levels', async ({
   expect(inputShapes.length).toBe(3);
 
   // Get Canvas position
-  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const stageCanvas = await page.locator('#konva-stage canvas').nth(1);
   expect(stageCanvas).toBeDefined();
   const canvasPosition = await stageCanvas.boundingBox();
   if (!canvasPosition) throw new Error('No canvas found');

diff --git a/editor.html b/editor.html
@@ -34,5 +34,10 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script>
+      window.onbeforeunload = function () {
+        return 'You are about to leave this page. All progress in QuickMock will be lost. Are you sure you want to proceed?';
+      };
+    </script>
   </body>
 </html>
diff --git a/public/icons/clip.svg b/public/icons/clip.svg
diff --git a/public/icons/horizontalpaperclip.svg b/public/icons/horizontalpaperclip.svg
diff --git a/public/icons/rocketlaunch.svg b/public/icons/rocketlaunch.svg
diff --git a/public/icons/speedometer.svg b/public/icons/speedometer.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,8 +4,8 @@ import { MainScene } from './scenes/main.scene';
 function App() {
   return (
     <>
-      <MainScene />
       <ModalDialogComponent />
+      <MainScene />
     </>
   );
 }

diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
@@ -12,3 +12,4 @@ export * from './delete-icon.component';
 export * from './pencil-icon.component';
 export * from './caret-down-icon.component';
 export * from './plus-icon.component';
+export * from './settings-icon.component';
diff --git a/src/common/components/icons/settings-icon.component.tsx b/src/common/components/icons/settings-icon.component.tsx
@@ -0,0 +1,15 @@
+export const SettingsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M62 106.6V40a6 6 0 0 0-12 0v66.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-50.6a30 30 0 0 0 0-58.8M56 154a18 18 0 1 1 18-18a18 18 0 0 1-18 18m78-95.4V40a6 6 0 0 0-12 0v18.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-98.6a30 30 0 0 0 0-58.8m-6 47.4a18 18 0 1 1 18-18a18 18 0 0 1-18 18m102 62a30.05 30.05 0 0 0-24-29.4V40a6 6 0 0 0-12 0v98.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-18.6a30.05 30.05 0 0 0 24-29.4m-30 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18"
+      />
+    </svg>
+  );
+};
diff --git a/src/common/components/inline-edit/components/html-edit.widget.tsx b/src/common/components/inline-edit/components/html-edit.widget.tsx
@@ -50,6 +50,7 @@ export const HtmlEditWidget = forwardRef<any, Props>(
             value={value}
             onChange={handleTextChange}
             data-is-inline-edition-on="true"
+            data-testid="textareaedit"
           />
         )}
         {editType === 'imageupload' && (

diff --git a/src/common/components/mock-components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx
@@ -6,6 +6,7 @@ import { Group, Rect, Text } from 'react-konva';
 import { BASIC_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { DISABLED_COLOR_VALUES } from '@/common/components/mock-components/front-components/shape.const';
 
 const buttonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
@@ -41,10 +42,8 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +60,10 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={1.5}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={0}
@@ -75,7 +74,7 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={1.25}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="center"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-components/checkbox-shape.tsx b/src/common/components/mock-components/front-components/checkbox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Line, Text } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const CHECKBOX_DEFAULT_HEIGHT = 20;
@@ -48,7 +48,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { isOn, textColor, disabled } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -65,9 +65,15 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={boxTickWidth}
         height={restrictedHeight}
         cornerRadius={BASIC_SHAPE.DEFAULT_CORNER_RADIUS}
-        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        stroke={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+            : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+        }
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill="white"
+        fill={
+          disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : 'white'
+        }
       />
       {isOn && (
         <Line
@@ -81,7 +87,11 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
             tickWidth - marginTick,
             marginTick,
           ]}
-          stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+          stroke={
+            disabled
+              ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+              : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+          }
           strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           lineCap="round"
           lineJoin="round"
@@ -95,7 +105,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         verticalAlign="middle"
         ellipsis={true}

diff --git a/src/common/components/mock-components/front-components/combobox-shape.tsx b/src/common/components/mock-components/front-components/combobox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Text, Rect, Line } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const comboBoxShapeRestrictions: ShapeSizeRestrictions = {
@@ -40,10 +40,8 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,10 +58,10 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={BASIC_SHAPE.DEFAULT_PADDING}
@@ -73,7 +71,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"
@@ -89,7 +87,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
           restrictedWidth - 15,
           0,
         ]}
-        fill="black"
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : 'black'}
         closed={true}
       />
     </Group>

diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text, Image } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -44,7 +44,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, fill, textColor, strokeStyle, borderRadius } =
+    const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
       useShapeProps(otherProps, INPUT_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
@@ -75,10 +75,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={borderRadius}
-          stroke={stroke}
+          stroke={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
+          }
           dash={strokeStyle}
           strokeWidth={2}
-          fill={fill}
+          fill={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
+          }
         />
         {/* Background of Date Label */}
         <Rect
@@ -95,14 +99,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={13}
           y={-5}
           fontSize={labelFontSize}
-          fill={stroke}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
         />
         {/* Main Text */}
         <Text
           text={text}
-          fill={textColor}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}

diff --git a/src/common/components/mock-components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -41,10 +41,8 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, fill, textColor, strokeStyle, borderRadius } = useShapeProps(
-    otherProps,
-    INPUT_SHAPE
-  );
+  const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
+    useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +59,10 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={INPUT_SHAPE.DEFAULT_PADDING}
@@ -74,7 +72,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"