feat: added a hook for generating a unique color

src/hooks/useColorGenerator/README.md

@@ -8,15 +8,14 @@
 import {useColorGenerator} from '@gravity-ui/uikit';
 ```
 
-The `useColorGenerator` 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.
+The `useColorGenerator` hook 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, an index is generated from the token passed, and the value from the color array at that index is returned | `string[]`                         |             |     |     |
+| Name      | Description                                            | Type                     | Default |     |     |
+| :-------- | :----------------------------------------------------- | :----------------------- | :-----: | --- | --- |
+| intensity | Value to control color saturation                      | `light` `medium` `heavy` | `light` |
+| seed      | Unique attribute of the entity (e.g., name, id, email) | `string`                 |         |     |     |
 
 ## Result
 

src/hooks/useColorGenerator/__stories__/ColorGenerator.scss → src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.scss

@@ -1,6 +1,6 @@
 @use '../../../components/variables.scss';
 
-$block: '.#{variables.$ns}color-generator';
+$block: '.#{variables.$ns}color-generator-stories';
 
 #{$block} {
     &__color-items {

src/hooks/useColorGenerator/__stories__/useColorGenerator.stories.tsx

@@ -7,9 +7,9 @@ import {randomString} from '../../../components/utils/common';
 
 import {ColoredAvatar} from './ColoredAvatar';
 
-import './ColorGenerator.scss';
+import './useColorGenerator.stories.scss';
 
-const b = block('color-generator');
+const b = block('color-generator-stories');
 
 const meta: Meta = {
     title: 'Hooks/useColorGenerator',
@@ -24,7 +24,7 @@ export default meta;
 
 type Story = StoryObj<typeof ColoredAvatar>;
 
-const views = ['-', 'light', 'medium', 'heavy'] as const;
+const views = ['light', 'medium', 'heavy'] as const;
 const states = ['view', 'colors'] as const;
 
 const Template = (args: React.ComponentProps<typeof ColoredAvatar>) => {
@@ -35,24 +35,12 @@ const Template = (args: React.ComponentProps<typeof ColoredAvatar>) => {
         for (const state of states) {
             const key = `${view}_${state}`;
 
-            if (view === '-' && state === 'view') {
-                items.push(
-                    <div key={key} className={b('grid-cell', {head: 'left'})}>
-                        <strong>view\state</strong>
-                    </div>,
-                );
-            } else if (state === 'view') {
+            if (state === 'view') {
                 items.push(
                     <div key={key} className={b('grid-cell', {head: 'left'})}>
                         <strong>{view}</strong>
                     </div>,
                 );
-            } else if (view === '-') {
-                items.push(
-                    <div key={key} className={b('grid-cell', {head: 'top'})}>
-                        <strong>{state}</strong>
-                    </div>,
-                );
             } else {
                 const props = {
                     ...args,
@@ -77,7 +65,7 @@ const Template = (args: React.ComponentProps<typeof ColoredAvatar>) => {
     );
 };
 
-export const View: Story = {
+export const Default: Story = {
     render: (args) => {
         return <Template {...args} />;
     },

src/hooks/useColorGenerator/index.ts

@@ -1,2 +1,2 @@
 export {useColorGenerator} from './useColorGenerator';
-export type {UseColorGeneratorProps} from './types';
+export type {UseColorGeneratorProps, UseColorGeneratorResult} from './types';

src/hooks/useColorGenerator/types.ts

@@ -9,21 +9,26 @@ export type ThemeColorSettings = {
     heavy: ColorOptions;
 };
 
-export type INTENSITY = 'light' | 'medium' | 'heavy';
+export type Intensity = 'light' | 'medium' | 'heavy';
 
 export type ColorProps = {
-    intensity?: INTENSITY;
+    intensity?: Intensity;
     seed: string;
     theme: string;
 };
 
 export type UseColorGeneratorProps = {
-    intensity?: INTENSITY;
+    intensity?: Intensity;
     seed: string;
 };
 
+export type UseColorGeneratorResult = {
+    color: string;
+    textColor: string;
+};
+
 export type HslColorProps = {
     hash: number;
-    intensity: INTENSITY;
+    intensity: Intensity;
     theme: string;
 };

src/hooks/useColorGenerator/useColorGenerator.ts

@@ -1,43 +1,57 @@
-/* eslint-disable valid-jsdoc */
+import React from 'react';
+
 import {useThemeType} from '../../components/theme/useThemeType';
 
 import {getPersistentColor, getTextColor} from './color';
-import type {UseColorGeneratorProps} from './types';
+import type {UseColorGeneratorProps, UseColorGeneratorResult} from './types';
 
 /**
- * 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, textColor} = useColorGenerator({
-            token,
-        });
+* The `useColorGenerator` hook 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.
+* 
+* @param {Object} props
+* @param {string} [props.intensity='light'] - value to control color saturation.
+* @param {string} props.seed - unique attribute of the entity (e.g., name, id, email).
+* @example
+*
+*  import React from 'react';
+*  import {Avatar} from '@gravity-ui/uikit';
+*
+*  const Component = ({ token, text, ...avatarProps }) => {
+*      const {color, textColor} = useColorGenerator({
+*          seed,
+*      });
+*
+*      return (
+*          <Avatar
+*              {...avatarProps}
+*              text={text}
+*              color={text ? textColor : undefined}
+*              backgroundColor={color}
+*          />
+*      );
+*  };
 
-        return (
-            <Avatar
-                {...avatarProps}
-                text={text}
-                color={text ? textColor : undefined}
-                backgroundColor={color}
-            />
-        );
-    };
-```
+@returns {Object} returns an object with exactly two values:
+* - color: unique color from a token.
+* - textColor: text color (dark or light), ensurring higher contrast on generated color.
 */
-export function useColorGenerator(props: UseColorGeneratorProps) {
+export function useColorGenerator(props: UseColorGeneratorProps): UseColorGeneratorResult {
     const theme = useThemeType();
 
-    const {color, hue, saturation, lightness} = getPersistentColor({
-        ...props,
-        theme,
-    });
+    const {color, hue, saturation, lightness} = React.useMemo(
+        () =>
+            getPersistentColor({
+                ...props,
+                theme,
+            }),
+        [props, theme],
+    );
 
-    const textColor = getTextColor(hue, saturation, lightness);
+    const textColor = React.useMemo(
+        () => getTextColor(hue, saturation, lightness),
+        [hue, lightness, saturation],
+    );
 
     return {color, textColor};
 }