feat: integrate fab button into shape system

Author: gustedeveloper

src/core/model/index.ts

@@ -84,7 +84,8 @@ export type ShapeType =
   | 'rectangleLow'
   | 'circleLow'
   | 'textScribbled'
-  | 'paragraphScribbled';
+  | 'paragraphScribbled'
+  | 'fabButton';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -158,6 +159,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   circleLow: 'Circle',
   textScribbled: 'Text Scribbled',
   paragraphScribbled: 'Paragraph Scribbled',
+  fabButton: 'Fab Button',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

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

@@ -75,6 +75,17 @@ export const generateDefaultOtherProps = (
         stroke: '#808080',
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
       };
+    case 'fabButton':
+      return {
+        icon: {
+          name: 'chat',
+          filename: 'chat.svg',
+          searchTerms: ['chat', 'message', 'conversation', 'chatting'],
+          categories: ['IT'],
+        },
+        stroke: '#ffffff',
+        backgroundColor: '#A9A9A9',
+      };
     case 'buttonBar':
       return {
         stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,

src/pods/canvas/model/shape-size.mapper.ts

@@ -64,6 +64,7 @@ import {
   getVideoPlayerShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
   getGaugeShapeSizeRestrictions,
+  getFabButtonShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -171,6 +172,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   circleLow: getCircleLowShapeSizeRestrictions,
   textScribbled: getTextScribbledShapeRestrictions,
   paragraphScribbled: getParagraphScribbledShapeRestrictions,
+  fabButton: getFabButtonShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/shape-renderer/index.tsx

@@ -48,6 +48,7 @@ import {
   renderCalendar,
   renderAppBar,
   renderLoadingIndicator,
+  renderFabButton,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -209,6 +210,8 @@ export const renderShapeComponent = (
       return renderLoadingIndicator(shape, shapeRenderedProps);
     case 'videoconference':
       return renderVideoconference(shape, shapeRenderedProps);
+    case 'fabButton':
+      return renderFabButton(shape, shapeRenderedProps);
     case 'gauge':
       return renderGauge(shape, shapeRenderedProps);
     case 'imagePlaceholder':