From 242241c915a3154b63b8b58692abdf3138a75c5d Mon Sep 17 00:00:00 2001
From: Simon Bigelmayr <simon.bigelmayr@mll.com>
Date: Tue, 20 Aug 2024 11:22:11 +0200
Subject: [PATCH] refactor: use `stringToHslaColor` from '@mll-lab/js-utils'

---
 package.json              |  2 +-
 src/Avatar/index.tsx      |  3 +--
 src/Avatar/utils.test.tsx | 34 ----------------------------------
 src/Avatar/utils.ts       | 30 ------------------------------
 yarn.lock                 | 26 +++++++++++++-------------
 5 files changed, 15 insertions(+), 80 deletions(-)
 delete mode 100644 src/Avatar/utils.test.tsx

diff --git a/package.json b/package.json
index 33227d72..43da5b7f 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@dnd-kit/core": "^6.0.8",
-    "@mll-lab/js-utils": "^2.17.1",
+    "@mll-lab/js-utils": "^2.36.1",
     "antd": "4.20.5",
     "date-fns": "^2.29.3",
     "lodash": "^4.17.21",
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index 953d9250..8154de8c 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -1,9 +1,8 @@
 import { UserOutlined } from '@ant-design/icons';
+import { stringToHslaColor } from '@mll-lab/js-utils';
 import { Avatar as AntdAvatar, AvatarProps as AntdAvatarProps } from 'antd';
 import React from 'react';
 
-import { stringToHslaColor } from './utils';
-
 export const Avatar: typeof AntdAvatar = AntdAvatar;
 export type AvatarProps = AntdAvatarProps;
 
diff --git a/src/Avatar/utils.test.tsx b/src/Avatar/utils.test.tsx
deleted file mode 100644
index d734f60d..00000000
--- a/src/Avatar/utils.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { uniq } from 'lodash';
-
-import { randomString, stringToHslaColor } from './utils';
-
-describe('stringToHslaColor', () => {
-  it.each(['test', 'test'])(
-    'is a pure function returning the same hsla for the same string',
-    (testString) => {
-      expect(stringToHslaColor(testString)).toStrictEqual(
-        'hsla(58, 98%, 48%, 1)',
-      );
-    },
-  );
-
-  it('returns various hsla colors for various inputs', () => {
-    const testStrings = ['t', 'te', 'tes', 'test'];
-    expect(uniq(testStrings.map(stringToHslaColor)).length).toBe(
-      testStrings.length,
-    );
-  });
-
-  it('returns a valid color for a random string', () => {
-    expect(isValidColor(stringToHslaColor(randomString()))).toBe(true);
-  });
-});
-
-function isValidColor(color: string): boolean {
-  // Use the browser's validation. Create a dummy HTML element, assign the color and check if it's set.
-  const element = document.createElement('div');
-  element.style.borderColor = '';
-  element.style.borderColor = color;
-
-  return element.style.borderColor.length !== 0;
-}
diff --git a/src/Avatar/utils.ts b/src/Avatar/utils.ts
index 10d94e3a..39efeec1 100644
--- a/src/Avatar/utils.ts
+++ b/src/Avatar/utils.ts
@@ -1,33 +1,3 @@
-function hashCode(string: string): number {
-  let hash = 0;
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < string.length; i++) {
-    // eslint-disable-next-line no-bitwise
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  return hash;
-}
-
-function getHslColor(hash: number): string {
-  const h = range(hash, 0, 360);
-  const s = range(hash, 50, 100);
-  const l = range(hash, 20, 50);
-
-  return `hsla(${h}, ${s}%, ${l}%, 1)`;
-}
-
-function range(hash: number, min: number, max: number): number {
-  const diff = max - min;
-  const x = ((hash % diff) + diff) % diff;
-
-  return x + min;
-}
-
-export function stringToHslaColor(string: string): string {
-  return getHslColor(hashCode(string));
-}
-
 /**
  * Generates a random string with a length of 1-11 chars.
  */
diff --git a/yarn.lock b/yarn.lock
index 797c99ba..58a52c44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2399,15 +2399,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mll-lab/js-utils@npm:^2.17.1":
-  version: 2.20.0
-  resolution: "@mll-lab/js-utils@npm:2.20.0"
+"@mll-lab/js-utils@npm:^2.36.1":
+  version: 2.36.1
+  resolution: "@mll-lab/js-utils@npm:2.36.1"
   dependencies:
-    date-fns: "npm:2.0.0-alpha.26"
+    date-fns: "npm:3.0.1"
     lodash: "npm:4.17.15"
   peerDependencies:
     "@babel/runtime": ">=7.13.6"
-  checksum: 10c0/df62e1942246f38dc4d958736b353256477f0dff27fea7a7801f512dccdf9971208495784fce8eb335f9f43be2472b0d023fa61c3d0929bc3adb79e6d28a8afd
+  checksum: 10c0/c71446f60cb1f30e9ffa0e2e2b357465468df8d17d6b7febdb2d2dd75847434fc2fb5bdf7e864bb61edc5c94382fa38e6f3ab95d3cf8193aecfe79c60b060462
   languageName: node
   linkType: hard
 
@@ -2432,7 +2432,7 @@ __metadata:
     "@dnd-kit/core": "npm:^6.0.8"
     "@mll-lab/eslint-config": "npm:^3.1.0"
     "@mll-lab/eslint-plugin": "npm:^1.3.4"
-    "@mll-lab/js-utils": "npm:^2.17.1"
+    "@mll-lab/js-utils": "npm:^2.36.1"
     "@mll-lab/prettier-config": "npm:^1.0.0"
     "@mll-lab/tsconfig": "npm:^3.0.0"
     "@rollup/plugin-babel": "npm:^6.0.4"
@@ -8436,13 +8436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:2.0.0-alpha.26":
-  version: 2.0.0-alpha.26
-  resolution: "date-fns@npm:2.0.0-alpha.26"
-  checksum: 10c0/95da7a6ef83bb67580466aa4eb92b6f826343a201dfd3e1f194cded0b96d95fe6e4fa82203b8822913b32f433513aad20eba174220aee2f579b541c2243cc39f
-  languageName: node
-  linkType: hard
-
 "date-fns@npm:2.x, date-fns@npm:^2.0.1, date-fns@npm:^2.29.3":
   version: 2.30.0
   resolution: "date-fns@npm:2.30.0"
@@ -8452,6 +8445,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:3.0.1":
+  version: 3.0.1
+  resolution: "date-fns@npm:3.0.1"
+  checksum: 10c0/d840a0b25ba4c262868df804d1f4939e809326b6fbdacc04f7f5184c2af9891de84ca5620777a98b077fad52777928032bb2cd8cd3a99d22eb1c75220f0aae34
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:1.x":
   version: 1.11.10
   resolution: "dayjs@npm:1.11.10"