Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx

@@ -0,0 +1,41 @@
+import { useRecoilTransactionObserver_UNSTABLE, useRecoilValue } from 'recoil';
+
+import { isDebugModeState } from '@/client-config/states/isDebugModeState';
+import { logDebug } from '~/utils/logDebug';
+
+const formatTitle = (stateName: string) => {
+  const headerCss = [
+    'color: gray; font-weight: lighter',
+    'color: black; font-weight: bold;',
+  ];
+
+  const parts = ['%c recoil', `%c${stateName}`];
+
+  return [parts.join(' '), ...headerCss];
+};
+
+export const RecoilDebugObserverEffect = () => {
+  const isDebugMode = useRecoilValue(isDebugModeState);
+
+  useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
+    if (!isDebugMode) {
+      return;
+    }
+    for (const node of Array.from(
+      snapshot.getNodes_UNSTABLE({ isModified: true }),
+    )) {
+      const loadable = snapshot.getLoadable(node);
+
+      const titleArgs = formatTitle(node.key);
+
+      console.groupCollapsed(...titleArgs);
+
+      logDebug('STATE', loadable.state);
+
+      logDebug('CONTENTS', loadable.contents);
+
+      console.groupEnd();
+    }
+  });
+  return null;
+};