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/pages/auth/ChooseYourPlan.tsx

@@ -43,7 +43,7 @@ const StyledBenefitsContainer = styled.div`
 `;
 
 export const ChooseYourPlan = () => {
-  const billing = useRecoilValue(billingState);
+  const billing = useRecoilValue(billingState());
 
   const [planSelected, setPlanSelected] = useState('month');
 

packages/twenty-front/src/pages/auth/CreateProfile.tsx

@@ -58,7 +58,7 @@ export const CreateProfile = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-    currentWorkspaceMemberState,
+    currentWorkspaceMemberState(),
   );
 
   const { updateOneRecord } = useUpdateOneRecord<WorkspaceMember>({

packages/twenty-front/src/pages/auth/PlanRequired.tsx

@@ -16,7 +16,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const PlanRequired = () => {
-  const billing = useRecoilValue(billingState);
+  const billing = useRecoilValue(billingState());
 
   const handleButtonClick = () => {
     billing?.billingUrl && window.location.replace(billing.billingUrl);

packages/twenty-front/src/pages/auth/VerifyEffect.tsx

@@ -10,7 +10,7 @@ import { AppPath } from '@/types/AppPath';
 export const VerifyEffect = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState());
 
   const isLogged = useIsLogged();
   const navigate = useNavigate();

packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<PageDecoratorArgs> = {
   component: CreateWorkspace,
   decorators: [
     (Story) => {
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
       setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
       return <Story />;
     },