✨(frontend) auto color for ListAvatar background

[rlecellier]

Purpose

This idea of feature is introduce to use default avatar as real avatar, in order to have a easy visual way to differentiate user line with they avatar. There for we've here a way to generate colors from a string.

Learner list:

Stories: )

[rlecellier]

There is a proposal from @jbpenrath from the previous PR (original comment)

What do you think to reduce the hue available to homogeneize color palette ?

static toColor(string: string, saturation: number, lightness = 55): string {
    let hash = 0;
    for (let i = 0; i < string.length; i++) {
      // eslint-disable-next-line no-bitwise
      hash = string.charCodeAt(i) + ((hash << 5) - hash);
      // eslint-disable-next-line no-bitwise
      hash &= hash;
    }
    // Hue value between 135 and 225 degrees
    const hue = 135 + (hash % 90);
    // A random saturation value between 25% and 55%
    const sat = saturation || Math.floor(Math.random() * 30) + 25;
    return `hsl(${hue}, ${sat}%, ${lightness}%)`;
  }

[jbpenrath]

I think this could be a good feature but from my point of view, we should clamp the hue to keep consistent color palette and prevent a rainbow effect that IMO is weird.

[rlecellier]

I should make a storybook story to let anyone give it's point of view on it. I like lot's of hue, you don't and we must found the right choice who's mostly subjective but may be some can have wining arguments.

[jbpenrath]

As discussed, let's use the full range of hue but we have to find the right saturation and luminosity.