[FRONT COMPONENTS] Move to twenty-sdk (#17587)

Move front components from twenty-shared to twenty-sdk

packages/twenty-front/src/modules/command-menu/pages/front-component/components/CommandMenuFrontComponentPage.tsx

@@ -1,8 +1,15 @@
+import { Suspense, lazy } from 'react';
+
 import { viewableFrontComponentIdComponentState } from '@/command-menu/pages/front-component/states/viewableFrontComponentIdComponentState';
-import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDefined } from 'twenty-shared/utils';
 
+const FrontComponentRenderer = lazy(() =>
+  import('@/front-components/components/FrontComponentRenderer').then(
+    (module) => ({ default: module.FrontComponentRenderer }),
+  ),
+);
+
 export const CommandMenuFrontComponentPage = () => {
   const viewableFrontComponentId = useRecoilComponentValue(
     viewableFrontComponentIdComponentState,
@@ -12,5 +19,9 @@ export const CommandMenuFrontComponentPage = () => {
     return null;
   }
 
-  return <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />;
+  return (
+    <Suspense fallback={null}>
+      <FrontComponentRenderer frontComponentId={viewableFrontComponentId} />
+    </Suspense>
+  );
 };

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -5,7 +5,7 @@ import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
 
 import { getMockFrontComponentUrl } from '@/front-components/utils/mockFrontComponent';
-import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-shared/front-component';
+import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
 
 type FrontComponentRendererProps = {
   frontComponentId: string;

packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts

@@ -3,7 +3,6 @@ import { isDefined } from 'twenty-shared/utils';
 // eslint-disable-next-line
 const mockFrontComponentCode = `
 var r=globalThis.React.useState,s=globalThis.React.useEffect;var n=globalThis.jsx,o=globalThis.jsxs,g=globalThis.React.Fragment;var e=globalThis.RemoteComponents,x=()=>{let[a,l]=r(0),[m,p]=r(0);return s(()=>{let t=setInterval(()=>{p(i=>i+1)},1e3);return()=>clearInterval(t)},[]),o(e.HtmlDiv,{style:{padding:"20px",fontFamily:"Arial, sans-serif",maxWidth:"400px",margin:"0 auto",display:"flex",flexDirection:"column",alignItems:"center"},children:[n(e.HtmlH1,{style:{color:"#333",marginBottom:"20px",fontSize:"24px"},children:"Test Component"}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"10px",color:"#666"},children:["Count: ",a]}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"20px",color:"#666"},children:["Timer: ",m,"s"]}),n(e.HtmlButton,{onClick:()=>l(a+1),style:{padding:"10px 20px",fontSize:"16px",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"5px",cursor:"pointer",transition:"all 0.3s ease",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},onMouseEnter:t=>{t.currentTarget.style.backgroundColor="#0056b3",t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow="0 4px 8px rgba(0, 0, 0, 0.3)"},onMouseLeave:t=>{t.currentTarget.style.backgroundColor="#007bff",t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"},children:"Increment"})]})},b=globalThis.jsx(x,{});export{b as default};
-//# sourceMappingURL=test-component.front-component.mjs.map
 `;
 
 let cachedMockBlobUrl: string | null = null;

packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx

@@ -1,10 +1,17 @@
+import { Suspense, lazy } from 'react';
+
 import { isDefined } from 'twenty-shared/utils';
 
 import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
-import { FrontComponentRenderer } from '@/front-components/components/FrontComponentRenderer';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { PageLayoutWidgetNoDataDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay';
 
+const FrontComponentRenderer = lazy(() =>
+  import('@/front-components/components/FrontComponentRenderer').then(
+    (module) => ({ default: module.FrontComponentRenderer }),
+  ),
+);
+
 type FrontComponentWidgetRendererProps = {
   widget: PageLayoutWidget;
 };
@@ -23,5 +30,9 @@ export const FrontComponentWidgetRenderer = ({
 
   const frontComponentId = configuration.frontComponentId;
 
-  return <FrontComponentRenderer frontComponentId={frontComponentId} />;
+  return (
+    <Suspense fallback={null}>
+      <FrontComponentRenderer frontComponentId={frontComponentId} />
+    </Suspense>
+  );
 };