Merge pull request #645 from Lemoncode/dev

push to production active page, disabled, richttext

package.json

@@ -22,6 +22,7 @@
     "@fontsource/balsamiq-sans": "^5.0.21",
     "@types/lodash.clonedeep": "^4.5.9",
     "@uiw/react-color-chrome": "^2.3.2",
+    "html2canvas": "^1.4.1",
     "immer": "^10.1.1",
     "konva": "^9.3.12",
     "lodash.clonedeep": "^4.5.0",
@@ -30,6 +31,7 @@
     "react-konva": "^18.2.10",
     "react-konva-utils": "^1.0.6",
     "tiny-invariant": "^1.3.3",
+    "use-debounce": "^10.0.4",
     "use-image": "^1.1.1",
     "uuid": "^10.0.0"
   },

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

@@ -3,11 +3,12 @@ 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 { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 import calendarIconSrc from '/icons/calendar.svg';
+import disabledCalendarIconSrc from '/icons/calendar-disabled.svg';
 
 const datepickerInputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
@@ -45,7 +46,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
     const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
-      useShapeProps(otherProps, INPUT_SHAPE);
+      useShapeProps(otherProps, BASIC_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -64,7 +65,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
     const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
 
     const calendarIcon = new window.Image();
-    calendarIcon.src = calendarIconSrc;
+    calendarIcon.src = disabled ? disabledCalendarIconSrc : calendarIconSrc;
 
     return (
       <Group {...commonGroupProps} {...shapeProps}>
@@ -79,7 +80,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
             disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
           }
           dash={strokeStyle}
-          strokeWidth={2}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           fill={
             disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
           }
@@ -91,14 +92,16 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           width={labelFontSize + 20}
           height={labelFontSize}
           cornerRadius={borderRadius}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           fill="white"
         />
         {/* Label "Date" */}
         <Text
           text="Date"
           x={13}
           y={-5}
-          fontSize={labelFontSize}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE - 4}
           fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
@@ -110,7 +113,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}
-          fontSize={fontSize}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
           align="left"
           ellipsis={true}
           wrap="none"

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

@@ -87,7 +87,11 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
   );
 
   const calculateItemBackground = (index: number) => {
-    if (disabled) return DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;
+    if (disabled) {
+      return selectedItem === index
+        ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+        : DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;
+    }
 
     return selectedItem === index ? selectedBackgroundColor : fill;
   };
@@ -127,6 +131,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
               fill={calculateItemBackground(index)}
               stroke={calculateItemStroke(index)}
               strokeWidth={selectedItem === index ? 1 : 0}
+              cornerRadius={borderRadius}
             />
             <Text
               x={10}

src/common/components/mock-components/front-components/progressbar-shape.tsx

@@ -31,7 +31,10 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { progress, borderRadius } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { progress, borderRadius, fill, stroke } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
   const progressWidth = useMemo(
     () => (progress / 100) * restrictedWidth,
@@ -54,7 +57,7 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke="black"
+        stroke={stroke}
         strokeWidth={2}
         fill="white"
       />
@@ -66,9 +69,9 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={progressWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke="black"
+        stroke={stroke}
         strokeWidth={2}
-        fill="lightgrey"
+        fill={fill}
       />
     </Group>
   );

src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx

@@ -9,6 +9,7 @@ import { useGroupShapeProps } from '../../mock-components.utils';
 import { splitCSVContent, setTime } from './timepickerinput-shape.business';
 
 import clockIconSrc from '/icons/clock.svg';
+import disabledClockIconSrc from '/icons/clock-disabled.svg';
 
 const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
@@ -68,7 +69,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
     const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
 
     const clockIcon = new window.Image();
-    clockIcon.src = clockIconSrc;
+    clockIcon.src = disabled ? disabledClockIconSrc : clockIconSrc;
 
     return (
       <Group {...commonGroupProps} {...shapeProps}>

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

@@ -5,3 +5,4 @@ export * from './normaltext-shape';
 export * from './smalltext-shape';
 export * from './paragraph-text-shape';
 export * from './link-text-shape';
+export * from './rich-text/';

src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx

@@ -6,7 +6,6 @@ import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-rest
 import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
-import { useResizeOnFontSizeChange } from './front-text-hooks/resize-fontsize-change.hook';
 
 const paragraphSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
@@ -41,7 +40,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontSize, textAlignment, fontVariant } = useShapeProps(
+  const { textColor, fontSize, textAlignment } = useShapeProps(
     otherProps,
     BASIC_SHAPE
   );
@@ -53,8 +52,6 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
-  useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant, true);
-
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Text