From 9a6634f5f4e772aee0426db3cfc9eb6b592dc23b Mon Sep 17 00:00:00 2001
From: Roman Ismagilov <ryismagilov@alfabank.ru>
Date: Tue, 9 Apr 2024 17:01:03 +0300
Subject: [PATCH] HashLoader can accept rgb colors

---
 src/helpers/colors.test.ts | 20 ++++++++++++++++++++
 src/helpers/colors.ts      | 29 ++++++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/helpers/colors.test.ts b/src/helpers/colors.test.ts
index bfeca083..600ea3f4 100644
--- a/src/helpers/colors.test.ts
+++ b/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)");
   });
diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts
index 7b570632..5181dc21 100644
--- a/src/helpers/colors.ts
+++ b/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];
   }