Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/display/checkmark/components/AnimatedCheckmark.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from '@emotion/react';
+import { motion } from 'framer-motion';
+
+export type AnimatedCheckmarkProps = React.ComponentProps<
+  typeof motion.path
+> & {
+  isAnimating?: boolean;
+  color?: string;
+  duration?: number;
+  size?: number;
+};
+
+export const AnimatedCheckmark = ({
+  isAnimating = false,
+  color,
+  duration = 0.5,
+  size = 28,
+}: AnimatedCheckmarkProps) => {
+  const theme = useTheme();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      width={size}
+      height={size}
+    >
+      <motion.path
+        fill="none"
+        stroke={color ?? theme.grayScale.gray0}
+        strokeWidth={4}
+        d="M14 27l7.8 7.8L38 14"
+        pathLength="1"
+        strokeDasharray="1"
+        strokeDashoffset={isAnimating ? '1' : '0'}
+        animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
+        transition={{ duration }}
+      />
+    </svg>
+  );
+};

packages/twenty-front/src/modules/ui/display/checkmark/components/Checkmark.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconCheck } from '@/ui/display/icon';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.blue};
+  border-radius: 50%;
+  display: flex;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+`;
+
+export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'> & {
+  className?: string;
+};
+
+export const Checkmark = ({ className }: CheckmarkProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledContainer className={className}>
+      <IconCheck color={theme.grayScale.gray0} size={14} />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/ui/display/checkmark/components/__stories__/Checkmark.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { Checkmark } from '../Checkmark';
+
+const meta: Meta<typeof Checkmark> = {
+  title: 'UI/Display/Checkmark/Checkmark',
+  component: Checkmark,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkmark>;
+
+export const Default: Story = { args: {} };
+
+export const WithCustomStyles: Story = {
+  args: { style: { backgroundColor: 'red', height: 40, width: 40 } },
+};

packages/twenty-front/src/modules/ui/display/chip/components/Chip.tsx

@@ -0,0 +1,148 @@
+import { MouseEvent, ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { OverflowingTextWithTooltip } from '../../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',
+}
+
+type ChipProps = {
+  size?: ChipSize;
+  disabled?: boolean;
+  clickable?: boolean;
+  label: string;
+  maxWidth?: string;
+  variant?: ChipVariant;
+  accent?: ChipAccent;
+  leftComponent?: ReactNode;
+  rightComponent?: ReactNode;
+  className?: string;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+
+const StyledContainer = styled.div<Partial<ChipProps>>`
+  align-items: center;
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+        ? theme.background.transparent.lighter
+        : 'transparent'};
+  border-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? theme.border.color.medium : 'none'};
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+  border-style: ${({ variant }) =>
+    variant === ChipVariant.Rounded ? 'solid' : 'none'};
+  border-width: ${({ variant }) =>
+    variant === ChipVariant.Rounded ? '1px' : '0px'};
+
+  color: ${({ theme, disabled, accent }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
+  cursor: ${({ clickable, disabled, variant }) =>
+    disabled || variant === ChipVariant.Transparent
+      ? 'inherit'
+      : clickable
+        ? 'pointer'
+        : 'inherit'};
+  display: inline-flex;
+  font-weight: ${({ theme, accent }) =>
+    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')};
+
+  overflow: hidden;
+  padding: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '3px 8px' : theme.spacing(1)};
+  user-select: none;
+
+  :hover {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.medium
+            : variant === ChipVariant.Regular
+              ? theme.background.transparent.light
+              : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+  :active {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.strong
+            : variant === ChipVariant.Regular
+              ? theme.background.transparent.medium
+              : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+`;
+
+const StyledLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const Chip = ({
+  size = ChipSize.Small,
+  label,
+  disabled = false,
+  clickable = true,
+  variant = ChipVariant.Regular,
+  leftComponent,
+  rightComponent,
+  accent = ChipAccent.TextPrimary,
+  maxWidth,
+  className,
+  onClick,
+}: ChipProps) => (
+  <StyledContainer
+    data-testid="chip"
+    clickable={clickable}
+    variant={variant}
+    accent={accent}
+    size={size}
+    disabled={disabled}
+    className={className}
+    maxWidth={maxWidth}
+    onClick={onClick}
+  >
+    {leftComponent}
+    <StyledLabel>
+      <OverflowingTextWithTooltip text={label} />
+    </StyledLabel>
+    {rightComponent}
+  </StyledContainer>
+);

packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Avatar, AvatarType } from '@/users/components/Avatar';
+
+import { Chip, ChipVariant } from './Chip';
+
+export type EntityChipProps = {
+  linkToEntity?: string;
+  entityId: string;
+  name: string;
+  avatarUrl?: string;
+  avatarType?: AvatarType;
+  variant?: EntityChipVariant;
+  LeftIcon?: IconComponent;
+  className?: string;
+};
+
+export enum EntityChipVariant {
+  Regular = 'regular',
+  Transparent = 'transparent',
+}
+
+export const EntityChip = ({
+  linkToEntity,
+  entityId,
+  name,
+  avatarUrl,
+  avatarType = 'rounded',
+  variant = EntityChipVariant.Regular,
+  LeftIcon,
+  className,
+}: EntityChipProps) => {
+  const navigate = useNavigate();
+
+  const theme = useTheme();
+
+  const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (linkToEntity) {
+      event.preventDefault();
+      event.stopPropagation();
+      navigate(linkToEntity);
+    }
+  };
+
+  return isNonEmptyString(name) ? (
+    <Chip
+      label={name}
+      variant={
+        linkToEntity
+          ? variant === EntityChipVariant.Regular
+            ? ChipVariant.Highlighted
+            : ChipVariant.Regular
+          : ChipVariant.Transparent
+      }
+      leftComponent={
+        LeftIcon ? (
+          <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        ) : (
+          <Avatar
+            avatarUrl={avatarUrl}
+            colorId={entityId}
+            placeholder={name}
+            size="sm"
+            type={avatarType}
+          />
+        )
+      }
+      clickable={!!linkToEntity}
+      onClick={handleLinkClick}
+      className={className}
+    />
+  ) : (
+    <></>
+  );
+};

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

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+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: '200px',
+  },
+  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-front/src/modules/ui/display/chip/components/__stories__/EntityChip.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { EntityChip } from '../EntityChip';
+
+const meta: Meta<typeof EntityChip> = {
+  title: 'UI/Display/Chip/EntityChip',
+  component: EntityChip,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    name: 'Entity name',
+    linkToEntity: '/entity-link',
+    avatarType: 'squared',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EntityChip>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/ui/display/color/components/ColorSample.tsx

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type ColorSampleVariant = 'default' | 'pipeline';
+
+const StyledColorSample = styled.div<{
+  colorName: ThemeColor;
+  variant?: ColorSampleVariant;
+}>`
+  background-color: ${({ theme, colorName }) =>
+    theme.tag.background[colorName]};
+  border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};
+  border-radius: 60px;
+  height: ${({ theme }) => theme.spacing(4)};
+  width: ${({ theme }) => theme.spacing(3)};
+
+  ${({ colorName, theme, variant }) => {
+    if (variant === 'pipeline')
+      return css`
+        align-items: center;
+        border: 0;
+        display: flex;
+        justify-content: center;
+
+        &:after {
+          background-color: ${theme.tag.text[colorName]};
+          border-radius: ${theme.border.radius.rounded};
+          content: '';
+          display: block;
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+        }
+      `;
+  }}
+`;
+
+export { StyledColorSample as ColorSample };

packages/twenty-front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ColorSample } from '../ColorSample';
+
+const meta: Meta<typeof ColorSample> = {
+  title: 'UI/Display/Color/ColorSample',
+  component: ColorSample,
+  decorators: [ComponentDecorator],
+  args: { colorName: 'green' },
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorSample>;
+
+export const Default: Story = {};
+
+export const Pipeline: Story = {
+  args: { variant: 'pipeline' },
+};

packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-address-book" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z" />
+  <path d="M10 16h6" />
+  <path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M4 8h3" />
+  <path d="M4 12h3" />
+  <path d="M4 16h3" />
+</svg>

packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<path d="M6.06216 1.53416C6.38434 0.663593 7.61566 0.663591 7.93784 1.53416L9.00134 4.40789C9.10263 4.68158 9.31842 4.89737 9.59211 4.99866L12.4658 6.06216C13.3364 6.38434 13.3364 7.61566 12.4658 7.93784L9.59211 9.00134C9.31842 9.10263 9.10263 9.31842 9.00134 9.59211L7.93784 12.4658C7.61566 13.3364 6.38434 13.3364 6.06216 12.4658L4.99866 9.59211C4.89737 9.31842 4.68158 9.10263 4.40789 9.00134L1.53416 7.93784C0.663593 7.61566 0.663591 6.38434 1.53416 6.06216L4.40789 4.99866C4.68158 4.89737 4.89737 4.68158 4.99866 4.40789L6.06216 1.53416Z" fill="currentColor"/>
+</svg>

packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M10.4673 3.06709C10.9938 1.64431 13.0062 1.6443 13.5327 3.06709L15.2708 7.76367C15.4364 8.21097 15.789 8.56364 16.2363 8.72917L20.9329 10.4673C22.3557 10.9938 22.3557 13.0062 20.9329 13.5327L16.2363 15.2708C15.789 15.4364 15.4364 15.789 15.2708 16.2363L13.5327 20.9329C13.0062 22.3557 10.9938 22.3557 10.4673 20.9329L8.72917 16.2363C8.56364 15.789 8.21097 15.4364 7.76367 15.2708L3.06709 13.5327C1.64431 13.0062 1.6443 10.9938 3.06709 10.4673L7.76367 8.72917C8.21097 8.56364 8.56364 8.21097 8.72917 7.76367L10.4673 3.06709Z" stroke="currentColor" />
+</svg>

packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx

@@ -0,0 +1,12 @@
+import { TablerIconsProps } from '@/ui/display/icon';
+
+import IconAddressBookRaw from '../assets/address-book.svg?react';
+
+type IconAddressBookProps = TablerIconsProps;
+
+export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => {
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? 2;
+
+  return <IconAddressBookRaw height={size} width={size} strokeWidth={stroke} />;
+};

packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconGoogleRaw from '../assets/google-icon.svg?react';
+
+interface IconGoogleProps {
+  size?: number;
+}
+
+export const IconGoogle = (props: IconGoogleProps): JSX.Element => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return <IconGoogleRaw height={size} width={size} />;
+};

packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx

@@ -0,0 +1,12 @@
+import { TablerIconsProps } from '@/ui/display/icon';
+
+import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
+
+type IconTwentyStarProps = TablerIconsProps;
+
+export const IconTwentyStar = (props: IconTwentyStarProps): JSX.Element => {
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? 2;
+
+  return <IconTwentyStarRaw height={size} width={size} strokeWidth={stroke} />;
+};

packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx

@@ -0,0 +1,16 @@
+import { TablerIconsProps } from '@/ui/display/icon';
+
+import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
+
+type IconTwentyStarFilledProps = TablerIconsProps;
+
+export const IconTwentyStarFilled = (
+  props: IconTwentyStarFilledProps,
+): JSX.Element => {
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? 2;
+
+  return (
+    <IconTwentyStarFilledRaw height={size} width={size} strokeWidth={stroke} />
+  );
+};

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -0,0 +1,94 @@
+/* eslint-disable no-restricted-imports */
+export type { TablerIconsProps } from '@tabler/icons-react';
+export {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconArchive,
+  IconArchiveOff,
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUp,
+  IconArrowUpRight,
+  IconAt,
+  IconBaselineDensitySmall,
+  IconBell,
+  IconBox,
+  IconBrandGithub,
+  IconBrandGoogle,
+  IconBrandLinkedin,
+  IconBrandX,
+  IconBriefcase,
+  IconBuildingSkyscraper,
+  IconCalendar,
+  IconCalendarEvent,
+  IconCheck,
+  IconCheckbox,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsRight,
+  IconChevronUp,
+  IconCircleDot,
+  IconCoins,
+  IconColorSwatch,
+  IconMessageCircle as IconComment,
+  IconCopy,
+  IconCurrencyDollar,
+  IconDatabase,
+  IconDotsVertical,
+  IconDownload,
+  IconEye,
+  IconEyeOff,
+  IconFileCheck,
+  IconFileImport,
+  IconFileUpload,
+  IconForbid,
+  IconGripVertical,
+  IconHeart,
+  IconHeartOff,
+  IconHelpCircle,
+  IconHierarchy2,
+  IconKey,
+  IconLanguage,
+  IconLayoutKanban,
+  IconLayoutSidebarLeftCollapse,
+  IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
+  IconLink,
+  IconLinkOff,
+  IconList,
+  IconLogout,
+  IconMail,
+  IconMailCog,
+  IconMap,
+  IconMinus,
+  IconMoneybag,
+  IconMouse2,
+  IconNotes,
+  IconNumbers,
+  IconPaperclip,
+  IconPencil,
+  IconPhone,
+  IconPlug,
+  IconPlus,
+  IconProgressCheck,
+  IconRelationManyToMany,
+  IconRelationOneToMany,
+  IconRelationOneToOne,
+  IconRepeat,
+  IconRobot,
+  IconSearch,
+  IconSettings,
+  IconTag,
+  IconTarget,
+  IconTargetArrow,
+  IconTextSize,
+  IconTimelineEvent,
+  IconTrash,
+  IconUpload,
+  IconUser,
+  IconUserCircle,
+  IconUsers,
+  IconX,
+} from '@tabler/icons-react';

packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+
+export type IconComponent = FunctionComponent<{
+  className?: string;
+  color?: string;
+  size?: number;
+  stroke?: number;
+}>;

packages/twenty-front/src/modules/ui/display/pill/components/SoonPill.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+
+type SoonPillProps = {
+  className?: string;
+};
+
+const StyledSoonPill = styled.span`
+  align-items: center;
+  background: ${({ theme }) => theme.background.transparent.light};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  color: ${({ theme }) => theme.font.color.light};
+  display: inline-block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(4)};
+  justify-content: flex-end;
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  padding: ${({ theme }) => `0 ${theme.spacing(2)}`};
+`;
+
+export const SoonPill = ({ className }: SoonPillProps) => (
+  <StyledSoonPill className={className}>Soon</StyledSoonPill>
+);

packages/twenty-front/src/modules/ui/display/pill/components/__stories__/SoonPill.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { SoonPill } from '../SoonPill';
+
+const meta: Meta<typeof SoonPill> = {
+  title: 'UI/Display/Pill/SoonPill',
+  component: SoonPill,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SoonPill>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/ui/display/status/components/Status.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import { ThemeColor } from '@/ui/theme/constants/colors';
+import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
+
+const StyledStatus = styled.h3<{
+  color: ThemeColor;
+}>`
+  align-items: center;
+  background: ${({ color, theme }) => theme.tag.background[color]};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  color: ${({ color, theme }) => theme.tag.text[color]};
+  display: inline-flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(5)};
+  margin: 0;
+  overflow: hidden;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+
+  &:before {
+    background-color: ${({ color, theme }) => theme.tag.text[color]};
+    border-radius: ${({ theme }) => theme.border.radius.rounded};
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    height: ${({ theme }) => theme.spacing(1)};
+    width: ${({ theme }) => theme.spacing(1)};
+  }
+`;
+
+const StyledContent = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+type StatusProps = {
+  className?: string;
+  color: ThemeColor;
+  text: string;
+  onClick?: () => void;
+};
+
+export const Status = ({ className, color, text, onClick }: StatusProps) => (
+  <StyledStatus
+    className={className}
+    color={themeColorSchema.catch('gray').parse(color)}
+    onClick={onClick}
+  >
+    <StyledContent>{text}</StyledContent>
+  </StyledStatus>
+);

packages/twenty-front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { Status } from '../Status';
+
+const meta: Meta<typeof Status> = {
+  title: 'UI/Display/Status/Status',
+  component: Status,
+  args: {
+    text: 'Urgent',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Status>;
+
+export const Default: Story = {
+  args: {
+    color: 'red',
+    onClick: fn(),
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const status = canvas.getByRole('heading', { level: 3 });
+
+    await userEvent.click(status);
+    expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const WithLongText: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Status> = {
+  argTypes: {
+    color: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'colors',
+          values: mainColorNames,
+          props: (color: ThemeColor) => ({ color }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+
+import { ThemeColor } from '@/ui/theme/constants/colors';
+import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
+
+const StyledTag = styled.h3<{
+  color: ThemeColor;
+}>`
+  align-items: center;
+  background: ${({ color, theme }) => theme.tag.background[color]};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ color, theme }) => theme.tag.text[color]};
+  display: inline-flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  height: ${({ theme }) => theme.spacing(5)};
+  margin: 0;
+  overflow: hidden;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledContent = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+type TagProps = {
+  className?: string;
+  color: ThemeColor;
+  text: string;
+  onClick?: () => void;
+};
+
+export const Tag = ({ className, color, text, onClick }: TagProps) => (
+  <StyledTag
+    className={className}
+    color={themeColorSchema.catch('gray').parse(color)}
+    onClick={onClick}
+  >
+    <StyledContent>{text}</StyledContent>
+  </StyledTag>
+);

