5421 box shadow on frozen header and first column (#6130)

- Refactored components in table
- Added a isTableRecordScrolledLeftState and
isTableRecordScrolledTopState to subscribe to table scroll
- Added a zIndex logic that subscribes to those new states in new tinier
components

---------

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

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

@@ -0,0 +1,17 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+
+export const AnimatedContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <motion.div
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.1 }}
+    whileHover={{ scale: 1.04 }}
+  >
+    {children}
+  </motion.div>
+);

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts

@@ -0,0 +1,29 @@
+import { useRecoilValue } from 'recoil';
+
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+
+export const useRecoilComponentValue = <StateType>(
+  componentState: ComponentState<StateType>,
+  componentId?: string,
+) => {
+  const componentContext = (window as any).componentContextStateMap?.get(
+    componentState.key,
+  );
+
+  if (!componentContext) {
+    throw new Error(
+      `Component context for key "${componentState.key}" is not defined`,
+    );
+  }
+
+  const internalComponentId = useAvailableScopeIdOrThrow(
+    componentContext,
+    getScopeIdOrUndefinedFromComponentId(componentId),
+  );
+
+  return useRecoilValue(
+    componentState.atomFamily({ scopeId: internalComponentId }),
+  );
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts

@@ -0,0 +1,29 @@
+import { useSetRecoilState } from 'recoil';
+
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+
+export const useSetRecoilComponentState = <StateType>(
+  componentState: ComponentState<StateType>,
+  componentId?: string,
+) => {
+  const componentContext = (window as any).componentContextStateMap?.get(
+    componentState.key,
+  );
+
+  if (!componentContext) {
+    throw new Error(
+      `Component context for key "${componentState.key}" is not defined`,
+    );
+  }
+
+  const internalComponentId = useAvailableScopeIdOrThrow(
+    componentContext,
+    getScopeIdOrUndefinedFromComponentId(componentId),
+  );
+
+  return useSetRecoilState(
+    componentState.atomFamily({ scopeId: internalComponentId }),
+  );
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentState.ts

@@ -0,0 +1,8 @@
+import { RecoilState } from 'recoil';
+
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+
+export type ComponentState<StateType> = {
+  key: string;
+  atomFamily: (componentStateKey: ComponentStateKey) => RecoilState<StateType>;
+};

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts

@@ -2,15 +2,17 @@ import { AtomEffect, atomFamily } from 'recoil';
 
 import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
 
+type CreateComponentStateType<ValueType> = {
+  key: string;
+  defaultValue: ValueType;
+  effects?: AtomEffect<ValueType>[];
+};
+
 export const createComponentState = <ValueType>({
   key,
   defaultValue,
   effects,
-}: {
-  key: string;
-  defaultValue: ValueType;
-  effects?: AtomEffect<ValueType>[];
-}) => {
+}: CreateComponentStateType<ValueType>) => {
   return atomFamily<ValueType, ComponentStateKey>({
     key,
     default: defaultValue,

packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts

@@ -0,0 +1,37 @@
+import { AtomEffect, atomFamily } from 'recoil';
+
+import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext';
+import { ComponentState } from '@/ui/utilities/state/component-state/types/ComponentState';
+import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey';
+import { isDefined } from '~/utils/isDefined';
+
+type CreateComponentStateV2Type<ValueType> = {
+  key: string;
+  defaultValue: ValueType;
+  componentContext?: ScopeInternalContext<any> | null;
+  effects?: AtomEffect<ValueType>[];
+};
+
+export const createComponentStateV2 = <ValueType>({
+  key,
+  defaultValue,
+  componentContext,
+  effects,
+}: CreateComponentStateV2Type<ValueType>): ComponentState<ValueType> => {
+  if (isDefined(componentContext)) {
+    if (!isDefined((window as any).componentContextStateMap)) {
+      (window as any).componentContextStateMap = new Map();
+    }
+
+    (window as any).componentContextStateMap.set(key, componentContext);
+  }
+
+  return {
+    key,
+    atomFamily: atomFamily<ValueType, ComponentStateKey>({
+      key,
+      default: defaultValue,
+      effects: effects,
+    }),
+  };
+};