Build the channel, user, workspaces and companies molecule and atoms

[RomaricMourgues]

The channel molecule is used in the new channel bar, in the search results and in some titles, the workspace and companies molecules are almost the same so I propose to create them in the same time.

In context examples:

There is workspaces (squarish) companies, with one title or one title and a subtitle, different width, two sizes and different suffixes.

More details:

• The left-most circle component (or square for workspaces) can have three sizes: 36px (w-9), 44px (w-11), 56px (w-14)

• The title is always a "Text.Title" it means 17px and semibold

• The subtitle is always a Text.Base with color text-slate-400

Atoms (we have 2)

• The atoms will be only the circle / square (so two atoms) that will take every props of any div (see example in the button atom) and will add a pre-defined classNames and accept an avatar props, a title props and a size props with values "sm" | "md" | "lg" and default to "md". If this props is defined then it should be the cover image, if not then the first letter of the first two words should be used and a gradient must be created out of this sentence (the gradient is randomly choosen with this sentence as a seed).

Molecules (we have 4)

We'll have 4 molecules that are the channel, the user, the workspace and the company.

They will use the following atoms: Avatar (freshly created), the Text.Title and the Text.Base. It will take the following props: title (ReactNode), avatar, size, subtitle (ReactNode).

We can get the title text (in case of react node) like this: https://stackoverflow.com/questions/50428910/get-text-content-from-node-in-react or we can create a new props like avatarTitle.

For workspaces and companies and users, we will add a props suffix which will contain a ReactNode vertically aligned with everything else.

For channels, we will add a props date (for the date top right when it should be displayed) and suffix (for the mention badge or the notifications badge, /!\ in the channel case the alignment is with the subtitle).

Interactions

There is no interactions for this molecules, nor business logic. It will be managed by the parent.

Dark mode

The colors are managed by the Text atoms mainly, only the grey of the subtitle is set but it is a medium grey that is dark mode ok.

Notes

• Only parents can set margins for its children, children can only work with paddings.
• This should work for any width
• For positioning vertically, use this format: <div className='flex items-center'><div className="grow">Some item</div><div>{badge}</div></div> for instance

[RomaricMourgues]

@romanesko ready to go for this one, both molecules and atoms should be available on the storybook