From 45aba44b9cc86edb7d49807d5a82b9f983ee42da Mon Sep 17 00:00:00 2001
From: German Shteinardt <shteinardt@yandex-team.ru>
Date: Fri, 3 May 2024 11:19:08 +0200
Subject: [PATCH] feat: added a hook for generating a unique color

---
 src/hooks/index.ts                            |   1 +
 src/hooks/useGeneratorColor/README.md         |  28 +++++
 .../useGeneratorColor/__stories__/Color.tsx   |  30 +++++
 .../__stories__/GeneratorColor.scss           |  18 +++
 .../__stories__/UseGeneratorColor.stories.tsx |  57 +++++++++
 .../__stories__/constants.ts                  |   5 +
 .../__stories__/utils/randomString.ts         |  11 ++
 src/hooks/useGeneratorColor/index.ts          |   2 +
 src/hooks/useGeneratorColor/types.ts          |  23 ++++
 .../useGeneratorColor/useGeneratorColor.ts    |  41 ++++++
 src/hooks/useGeneratorColor/utils/color.ts    | 119 ++++++++++++++++++
 .../useGeneratorColor/utils/constants.ts      |  34 +++++
 src/hooks/useGeneratorColor/utils/getHue.ts   |   9 ++
 .../useGeneratorColor/utils/hashFnv32a.ts     |  12 ++
 src/hooks/useGeneratorColor/utils/mathFrac.ts |   2 +
 .../useGeneratorColor/utils/normalizeHash.ts  |   7 ++
 .../useGeneratorColor/utils/randomIndex.ts    |  18 +++
 17 files changed, 417 insertions(+)
 create mode 100644 src/hooks/useGeneratorColor/README.md
 create mode 100644 src/hooks/useGeneratorColor/__stories__/Color.tsx
 create mode 100644 src/hooks/useGeneratorColor/__stories__/GeneratorColor.scss
 create mode 100644 src/hooks/useGeneratorColor/__stories__/UseGeneratorColor.stories.tsx
 create mode 100644 src/hooks/useGeneratorColor/__stories__/constants.ts
 create mode 100644 src/hooks/useGeneratorColor/__stories__/utils/randomString.ts
 create mode 100644 src/hooks/useGeneratorColor/index.ts
 create mode 100644 src/hooks/useGeneratorColor/types.ts
 create mode 100644 src/hooks/useGeneratorColor/useGeneratorColor.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/color.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/constants.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/getHue.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/hashFnv32a.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/mathFrac.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/normalizeHash.ts
 create mode 100644 src/hooks/useGeneratorColor/utils/randomIndex.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 9a98690749..4d204ced02 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,6 +2,7 @@ export * from './useActionHandlers';
 export * from './useAsyncActionHandler';
 export * from './useBodyScrollLock';
 export * from './useControlledState';
+export * from './useGeneratorColor';
 export * from './useFileInput';
 export * from './useFocusWithin';
 export * from './useForkRef';
