Refactor twenty-sdk folder stucture (#17733)

Only three barrels: `root`, `ui` and `front-component`

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

@@ -5,7 +5,7 @@ import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component/renderer';
+import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
 import { isDefined } from 'twenty-shared/utils';
 
 type FrontComponentRendererProps = {

packages/twenty-sdk/package.json

@@ -36,15 +36,10 @@
       "import": "./dist/ui/index.mjs",
       "require": "./dist/ui/index.cjs"
     },
-    "./front-component/renderer": {
-      "types": "./dist/front-component/renderer/index.d.ts",
-      "import": "./dist/front-component/renderer/index.mjs",
-      "require": "./dist/front-component/renderer/index.cjs"
-    },
-    "./front-component/api": {
-      "types": "./dist/front-component/api/index.d.ts",
-      "import": "./dist/front-component/api/index.mjs",
-      "require": "./dist/front-component/api/index.cjs"
+    "./front-component": {
+      "types": "./dist/front-component/index.d.ts",
+      "import": "./dist/front-component/index.mjs",
+      "require": "./dist/front-component/index.cjs"
     }
   },
   "license": "AGPL-3.0",
@@ -107,11 +102,8 @@
       "ui": [
         "dist/ui/index.d.ts"
       ],
-      "front-component/renderer": [
-        "dist/front-component/renderer/index.d.ts"
-      ],
-      "front-component/api": [
-        "dist/front-component/api/index.d.ts"
+      "front-component": [
+        "dist/front-component/index.d.ts"
       ]
     }
   }

packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts

@@ -3,11 +3,11 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { IndentationText, Project, QuoteKind } from 'ts-morph';
 
