From b727a704a6b9393e6aaf004183b6f918194a864d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 8 Jan 2022 12:06:28 +0100
Subject: [PATCH] Changed classes to use BEM, and fixed TS compilation errors

---
 src/tags/helpers/Tag.scss            |  4 ++--
 src/tags/helpers/Tag.tsx             |  3 ++-
 src/utils/services/ColorGenerator.ts | 10 ++++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/tags/helpers/Tag.scss b/src/tags/helpers/Tag.scss
index 5e0cfe7d..180ff07b 100644
--- a/src/tags/helpers/Tag.scss
+++ b/src/tags/helpers/Tag.scss
@@ -1,9 +1,9 @@
 .tag {
   color: #fff;
+}
 
-  &.light-generated-bg {
+.tag--light-bg {
     color: #000;
-  }
 }
 
 .tag:not(:last-child) {
diff --git a/src/tags/helpers/Tag.tsx b/src/tags/helpers/Tag.tsx
index e0dbc4ad..72dd31cd 100644
--- a/src/tags/helpers/Tag.tsx
+++ b/src/tags/helpers/Tag.tsx
@@ -1,4 +1,5 @@
 import { FC, MouseEventHandler } from 'react';
+import classNames from 'classnames';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import './Tag.scss';
 
@@ -13,7 +14,7 @@ interface TagProps {
 
 const Tag: FC<TagProps> = ({ text, children, clearable, className = '', colorGenerator, onClick, onClose }) => (
   <span
-    className={`badge tag ${className} ${colorGenerator.isColorLightForKey(text) ? 'light-generated-bg' : ''}`}
+    className={classNames('badge tag', className, { 'tag--light-bg': colorGenerator.isColorLightForKey(text) })}
     style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable || !onClick ? 'auto' : 'pointer' }}
     onClick={onClick}
   >
diff --git a/src/utils/services/ColorGenerator.ts b/src/utils/services/ColorGenerator.ts
index bbcce8ec..1fba86b2 100644
--- a/src/utils/services/ColorGenerator.ts
+++ b/src/utils/services/ColorGenerator.ts
@@ -6,9 +6,10 @@ const { floor, random, sqrt, round } = Math;
 const letters = '0123456789ABCDEF';
 const buildRandomColor = () => `#${rangeOf(HEX_COLOR_LENGTH, () => letters[floor(random() * letters.length)]).join('')}`;
 const normalizeKey = (key: string) => key.toLowerCase().trim();
-const hexColorToRgbArray = (colorHex: string): number[] => (colorHex.match(/../g) || []).map(hex => parseInt(hex, 16) || 0);
+const hexColorToRgbArray = (colorHex: string): number[] =>
+  (colorHex.match(/../g) ?? []).map((hex) => parseInt(hex, 16) || 0);
 // HSP by Darel Rex Finley https://alienryderflex.com/hsp.html
-const perceivedLightness = (r: number = 0, g: number = 0, b: number = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2));
+const perceivedLightness = (r = 0, g = 0, b = 0) => round(sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2));
 
 export default class ColorGenerator {
   private readonly colors: Record<string, string>;
@@ -40,11 +41,12 @@ export default class ColorGenerator {
     return color;
   };
 
-  public readonly isColorLightForKey = (key: string) => {
+  public readonly isColorLightForKey = (key: string): boolean => {
     const colorHex = this.getColorForKey(key).substring(1);
 
-    if (this.lights[colorHex] == undefined) {
+    if (!this.lights[colorHex]) {
       const rgb = hexColorToRgbArray(colorHex);
+
       this.lights[colorHex] = perceivedLightness(...rgb) >= 128;
     }