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/ui/navigation/action-bar/components/ActionBar.tsx

@@ -28,8 +28,8 @@ const StyledContainerActionBar = styled.div`
 `;
 
 export const ActionBar = () => {
-  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
-  const actionBarEntries = useRecoilValue(actionBarEntriesState);
+  const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
+  const actionBarEntries = useRecoilValue(actionBarEntriesState());
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   if (contextMenuIsOpen) {

packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -9,7 +9,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState';
 import { ActionBar } from '../ActionBar';
 
 const FilledActionBar = () => {
-  const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
+  const setActionBarOpenState = useSetRecoilState(actionBarOpenState());
   setActionBarOpenState(true);
   return <ActionBar />;
 };

packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts

@@ -1,8 +1,8 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 import { ActionBarEntry } from '../types/ActionBarEntry';
 
-export const actionBarEntriesState = atom<ActionBarEntry[]>({
+export const actionBarEntriesState = createState<ActionBarEntry[]>({
   key: 'actionBarEntriesState',
-  default: [],
+  defaultValue: [],
 });

packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts

@@ -1,6 +1,6 @@
-import { atom } from 'recoil';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
-export const actionBarOpenState = atom<boolean>({
+export const actionBarOpenState = createState<boolean>({
   key: 'actionBarOpenState',
-  default: false,
+  defaultValue: false,
 });