Migrate twenty ui to jotai (#17900)

## Remove Recoil from twenty-ui

Completely removes the `recoil` dependency from `twenty-ui` by
converting all atoms, hooks, and providers to Jotai equivalents.

### twenty-ui
- `createState` now returns a Jotai `PrimitiveAtom` instead of a Recoil
atom
- `iconsState`, `IconsProvider`, `useIcons` converted to Jotai
(`useSetAtom`, `useAtomValue`)
- `RecoilRootDecorator` now uses Jotai `Provider` (name kept for compat)
- Deleted unused `invalidAvatarUrlsState` (Avatar already uses
`invalidAvatarUrlsAtomV2`)
- Removed `recoil` from `package.json`

### twenty-front
- Created local Recoil `createState` at
`@/ui/utilities/state/utils/createState` for ~112 state files still on
Recoil
- Updated all imports accordingly
- Removed `iconsState` from Recoil snapshot preservation in `useAuth`
(lives in Jotai store now)

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -20,7 +20,6 @@ import {
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manager/contexts/SnackBarComponentInstanceContext';
 import { renderHook } from '@testing-library/react';
-import { iconsState } from 'twenty-ui/display';
 import { SupportDriver } from '~/generated-metadata/graphql';
 
 const redirectSpy = jest.fn();
@@ -159,7 +158,6 @@ describe('useAuth', () => {
     const { result } = renderHook(
       () => {
         const client = useApolloClient();
-        const icons = useRecoilValue(iconsState);
         const workspaceAuthProviders = useRecoilValue(
           workspaceAuthProvidersState,
         );
@@ -175,7 +173,6 @@ describe('useAuth', () => {
           ...useAuth(),
           client,
           state: {
-            icons,
             workspaceAuthProviders,
             billing,
             isDeveloperDefaultSignInPrefilled,
@@ -200,7 +197,6 @@ describe('useAuth', () => {
 
     const { state } = result.current;
 
-    expect(state.icons).toEqual({});
     expect(state.workspaceAuthProviders).toEqual(null);
     expect(state.billing).toBeNull();
     expect(state.isDeveloperDefaultSignInPrefilled).toBe(false);

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -67,7 +67,6 @@ import { i18n } from '@lingui/core';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
-import { iconsState } from 'twenty-ui/display';
 import { cookieStorage } from '~/utils/cookie-storage';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 
@@ -132,7 +131,6 @@ export const useAuth = () => {
 
         const emptySnapshot = snapshot_UNSTABLE();
 
-        const iconsValue = snapshot.getLoadable(iconsState).getValue();
         const authProvidersValue = snapshot
           .getLoadable(workspaceAuthProvidersState)
           .getValue();
@@ -164,7 +162,6 @@ export const useAuth = () => {
           .getValue();
 
         const initialSnapshot = emptySnapshot.map(({ set }) => {
-          set(iconsState, iconsValue);
           set(workspaceAuthProvidersState, authProvidersValue);
           set(billingState, billing);
           set(

packages/twenty-front/src/modules/auth/states/availableWorkspacesState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AvailableWorkspaces } from '~/generated-metadata/graphql';
 
 export const availableWorkspacesState = createState<AvailableWorkspaces>({

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,6 +1,6 @@
 import { type BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type User } from '~/generated-metadata/graphql';
 
 export type CurrentUser = Pick<

packages/twenty-front/src/modules/auth/states/currentUserWorkspaceState.ts

@@ -1,5 +1,5 @@
 import { type ObjectPermissions } from 'twenty-shared/types';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type UserWorkspace } from '~/generated-metadata/graphql';
 
 export type CurrentUserWorkspace = Pick<

packages/twenty-front/src/modules/auth/states/currentWorkspaceDeletedMembersState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type DeletedWorkspaceMember } from '~/generated-metadata/graphql';
 
 export const currentWorkspaceDeletedMembersState = createState<

packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts

@@ -1,5 +1,5 @@
 import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export type CurrentWorkspaceMember = Omit<
   WorkspaceMember,

packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersState.ts

@@ -1,5 +1,5 @@
 import { type PartialWorkspaceMember } from '@/settings/roles/types/RoleWithPartialMembers';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const currentWorkspaceMembersState = createState<
   PartialWorkspaceMember[]

packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import {
   type Application,
   type Role,

packages/twenty-front/src/modules/auth/states/isCurrentUserLoadedState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',
   defaultValue: false,

packages/twenty-front/src/modules/auth/states/loginTokenState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AuthToken } from '~/generated-metadata/graphql';
 
 export const loginTokenState = createState<AuthToken['token'] | null>({

packages/twenty-front/src/modules/auth/states/previousUrlState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',
   defaultValue: '',

packages/twenty-front/src/modules/auth/states/qrCode.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const qrCodeState = createState<string | null>({
   key: 'qrCodeState',

packages/twenty-front/src/modules/auth/states/signInUpModeState.ts

@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',

packages/twenty-front/src/modules/auth/states/signInUpStepState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 export enum SignInUpStep {
   Init = 'init',
   Email = 'email',

packages/twenty-front/src/modules/auth/states/tokenPairState.ts

@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 import { type AuthTokenPair } from '~/generated-metadata/graphql';
 import { cookieStorageEffect } from '~/utils/recoil/cookieStorageEffect';
 

packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts

@@ -1,5 +1,5 @@
 import { type PublicWorkspaceDataOutput } from '~/generated-metadata/graphql';
-import { createState } from 'twenty-ui/utilities';
+import { createState } from '@/ui/utilities/state/utils/createState';
 
 export const workspacePublicDataState =
   createState<PublicWorkspaceDataOutput | null>({