windmill-components 1.86.0 → 1.89.0

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

@@ -1,1439 +0,0 @@
-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 } from 'lucide-svelte';
-export function getRecommendedDimensionsByComponent(componentType, column) {
-    const size = components[componentType].dims.split('-')[column === 3 ? 0 : 1].split(':');
-    return { w: +size[0], h: +size[1] };
-}
-const buttonColorOptions = [...BUTTON_COLORS];
-export const selectOptions = {
-    buttonColorOptions,
-    tabsKindOptions: ['tabs', 'sidebar', 'invisibleOnView'],
-    buttonSizeOptions: ['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']
-};
-const onSuccessClick = {
-    type: 'oneOf',
-    tooltip: 'Action to perform on success',
-    selected: 'none',
-    labels: {
-        none: 'Do nothing',
-        gotoUrl: 'Go to an url',
-        setTab: 'Set the tab of a tabs component',
-        sendToast: 'Display a toast notification'
-    },
-    configuration: {
-        none: {},
-        gotoUrl: {
-            url: {
-                tooltip: 'Go to the given url, absolute or relative',
-                fieldType: 'text',
-                type: 'static',
-                value: '',
-                placeholder: '/apps/get/foo'
-            },
-            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'
-            }
-        },
-        sendToast: {
-            message: {
-                tooltip: 'The message of the toast to diplay',
-                fieldType: 'text',
-                type: 'static',
-                value: '',
-                placeholder: 'Hello there'
-            }
-        }
-    }
-};
-const paginationOneOf = {
-    type: 'oneOf',
-    selected: 'auto',
-    labels: {
-        auto: 'Auto',
-        manual: 'Manual'
-    },
-    configuration: {
-        auto: {
-            pageSize: {
-                type: 'static',
-                fieldType: 'number',
-                value: 20,
-                onlyStatic: true,
-                tooltip: 'Number of rows per page'
-            }
-        },
-        manual: {
-            pageCount: {
-                type: 'static',
-                fieldType: 'number',
-                value: -1,
-                tooltip: 'Number of pages (-1 if you do not know)'
-            }
-        }
-    }
-};
-export const components = {
-    displaycomponent: {
-        name: 'Rich Result',
-        icon: Monitor,
-        dims: '2:8-6:8',
-        customCss: {
-            header: { class: '', style: '' },
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            componentInput: {
-                type: 'static',
-                fieldType: 'object',
-                value: { foo: 42 }
-            },
-            configuration: {}
-        }
-    },
-    containercomponent: {
-        name: 'Container',
-        icon: BoxSelect,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {},
-            componentInput: undefined,
-            numberOfSubgrids: 1
-        }
-    },
-    textcomponent: {
-        name: 'Text',
-        icon: Type,
-        dims: '1:1-3:1',
-        customCss: {
-            text: { class: '', style: '' }
-        },
-        initialData: {
-            horizontalAlignment: 'left',
-            verticalAlignment: 'top',
-            componentInput: {
-                type: 'static',
-                fieldType: 'template',
-                value: 'Hello ${ctx.username}'
-            },
-            configuration: {
-                style: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.textStyleOptions,
-                    value: 'Body'
-                },
-                copyButton: {
-                    type: 'static',
-                    value: false,
-                    fieldType: 'boolean',
-                    onlyStatic: true
-                },
-                tooltip: {
-                    type: 'static',
-                    value: '',
-                    fieldType: 'text',
-                    onlyStatic: true,
-                    tooltip: 'Tooltip text if not empty'
-                }
-            }
-        }
-    },
-    buttoncomponent: {
-        name: 'Button',
-        icon: Inspect,
-        dims: '1:1-2:1',
-        customCss: {
-            button: { style: '', class: '' }
-        },
-        initialData: {
-            ...defaultAlignement,
-            componentInput: {
-                type: 'runnable',
-                fieldType: 'any',
-                fields: {},
-                runnable: undefined
-            },
-            recomputeIds: undefined,
-            configuration: {
-                label: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Press me'
-                },
-                color: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.buttonColorOptions,
-                    value: 'blue'
-                },
-                size: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.buttonSizeOptions,
-                    value: 'xs'
-                },
-                fillContainer: {
-                    fieldType: 'boolean',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: false
-                },
-                disabled: {
-                    fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
-                },
-                onSuccess: onSuccessClick,
-                beforeIcon: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'icon-select',
-                    onlyStatic: true
-                },
-                afterIcon: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'icon-select',
-                    onlyStatic: true
-                },
-                triggerOnAppLoad: {
-                    type: 'static',
-                    value: false,
-                    fieldType: 'boolean',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    formcomponent: {
-        name: 'Form',
-        icon: FormInput,
-        dims: '3:5-6:5',
-        customCss: {
-            container: { class: '', style: '' },
-            button: { class: '', style: '' }
-        },
-        initialData: {
-            horizontalAlignment: 'center',
-            componentInput: {
-                type: 'runnable',
-                fieldType: 'any',
-                fields: {},
-                runnable: undefined
-            },
-            recomputeIds: undefined,
-            configuration: {
-                label: {
-                    type: 'static',
-                    value: 'Submit',
-                    fieldType: 'text'
-                },
-                color: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: 'dark',
-                    selectOptions: selectOptions.buttonColorOptions
-                },
-                size: {
-                    fieldType: 'select',
-                    type: 'static',
-                    value: 'xs',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.buttonSizeOptions
-                },
-                onSuccess: onSuccessClick
-            }
-        }
-    },
-    formbuttoncomponent: {
-        name: 'Modal Form',
-        icon: PlusSquare,
-        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: undefined,
-            configuration: {
-                label: {
-                    type: 'static',
-                    value: 'Open popup',
-                    fieldType: 'text'
-                },
-                color: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: 'dark',
-                    selectOptions: buttonColorOptions
-                },
-                size: {
-                    fieldType: 'select',
-                    type: 'static',
-                    value: 'xs',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.buttonSizeOptions
-                },
-                onSuccess: onSuccessClick,
-                disabled: {
-                    fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
-                }
-            }
-        }
-    },
-    piechartcomponent: {
-        name: 'Pie Chart',
-        icon: PieChart,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {
-                theme: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'select',
-                    selectOptions: selectOptions.chartThemeOptions,
-                    value: 'theme1'
-                },
-                doughnutStyle: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false
-                }
-            },
-            componentInput: {
-                type: 'static',
-                fieldType: 'object',
-                value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
-            }
-        }
-    },
-    barchartcomponent: {
-        name: 'Bar/Line Chart',
-        icon: BarChart4,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {
-                theme: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'select',
-                    selectOptions: selectOptions.chartThemeOptions,
-                    value: 'theme1'
-                },
-                line: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false
-                }
-            },
-            componentInput: {
-                type: 'static',
-                fieldType: 'object',
-                value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
-            }
-        }
-    },
-    htmlcomponent: {
-        name: 'HTML',
-        icon: Code2,
-        dims: '1:2-1:2',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            componentInput: {
-                type: 'static',
-                fieldType: 'template',
-                value: `<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>`
-            },
-            configuration: {}
-        }
-    },
-    vegalitecomponent: {
-        name: 'Vega Lite',
-        icon: PieChart,
-        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',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false,
-                    tooltip: 'Use the canvas renderer instead of the svg one for more interactive plots'
-                }
-            }
-        }
-    },
-    plotlycomponent: {
-        name: 'Plotly',
-        icon: PieChart,
-        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',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    timeseriescomponent: {
-        name: 'Timeseries',
-        icon: GripHorizontal,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {
-                logarithmicScale: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false
-                },
-                zoomable: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false
-                },
-                pannable: {
-                    type: 'static',
-                    onlyStatic: true,
-                    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,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {
-                zoomable: {
-                    type: 'static',
-                    onlyStatic: true,
-                    fieldType: 'boolean',
-                    value: false
-                },
-                pannable: {
-                    type: 'static',
-                    onlyStatic: true,
-                    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: 'Table',
-        icon: Table2,
-        dims: '3:10-6:10',
-        customCss: {
-            container: { class: '', style: '' },
-            tableHeader: { class: '', style: '' },
-            tableBody: { class: '', style: '' },
-            tableFooter: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {
-                search: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.tableSearchOptions,
-                    value: 'Disabled'
-                },
-                pagination: paginationOneOf
-            },
-            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
-                    }
-                ]
-            },
-            actionButtons: true
-        }
-    },
-    aggridcomponent: {
-        name: 'AgGrid Table',
-        icon: Table2,
-        dims: '3:10-6:10',
-        customCss: {},
-        initialData: {
-            configuration: {
-                columnDefs: {
-                    type: 'static',
-                    fieldType: 'array',
-                    subFieldType: 'object',
-                    value: [{ field: 'id' }, { field: 'name', editable: true }, { field: 'age' }]
-                },
-                allEditable: {
-                    type: 'static',
-                    fieldType: 'boolean',
-                    value: false,
-                    onlyStatic: true,
-                    tooltip: 'Configure all columns as Editable by users'
-                },
-                pagination: {
-                    type: 'static',
-                    fieldType: 'boolean',
-                    value: false,
-                    onlyStatic: true
-                }
-            },
-            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
-                    }
-                ]
-            }
-        }
-    },
-    checkboxcomponent: {
-        name: 'Toggle',
-        icon: ToggleLeft,
-        dims: '1:1-2:1',
-        customCss: {
-            text: { class: '', style: '' }
-        },
-        initialData: {
-            ...defaultAlignement,
-            componentInput: undefined,
-            configuration: {
-                label: {
-                    type: 'static',
-                    value: 'Label',
-                    fieldType: 'text'
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'boolean'
-                }
-            }
-        }
-    },
-    textinputcomponent: {
-        name: 'Text Input',
-        icon: TextCursorInput,
-        dims: '2:1-2:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Type...',
-                    fieldType: 'text',
-                    onlyStatic: true
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'text'
-                }
-            }
-        }
-    },
-    textareainputcomponent: {
-        name: 'Textarea',
-        icon: TextCursorInput,
-        dims: '2:1-2:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Type...',
-                    fieldType: 'text',
-                    onlyStatic: true
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'text'
-                }
-            }
-        }
-    },
-    selectcomponent: {
-        name: 'Select',
-        icon: List,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { style: '' }
-        },
-        initialData: {
-            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,
-                    onlyStatic: true,
-                    tooltip: 'Allows user to manually add new value'
-                },
-                placeholder: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Select an item',
-                    onlyStatic: true
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'object'
-                }
-            }
-        }
-    },
-    multiselectcomponent: {
-        name: 'Multi Select',
-        icon: List,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { style: '' }
-        },
-        initialData: {
-            componentInput: undefined,
-            configuration: {
-                items: {
-                    type: 'static',
-                    fieldType: 'array',
-                    subFieldType: 'text',
-                    value: ['Foo', 'Bar']
-                },
-                placeholder: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Select items',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    resourceselectcomponent: {
-        name: 'Resource Select',
-        icon: List,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                items: {
-                    type: 'static',
-                    fieldType: 'array',
-                    subFieldType: 'labeledresource',
-                    value: []
-                },
-                placeholder: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Select an item',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    numberinputcomponent: {
-        name: 'Number',
-        icon: Binary,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Type...',
-                    fieldType: 'text',
-                    onlyStatic: true
-                },
-                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,
-        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',
-                    onlyStatic: true
-                },
-                currency: {
-                    type: 'static',
-                    value: 'USD',
-                    fieldType: 'select',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.currencyOptions
-                },
-                locale: {
-                    type: 'static',
-                    value: 'en-US',
-                    fieldType: 'select',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.localeOptions,
-                    tooltip: 'Currency format'
-                }
-            }
-        }
-    },
-    slidercomponent: {
-        name: 'Slider',
-        icon: SlidersHorizontal,
-        dims: '3:1-4:1',
-        customCss: {
-            bar: { style: '' },
-            handle: { style: '' },
-            limits: { class: '', style: '' },
-            value: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                min: {
-                    type: 'static',
-                    value: 0,
-                    fieldType: 'number',
-                    onlyStatic: true
-                },
-                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'
-                }
-            }
-        }
-    },
-    rangecomponent: {
-        name: 'Range',
-        icon: SlidersHorizontal,
-        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'
-                }
-            }
-        }
-    },
-    passwordinputcomponent: {
-        name: 'Password',
-        icon: Lock,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Password',
-                    fieldType: 'text',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    emailinputcomponent: {
-        name: 'Email Input',
-        icon: AtSignIcon,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                placeholder: {
-                    type: 'static',
-                    value: 'Email',
-                    fieldType: 'text',
-                    onlyStatic: true
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'text'
-                }
-            }
-        }
-    },
-    dateinputcomponent: {
-        name: 'Date',
-        icon: Calendar,
-        dims: '2:1-3:1',
-        customCss: {
-            input: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                minDate: {
-                    type: 'static',
-                    value: '',
-                    fieldType: 'date'
-                },
-                maxDate: {
-                    type: 'static',
-                    value: '',
-                    fieldType: 'date'
-                },
-                defaultValue: {
-                    type: 'static',
-                    value: undefined,
-                    fieldType: 'date'
-                }
-            }
-        }
-    },
-    tabscomponent: {
-        name: 'Tabs',
-        icon: ListOrdered,
-        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',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.tabsKindOptions,
-                    value: 'tabs'
-                }
-            },
-            componentInput: undefined,
-            numberOfSubgrids: 2,
-            tabs: ['First tab', 'Second tab']
-        }
-    },
-    iconcomponent: {
-        name: 'Icon',
-        icon: Smile,
-        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'
-                },
-                color: {
-                    type: 'static',
-                    value: 'currentColor',
-                    fieldType: 'color'
-                },
-                size: {
-                    type: 'static',
-                    value: 24,
-                    fieldType: 'number',
-                    onlyStatic: true
-                },
-                strokeWidth: {
-                    type: 'static',
-                    value: 2,
-                    fieldType: 'number',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    horizontaldividercomponent: {
-        name: 'Divider X',
-        icon: SeparatorHorizontal,
-        dims: '3:1-12:1',
-        customCss: {
-            container: { class: '', style: '' },
-            divider: { class: '', style: '' }
-        },
-        initialData: {
-            verticalAlignment: 'center',
-            componentInput: undefined,
-            configuration: {
-                size: {
-                    type: 'static',
-                    value: 2,
-                    fieldType: 'number',
-                    onlyStatic: true
-                },
-                color: {
-                    type: 'static',
-                    value: '#00000060',
-                    fieldType: 'color',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    verticaldividercomponent: {
-        name: 'Divider Y',
-        icon: SeparatorVertical,
-        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',
-                    onlyStatic: true
-                },
-                color: {
-                    type: 'static',
-                    value: '#00000060',
-                    fieldType: 'color',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    fileinputcomponent: {
-        name: 'File Input',
-        icon: Paperclip,
-        dims: '3:4-6:4',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            componentInput: undefined,
-            configuration: {
-                acceptedFileTypes: {
-                    type: 'static',
-                    value: ['image/*', 'application/pdf'],
-                    fieldType: 'array',
-                    onlyStatic: true
-                },
-                allowMultiple: {
-                    type: 'static',
-                    value: false,
-                    fieldType: 'boolean',
-                    tooltip: 'If allowed, the user will be able to select more than one file',
-                    onlyStatic: true
-                },
-                text: {
-                    type: 'static',
-                    value: 'Drag and drop files or click to select them',
-                    fieldType: 'text',
-                    onlyStatic: true
-                }
-            }
-        }
-    },
-    imagecomponent: {
-        name: 'Image',
-        icon: 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'
-                    }
-                },
-                imageFit: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.objectFitOptions,
-                    value: 'contain'
-                },
-                altText: {
-                    type: 'static',
-                    value: '',
-                    fieldType: 'text',
-                    onlyStatic: true,
-                    tooltip: "This text will appear if the image can't be loaded for any reason"
-                }
-            }
-        }
-    },
-    drawercomponent: {
-        name: 'Drawer',
-        icon: SidebarClose,
-        dims: '1:1-2:1',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            horizontalAlignment: 'center',
-            verticalAlignment: 'center',
-            configuration: {
-                drawerTitle: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Drawer title',
-                    onlyStatic: true
-                },
-                label: {
-                    type: 'static',
-                    fieldType: 'text',
-                    value: 'Press me'
-                },
-                color: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: buttonColorOptions,
-                    value: 'blue'
-                },
-                size: {
-                    fieldType: 'select',
-                    type: 'static',
-                    onlyStatic: true,
-                    selectOptions: selectOptions.buttonSizeOptions,
-                    value: 'xs'
-                },
-                fillContainer: {
-                    fieldType: 'boolean',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: false
-                },
-                disabled: {
-                    fieldType: 'boolean',
-                    type: 'eval',
-                    expr: 'false'
-                }
-            },
-            componentInput: undefined,
-            numberOfSubgrids: 1
-        }
-    },
-    mapcomponent: {
-        name: 'Map',
-        icon: MapPin,
-        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'
-                        }
-                    ]
-                }
-            }
-        }
-    },
-    verticalsplitpanescomponent: {
-        name: 'Vertical Split Panes',
-        icon: FlipHorizontal,
-        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,
-        dims: '2:8-6:8',
-        customCss: {
-            container: { class: '', style: '' }
-        },
-        initialData: {
-            configuration: {},
-            componentInput: undefined,
-            panes: [50, 50],
-            numberOfSubgrids: 2
-        }
-    },
-    pdfcomponent: {
-        name: 'PDF',
-        icon: FileText,
-        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: 'buffer'
-                    }
-                },
-                zoom: {
-                    fieldType: 'number',
-                    type: 'static',
-                    value: 100
-                }
-            }
-        }
-    }
-};
-export const ccomponents = components;