Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseIn.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import { motion } from 'framer-motion';
+
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
+type AnimatedEaseInProps = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'initial' | 'animated' | 'transition'
+> & {
+  duration?: AnimationDuration;
+};
+
+export const AnimatedEaseIn = ({
+  children,
+  duration = 'normal',
+}: AnimatedEaseInProps) => {
+  const theme = useTheme();
+  const initial = { opacity: 0 };
+  const animate = { opacity: 1 };
+  const transition = {
+    ease: 'linear',
+    duration: theme.animation.duration[duration],
+  };
+
+  return (
+    <motion.div initial={initial} animate={animate} transition={transition}>
+      {children}
+    </motion.div>
+  );
+};

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedEaseInOut.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from '@emotion/react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
+type AnimatedEaseInOutProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  duration?: AnimationDuration;
+  marginBottom?: string;
+  marginTop?: string;
+  initial?: boolean;
+};
+
+export const AnimatedEaseInOut = ({
+  children,
+  isOpen,
+  marginBottom,
+  marginTop,
+  duration = 'normal',
+  initial = true,
+}: AnimatedEaseInOutProps) => {
+  const theme = useTheme();
+
+  return (
+    <AnimatePresence initial={initial}>
+      {isOpen && (
+        <motion.div
+          initial={{
+            marginBottom: marginBottom ?? 0,
+            marginTop: marginTop ?? 0,
+            height: 0,
+            opacity: 0,
+          }}
+          animate={{ height: 'fit-content', opacity: 1 }}
+          exit={{ height: 0, opacity: 0, marginBottom: 0, marginTop: 0 }}
+          transition={{
+            duration: theme.animation.duration[duration],
+            ease: 'easeInOut',
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedFadeOut.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from '@emotion/react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { AnimationDuration } from '@/ui/theme/constants/animation';
+
+type AnimatedFadeOutProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  duration?: AnimationDuration;
+  marginBottom?: string;
+  marginTop?: string;
+};
+
+export const AnimatedFadeOut = ({
+  isOpen,
+  children,
+  duration = 'normal',
+  marginBottom,
+  marginTop,
+}: AnimatedFadeOutProps) => {
+  const theme = useTheme();
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{
+            opacity: 1,
+            marginBottom: marginBottom ?? 0,
+            marginTop: marginTop ?? 0,
+          }}
+          exit={{ opacity: 0, height: 0, marginBottom: 0, marginTop: 0 }}
+          transition={{
+            duration: theme.animation.duration[duration],
+            ease: 'easeOut',
+          }}
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledContainer = styled(motion.div)`
+  display: flex;
+  overflow: hidden;
+`;
+
+const StyledWord = styled(motion.span)`
+  white-space: pre;
+`;
+
+type AnimatedTextWordProps = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'children'
+> & {
+  text: string;
+};
+
+const containerAnimation = {
+  hidden: { opacity: 0 },
+  visible: (i = 1) => ({
+    opacity: 1,
+    transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+  }),
+};
+
+const childAnimation = {
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    x: 20,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+};
+
+export const AnimatedTextWord = ({ text = '' }: AnimatedTextWordProps) => {
+  const words = useMemo(() => {
+    const words = text.split(' ');
+
+    return words.map((value, index) =>
+      index === words.length - 1 ? value : value + ' ',
+    );
+  }, [text]);
+
+  return (
+    <StyledContainer
+      variants={containerAnimation}
+      initial="hidden"
+      animate="visible"
+    >
+      {words.map((word, index) => (
+        <StyledWord variants={childAnimation} key={index}>
+          {word}
+        </StyledWord>
+      ))}
+    </StyledContainer>
+  );
+};