Migrate more to Jotai (#17903)

Here we go again

packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts

@@ -1,9 +1,8 @@
-import { useRecoilState } from 'recoil';
-
 import { iconPickerState } from '@/ui/input/states/iconPickerState';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 
 export const useIconPicker = () => {
-  const [iconPicker, setIconPicker] = useRecoilState(iconPickerState);
+  const [iconPicker, setIconPicker] = useRecoilStateV2(iconPickerState);
 
   return {
     Icon: iconPicker.Icon,

packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts

@@ -1,4 +1,4 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 import { IconApps, type IconComponent } from 'twenty-ui/display';
 
 type IconPickerState = {
@@ -6,7 +6,7 @@ type IconPickerState = {
   iconKey: string;
 };
 
-export const iconPickerState = createState<IconPickerState>({
+export const iconPickerState = createStateV2<IconPickerState>({
   key: 'iconPickerState',
   defaultValue: { Icon: IconApps, iconKey: 'IconApps' },
 });

packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx

@@ -1,5 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
+import { Provider } from 'jotai';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 import { stepBarInternalState } from '@/ui/navigation/step-bar/states/stepBarInternalState';
 import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
@@ -10,7 +11,7 @@ const renderHooks = (initialStep: number) => {
       const { nextStep, prevStep, reset, setStep } = useStepBar({
         initialStep,
       });
-      const stepBarInternal = useRecoilValue(stepBarInternalState);
+      const stepBarInternal = useRecoilValueV2(stepBarInternalState);
 
       return {
         nextStep,
@@ -21,7 +22,7 @@ const renderHooks = (initialStep: number) => {
       };
     },
     {
-      wrapper: RecoilRoot,
+      wrapper: Provider,
     },
   );
 

packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
-import { useRecoilState } from 'recoil';
 
 import { stepBarInternalState } from '@/ui/navigation/step-bar/states/stepBarInternalState';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 
 export type StepsOptions = {
   initialStep: number;
@@ -9,7 +9,7 @@ export type StepsOptions = {
 
 export const useStepBar = ({ initialStep }: StepsOptions) => {
   const [stepBarInternal, setStepBarInternal] =
-    useRecoilState(stepBarInternalState);
+    useRecoilStateV2(stepBarInternalState);
 
   const nextStep = () => {
     setStepBarInternal((prevState) => ({

packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts

@@ -1,9 +1,9 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 export type StepsState = {
   activeStep: number;
 };
 
-export const stepBarInternalState = createState<StepsState>({
+export const stepBarInternalState = createStateV2<StepsState>({
   key: 'step-bar/internal-state',
   defaultValue: {
     activeStep: -1,