Merge branch 'dev' into feature/#213-Create-a-badge-component-to-be-p…

…laced-under-Rich-Components

src/common/components/mock-components/front-components/icon/icon-shape.business.ts

@@ -0,0 +1,33 @@
+import { IconSize } from '@/core/model';
+
+export const loadSvgWithFill = async (url: string, fillColor: string) => {
+  const response = await fetch(url);
+  const svgText = await response.text();
+
+  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
+
+  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
+  const objectURL = URL.createObjectURL(svgBlob);
+
+  const img = new window.Image();
+  img.src = objectURL;
+
+  return img;
+};
+
+export const returnIconSize = (iconSize: IconSize): number[] => {
+  switch (iconSize) {
+    case 'XS':
+      return [25, 25];
+    case 'S':
+      return [50, 50];
+    case 'M':
+      return [100, 100];
+    case 'L':
+      return [125, 125];
+    case 'XL':
+      return [150, 150];
+    default:
+      return [50, 50];
+  }
+};

src/common/components/mock-components/front-components/icon-shape.tsx → src/common/components/mock-components/front-components/icon/icon-shape.tsx

@@ -1,18 +1,13 @@
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import {
-  BASE_ICONS_URL,
-  IconSize,
-  ShapeSizeRestrictions,
-  ShapeType,
-} from '@/core/model';
-import { forwardRef } from 'react';
+import { BASE_ICONS_URL, ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef, useRef, useState, useEffect } from 'react';
 import { Group, Image } from 'react-konva';
-import useImage from 'use-image';
-import { ShapeProps } from '../shape.model';
+import { ShapeProps } from '../../shape.model';
 import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
 import { IconModal } from '@/pods/properties/components/icon-selector/modal';
 import { useCanvasContext } from '@/core/providers';
-import { useGroupShapeProps } from '../mock-components.utils';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { loadSvgWithFill, returnIconSize } from './icon-shape.business';
 
 const iconShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,
@@ -38,11 +33,13 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
     onSelected,
     iconInfo,
     iconSize,
+    stroke,
     ...shapeProps
   } = props;
   const { openModal } = useModalDialogContext();
   const { selectionInfo } = useCanvasContext();
   const { updateOtherPropsOnSelected } = selectionInfo;
+
   const handleDoubleClick = () => {
     openModal(
       <IconModal
@@ -52,24 +49,6 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
       'Choose Icon'
     );
   };
-  const [image] = useImage(`${BASE_ICONS_URL}${iconInfo.filename}`);
-
-  const returnIconSize = (iconSize: IconSize): number[] => {
-    switch (iconSize) {
-      case 'XS':
-        return [25, 25];
-      case 'S':
-        return [50, 50];
-      case 'M':
-        return [100, 100];
-      case 'L':
-        return [125, 125];
-      case 'XL':
-        return [150, 150];
-      default:
-        return [50, 50];
-    }
-  };
 
   const [iconWidth, iconHeight] = returnIconSize(iconSize);
 
@@ -88,15 +67,32 @@ export const SvgIcon = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+  const imageRef = useRef(null);
+
+  useEffect(() => {
+    if (iconInfo?.filename) {
+      loadSvgWithFill(
+        `${BASE_ICONS_URL}${iconInfo.filename}`,
+        `${stroke}`
+      ).then(img => {
+        setImage(img);
+      });
+    }
+  }, [iconInfo?.filename, stroke]);
+
   return (
     <Group {...commonGroupProps} {...shapeProps} onDblClick={handleDoubleClick}>
-      <Image
-        image={image}
-        x={0}
-        y={0}
-        width={restrictedWidth}
-        height={restrictedHeight}
-      />
+      {image && (
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          ref={imageRef}
+        />
+      )}
     </Group>
   );
 });

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

@@ -0,0 +1 @@
+export * from './icon-shape';

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

@@ -9,7 +9,7 @@ export * from './datepickerinput-shape';
 export * from './button-shape';
 export * from './timepickerinput-shape';
 export * from './radiobutton-shape';
-export * from './icon-shape';
+export * from './icon';
 export * from './verticalscrollbar-shape';
 export * from './horizontalscrollbar-shape';
 export * from './label-shape';

src/pods/canvas/model/shape-other-props.utils.ts

