Settings Option Card component (#8456)

fixes - #8195

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/hooks/useExpandedAnimation.ts

@@ -0,0 +1,63 @@
+import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/AdvancedSettingsAnimationDurations';
+import { useEffect, useRef, useState } from 'react';
+import { isDefined } from 'twenty-ui';
+
+type AnimationDimension = 'width' | 'height';
+
+const getTransitionValues = (dimension: AnimationDimension) => ({
+  transition: {
+    opacity: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.opacity },
+    [dimension]: { duration: ADVANCED_SETTINGS_ANIMATION_DURATION.size },
+  },
+});
+
+const commonStyles = (dimension: AnimationDimension) => ({
+  opacity: 0,
+  [dimension]: 0,
+  ...getTransitionValues(dimension),
+});
+
+const advancedSectionAnimationConfig = (
+  isExpanded: boolean,
+  dimension: AnimationDimension,
+  measuredValue?: number,
+) => ({
+  initial: {
+    ...commonStyles(dimension),
+  },
+  animate: {
+    opacity: 1,
+    [dimension]: isExpanded
+      ? dimension === 'width'
+        ? '100%'
+        : measuredValue
+      : 0,
+    ...getTransitionValues(dimension),
+  },
+  exit: {
+    ...commonStyles(dimension),
+  },
+});
+
+export const useExpandedAnimation = (
+  isExpanded: boolean,
+  dimension: AnimationDimension = 'height',
+) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [measuredValue, setMeasuredValue] = useState(0);
+
+  useEffect(() => {
+    if (dimension === 'height' && isDefined(contentRef.current)) {
+      setMeasuredValue(contentRef.current.scrollHeight);
+    }
+  }, [isExpanded, dimension]);
+
+  return {
+    contentRef,
+    motionAnimationVariants: advancedSectionAnimationConfig(
+      isExpanded,
+      dimension,
+      dimension === 'height' ? measuredValue : undefined,
+    ),
+  };
+};

packages/twenty-front/src/modules/settings/hooks/useExpandedHeightAnimation.ts

@@ -1,52 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { isDefined } from 'twenty-ui';
-
-const transitionValues = {
-  transition: {
-    opacity: { duration: 0.2 },
-    height: { duration: 0.4 },
-  },
-};
-
-const commonStyles = {
-  opacity: 0,
-  height: 0,
-  ...transitionValues,
-};
-
-const advancedSectionAnimationConfig = (
-  isExpanded: boolean,
-  measuredHeight: number,
-) => ({
-  initial: {
-    ...commonStyles,
-  },
-  animate: {
-    opacity: 1,
-    height: isExpanded ? measuredHeight : 0,
-    ...transitionValues,
-  },
-  exit: {
-    ...commonStyles,
-  },
-});
-
-export const useExpandedHeightAnimation = (isExpanded: boolean) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [measuredHeight, setMeasuredHeight] = useState(0);
-
-  useEffect(() => {
-    if (isDefined(contentRef.current)) {
-      setMeasuredHeight(contentRef.current.scrollHeight);
-    }
-  }, [isExpanded]);
-
-  return {
-    contentRef,
-    measuredHeight,
-    motionAnimationVariants: advancedSectionAnimationConfig(
-      isExpanded,
-      measuredHeight,
-    ),
-  };
-};