Introduce ComponentState (#4386)

* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -28,12 +28,12 @@ export const AppNavigationDrawer = ({
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
   const currentMobileNavigationDrawer = useRecoilValue(
-    currentMobileNavigationDrawerState,
+    currentMobileNavigationDrawerState(),
   );
   const setIsNavigationDrawerOpen = useSetRecoilState(
     isNavigationDrawerOpenState,
   );
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState());
 
   const isSettingsDrawer = isMobile
     ? currentMobileNavigationDrawer === 'settings'

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -24,11 +24,13 @@ export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
   const { toggleCommandMenu } = useCommandMenu();
   const isTasksPage = useIsTasksPage();
-  const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState);
+  const currentUserDueTaskCount = useRecoilValue(
+    currentUserDueTaskCountState(),
+  );
   const navigate = useNavigate();
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(
-    navigationMemorizedUrlState,
+    navigationMemorizedUrlState(),
   );
 
   return (

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -30,7 +30,7 @@ export const MobileNavigationBar = () => {
     isNavigationDrawerOpenState,
   );
   const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
-    useRecoilState(currentMobileNavigationDrawerState);
+    useRecoilState(currentMobileNavigationDrawerState());
 
   const activeItemName = isNavigationDrawerOpen
     ? currentMobileNavigationDrawer

packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx

@@ -24,7 +24,7 @@ const MobileNavigationDrawerStateSetterEffect = ({
     isNavigationDrawerOpenState,
   );
   const setCurrentMobileNavigationDrawer = useSetRecoilState(
-    currentMobileNavigationDrawerState,
+    currentMobileNavigationDrawerState(),
   );
 
   useEffect(() => {

packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts

@@ -1,6 +1,8 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const currentMobileNavigationDrawerState = atom<'main' | 'settings'>({
+export const currentMobileNavigationDrawerState = createState<
+  'main' | 'settings'
+>({
   key: 'currentMobileNavigationDrawerState',
-  default: 'main',
+  defaultValue: 'main',
 });