refactor: move Checkmark, Avatar, Chip and Tooltip to twenty-ui (#4946)

Split from https://github.com/twentyhq/twenty/pull/4518

Part of #4766

packages/twenty-ui/src/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-ui/src/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/components/TablerIcons';
+
+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-ui/src/display/checkmark/components/__stories__/Checkmark.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+
+import { Checkmark } from '../Checkmark';
+
+const meta: Meta<typeof Checkmark> = {
+  title: 'UI/Display/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 } },
+};