[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -0,0 +1,156 @@
+import { Theme, withTheme } from '@emotion/react';
+import { styled } from '@linaria/react';
+import { ReactNode } from 'react';
+
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
+
+export enum ChipSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+export enum ChipAccent {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+}
+
+export enum ChipVariant {
+  Highlighted = 'highlighted',
+  Regular = 'regular',
+  Transparent = 'transparent',
+  Rounded = 'rounded',
+}
+
+export type ChipProps = {
+  size?: ChipSize;
+  disabled?: boolean;
+  clickable?: boolean;
+  label: string;
+  isLabelHidden?: boolean;
+  maxWidth?: number;
+  variant?: ChipVariant;
+  accent?: ChipAccent;
+  leftComponent?: (() => ReactNode) | null;
+  rightComponent?: (() => ReactNode) | null;
+  className?: string;
+};
+
+const StyledContainer = withTheme(styled.div<
+  Pick<
+    ChipProps,
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+  > & { theme: Theme }
+>`
+  --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  text-decoration: none;
+  align-items: center;
+
+  color: ${({ theme, accent, disabled }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
+
+  cursor: ${({ clickable, disabled, variant }) =>
+    variant === ChipVariant.Transparent
+      ? 'inherit'
+      : clickable
+        ? 'pointer'
+        : disabled
+          ? 'not-allowed'
+          : 'inherit'};
+
+  display: inline-flex;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme, size }) =>
+    size === ChipSize.Large ? theme.spacing(4) : theme.spacing(3)};
+  max-width: ${({ maxWidth }) =>
+    maxWidth
+      ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
+      : '200px'};
+  overflow: hidden;
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
+  user-select: none;
+
+  font-weight: ${({ theme, accent }) =>
+    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
+
+  &:hover {
+    background-color: ${({ theme, variant, disabled }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.light
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.medium
+          : 'inherit'};
+  }
+
+  &:active {
+    background-color: ${({ theme, disabled, variant }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.medium
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.strong
+          : 'inherit'};
+  }
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+        ? theme.background.transparent.lighter
+        : 'inherit'};
+
+  border: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded
+      ? `1px solid ${theme.border.color.medium}`
+      : 'none'};
+
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+
+  & > svg {
+    flex-shrink: 0;
+  }
+
+  padding-left: ${({ theme, variant }) =>
+    variant === ChipVariant.Transparent
+      ? theme.spacing(0)
+      : 'var(--chip-horizontal-padding)'};
+`);
+
+export const Chip = ({
+  size = ChipSize.Small,
+  label,
+  isLabelHidden = false,
+  disabled = false,
+  clickable = true,
+  variant = ChipVariant.Regular,
+  leftComponent = null,
+  rightComponent = null,
+  accent = ChipAccent.TextPrimary,
+  className,
+  maxWidth,
+}: ChipProps) => {
+  return (
+    <StyledContainer
+      data-testid="chip"
+      accent={accent}
+      clickable={clickable}
+      disabled={disabled}
+      size={size}
+      variant={variant}
+      className={className}
+      maxWidth={maxWidth}
+    >
+      {leftComponent?.()}
+      {!isLabelHidden && (
+        <OverflowingTextWithTooltip size={size} text={label} />
+      )}
+      {rightComponent?.()}
+    </StyledContainer>
+  );
+};

packages/twenty-ui/src/components/chip/LinkChip.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+import {
+  Chip,
+  ChipAccent,
+  ChipProps,
+  ChipSize,
+  ChipVariant,
+} from '@ui/components/chip/Chip';
+import { MouseEvent } from 'react';
+import { Link } from 'react-router-dom';
+
+export type LinkChipProps = Omit<
+  ChipProps,
+  'onClick' | 'disabled' | 'clickable'
+> & {
+  to: string;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+// Ideally we would use the UndecoratedLink component from @ui/navigation
+// but it led to a bug probably linked to circular dependencies, which was hard to solve
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
+
+export const LinkChip = ({
+  to,
+  size = ChipSize.Small,
+  label,
+  isLabelHidden = false,
+  variant = ChipVariant.Regular,
+  leftComponent = null,
+  rightComponent = null,
+  accent = ChipAccent.TextPrimary,
+  className,
+  maxWidth,
+  onClick,
+}: LinkChipProps) => {
+  return (
+    <StyledLink to={to} onClick={onClick}>
+      <Chip
+        size={size}
+        label={label}
+        isLabelHidden={isLabelHidden}
+        clickable={true}
+        variant={variant}
+        leftComponent={leftComponent}
+        rightComponent={rightComponent}
+        accent={accent}
+        className={className}
+        maxWidth={maxWidth}
+      />
+    </StyledLink>
+  );
+};

packages/twenty-ui/src/components/chip/__stories__/Chip.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
+
+import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'UI/Display/Chip/Chip',
+  component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    label: 'Chip test',
+    size: ChipSize.Small,
+    variant: ChipVariant.Highlighted,
+    accent: ChipAccent.TextPrimary,
+    disabled: false,
+    clickable: true,
+    maxWidth: 200,
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof Chip> = {
+  args: { clickable: true, label: 'Hello' },
+  argTypes: {
+    size: { control: false },
+    variant: { control: false },
+    disabled: { control: false },
+    className: { control: false },
+    rightComponent: { control: false },
+    leftComponent: { control: false },
+  },
+  parameters: {
+    pseudo: { hover: ['.hover'], active: ['.active'] },
+    catalog: {
+      dimensions: [
+        {
+          name: 'states',
+          values: ['default', 'hover', 'active', 'disabled'],
+          props: (state: string) =>
+            state === 'default' ? {} : { className: state },
+        },
+        {
+          name: 'variants',
+          values: Object.values(ChipVariant),
+          props: (variant: ChipVariant) => ({ variant }),
+        },
+        {
+          name: 'sizes',
+          values: Object.values(ChipSize),
+          props: (size: ChipSize) => ({ size }),
+        },
+        {
+          name: 'accents',
+          values: Object.values(ChipAccent),
+          props: (accent: ChipAccent) => ({ accent }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

packages/twenty-ui/src/components/chip/__stories__/EntityChip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AvatarChip } from '@ui/components/avatar-chip/AvatarChip';
+
+import {
+  ComponentDecorator,
+  RecoilRootDecorator,
+  RouterDecorator,
+} from '@ui/testing';
+
+const meta: Meta<typeof AvatarChip> = {
+  title: 'UI/Display/Chip/AvatarChip',
+  component: AvatarChip,
+  decorators: [RouterDecorator, ComponentDecorator, RecoilRootDecorator],
+  args: {
+    name: 'Entity name',
+    avatarType: 'squared',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarChip>;
+
+export const Default: Story = {};