windmill-components 1.472.1 → 1.472.3

package/package/components/apps/editor/component/components.js

@@ -0,0 +1,3682 @@
+import { BUTTON_COLORS } from '../../../common';
+import { defaultAlignement } from '../componentsPanel/componentDefaultProps';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw, ListCollapse, GalleryThumbnails } from 'lucide-svelte';
+export function getRecommendedDimensionsByComponent(componentType, column) {
+    return processDimension(components[componentType].dims, column);
+}
+export function processDimension(dimension, column) {
+    if (!dimension) {
+        return { w: 1, h: 1 };
+    }
+    const size = dimension.split('-')[column === 3 ? 0 : 1].split(':');
+    return { w: +size[0], h: +size[1] };
+}
+const buttonColorOptions = [...BUTTON_COLORS];
+export const selectOptions = {
+    buttonColorOptions,
+    tabsKindOptions: ['tabs', 'sidebar', 'accordion', 'invisibleOnView'],
+    buttonSizeOptions: ['xs2', 'xs', 'sm', 'md', 'lg', 'xl'],
+    tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
+    chartThemeOptions: ['theme1', 'theme2', 'theme3'],
+    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
+    currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
+    localeOptions: [
+        'en-US',
+        'en-GB',
+        'en-IE',
+        'de-DE',
+        'fr-FR',
+        'br-FR',
+        'ja-JP',
+        'pt-TL',
+        'fr-CA',
+        'en-CA'
+    ],
+    objectFitOptions: ['contain', 'cover', 'fill'],
+    splitPanelOptions: ['2', '3', '4'],
+    formorientationOptions: ['Horizontal', 'Vertical'],
+    chartTypeOptions: [
+        'bar',
+        'bubble',
+        'doughnut',
+        'line',
+        'pie',
+        'polarArea',
+        'radar',
+        'scatter'
+    ],
+    animationTimingFunctionOptions: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
+    prose: ['sm', 'Default', 'lg', 'xl', '2xl'],
+    imageSourceKind: [
+        'url',
+        'png encoded as base64',
+        'jpeg encoded as base64',
+        'svg encoded as base64'
+    ]
+};
+const labels = {
+    none: 'Do nothing',
+    errorOverlay: 'Show error overlay',
+    gotoUrl: 'Go to an url',
+    setTab: 'Set the tab of a tabs component',
+    sendToast: 'Display a toast notification',
+    sendErrorToast: 'Display an error toast notification',
+    open: 'Open a modal or a drawer',
+    close: 'Close a modal or a drawer',
+    openModal: 'Open a modal (deprecated)',
+    closeModal: 'Close a modal (deprecated)',
+    clearFiles: 'Clear files from a S3 file input'
+};
+const onSuccessClick = {
+    type: 'oneOf',
+    tooltip: 'Action to perform on success',
+    selected: 'none',
+    labels,
+    configuration: {
+        none: {},
+        gotoUrl: {
+            url: {
+                tooltip: 'Go to the given url, absolute or relative',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                placeholder: '/apps/get/foo',
+                onDemandOnly: true
+            },
+            newTab: {
+                tooltip: 'Open the url in a new tab',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            }
+        },
+        setTab: {
+            setTab: {
+                type: 'static',
+                value: [],
+                fieldType: 'array',
+                subFieldType: 'tab-select',
+                tooltip: 'Set the tabs id and index to go to on success',
+                onDemandOnly: true
+            }
+        },
+        sendToast: {
+            message: {
+                tooltip: 'The message of the toast to display',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                placeholder: 'Hello there',
+                onDemandOnly: true
+            }
+        },
+        openModal: {
+            modalId: {
+                tooltip: 'The id of the modal to open',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                deprecated: true
+            }
+        },
+        closeModal: {
+            modalId: {
+                tooltip: 'The id of the modal to close',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                deprecated: true
+            }
+        },
+        open: {
+            id: {
+                tooltip: 'The id of the modal or the drawer to open',
+                fieldType: 'text',
+                type: 'static',
+                value: ''
+            }
+        },
+        close: {
+            id: {
+                tooltip: 'The id of the modal or the drawer to close',
+                fieldType: 'text',
+                type: 'static',
+                value: ''
+            }
+        },
+        clearFiles: {
+            id: {
+                tooltip: 'The id of s3 file input to clear',
+                fieldType: 'text',
+                type: 'static',
+                value: ''
+            }
+        }
+    }
+};
+const onErrorClick = {
+    type: 'oneOf',
+    tooltip: 'Action to perform on error',
+    selected: 'errorOverlay',
+    labels,
+    configuration: {
+        errorOverlay: {},
+        gotoUrl: {
+            url: {
+                tooltip: 'Go to the given url, absolute or relative',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                placeholder: '/apps/get/foo',
+                onDemandOnly: true
+            },
+            newTab: {
+                tooltip: 'Open the url in a new tab',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            }
+        },
+        setTab: {
+            setTab: {
+                type: 'static',
+                value: [],
+                fieldType: 'array',
+                subFieldType: 'tab-select',
+                tooltip: 'Set the tabs id and index to go to on error',
+                onDemandOnly: true
+            }
+        },
+        sendErrorToast: {
+            message: {
+                tooltip: 'The message of the toast to display',
+                fieldType: 'text',
+                type: 'static',
+                value: 'An error occured',
+                placeholder: 'Hello there',
+                onDemandOnly: true
+            },
+            appendError: {
+                tooltip: 'Append the error message to the toast',
+                fieldType: 'boolean',
+                type: 'static',
+                value: true
+            }
+        },
+        open: {
+            id: {
+                tooltip: 'The id of the modal or the drawer to open',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
+        },
+        close: {
+            id: {
+                tooltip: 'The id of the modal or the drawer to close',
+                fieldType: 'text',
+                type: 'static',
+                value: '',
+                noVariablePicker: true
+            }
+        }
+    }
+};
+const paginationOneOf = {
+    type: 'oneOf',
+    selected: 'auto',
+    labels: {
+        auto: 'Managed by component',
+        manual: 'Managed by runnable'
+    },
+    tooltip: 'Pagination can be managed using two methods: By the component: Based on a specified page size, the component divides the array into several pages. By the runnable: The component shows all items, leaving the task of pagination to the runnable. The current page number is available in the component outputs.',
+    configuration: {
+        auto: {
+            pageSize: {
+                type: 'static',
+                fieldType: 'number',
+                value: 20,
+                tooltip: 'Number of rows per page'
+            }
+        },
+        manual: {
+            pageCount: {
+                type: 'static',
+                fieldType: 'number',
+                value: -1,
+                tooltip: 'Number of pages (-1 if you do not know)'
+            }
+        }
+    }
+};
+const documentationBaseUrl = 'https://www.windmill.dev/docs/apps/app_configuration_settings';
+const aggridcomponentconst = {
+    name: 'AgGrid Table',
+    icon: Table2,
+    documentationLink: `${documentationBaseUrl}/aggrid_table`,
+    dims: '3:10-6:10',
+    customCss: {
+        container: { class: '', style: '' }
+    },
+    initialData: {
+        configuration: {
+            columnDefs: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'ag-grid',
+                value: [
+                    { field: 'id', flex: 1 },
+                    { field: 'name', editable: true, flex: 1 },
+                    { field: 'age', flex: 1 }
+                ]
+            },
+            rowIdCol: {
+                type: 'static',
+                fieldType: 'text',
+                value: '',
+                placeholder: 'id',
+                tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+            },
+            flex: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'default col flex is 1 (see ag-grid docs)'
+            },
+            allEditable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                hide: true,
+                tooltip: 'Configure all columns as Editable by users'
+            },
+            multipleSelectable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'Make multiple rows selectable at once'
+            },
+            rowMultiselectWithClick: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'If multiple selectable, allow multiselect with click'
+            },
+            pagination: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false
+            },
+            selectFirstRowByDefault: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Select the first row by default on start'
+            },
+            extraConfig: {
+                type: 'static',
+                fieldType: 'object',
+                value: {},
+                tooltip: 'any configuration that can be passed to ag-grid top level'
+            },
+            compactness: {
+                type: 'static',
+                fieldType: 'select',
+                value: 'normal',
+                selectOptions: ['normal', 'compact', 'comfortable'],
+                tooltip: 'Change the row height'
+            },
+            wrapActions: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+            },
+            footer: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Allow visible footer for pagination and download'
+            },
+            customActionsHeader: {
+                type: 'static',
+                fieldType: 'text',
+                value: undefined,
+                tooltip: 'Custom header for the actions columns'
+            }
+        },
+        componentInput: {
+            type: 'static',
+            fieldType: 'array',
+            subFieldType: 'object',
+            value: [
+                {
+                    id: 1,
+                    name: 'A cell with a long name',
+                    age: 42
+                },
+                {
+                    id: 2,
+                    name: 'A briefer cell',
+                    age: 84
+                }
+            ]
+        }
+    }
+};
+const aggridinfinitecomponentconst = {
+    name: 'AgGrid Infinite Table',
+    icon: Table2,
+    documentationLink: `${documentationBaseUrl}/aggrid_table#aggrid-infinite-table`,
+    dims: '3:10-6:10',
+    customCss: {
+        container: { class: '', style: '' }
+    },
+    initialData: {
+        configuration: {
+            columnDefs: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'ag-grid',
+                value: []
+            },
+            rowIdCol: {
+                type: 'static',
+                fieldType: 'text',
+                value: '',
+                placeholder: 'id',
+                tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+            },
+            flex: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'default col flex is 1 (see ag-grid docs)'
+            },
+            allEditable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                hide: true,
+                tooltip: 'Configure all columns as Editable by users'
+            },
+            multipleSelectable: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'Make multiple rows selectable at once'
+            },
+            rowMultiselectWithClick: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'If multiple selectable, allow multiselect with click'
+            },
+            selectFirstRowByDefault: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Select the first row by default on start'
+            },
+            extraConfig: {
+                type: 'static',
+                fieldType: 'object',
+                value: {},
+                tooltip: 'any configuration that can be passed to ag-grid top level'
+            },
+            compactness: {
+                type: 'static',
+                fieldType: 'select',
+                value: 'normal',
+                selectOptions: ['normal', 'compact', 'comfortable'],
+                tooltip: 'Change the row height'
+            },
+            wrapActions: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+            },
+            searchEnabled: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: false,
+                tooltip: 'Enable search in the table'
+            },
+            footer: {
+                type: 'static',
+                fieldType: 'boolean',
+                value: true,
+                tooltip: 'Allow visible footer for pagination and download'
+            },
+            customActionsHeader: {
+                type: 'static',
+                fieldType: 'text',
+                value: undefined,
+                tooltip: 'Custom header for the actions columns'
+            }
+        },
+        componentInput: {
+            type: 'runnable',
+            fieldType: 'any',
+            fields: {},
+            runnable: undefined
+        }
+    }
+};
+const agchartscomponentconst = {
+    name: 'AgCharts',
+    icon: BarChart4,
+    documentationLink: `${documentationBaseUrl}/agcharts`,
+    dims: '2:8-6:8',
+    customCss: {
+        container: { class: '', style: '' }
+    },
+    initialData: {
+        configuration: {},
+        componentInput: undefined
+    }
+};
+export const components = {
+    displaycomponent: {
+        name: 'Rich Result',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/rich_result`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: { foo: 42 }
+            },
+            configuration: {
+                title: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Result'
+                },
+                hideDetails: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the details section: the object keys, the clipboard button and the maximise button'
+                }
+            }
+        }
+    },
+    jobidlogcomponent: {
+        name: 'Log by Job Id',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/log_display`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                jobId: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    tooltip: 'Job id to display logs from'
+                }
+            }
+        }
+    },
+    logcomponent: {
+        name: 'Log',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/log_display`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            }
+        }
+    },
+    flowstatuscomponent: {
+        name: 'Flow Status',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/flow_status`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            }
+        }
+    },
+    jobidflowstatuscomponent: {
+        name: 'Flow Status by Job Id',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/flow_status`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                jobId: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    tooltip: 'Job id to display status from'
+                }
+            }
+        }
+    },
+    containercomponent: {
+        name: 'Container',
+        icon: BoxSelect,
+        documentationLink: `${documentationBaseUrl}/container`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            numberOfSubgrids: 1
+        }
+    },
+    listcomponent: {
+        name: 'List',
+        icon: ListIcon,
+        documentationLink: `${documentationBaseUrl}/list`,
+        dims: '3:8-12:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                width: {
+                    type: 'oneOf',
+                    selected: 'card',
+                    labels: {
+                        card: 'Card',
+                        row: 'Full Row'
+                    },
+                    configuration: {
+                        card: {
+                            minWidthPx: {
+                                type: 'static',
+                                fieldType: 'number',
+                                value: 300,
+                                tooltip: 'Min Width in pixels'
+                            }
+                        },
+                        row: {}
+                    }
+                },
+                heightPx: {
+                    type: 'static',
+                    fieldType: 'number',
+                    value: undefined,
+                    tooltip: 'Height in pixels'
+                },
+                pagination: {
+                    type: 'oneOf',
+                    selected: 'auto',
+                    labels: {
+                        auto: 'Managed by component',
+                        manual: 'Managed by runnable'
+                    },
+                    tooltip: 'Pagination can be managed using two methods: By the component: Based on a specified page size, the component divides the array into several pages. By the runnable: The component shows all items, leaving the task of pagination to the runnable. The current page number is available in the component outputs.',
+                    configuration: {
+                        manual: {
+                            pageCount: {
+                                type: 'static',
+                                fieldType: 'number',
+                                value: -1,
+                                tooltip: 'Number of pages (-1 if you do not know)'
+                            }
+                        },
+                        auto: {
+                            pageSize: {
+                                type: 'static',
+                                fieldType: 'number',
+                                value: 20,
+                                tooltip: 'Number of items per page'
+                            }
+                        }
+                    }
+                },
+                displayBorders: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Display borders between items'
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
+            },
+            numberOfSubgrids: 1
+        }
+    },
+    textcomponent: {
+        name: 'Text',
+        icon: Type,
+        dims: '1:1-3:1',
+        documentationLink: `${documentationBaseUrl}/text`,
+        customCss: {
+            text: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'left',
+            verticalAlignment: 'top',
+            componentInput: {
+                type: 'templatev2',
+                fieldType: 'template',
+                eval: 'Hello ${ctx.username}',
+                connections: [
+                    {
+                        id: 'username',
+                        componentId: 'ctx'
+                    }
+                ]
+            },
+            configuration: {
+                style: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.textStyleOptions,
+                    value: 'Body'
+                },
+                copyButton: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                tooltip: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text',
+                    tooltip: 'Tooltip text if not empty'
+                },
+                disableNoText: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'Remove the "No text" placeholder'
+                }
+            }
+        }
+    },
+    buttoncomponent: {
+        name: 'Button',
+        icon: Inspect,
+        dims: '1:1-2:1',
+        documentationLink: `${documentationBaseUrl}/button`,
+        customCss: {
+            button: { style: '', class: '' },
+            container: { style: '', class: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            },
+            recomputeIds: true,
+            configuration: {
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonColorOptions,
+                    value: 'blue',
+                    tooltip: 'These presets can be overwritten with custom styles.'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                triggerOnAppLoad: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                onSuccess: onSuccessClick,
+                onError: onErrorClick,
+                confirmationModal: {
+                    type: 'oneOf',
+                    selected: 'none',
+                    tooltip: 'If defined, the user will be asked to confirm the action in a modal.',
+                    labels: {
+                        none: 'Do nothing',
+                        confirmationModal: 'Show confirmation modal'
+                    },
+                    configuration: {
+                        none: {},
+                        confirmationModal: {
+                            title: {
+                                fieldType: 'text',
+                                type: 'static',
+                                value: 'Title',
+                                placeholder: 'Confirmation modal title'
+                            },
+                            description: {
+                                fieldType: 'text',
+                                type: 'static',
+                                value: 'Are you sure?',
+                                placeholder: 'Are you sure?'
+                            },
+                            confirmationText: {
+                                fieldType: 'text',
+                                type: 'static',
+                                value: 'Confirm',
+                                placeholder: 'Confirm',
+                                tooltip: 'The text of the button that confirms the action.'
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    downloadcomponent: {
+        name: 'Download Button',
+        icon: Download,
+        documentationLink: `${documentationBaseUrl}/download_button`,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { style: '', class: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            configuration: {
+                source: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text',
+                    fileUpload: {
+                        accept: '*',
+                        convertTo: 'base64'
+                    },
+                    placeholder: 'Enter URL or upload file (base64)'
+                },
+                filename: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'windmill.file'
+                },
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonColorOptions,
+                    value: 'blue'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                }
+            }
+        }
+    },
+    formcomponent: {
+        name: 'Submit Form',
+        icon: FormInput,
+        documentationLink: `${documentationBaseUrl}/submit_form`,
+        dims: '3:5-6:5',
+        customCss: {
+            container: { class: '', style: '' },
+            button: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            },
+            recomputeIds: true,
+            configuration: {
+                label: {
+                    type: 'static',
+                    value: 'Submit',
+                    fieldType: 'text'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    value: 'dark',
+                    selectOptions: selectOptions.buttonColorOptions
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    value: 'xs',
+                    selectOptions: selectOptions.buttonSizeOptions
+                },
+                onSuccess: onSuccessClick,
+                onError: onErrorClick
+            }
+        }
+    },
+    formbuttoncomponent: {
+        name: 'Modal Form',
+        icon: PlusSquare,
+        documentationLink: `${documentationBaseUrl}/modal_form`,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { class: '', style: '' },
+            popup: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            },
+            recomputeIds: true,
+            configuration: {
+                modalTitle: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Modal title'
+                },
+                label: {
+                    type: 'static',
+                    value: 'Open popup',
+                    fieldType: 'text'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    value: 'dark',
+                    selectOptions: buttonColorOptions,
+                    tooltip: 'These presets can be overwritten with custom styles.'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    value: 'xs',
+                    selectOptions: selectOptions.buttonSizeOptions
+                },
+                onSuccess: onSuccessClick,
+                onError: onErrorClick,
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                }
+            }
+        }
+    },
+    piechartcomponent: {
+        name: 'Pie Chart',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/pie_chart`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                theme: {
+                    type: 'static',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.chartThemeOptions,
+                    value: 'theme1'
+                },
+                doughnutStyle: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
+            }
+        }
+    },
+    chartjscomponent: {
+        name: 'ChartJs',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/chartjs`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                type: {
+                    type: 'static',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.chartTypeOptions,
+                    value: 'pie'
+                },
+                options: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'ChartJs options object https://www.chartjs.org/docs/latest/general/options.html'
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    labels: ['Pie', 'Charts', '<3'],
+                    datasets: [
+                        {
+                            data: [25, 50, 25],
+                            backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56']
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    chartjscomponentv2: {
+        name: 'ChartJs',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/chartjs`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                type: {
+                    type: 'static',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.chartTypeOptions,
+                    value: 'pie'
+                },
+                options: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'ChartJs options object https://www.chartjs.org/docs/latest/general/options.html'
+                }
+            },
+            componentInput: undefined
+        }
+    },
+    barchartcomponent: {
+        name: 'Bar/Line Chart',
+        icon: BarChart4,
+        documentationLink: `${documentationBaseUrl}/bar_line_chart`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                theme: {
+                    type: 'static',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.chartThemeOptions,
+                    value: 'theme1'
+                },
+                line: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
+            }
+        }
+    },
+    agchartscomponent: agchartscomponentconst,
+    agchartscomponentee: { ...agchartscomponentconst, name: 'AgCharts EE' },
+    htmlcomponent: {
+        name: 'HTML',
+        icon: Code2,
+        documentationLink: `${documentationBaseUrl}/html`,
+        dims: '1:2-1:2',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'templatev2',
+                fieldType: 'template',
+                eval: `<img
+src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<h1 class="absolute top-4 left-2 text-white">
+Hello \${ctx.username}
+</h1>`,
+                connections: [
+                    {
+                        id: 'username',
+                        componentId: 'ctx'
+                    }
+                ]
+            },
+            configuration: {}
+        }
+    },
+    customcomponent: {
+        name: 'Custom',
+        icon: Code2,
+        documentationLink: `https://www.windmill.dev/docs/apps/react_components`,
+        dims: '1:2-1:2',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {}
+            },
+            configuration: {}
+        }
+    },
+    mardowncomponent: {
+        name: 'Markdown',
+        icon: Heading1,
+        documentationLink: `${documentationBaseUrl}/html`,
+        dims: '1:2-4:4',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'templatev2',
+                fieldType: 'template',
+                eval: `# This is a header
+## This is a subheader				
+This is a paragraph.
+				
+* This is a list
+* With two items`,
+                connections: []
+            },
+            configuration: {
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.prose,
+                    value: 'Default',
+                    tooltip: 'See Tailwind documentation: https://tailwindcss.com/docs/typography-plugin'
+                }
+            }
+        }
+    },
+    vegalitecomponent: {
+        name: 'Vega Lite',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/vega_lite`,
+        dims: '2:8-6:8',
+        customCss: {},
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    data: {
+                        values: [
+                            { a: 'A', b: 28 },
+                            { a: 'B', b: 55 },
+                            { a: 'C', b: 43 },
+                            { a: 'D', b: 91 }
+                        ]
+                    },
+                    mark: 'bar',
+                    encoding: {
+                        x: { field: 'a', type: 'ordinal' },
+                        y: { field: 'b', type: 'quantitative' }
+                    }
+                }
+            },
+            configuration: {
+                canvas: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Use the canvas renderer instead of the svg one for more interactive plots'
+                }
+            }
+        }
+    },
+    plotlycomponent: {
+        name: 'Plotly',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/plotly`,
+        dims: '2:8-6:8',
+        customCss: {},
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    type: 'bar',
+                    x: [1, 2, 3, 4],
+                    y: [5, 10, 2, 8],
+                    marker: {
+                        color: '#C8A2C8',
+                        line: {
+                            width: 2.5
+                        }
+                    }
+                }
+            },
+            configuration: {
+                layout: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information'
+                }
+            }
+        }
+    },
+    plotlycomponentv2: {
+        name: 'Plotly',
+        icon: PieChart,
+        documentationLink: `${documentationBaseUrl}/plotly`,
+        dims: '2:8-6:8',
+        customCss: {},
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                layout: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information'
+                }
+            }
+        }
+    },
+    timeseriescomponent: {
+        name: 'Timeseries',
+        icon: GripHorizontal,
+        documentationLink: `${documentationBaseUrl}/timeseries`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                logarithmicScale: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                },
+                zoomable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                },
+                pannable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [
+                    {
+                        label: 'foo',
+                        data: [
+                            {
+                                x: '2021-11-06 23:39:30',
+                                y: 50
+                            },
+                            {
+                                x: '2021-11-07 01:00:28',
+                                y: 60
+                            },
+                            {
+                                x: '2021-11-07 09:00:28',
+                                y: 20
+                            }
+                        ],
+                        backgroundColor: 'rgb(255, 12, 137)'
+                    },
+                    {
+                        label: 'foobar',
+                        data: [
+                            {
+                                x: '2021-11-06 23:39:30',
+                                y: 20
+                            },
+                            {
+                                x: '2021-11-07 01:00:28',
+                                y: 13
+                            },
+                            {
+                                x: '2021-11-07 09:00:28',
+                                y: 45
+                            }
+                        ],
+                        backgroundColor: 'orange'
+                    }
+                ]
+            }
+        }
+    },
+    scatterchartcomponent: {
+        name: 'Scatter Chart',
+        icon: GripHorizontal,
+        documentationLink: `${documentationBaseUrl}/scatter_chart`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                zoomable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                },
+                pannable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [
+                    {
+                        label: 'foo',
+                        data: [
+                            { x: 25, y: 50 },
+                            { x: 23, y: 23 },
+                            { x: 12, y: 37 }
+                        ],
+                        backgroundColor: 'rgb(255, 12, 137)'
+                    },
+                    {
+                        label: 'foobar',
+                        data: [
+                            { x: 32, y: 32 },
+                            { x: 25, y: 42 },
+                            { x: 3, y: 27 }
+                        ],
+                        backgroundColor: 'orange'
+                    }
+                ]
+            }
+        }
+    },
+    tablecomponent: {
+        name: 'TanStack Table',
+        icon: Table2,
+        documentationLink: `${documentationBaseUrl}/table`,
+        dims: '3:10-6:10',
+        customCss: {
+            container: { class: '', style: '' },
+            tableHeader: { class: '', style: '' },
+            tableBody: { class: '', style: '' },
+            tableFooter: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                columnDefs: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'table-column',
+                    value: [{ field: 'id' }, { field: 'name' }, { field: 'age' }]
+                },
+                search: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.tableSearchOptions,
+                    value: 'Disabled',
+                    tooltip: 'Search can be configured in the following ways: Disabled: The search is disabled,By Runnable: The search is done in the backend, or by component: The search is done in the frontend.'
+                },
+                pagination: paginationOneOf,
+                downloadButton: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'display a button to download the table as a csv file'
+                },
+                initialState: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'any configuration that can be passed to the tanstack table component as initial state (https://tanstack.com/table/v8/docs/api/core/table#initialstate)'
+                },
+                selectFirstRowByDefault: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Select the first row by default on start'
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [
+                    {
+                        id: 1,
+                        name: 'A cell with a long name',
+                        age: 42
+                    },
+                    {
+                        id: 2,
+                        name: 'A briefer cell',
+                        age: 84
+                    }
+                ],
+                hideRefreshButton: true
+            },
+            actionButtons: true
+        }
+    },
+    aggridcomponent: aggridcomponentconst,
+    aggridcomponentee: { ...aggridcomponentconst, name: 'AgGrid Table EE' },
+    aggridinfinitecomponent: aggridinfinitecomponentconst,
+    aggridinfinitecomponentee: { ...aggridinfinitecomponentconst, name: 'AgGrid Infinite Table EE' },
+    checkboxcomponent: {
+        name: 'Toggle',
+        icon: ToggleLeft,
+        documentationLink: `${documentationBaseUrl}/toggle`,
+        dims: '1:1-2:1',
+        customCss: {
+            text: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            componentInput: undefined,
+            onToggle: [],
+            recomputeIds: true,
+            configuration: {
+                label: {
+                    type: 'static',
+                    value: 'Label',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'boolean'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                }
+            }
+        }
+    },
+    textinputcomponent: {
+        name: 'Text Input',
+        icon: TextCursorInput,
+        documentationLink: `${documentationBaseUrl}/text_input`,
+        dims: '2:1-2:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                }
+            }
+        }
+    },
+    quillcomponent: {
+        name: 'Rich Text Editor',
+        icon: TextCursorInput,
+        documentationLink: `${documentationBaseUrl}/rich_text_editor`,
+        dims: '2:1-4:4',
+        customCss: {},
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                }
+            }
+        }
+    },
+    textareainputcomponent: {
+        name: 'Textarea',
+        icon: TextCursorInput,
+        documentationLink: `${documentationBaseUrl}/textarea`,
+        dims: '2:1-2:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                }
+            }
+        }
+    },
+    selectcomponent: {
+        name: 'Select',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/select`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: {
+                style: '',
+                tooltip: 'https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md',
+                class: ''
+            }
+        },
+        initialData: {
+            recomputeIds: true,
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ]
+                },
+                create: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Allows user to manually add new value',
+                    customTitle: 'User creatable'
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select an item'
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                },
+                preselectFirst: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean',
+                    tooltip: 'Preselect first item in the options if no default value is set'
+                },
+                nativeHtmlSelect: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Use a native html select instead of the Windmill select component'
+                },
+                fullWidth: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Set the width of the options popup to 100% of the select width'
+                }
+            }
+        }
+    },
+    multiselectcomponent: {
+        name: 'Multi Select',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/multiselect`,
+        dims: '2:1-3:1',
+        customCss: {
+            multiselect: {
+                style: '',
+                tooltip: 'See https://multiselect.janosh.dev/#with-css-variables for the available variables'
+            }
+        },
+        initialData: {
+            componentInput: undefined,
+            verticalAlignment: 'center',
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    value: ['Foo', 'Bar']
+                },
+                defaultItems: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'text',
+                    value: []
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select items'
+                },
+                create: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Allows user to manually add new value',
+                    customTitle: 'User creatable'
+                },
+                allowOverflow: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'If too many items, the box overflow its container instead of having an internal scroll'
+                }
+            }
+        }
+    },
+    multiselectcomponentv2: {
+        name: 'Multi Select',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/multiselect`,
+        dims: '2:1-3:1',
+        customCss: {
+            multiselect: {
+                style: '',
+                tooltip: 'See https://multiselect.janosh.dev/#with-css-variables for the available variables'
+            }
+        },
+        initialData: {
+            componentInput: undefined,
+            verticalAlignment: 'center',
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: ['Foo', 'Bar']
+                },
+                defaultItems: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: []
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select items'
+                },
+                create: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Allows user to manually add new value',
+                    customTitle: 'User creatable'
+                },
+                allowOverflow: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'If too many items, the box overflow its container instead of having an internal scroll'
+                }
+            }
+        }
+    },
+    resourceselectcomponent: {
+        name: 'Static Resource Select',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/resource_select`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledresource',
+                    allowTypeChange: false,
+                    value: []
+                },
+                placeholder: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Select an item'
+                },
+                fullWidth: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Set the width of the options popup to 100% of the select width'
+                },
+                disabled: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            }
+        }
+    },
+    userresourcecomponent: {
+        name: 'User Resource Input',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/resource_select`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { style: '', class: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                resourceType: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'postgresql'
+                },
+                expressOauthSetup: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'If enabled, skip some steps while adding oauth resources: No scopes to set prior to OAuth sign-in,  and no path to set after OAuth sign-in'
+                },
+                disabled: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                }
+            }
+        }
+    },
+    numberinputcomponent: {
+        name: 'Number',
+        icon: Binary,
+        documentationLink: `${documentationBaseUrl}/number_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Type...',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'number'
+                },
+                min: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'number'
+                },
+                max: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'number'
+                },
+                step: {
+                    type: 'static',
+                    value: 1,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion'
+                }
+            }
+        }
+    },
+    currencycomponent: {
+        name: 'Currency',
+        icon: DollarSign,
+        documentationLink: `${documentationBaseUrl}/currency_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'number'
+                },
+                isNegativeAllowed: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                currency: {
+                    type: 'static',
+                    value: 'USD',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.currencyOptions
+                },
+                locale: {
+                    type: 'static',
+                    value: 'en-US',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.localeOptions,
+                    tooltip: 'Currency format'
+                }
+            }
+        }
+    },
+    slidercomponent: {
+        name: 'Slider',
+        icon: SlidersHorizontal,
+        documentationLink: `${documentationBaseUrl}/slider`,
+        dims: '3:1-4:1',
+        customCss: {
+            bar: { style: '', class: '' },
+            handle: { style: '', class: '' },
+            limits: { class: '', style: '' },
+            value: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                min: {
+                    type: 'static',
+                    value: 0,
+                    fieldType: 'number'
+                },
+                max: {
+                    type: 'static',
+                    value: 42,
+                    fieldType: 'number'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: 20,
+                    fieldType: 'number'
+                },
+                step: {
+                    type: 'static',
+                    value: 1,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion'
+                },
+                vertical: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                axisStep: {
+                    type: 'static',
+                    value: 10,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion when using the arrow keys'
+                }
+            }
+        }
+    },
+    dateslidercomponent: {
+        name: 'Date Slider',
+        icon: SlidersHorizontal,
+        documentationLink: `${documentationBaseUrl}/date_slider`,
+        dims: '3:1-4:1',
+        customCss: {
+            bar: { style: '', class: '' },
+            handle: { style: '', class: '' },
+            limits: { class: '', style: '' },
+            value: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                min: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'date'
+                },
+                max: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'date'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'date'
+                },
+                step: {
+                    type: 'static',
+                    value: 1,
+                    fieldType: 'number',
+                    tooltip: 'Number of days between each date suggestion'
+                },
+                vertical: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                outputFormat: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text',
+                    tooltip: 'See date-fns format for more information',
+                    documentationLink: 'https://date-fns.org/v1.29.0/docs/format'
+                }
+            }
+        }
+    },
+    rangecomponent: {
+        name: 'Range',
+        icon: SlidersHorizontal,
+        documentationLink: `${documentationBaseUrl}/range`,
+        dims: '3:2-4:2',
+        customCss: {
+            handles: { style: '' },
+            bar: { style: '' },
+            limits: { class: '', style: '' },
+            values: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                min: {
+                    type: 'static',
+                    value: 0,
+                    fieldType: 'number'
+                },
+                max: {
+                    type: 'static',
+                    value: 42,
+                    fieldType: 'number'
+                },
+                defaultLow: {
+                    type: 'static',
+                    value: 10,
+                    fieldType: 'number'
+                },
+                defaultHigh: {
+                    type: 'static',
+                    value: 20,
+                    fieldType: 'number'
+                },
+                step: {
+                    type: 'static',
+                    value: 1,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'Determine if the slider is disabled, or enabled (only disables interactions, and events)'
+                },
+                axisStep: {
+                    type: 'static',
+                    value: 10,
+                    fieldType: 'number',
+                    tooltip: 'Spread between each number suggestion when using the arrow keys'
+                }
+            }
+        }
+    },
+    passwordinputcomponent: {
+        name: 'Password',
+        icon: Lock,
+        documentationLink: `${documentationBaseUrl}/password_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Password',
+                    fieldType: 'text'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                }
+            }
+        }
+    },
+    emailinputcomponent: {
+        name: 'Email Input',
+        icon: AtSignIcon,
+        documentationLink: `${documentationBaseUrl}/email_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                placeholder: {
+                    type: 'static',
+                    value: 'Email',
+                    fieldType: 'text'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                }
+            }
+        }
+    },
+    dateinputcomponent: {
+        name: 'Date',
+        icon: Calendar,
+        documentationLink: `${documentationBaseUrl}/date_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                minDate: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'date',
+                    tooltip: 'The minimum date that can be selected. The format is: "yyyy-MM-dd"'
+                },
+                maxDate: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'date',
+                    tooltip: 'The maximum date that can be selected. The format is: "yyyy-MM-dd"'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'date'
+                },
+                outputFormat: {
+                    type: 'static',
+                    value: 'yyyy-MM-dd',
+                    fieldType: 'text',
+                    markdownTooltip: `### Output format				
+See date-fns format for more information. By default, it is 'yyyy-MM-dd'
+
+| Format      | Result | Description |
+| ----------- | ----------- | ----------- |
+| dd 				| 01, 02, ..., 31 | Day of the month |
+| d 				| 1, 2, ..., 31 | Day of the month |
+| MM 				| 01, 02, ..., 12 | Month |
+| MMM 				| Jan, Feb, ..., Dec | Month |
+| MMMM 				| January, February, ..., December | Month |
+| yyyy 				| 2021, 2022, ... | Year |
+`,
+                    documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
+                    placeholder: 'yyyy-MM-dd'
+                }
+            }
+        }
+    },
+    datetimeinputcomponent: {
+        name: 'Date & Time',
+        icon: CalendarClock,
+        documentationLink: `${documentationBaseUrl}/datetime_input`,
+        dims: '2:1-6:2',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                displayPresets: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'Display presets to select the date for example, in 1 week, in 1 month, etc.'
+                },
+                minDateTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'datetime',
+                    tooltip: 'The minimum date and time that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date'
+                },
+                maxDateTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'datetime',
+                    tooltip: 'The maximum date and time that can be selected. The format is the ISO 8601 format: "yyyy-MM-ddTHH:mm:ss:SSSZ", for example "2021-11-06T23:39:30.000Z", or toISOString() from a Date'
+                },
+                outputFormat: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'text',
+                    documentationLink: 'https://date-fns.org/v2.30.0/docs/format',
+                    placeholder: 'dd.MM.yyyy HH:mm',
+                    markdownTooltip: `### Output format				
+See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
+
+| Format      | Result | Description |
+| ----------- | ----------- | ----------- |
+| dd 				| 01, 02, ..., 31 | Day of the month |
+| d 				| 1, 2, ..., 31 | Day of the month |
+| MM 				| 01, 02, ..., 12 | Month |
+| MMM 				| Jan, Feb, ..., Dec | Month |
+| MMMM 				| January, February, ..., December | Month |
+| yyyy 				| 2021, 2022, ... | Year |
+| HH 				| 00, 01, ..., 23 | Hours |
+| mm 				| 00, 01, ..., 59 | Minutes |
+| ss 				| 00, 01, ..., 59 | Seconds |
+					`
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'datetime'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                }
+            }
+        }
+    },
+    timeinputcomponent: {
+        name: 'Time',
+        icon: Clock,
+        documentationLink: `${documentationBaseUrl}/time_input`,
+        dims: '2:1-3:1',
+        customCss: {
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                minTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'time',
+                    tooltip: 'The minimum time that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm"'
+                },
+                maxTime: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'time',
+                    tooltip: 'The maximum time that can be selected. If the time provided is not valid, it will set the output "validity" to false. The format is: "HH:mm"'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'time'
+                },
+                ['24hFormat']: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean',
+                    tooltip: 'Use 24h format. Will change the format of the output of the component: HH:mm to hh:mm am/pm'
+                }
+            }
+        }
+    },
+    tabscomponent: {
+        name: 'Tabs',
+        icon: ListOrdered,
+        documentationLink: `${documentationBaseUrl}/tabs`,
+        dims: '2:8-6:8',
+        customCss: {
+            tabRow: { class: '', style: '' },
+            allTabs: { class: '', style: '' },
+            selectedTab: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                tabsKind: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.tabsKindOptions,
+                    value: 'tabs',
+                    tooltip: `Tabs can be configured to be either horizontal (tabs), vertical (sidebar), or invisible.`
+                }
+            },
+            componentInput: undefined,
+            numberOfSubgrids: 2,
+            tabs: ['First tab', 'Second tab']
+        }
+    },
+    steppercomponent: {
+        name: 'Stepper',
+        icon: ListOrdered,
+        documentationLink: `${documentationBaseUrl}/stepper`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'runnable',
+                fieldType: 'any',
+                fields: {},
+                runnable: undefined
+            },
+            numberOfSubgrids: 2,
+            tabs: ['First', 'Second']
+        }
+    },
+    carousellistcomponent: {
+        name: 'Carousel List',
+        icon: GalleryThumbnails,
+        documentationLink: `${documentationBaseUrl}/carousel`,
+        dims: '3:8-12:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                timingFunction: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.animationTimingFunctionOptions,
+                    value: 'linear',
+                    tooltip: 'Sets how an animation progresses through the duration of each cycle, see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function'
+                }
+            },
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
+            },
+            numberOfSubgrids: 1
+        }
+    },
+    accordionlistcomponent: {
+        name: 'Accordion List',
+        icon: ListCollapse,
+        documentationLink: `${documentationBaseUrl}/accordion`,
+        dims: '3:8-12:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [{ header: 'First', foo: 1 }, { header: 'Second', foo: 2 }, { header: 'Third', foo: 3 }]
+            },
+            numberOfSubgrids: 1
+        }
+    },
+    iconcomponent: {
+        name: 'Icon',
+        icon: Smile,
+        documentationLink: `${documentationBaseUrl}/icon`,
+        dims: '1:3-1:2',
+        customCss: {
+            container: { class: '', style: '' },
+            icon: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                icon: {
+                    type: 'static',
+                    value: 'Smile',
+                    fieldType: 'icon-select',
+                    tooltip: 'The icons can be found at https://lucide.dev/'
+                },
+                color: {
+                    type: 'static',
+                    value: 'currentColor',
+                    fieldType: 'color',
+                    tooltip: 'The color of the icon can be overridden by the `background-color` property in the styling menu'
+                },
+                size: {
+                    type: 'static',
+                    value: 24,
+                    fieldType: 'number'
+                },
+                strokeWidth: {
+                    type: 'static',
+                    value: 2,
+                    fieldType: 'number'
+                }
+            }
+        }
+    },
+    horizontaldividercomponent: {
+        name: 'Divider X',
+        icon: SeparatorHorizontal,
+        documentationLink: `${documentationBaseUrl}/divider_x`,
+        dims: '3:1-12:1',
+        customCss: {
+            container: { class: '', style: '' },
+            divider: {
+                class: '',
+                style: '',
+                tooltip: '`background-color` and `height` are handled by the component configuration'
+            }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                size: {
+                    type: 'static',
+                    value: 2,
+                    fieldType: 'number',
+                    tooltip: 'The height of the divider in pixels can be overridden by the `height` property in the styling menu'
+                },
+                color: {
+                    type: 'static',
+                    value: '#00000060',
+                    fieldType: 'color',
+                    tooltip: 'The color of the divider can be overridden by the `background-color` property in the styling menu'
+                }
+            }
+        }
+    },
+    verticaldividercomponent: {
+        name: 'Divider Y',
+        icon: SeparatorVertical,
+        documentationLink: `${documentationBaseUrl}/divider_y`,
+        dims: '1:4-1:6',
+        customCss: {
+            container: { class: '', style: '' },
+            divider: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                size: {
+                    type: 'static',
+                    value: 2,
+                    fieldType: 'number',
+                    tooltip: 'The width of the divider in pixels can be overridden by the `width` property in the styling menu'
+                },
+                color: {
+                    type: 'static',
+                    value: '#00000060',
+                    fieldType: 'color',
+                    tooltip: 'The color of the divider can be overridden by the `background-color` property in the styling menu'
+                }
+            }
+        }
+    },
+    fileinputcomponent: {
+        name: 'File Input',
+        icon: Paperclip,
+        documentationLink: `${documentationBaseUrl}/file_input`,
+        dims: '3:4-6:4',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                acceptedFileTypes: {
+                    type: 'static',
+                    value: ['image/*', 'application/pdf'],
+                    fieldType: 'array'
+                },
+                allowMultiple: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'If allowed, the user will be able to select more than one file'
+                },
+                text: {
+                    type: 'static',
+                    value: 'Drag and drop files or click to select them',
+                    fieldType: 'text'
+                },
+                includeMimeType: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'If enabled, the mime type of the file will be included.'
+                },
+                submittedFileText: {
+                    type: 'static',
+                    value: 'Selected file',
+                    fieldType: 'text'
+                },
+                disabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                }
+            }
+        }
+    },
+    imagecomponent: {
+        name: 'Image',
+        icon: Image,
+        documentationLink: `${documentationBaseUrl}/image`,
+        dims: '3:4-5:4',
+        customCss: {
+            image: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                source: {
+                    type: 'static',
+                    value: '/logo.svg',
+                    fieldType: 'text',
+                    fileUpload: {
+                        accept: 'image/*',
+                        convertTo: 'base64'
+                    }
+                },
+                sourceKind: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.imageSourceKind,
+                    value: 'url'
+                },
+                imageFit: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.objectFitOptions,
+                    value: 'contain',
+                    tooltip: 'The image fit property can be overridden by the `object-fit` property in the styling menu'
+                },
+                altText: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text',
+                    tooltip: "This text will appear if the image can't be loaded for any reason"
+                }
+            }
+        }
+    },
+    drawercomponent: {
+        name: 'Drawer',
+        icon: SidebarClose,
+        documentationLink: `${documentationBaseUrl}/drawer`,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { style: '', class: '' },
+            container: { class: '', style: '' },
+            drawer: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            configuration: {
+                drawerTitle: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Drawer title'
+                },
+                hideButtonOnView: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'Make button invisible when app is used outside of the edit mode'
+                },
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: buttonColorOptions,
+                    value: 'blue',
+                    tooltip: 'The color of the button can be overridden by the `background-color` property in the styling menu'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                }
+            },
+            componentInput: undefined,
+            numberOfSubgrids: 1
+        }
+    },
+    mapcomponent: {
+        name: 'Map',
+        icon: MapPin,
+        documentationLink: `${documentationBaseUrl}/map`,
+        dims: '3:6-6:10',
+        customCss: {
+            map: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                longitude: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 15
+                },
+                latitude: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 50
+                },
+                zoom: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 3
+                },
+                markers: {
+                    fieldType: 'array',
+                    type: 'static',
+                    subFieldType: 'object',
+                    fileUpload: {
+                        accept: 'application/json',
+                        convertTo: 'text'
+                    },
+                    value: [
+                        {
+                            lon: 12.496366,
+                            lat: 41.902783,
+                            title: 'Rome',
+                            radius: 7,
+                            color: '#dc2626',
+                            strokeWidth: 3,
+                            strokeColor: '#fca5a5'
+                        },
+                        {
+                            lon: -0.136439,
+                            lat: 51.507359,
+                            title: 'London'
+                        }
+                    ]
+                },
+                lock: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'Lock the map to prevent user interaction'
+                }
+            }
+        }
+    },
+    verticalsplitpanescomponent: {
+        name: 'Vertical Split Panes',
+        icon: FlipHorizontal,
+        documentationLink: `${documentationBaseUrl}/vertical_split_panes`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            panes: [50, 50],
+            numberOfSubgrids: 2
+        }
+    },
+    horizontalsplitpanescomponent: {
+        name: 'Horizontal Split Panes',
+        icon: FlipVertical,
+        documentationLink: `${documentationBaseUrl}/horizontal_split_panes`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            panes: [50, 50],
+            numberOfSubgrids: 2
+        }
+    },
+    pdfcomponent: {
+        name: 'PDF',
+        icon: FileText,
+        documentationLink: `${documentationBaseUrl}/pdf`,
+        dims: '3:8-8:12',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            configuration: {
+                source: {
+                    type: 'static',
+                    value: '/dummy.pdf',
+                    fieldType: 'text',
+                    fileUpload: {
+                        accept: 'application/pdf',
+                        convertTo: 'base64'
+                    },
+                    placeholder: 'Enter URL or upload file (base64)'
+                },
+                zoom: {
+                    fieldType: 'number',
+                    type: 'static',
+                    value: 100
+                }
+            }
+        }
+    },
+    modalcomponent: {
+        name: 'Modal',
+        icon: SidebarClose,
+        documentationLink: `${documentationBaseUrl}/modal`,
+        dims: '1:1-2:1',
+        customCss: {
+            button: { class: '', style: '' },
+            buttonContainer: { class: '', style: '' },
+            popup: { class: '', style: '' }
+        },
+        initialData: {
+            horizontalAlignment: 'center',
+            verticalAlignment: 'center',
+            configuration: {
+                modalTitle: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Modal title'
+                },
+                hideButtonOnView: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'Make button invisible when app is used outside of the edit mode'
+                },
+                buttonLabel: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Press me'
+                },
+                buttonColor: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: buttonColorOptions,
+                    value: 'blue',
+                    tooltip: 'These presets can be overwritten with custom styles.'
+                },
+                buttonSize: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                buttonFillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'This will make the button fill the container width and height. Height and width can be overwritten with custom styles.'
+                },
+                buttonDisabled: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                }
+            },
+            componentInput: undefined,
+            numberOfSubgrids: 1
+        }
+    },
+    schemaformcomponent: {
+        name: 'Form',
+        icon: FileText,
+        documentationLink: `${documentationBaseUrl}/form_input`,
+        dims: '3:8-8:12',
+        customCss: {
+            container: { class: '', style: '' },
+            label: { class: '', style: '' },
+            description: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: {
+                type: 'static',
+                fieldType: 'schema',
+                value: {
+                    properties: {
+                        first_name: {
+                            type: 'string',
+                            description: 'your name',
+                            default: 'default'
+                        }
+                    },
+                    required: []
+                }
+            },
+            configuration: {
+                defaultValues: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'This enables setting default form values dynamically using an object: keys are field names, and values are the defaults.'
+                },
+                dynamicEnums: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings.'
+                },
+                displayType: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'This will display the type and/or the format on the field next to the label.'
+                },
+                largeGap: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false,
+                    tooltip: 'This will add a large gap between the form elements.'
+                }
+            }
+        }
+    },
+    selecttabcomponent: {
+        name: 'Select Tab',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/select_tab`,
+        dims: '2:1-3:1',
+        customCss: {
+            tabRow: { class: '', style: '' },
+            allTabs: { class: '', style: '' },
+            selectedTab: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: [
+                        { value: 'foo', label: 'Foo' },
+                        { value: 'bar', label: 'Bar' }
+                    ]
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                },
+                tabSize: {
+                    type: 'static',
+                    value: 'sm',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    tooltip: 'Size of the tabs can be overwritten with custom styles using `font-size` in CSS or using tailwind classes.'
+                }
+            }
+        }
+    },
+    selectstepcomponent: {
+        name: 'Select Step',
+        icon: List,
+        documentationLink: `${documentationBaseUrl}/select_step`,
+        dims: '2:1-3:1',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                items: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'labeledselect',
+                    value: ['Foo', 'Bar']
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'object'
+                }
+            }
+        }
+    },
+    conditionalwrapper: {
+        name: 'Conditional Tabs',
+        icon: Split,
+        documentationLink: `${documentationBaseUrl}/conditional_tabs`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            numberOfSubgrids: 2,
+            conditions: [
+                {
+                    type: 'evalv2',
+                    expr: 'false',
+                    fieldType: 'boolean',
+                    connections: []
+                },
+                {
+                    type: 'evalv2',
+                    expr: 'true',
+                    fieldType: 'boolean',
+                    connections: []
+                }
+            ]
+        }
+    },
+    statcomponent: {
+        name: 'Statistic Card',
+        icon: FileBarChart,
+        documentationLink: `${documentationBaseUrl}/statistic_card`,
+        dims: '2:4-3:4',
+        quickstyle: {
+            title: {
+                quickCss: ['font-size: 1rem', 'font-size: 1.5rem', 'font-size: 2rem'],
+                quickTailwindClasses: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+            },
+            value: {
+                quickCss: ['font-size: 1rem', 'font-size: 1.5rem', 'font-size: 2rem'],
+                quickTailwindClasses: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+            }
+        },
+        customCss: {
+            title: {
+                class: '',
+                style: ''
+            },
+            container: { class: '', style: '' },
+            value: {
+                class: '',
+                style: ''
+            },
+            media: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                title: {
+                    type: 'static',
+                    value: 'Title',
+                    fieldType: 'text'
+                },
+                value: {
+                    type: 'static',
+                    value: 'Value',
+                    fieldType: 'text'
+                },
+                progress: {
+                    type: 'static',
+                    value: 0,
+                    fieldType: 'number'
+                },
+                media: {
+                    type: 'oneOf',
+                    selected: 'image',
+                    labels: {
+                        icon: 'Icon',
+                        image: 'Image'
+                    },
+                    configuration: {
+                        icon: {
+                            icon: {
+                                type: 'static',
+                                value: undefined,
+                                fieldType: 'icon-select'
+                            }
+                        },
+                        image: {
+                            source: {
+                                type: 'static',
+                                value: '/logo.svg',
+                                fieldType: 'text',
+                                fileUpload: {
+                                    accept: 'image/*',
+                                    convertTo: 'base64'
+                                }
+                            },
+                            sourceKind: {
+                                fieldType: 'select',
+                                type: 'static',
+                                selectOptions: selectOptions.imageSourceKind,
+                                value: 'url'
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    menucomponent: {
+        name: 'Dropdown Menu',
+        icon: Menu,
+        documentationLink: `${documentationBaseUrl}/dropdown_menu`,
+        dims: '1:1-1:2',
+        customCss: {
+            button: { style: '', class: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            componentInput: undefined,
+            configuration: {
+                label: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: ''
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonColorOptions,
+                    value: 'light'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: selectOptions.buttonSizeOptions,
+                    value: 'xs'
+                },
+                fillContainer: {
+                    fieldType: 'boolean',
+                    type: 'static',
+                    value: false
+                },
+                beforeIcon: {
+                    type: 'static',
+                    value: 'Menu',
+                    fieldType: 'icon-select'
+                },
+                afterIcon: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'icon-select'
+                }
+            },
+            menuItems: true
+        }
+    },
+    decisiontreecomponent: {
+        name: 'Decision Tree',
+        icon: Network,
+        documentationLink: `${documentationBaseUrl}/decision_tree`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: undefined,
+            numberOfSubgrids: 1,
+            nodes: [
+                {
+                    id: 'a',
+                    label: 'a',
+                    allowed: {
+                        type: 'evalv2',
+                        expr: 'true',
+                        fieldType: 'boolean',
+                        connections: []
+                    },
+                    next: []
+                }
+            ]
+        }
+    },
+    s3fileinputcomponent: {
+        name: 'S3 File Uploader',
+        icon: UploadCloud,
+        documentationLink: `${documentationBaseUrl}/s3fileinput`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                type: {
+                    type: 'oneOf',
+                    selected: 's3',
+                    labels: {
+                        s3: 'S3'
+                    },
+                    configuration: {
+                        s3: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                value: '',
+                                subFieldType: 's3'
+                            },
+                            acceptedFileTypes: {
+                                type: 'static',
+                                value: ['image/*', 'application/pdf'],
+                                fieldType: 'array'
+                            },
+                            allowMultiple: {
+                                type: 'static',
+                                value: false,
+                                fieldType: 'boolean',
+                                tooltip: 'If allowed, the user will be able to select more than one file'
+                            },
+                            allowDelete: {
+                                type: 'static',
+                                value: false,
+                                fieldType: 'boolean',
+                                tooltip: 'If allowed, the user will be able to delete files'
+                            },
+                            text: {
+                                type: 'static',
+                                value: 'Drag and drop files or click to select them',
+                                fieldType: 'text'
+                            },
+                            /*
+                            displayDirectLink: {
+                                type: 'static',
+                                value: false,
+                                fieldType: 'boolean'
+                            },
+                            */
+                            pathTemplate: {
+                                type: 'evalv2',
+                                expr: `\`\${file.name}\``,
+                                fieldType: 'template',
+                                connections: [],
+                                onDemandOnly: true
+                            },
+                            disabled: {
+                                type: 'static',
+                                value: false,
+                                fieldType: 'boolean'
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    dbexplorercomponent: {
+        name: 'Database Studio Table',
+        icon: Database,
+        documentationLink: `${documentationBaseUrl}/database_studio`,
+        dims: '2:8-6:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                type: {
+                    type: 'oneOf',
+                    selected: 'postgresql',
+                    labels: {
+                        postgresql: 'PostgreSQL',
+                        mysql: 'MySQL',
+                        ms_sql_server: 'MS SQL Server',
+                        snowflake: 'Snowflake',
+                        bigquery: 'BigQuery',
+                        snowflake_oauth: 'Snowflake OAuth'
+                    },
+                    configuration: {
+                        postgresql: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'postgres',
+                                value: '',
+                                allowTypeChange: false
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined,
+                                allowTypeChange: false
+                            }
+                        },
+                        mysql: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'mysql',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        ms_sql_server: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'ms_sql_server',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        snowflake: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'snowflake',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        },
+                        bigquery: {
+                            resource: {
+                                type: 'static',
+                                fieldType: 'resource',
+                                subFieldType: 'bigquery',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
+                        }
+                    }
+                },
+                columnDefs: {
+                    type: 'static',
+                    fieldType: 'array',
+                    subFieldType: 'db-explorer',
+                    value: [],
+                    loading: false
+                },
+                rowIdCol: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    placeholder: 'id',
+                    tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+                },
+                whereClause: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    allowTypeChange: false
+                },
+                flex: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'default col flex is 1 (see ag-grid docs)'
+                },
+                allEditable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    hide: true,
+                    tooltip: 'Configure all columns as Editable by users'
+                },
+                allowDelete: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    hide: true,
+                    tooltip: 'Allow deleting rows'
+                },
+                multipleSelectable: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Make multiple rows selectable at once'
+                },
+                rowMultiselectWithClick: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'If multiple selectable, allow multiselect with click'
+                },
+                selectFirstRowByDefault: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Select the first row by default on start'
+                },
+                extraConfig: {
+                    type: 'static',
+                    fieldType: 'object',
+                    value: {},
+                    tooltip: 'any configuration that can be passed to ag-grid top level'
+                },
+                hideInsert: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the insert button'
+                },
+                hideSearch: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the search bar'
+                },
+                wrapActions: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'When true, actions will wrap to the next line. Otherwise, the column will grow to fit the actions.'
+                },
+                footer: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: true,
+                    tooltip: 'Allow visible footer for pagination and download'
+                },
+                customActionsHeader: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: undefined,
+                    tooltip: 'Custom header for the actions columns'
+                }
+            },
+            componentInput: undefined
+        }
+    },
+    alertcomponent: {
+        name: 'Alert',
+        icon: AlertTriangle,
+        documentationLink: `${documentationBaseUrl}/alert`,
+        dims: '2:1-4:5',
+        customCss: {
+            container: { class: '', style: '' },
+            background: { class: '', style: '' },
+            icon: { class: '', style: '' },
+            title: { class: '', style: '' },
+            description: { class: '', style: '' }
+        },
+        initialData: {
+            verticalAlignment: 'center',
+            componentInput: undefined,
+            configuration: {
+                type: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: [
+                        { value: 'info', label: 'Info' },
+                        { value: 'success', label: 'Success' },
+                        { value: 'warning', label: 'Warning' },
+                        { value: 'error', label: 'Error' }
+                    ],
+                    value: 'info'
+                },
+                title: {
+                    type: 'static',
+                    value: 'Title',
+                    fieldType: 'text'
+                },
+                description: {
+                    type: 'static',
+                    value: 'Description',
+                    fieldType: 'text'
+                },
+                notRounded: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                tooltip: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text'
+                },
+                size: {
+                    type: 'static',
+                    value: 'sm',
+                    fieldType: 'select',
+                    selectOptions: [
+                        { value: 'xs', label: 'Extra small' },
+                        { value: 'sm', label: 'Small' }
+                    ]
+                },
+                collapsible: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                },
+                initiallyCollapsed: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean'
+                }
+            }
+        }
+    },
+    navbarcomponent: {
+        name: 'Navbar',
+        icon: AppWindow,
+        documentationLink: `${documentationBaseUrl}/navbar`,
+        dims: '12:1-12:2',
+        customCss: {
+            container: { class: '', style: '' },
+            image: { class: '', style: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            componentInput: undefined,
+            configuration: {
+                title: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Title'
+                },
+                borderColor: {
+                    type: 'static',
+                    value: '#555',
+                    fieldType: 'color'
+                },
+                logo: {
+                    type: 'oneOf',
+                    selected: 'no',
+                    labels: {
+                        yes: 'Use logo',
+                        no: 'No logo'
+                    },
+                    configuration: {
+                        yes: {
+                            source: {
+                                type: 'static',
+                                value: '/logo.svg',
+                                fieldType: 'text',
+                                fileUpload: {
+                                    accept: 'image/*',
+                                    convertTo: 'base64'
+                                }
+                            },
+                            sourceKind: {
+                                fieldType: 'select',
+                                type: 'static',
+                                selectOptions: selectOptions.imageSourceKind,
+                                value: 'url'
+                            },
+                            altText: {
+                                type: 'static',
+                                value: '',
+                                fieldType: 'text',
+                                tooltip: "This text will appear if the image can't be loaded for any reason"
+                            }
+                        },
+                        no: {}
+                    }
+                },
+                orientation: {
+                    type: 'static',
+                    fieldType: 'select',
+                    value: 'horizontal',
+                    selectOptions: [
+                        { value: 'horizontal', label: 'Horizontal' },
+                        { value: 'vertical', label: 'Vertical' }
+                    ]
+                }
+            }
+        }
+    },
+    dateselectcomponent: {
+        name: 'Date Select',
+        icon: Calendar,
+        documentationLink: `${documentationBaseUrl}/date_select`,
+        dims: '3:4-6:4',
+        customCss: {
+            container: { class: '', style: '' },
+            input: { class: '', style: '' }
+        },
+        initialData: {
+            componentInput: undefined,
+            verticalAlignment: 'center',
+            configuration: {
+                enableDay: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean'
+                },
+                enableMonth: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean'
+                },
+                enableYear: {
+                    type: 'static',
+                    value: true,
+                    fieldType: 'boolean'
+                },
+                defaultValue: {
+                    type: 'static',
+                    value: undefined,
+                    fieldType: 'date'
+                },
+                orientation: {
+                    type: 'static',
+                    value: 'horizontal',
+                    fieldType: 'select',
+                    selectOptions: [
+                        { value: 'horizontal', label: 'Horizontal' },
+                        { value: 'vertical', label: 'Vertical' }
+                    ]
+                },
+                locale: {
+                    type: 'static',
+                    value: 'en-US',
+                    fieldType: 'select',
+                    selectOptions: selectOptions.localeOptions,
+                    tooltip: 'Format on the month names'
+                }
+            }
+        }
+    },
+    jobiddisplaycomponent: {
+        name: 'Rich Result by Job Id',
+        icon: Monitor,
+        documentationLink: `${documentationBaseUrl}/rich_result_by_job_id`,
+        dims: '2:8-6:8',
+        customCss: {
+            header: { class: '', style: '' },
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {
+                jobId: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    tooltip: 'Job id to display result from'
+                },
+                title: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: 'Result'
+                },
+                hideDetails: {
+                    type: 'static',
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: 'Hide the details section: the object keys, the clipboard button and the maximise button'
+                }
+            }
+        }
+    },
+    recomputeallcomponent: {
+        name: 'Recompute All',
+        icon: RefreshCw,
+        documentationLink: `${documentationBaseUrl}/recompute_all`,
+        dims: '4:1-6:1',
+        customCss: {
+            container: { style: '', class: '' }
+        },
+        initialData: {
+            ...defaultAlignement,
+            componentInput: undefined,
+            configuration: {
+                defaultRefreshInterval: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: [
+                        { value: '0', label: 'Once' },
+                        { value: '5', label: 'Every 5 seconds' },
+                        { value: '10', label: 'Every 10 seconds' },
+                        { value: '15', label: 'Every 15 seconds' },
+                        { value: '20', label: 'Every 20 seconds' },
+                        { value: '25', label: 'Every 25 seconds' },
+                        { value: '30', label: 'Every 30 seconds' }
+                    ],
+                    value: '0'
+                }
+            },
+            menuItems: true
+        }
+    }
+};
+export const presetComponents = {
+    sidebartabscomponent: {
+        name: 'Sidebar Tabs',
+        icon: PanelLeft,
+        dims: '3:8-12:8',
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'sidebar'
+            }
+        },
+        type: 'sidebartabscomponent'
+    },
+    accordiontabcomponent: {
+        name: 'Accordion Tabs',
+        icon: ListCollapse,
+        dims: '3:8-12:8',
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'accordion'
+            }
+        },
+        type: 'accordiontabcomponent'
+    },
+    invisibletabscomponent: {
+        name: 'Invisible Tabs',
+        icon: PanelTopInactive,
+        dims: '3:8-12:8',
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'invisibleOnView'
+            }
+        },
+        type: 'invisibletabscomponent'
+    },
+    topbarcomponent: {
+        name: 'Top Bar',
+        icon: PanelTop,
+        targetComponent: 'containercomponent',
+        configuration: {},
+        type: 'topbarcomponent',
+        dims: '6:2-12:2'
+    }
+};
+export const presets = presetComponents;
+export const ccomponents = components;