@@ -185,6 +185,7 @@ export const generateDefaultOtherProps = (
           categories: ['IT'],
         },
         iconSize: 'M',
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
       };
     case 'image':
       return {

src/pods/canvas/shape-renderer/simple-component/icon.renderer.tsx

@@ -27,6 +27,7 @@ export const renderIcon = (
       onTransformEnd={handleTransform}
       iconInfo={shape.otherProps?.icon}
       iconSize={shape.otherProps?.iconSize}
+      stroke={shape.otherProps?.stroke}
     />
   );
 };

src/pods/properties/components/icon-selector/modal/icons.ts

@@ -578,25 +578,13 @@ export const iconCollection: IconInfo[] = [
       'phone',
       'smartphone',
       'tablet',
-      'application',
-      'play store',
-      'google play',
     ],
     categories: ['IT'],
   },
   {
     name: 'Apple',
     filename: 'apple.svg',
-    searchTerms: [
-      'apple',
-      'system',
-      'mobile',
-      'phone',
-      'smartphone',
-      'tablet',
-      'application',
-      'app store',
-    ],
+    searchTerms: ['apple', 'system', 'mobile', 'phone', 'smartphone', 'tablet'],
     categories: ['IT'],
   },
   {
@@ -1328,4 +1316,124 @@ export const iconCollection: IconInfo[] = [
     searchTerms: ['calendar', 'days', 'date', 'hours', 'time', 'schedule'],
     categories: ['IT'],
   },
+  {
+    name: 'Cursor',
+    filename: 'cursor.svg',
+    searchTerms: ['cursor', 'pointer', 'select', 'mouse'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Cursor click',
+    filename: 'cursorclick.svg',
+    searchTerms: ['cursor', 'click', 'pointer', 'select', 'mouse'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Microphone',
+    filename: 'microphone.svg',
+    searchTerms: ['microphone', 'record', 'micro', 'mic'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Microphone off',
+    filename: 'microphoneslash.svg',
+    searchTerms: ['microphone', 'mute', 'silence', 'mic'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Webcam',
+    filename: 'webcam.svg',
+    searchTerms: ['webcam', 'camera', 'video', 'camcorder'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Webcam off',
+    filename: 'webcamslash.svg',
+    searchTerms: ['webcam', 'camera', 'slash', 'camcorder', 'off'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Empty Battery',
+    filename: 'emptybattery.svg',
+    searchTerms: ['battery', 'empty', 'discharged', 'energy'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Sign in',
+    filename: 'signin.svg',
+    searchTerms: ['sign in', 'login', 'enter', 'access'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Sign out',
+    filename: 'signout.svg',
+    searchTerms: ['sign out', 'logout', 'exit', 'leave'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow Bend left',
+    filename: 'arrowbendupleft.svg',
+    searchTerms: ['arrow', 'left', 'bend', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Arrow Bend right',
+    filename: 'arrowbendupright.svg',
+    searchTerms: ['arrow', 'right', 'bend', 'move'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Dots Square',
+    filename: 'dotssquare.svg',
+    searchTerms: ['dots', 'square', 'menu', 'more'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Dots Vertical',
+    filename: 'dotsvertical.svg',
+    searchTerms: ['dots', 'vertical', 'menu', 'options'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Google Drive',
+    filename: 'drive.svg',
+    searchTerms: ['drive', 'google', 'cloud', 'storage'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Linux',
+    filename: 'linux.svg',
+    searchTerms: ['linux', 'system', 'software', 'desktop'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Windows',
+    filename: 'windows.svg',
+    searchTerms: ['windows', 'system', 'software', 'desktop'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Moon',
+    filename: 'moon.svg',
+    searchTerms: ['moon', 'night', 'dark', 'sky'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Alarm',
+    filename: 'alarm.svg',
+    searchTerms: ['alarm', 'clock', 'alert', 'ring'],
+    categories: ['IT'],
+  },
+  {
+    name: 'Gitlab',
+    filename: 'gitlab.svg',
+    searchTerms: ['gitlab', 'code', 'repository', 'version control'],
+    categories: ['IT'],
+  },
+  {
+    name: 'List dots',
+    filename: 'listdots.svg',
+    searchTerms: ['list', 'categorize', 'unordered', 'classify'],
+    categories: ['IT'],
+  },
 ];