diff --git a/src/hooks/useGeneratorColor/README.md b/src/hooks/useGeneratorColor/README.md
new file mode 100644
index 0000000000..ac3e1bb303
--- /dev/null
+++ b/src/hooks/useGeneratorColor/README.md
@@ -0,0 +1,28 @@
+<!--GITHUB_BLOCK-->
+
+# useGeneratorColor
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useGeneratorColor} from '@gravity-ui/uikit';
+```
+
+The `useGeneratorColor` a hook that generates a unique (but consistent) background color based on some unique attribute (e.g., name, id, email). The background color remains unchanged with each update.
+
+## Properties
+
+| Name      |                         Description                          |   Type    |   Default   |
+| :-------- | :----------------------------------------------------------: | :-------: | :---------: | ------ | --------- |
+| mode      |              Value to control color saturation               | saturated | unsaturated | bright | saturated |
+| token     |    Unique attribute of the entity (e.g., name, id, email)    |  string   |             |
+| colorKeys |               If an array of colors is passed,               | string[]  |  undefined  |        |
+|           |         an index is generated from the token passed,         |           |             |
+|           | and the value from the color array at that index is returned |           |             |
+
+## Result
+
+`useGeneratorColor` returns an object with exactly two values:
+
+1. color - unique color from a token.
+2. oppositeColor - inverted color (black or white), ensuring higher text contrast compared to the current unique color, which is usually better for human perception.
diff --git a/src/hooks/useGeneratorColor/__stories__/Color.tsx b/src/hooks/useGeneratorColor/__stories__/Color.tsx
new file mode 100644
index 0000000000..0228c709aa
--- /dev/null
+++ b/src/hooks/useGeneratorColor/__stories__/Color.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {Avatar} from '../../../components/Avatar';
+import type {AvatarProps} from '../../../components/Avatar';
+import type {UseGeneratorColorProps} from '../types';
+import {useGeneratorColor} from '../useGeneratorColor';
+
+type ColorProps = AvatarProps & {
+    withText: boolean;
+    mode: UseGeneratorColorProps['mode'];
+    token: UseGeneratorColorProps['token'];
+};
+
+export const Color = ({mode, theme, token, withText, ...avatarProps}: ColorProps) => {
+    const {color, oppositeColor} = useGeneratorColor({
+        token,
+        mode,
+    });
+
+    return (
+        <Avatar
+            {...avatarProps}
+            theme={theme}
+            text={withText ? token : undefined}
+            color={withText ? oppositeColor : undefined}
+            backgroundColor={color}
+            size="l"
+        />
+    );
+};
diff --git a/src/hooks/useGeneratorColor/__stories__/GeneratorColor.scss b/src/hooks/useGeneratorColor/__stories__/GeneratorColor.scss
new file mode 100644
index 0000000000..85f0f846c4
--- /dev/null
+++ b/src/hooks/useGeneratorColor/__stories__/GeneratorColor.scss
@@ -0,0 +1,18 @@
+@use '../../../components/variables.scss';
+
+$block: '.#{variables.$ns}generator-color';
+
+#{$block} {
+    &__actions {
+        display: flex;
+        gap: 4px;
+        margin-block-end: 20px;
+        align-items: center;
+    }
+
+    &__color-items {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+}
diff --git a/src/hooks/useGeneratorColor/__stories__/UseGeneratorColor.stories.tsx b/src/hooks/useGeneratorColor/__stories__/UseGeneratorColor.stories.tsx
new file mode 100644
index 0000000000..34057ed199
--- /dev/null
+++ b/src/hooks/useGeneratorColor/__stories__/UseGeneratorColor.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Button} from '../../../components/Button';
+import {Checkbox} from '../../../components/Checkbox';
+import {Select} from '../../../components/Select';
+import {block} from '../../../components/utils/cn';
+import type {UseGeneratorColorProps} from '../types';
+
+import {Color} from './Color';
+import {colorModes} from './constants';
+import {randomString} from './utils/randomString';
+
+import './GeneratorColor.scss';
+
+const b = block('generator-color');
+
+export default {title: 'Hooks/useGeneratorColor'} as Meta;
+
+const DefaultTemplate: StoryFn = () => {
+    const [tokens, setTokens] = React.useState<string[]>([]);
+    const [mode, setMode] = React.useState<string[]>(['unsaturated']);
+    const [withText, setWithText] = React.useState(false);
+
+    const onClick = React.useCallback(() => {
+        const newToken = randomString(16);
+        setTokens((prev) => [newToken, ...prev]);
+    }, []);
+
+    return (
+        <React.Fragment>
+            <div className={b('actions')}>
+                <Button title="generate color" onClick={onClick}>
+                    Generate color
+                </Button>
+                <Select title="select mode" value={mode} options={colorModes} onUpdate={setMode} />
+                <Checkbox checked={withText} onUpdate={setWithText}>
+                    with text
+                </Checkbox>
+            </div>
+
+            <div className={b('color-items')}>
+                {tokens.map((token) => (
+                    <Color
+                        key={token}
+                        token={token}
+                        mode={mode[0] as UseGeneratorColorProps['mode']}
+                        withText={withText}
+                    />
+                ))}
+            </div>
+        </React.Fragment>
+    );
+};
+
+export const Default = DefaultTemplate.bind({});
diff --git a/src/hooks/useGeneratorColor/__stories__/constants.ts b/src/hooks/useGeneratorColor/__stories__/constants.ts
new file mode 100644
index 0000000000..5d132b0c76
--- /dev/null
+++ b/src/hooks/useGeneratorColor/__stories__/constants.ts
@@ -0,0 +1,5 @@
+export const colorModes = [
+    {value: 'unsaturated', content: 'unsaturated'},
+    {value: 'saturated', content: 'saturated'},
+    {value: 'bright', content: 'bright'},
+];
diff --git a/src/hooks/useGeneratorColor/__stories__/utils/randomString.ts b/src/hooks/useGeneratorColor/__stories__/utils/randomString.ts
new file mode 100644
index 0000000000..424c1b3942
--- /dev/null
+++ b/src/hooks/useGeneratorColor/__stories__/utils/randomString.ts
@@ -0,0 +1,11 @@
+const MASK = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+export const randomString = (length: number) => {
+    let result = '';
+
+    for (let index = length; index >= 0; index--) {
+        result += MASK[Math.round(Math.random() * (MASK.length - 1))];
+    }
+
+    return result;
+};
diff --git a/src/hooks/useGeneratorColor/index.ts b/src/hooks/useGeneratorColor/index.ts
new file mode 100644
index 0000000000..f3ae79e8aa
--- /dev/null
+++ b/src/hooks/useGeneratorColor/index.ts
@@ -0,0 +1,2 @@
+export {useGeneratorColor} from './useGeneratorColor';
+export type {UseGeneratorColorProps} from './types';
diff --git a/src/hooks/useGeneratorColor/types.ts b/src/hooks/useGeneratorColor/types.ts
new file mode 100644
index 0000000000..3cb87f4d7a
--- /dev/null
+++ b/src/hooks/useGeneratorColor/types.ts
@@ -0,0 +1,23 @@
+export type ColorOptions = {
+    lightness: [number, number];
+    situration: [number, number];
+};
+
+export type ThemeColorSettings = {
+    saturated: ColorOptions;
+    unsaturated: ColorOptions;
+    bright: ColorOptions;
+};
+
+export type ColorProps = {
+    colorKeys?: string[];
+    mode?: 'saturated' | 'unsaturated' | 'bright';
+    token: string;
+    theme: string;
+};
+
+export type UseGeneratorColorProps = {
+    colorKeys?: string[];
+    mode?: 'saturated' | 'unsaturated' | 'bright';
+    token: string;
+};
diff --git a/src/hooks/useGeneratorColor/useGeneratorColor.ts b/src/hooks/useGeneratorColor/useGeneratorColor.ts
new file mode 100644
index 0000000000..f575354fcc
--- /dev/null
+++ b/src/hooks/useGeneratorColor/useGeneratorColor.ts
@@ -0,0 +1,41 @@
+/* eslint-disable valid-jsdoc */
+import {useThemeType} from '../../components/theme/useThemeType';
+
+import type {UseGeneratorColorProps} from './types';
+import {colorGenerator} from './utils/color';
+
+/**
+ * It is used to create a unique color from a token (string) and to obtain an inverted color (black or white), 
+ * ensuring higher text contrast compared to the current color, which is usually better for human perception.
+ *
+ * Usage example:
+ ```tsx
+    import React from 'react';
+    import {Avatar} from '@gravity-ui/uikit';
+
+    const Component = ({ token, text, ...avatarProps }) => {
+        const {color, oppositeColor} = useGeneratorColor({
+            token,
+        });
+
+        return (
+            <Avatar
+                {...avatarProps}
+                text={text}
+                color={text ? oppositeColor : undefined}
+                backgroundColor={color}
+            />
+        );
+    };
+```
+*/
+export function useGeneratorColor(props: UseGeneratorColorProps) {
+    const theme = useThemeType();
+
+    const options = colorGenerator({
+        ...props,
+        theme,
+    });
+
+    return options;
+}
diff --git a/src/hooks/useGeneratorColor/utils/color.ts b/src/hooks/useGeneratorColor/utils/color.ts
new file mode 100644
index 0000000000..1715137284
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/color.ts
@@ -0,0 +1,119 @@
+/* eslint-disable no-bitwise */
+import type {ColorProps, ThemeColorSettings} from '../types';
+
+import {BLACK_COLOR, WHITE_COLOR, colorOptions} from './constants';
+import {getHue} from './getHue';
+import {hashFnv32a} from './hashFnv32a';
+import {normalizeHash} from './normalizeHash';
+import {randomIndex} from './randomIndex';
+
+class Color {
+    private _colorKeys?: string[];
+    private _saturation?: number;
+    private _lightness?: number;
+    private _token: string;
+    private _hash: number;
+    private _mode: ColorProps['mode'];
+    private _hue: number | null;
+    private _saturationRange: [number, number];
+    private _lightnessRange: [number, number];
+    private _themeOptions: ThemeColorSettings;
+
+    constructor({token, colorKeys, theme, mode}: ColorProps) {
+        this._token = token;
+        this._mode = mode ?? 'unsaturated';
+        this._hash = this.getHash(token);
+        this._colorKeys = colorKeys;
+        this._themeOptions = colorOptions[theme];
+        this._lightnessRange = this._themeOptions[this._mode].lightness;
+        this._saturationRange = this._themeOptions[this._mode].situration;
+        this._hue = null;
+    }
+
+    get color() {
+        if (this._colorKeys && this._colorKeys.length > 0) {
+            const index = this.getColorKeysIndex();
+
+            return this._colorKeys[index];
+        }
+
+        return this.hslColor();
+    }
+
+    get oppositeColor() {
+        if (!this._hue || !this._saturation || !this._lightness) {
+            return WHITE_COLOR;
+        }
+
+        const luminance = this.getLuminance(this._hue, this._saturation, this._lightness);
+
+        return luminance > 0.7 ? BLACK_COLOR : WHITE_COLOR;
+    }
+
+    private getColorKeysIndex() {
+        if (!this._colorKeys || this._colorKeys.length === 0) {
+            return -1;
+        }
+
+        return randomIndex(this._token, this._colorKeys.length);
+    }
+
+    private hslToRgb = (h: number, s: number, l: number) => {
+        s /= 100;
+        l /= 100;
+
+        const k = (n: number) => (n + h / 30) % 12;
+        const a = s * Math.min(l, 1 - l);
+
+        const f = (n: number) => {
+            return l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        };
+
+        const r = ~~(255 * f(0));
+        const g = ~~(255 * f(8));
+        const b = ~~(255 * f(4));
+
+        return [r, g, b] as [number, number, number];
+    };
+
+    private rgbToLuminance(r: number, g: number, b: number) {
+        return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+    }
+
+    private getLuminance(h: number, s: number, l: number) {
+        const rgb = this.hslToRgb(h, s, l);
+        const luminance = this.rgbToLuminance(...rgb);
+
+        return luminance;
+    }
+
+    private hslColor() {
+        this._hue = getHue(this._hash);
+
+        this._saturation = normalizeHash(
+            this._hash,
+            this._saturationRange[0],
+            this._saturationRange[1],
+        );
+
+        this._lightness = normalizeHash(
+            this._hash,
+            this._lightnessRange[0],
+            this._lightnessRange[1],
+        );
+
+        const color = `hsl(${this._hue}deg ${this._saturation}% ${this._lightness}%)`;
+
+        return color;
+    }
+
+    private getHash(token: string) {
+        const hash = hashFnv32a(token, 0x73_6f_6d_65) ^ hashFnv32a(token, 0x64_6f_72_61);
+
+        return hash;
+    }
+}
+
+export const colorGenerator = (args: ColorProps) => {
+    return new Color(args);
+};
diff --git a/src/hooks/useGeneratorColor/utils/constants.ts b/src/hooks/useGeneratorColor/utils/constants.ts
new file mode 100644
index 0000000000..911ee89d6f
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/constants.ts
@@ -0,0 +1,34 @@
+import type {ColorOptions, ThemeColorSettings} from '../types';
+
+const bright: ColorOptions = {
+    lightness: [45, 55],
+    situration: [45, 55],
+};
+
+export const colorOptions: Record<string, ThemeColorSettings> = {
+    dark: {
+        saturated: {
+            lightness: [40, 80],
+            situration: [15, 55],
+        },
+        unsaturated: {
+            lightness: [25, 35],
+            situration: [45, 55],
+        },
+        bright,
+    },
+    light: {
+        saturated: {
+            lightness: [40, 80],
+            situration: [15, 55],
+        },
+        unsaturated: {
+            lightness: [80, 90],
+            situration: [45, 55],
+        },
+        bright,
+    },
+};
+
+export const WHITE_COLOR = '#ffffff';
+export const BLACK_COLOR = '#000000';
diff --git a/src/hooks/useGeneratorColor/utils/getHue.ts b/src/hooks/useGeneratorColor/utils/getHue.ts
new file mode 100644
index 0000000000..9f293ec44c
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/getHue.ts
@@ -0,0 +1,9 @@
+/* eslint-disable no-bitwise */
+import {mathFrac} from './mathFrac';
+
+export const getHue = (hash: number) => {
+    const sin = Math.sin(hash); // 0.12345678910 or -0.12345678910
+    const fr = sin < 0 ? mathFrac(sin * 1000) : mathFrac(sin * 10_000); // 5678910
+
+    return ~~(Math.abs(fr) * 360);
+};
diff --git a/src/hooks/useGeneratorColor/utils/hashFnv32a.ts b/src/hooks/useGeneratorColor/utils/hashFnv32a.ts
new file mode 100644
index 0000000000..58d8a4e082
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/hashFnv32a.ts
@@ -0,0 +1,12 @@
+/* eslint-disable no-bitwise */
+// hash in [-2^31, 2^31 - 1]
+export const hashFnv32a = (token: string, start: number) => {
+    let hval = start;
+
+    for (let index = 0; index < token.length; index++) {
+        hval ^= token.charCodeAt(index);
+        hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
+    }
+
+    return hval >>> 0;
+};
diff --git a/src/hooks/useGeneratorColor/utils/mathFrac.ts b/src/hooks/useGeneratorColor/utils/mathFrac.ts
new file mode 100644
index 0000000000..60b5ef06ee
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/mathFrac.ts
@@ -0,0 +1,2 @@
+/* eslint-disable no-bitwise */
+export const mathFrac = (x: number) => x - ~~x;
diff --git a/src/hooks/useGeneratorColor/utils/normalizeHash.ts b/src/hooks/useGeneratorColor/utils/normalizeHash.ts
new file mode 100644
index 0000000000..322c5f7ce0
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/normalizeHash.ts
@@ -0,0 +1,7 @@
+export const normalizeHash = (hash: number, min: number, max: number) => {
+    hash = Math.abs(hash);
+
+    const normalizedHash = Math.floor((hash % (max - min + 1)) + min);
+
+    return normalizedHash;
+};
diff --git a/src/hooks/useGeneratorColor/utils/randomIndex.ts b/src/hooks/useGeneratorColor/utils/randomIndex.ts
new file mode 100644
index 0000000000..34d4ba6207
--- /dev/null
+++ b/src/hooks/useGeneratorColor/utils/randomIndex.ts
@@ -0,0 +1,18 @@
+/* eslint-disable no-bitwise */
+export const getHash = (token: string) => {
+    let hash = 0;
+
+    for (let index = 0; index < token.length; index++) {
+        hash = token.charCodeAt(index) + ((hash << 5) - hash);
+    }
+
+    return hash;
+};
+
+export const randomIndex = (token: string, max: number) => {
+    const hash = getHash(token);
+
+    const number = Math.abs(hash) % max;
+
+    return number;
+};