feat: color prop can accept rgb colors (#586)

HashLoader can accept rgb colors

Co-authored-by: Roman Ismagilov <ryismagilov@alfabank.ru>
Co-authored-by: David Hu <davidhu314@gmail.com>

src/helpers/colors.test.ts

@@ -5,6 +5,26 @@ describe("calculateRgba", () => {
     expect(typeof calculateRgba).toEqual("function");
   });
 
+  it("returns the same passed in rgb value with custom opacity in old syntax", () => {
+    expect(calculateRgba("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+    expect(calculateRgba("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+  });
+
+  it("returns the same passed in rgb value with custom opacity in new syntax", () => {
+    expect(calculateRgba("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+    expect(calculateRgba("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+  });
+
+  it("adds passed in opacity to the rgb values in old syntax", () => {
+    expect(calculateRgba("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+    expect(calculateRgba("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+  });
+
+  it("adds passed in opacity to the rgb values in new syntax", () => {
+    expect(calculateRgba("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+    expect(calculateRgba("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+  });
+
   it("converts hash values to rgb", () => {
     expect(calculateRgba("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");
   });

src/helpers/colors.ts

@@ -15,10 +15,37 @@ enum BasicColors {
   black = "#000000",
   gray = "#808080",
   silver = "#C0C0C0",
-  white = "#FFFFFF"
+  white = "#FFFFFF",
 }
 
+const handleRgbColorString = (color: string, opacity: number): string => {
+  // rgb(a)(255 255 255 / 80%)
+  if (color.includes("/")) {
+    return color.replace("rgb(", "rgba(");
+  }
+
+  const rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+  const splittedByCommas = rgbValues.split(",");
+
+  // rgb(a)(255, 255, 255, 0.8)
+  if (splittedByCommas.length === 4) {
+    return color.replace("rgb(", "rgba(");
+  }
+
+  // rgb(a)(255, 255, 255)
+  if (splittedByCommas.length === 3) {
+    return `rgba(${rgbValues}, ${opacity})`;
+  }
+
+  // rgb(a)(255 255 255)
+  return `rgba(${rgbValues} / ${opacity})`;
+};
+
 export const calculateRgba = (color: string, opacity: number): string => {
+  if (color.startsWith("rgb")) {
+    return handleRgbColorString(color, opacity);
+  }
+
   if (Object.keys(BasicColors).includes(color)) {
     color = BasicColors[color as keyof typeof BasicColors];
   }