packages/twenty-front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { Tag } from '../Tag';
+
+const meta: Meta<typeof Tag> = {
+  title: 'UI/Display/Tag/Tag',
+  component: Tag,
+  args: {
+    text: 'Urgent',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {
+  args: {
+    color: 'red',
+    onClick: fn(),
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const tag = canvas.getByRole('heading', { level: 3 });
+
+    await userEvent.click(tag);
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const WithLongText: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  parameters: {
+    container: { width: 100 },
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Tag> = {
+  argTypes: {
+    color: { control: false },
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'colors',
+          values: mainColorNames,
+          props: (color: ThemeColor) => ({ color }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

packages/twenty-front/src/modules/ui/display/tooltip/AppTooltip.tsx

@@ -0,0 +1,70 @@
+import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
+import styled from '@emotion/styled';
+
+import { rgba } from '../../theme/constants/colors';
+
+export enum TooltipPosition {
+  Top = 'top',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+}
+
+const StyledAppTooltip = styled(Tooltip)`
+  backdrop-filter: ${({ theme }) => theme.blur.strong};
+  background-color: ${({ theme }) => rgba(theme.color.gray80, 0.8)};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  color: ${({ theme }) => theme.grayScale.gray0};
+
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+
+  max-width: 40%;
+  overflow: visible;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  word-break: break-word;
+
+  z-index: ${({ theme }) => theme.lastLayerZIndex};
+`;
+
+export type AppTooltipProps = {
+  className?: string;
+  anchorSelect?: string;
+  content?: string;
+  delayHide?: number;
+  offset?: number;
+  noArrow?: boolean;
+  isOpen?: boolean;
+  place?: PlacesType;
+  positionStrategy?: PositionStrategy;
+};
+
+export const AppTooltip = ({
+  anchorSelect,
+  className,
+  content,
+  delayHide,
+  isOpen,
+  noArrow,
+  offset,
+  place,
+  positionStrategy,
+}: AppTooltipProps) => (
+  <StyledAppTooltip
+    {...{
+      anchorSelect,
+      className,
+      content,
+      delayHide,
+      isOpen,
+      noArrow,
+      offset,
+      place,
+      positionStrategy,
+    }}
+  />
+);

packages/twenty-front/src/modules/ui/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import { v4 as uuidV4 } from 'uuid';
+
+import { AppTooltip } from './AppTooltip';
+
+const StyledOverflowingText = styled.div<{ cursorPointer: boolean }>`
+  cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
+  font-family: inherit;
+  font-size: inherit;
+
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: inherit;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const OverflowingTextWithTooltip = ({
+  text,
+  className,
+}: {
+  text: string | null | undefined;
+  className?: string;
+}) => {
+  const textElementId = `title-id-${uuidV4()}`;
+
+  const textRef = useRef<HTMLDivElement>(null);
+
+  const [isTitleOverflowing, setIsTitleOverflowing] = useState(false);
+
+  useEffect(() => {
+    const isOverflowing =
+      (text?.length ?? 0) > 0 && textRef.current
+        ? textRef.current?.scrollHeight > textRef.current?.clientHeight ||
+          textRef.current.scrollWidth > textRef.current.clientWidth
+        : false;
+
+    if (isTitleOverflowing !== isOverflowing) {
+      setIsTitleOverflowing(isOverflowing);
+    }
+  }, [isTitleOverflowing, text]);
+
+  const handleTooltipClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+
+  return (
+    <>
+      <StyledOverflowingText
+        data-testid="tooltip"
+        className={className}
+        ref={textRef}
+        id={textElementId}
+        cursorPointer={isTitleOverflowing}
+      >
+        {text}
+      </StyledOverflowingText>
+      {isTitleOverflowing &&
+        createPortal(
+          <div onClick={handleTooltipClick}>
+            <AppTooltip
+              anchorSelect={`#${textElementId}`}
+              content={text ?? ''}
+              delayHide={0}
+              offset={5}
+              noArrow
+              place="bottom"
+              positionStrategy="absolute"
+            />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+};

packages/twenty-front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { OverflowingTextWithTooltip } from '../OverflowingTextWithTooltip';
+
+const placeholderText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere.';
+
+const meta: Meta<typeof OverflowingTextWithTooltip> = {
+  title: 'UI/Display/Tooltip/OverflowingTextWithTooltip',
+  component: OverflowingTextWithTooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof OverflowingTextWithTooltip>;
+
+export const Default: Story = {
+  args: {
+    text: placeholderText,
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = await canvas.findByTestId('tooltip');
+    userEvent.hover(tooltip);
+  },
+};

packages/twenty-front/src/modules/ui/display/tooltip/__stories__/Tooltip.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'UI/Display/Tooltip/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    place: TooltipPosition.Bottom,
+    content: 'Tooltip Test',
+    isOpen: true,
+    anchorSelect: '#hover-text',
+  },
+  decorators: [ComponentDecorator],
+  render: ({
+    anchorSelect,
+    className,
+    content,
+    delayHide,
+    isOpen,
+    noArrow,
+    offset,
+    place,
+    positionStrategy,
+  }) => (
+    <>
+      <p id="hover-text" data-testid="tooltip">
+        Hover me!
+      </p>
+      <Tooltip
+        {...{
+          anchorSelect,
+          className,
+          content,
+          delayHide,
+          isOpen,
+          noArrow,
+          offset,
+          place,
+          positionStrategy,
+        }}
+      />
+    </>
+  ),
+};
+
+export const Catalog: CatalogStory<Story, typeof Tooltip> = {
+  args: { isOpen: true, content: 'Tooltip Test' },
+  play: async ({ canvasElement }) => {
+    Object.values(TooltipPosition).forEach((position) => {
+      const element = canvasElement.querySelector(
+        `#${position}`,
+      ) as HTMLElement;
+      element.style.margin = '75px';
+    });
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'anchorSelect',
+          values: Object.values(TooltipPosition),
+          props: (anchorSelect: TooltipPosition) => ({
+            anchorSelect: `#${anchorSelect}`,
+            place: anchorSelect,
+          }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};

packages/twenty-front/src/modules/ui/display/typography/components/H1Title.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+
+type H1TitleProps = {
+  title: string;
+  fontColor?: H1TitleFontColor;
+  className?: string;
+};
+
+export enum H1TitleFontColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Tertiary = 'tertiary',
+}
+
+const StyledTitle = styled.h2<{
+  fontColor: H1TitleFontColor;
+}>`
+  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  margin: 0;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+export const H1Title = ({
+  title,
+  fontColor = H1TitleFontColor.Tertiary,
+  className,
+}: H1TitleProps) => {
+  return (
+    <StyledTitle fontColor={fontColor} className={className}>
+      {title}
+    </StyledTitle>
+  );
+};

packages/twenty-front/src/modules/ui/display/typography/components/H2Title.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+type H2TitleProps = {
+  title: string;
+  description?: string;
+  addornment?: React.ReactNode;
+  className?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTitleContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledTitle = styled.h2`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin: 0;
+`;
+
+const StyledDescription = styled.h3`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin: 0;
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+export const H2Title = ({
+  title,
+  description,
+  addornment,
+  className,
+}: H2TitleProps) => (
+  <StyledContainer className={className}>
+    <StyledTitleContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {addornment}
+    </StyledTitleContainer>
+    {description && <StyledDescription>{description}</StyledDescription>}
+  </StyledContainer>
+);

packages/twenty-front/src/modules/ui/display/typography/components/__stories__/H1Title.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { H1Title, H1TitleFontColor } from '../H1Title';
+
+const meta: Meta<typeof H1Title> = {
+  title: 'UI/Display/Typography/Title/H1Title',
+  component: H1Title,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H1Title>;
+
+const args = {
+  title: 'Title',
+  fontColor: H1TitleFontColor.Primary,
+};
+
+export const Default: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof H1Title> = {
+  args,
+  decorators: [CatalogDecorator],
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'FontColor',
+          values: Object.values(H1TitleFontColor),
+          props: (fontColor: H1TitleFontColor) => ({ fontColor }),
+        },
+      ],
+    },
+  },
+};

packages/twenty-front/src/modules/ui/display/typography/components/__stories__/H2Title.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { H2Title } from '../H2Title';
+
+const args = {
+  title: 'Sub title',
+  description: 'Lorem ipsum dolor sit amet',
+};
+
+const meta: Meta<typeof H2Title> = {
+  title: 'UI/Display/Typography/Title/H2Title',
+  component: H2Title,
+  decorators: [ComponentDecorator],
+  args: {
+    title: args.title,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof H2Title>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+};
+
+export const WithDescription: Story = {
+  args,
+  decorators: [ComponentDecorator],
+};