From 612f89d40a1b3758fdc2b0583b6eaa073c8677db Mon Sep 17 00:00:00 2001
From: Roman <38655430+Roman178@users.noreply.github.com>
Date: Mon, 24 Jun 2024 08:07:51 +0300
Subject: [PATCH] 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 | 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];
   }