-import { ALLOWED_HTML_ELEMENTS } from '../../src/front-component/common/AllowedHtmlElements';
-import { ALLOWED_UI_COMPONENTS } from '../../src/front-component/common/AllowedUiComponents';
-import { COMMON_HTML_EVENTS } from '../../src/front-component/common/CommonHtmlEvents';
-import { EVENT_TO_REACT } from '../../src/front-component/common/EventToReact';
-import { HTML_COMMON_PROPERTIES } from '../../src/front-component/common/HtmlCommonProperties';
+import { ALLOWED_HTML_ELEMENTS } from '../../src/sdk/front-component-common/AllowedHtmlElements';
+import { ALLOWED_UI_COMPONENTS } from '../../src/sdk/front-component-common/AllowedUiComponents';
+import { COMMON_HTML_EVENTS } from '../../src/sdk/front-component-common/CommonHtmlEvents';
+import { EVENT_TO_REACT } from '../../src/sdk/front-component-common/EventToReact';
+import { HTML_COMMON_PROPERTIES } from '../../src/sdk/front-component-common/HtmlCommonProperties';
 
 import {
   type ComponentSchema,

packages/twenty-sdk/src/cli/utilities/build/common/front-component-build/utils/replace-html-tags-with-remote-components.ts

@@ -1,6 +1,6 @@
 import { isDefined } from 'twenty-shared/utils';
 
-import { HTML_TAG_TO_REMOTE_COMPONENT } from '../../../../../../front-component/common';
+import { HTML_TAG_TO_REMOTE_COMPONENT } from '../../../../../../sdk/front-component-common';
 
 const REMOTE_COMPONENTS_GLOBAL_NAMESPACE = 'RemoteComponents';
 

packages/twenty-sdk/src/front-component/__stories__/FrontComponentRenderer.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
-import { FrontComponentRenderer } from '../renderer/host/components/FrontComponentRenderer';
+import { FrontComponentRenderer } from '../host/components/FrontComponentRenderer';
 
 import { getBuiltComponentPath } from './utils/loadBuiltComponent';
 

packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx

@@ -1,7 +1,7 @@
-import { FrontComponentErrorEffect } from '@/front-component/renderer/remote/components/FrontComponentErrorEffect';
-import { FrontComponentUpdateContextEffect } from '@/front-component/renderer/remote/components/FrontComponentUpdateContextEffect';
-import { type FrontComponentExecutionContext } from '@/front-component/renderer/types/FrontComponentExecutionContext';
-import { type WorkerExports } from '@/front-component/renderer/types/WorkerExports';
+import { FrontComponentErrorEffect } from '@/front-component/remote/components/FrontComponentErrorEffect';
+import { FrontComponentUpdateContextEffect } from '@/front-component/remote/components/FrontComponentUpdateContextEffect';
+import { type FrontComponentExecutionContext } from '@/front-component/types/FrontComponentExecutionContext';
+import { type WorkerExports } from '@/front-component/types/WorkerExports';
 import { type ThreadWebWorker } from '@quilted/threads';
 import {
   type RemoteReceiver,

packages/twenty-sdk/src/front-component/remote/components/FrontComponentUpdateContextEffect.tsx

@@ -1,5 +1,5 @@
-import { type FrontComponentExecutionContext } from '@/front-component/renderer/types/FrontComponentExecutionContext';
-import { type WorkerExports } from '@/front-component/renderer/types/WorkerExports';
+import { type FrontComponentExecutionContext } from '@/front-component/types/FrontComponentExecutionContext';
+import { type WorkerExports } from '@/front-component/types/WorkerExports';
 import { type ThreadWebWorker } from '@quilted/threads';
 import { useEffect } from 'react';
 

packages/twenty-sdk/src/front-component/renderer/host/generated/host-component-registry.ts

@@ -1,405 +0,0 @@
-/*
- * _____                    _
- *|_   _|_      _____ _ __ | |_ _   _
- *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
- *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
- *  |_|   \_/\_/ \___|_| |_|\__|\__, |
- *                              |___/
- */
-
-import React from 'react';
-import {
-  RemoteFragmentRenderer,
-  createRemoteComponentRenderer,
-} from '@remote-dom/react/host';
-import { Button } from 'twenty-ui/input';
-const INTERNAL_PROPS = new Set(['element', 'receiver', 'components']);
-
-const EVENT_NAME_MAP: Record<string, string> = {
-  onclick: 'onClick',
-  ondblclick: 'onDoubleClick',
-  onmousedown: 'onMouseDown',
-  onmouseup: 'onMouseUp',
-  onmouseover: 'onMouseOver',
-  onmouseout: 'onMouseOut',
-  onmouseenter: 'onMouseEnter',
-  onmouseleave: 'onMouseLeave',
-  onkeydown: 'onKeyDown',
-  onkeyup: 'onKeyUp',
-  onkeypress: 'onKeyPress',
-  onfocus: 'onFocus',
-  onblur: 'onBlur',
-  onchange: 'onChange',
-  oninput: 'onInput',
-  onsubmit: 'onSubmit',
-  onscroll: 'onScroll',
-  onwheel: 'onWheel',
-  oncontextmenu: 'onContextMenu',
-  ondrag: 'onDrag',
-};
-
-const parseStyle = (
-  styleString: string | undefined,
-): React.CSSProperties | undefined => {
-  if (!styleString || typeof styleString !== 'string') {
-    return styleString as React.CSSProperties | undefined;
-  }
-
-  const style: Record<string, string> = {};
-  const declarations = styleString.split(';').filter(Boolean);
-
-  for (const declaration of declarations) {
-    const colonIndex = declaration.indexOf(':');
-    if (colonIndex === -1) continue;
-
-    const property = declaration.slice(0, colonIndex).trim();
-    const value = declaration.slice(colonIndex + 1).trim();
-
-    const camelProperty = property.replace(/-([a-z])/g, (_, letter: string) =>
-      letter.toUpperCase(),
-    );
-    style[camelProperty] = value;
-  }
-
-  return style;
-};
-
-const wrapEventHandler = (handler: () => void) => {
-  return (_event: unknown) => {
-    handler();
-  };
-};
-
-const filterProps = (props: Record<string, unknown>) => {
-  const filtered: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (INTERNAL_PROPS.has(key) || value === undefined) continue;
-
-    if (key === 'style') {
-      filtered.style = parseStyle(value as string | undefined);
-    } else {
-      const normalizedKey = EVENT_NAME_MAP[key.toLowerCase()] || key;
-      if (normalizedKey.startsWith('on') && typeof value === 'function') {
-        filtered[normalizedKey] = wrapEventHandler(value as () => void);
-      } else {
-        filtered[normalizedKey] = value;
-      }
-    }
-  }
-  return filtered;
-};
-const HtmlDivWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('div', filterProps(props), children);
-};
-const HtmlSpanWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('span', filterProps(props), children);
-};
-const HtmlSectionWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('section', filterProps(props), children);
-};
-const HtmlArticleWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('article', filterProps(props), children);
-};
-const HtmlHeaderWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('header', filterProps(props), children);
-};
-const HtmlFooterWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('footer', filterProps(props), children);
-};
-const HtmlMainWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('main', filterProps(props), children);
-};
-const HtmlNavWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('nav', filterProps(props), children);
-};
-const HtmlAsideWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('aside', filterProps(props), children);
-};
-const HtmlPWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('p', filterProps(props), children);
-};
-const HtmlH1Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h1', filterProps(props), children);
-};
-const HtmlH2Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h2', filterProps(props), children);
-};
-const HtmlH3Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h3', filterProps(props), children);
-};
-const HtmlH4Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h4', filterProps(props), children);
-};
-const HtmlH5Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h5', filterProps(props), children);
-};
-const HtmlH6Wrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('h6', filterProps(props), children);
-};
-const HtmlStrongWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('strong', filterProps(props), children);
-};
-const HtmlEmWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('em', filterProps(props), children);
-};
-const HtmlSmallWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('small', filterProps(props), children);
-};
-const HtmlCodeWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('code', filterProps(props), children);
-};
-const HtmlPreWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('pre', filterProps(props), children);
-};
-const HtmlBlockquoteWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('blockquote', filterProps(props), children);
-};
-const HtmlAWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('a', filterProps(props), children);
-};
-const HtmlImgWrapper = ({
-  children: _children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('img', filterProps(props));
-};
-const HtmlUlWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('ul', filterProps(props), children);
-};
-const HtmlOlWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('ol', filterProps(props), children);
-};
-const HtmlLiWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('li', filterProps(props), children);
-};
-const HtmlFormWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('form', filterProps(props), children);
-};
-const HtmlLabelWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('label', filterProps(props), children);
-};
-const HtmlInputWrapper = ({
-  children: _children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('input', filterProps(props));
-};
-const HtmlTextareaWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('textarea', filterProps(props), children);
-};
-const HtmlSelectWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('select', filterProps(props), children);
-};
-const HtmlOptionWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('option', filterProps(props), children);
-};
-const HtmlButtonWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('button', filterProps(props), children);
-};
-const HtmlTableWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('table', filterProps(props), children);
-};
-const HtmlTheadWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('thead', filterProps(props), children);
-};
-const HtmlTbodyWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('tbody', filterProps(props), children);
-};
-const HtmlTfootWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('tfoot', filterProps(props), children);
-};
-const HtmlTrWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('tr', filterProps(props), children);
-};
-const HtmlThWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('th', filterProps(props), children);
-};
-const HtmlTdWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('td', filterProps(props), children);
-};
-const HtmlBrWrapper = ({
-  children: _children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('br', filterProps(props));
-};
-const HtmlHrWrapper = ({
-  children: _children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement('hr', filterProps(props));
-};
-const TwentyUiButtonWrapper = ({
-  children,
-  ...props
-}: { children?: React.ReactNode } & Record<string, unknown>) => {
-  return React.createElement(Button, filterProps(props), children);
-};
-type ComponentRegistryValue =
-  | ReturnType<typeof createRemoteComponentRenderer>
-  | typeof RemoteFragmentRenderer;
-
-export const componentRegistry: Map<string, ComponentRegistryValue> = new Map([
-  ['html-div', createRemoteComponentRenderer(HtmlDivWrapper)],
-  ['html-span', createRemoteComponentRenderer(HtmlSpanWrapper)],
-  ['html-section', createRemoteComponentRenderer(HtmlSectionWrapper)],
-  ['html-article', createRemoteComponentRenderer(HtmlArticleWrapper)],
-  ['html-header', createRemoteComponentRenderer(HtmlHeaderWrapper)],
-  ['html-footer', createRemoteComponentRenderer(HtmlFooterWrapper)],
-  ['html-main', createRemoteComponentRenderer(HtmlMainWrapper)],
-  ['html-nav', createRemoteComponentRenderer(HtmlNavWrapper)],
-  ['html-aside', createRemoteComponentRenderer(HtmlAsideWrapper)],
-  ['html-p', createRemoteComponentRenderer(HtmlPWrapper)],
-  ['html-h1', createRemoteComponentRenderer(HtmlH1Wrapper)],
-  ['html-h2', createRemoteComponentRenderer(HtmlH2Wrapper)],
-  ['html-h3', createRemoteComponentRenderer(HtmlH3Wrapper)],
-  ['html-h4', createRemoteComponentRenderer(HtmlH4Wrapper)],
-  ['html-h5', createRemoteComponentRenderer(HtmlH5Wrapper)],
-  ['html-h6', createRemoteComponentRenderer(HtmlH6Wrapper)],
-  ['html-strong', createRemoteComponentRenderer(HtmlStrongWrapper)],
-  ['html-em', createRemoteComponentRenderer(HtmlEmWrapper)],
-  ['html-small', createRemoteComponentRenderer(HtmlSmallWrapper)],
-  ['html-code', createRemoteComponentRenderer(HtmlCodeWrapper)],
-  ['html-pre', createRemoteComponentRenderer(HtmlPreWrapper)],
-  ['html-blockquote', createRemoteComponentRenderer(HtmlBlockquoteWrapper)],
-  ['html-a', createRemoteComponentRenderer(HtmlAWrapper)],
-  ['html-img', createRemoteComponentRenderer(HtmlImgWrapper)],
-  ['html-ul', createRemoteComponentRenderer(HtmlUlWrapper)],
-  ['html-ol', createRemoteComponentRenderer(HtmlOlWrapper)],
-  ['html-li', createRemoteComponentRenderer(HtmlLiWrapper)],
-  ['html-form', createRemoteComponentRenderer(HtmlFormWrapper)],
-  ['html-label', createRemoteComponentRenderer(HtmlLabelWrapper)],
-  ['html-input', createRemoteComponentRenderer(HtmlInputWrapper)],
-  ['html-textarea', createRemoteComponentRenderer(HtmlTextareaWrapper)],
-  ['html-select', createRemoteComponentRenderer(HtmlSelectWrapper)],
-  ['html-option', createRemoteComponentRenderer(HtmlOptionWrapper)],
-  ['html-button', createRemoteComponentRenderer(HtmlButtonWrapper)],
-  ['html-table', createRemoteComponentRenderer(HtmlTableWrapper)],
-  ['html-thead', createRemoteComponentRenderer(HtmlTheadWrapper)],
-  ['html-tbody', createRemoteComponentRenderer(HtmlTbodyWrapper)],
-  ['html-tfoot', createRemoteComponentRenderer(HtmlTfootWrapper)],
-  ['html-tr', createRemoteComponentRenderer(HtmlTrWrapper)],
-  ['html-th', createRemoteComponentRenderer(HtmlThWrapper)],
-  ['html-td', createRemoteComponentRenderer(HtmlTdWrapper)],
-  ['html-br', createRemoteComponentRenderer(HtmlBrWrapper)],
-  ['html-hr', createRemoteComponentRenderer(HtmlHrWrapper)],
-  ['twenty-ui-button', createRemoteComponentRenderer(TwentyUiButtonWrapper)],
-  ['remote-fragment', RemoteFragmentRenderer],
-]);

packages/twenty-sdk/src/front-component/renderer/remote/generated/remote-elements.ts

@@ -1,733 +0,0 @@
-/*
- * _____                    _
- *|_   _|_      _____ _ __ | |_ _   _
- *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
- *  | |  \ V  V /  __/ | | | |_| |_| | Any edits to this will be overridden
- *  |_|   \_/\_/ \___|_| |_|\__|\__, |
- *                              |___/
- */
-
-import {
-  createRemoteElement,
-  RemoteRootElement,
-  RemoteFragmentElement,
-  type RemoteEvent,
-} from '@remote-dom/core/elements';
-
-export type HtmlCommonProperties = {
-  id?: string;
-  className?: string;
-  style?: string;
-  title?: string;
-  tabIndex?: number;
-  role?: string;
-  'aria-label'?: string;
-  'aria-hidden'?: boolean;
-  'data-testid'?: string;
-};
-export type HtmlCommonEvents = {
-  click(event: RemoteEvent): void;
-  dblclick(event: RemoteEvent): void;
-  mousedown(event: RemoteEvent): void;
-  mouseup(event: RemoteEvent): void;
-  mouseover(event: RemoteEvent): void;
-  mouseout(event: RemoteEvent): void;
-  mouseenter(event: RemoteEvent): void;
-  mouseleave(event: RemoteEvent): void;
-  keydown(event: RemoteEvent): void;
-  keyup(event: RemoteEvent): void;
-  keypress(event: RemoteEvent): void;
-  focus(event: RemoteEvent): void;
-  blur(event: RemoteEvent): void;
-  change(event: RemoteEvent): void;
-  input(event: RemoteEvent): void;
-  submit(event: RemoteEvent): void;
-  scroll(event: RemoteEvent): void;
-  wheel(event: RemoteEvent): void;
-  contextmenu(event: RemoteEvent): void;
-  drag(event: RemoteEvent): void;
-};
-
-const HTML_COMMON_EVENTS_ARRAY = [
-  'click',
-  'dblclick',
-  'mousedown',
-  'mouseup',
-  'mouseover',
-  'mouseout',
-  'mouseenter',
-  'mouseleave',
-  'keydown',
-  'keyup',
-  'keypress',
-  'focus',
-  'blur',
-  'change',
-  'input',
-  'submit',
-  'scroll',
-  'wheel',
-  'contextmenu',
-  'drag',
-] as const;
-const HTML_COMMON_PROPERTIES_CONFIG = {
-  id: { type: String },
-  className: { type: String },
-  style: { type: String },
-  title: { type: String },
-  tabIndex: { type: Number },
-  role: { type: String },
-  'aria-label': { type: String },
-  'aria-hidden': { type: Boolean },
-  'data-testid': { type: String },
-};
-export const HtmlDivElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlSpanElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlSectionElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlArticleElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlHeaderElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlFooterElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlMainElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlNavElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlAsideElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlPElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH1Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH2Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH3Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH4Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH5Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlH6Element = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlStrongElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlEmElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlSmallElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlCodeElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlPreElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlBlockquoteElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlAProperties = HtmlCommonProperties & {
-  href?: string;
-  target?: string;
-  rel?: string;
-};
-
-export const HtmlAElement = createRemoteElement<
-  HtmlAProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    href: { type: String },
-    target: { type: String },
-    rel: { type: String },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlImgProperties = HtmlCommonProperties & {
-  src?: string;
-  alt?: string;
-  width?: number;
-  height?: number;
-};
-
-export const HtmlImgElement = createRemoteElement<
-  HtmlImgProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    src: { type: String },
-    alt: { type: String },
-    width: { type: Number },
-    height: { type: Number },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlUlElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlOlElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlLiElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlFormProperties = HtmlCommonProperties & {
-  action?: string;
-  method?: string;
-};
-
-export const HtmlFormElement = createRemoteElement<
-  HtmlFormProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    action: { type: String },
-    method: { type: String },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlLabelProperties = HtmlCommonProperties & {
-  htmlFor?: string;
-};
-
-export const HtmlLabelElement = createRemoteElement<
-  HtmlLabelProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    htmlFor: { type: String },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlInputProperties = HtmlCommonProperties & {
-  type?: string;
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  checked?: boolean;
-  readOnly?: boolean;
-};
-
-export const HtmlInputElement = createRemoteElement<
-  HtmlInputProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    type: { type: String },
-    name: { type: String },
-    value: { type: String },
-    placeholder: { type: String },
-    disabled: { type: Boolean },
-    checked: { type: Boolean },
-    readOnly: { type: Boolean },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlTextareaProperties = HtmlCommonProperties & {
-  name?: string;
-  value?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  rows?: number;
-  cols?: number;
-};
-
-export const HtmlTextareaElement = createRemoteElement<
-  HtmlTextareaProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    name: { type: String },
-    value: { type: String },
-    placeholder: { type: String },
-    disabled: { type: Boolean },
-    readOnly: { type: Boolean },
-    rows: { type: Number },
-    cols: { type: Number },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlSelectProperties = HtmlCommonProperties & {
-  name?: string;
-  value?: string;
-  disabled?: boolean;
-  multiple?: boolean;
-};
-
-export const HtmlSelectElement = createRemoteElement<
-  HtmlSelectProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    name: { type: String },
-    value: { type: String },
-    disabled: { type: Boolean },
-    multiple: { type: Boolean },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlOptionProperties = HtmlCommonProperties & {
-  value?: string;
-  disabled?: boolean;
-  selected?: boolean;
-};
-
-export const HtmlOptionElement = createRemoteElement<
-  HtmlOptionProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    value: { type: String },
-    disabled: { type: Boolean },
-    selected: { type: Boolean },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlButtonProperties = HtmlCommonProperties & {
-  type?: string;
-  disabled?: boolean;
-};
-
-export const HtmlButtonElement = createRemoteElement<
-  HtmlButtonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    type: { type: String },
-    disabled: { type: Boolean },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlTableElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlTheadElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlTbodyElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlTfootElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlTrElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlThProperties = HtmlCommonProperties & {
-  colSpan?: number;
-  rowSpan?: number;
-};
-
-export const HtmlThElement = createRemoteElement<
-  HtmlThProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    colSpan: { type: Number },
-    rowSpan: { type: Number },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type HtmlTdProperties = HtmlCommonProperties & {
-  colSpan?: number;
-  rowSpan?: number;
-};
-
-export const HtmlTdElement = createRemoteElement<
-  HtmlTdProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    colSpan: { type: Number },
-    rowSpan: { type: Number },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlBrElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-export const HtmlHrElement = createRemoteElement<
-  HtmlCommonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: HTML_COMMON_PROPERTIES_CONFIG,
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-
-export type TwentyUiButtonProperties = HtmlCommonProperties & {
-  variant?: string;
-  accent?: string;
-  size?: string;
-  disabled?: boolean;
-  fullWidth?: boolean;
-};
-
-export const TwentyUiButtonElement = createRemoteElement<
-  TwentyUiButtonProperties,
-  Record<string, never>,
-  Record<string, never>,
-  HtmlCommonEvents
->({
-  properties: {
-    ...HTML_COMMON_PROPERTIES_CONFIG,
-    variant: { type: String },
-    accent: { type: String },
-    size: { type: String },
-    disabled: { type: Boolean },
-    fullWidth: { type: Boolean },
-  },
-  events: [...HTML_COMMON_EVENTS_ARRAY],
-});
-customElements.define('html-div', HtmlDivElement);
-customElements.define('html-span', HtmlSpanElement);
-customElements.define('html-section', HtmlSectionElement);
-customElements.define('html-article', HtmlArticleElement);
-customElements.define('html-header', HtmlHeaderElement);
-customElements.define('html-footer', HtmlFooterElement);
-customElements.define('html-main', HtmlMainElement);
-customElements.define('html-nav', HtmlNavElement);
-customElements.define('html-aside', HtmlAsideElement);
-customElements.define('html-p', HtmlPElement);
-customElements.define('html-h1', HtmlH1Element);
-customElements.define('html-h2', HtmlH2Element);
-customElements.define('html-h3', HtmlH3Element);
-customElements.define('html-h4', HtmlH4Element);
-customElements.define('html-h5', HtmlH5Element);
-customElements.define('html-h6', HtmlH6Element);
-customElements.define('html-strong', HtmlStrongElement);
-customElements.define('html-em', HtmlEmElement);
-customElements.define('html-small', HtmlSmallElement);
-customElements.define('html-code', HtmlCodeElement);
-customElements.define('html-pre', HtmlPreElement);
-customElements.define('html-blockquote', HtmlBlockquoteElement);
-customElements.define('html-a', HtmlAElement);
-customElements.define('html-img', HtmlImgElement);
-customElements.define('html-ul', HtmlUlElement);
-customElements.define('html-ol', HtmlOlElement);
-customElements.define('html-li', HtmlLiElement);
-customElements.define('html-form', HtmlFormElement);
-customElements.define('html-label', HtmlLabelElement);
-customElements.define('html-input', HtmlInputElement);
-customElements.define('html-textarea', HtmlTextareaElement);
-customElements.define('html-select', HtmlSelectElement);
-customElements.define('html-option', HtmlOptionElement);
-customElements.define('html-button', HtmlButtonElement);
-customElements.define('html-table', HtmlTableElement);
-customElements.define('html-thead', HtmlTheadElement);
-customElements.define('html-tbody', HtmlTbodyElement);
-customElements.define('html-tfoot', HtmlTfootElement);
-customElements.define('html-tr', HtmlTrElement);
-customElements.define('html-th', HtmlThElement);
-customElements.define('html-td', HtmlTdElement);
-customElements.define('html-br', HtmlBrElement);
-customElements.define('html-hr', HtmlHrElement);
-customElements.define('twenty-ui-button', TwentyUiButtonElement);
-customElements.define('remote-root', RemoteRootElement);
-customElements.define('remote-fragment', RemoteFragmentElement);
-
-export { RemoteRootElement, RemoteFragmentElement };
-declare global {
-  interface HTMLElementTagNameMap {
-    'html-div': InstanceType<typeof HtmlDivElement>;
-    'html-span': InstanceType<typeof HtmlSpanElement>;
-    'html-section': InstanceType<typeof HtmlSectionElement>;
-    'html-article': InstanceType<typeof HtmlArticleElement>;
-    'html-header': InstanceType<typeof HtmlHeaderElement>;
-    'html-footer': InstanceType<typeof HtmlFooterElement>;
-    'html-main': InstanceType<typeof HtmlMainElement>;
-    'html-nav': InstanceType<typeof HtmlNavElement>;
-    'html-aside': InstanceType<typeof HtmlAsideElement>;
-    'html-p': InstanceType<typeof HtmlPElement>;
-    'html-h1': InstanceType<typeof HtmlH1Element>;
-    'html-h2': InstanceType<typeof HtmlH2Element>;
-    'html-h3': InstanceType<typeof HtmlH3Element>;
-    'html-h4': InstanceType<typeof HtmlH4Element>;
-    'html-h5': InstanceType<typeof HtmlH5Element>;
-    'html-h6': InstanceType<typeof HtmlH6Element>;
-    'html-strong': InstanceType<typeof HtmlStrongElement>;
-    'html-em': InstanceType<typeof HtmlEmElement>;
-    'html-small': InstanceType<typeof HtmlSmallElement>;
-    'html-code': InstanceType<typeof HtmlCodeElement>;
-    'html-pre': InstanceType<typeof HtmlPreElement>;
-    'html-blockquote': InstanceType<typeof HtmlBlockquoteElement>;
-    'html-a': InstanceType<typeof HtmlAElement>;
-    'html-img': InstanceType<typeof HtmlImgElement>;
-    'html-ul': InstanceType<typeof HtmlUlElement>;
-    'html-ol': InstanceType<typeof HtmlOlElement>;
-    'html-li': InstanceType<typeof HtmlLiElement>;
-    'html-form': InstanceType<typeof HtmlFormElement>;
-    'html-label': InstanceType<typeof HtmlLabelElement>;
-    'html-input': InstanceType<typeof HtmlInputElement>;
-    'html-textarea': InstanceType<typeof HtmlTextareaElement>;
-    'html-select': InstanceType<typeof HtmlSelectElement>;
-    'html-option': InstanceType<typeof HtmlOptionElement>;
-    'html-button': InstanceType<typeof HtmlButtonElement>;
-    'html-table': InstanceType<typeof HtmlTableElement>;
-    'html-thead': InstanceType<typeof HtmlTheadElement>;
-    'html-tbody': InstanceType<typeof HtmlTbodyElement>;
-    'html-tfoot': InstanceType<typeof HtmlTfootElement>;
-    'html-tr': InstanceType<typeof HtmlTrElement>;
-    'html-th': InstanceType<typeof HtmlThElement>;
-    'html-td': InstanceType<typeof HtmlTdElement>;
-    'html-br': InstanceType<typeof HtmlBrElement>;
-    'html-hr': InstanceType<typeof HtmlHrElement>;
-    'twenty-ui-button': InstanceType<typeof TwentyUiButtonElement>;
-    'remote-root': InstanceType<typeof RemoteRootElement>;
-    'remote-fragment': InstanceType<typeof RemoteFragmentElement>;
-  }
-}

packages/twenty-sdk/src/sdk/front-component-common/AllowedUiComponents.ts

@@ -1,4 +1,4 @@
-import { type PropertySchema } from '../renderer/types/PropertySchema';
+import { type PropertySchema } from '@/front-component/types/PropertySchema';
 
 export type AllowedUiComponent = {
   tag: string;

packages/twenty-sdk/src/sdk/front-component-common/HtmlCommonProperties.ts

@@ -1,4 +1,4 @@
-import { type PropertySchema } from '../renderer/types/PropertySchema';
+import { type PropertySchema } from '@/front-component/types/PropertySchema';
 
 export const HTML_COMMON_PROPERTIES: Record<string, PropertySchema> = {
   id: { type: 'string', optional: true },

packages/twenty-sdk/src/sdk/index.ts

@@ -49,3 +49,18 @@ export { defineObject } from './objects/define-object';
 export { STANDARD_OBJECT_UNIVERSAL_IDENTIFIERS } from './objects/standard-object-ids';
 export { defineRole } from './roles/define-role';
 export { PermissionFlag } from './roles/permission-flag-type';
+
+// Front Component API exports
+export { useFrontComponentExecutionContext } from './front-component-api';
+export type { FrontComponentExecutionContext } from './front-component-api';
+export type { FrontComponentExecutionContextStore } from './front-component-api';
+
+// Front Component Common exports
+export type { AllowedHtmlElement } from './front-component-common';
+export { ALLOWED_HTML_ELEMENTS } from './front-component-common';
+export type { AllowedUiComponent } from './front-component-common';
+export { ALLOWED_UI_COMPONENTS } from './front-component-common';
+export { COMMON_HTML_EVENTS } from './front-component-common';
+export { EVENT_TO_REACT } from './front-component-common';
+export { HTML_COMMON_PROPERTIES } from './front-component-common';
+export { HTML_TAG_TO_REMOTE_COMPONENT } from './front-component-common';

packages/twenty-sdk/vite.config.ts

@@ -9,8 +9,7 @@ const entries = [
   'src/index.ts',
   'src/cli/cli.ts',
   'src/ui/index.ts',
-  'src/front-component/renderer/index.ts',
-  'src/front-component/api/index.ts',
+  'src/front-component/index.ts',
 ];
 
 export const PACKAGES_TO_VENDOR = ['twenty-ui', 'twenty-shared'];