feat(board): allow to set icon color of widgets (#2228)

Co-authored-by: Andre Silva <asilva01@acuitysso.com>

packages/ui/src/components/index.tsx

@@ -12,3 +12,5 @@ export { UserAvatarGroup } from "./user-avatar-group";
 export { CustomPasswordInput } from "./password-input/password-input";
 export { IntegrationAvatar } from "./integration-avatar";
 export { BetaBadge } from "./beta-badge";
+export { MaskedImage } from "./masked-image";
+export { MaskedOrNormalImage } from "./masked-or-normal-image";

packages/ui/src/components/masked-image.module.css

@@ -0,0 +1,3 @@
+.maskedImage {
+  background-color: var(--image-color);
+}

packages/ui/src/components/masked-image.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { getThemeColor, useMantineTheme } from "@mantine/core";
+import type { MantineColor } from "@mantine/core";
+import combineClasses from "clsx";
+import type { Property } from "csstype";
+
+import classes from "./masked-image.module.css";
+
+interface MaskedImageProps {
+  imageUrl: string;
+  color: MantineColor;
+  alt?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  maskSize?: Property.MaskSize;
+  maskRepeat?: Property.MaskRepeat;
+  maskPosition?: Property.MaskPosition;
+}
+
+export const MaskedImage = ({
+  imageUrl,
+  color,
+  alt,
+  style,
+  className,
+  maskSize = "contain",
+  maskRepeat = "no-repeat",
+  maskPosition = "center",
+}: MaskedImageProps) => {
+  const theme = useMantineTheme();
+
+  return (
+    <div
+      className={combineClasses(classes.maskedImage, className)}
+      role="img"
+      aria-label={alt}
+      style={
+        {
+          ...style,
+          "--image-color": getThemeColor(color, theme),
+          maskSize,
+          maskRepeat,
+          maskPosition,
+          maskImage: `url(${imageUrl})`,
+        } as React.CSSProperties
+      }
+    />
+  );
+};

packages/ui/src/components/masked-or-normal-image.tsx

@@ -0,0 +1,55 @@
+import { Image } from "@mantine/core";
+import type { MantineColor } from "@mantine/core";
+import combineClasses from "clsx";
+import type { Property } from "csstype";
+
+import { MaskedImage } from "./masked-image";
+
+interface MaskedOrNormalImageProps {
+  imageUrl: string;
+  hasColor?: boolean;
+  color?: MantineColor;
+  alt?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  fit?: Property.ObjectFit;
+  maskSize?: Property.MaskSize;
+  maskRepeat?: Property.MaskRepeat;
+  maskPosition?: Property.MaskPosition;
+}
+
+export const MaskedOrNormalImage = ({
+  imageUrl,
+  hasColor = true,
+  color = "iconColor",
+  alt,
+  style,
+  className,
+  fit = "contain",
+  maskSize = "contain",
+  maskRepeat = "no-repeat",
+  maskPosition = "center",
+}: MaskedOrNormalImageProps) => {
+  return hasColor ? (
+    <MaskedImage
+      imageUrl={imageUrl}
+      color={color}
+      alt={alt}
+      className={combineClasses("masked-image", className)}
+      maskSize={maskSize}
+      maskRepeat={maskRepeat}
+      maskPosition={maskPosition}
+      style={{
+        ...style,
+      }}
+    />
+  ) : (
+    <Image
+      className={combineClasses("normal-image", className)}
+      src={imageUrl}
+      alt={alt}
+      fit={fit}
+      style={{ ...style }}
+    />
+  );
+};