[FRONT COMPONENTS] Build front components from twenty apps for remote dom (#17566)
Modify the front components build to match the expected format for remote dom execution in a worker.
This commit is contained in:
Raphaël Bosi
@@ -0,0 +1,148 @@
|
||||
type PropertySchema = {
|
||||
type: 'string' | 'number' | 'boolean';
|
||||
optional: boolean;
|
||||
};
|
||||
|
||||
export type AllowedHtmlElement = {
|
||||
tag: string;
|
||||
name: string;
|
||||
properties: Record<string, PropertySchema>;
|
||||
};
|
||||
|
||||
export const ALLOWED_HTML_ELEMENTS: AllowedHtmlElement[] = [
|
||||
{ tag: 'html-div', name: 'HtmlDiv', properties: {} },
|
||||
{ tag: 'html-span', name: 'HtmlSpan', properties: {} },
|
||||
{ tag: 'html-section', name: 'HtmlSection', properties: {} },
|
||||
{ tag: 'html-article', name: 'HtmlArticle', properties: {} },
|
||||
{ tag: 'html-header', name: 'HtmlHeader', properties: {} },
|
||||
{ tag: 'html-footer', name: 'HtmlFooter', properties: {} },
|
||||
{ tag: 'html-main', name: 'HtmlMain', properties: {} },
|
||||
{ tag: 'html-nav', name: 'HtmlNav', properties: {} },
|
||||
{ tag: 'html-aside', name: 'HtmlAside', properties: {} },
|
||||
{ tag: 'html-p', name: 'HtmlP', properties: {} },
|
||||
{ tag: 'html-h1', name: 'HtmlH1', properties: {} },
|
||||
{ tag: 'html-h2', name: 'HtmlH2', properties: {} },
|
||||
{ tag: 'html-h3', name: 'HtmlH3', properties: {} },
|
||||
{ tag: 'html-h4', name: 'HtmlH4', properties: {} },
|
||||
{ tag: 'html-h5', name: 'HtmlH5', properties: {} },
|
||||
{ tag: 'html-h6', name: 'HtmlH6', properties: {} },
|
||||
{ tag: 'html-strong', name: 'HtmlStrong', properties: {} },
|
||||
{ tag: 'html-em', name: 'HtmlEm', properties: {} },
|
||||
{ tag: 'html-small', name: 'HtmlSmall', properties: {} },
|
||||
{ tag: 'html-code', name: 'HtmlCode', properties: {} },
|
||||
{ tag: 'html-pre', name: 'HtmlPre', properties: {} },
|
||||
{ tag: 'html-blockquote', name: 'HtmlBlockquote', properties: {} },
|
||||
{
|
||||
tag: 'html-a',
|
||||
name: 'HtmlA',
|
||||
properties: {
|
||||
href: { type: 'string', optional: true },
|
||||
target: { type: 'string', optional: true },
|
||||
rel: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-img',
|
||||
name: 'HtmlImg',
|
||||
properties: {
|
||||
src: { type: 'string', optional: true },
|
||||
alt: { type: 'string', optional: true },
|
||||
width: { type: 'number', optional: true },
|
||||
height: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-ul', name: 'HtmlUl', properties: {} },
|
||||
{ tag: 'html-ol', name: 'HtmlOl', properties: {} },
|
||||
{ tag: 'html-li', name: 'HtmlLi', properties: {} },
|
||||
{
|
||||
tag: 'html-form',
|
||||
name: 'HtmlForm',
|
||||
properties: {
|
||||
action: { type: 'string', optional: true },
|
||||
method: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-label',
|
||||
name: 'HtmlLabel',
|
||||
properties: {
|
||||
htmlFor: { type: 'string', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-input',
|
||||
name: 'HtmlInput',
|
||||
properties: {
|
||||
type: { type: 'string', optional: true },
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
placeholder: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
checked: { type: 'boolean', optional: true },
|
||||
readOnly: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-textarea',
|
||||
name: 'HtmlTextarea',
|
||||
properties: {
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
placeholder: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
readOnly: { type: 'boolean', optional: true },
|
||||
rows: { type: 'number', optional: true },
|
||||
cols: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-select',
|
||||
name: 'HtmlSelect',
|
||||
properties: {
|
||||
name: { type: 'string', optional: true },
|
||||
value: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
multiple: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-option',
|
||||
name: 'HtmlOption',
|
||||
properties: {
|
||||
value: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
selected: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-button',
|
||||
name: 'HtmlButton',
|
||||
properties: {
|
||||
type: { type: 'string', optional: true },
|
||||
disabled: { type: 'boolean', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-table', name: 'HtmlTable', properties: {} },
|
||||
{ tag: 'html-thead', name: 'HtmlThead', properties: {} },
|
||||
{ tag: 'html-tbody', name: 'HtmlTbody', properties: {} },
|
||||
{ tag: 'html-tfoot', name: 'HtmlTfoot', properties: {} },
|
||||
{ tag: 'html-tr', name: 'HtmlTr', properties: {} },
|
||||
{
|
||||
tag: 'html-th',
|
||||
name: 'HtmlTh',
|
||||
properties: {
|
||||
colSpan: { type: 'number', optional: true },
|
||||
rowSpan: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
tag: 'html-td',
|
||||
name: 'HtmlTd',
|
||||
properties: {
|
||||
colSpan: { type: 'number', optional: true },
|
||||
rowSpan: { type: 'number', optional: true },
|
||||
},
|
||||
},
|
||||
{ tag: 'html-br', name: 'HtmlBr', properties: {} },
|
||||
{ tag: 'html-hr', name: 'HtmlHr', properties: {} },
|
||||
];
|
||||
@@ -0,0 +1,22 @@
|
||||
export const COMMON_HTML_EVENTS = [
|
||||
'click',
|
||||
'dblclick',
|
||||
'mousedown',
|
||||
'mouseup',
|
||||
'mouseover',
|
||||
'mouseout',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'keydown',
|
||||
'keyup',
|
||||
'keypress',
|
||||
'focus',
|
||||
'blur',
|
||||
'change',
|
||||
'input',
|
||||
'submit',
|
||||
'scroll',
|
||||
'wheel',
|
||||
'contextmenu',
|
||||
'drag',
|
||||
] as const;
|
||||
@@ -0,0 +1,22 @@
|
||||
export const EVENT_TO_REACT: Record<string, string> = {
|
||||
click: 'onClick',
|
||||
dblclick: 'onDoubleClick',
|
||||
mousedown: 'onMouseDown',
|
||||
mouseup: 'onMouseUp',
|
||||
mouseover: 'onMouseOver',
|
||||
mouseout: 'onMouseOut',
|
||||
mouseenter: 'onMouseEnter',
|
||||
mouseleave: 'onMouseLeave',
|
||||
keydown: 'onKeyDown',
|
||||
keyup: 'onKeyUp',
|
||||
keypress: 'onKeyPress',
|
||||
focus: 'onFocus',
|
||||
blur: 'onBlur',
|
||||
change: 'onChange',
|
||||
input: 'onInput',
|
||||
submit: 'onSubmit',
|
||||
scroll: 'onScroll',
|
||||
wheel: 'onWheel',
|
||||
contextmenu: 'onContextMenu',
|
||||
drag: 'onDrag',
|
||||
};
|
||||
@@ -0,0 +1,13 @@
|
||||
import { type PropertySchema } from '../front-component/types/PropertySchema';
|
||||
|
||||
export const HTML_COMMON_PROPERTIES: Record<string, PropertySchema> = {
|
||||
id: { type: 'string', optional: true },
|
||||
className: { type: 'string', optional: true },
|
||||
style: { type: 'string', optional: true },
|
||||
title: { type: 'string', optional: true },
|
||||
tabIndex: { type: 'number', optional: true },
|
||||
role: { type: 'string', optional: true },
|
||||
'aria-label': { type: 'string', optional: true },
|
||||
'aria-hidden': { type: 'boolean', optional: true },
|
||||
'data-testid': { type: 'string', optional: true },
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
import { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
|
||||
|
||||
export const HTML_TAG_TO_REMOTE_COMPONENT: Record<string, string> =
|
||||
Object.fromEntries(
|
||||
ALLOWED_HTML_ELEMENTS.map((element) => [
|
||||
element.tag.startsWith('html-') ? element.tag.slice(5) : element.tag,
|
||||
element.name,
|
||||
]),
|
||||
);
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* _____ _
|
||||
*|_ _|_ _____ _ __ | |_ _ _
|
||||
* | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
|
||||
* | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden
|
||||
* |_| \_/\_/ \___|_| |_|\__|\__, |
|
||||
* |___/
|
||||
*/
|
||||
|
||||
export type { AllowedHtmlElement } from './AllowedHtmlElements';
|
||||
export { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements';
|
||||
export { COMMON_HTML_EVENTS } from './CommonHtmlEvents';
|
||||
export { EVENT_TO_REACT } from './EventToReact';
|
||||
export { HTML_COMMON_PROPERTIES } from './HtmlCommonProperties';
|
||||
export { HTML_TAG_TO_REMOTE_COMPONENT } from './HtmlTagToRemoteComponent';
|
||||
Reference in New Issue
Block a user