diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts index 6ce6650776..a3fa3a39c9 100644 --- a/server/src/controllers/apps.controller.v2.ts +++ b/server/src/controllers/apps.controller.v2.ts @@ -35,6 +35,7 @@ import { CreateEventHandlerDto, UpdateEventHandlerDto } from '@dto/event-handler import { APP_RESOURCE_ACTIONS } from 'src/constants/global.constant'; import { VersionReleaseDto } from '@dto/version-release.dto'; import { AppsServiceSep } from '@apps/services/apps.service.sep'; +import { mergeDefaultComponentData } from 'src/helpers/components.helper'; @Controller({ path: 'apps', @@ -93,7 +94,7 @@ export class AppsControllerV2 { response['data_queries'] = seralizedQueries; response['definition'] = app.editingVersion?.definition; - response['pages'] = pagesForVersion; + response['pages'] = mergeDefaultComponentData(pagesForVersion); response['events'] = eventsForVersion; //! if editing version exists, camelize the definition @@ -148,7 +149,7 @@ export class AppsControllerV2 { name: app.name, slug: app.slug, events: eventsForVersion, - pages: pagesForVersion, + pages: mergeDefaultComponentData(pagesForVersion), homePageId: versionToLoad.homePageId, globalSettings: { ...versionToLoad.globalSettings, theme: appTheme }, showViewerNavigation: versionToLoad.showViewerNavigation, @@ -198,7 +199,7 @@ export class AppsControllerV2 { return { ...appData, editing_version: editingVersion, - pages: pagesForVersion, + pages: mergeDefaultComponentData(pagesForVersion), events: eventsForVersion, }; } diff --git a/server/src/helpers/components.helper.ts b/server/src/helpers/components.helper.ts index e562659c1a..9d7855d0df 100644 --- a/server/src/helpers/components.helper.ts +++ b/server/src/helpers/components.helper.ts @@ -1,3 +1,9 @@ +import { cloneDeep } from 'lodash'; +import { merge } from 'lodash'; +import { mergeWith } from 'lodash'; +import { isArray } from 'lodash'; +import { componentTypes } from './widget-config'; + export enum LayoutDimensionUnits { COUNT = 'count', PERCENT = 'percent', @@ -8,3 +14,58 @@ export const resolveGridPositionForComponent = (dimension: number, type: string) const numberOfGrids = 43; return Math.round((dimension * numberOfGrids) / 100); }; + +export const mergeDefaultComponentData = (pages) => { + return pages.map((page) => ({ + ...page, + components: buildComponentMetaDefinition(page.components), + })); +}; + +export const buildComponentMetaDefinition = (components = {}) => { + for (const componentId in components) { + const currentComponentData = components[componentId]; + + const componentMeta = cloneDeep( + componentTypes.find((comp) => currentComponentData.component.component === comp.component) + ); + + const mergedDefinition = { + // ...componentMeta.definition, + properties: mergeWith( + componentMeta.definition.properties, + currentComponentData?.component?.definition?.properties, + (objValue, srcValue) => { + if (currentComponentData?.component?.component === 'Table' && isArray(objValue)) { + return srcValue; + } + } + ), + styles: merge(componentMeta.definition.styles, currentComponentData?.component.definition.styles), + generalStyles: merge( + componentMeta.definition.generalStyles, + currentComponentData?.component.definition.generalStyles + ), + validation: merge(componentMeta.definition.validation, currentComponentData?.component.definition.validation), + others: merge(componentMeta.definition.others, currentComponentData?.component.definition.others), + general: merge(componentMeta.definition.general, currentComponentData?.component.definition.general), + }; + + const mergedComponent = { + component: { + ...componentMeta, + ...currentComponentData.component, + }, + layouts: { + ...currentComponentData.layouts, + }, + withDefaultChildren: componentMeta.withDefaultChildren ?? false, + }; + + mergedComponent.component.definition = mergedDefinition; + + components[componentId] = mergedComponent; + } + + return components; +}; diff --git a/server/src/helpers/widget-config/boundedBox.js b/server/src/helpers/widget-config/boundedBox.js new file mode 100644 index 0000000000..926cf5bf8d --- /dev/null +++ b/server/src/helpers/widget-config/boundedBox.js @@ -0,0 +1,121 @@ +export const boundedBoxConfig = { + name: 'BoundedBox', + displayName: 'Bounded Box', + description: 'An infinitely customizable image annotation widget', + component: 'BoundedBox', + defaultSize: { + width: 30, + height: 420, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + imageUrl: { + type: 'code', + displayName: 'Image URL', + validation: { + schema: { type: 'string' }, + defaultValue: `https://exaple.com/photos/three-cars.jpg`, + }, + }, + + defaultValue: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array', element: { type: 'object' } }] }, + defaultValue: "{{[{type: 'RECTANGLE',width: 40,height:24, x:41,y:62,text:'Car'}]}}", + }, + }, + selector: { + type: 'select', + displayName: 'Selector', + options: [ + { name: 'Rectangle', value: 'RECTANGLE' }, + { name: 'Point', value: 'POINT' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'RECTANGLE', + }, + }, + labels: { + type: 'code', + displayName: 'List of labels', + validation: { + schema: { type: 'array' }, + element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: `{{['Car', 'Tree']}}`, + }, + }, + }, + events: { + onChange: { displayName: 'On change' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + annotations: [ + { + type: 'RECTANGLE', + x: 41, + y: 62, + width: 40, + height: 24, + text: 'Car', + id: 'ce103db2-b2a6-46f5-a4f0-5f4eaa6f3663', + }, + { + type: 'RECTANGLE', + x: 41, + y: 12, + width: 40, + height: 24, + text: 'Tree', + id: 'b1a7315e-2b15-4bc8-a1c6-a042dab44f27', + }, + ], + }, + actions: [], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + defaultValue: { + value: + "{{[\t{type: 'RECTANGLE',width: 40,height:24, x:41,y:62,text:'Car'},{type: 'RECTANGLE',width: 40,height:24, x:41,y:12,text:'Tree'}\t]}}", + }, + imageUrl: { + value: `https://burst.shopifycdn.com/photos/three-cars-are-parked-on-stone-paved-street.jpg?width=746&format=pjpg&exif=1&iptc=1`, + }, + selector: { value: `RECTANGLE` }, + labels: { value: `{{['Tree', 'Car', 'Stree light']}}` }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/button.js b/server/src/helpers/widget-config/button.js new file mode 100644 index 0000000000..73b4a03bd4 --- /dev/null +++ b/server/src/helpers/widget-config/button.js @@ -0,0 +1,238 @@ +export const buttonConfig = { + name: 'Button', + displayName: 'Button', + description: 'Trigger actions: queries, alerts, set variables etc.', + component: 'Button', + defaultSize: { + width: 4, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + text: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' } }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: { + onClick: { displayName: 'On click' }, + onHover: { displayName: 'On hover' }, + }, + styles: { + type: { + type: 'switch', + displayName: 'Type', + validation: { schema: { type: 'string' } }, + options: [ + { displayName: 'Solid', value: 'primary' }, + { displayName: 'Outline', value: 'outline' }, + ], + accordian: 'button', + }, + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + conditionallyRender: { + key: 'type', + value: 'primary', + }, + accordian: 'button', + }, + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + accordian: 'button', + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + accordian: 'button', + }, + loaderColor: { + type: 'color', + displayName: 'Loader color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + accordian: 'button', + }, + + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' } }, + accordian: 'button', + + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' } }, + accordian: 'button', + visibility: false, + }, + + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' } }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'button', + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + defaultValue: false, + }, + accordian: 'button', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box shadow', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'button', + conditionallyRender: { + key: 'type', + value: 'primary', + }, + }, + + padding: { + type: 'switch', + displayName: 'Padding', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + buttonText: 'Button', + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'click', + displayName: 'Click', + }, + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'Text', defaultValue: 'New Text' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'disable', + displayName: 'Disable(deprecated)', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + { + handle: 'visibility', + displayName: 'Visibility(deprecated)', + params: [{ handle: 'visible', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + { + handle: 'loading', + displayName: 'Loading(deprecated)', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + text: { value: `Button` }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + textColor: { value: '#FFFFFF' }, + borderColor: { value: '#4368E3' }, + loaderColor: { value: '#FFFFFF' }, + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#4368E3' }, + iconColor: { value: '#FFFFFF' }, + direction: { value: 'left' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + icon: { value: 'IconAlignBoxBottomLeft' }, + iconVisibility: { value: false }, + type: { value: 'primary' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/buttonGroup.js b/server/src/helpers/widget-config/buttonGroup.js new file mode 100644 index 0000000000..65b7e77807 --- /dev/null +++ b/server/src/helpers/widget-config/buttonGroup.js @@ -0,0 +1,153 @@ +export const buttonGroupConfig = { + name: 'ButtonGroup', + displayName: 'Button Group', + description: 'Group of buttons', + component: 'ButtonGroup', + properties: { + label: { + type: 'code', + displayName: 'label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Button group', + }, + }, + values: { + type: 'code', + displayName: 'values', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }], + }, + defaultValue: '[]', + }, + }, + labels: { + type: 'code', + displayName: 'Labels', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }], + }, + defaultValue: '[]', + }, + }, + defaultSelected: { + type: 'code', + displayName: 'Default selected', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }], + }, + defaultValue: '[1]', + }, + }, + multiSelection: { + type: 'toggle', + displayName: 'Enable multiple selection', + + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + defaultSize: { + width: 12, + height: 80, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: { + onClick: { displayName: 'On click' }, + }, + styles: { + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + }, + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'number', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: false, + }, + }, + selectedTextColor: { + type: 'color', + displayName: 'Selected text colour', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + selectedBackgroundColor: { + type: 'color', + displayName: 'Selected background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#007bff', + }, + }, + }, + exposedVariables: { + selected: [1], + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: `Button group` }, + defaultSelected: { value: '{{[1]}}' }, + values: { value: '{{[1,2,3]}}' }, + labels: { value: '{{[]}}' }, + multiSelection: { value: '{{false}}' }, + }, + events: [], + styles: { + backgroundColor: { value: '' }, + textColor: { value: '' }, + visibility: { value: '{{true}}' }, + borderRadius: { value: '{{4}}' }, + disabledState: { value: '{{false}}' }, + selectedTextColor: { value: '' }, + selectedBackgroundColor: { value: '' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/calendar.js b/server/src/helpers/widget-config/calendar.js new file mode 100644 index 0000000000..da9f3aa811 --- /dev/null +++ b/server/src/helpers/widget-config/calendar.js @@ -0,0 +1,111 @@ +export const calendarConfig = { + name: 'Calendar', + displayName: 'Calendar', + description: 'Display calendar events', + component: 'Calendar', + defaultSize: { + width: 30, + height: 600, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + dateFormat: { type: 'code', displayName: 'Date format' }, + defaultDate: { type: 'code', displayName: 'Default date' }, + events: { type: 'code', displayName: 'Events' }, + resources: { type: 'code', displayName: 'Resources' }, + defaultView: { type: 'code', displayName: 'Default view' }, + startTime: { + type: 'code', + displayName: 'Start time on week and day view', + }, + endTime: { type: 'code', displayName: 'End time on week and day view' }, + displayToolbar: { type: 'toggle', displayName: 'Show toolbar' }, + displayViewSwitcher: { + type: 'toggle', + displayName: 'Show view switcher', + }, + highlightToday: { type: 'toggle', displayName: 'Highlight today' }, + showPopOverOnEventClick: { + type: 'toggle', + displayName: 'Show popover when event is clicked', + }, + }, + events: { + onCalendarEventSelect: { displayName: 'On Event Select' }, + onCalendarSlotSelect: { displayName: 'On Slot Select' }, + onCalendarNavigate: { displayName: 'On Date Navigate' }, + onCalendarViewChange: { displayName: 'On View Change' }, + }, + styles: { + visibility: { type: 'toggle', displayName: 'Visibility' }, + cellSizeInViewsClassifiedByResource: { + type: 'select', + displayName: 'Cell size in views classified by resource', + options: [ + { name: 'Compact', value: 'compact' }, + { name: 'Spacious', value: 'spacious' }, + ], + }, + weekDateFormat: { + type: 'code', + displayName: 'Header date format on week view', + }, + }, + exposedVariables: { + selectedEvent: {}, + selectedSlots: {}, + currentView: 'month', + currentDate: undefined, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + dateFormat: { + value: 'MM-DD-YYYY HH:mm:ss A Z', + }, + defaultDate: { + value: '{{moment().format("MM-DD-YYYY HH:mm:ss A Z")}}', + }, + events: { + value: + "{{[\n\t\t{\n\t\t\t title: 'Sample event',\n\t\t\t start: `${moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t end: `${moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}`,\n\t\t\t allDay: false,\n\t\t\t color: '#4D72DA'\n\t\t}\n]}}", + }, + resources: { + value: '{{[]}}', + }, + defaultView: { + value: "{{'month'}}", + }, + startTime: { + value: "{{moment().startOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}}", + }, + endTime: { + value: "{{moment().endOf('day').format('MM-DD-YYYY HH:mm:ss A Z')}}", + }, + displayToolbar: { + value: true, + }, + displayViewSwitcher: { + value: true, + }, + highlightToday: { + value: true, + }, + showPopOverOnEventClick: { + value: false, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + cellSizeInViewsClassifiedByResource: { value: 'spacious' }, + weekDateFormat: { value: 'DD MMM' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/chart.js b/server/src/helpers/widget-config/chart.js new file mode 100644 index 0000000000..72ab688056 --- /dev/null +++ b/server/src/helpers/widget-config/chart.js @@ -0,0 +1,238 @@ +export const chartConfig = { + name: 'Chart', + displayName: 'Chart', + description: 'Visualize data', + component: 'Chart', + defaultSize: { + width: 20, + height: 400, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + title: { + type: 'code', + displayName: 'Title', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'This title can be changed', + }, + }, + data: { + type: 'json', + displayName: 'Data', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'array' }] }, + defaultValue: '', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + markerColor: { + type: 'color', + displayName: 'Marker color', + validation: { + schema: { + type: 'string', + }, + defaultValue: '#CDE1F8', + }, + }, + showAxes: { + type: 'toggle', + displayName: 'Show axes', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + showGridLines: { + type: 'toggle', + displayName: 'Show grid lines', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + type: { + type: 'select', + displayName: 'Chart type', + options: [ + { name: 'Line', value: 'line' }, + { name: 'Bar', value: 'bar' }, + { name: 'Pie', value: 'pie' }, + ], + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'boolean' }, { type: 'number' }], + }, + defaultValue: 'line', + }, + }, + jsonDescription: { + type: 'json', + displayName: 'Json Description', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'object' }], + }, + defaultValue: '{ "data": [ { "x": [ "Jan", "Feb", "Mar" ], "y": [ 100, 80, 40 ], "type": "bar" } ] }', + }, + }, + plotFromJson: { + type: 'toggle', + displayName: 'Use Plotly JSON schema', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + barmode: { + type: 'select', + displayName: 'Bar mode', + options: [ + { name: 'Stack', value: 'stack' }, + { name: 'Group', value: 'group' }, + { name: 'Overlay', value: 'overlay' }, + { name: 'Relative', value: 'relative' }, + ], + validation: { + schema: { + schemas: { type: 'string' }, + }, + defaultValue: 'group', + }, + }, + }, + actions: [ + { + handle: 'clearClickedPoint', + displayName: 'Clear clicked point', + }, + ], + events: { + onClick: { displayName: 'On data point click' }, + onDoubleClick: { displayName: 'On double click' }, + }, + styles: { + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + }, + padding: { + type: 'code', + displayName: 'Padding', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'number' }, { type: 'string' }], + }, + defaultValue: 50, + }, + }, + borderRadius: { + type: 'number', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + show: null, + chartTitle: null, + xAxisTitle: null, + yAxisTitle: null, + clickedDataPoint: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + title: { value: 'This title can be changed' }, + markerColor: { value: '#CDE1F8' }, + showAxes: { value: '{{true}}' }, + showGridLines: { value: '{{true}}' }, + plotFromJson: { value: '{{false}}' }, + loadingState: { value: `{{false}}` }, + barmode: { value: `group` }, + jsonDescription: { + value: `{ + "data": [ + { + "x": [ + "Jan", + "Feb", + "Mar" + ], + "y": [ + 100, + 80, + 40 + ], + "type": "bar" + } + ] + }`, + }, + type: { value: `line` }, + data: { + value: `[ + { "x": "Jan", "y": 100}, + { "x": "Feb", "y": 80}, + { "x": "Mar", "y": 40} + ]`, + }, + }, + events: [], + styles: { + backgroundColor: { value: '#fff' }, + padding: { value: '50' }, + borderRadius: { value: '{{4}}' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/checkbox.js b/server/src/helpers/widget-config/checkbox.js new file mode 100644 index 0000000000..c9b6424020 --- /dev/null +++ b/server/src/helpers/widget-config/checkbox.js @@ -0,0 +1,198 @@ +export const checkboxConfig = { + name: 'Checkbox', + displayName: 'Checkbox', + description: 'Single checkbox toggle', + component: 'Checkbox', + defaultSize: { + width: 6, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + }, + }, + defaultValue: { + type: 'switch', + displayName: 'Default state', + validation: { schema: { type: 'boolean' } }, + options: [ + { displayName: 'On', value: '{{true}}' }, + { displayName: 'Off', value: '{{false}}' }, + ], + accordian: 'label', + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' } }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + events: { + onChange: { displayName: 'On change' }, + onCheck: { displayName: 'On check (Deprecated)' }, + onUnCheck: { displayName: 'On uncheck (Deprecated)' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'label', + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + checkboxColor: { + type: 'color', + displayName: 'Checked color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + uncheckedColor: { + type: 'color', + displayName: 'Unchecked color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + handleColor: { + type: 'color', + displayName: 'Handle color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box shadow', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'switch', + }, + + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' } }, + options: [ + { displayName: 'Left', value: 'left' }, + { displayName: 'Right', value: 'right' }, + ], + accordian: 'label', + }, + }, + exposedVariables: { + value: false, + label: 'Label', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'toggle', + displayName: 'toggle', + }, + { + handle: 'setValue', + displayName: 'Set value', + params: [{ handle: 'value', displayName: 'value' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setChecked', + displayName: 'Set checked (Deprecated)', + params: [{ handle: 'status', displayName: 'status' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Label' }, + defaultValue: { value: '{{false}}' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + disabledState: { value: '{{false}}' }, + textColor: { value: '#1B1F24' }, + checkboxColor: { value: '#4368E3' }, + uncheckedColor: { value: '#E4E7EB' }, + borderColor: { value: '#CCD1D5' }, + handleColor: { value: '#FFFFFF' }, + alignment: { value: 'right' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + }, + validation: { + mandatory: { value: '{{false}}' }, + customRule: { value: null }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/circularProgressbar.js b/server/src/helpers/widget-config/circularProgressbar.js new file mode 100644 index 0000000000..a7ffd551af --- /dev/null +++ b/server/src/helpers/widget-config/circularProgressbar.js @@ -0,0 +1,116 @@ +export const circularProgressbarConfig = { + name: 'CircularProgressBar', + displayName: 'Circular Progressbar', + description: 'Show circular progress', + component: 'CircularProgressBar', + defaultSize: { + width: 7, + height: 50, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + text: { + type: 'code', + displayName: 'Text', + validation: { + schema: { type: 'string' }, + defaultValue: 'text', + }, + }, + progress: { + type: 'code', + displayName: 'Progress', + validation: { + schema: { type: 'number' }, + defaultValue: 50, + }, + }, + }, + events: {}, + styles: { + color: { + type: 'color', + displayName: 'Color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + textColor: { + type: 'color', + displayName: 'Text Color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + textSize: { + type: 'code', + displayName: 'Text size', + validation: { + schema: { type: 'number' }, + defaultValue: 16, + }, + }, + strokeWidth: { + type: 'code', + displayName: 'Stroke width', + validation: { + schema: { type: 'number' }, + defaultValue: 8, + }, + }, + counterClockwise: { + type: 'code', + displayName: 'Counter clockwise', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + circleRatio: { + type: 'code', + displayName: 'Circle ratio', + validation: { + schema: { type: 'number' }, + defaultValue: 1, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + text: { + value: '', + }, + progress: { + value: '{{50}}', + }, + }, + events: [], + styles: { + color: { value: '' }, + textColor: { value: '' }, + textSize: { value: '{{16}}' }, + strokeWidth: { value: '{{8}}' }, + counterClockwise: { value: '{{false}}' }, + circleRatio: { value: '{{1}}' }, + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/codeEditor.js b/server/src/helpers/widget-config/codeEditor.js new file mode 100644 index 0000000000..d7ff03d9a8 --- /dev/null +++ b/server/src/helpers/widget-config/codeEditor.js @@ -0,0 +1,87 @@ +export const codeEditorConfig = { + name: 'CodeEditor', + displayName: 'Code Editor', + description: 'Edit source code', + component: 'CodeEditor', + defaultSize: { + width: 15, + height: 120, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + enableLineNumber: { + type: 'code', + displayName: 'Show line number', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + mode: { + type: 'code', + displayName: 'Mode', + validation: { + schema: { type: 'string' }, + defaultValue: 'javascript', + }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'placeholder', + }, + }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + }, + exposedVariables: { + value: '', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + enableLineNumber: { value: '{{true}}' }, + mode: { value: 'javascript' }, + placeholder: { value: '' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + borderRadius: { value: '{{4}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/colorPicker.js b/server/src/helpers/widget-config/colorPicker.js new file mode 100644 index 0000000000..b2fddd7e4c --- /dev/null +++ b/server/src/helpers/widget-config/colorPicker.js @@ -0,0 +1,50 @@ +export const colorPickerConfig = { + name: 'ColorPicker', + displayName: 'Color Picker', + description: 'Choose colors from a palette', + component: 'ColorPicker', + properties: { + defaultColor: { type: 'color', displayName: 'Default color' }, + }, + defaultSize: { + width: 9, + height: 40, + }, + actions: [ + { + displayName: 'Set Color', + handle: 'setColor', + params: [{ handle: 'color', displayName: 'color', defaultValue: '#ffffff', type: 'color' }], + }, + ], + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: { + onChange: { displayName: 'On change' }, + }, + styles: { + visibility: { type: 'toggle', displayName: 'Visibility' }, + }, + exposedVariables: { + selectedColorHex: '#000000', + selectedColorRGB: 'rgb(0,0,0)', + selectedColorRGBA: 'rgba(0, 0, 0, 1)', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + defaultColor: { + value: '#000000', + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/container.js b/server/src/helpers/widget-config/container.js new file mode 100644 index 0000000000..32d4158ffc --- /dev/null +++ b/server/src/helpers/widget-config/container.js @@ -0,0 +1,89 @@ +export const containerConfig = { + name: 'Container', + displayName: 'Container', + description: 'Group components', + defaultSize: { + width: 5, + height: 200, + }, + component: 'Container', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + events: {}, + styles: { + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 4, + }, + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + }, + defaultValue: false, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + visible: { value: '{{true}}' }, + loadingState: { value: `{{false}}` }, + }, + events: [], + styles: { + backgroundColor: { value: '#fff' }, + borderRadius: { value: '4' }, + borderColor: { value: '#fff' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/customComponent.js b/server/src/helpers/widget-config/customComponent.js new file mode 100644 index 0000000000..cc1dae2b3e --- /dev/null +++ b/server/src/helpers/widget-config/customComponent.js @@ -0,0 +1,65 @@ +export const customComponentConfig = { + name: 'CustomComponent', + displayName: 'Custom Component', + description: 'Create React components', + component: 'CustomComponent', + properties: { + data: { type: 'code', displayName: 'Data', validation: { schema: { type: 'object' }, defaultValue: '{}' } }, + code: { type: 'code', displayName: 'Code' }, + }, + defaultSize: { + width: 20, + height: 140, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + }, + exposedVariables: { + data: { value: `{{{ title: 'Hi! There', buttonText: 'Update Title'}}}` }, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + visible: { value: '{{true}}' }, + data: { + value: `{{{ title: 'Hi! There', buttonText: 'Update Title'}}}`, + }, + code: { + value: `import React from 'https://cdn.skypack.dev/react'; + import ReactDOM from 'https://cdn.skypack.dev/react-dom'; + import { Button, Container } from 'https://cdn.skypack.dev/@material-ui/core'; + const MyCustomComponent = ({data, updateData, runQuery}) => ( + +

{data.title}

+ + + ); + const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent); + ReactDOM.render(, document.body);`, + skipResolve: true, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/datepicker.js b/server/src/helpers/widget-config/datepicker.js new file mode 100644 index 0000000000..44b3276678 --- /dev/null +++ b/server/src/helpers/widget-config/datepicker.js @@ -0,0 +1,113 @@ +export const datepickerConfig = { + name: 'Datepicker', + displayName: 'Date Picker', + description: 'Choose date and time', + component: 'Datepicker', + defaultSize: { + width: 5, + height: 30, + }, + validation: { + customRule: { type: 'code', displayName: 'Custom validation' }, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + defaultValue: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'string' }, + defaultValue: '01/01/2022', + }, + }, + format: { + type: 'code', + displayName: 'Format', + validation: { + schema: { type: 'string' }, + defaultValue: 'DD/MM/YYYY', + }, + }, + enableTime: { + type: 'toggle', + displayName: 'Enable time selection?', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + enableDate: { + type: 'toggle', + displayName: 'Enable date selection?', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledDates: { + type: 'code', + displayName: 'Disabled dates', + validation: { + schema: { type: 'array', element: { type: 'string' } }, + defaultValue: "['01/01/2022']", + }, + }, + }, + events: { + onSelect: { displayName: 'On select' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + }, + exposedVariables: { + value: '', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + customRule: { value: '' }, + }, + properties: { + defaultValue: { value: '01/01/2022' }, + format: { value: 'DD/MM/YYYY' }, + enableTime: { value: '{{false}}' }, + enableDate: { value: '{{true}}' }, + disabledDates: { value: '{{[]}}' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + borderRadius: { value: '{{4}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/daterangepicker.js b/server/src/helpers/widget-config/daterangepicker.js new file mode 100644 index 0000000000..d5c5c3d03b --- /dev/null +++ b/server/src/helpers/widget-config/daterangepicker.js @@ -0,0 +1,104 @@ +export const daterangepickerConfig = { + name: 'DateRangePicker', + displayName: 'Range Picker', + description: 'Choose date ranges', + component: 'DaterangePicker', + defaultSize: { + width: 10, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + defaultStartDate: { + type: 'code', + displayName: 'Default start date', + validation: { + schema: { + type: 'string', + }, + defautlValue: '01/04/2022', + }, + }, + defaultEndDate: { + type: 'code', + displayName: 'Default end date', + validation: { + schema: { + type: 'string', + }, + defautlValue: '10/04/2022', + }, + }, + format: { + type: 'code', + displayName: 'Format', + validation: { + schema: { + type: 'string', + }, + defautlValue: 'DD/MM/YYYY', + }, + }, + }, + events: { + onSelect: { displayName: 'On select' }, + }, + styles: { + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'number' }, { type: 'string' }], + }, + defautlValue: 4, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defautlValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defautlValue: false, + }, + }, + }, + exposedVariables: { + endDate: {}, + startDate: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + defaultStartDate: { value: '01/04/2022' }, + defaultEndDate: { value: '10/04/2022' }, + + format: { value: 'DD/MM/YYYY' }, + }, + events: [], + styles: { + borderRadius: { value: '4' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/divider.js b/server/src/helpers/widget-config/divider.js new file mode 100644 index 0000000000..045f894816 --- /dev/null +++ b/server/src/helpers/widget-config/divider.js @@ -0,0 +1,49 @@ +export const dividerConfig = { + name: 'Divider', + displayName: 'Divider', + description: 'Separator between components', + component: 'Divider', + defaultSize: { + width: 10, + height: 10, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: {}, + events: {}, + styles: { + dividerColor: { + type: 'color', + displayName: 'Divider color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: { + value: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: {}, + events: [], + styles: { + visibility: { value: '{{true}}' }, + dividerColor: { value: '#000000' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/dropdown.js b/server/src/helpers/widget-config/dropdown.js new file mode 100644 index 0000000000..b2c58acc7a --- /dev/null +++ b/server/src/helpers/widget-config/dropdown.js @@ -0,0 +1,205 @@ +export const dropdownConfig = { + name: 'DropdownLegacy', + displayName: 'Dropdown (Legacy)', + description: 'Single item selector', + defaultSize: { + width: 8, + height: 30, + }, + component: 'DropDown', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + validation: { + customRule: { type: 'code', displayName: 'Custom validation' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select', + }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + + validation: { + schema: { type: 'string' }, + defaultValue: 'Select an option', + }, + }, + advanced: { + type: 'toggle', + displayName: 'Advanced', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + value: { + type: 'code', + displayName: 'Default value', + conditionallyRender: { + key: 'advanced', + value: false, + }, + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }], + }, + defaultValue: 2, + }, + }, + values: { + type: 'code', + displayName: 'Option values', + conditionallyRender: { + key: 'advanced', + value: false, + }, + validation: { + schema: { + type: 'array', + element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] }, + }, + defaultValue: "['one', 'two', 'three']", + }, + }, + display_values: { + type: 'code', + displayName: 'Option labels', + conditionallyRender: { + key: 'advanced', + value: false, + }, + validation: { + schema: { + type: 'array', + element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] }, + }, + defaultValue: "['one', 'two', 'three']", + }, + }, + + schema: { + type: 'code', + displayName: 'Schema', + conditionallyRender: { + key: 'advanced', + value: true, + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Options loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + events: { + onSelect: { displayName: 'On select' }, + onSearchTextChanged: { displayName: 'On search text changed' }, + }, + styles: { + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'number' }, { type: 'string' }], + }, + defaultValue: 4, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + }, + defaultValue: true, + }, + selectedTextColor: { + type: 'color', + displayName: 'Selected text color', + validation: { + schema: { + type: 'string', + }, + defaultValue: '#000000', + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + justifyContent: { + type: 'alignButtons', + displayName: 'Align Text', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'left', + }, + }, + }, + exposedVariables: { + value: 2, + searchText: '', + label: 'Select', + optionLabels: ['one', 'two', 'three'], + selectedOptionLabel: 'two', + }, + actions: [ + { + handle: 'selectOption', + displayName: 'Select option', + params: [{ handle: 'select', displayName: 'Select' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + customRule: { value: null }, + }, + properties: { + advanced: { value: `{{false}}` }, + schema: { + value: + "{{[\t{label: 'One',value: 1,disable: false,visible: true,default: true},{label: 'Two',value: 2,disable: false,visible: true},{label: 'Three',value: 3,disable: false,visible: true}\t]}}", + }, + + label: { value: 'Select' }, + value: { value: '{{2}}' }, + values: { value: '{{[1,2,3]}}' }, + display_values: { value: '{{["one", "two", "three"]}}' }, + loadingState: { value: '{{false}}' }, + placeholder: { value: 'Select an option' }, + }, + events: [], + styles: { + borderRadius: { value: '4' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + justifyContent: { value: 'left' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/dropdownV2.js b/server/src/helpers/widget-config/dropdownV2.js new file mode 100644 index 0000000000..247af3ccef --- /dev/null +++ b/server/src/helpers/widget-config/dropdownV2.js @@ -0,0 +1,330 @@ +export const dropdownV2Config = { + name: 'Dropdown', + displayName: 'Dropdown', + description: 'Single item selector', + defaultSize: { + width: 10, + height: 40, + }, + component: 'DropdownV2', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select', + }, + accordian: 'Data', + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select an option', + }, + accordian: 'Data', + }, + advanced: { + type: 'toggle', + displayName: 'Dynamic options', + validation: { + schema: { type: 'boolean' }, + }, + accordian: 'Options', + }, + schema: { + type: 'code', + displayName: 'Schema', + conditionallyRender: { + key: 'advanced', + value: true, + }, + accordian: 'Options', + }, + optionsLoadingState: { + type: 'toggle', + displayName: 'Options loading state', + validation: { + schema: { type: 'boolean' }, + }, + accordian: 'Options', + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { + schema: { type: 'string' }, + defaultValue: 'Enter tooltip text', + }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: { + onSelect: { displayName: 'On select' }, + onSearchTextChanged: { displayName: 'On search text changed' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + }, + styles: { + labelColor: { + type: 'color', + displayName: 'Color', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: 'Direction', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + labelWidth: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' } }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + fieldBackgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + fieldBorderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + selectedTextColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: '', + showLabel: false, + validation: { + schema: { type: 'string' }, + defaultValue: '#6A727C', + }, + accordian: 'field', + }, + fieldBorderRadius: { + type: 'input', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: '6' }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + searchText: '', + label: 'Select', + }, + actions: [ + { + handle: 'selectOption', + displayName: 'Select option', + params: [{ handle: 'select', displayName: 'Select' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + mandatory: { value: '{{false}}' }, + customRule: { value: null }, + }, + properties: { + advanced: { value: `{{false}}` }, + schema: { + value: + "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}", + }, + options: { + value: [ + { + label: 'option1', + value: '1', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + { + label: 'option2', + value: '2', + disable: { value: false }, + visible: { value: true }, + default: { value: true }, + }, + { + label: 'option3', + value: '3', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + ], + }, + label: { value: 'Select' }, + value: { value: '{{"2"}}' }, + optionsLoadingState: { value: '{{false}}' }, + placeholder: { value: 'Select an option' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + labelColor: { value: '#1B1F24' }, + labelWidth: { value: '33' }, + auto: { value: '{{true}}' }, + fieldBorderRadius: { value: '6' }, + selectedTextColor: { value: '#1B1F24' }, + fieldBorderColor: { value: '#CCD1D5' }, + errTextColor: { value: '#D72D39' }, + fieldBackgroundColor: { value: '#fff' }, + direction: { value: 'left' }, + alignment: { value: 'side' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + icon: { value: 'IconHome2' }, + iconVisibility: { value: false }, + iconColor: { value: '#6A727C' }, + accentColor: { value: '#4368E3' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/filepicker.js b/server/src/helpers/widget-config/filepicker.js new file mode 100644 index 0000000000..8df492daa5 --- /dev/null +++ b/server/src/helpers/widget-config/filepicker.js @@ -0,0 +1,192 @@ +export const filepickerConfig = { + name: 'FilePicker', + displayName: 'File Picker', + description: 'File Picker', + component: 'FilePicker', + defaultSize: { + width: 15, + height: 100, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + actions: [ + { + handle: 'clearFiles', + displayName: 'Clear Files', + }, + ], + properties: { + instructionText: { + type: 'code', + displayName: 'Instruction text', + validation: { + schema: { type: 'string' }, + defaultValue: 'Instruction text', + }, + }, + enableDropzone: { + type: 'code', + displayName: 'Use drop zone', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + enablePicker: { + type: 'code', + displayName: 'Use file picker', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + enableMultiple: { + type: 'code', + displayName: 'Pick multiple files', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + maxFileCount: { + type: 'code', + displayName: 'Max file count', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 2, + }, + }, + fileType: { + type: 'code', + displayName: 'Accept file types', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'image/*', + }, + }, + maxSize: { + type: 'code', + displayName: 'Max size limit (Bytes)', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 1048576, + }, + }, + minSize: { + type: 'code', + displayName: 'Min size limit (Bytes)', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 50, + }, + }, + parseContent: { + type: 'toggle', + displayName: 'Parse content', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + parseFileType: { + type: 'select', + displayName: 'File type', + options: [ + { name: 'Autodetect from extension', value: 'auto-detect' }, + { name: 'CSV', value: 'csv' }, + { name: 'Microsoft Excel - xls', value: 'vnd.ms-excel' }, + { + name: 'Microsoft Excel - xlsx', + value: 'vnd.openxmlformats-officedocument.spreadsheetml.sheet', + }, + ], + validation: { + schema: { + type: 'string', + }, + defaultValue: 'auto-detect', + }, + }, + }, + events: { + onFileSelected: { displayName: 'On File Selected' }, + onFileLoaded: { displayName: 'On File Loaded' }, + onFileDeselected: { displayName: 'On File Deselected' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 4, + }, + }, + }, + exposedVariables: { + file: [{ name: '', content: '', dataURL: '', type: '', parsedData: '' }], + isParsing: false, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + instructionText: { value: 'Drag and drop files here or click to select files' }, + enableDropzone: { value: '{{true}}' }, + enablePicker: { value: '{{true}}' }, + maxFileCount: { value: '{{2}}' }, + enableMultiple: { value: '{{false}}' }, + fileType: { value: '{{"image/*"}}' }, + maxSize: { value: '{{1048576}}' }, + minSize: { value: '{{50}}' }, + parseContent: { value: '{{false}}' }, + parseFileType: { value: 'auto-detect' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + borderRadius: { value: '{{4}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/form.js b/server/src/helpers/widget-config/form.js new file mode 100644 index 0000000000..ac82fcb171 --- /dev/null +++ b/server/src/helpers/widget-config/form.js @@ -0,0 +1,330 @@ +export const formConfig = { + name: 'Form', + displayName: 'Form', + description: 'Wrapper for multiple components', + defaultSize: { + width: 13, + height: 330, + }, + defaultChildren: [ + { + componentName: 'Text', + layout: { + top: 40, + left: 10, + height: 30, + width: 17, + }, + properties: ['text'], + styles: [ + 'textSize', + 'fontWeight', + 'fontStyle', + 'textColor', + 'isScrollRequired', + 'lineHeight', + 'textIndent', + 'textAlign', + 'verticalAlignment', + 'decoration', + 'transformation', + 'letterSpacing', + 'wordSpacing', + 'fontVariant', + 'backgroundColor', + 'borderColor', + 'borderRadius', + 'boxShadow', + 'padding', + ], + defaultValue: { + text: 'User Details', + fontWeight: 'bold', + textSize: 18, + textColor: '#000', + backgroundColor: '#fff00000', + textAlign: 'left', + decoration: 'none', + transformation: 'none', + fontStyle: 'normal', + lineHeight: 1.5, + textIndent: '0', + letterSpacing: '0', + wordSpacing: '0', + fontVariant: 'normal', + verticalAlignment: 'top', + padding: 'default', + boxShadow: '0px 0px 0px 0px #00000090', + borderRadius: '0', + isScrollRequired: 'enabled', + }, + }, + { + componentName: 'Text', + layout: { + top: 90, + left: 10, + height: 30, + }, + properties: ['text'], + styles: [ + 'textSize', + 'fontWeight', + 'fontStyle', + 'textColor', + 'isScrollRequired', + 'lineHeight', + 'textIndent', + 'textAlign', + 'verticalAlignment', + 'decoration', + 'transformation', + 'letterSpacing', + 'wordSpacing', + 'fontVariant', + 'backgroundColor', + 'borderColor', + 'borderRadius', + 'boxShadow', + 'padding', + ], + defaultValue: { + text: 'Name', + fontWeight: 'normal', + textSize: 14, + textColor: '#000', + backgroundColor: '#fff00000', + textAlign: 'left', + decoration: 'none', + transformation: 'none', + fontStyle: 'normal', + lineHeight: 1.5, + textIndent: '0', + letterSpacing: '0', + wordSpacing: '0', + fontVariant: 'normal', + verticalAlignment: 'top', + padding: 'default', + boxShadow: '0px 0px 0px 0px #00000090', + borderRadius: '0', + isScrollRequired: 'enabled', + }, + }, + { + componentName: 'Text', + layout: { + top: 160, + left: 10, + height: 30, + }, + properties: ['text'], + styles: [ + 'textSize', + 'fontWeight', + 'fontStyle', + 'textColor', + 'isScrollRequired', + 'lineHeight', + 'textIndent', + 'textAlign', + 'verticalAlignment', + 'decoration', + 'transformation', + 'letterSpacing', + 'wordSpacing', + 'fontVariant', + 'backgroundColor', + 'borderColor', + 'borderRadius', + 'boxShadow', + 'padding', + ], + defaultValue: { + text: 'Age', + fontWeight: 'normal', + textSize: 14, + textColor: '#000', + backgroundColor: '#fff00000', + textAlign: 'left', + decoration: 'none', + transformation: 'none', + fontStyle: 'normal', + lineHeight: 1.5, + textIndent: '0', + letterSpacing: '0', + wordSpacing: '0', + fontVariant: 'normal', + verticalAlignment: 'top', + padding: 'default', + boxShadow: '0px 0px 0px 0px #00000090', + borderRadius: '0', + isScrollRequired: 'enabled', + }, + }, + { + componentName: 'TextInput', + layout: { + top: 120, + left: 10, + height: 30, + width: 25, + }, + properties: ['placeholder', 'label'], + defaultValue: { + placeholder: 'Enter your name', + label: '', + }, + }, + { + componentName: 'NumberInput', + layout: { + top: 190, + left: 10, + height: 30, + width: 25, + }, + properties: ['value', 'label'], + defaultValue: { + value: 24, + label: '', + }, + }, + { + componentName: 'Button', + layout: { + top: 240, + left: 10, + height: 30, + width: 10, + }, + properties: ['text'], + defaultValue: { + text: 'Submit', + }, + }, + ], + component: 'Form', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + buttonToSubmit: { + type: 'select', + displayName: 'Button to submit form', + options: [{ name: 'None', value: 'none' }], + validation: { + schema: { type: 'string' }, + defaultValue: 'none', + }, + conditionallyRender: { + key: 'advanced', + value: false, + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + advanced: { + type: 'toggle', + displayName: ' Use custom schema', + }, + JSONSchema: { + type: 'code', + displayName: 'JSON Schema', + conditionallyRender: { + key: 'advanced', + value: true, + }, + }, + }, + events: { + onSubmit: { displayName: 'On submit' }, + onInvalid: { displayName: 'On invalid' }, + }, + styles: { + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: 0, + }, + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + data: {}, + isValid: true, + }, + actions: [ + { + handle: 'submitForm', + displayName: 'Submit Form', + }, + { + handle: 'resetForm', + displayName: 'Reset Form', + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + loadingState: { value: '{{false}}' }, + advanced: { value: '{{false}}' }, + JSONSchema: { + value: + "{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}", + }, + }, + events: [], + styles: { + backgroundColor: { value: '#fff' }, + borderRadius: { value: '0' }, + borderColor: { value: '#fff' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/html.js b/server/src/helpers/widget-config/html.js new file mode 100644 index 0000000000..85b16b4a21 --- /dev/null +++ b/server/src/helpers/widget-config/html.js @@ -0,0 +1,52 @@ +export const htmlConfig = { + name: 'Html', + displayName: 'HTML Viewer', + description: 'View HTML content', + component: 'Html', + defaultSize: { + width: 10, + height: 310, + }, + properties: { + rawHtml: { + type: 'code', + displayName: 'Raw HTML', + validation: { + schema: { type: 'string' }, + defaultValue: `

Hello World

`, + }, + }, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + rawHtml: { + value: `
You can build your custom HTML-CSS template here
`, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/icon.js b/server/src/helpers/widget-config/icon.js new file mode 100644 index 0000000000..a64e7a486b --- /dev/null +++ b/server/src/helpers/widget-config/icon.js @@ -0,0 +1,72 @@ +export const iconConfig = { + name: 'Icon', + displayName: 'Icon', + description: 'Icon', + defaultSize: { + width: 5, + height: 48, + }, + component: 'Icon', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + icon: { + type: 'iconPicker', + displayName: 'Icon', + validation: { + schema: { type: 'string' }, + defaultValue: 'IconHome2', + }, + }, + }, + events: { + onClick: { displayName: 'On click' }, + onHover: { displayName: 'On hover' }, + }, + styles: { + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: {}, + actions: [ + { + handle: 'click', + displayName: 'Click', + }, + { + displayName: 'Set Visibility', + handle: 'setVisibility', + params: [{ handle: 'value', displayName: 'Value', defaultValue: '{{true}}', type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + icon: { value: 'IconHome2' }, + }, + events: [], + styles: { + iconColor: { value: '#000' }, + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/iframe.js b/server/src/helpers/widget-config/iframe.js new file mode 100644 index 0000000000..cbafe19d3a --- /dev/null +++ b/server/src/helpers/widget-config/iframe.js @@ -0,0 +1,59 @@ +export const iframeConfig = { + name: 'Iframe', + displayName: 'Iframe', + description: 'Embed external content', + defaultSize: { + width: 10, + height: 310, + }, + component: 'IFrame', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + source: { + type: 'code', + displayName: 'URL', + validation: { + schema: { type: 'string' }, + defaultValue: 'https://tooljet.io/', + }, + }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + source: { value: 'https://tooljet.io/' }, + visible: { value: '{{true}}' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/image.js b/server/src/helpers/widget-config/image.js new file mode 100644 index 0000000000..7f15fbb6c5 --- /dev/null +++ b/server/src/helpers/widget-config/image.js @@ -0,0 +1,145 @@ +export const imageConfig = { + name: 'Image', + displayName: 'Image', + description: 'Show image files', + defaultSize: { + width: 3, + height: 100, + }, + component: 'Image', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + source: { + type: 'code', + displayName: 'URL', + validation: { + schema: { type: 'string' }, + defaultValue: 'https://www.svgrepo.com/image.svg', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + alternativeText: { + type: 'code', + displayName: 'Alternative text', + validation: { + schema: { type: 'string' }, + defaultValue: 'this is an image', + }, + }, + zoomButtons: { + type: 'toggle', + displayName: 'Zoom button', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + rotateButton: { + type: 'toggle', + displayName: 'Rotate button', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + events: { + onClick: { displayName: 'On click' }, + }, + styles: { + borderType: { + type: 'select', + displayName: 'Border type', + options: [ + { name: 'None', value: 'none' }, + { name: 'Rounded', value: 'rounded' }, + { name: 'Circle', value: 'rounded-circle' }, + { name: 'Thumbnail', value: 'img-thumbnail' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'none', + }, + }, + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#ffffff', + }, + }, + padding: { + type: 'code', + displayName: 'Padding', + validation: { + schema: { type: 'number' }, + defaultValue: 0, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + imageFit: { + type: 'select', + displayName: 'Image fit', + options: [ + { name: 'fill', value: 'fill' }, + { name: 'contain', value: 'contain' }, + { name: 'cover', value: 'cover' }, + { name: 'scale-down', value: 'scale-down' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'contain', + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + source: { value: 'https://www.svgrepo.com/show/34217/image.svg' }, + visible: { value: '{{true}}' }, + loadingState: { value: '{{false}}' }, + alternativeText: { value: '' }, + zoomButtons: { value: '{{false}}' }, + rotateButton: { value: '{{false}}' }, + }, + events: [], + styles: { + borderType: { value: 'none' }, + padding: { value: '0' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + imageFit: { value: 'contain' }, + backgroundColor: { value: '' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/index.js b/server/src/helpers/widget-config/index.js new file mode 100644 index 0000000000..54a6964eff --- /dev/null +++ b/server/src/helpers/widget-config/index.js @@ -0,0 +1,158 @@ +import { buttonConfig } from './button'; +import { tableConfig } from './table'; +import { chartConfig } from './chart'; +import { modalConfig } from './modal'; +import { formConfig } from './form'; +import { textinputConfig } from './textinput'; +import { numberinputConfig } from './numberinput'; +import { passinputConfig } from './passwordinput'; +import { datepickerConfig } from './datepicker'; +import { checkboxConfig } from './checkbox'; +import { radiobuttonConfig } from './radiobutton'; +import { toggleswitchConfig } from './toggleswitch'; +import { toggleSwitchV2Config } from './toggleswitchv2'; +import { textareaConfig } from './textarea'; +import { daterangepickerConfig } from './daterangepicker'; +import { textConfig } from './text'; +import { imageConfig } from './image'; +import { containerConfig } from './container'; +import { dropdownConfig } from './dropdown'; +import { dropdownV2Config } from './dropdownV2'; +import { multiselectConfig } from './multiselect'; +import { multiselectV2Config } from './multiselectV2'; +import { richtextareaConfig } from './richtextarea'; +import { mapConfig } from './map'; +import { qrscannerConfig } from './qrscanner'; +import { starratingConfig } from './starrating'; +import { dividerConfig } from './divider'; +import { filepickerConfig } from './filepicker'; +import { calendarConfig } from './calendar'; +import { iframeConfig } from './iframe'; +import { codeEditorConfig } from './codeEditor'; +import { tabsConfig } from './tabs'; +import { timerConfig } from './timer'; +import { listviewConfig } from './listview'; +import { tagsConfig } from './tags'; +import { paginationConfig } from './pagination'; +import { circularProgressbarConfig } from './circularProgressbar'; +import { spinnerConfig } from './spinner'; +import { statisticsConfig } from './statistics'; +import { rangeSliderConfig } from './rangeslider'; +import { timelineConfig } from './timeline'; +import { svgImageConfig } from './svgImage'; +import { htmlConfig } from './html'; +import { verticalDividerConfig } from './verticalDivider'; +import { customComponentConfig } from './customComponent'; +import { buttonGroupConfig } from './buttonGroup'; +import { pdfConfig } from './pdf'; +import { stepsConfig } from './steps'; +import { kanbanConfig } from './kanban'; +import { colorPickerConfig } from './colorPicker'; +import { treeSelectConfig } from './treeSelect'; +import { linkConfig } from './link'; +import { iconConfig } from './icon'; +import { boundedBoxConfig } from './boundedBox'; +import { kanbanBoardConfig } from './kanbanBoard'; + +const widgets = { + buttonConfig, + tableConfig, + chartConfig, + modalConfig, + formConfig, + textinputConfig, + numberinputConfig, + passinputConfig, + datepickerConfig, + checkboxConfig, + radiobuttonConfig, + toggleswitchConfig, //!Depreciated + toggleSwitchV2Config, + textareaConfig, + daterangepickerConfig, + textConfig, + imageConfig, + containerConfig, + dropdownConfig, //!Depreciated + dropdownV2Config, + multiselectConfig, + multiselectV2Config, //!Depreciated + richtextareaConfig, + mapConfig, + qrscannerConfig, + starratingConfig, + dividerConfig, + filepickerConfig, + calendarConfig, + iframeConfig, + codeEditorConfig, + tabsConfig, + timerConfig, + listviewConfig, + tagsConfig, + paginationConfig, + circularProgressbarConfig, + spinnerConfig, + statisticsConfig, + rangeSliderConfig, + timelineConfig, + svgImageConfig, + htmlConfig, + verticalDividerConfig, + customComponentConfig, + buttonGroupConfig, + pdfConfig, + stepsConfig, + kanbanConfig, + kanbanBoardConfig, //!Depreciated + colorPickerConfig, + treeSelectConfig, + linkConfig, + iconConfig, + boundedBoxConfig, +}; + +const universalProps = { + properties: {}, + general: { + tooltip: { type: 'code', displayName: 'Tooltip', validation: { schema: { type: 'string' } } }, + }, + others: {}, + events: {}, + styles: {}, + validate: true, + generalStyles: { + boxShadow: { type: 'boxShadow', displayName: 'Box Shadow' }, + }, + definition: { + others: {}, + events: [], + styles: {}, + generalStyles: { + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + }, + }, +}; + +const combineProperties = (widget, universal, isArray = false) => { + return { + ...universal, + ...widget, + properties: { ...universal.properties, ...widget.properties }, + general: { ...universal.general, ...widget.general }, + others: { ...universal.others, ...widget.others }, + events: isArray ? [...universal.events, ...widget.events] : { ...universal.events, ...widget.events }, + styles: { ...universal.styles, ...widget.styles }, + generalStyles: { ...universal.generalStyles, ...widget.generalStyles }, + exposedVariables: { ...universal.exposedVariables, ...widget.exposedVariables }, + }; +}; + +export const componentTypes = Object.values(widgets).map((widget) => { + return { + ...combineProperties(widget, universalProps), + definition: combineProperties(widget.definition, universalProps.definition, true), + }; +}); + +export default widgets; diff --git a/server/src/helpers/widget-config/kanban.js b/server/src/helpers/widget-config/kanban.js new file mode 100644 index 0000000000..0705581c51 --- /dev/null +++ b/server/src/helpers/widget-config/kanban.js @@ -0,0 +1,163 @@ +export const kanbanConfig = { + name: 'Kanban', + displayName: 'Kanban', + description: 'Task management board', + component: 'Kanban', + defaultSize: { + width: 40, + height: 490, + }, + defaultChildren: [ + { + componentName: 'Text', + layout: { + top: 20, + left: 4, + height: 30, + }, + properties: ['text'], + accessorKey: 'text', + styles: ['fontWeight', 'textSize', 'textColor'], + defaultValue: { + text: '{{cardData.title}}', + fontWeight: 'bold', + textSize: 16, + textColor: '#000', + }, + }, + { + componentName: 'Text', + layout: { + top: 50, + left: 4, + height: 30, + }, + properties: ['text'], + accessorKey: 'text', + styles: ['textSize', 'textColor'], + defaultValue: { + text: '{{cardData.description}}', + textSize: 14, + textColor: '#000', + }, + }, + ], + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + columnData: { type: 'code', displayName: 'Column data' }, + cardData: { type: 'code', displayName: 'Card data' }, + cardWidth: { + type: 'code', + displayName: 'Card width', + validation: { + schema: { type: 'number' }, + }, + }, + cardHeight: { + type: 'code', + displayName: 'Card height', + validation: { + schema: { type: 'number' }, + }, + }, + enableAddCard: { type: 'toggle', displayName: 'Enable add card' }, + showDeleteButton: { type: 'toggle', displayName: 'Show delete button' }, + }, + events: { + onUpdate: { displayName: 'On update' }, + onAddCardClick: { displayName: 'On add card click' }, + onCardRemoved: { displayName: 'Card removed' }, + onCardAdded: { displayName: 'Card added' }, + onCardMoved: { displayName: 'Card moved' }, + onCardSelected: { displayName: 'Card selected' }, + }, + styles: { + disabledState: { type: 'toggle', displayName: 'Disable' }, + visibility: { type: 'toggle', displayName: 'Visibility' }, + accentColor: { type: 'color', displayName: 'Accent color' }, + }, + actions: [ + { + handle: 'addCard', + displayName: 'Add Card', + params: [ + { + handle: 'cardDetails', + displayName: 'Card Details', + defaultValue: `{{{ id: "c11", title: "Title 11", description: "Description 11", columnId: "r3" }}}`, + }, + ], + }, + { + handle: 'deleteCard', + displayName: 'Delete Card', + params: [{ handle: 'id', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` }], + }, + { + handle: 'moveCard', + displayName: 'Move Card', + params: [ + { handle: 'cardId', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` }, + { handle: 'columnId', displayName: 'Destination Column Id', defaultValue: '' }, + ], + }, + { + handle: 'updateCardData', + displayName: 'Update Card Data', + params: [ + { handle: 'id', displayName: 'Card Id', defaultValue: `{{components.kanban1?.lastSelectedCard?.id}}` }, + { + handle: 'value', + displayName: 'Value', + defaultValue: `{{{...components.kanban1?.lastSelectedCard, title: 'New Title'}}}`, + }, + ], + }, + ], + exposedVariables: { + updatedCardData: {}, + lastAddedCard: {}, + lastRemovedCard: {}, + lastCardMovement: {}, + lastSelectedCard: {}, + lastUpdatedCard: {}, + lastCardUpdate: [], + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + columnData: { + value: + '{{[{ "id": "r1", "title": "To Do" },{ "id": "r2", "title": "In Progress" },{ "id": "r3", "title": "Done" }]}}', + }, + cardData: { + value: + '{{[{ id: "c1", title: "Title 1", description: "Description 1", columnId: "r1" },{ id: "c2", title: "Title 2", description: "Description 2", columnId: "r1" },{ id: "c3", title: "Title 3", description: "Description 3",columnId: "r2" },{ id: "c4", title: "Title 4", description: "Description 4",columnId: "r3" },{ id: "c5", title: "Title 5", description: "Description 5",columnId: "r3" }, { id: "c6", title: "Title 6", description: "Description 6", columnId: "r1" },{ id: "c7", title: "Title 7", description: "Description 7", columnId: "r1" },{ id: "c8", title: "Title 8", description: "Description 8",columnId: "r2" },{ id: "c9", title: "Title 9", description: "Description 9",columnId: "r3" },{ id: "c10", title: "Title 10", description: "Description 10",columnId: "r3" }]}}', + }, + cardWidth: { + value: '{{302}}', + }, + cardHeight: { + value: '{{100}}', + }, + enableAddCard: { + value: `{{true}}`, + }, + showDeleteButton: { + value: `{{true}}`, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + accentColor: { value: '#4d72fa' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/kanbanBoard.js b/server/src/helpers/widget-config/kanbanBoard.js new file mode 100644 index 0000000000..4929bad9fe --- /dev/null +++ b/server/src/helpers/widget-config/kanbanBoard.js @@ -0,0 +1,68 @@ +//! KanbanBoard widget is deprecated. This config allows backward compatibility with existing KanbanBoard widgets. + +export const kanbanBoardConfig = { + name: 'KanbanBoard', + displayName: 'Kanban Board', + description: 'Task management board', + component: 'KanbanBoard', + defaultSize: { + width: 40, + height: 490, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + columns: { type: 'code', displayName: 'Columns' }, + cardData: { type: 'code', displayName: 'Card Data' }, + enableAddCard: { type: 'toggle', displayName: 'Enable Add Card' }, + }, + events: { + onCardAdded: { displayName: 'Card added' }, + onCardRemoved: { displayName: 'Card removed' }, + onCardMoved: { displayName: 'Card moved' }, + onCardSelected: { displayName: 'Card selected' }, + onCardUpdated: { displayName: 'Card updated' }, + }, + styles: { + disabledState: { type: 'toggle', displayName: 'Disable' }, + visibility: { type: 'toggle', displayName: 'Visibility' }, + width: { type: 'number', displayName: 'Width' }, + minWidth: { type: 'number', displayName: 'Min Width' }, + accentColor: { type: 'color', displayName: 'Accent color' }, + }, + exposedVariables: { + columns: {}, + lastAddedCard: {}, + lastRemovedCard: {}, + lastCardMovement: {}, + lastUpdatedCard: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + columns: { + value: '{{[{ "id": "1", "title": "to do" },{ "id": "2", "title": "in progress" }]}}', + }, + cardData: { + value: + '{{[{ id: "01", title: "one", columnId: "1" },{ id: "02", title: "two", columnId: "1" },{ id: "03", title: "three", columnId: "2" }]}}', + }, + enableAddCard: { + value: `{{true}}`, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + width: { value: '{{400}}' }, + minWidth: { value: '{{200}}' }, + textColor: { value: '' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/link.js b/server/src/helpers/widget-config/link.js new file mode 100644 index 0000000000..bf419e16c0 --- /dev/null +++ b/server/src/helpers/widget-config/link.js @@ -0,0 +1,111 @@ +export const linkConfig = { + name: 'Link', + displayName: 'Link', + description: 'Add link to the text', + defaultSize: { + width: 6, + height: 30, + }, + component: 'Link', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + linkTarget: { + type: 'code', + displayName: 'Link target', + validation: { + schema: { type: 'string' }, + defaultValue: 'https://dev.to/', + }, + }, + linkText: { + type: 'code', + displayName: 'Link text', + validation: { + schema: { type: 'string' }, + defaultValue: 'Click here', + }, + }, + targetType: { + type: 'select', + displayName: 'Target type', + options: [ + { name: 'New Tab', value: 'new' }, + { name: 'Same Tab', value: 'same' }, + ], + validation: { + schema: { type: 'string' }, + }, + }, + }, + events: { + onClick: { displayName: 'On click' }, + onHover: { displayName: 'On hover' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + textSize: { + type: 'number', + displayName: 'Text size', + validation: { + schema: { type: 'number' }, + defaultValue: 14, + }, + }, + underline: { + type: 'select', + displayName: 'Underline', + options: [ + { name: 'Never', value: 'no-underline' }, + { name: 'On Hover', value: 'on-hover' }, + { name: 'Always', value: 'underline' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'on-hover', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: {}, + actions: [ + { + handle: 'click', + displayName: 'Click', + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + linkTarget: { value: 'https://dev.to/' }, + linkText: { value: 'Click here' }, + targetType: { value: 'new' }, + }, + events: [], + styles: { + textColor: { value: '#375FCF' }, + textSize: { value: '{{14}}' }, + underline: { value: 'on-hover' }, + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/listview.js b/server/src/helpers/widget-config/listview.js new file mode 100644 index 0000000000..a813bb5a0b --- /dev/null +++ b/server/src/helpers/widget-config/listview.js @@ -0,0 +1,198 @@ +export const listviewConfig = { + name: 'Listview', + displayName: 'List View', + description: 'List multiple items', + defaultSize: { + width: 30, + height: 300, + }, + defaultChildren: [ + { + componentName: 'Image', + layout: { + top: 15, + left: 3, + height: 100, + }, + properties: ['source'], + accessorKey: 'imageURL', + }, + { + componentName: 'Text', + layout: { + top: 50, + left: 11, + height: 30, + }, + properties: ['text'], + accessorKey: 'text', + }, + { + componentName: 'Button', + layout: { + top: 50, + left: 26, + height: 30, + }, + incrementWidth: 2, + properties: ['text'], + accessorKey: 'buttonText', + }, + ], + component: 'Listview', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + data: { + type: 'code', + displayName: 'List data', + validation: { + schema: { type: 'array', element: { type: 'object' } }, + defaultValue: "[{text: 'Sample text 1'}]", + }, + }, + mode: { + type: 'select', + displayName: 'Mode', + options: [ + { name: 'list', value: 'list' }, + { name: 'grid', value: 'grid' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'list', + }, + }, + columns: { + type: 'number', + displayName: 'Columns', + validation: { + schema: { type: 'number' }, + defaultValue: 3, + }, + conditionallyRender: { + key: 'mode', + value: 'grid', + }, + }, + rowHeight: { + type: 'code', + displayName: 'Row height', + validation: { + schema: { type: 'number' }, + defaultValue: 100, + }, + }, + showBorder: { + type: 'code', + displayName: 'Show bottom border', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + conditionallyRender: { + key: 'mode', + value: 'list', + }, + }, + enablePagination: { + type: 'toggle', + displayName: 'Enable pagination', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + rowsPerPage: { + type: 'code', + displayName: 'Rows per page', + validation: { + schema: { type: 'number' }, + defaultValue: 10, + }, + }, + }, + events: { + onRowClicked: { displayName: 'Row clicked (Deprecated)' }, + onRecordClicked: { displayName: 'Record clicked' }, + }, + styles: { + backgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + defaultValue: '#dadcde', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'number', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + }, + exposedVariables: { + data: [{}], + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + data: { + value: `{{[ + { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 1' }, + { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 2' }, + { imageURL: 'https://www.svgrepo.com/show/34217/image.svg', text: 'Sample text 1', buttonText: 'Button 3' }, + ]}}`, + }, + mode: { value: 'list' }, + columns: { value: '{{3}}' }, + rowHeight: { + value: '100', + }, + visible: { value: '{{true}}' }, + showBorder: { value: '{{true}}' }, + rowsPerPage: { value: '{{10}}' }, + enablePagination: { value: '{{false}}' }, + }, + events: [], + styles: { + backgroundColor: { value: '#fff' }, + borderColor: { value: '#dadcde' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + borderRadius: { value: '{{4}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/map.js b/server/src/helpers/widget-config/map.js new file mode 100644 index 0000000000..fc8b04abd5 --- /dev/null +++ b/server/src/helpers/widget-config/map.js @@ -0,0 +1,152 @@ +export const mapConfig = { + name: 'Map', + displayName: 'Map', + description: 'Display map locations', + component: 'Map', + defaultSize: { + width: 16, + height: 420, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + initialLocation: { + type: 'code', + displayName: 'Initial location', + tip: 'This location will be the initial center of the map', + options: { + mode: 'javascript', + theme: 'duotone-light', + className: 'map-location-input pr-2', + }, + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }], + }, + defaultValue: `{{ {"lat": 40.7128, "lng": -73.935242} }}`, + }, + }, + defaultMarkers: { + type: 'code', + displayName: 'Default markers', + options: { + mode: 'javascript', + theme: 'duotone-light', + className: 'map-location-input pr-2', + }, + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }], + }, + defaultValue: `{{ [{"lat": 40.7128, "lng": -73.935242}] }}`, + }, + }, + polygonPoints: { + type: 'code', + displayName: 'Polygon points', + options: { + mode: 'javascript', + theme: 'duotone-light', + className: 'map-location-input pr-2', + }, + validation: { + schema: { + type: 'union', + schemas: [{ type: 'array', element: { type: 'object' } }, { type: 'object' }], + }, + defaultValue: `{{[{"lat": 40.7032, "lng": -73.975242},{"lat": 40.7532, "lng": -73.943242},{"lat": 40.7032, "lng": -73.916242}]}}`, + }, + }, + addNewMarkers: { + type: 'toggle', + displayName: 'Add new markers', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + canSearch: { + type: 'toggle', + displayName: 'Search for places', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + }, + events: { + onBoundsChange: { displayName: 'On bounds change' }, + onCreateMarker: { displayName: 'On create marker' }, + onMarkerClick: { displayName: 'On marker click' }, + onPolygonClick: { displayName: 'On polygon click' }, + }, + actions: [ + { + handle: 'setLocation', + displayName: 'Set Location', + params: [ + { handle: 'lat', displayName: 'Latitude' }, + { handle: 'lng', displayName: 'Longitude' }, + ], + }, + ], + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + center: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + initialLocation: { + value: `{{ {"lat": 40.7128, "lng": -73.935242} }}`, + }, + defaultMarkers: { + value: `{{ [{"lat": 40.7128, "lng": -73.935242}] }}`, + }, + polygonPoints: { + value: `{{[\n\t\t{"lat": 40.7032, "lng": -73.975242},\n\t\t{"lat": 40.7532, "lng": -73.943242},\n\t\t{"lat": 40.7032, "lng": -73.916242}\n]}}`, + }, + canSearch: { + value: `{{true}}`, + }, + addNewMarkers: { value: `{{true}}` }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/modal.js b/server/src/helpers/widget-config/modal.js new file mode 100644 index 0000000000..60f791831e --- /dev/null +++ b/server/src/helpers/widget-config/modal.js @@ -0,0 +1,195 @@ +export const modalConfig = { + name: 'Modal', + displayName: 'Modal', + description: 'Show pop-up windows', + component: 'Modal', + defaultSize: { + width: 10, + height: 34, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + title: { + type: 'code', + displayName: 'Title', + validation: { + schema: { type: 'string' }, + defaultValue: 'This title can be changed', + }, + }, + titleAlignment: { + type: 'select', + displayName: 'Title alignment', + options: [ + { name: 'left', value: 'left' }, + { name: 'center', value: 'center' }, + { name: 'right', value: 'right' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + useDefaultButton: { + type: 'toggle', + displayName: 'Use default trigger button', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + triggerButtonLabel: { + type: 'code', + displayName: 'Trigger button label', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'Launch Modal', + }, + }, + hideTitleBar: { type: 'toggle', displayName: 'Hide title bar' }, + hideCloseButton: { type: 'toggle', displayName: 'Hide close button' }, + hideOnEsc: { type: 'toggle', displayName: 'Close on escape key' }, + closeOnClickingOutside: { type: 'toggle', displayName: 'Close on clicking outside' }, + + size: { + type: 'select', + displayName: 'Modal size', + options: [ + { name: 'small', value: 'sm' }, + { name: 'medium', value: 'lg' }, + { name: 'large', value: 'xl' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'lg', + }, + }, + modalHeight: { + type: 'code', + displayName: 'Modal height', + validation: { + schema: { type: 'string' }, + defaultValue: '400px', + }, + }, + }, + events: { + onOpen: { displayName: 'On open' }, + onClose: { displayName: 'On close' }, + }, + styles: { + headerBackgroundColor: { + type: 'color', + displayName: 'Header background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#ffffffff', + }, + }, + headerTextColor: { + type: 'color', + displayName: 'Header title color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + bodyBackgroundColor: { + type: 'color', + displayName: 'Body background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#ffffffff', + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + triggerButtonBackgroundColor: { + type: 'color', + displayName: 'Trigger button background color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + }, + triggerButtonTextColor: { + type: 'color', + displayName: 'Trigger button text color', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + show: false, + }, + actions: [ + { + handle: 'open', + displayName: 'Open', + }, + { + handle: 'close', + displayName: 'Close', + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + title: { value: 'This title can be changed' }, + titleAlignment: { value: 'left' }, + loadingState: { value: `{{false}}` }, + useDefaultButton: { value: `{{true}}` }, + triggerButtonLabel: { value: `Launch Modal` }, + size: { value: 'lg' }, + hideTitleBar: { value: '{{false}}' }, + hideCloseButton: { value: '{{false}}' }, + hideOnEsc: { value: '{{true}}' }, + closeOnClickingOutside: { value: '{{false}}' }, + modalHeight: { value: '400px' }, + }, + events: [], + styles: { + headerBackgroundColor: { value: '#ffffffff' }, + headerTextColor: { value: '#000000' }, + bodyBackgroundColor: { value: '#ffffffff' }, + disabledState: { value: '{{false}}' }, + visibility: { value: '{{true}}' }, + triggerButtonBackgroundColor: { value: '#4D72FA' }, + triggerButtonTextColor: { value: '#ffffffff' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/multiselect.js b/server/src/helpers/widget-config/multiselect.js new file mode 100644 index 0000000000..5c4b5cf536 --- /dev/null +++ b/server/src/helpers/widget-config/multiselect.js @@ -0,0 +1,136 @@ +export const multiselectConfig = { + name: 'MultiselectLegacy', + displayName: 'Multiselect (Legacy)', + description: 'Multiple item selector', + defaultSize: { + width: 12, + height: 30, + }, + component: 'Multiselect', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + actions: [ + { + handle: 'selectOption', + displayName: 'Select Option', + params: [ + { + handle: 'option', + displayName: 'Option', + }, + ], + }, + { + handle: 'deselectOption', + displayName: 'Deselect Option', + params: [ + { + handle: 'option', + displayName: 'Option', + }, + ], + }, + { + handle: 'clearSelections', + displayName: 'Clear selections', + }, + ], + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + defaultValue: "['two', 'three']", + }, + }, + values: { + type: 'code', + displayName: 'Option values', + validation: { + schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + defaultValue: "['one', 'two', 'three']", + }, + }, + display_values: { + type: 'code', + displayName: 'Option labels', + validation: { + schema: { type: 'array', element: { type: 'string' } }, + defaultValue: "['one', 'two', 'three']", + }, + }, + showAllOption: { + type: 'toggle', + displayName: 'Enable select All option', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + events: { + onSelect: { displayName: 'On select' }, + onSearchTextChanged: { displayName: 'On search text changed' }, + }, + styles: { + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + values: {}, + searchText: '', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Select' }, + value: { value: '{{[2,3]}}' }, + values: { value: '{{[1,2,3]}}' }, + display_values: { value: '{{["one", "two", "three"]}}' }, + visible: { value: '{{true}}' }, + showAllOption: { value: '{{false}}' }, + }, + events: [], + styles: { + borderRadius: { value: '4' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/multiselectV2.js b/server/src/helpers/widget-config/multiselectV2.js new file mode 100644 index 0000000000..6aefd71067 --- /dev/null +++ b/server/src/helpers/widget-config/multiselectV2.js @@ -0,0 +1,371 @@ +export const multiselectV2Config = { + name: 'Multiselect', + displayName: 'Multiselect', + description: 'Multiple item selector', + defaultSize: { + width: 10, + height: 40, + }, + component: 'MultiselectV2', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + actions: [ + { + handle: 'selectOptions', + displayName: 'Select Options', + params: [ + { + handle: 'option', + displayName: 'Option', + }, + ], + }, + { + handle: 'deselectOptions', + displayName: 'Deselect Options', + params: [ + { + handle: 'option', + displayName: 'Option', + }, + ], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + ], + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Label', + }, + accordian: 'Data', + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select the options', + }, + accordian: 'Data', + }, + advanced: { + type: 'toggle', + displayName: 'Dynamic options', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + accordian: 'Options', + }, + value: { + type: 'code', + displayName: 'Default value', + conditionallyRender: { + key: 'advanced', + value: false, + }, + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }], + }, + }, + accordian: 'Options', + }, + schema: { + type: 'code', + displayName: 'Schema', + conditionallyRender: { + key: 'advanced', + value: true, + }, + accordian: 'Options', + }, + showAllOption: { + type: 'toggle', + displayName: 'Enable select all option', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + accordian: 'Options', + }, + optionsLoadingState: { + type: 'toggle', + displayName: 'Options loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + accordian: 'Options', + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: '' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: { + onSelect: { displayName: 'On select' }, + onSearchTextChanged: { displayName: 'On search text changed' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + }, + + styles: { + labelColor: { + type: 'color', + displayName: 'Color', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: 'Direction', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + labelWidth: { + type: 'slider', + displayName: 'Width', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' } }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + fieldBackgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + + fieldBorderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + selectedTextColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error Text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { + schema: { type: 'string' }, + defaultValue: '#6A727C', + }, + accordian: 'field', + showLabel: false, + }, + fieldBorderRadius: { + type: 'input', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: '6' }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000090', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + searchText: '', + }, + + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + mandatory: { value: false }, + customRule: { value: null }, + }, + properties: { + label: { value: 'Select' }, + values: { value: ['1', '2'] }, + advanced: { value: `{{false}}` }, + showAllOption: { value: '{{false}}' }, + optionsLoadingState: { value: '{{false}}' }, + placeholder: { value: 'Select the options' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + schema: { + value: + "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}", + }, + options: { + value: [ + { + label: 'option1', + value: '1', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + { + label: 'option2', + value: '2', + disable: { value: false }, + visible: { value: true }, + default: { value: true }, + }, + { + label: 'option3', + value: '3', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + ], + }, + tooltip: { value: '' }, + }, + events: [], + styles: { + labelColor: { value: '#1B1F24' }, + labelWidth: { value: '33' }, + auto: { value: '{{true}}' }, + fieldBorderRadius: { value: '6' }, + selectedTextColor: { value: '#1B1F24' }, + fieldBorderColor: { value: '#CCD1D5' }, + errTextColor: { value: '#D72D39' }, + fieldBackgroundColor: { value: '#fff' }, + direction: { value: 'left' }, + alignment: { value: 'side' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + icon: { value: 'IconHome2' }, + iconVisibility: { value: false }, + iconColor: { value: '#6A727C' }, + accentColor: { value: '#4368E3' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/numberinput.js b/server/src/helpers/widget-config/numberinput.js new file mode 100644 index 0000000000..ba7f2bc227 --- /dev/null +++ b/server/src/helpers/widget-config/numberinput.js @@ -0,0 +1,300 @@ +export const numberinputConfig = { + name: 'NumberInput', + displayName: 'Number Input', + description: 'Numeric input field', + component: 'NumberInput', + defaultSize: { + width: 10, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { schema: { type: 'string' }, defaultValue: 'Label' }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 0, + }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Enter your input', + }, + }, + decimalPlaces: { + type: 'code', + displayName: 'Decimal places', + validation: { + schema: { type: 'number' }, + defaultValue: 2, + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: { + onChange: { displayName: 'On change' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + onEnterPressed: { displayName: 'On enter pressed' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + width: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + textColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, + accordian: 'field', + visibility: false, + showLabel: false, + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'text', defaultValue: '100' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setFocus', + displayName: 'Set focus', + }, + { + handle: 'setBlur', + displayName: 'Set blur', + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + exposedVariables: { + value: 99, + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + regex: { type: 'code', displayName: 'Regex', placeholder: '^d+$' }, + minValue: { type: 'code', displayName: 'Min value', placeholder: 'Enter min value' }, + maxValue: { type: 'code', displayName: 'Max value', placeholder: 'Enter max value' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + mandatory: { value: '{{false}}' }, + regex: { value: '' }, + minValue: { value: '' }, + maxValue: { value: '' }, + customRule: { value: '' }, + }, + properties: { + value: { value: '0' }, + label: { value: 'Label' }, + maxValue: { value: '' }, + minValue: { value: '' }, + placeholder: { value: '0' }, + decimalPlaces: { value: '{{2}}' }, + tooltip: { value: '' }, + visibility: { value: '{{true}}' }, + loadingState: { value: '{{false}}' }, + disabledState: { value: '{{false}}' }, + }, + events: [], + styles: { + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#fff' }, + borderColor: { value: '#CCD1D5' }, + accentColor: { value: '#4368E3' }, + errTextColor: { value: '#D72D39' }, + textColor: { value: '#1B1F24' }, + color: { value: '#1B1F24' }, + iconColor: { value: '#CFD3D859' }, + direction: { value: 'left' }, + width: { value: '{{33}}' }, + alignment: { value: 'side' }, + auto: { value: '{{true}}' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + icon: { value: 'IconHome2' }, + iconVisibility: { value: false }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/pagination.js b/server/src/helpers/widget-config/pagination.js new file mode 100644 index 0000000000..6fabfa889a --- /dev/null +++ b/server/src/helpers/widget-config/pagination.js @@ -0,0 +1,78 @@ +export const paginationConfig = { + name: 'Pagination', + displayName: 'Pagination', + description: 'Navigate pages', + component: 'Pagination', + defaultSize: { + width: 10, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + numberOfPages: { + type: 'code', + displayName: 'Number of pages', + validation: { + schema: { type: 'number' }, + defaultValue: '{{5}}', + }, + }, + defaultPageIndex: { + type: 'code', + displayName: 'Default page index', + validation: { + schema: { type: 'number' }, + defaultValue: '{{1}}', + }, + }, + }, + validation: {}, + events: { + onPageChange: { displayName: 'On Page Change' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + totalPages: null, + currentPageIndex: null, + }, + definition: { + validation: {}, + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + numberOfPages: { + value: '{{5}}', + }, + defaultPageIndex: { + value: '{{1}}', + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/passwordinput.js b/server/src/helpers/widget-config/passwordinput.js new file mode 100644 index 0000000000..92a4a4711c --- /dev/null +++ b/server/src/helpers/widget-config/passwordinput.js @@ -0,0 +1,296 @@ +export const passinputConfig = { + name: 'PasswordInput', + displayName: 'Password Input', + description: 'Secure text input', + component: 'PasswordInput', + defaultSize: { + width: 10, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { schema: { type: 'string' }, defaultValue: 'Label' }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Password', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'default value', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + regex: { + type: 'code', + displayName: 'Regex', + placeholder: '^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$', + }, + minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, + maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + events: { + onChange: { displayName: 'On change' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + onEnterPressed: { displayName: 'On enter pressed' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + width: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + textColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconLock' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, + accordian: 'field', + visibility: false, + showLabel: false, + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + isFxNotRequired: true, + accordian: 'container', + }, + }, + exposedVariables: { + value: '', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'text', defaultValue: 'New Text' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setFocus', + displayName: 'Set focus', + }, + { + handle: 'setBlur', + displayName: 'Set blur', + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + placeholder: { value: 'Password' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + label: { value: 'Label' }, + value: { value: '' }, + }, + validation: { + mandatory: { value: false }, + regex: { value: '' }, + minLength: { value: '' }, + maxLength: { value: '' }, + customRule: { value: '' }, + }, + events: [], + styles: { + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#fff' }, + borderColor: { value: '#CCD1D5' }, + accentColor: { value: '#4368E3' }, + errTextColor: { value: '#D72D39' }, + textColor: { value: '#1B1F24' }, + iconColor: { value: '#CFD3D859' }, + direction: { value: 'left' }, + width: { value: '{{33}}' }, + alignment: { value: 'side' }, + color: { value: '#1B1F24' }, + auto: { value: '{{true}}' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + icon: { value: 'IconLock' }, + iconVisibility: { value: true }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/pdf.js b/server/src/helpers/widget-config/pdf.js new file mode 100644 index 0000000000..729e709932 --- /dev/null +++ b/server/src/helpers/widget-config/pdf.js @@ -0,0 +1,73 @@ +export const pdfConfig = { + name: 'PDF', + displayName: 'PDF', + description: 'Embed PDF documents', + component: 'PDF', + properties: { + url: { + type: 'code', + displayName: 'File URL', + validation: { + schema: { type: 'string' }, + defaultValue: 'https://upload.wikimedia.org/wikipedia/commons/general.pdf', + }, + }, + scale: { + type: 'toggle', + displayName: 'Scale page to width', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + pageControls: { + type: 'toggle', + displayName: 'Show page controls', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + showDownloadOption: { + type: 'toggle', + displayName: 'Show download button', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + }, + defaultSize: { + width: 20, + height: 640, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + url: { + value: + 'https://upload.wikimedia.org/wikipedia/commons/e/ee/Guideline_No._GD-Ed-2214_Marman_Clamp_Systems_Design_Guidelines.pdf', + }, + scale: { + value: '{{true}}', + }, + pageControls: { + value: `{{true}}`, + }, + showDownloadOption: { + value: `{{true}}`, + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/qrscanner.js b/server/src/helpers/widget-config/qrscanner.js new file mode 100644 index 0000000000..a2ef018a00 --- /dev/null +++ b/server/src/helpers/widget-config/qrscanner.js @@ -0,0 +1,51 @@ +export const qrscannerConfig = { + name: 'QrScanner', + displayName: 'QR Scanner', + description: 'Scan QR codes and hold its data', + component: 'QrScanner', + defaultSize: { + width: 10, + height: 300, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: {}, + events: { + onDetect: { displayName: 'On detect' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + lastDetectedValue: '', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{true}}' }, + }, + properties: {}, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/radiobutton.js b/server/src/helpers/widget-config/radiobutton.js new file mode 100644 index 0000000000..40c9d3ef5c --- /dev/null +++ b/server/src/helpers/widget-config/radiobutton.js @@ -0,0 +1,123 @@ +export const radiobuttonConfig = { + name: 'RadioButton', + displayName: 'Radio Button', + description: 'Select one from multiple choices', + component: 'RadioButton', + defaultSize: { + width: 6, + height: 60, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] }, + defaultValue: true, + }, + }, + values: { + type: 'code', + displayName: 'Option values', + validation: { + schema: { + type: 'array', + element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }] }, + }, + defaultValue: [true, false], + }, + }, + display_values: { + type: 'code', + displayName: 'Option labels', + validation: { + schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + defaultValue: ['yes', 'no'], + }, + }, + }, + events: { + onSelectionChange: { displayName: 'On select' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + activeColor: { + type: 'color', + displayName: 'Active color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + actions: [ + { + handle: 'selectOption', + displayName: 'Select Option', + params: [ + { + handle: 'option', + displayName: 'Option', + }, + ], + }, + ], + exposedVariables: { + value: true, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Select' }, + value: { value: '{{true}}' }, + values: { value: '{{[true,false]}}' }, + display_values: { value: '{{["yes", "no"]}}' }, + visible: { value: '{{true}}' }, + }, + events: [], + styles: { + textColor: { value: '' }, + activeColor: { value: '' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/rangeslider.js b/server/src/helpers/widget-config/rangeslider.js new file mode 100644 index 0000000000..4379ac564d --- /dev/null +++ b/server/src/helpers/widget-config/rangeslider.js @@ -0,0 +1,113 @@ +export const rangeSliderConfig = { + name: 'RangeSlider', + displayName: 'Range Slider', + description: 'Adjust value range', + component: 'RangeSlider', + defaultSize: { + width: 9, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + min: { + type: 'number', + displayName: 'Min', + validation: { + schema: { type: 'number' }, + defaultValue: 0, + }, + }, + max: { + type: 'number', + displayName: 'Max', + validation: { + schema: { type: 'number' }, + defaultValue: 100, + }, + }, + value: { + type: 'code', + displayName: 'Value', + validation: { + schema: { type: 'number' }, + defaultValue: 50, + }, + }, + enableTwoHandle: { + type: 'toggle', + displayName: 'Two handles', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + events: { + onChange: { displayName: 'On change' }, + }, + styles: { + lineColor: { + type: 'color', + displayName: 'Line color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + handleColor: { + type: 'color', + displayName: 'Handle color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + trackColor: { + type: 'color', + displayName: 'Track color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + visibility: { + type: 'code', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: { + value: null, + }, + definition: { + others: { + showOnDesktop: { value: true }, + showOnMobile: { value: false }, + }, + properties: { + min: { + value: '{{0}}', + }, + max: { + value: '{{100}}', + }, + value: { + value: '{{50}}', + }, + enableTwoHandle: { value: false }, + }, + events: [], + styles: { + lineColor: { value: '' }, + handleColor: { value: '' }, + trackColor: { value: '' }, + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/richtextarea.js b/server/src/helpers/widget-config/richtextarea.js new file mode 100644 index 0000000000..eacee66529 --- /dev/null +++ b/server/src/helpers/widget-config/richtextarea.js @@ -0,0 +1,73 @@ +export const richtextareaConfig = { + name: 'RichTextEditor', + displayName: 'Text Editor', + description: 'Rich text editor', + component: 'RichTextEditor', + defaultSize: { + width: 16, + height: 210, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Placeholder text', + }, + }, + defaultValue: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'string' }, + defaultValue: 'Default text', + }, + }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + value: '', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + placeholder: { value: 'Placeholder text' }, + defaultValue: { value: '' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/spinner.js b/server/src/helpers/widget-config/spinner.js new file mode 100644 index 0000000000..a6bf80b9be --- /dev/null +++ b/server/src/helpers/widget-config/spinner.js @@ -0,0 +1,60 @@ +export const spinnerConfig = { + name: 'Spinner', + displayName: 'Spinner', + description: 'Indicate loading state', + component: 'Spinner', + defaultSize: { + width: 4, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: {}, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + colour: { + type: 'color', + displayName: 'Colour', + validation: { + schema: { type: 'string' }, + defaultValue: '#0565ff', + }, + }, + size: { + type: 'select', + displayName: 'Size', + options: [ + { name: 'small', value: 'sm' }, + { name: 'large', value: 'lg' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'sm', + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: {}, + events: [], + styles: { + visibility: { value: '{{true}}' }, + size: { value: 'sm' }, + colour: { value: '#0565ff' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/starrating.js b/server/src/helpers/widget-config/starrating.js new file mode 100644 index 0000000000..01240d0369 --- /dev/null +++ b/server/src/helpers/widget-config/starrating.js @@ -0,0 +1,117 @@ +export const starratingConfig = { + name: 'StarRating', + displayName: 'Rating', + description: 'Star rating', + component: 'StarRating', + defaultSize: { + width: 10, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + defaultValue: 'Select your rating', + }, + }, + maxRating: { + type: 'code', + displayName: 'Number of stars', + validation: { + schema: { type: 'number' }, + defaultValue: 5, + }, + }, + defaultSelected: { + type: 'code', + displayName: 'Default no of selected stars', + validation: { + schema: { type: 'number' }, + defaultValue: 5, + }, + }, + allowHalfStar: { + type: 'toggle', + displayName: 'Enable half star', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + tooltips: { + type: 'code', + displayName: 'Tooltips', + validation: { + schema: { type: 'array', element: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + defaultValue: '[]', + }, + }, + }, + events: { + onChange: { displayName: 'On Change' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Star color', + validation: { + schema: { type: 'string' }, + defaultValue: '#ffb400', + }, + }, + labelColor: { + type: 'color', + displayName: 'Label color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + value: 0, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Select your rating' }, + maxRating: { value: '5' }, + defaultSelected: { value: '5' }, + allowHalfStar: { value: '{{false}}' }, + visible: { value: '{{true}}' }, + tooltips: { value: '{{[]}}' }, + }, + events: [], + styles: { + textColor: { value: '#ffb400' }, + labelColor: { value: '' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/statistics.js b/server/src/helpers/widget-config/statistics.js new file mode 100644 index 0000000000..d364d78524 --- /dev/null +++ b/server/src/helpers/widget-config/statistics.js @@ -0,0 +1,105 @@ +export const statisticsConfig = { + name: 'Statistics', + displayName: 'Statistics', + description: 'Show key metrics', + component: 'Statistics', + defaultSize: { + width: 9, + height: 152, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + primaryValueLabel: { + type: 'code', + displayName: 'Primary value label', + validation: { schema: { type: 'string' }, defaultValue: 'This months earnings' }, + }, + primaryValue: { + type: 'code', + displayName: 'Primary value', + validation: { + schema: { type: 'string' }, + defaultValue: '682.3', + }, + }, + hideSecondary: { + type: 'toggle', + displayName: 'Hide secondary value', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + }, + secondaryValueLabel: { + type: 'code', + displayName: 'Secondary value label', + validation: { schema: { type: 'string' }, defaultValue: 'Last month' }, + }, + secondaryValue: { + type: 'code', + displayName: 'Secondary value', + validation: { schema: { type: 'string' }, defaultValue: '2.85' }, + }, + secondarySignDisplay: { + type: 'code', + displayName: 'Secondary sign display', + + validation: { schema: { type: 'string' }, defaultValue: 'positive' }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + }, + }, + events: {}, + styles: { + primaryLabelColour: { + type: 'color', + displayName: 'Primary label colour', + validation: { schema: { type: 'string' }, defaultValue: '#8092AB' }, + }, + primaryTextColour: { + type: 'color', + displayName: 'Primary text colour', + validation: { schema: { type: 'string' }, defaultValue: '#000000' }, + }, + secondaryLabelColour: { + type: 'color', + displayName: 'Secondary label colour', + validation: { schema: { type: 'string' }, defaultValue: '#8092AB' }, + }, + secondaryTextColour: { + type: 'color', + displayName: 'Secondary text colour', + validation: { schema: { type: 'string' }, defaultValue: '#36AF8B' }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + }, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + primaryValueLabel: { value: 'This months earnings' }, + primaryValue: { value: '682.3' }, + secondaryValueLabel: { value: 'Last month' }, + secondaryValue: { value: '2.85' }, + secondarySignDisplay: { value: 'positive' }, + loadingState: { value: `{{false}}` }, + }, + events: [], + styles: { + primaryLabelColour: { value: '#8092AB' }, + primaryTextColour: { value: '#000000' }, + secondaryLabelColour: { value: '#8092AB' }, + secondaryTextColour: { value: '#36AF8B' }, + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/steps.js b/server/src/helpers/widget-config/steps.js new file mode 100644 index 0000000000..a39c634919 --- /dev/null +++ b/server/src/helpers/widget-config/steps.js @@ -0,0 +1,108 @@ +export const stepsConfig = { + name: 'Steps', + displayName: 'Steps', + description: 'Step-by-step navigation aid', + component: 'Steps', + properties: { + steps: { + type: 'code', + displayName: 'Steps', + validation: { + schema: { + type: 'array', + element: { type: 'object', object: { id: { type: 'number' } } }, + }, + defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`, + }, + }, + currentStep: { + type: 'code', + displayName: 'Current step', + validation: { + schema: { type: 'number' }, + defaultValue: 1, + }, + }, + stepsSelectable: { + type: 'toggle', + displayName: 'Steps selectable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + defaultSize: { + width: 22, + height: 38, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: { + onSelect: { displayName: 'On select' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + theme: { + type: 'select', + displayName: 'Theme', + options: [ + { name: 'titles', value: 'titles' }, + { name: 'numbers', value: 'numbers' }, + { name: 'plain', value: 'plain' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'titles', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: { + currentStepId: '3', + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + steps: { + value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}`, + }, + currentStep: { value: '{{3}}' }, + stepsSelectable: { value: true }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + theme: { value: 'titles' }, + color: { value: '' }, + textColor: { value: '' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/svgImage.js b/server/src/helpers/widget-config/svgImage.js new file mode 100644 index 0000000000..315a6e2c28 --- /dev/null +++ b/server/src/helpers/widget-config/svgImage.js @@ -0,0 +1,55 @@ +export const svgImageConfig = { + name: 'SvgImage', + displayName: 'Svg Image', + description: 'Display SVG graphics', + component: 'SvgImage', + properties: { + data: { + type: 'code', + displayName: 'Svg data', + validation: { + schema: { type: 'string' }, + defaultValue: + "", + }, + }, + }, + defaultSize: { + width: 4, + height: 50, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: { + value: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + data: { + value: + '', + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/table.js b/server/src/helpers/widget-config/table.js new file mode 100644 index 0000000000..eb08ac88c8 --- /dev/null +++ b/server/src/helpers/widget-config/table.js @@ -0,0 +1,667 @@ +export const tableConfig = { + name: 'Table', + displayName: 'Table', + description: 'Display paginated tabular data', + component: 'Table', + properties: { + title: { + type: 'string', + displayName: 'Title', + validation: { + schema: { type: 'string' }, + }, + }, + data: { + type: 'code', + displayName: 'Table data', + validation: { + schema: { + type: 'array', + element: { type: 'object' }, + }, + defaultValue: "[{ id: 1, name: 'Sarah', email: 'sarah@mail.com' }]", + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + columns: { + type: 'array', + displayName: 'Table Columns', + }, + useDynamicColumn: { + type: 'toggle', + displayName: 'Use dynamic column', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + columnData: { + type: 'code', + displayName: 'Column data', + validation: { + schema: { type: 'array', element: { type: 'object' } }, + defaultValue: + "{{[{name: 'email', key: 'email', id: '1'}, {name: 'Full name', key: 'name', id: '2', isEditable: true}]}}}", + }, + }, + rowsPerPage: { + type: 'code', + displayName: 'Number of rows per page', + validation: { + schema: { type: 'number' }, + defaultValue: 10, + }, + }, + + enableNextButton: { + type: 'toggle', + displayName: 'Enable next page button', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + enabledSort: { + type: 'toggle', + displayName: 'Enable column sorting', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + hideColumnSelectorButton: { + type: 'toggle', + displayName: 'Hide column selector button', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + enablePrevButton: { + type: 'toggle', + displayName: 'Enable previous page button', + validation: { + schema: { type: 'boolean' }, + }, + }, + totalRecords: { + type: 'code', + displayName: 'Total records server side', + validation: { + schema: { type: 'number' }, + defaultValue: 10, + }, + }, + enablePagination: { + type: 'toggle', + displayName: 'Enable pagination', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + serverSidePagination: { + type: 'clientServerSwitch', + displayName: 'Type', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + options: [ + { displayName: 'Client side', value: 'clientSide' }, + { displayName: 'Server side', value: 'serverSide' }, + ], + }, + serverSideSearch: { + type: 'clientServerSwitch', + displayName: 'Type', + options: [ + { displayName: 'Client side', value: 'clientSide' }, + { displayName: 'Server side', value: 'serverSide' }, + ], + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + serverSideSort: { + type: 'clientServerSwitch', + displayName: 'Type', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + options: [ + { displayName: 'Client side', value: 'clientSide' }, + { displayName: 'Server side', value: 'serverSide' }, + ], + }, + serverSideFilter: { + type: 'clientServerSwitch', + displayName: 'Type', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + options: [ + { displayName: 'Client side', value: 'clientSide' }, + { displayName: 'Server side', value: 'serverSide' }, + ], + defaultValue: 'clientSide', + }, + actionButtonBackgroundColor: { + type: 'color', + displayName: 'Background color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + actionButtonTextColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff', + }, + }, + displaySearchBox: { + type: 'toggle', + displayName: 'Show search', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + showDownloadButton: { + type: 'toggle', + displayName: 'Show download button', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + showFilterButton: { + type: 'toggle', + displayName: 'Enable filtering', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + showBulkUpdateActions: { + type: 'toggle', + displayName: 'Show update buttons', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + allowSelection: { + type: 'toggle', + displayName: 'Allow selection', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + showBulkSelector: { + type: 'toggle', + displayName: 'Bulk selection', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + highlightSelectedRow: { + type: 'toggle', + displayName: 'Highlight selected row', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + defaultSelectedRow: { + type: 'code', + displayName: 'Default selected row', + validation: { + schema: { + type: 'object', + }, + defaultValue: { id: 1 }, + }, + }, + + showAddNewRowButton: { + type: 'toggle', + displayName: 'Show add new row button', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + selectRowOnCellEdit: { + type: 'toggle', + displayName: 'Select row on cell edit', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + }, + }, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop ' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + defaultSize: { + width: 35, + height: 456, + }, + events: { + onRowHovered: { displayName: 'Row hovered' }, + onRowClicked: { displayName: 'Row clicked' }, + onBulkUpdate: { displayName: 'Save changes' }, + onPageChanged: { displayName: 'Page changed' }, + onSearch: { displayName: 'Search' }, + onCancelChanges: { displayName: 'Cancel changes' }, + onSort: { displayName: 'Sort applied' }, + onCellValueChanged: { displayName: 'Cell value changed' }, + onFilterChanged: { displayName: 'Filter changed' }, + onNewRowsAdded: { displayName: 'Add new rows' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text Color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000', + }, + accordian: 'Data', + }, + columnHeaderWrap: { + type: 'switch', + displayName: 'Column header', + validation: { schema: { type: 'string' } }, + accordian: 'Data', + options: [ + { displayName: 'Fixed', value: 'fixed' }, + { displayName: 'Wrap', value: 'wrap' }, + ], + }, + tableType: { + type: 'select', + displayName: 'Row style', + options: [ + { name: 'Regular', value: 'table-classic' }, + { name: 'Bordered', value: 'table-bordered' }, + { name: 'Striped', value: 'table-striped' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'table-classic', + }, + accordian: 'Data', + }, + cellSize: { + type: 'select', + displayName: 'Cell height', + options: [ + { name: 'Regular', value: 'regular' }, + { name: 'Condensed', value: 'condensed' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'regular', + }, + accordian: 'Data', + }, + contentWrap: { + type: 'toggle', + showLabel: false, + toggleLabel: 'Content wrap', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'boolean' }] }, + }, + accordian: 'Data', + }, + maxRowHeight: { + type: 'switch', + displayName: 'Max row height', + validation: { schema: { type: 'string' } }, + accordian: 'Data', + options: [ + { displayName: 'Auto', value: 'auto' }, + { displayName: 'Custom', value: 'custom' }, + ], + conditionallyRender: { + key: 'contentWrap', + value: true, + }, + }, + maxRowHeightValue: { + type: 'tableRowHeightInput', + isFxNotRequired: true, + showLabel: false, + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + }, + accordian: 'Data', + conditionallyRender: [ + { + key: 'maxRowHeight', + value: 'custom', + }, + { + key: 'contentWrap', + value: true, + }, + ], + }, + actionButtonRadius: { + type: 'numberInput', + displayName: 'Button radius', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'boolean' }] }, + }, + accordian: 'Action button', + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'Container', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { + schema: { type: 'string' }, + defaultValue: false, + }, + accordian: 'Container', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'Container', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'Container', + }, + }, + exposedVariables: { + selectedRow: {}, + changeSet: {}, + dataUpdates: [], + pageIndex: 1, + searchText: '', + selectedRows: [], + filters: [], + }, + actions: [ + { + handle: 'setPage', + displayName: 'Set page', + params: [ + { + handle: 'page', + displayName: 'Page', + defaultValue: '{{1}}', + }, + ], + }, + { + handle: 'selectRow', + displayName: 'Select row', + params: [ + { handle: 'key', displayName: 'Key' }, + { handle: 'value', displayName: 'Value' }, + ], + }, + { + handle: 'deselectRow', + displayName: 'Deselect row', + }, + { + handle: 'discardChanges', + displayName: 'Discard Changes', + }, + { + handle: 'discardNewlyAddedRows', + displayName: 'Discard newly added rows', + }, + { + displayName: 'Download table data', + handle: 'downloadTableData', + params: [ + { + handle: 'type', + displayName: 'Type', + options: [ + { name: 'Download as Excel', value: 'xlsx' }, + { name: 'Download as CSV', value: 'csv' }, + { name: 'Download as PDF', value: 'pdf' }, + ], + defaultValue: `{{Download as Excel}}`, + type: 'select', + }, + ], + }, + { + handle: 'selectAllRows', + displayName: 'Select all rows', + }, + { + handle: 'deselectAllRows', + displayName: 'Deselect all rows', + }, + { + handle: 'setFilters', + displayName: 'Set filters', + params: [{ handle: 'parameters', displayName: 'Parameters' }], + }, + { + handle: 'clearFilters', + displayName: 'Clear filters', + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + title: { value: 'Table' }, + visible: { value: '{{true}}' }, + loadingState: { value: '{{false}}' }, + data: { + value: + "{{ [ \n\t\t{ id: 1, name: 'Olivia Nguyen', email: 'olivia.nguyen@example.com', date: '15/05/2022', phone: 9876543210, interest: ['Reading', 'Traveling','Photography'], photo: 'https://reqres.in/img/faces/7-image.jpg' }, \n\t\t{ id: 2, name: 'Liam Patel', email: 'liam.patel@example.com', date: '20/09/2021', phone: 8765432109, interest: ['Cooking','Gardening','Hiking'], photo: 'https://reqres.in/img/faces/5-image.jpg' }, \n\t\t{ id: 3, name: 'Sophia Reyes', email: 'sophia.reyes@example.com', date: '01/01/2023', phone: 7654321098, interest: ['Music','Dancing','Crafting'], photo: 'https://reqres.in/img/faces/3-image.jpg' }, \n\t\t{ id: 4, name: 'Jacob Hernandez', email: 'jacob.hernandez@example.com', date: '10/11/2022', phone: 6543210987, interest: ['Reading', 'Traveling', 'Volunteering'], photo: 'https://reqres.in/img/faces/1-image.jpg' }, \n\t\t{ id: 5, name: 'William Sanchez', email: 'william.sanchez@example.com', date: '07/01/2021', phone: 4321098765, interest: ['Music', 'Dancing', 'Hiking'], photo: 'https://reqres.in/img/faces/4-image.jpg' }, \n\t\t{ id: 6, name: 'Ethan Morales', email: 'ethan.morales@example.com', date: '05/11/2021', phone: 2109876543, interest: ['Cooking', 'Traveling', 'Photography'], photo: 'https://reqres.in/img/faces/6-image.jpg' }, \n\t\t{ id: 7, name: 'Mia Tiana', email: 'mia.tiana@example.com', date: '21/11/2022', phone: 1098705217, interest: ['Music', 'Gardening', 'Hiking'], photo: 'https://reqres.in/img/faces/2-image.jpg' }, \n\t\t{ id: 8, name: 'Lucas Ramirez', email: 'lucas.ramirez@example.com', date: '31/03/2023', phone: 9876543210, interest: ['Reading', 'Dancing', 'Crafting'], photo: 'https://reqres.in/img/faces/9-image.jpg' }, \n\t\t{ id: 9, name: 'Alexander Vela', email: 'alexander.vela@example.com', date: '07/09/2022', phone: 7654321098, interest: ['Music','Gardening','Photography'], photo: 'https://reqres.in/img/faces/8-image.jpg' }, \n\t\t{ id: 10, name: 'Michael Reyes', email: 'michael.reyes@example.com', date: '25/12/2021', phone: 5432109876, interest: ['Cooking','Crafting','Volunteering'], photo: 'https://reqres.in/img/faces/10-image.jpg' } \n] }}", + }, + useDynamicColumn: { value: '{{false}}' }, + columnData: { + value: + "{{[{name: 'email', key: 'email', id: '1'}, {name: 'Full name', key: 'name', id: '2', isEditable: true}]}}", + }, + rowsPerPage: { value: '{{10}}' }, + serverSidePagination: { value: '{{false}}' }, + enableNextButton: { value: '{{true}}' }, + enablePrevButton: { value: '{{true}}' }, + totalRecords: { value: '{{10}}' }, + enablePagination: { value: '{{true}}' }, + serverSideSort: { value: '{{false}}' }, + serverSideFilter: { value: '{{false}}' }, + displaySearchBox: { value: '{{true}}' }, + showDownloadButton: { value: '{{true}}' }, + showFilterButton: { value: '{{true}}' }, + autogenerateColumns: { value: true, generateNestedColumns: true }, + isAllColumnsEditable: { value: '{{false}}' }, + columns: { + value: [ + { + name: 'id', + id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737', + autogenerated: true, + fxActiveFields: [], + columnSize: 30, + columnType: 'string', + }, + { + name: 'photo', + key: 'photo', + id: 'f23b7d134b2e490ea41e3bb8eeb8c8e37472af243bf6b70d5af294482097e3a2', + autogenerated: true, + fxActiveFields: [], + columnType: 'image', + objectFit: 'contain', + borderRadius: '100', + columnSize: 70, + }, + { + name: 'name', + id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a', + autogenerated: true, + fxActiveFields: [], + columnSize: 130, + columnType: 'string', + }, + { + name: 'email', + id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f', + autogenerated: true, + fxActiveFields: [], + columnSize: 230, + columnType: 'string', + }, + { + name: 'date', + id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc', + autogenerated: true, + fxActiveFields: [], + columnType: 'datepicker', + isTimeChecked: false, + dateFormat: 'DD/MM/YYYY', + parseDateFormat: 'DD/MM/YYYY', + isDateSelectionEnabled: true, + columnSize: 130, + }, + { + name: 'phone', + id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56', + autogenerated: true, + fxActiveFields: [], + columnType: 'number', + columnSize: 140, + }, + { + name: 'interest', + key: 'interest', + id: 'f23b7d134b2e490ea41e3bb8eeb8c8e37472af243bf6b70d5af294482097e3a1', + autogenerated: true, + fxActiveFields: [], + columnType: 'newMultiSelect', + columnSize: 300, + options: [ + { + label: 'Reading', + value: 'Reading', + }, + { + label: 'Traveling', + value: 'Traveling', + }, + { + label: 'Photography', + value: 'Photography', + }, + { + label: 'Music', + value: 'Music', + }, + { + label: 'Cooking', + value: 'Cooking', + }, + { + label: 'Crafting', + value: 'Crafting', + }, + { + label: 'Voluntering', + value: 'Voluntering', + }, + { + label: 'Garndening', + value: 'Garndening', + }, + { + label: 'Dancing', + value: 'Dancing', + }, + { + label: 'Hiking', + value: 'Hiking', + }, + ], + }, + ], + }, + showBulkUpdateActions: { value: '{{true}}' }, + showBulkSelector: { value: '{{false}}' }, + highlightSelectedRow: { value: '{{false}}' }, + columnSizes: { value: '{{({})}}' }, + actions: { value: [] }, + enabledSort: { value: '{{true}}' }, + hideColumnSelectorButton: { value: '{{false}}' }, + defaultSelectedRow: { value: '{{{"id":1}}}' }, + showAddNewRowButton: { value: '{{true}}' }, + allowSelection: { value: '{{true}}' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + events: [], + styles: { + textColor: { value: '#000' }, + columnHeaderWrap: { value: 'fixed' }, + actionButtonRadius: { value: '0' }, + cellSize: { value: 'regular' }, + borderRadius: { value: '8' }, + tableType: { value: 'table-classic' }, + maxRowHeight: { value: 'auto' }, + maxRowHeightValue: { value: '{{0}}' }, // Setting it here as 0 since TableRowHeightInput component will set the value + contentWrap: { value: '{{true}}' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + padding: { value: 'default' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/tabs.js b/server/src/helpers/widget-config/tabs.js new file mode 100644 index 0000000000..a397979a3e --- /dev/null +++ b/server/src/helpers/widget-config/tabs.js @@ -0,0 +1,183 @@ +export const tabsConfig = { + name: 'Tabs', + displayName: 'Tabs', + description: 'Organize content in tabs', + defaultSize: { + width: 30, + height: 300, + }, + defaultChildren: [ + { + componentName: 'Image', + layout: { + top: 60, + left: 17, + height: 100, + }, + tab: 0, + properties: ['source'], + defaultValue: { + source: 'https://uploads-ssl.webflow.com/6266634263b9179f76b2236e/62666392f32677b5cb2fb84b_logo.svg', + }, + }, + { + componentName: 'Text', + layout: { + top: 100, + left: 5, + height: 50, + width: 34, + }, + tab: 1, + properties: ['text'], + defaultValue: { + text: 'Open-source low-code framework to build & deploy internal tools within minutes.', + }, + }, + { + componentName: 'Table', + layout: { + top: 0, + left: 1, + width: 41, + height: 250, + }, + tab: 2, + }, + ], + component: 'Tabs', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + tabs: { + type: 'code', + displayName: 'Tabs', + validation: { + schema: { + type: 'array', + element: { + type: 'object', + object: { + id: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + }, + }, + }, + defaultValue: [ + { title: 'Home', id: '0' }, + { title: 'Profile', id: '1' }, + { title: 'Settings', id: '2' }, + ], + }, + }, + defaultTab: { + type: 'code', + displayName: 'Default tab', + validation: { + schema: { + type: 'union', + schemas: [{ type: 'string' }, { type: 'number' }], + }, + defaultValue: '0', + }, + }, + hideTabs: { + type: 'toggle', + displayName: 'Hide tabs', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + renderOnlyActiveTab: { + type: 'toggle', + displayName: 'Render only active tab', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + }, + events: { onTabSwitch: { displayName: 'On tab switch' } }, + styles: { + highlightColor: { + type: 'color', + displayName: 'Highlight color', + validation: { + schema: { type: 'string' }, + defaultValue: '#375FCF', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { + type: 'boolean', + }, + defaultValue: false, + }, + }, + tabWidth: { + type: 'select', + displayName: 'Tab width', + options: [ + { name: 'Auto', value: 'auto' }, + { name: 'Equally split', value: 'split' }, + ], + }, + }, + actions: [ + { + handle: 'setTab', + displayName: 'Set current tab', + params: [ + { + handle: 'id', + displayName: 'Id', + }, + ], + }, + ], + exposedVariables: { currentTab: '' }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + tabs: { + value: + "{{[ \n\t\t{ title: 'Home', id: '0' }, \n\t\t{ title: 'Profile', id: '1' }, \n\t\t{ title: 'Settings', id: '2' } \n ]}}", + }, + defaultTab: { value: '0' }, + hideTabs: { value: false }, + renderOnlyActiveTab: { value: false }, + }, + events: [], + styles: { + highlightColor: { value: '#375FCF' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + tabWidth: { value: 'auto' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/tags.js b/server/src/helpers/widget-config/tags.js new file mode 100644 index 0000000000..8af289b23a --- /dev/null +++ b/server/src/helpers/widget-config/tags.js @@ -0,0 +1,59 @@ +export const tagsConfig = { + name: 'Tags', + displayName: 'Tags', + description: 'Display tag labels', + component: 'Tags', + defaultSize: { + width: 8, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + data: { + type: 'code', + displayName: 'Tags', + validation: { + schema: { + type: 'array', + element: { + type: 'object', + object: { title: { type: 'string' }, color: { type: 'string' }, textColor: { type: 'string' } }, + }, + }, + defaultValue: + "{{ [{ title: 'success', color: '#2fb344', textColor: '#fff' }, { title: 'info', color: '#206bc4', textColor: '#fff' }] }}", + }, + }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: {}, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + data: { + value: + "{{ [ \n\t\t{ title: 'success', color: '#2fb344', textColor: '#fff' }, \n\t\t{ title: 'info', color: '#206bc4', textColor: '#fff' }, \n\t\t{ title: 'warning', color: '#f59f00', textColor: '#fff' }, \n\t\t{ title: 'danger', color: '#d63939', textColor: '#fff' } ] }}", + }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/text.js b/server/src/helpers/widget-config/text.js new file mode 100644 index 0000000000..ada530d127 --- /dev/null +++ b/server/src/helpers/widget-config/text.js @@ -0,0 +1,298 @@ +export const textConfig = { + name: 'Text', + displayName: 'Text', + description: 'Display text or HTML', + component: 'Text', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + textFormat: { + type: 'switch', + displayName: 'Text Format', + options: [ + { displayName: 'Plain text', value: 'plainText' }, + { displayName: 'Markdown', value: 'markdown' }, + { displayName: 'HTML', value: 'html' }, + ], + isFxNotRequired: true, + defaultValue: { value: 'plainText' }, + fullWidth: true, + }, + text: { + type: 'code', + displayName: 'TextComponentTextInput', // Keeping this name unique so that we can filter it in Codehinter + validation: { + schema: { type: 'string' }, + defaultValue: 'Hello, there!', + }, + showLabel: false, + }, + loadingState: { + type: 'toggle', + displayName: 'Show loading state', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + defaultSize: { + width: 6, + height: 40, + }, + events: { + onClick: { displayName: 'On click' }, + onHover: { displayName: 'On hover' }, + }, + styles: { + textSize: { + type: 'numberInput', + displayName: 'Size', + validation: { + schema: [{ type: 'string' }, { type: 'number' }], + defaultValue: 14, + }, + accordian: 'Text', + }, + fontWeight: { + type: 'select', + displayName: 'Weight', + options: [ + { name: 'normal', value: 'normal' }, + { name: 'bold', value: 'bold' }, + { name: 'lighter', value: 'lighter' }, + { name: 'bolder', value: 'bolder' }, + ], + accordian: 'Text', + }, + fontStyle: { + type: 'switch', + displayName: 'Style', + options: [ + { displayName: 'Normal', value: 'normal', iconName: 'minus' }, + { displayName: 'Oblique', value: 'oblique', iconName: 'oblique' }, + { displayName: 'Italic', value: 'italic', iconName: 'italic' }, + ], + isIcon: true, + accordian: 'Text', + }, + textColor: { + type: 'color', + displayName: 'Color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'Text', + }, + isScrollRequired: { + type: 'switch', + displayName: 'Scroll', + options: [ + { displayName: 'Enable', value: 'enabled' }, + { displayName: 'Disable', value: 'disabled' }, + ], + accordian: 'Text', + }, + lineHeight: { type: 'numberInput', displayName: 'Line height', accordian: 'Text' }, + textIndent: { type: 'numberInput', displayName: 'Text indent', accordian: 'Text' }, + textAlign: { + type: 'alignButtons', + displayName: 'Alignment', + validation: { + schema: { type: 'string' }, + defaultValue: 'left', + }, + accordian: 'Text', + }, + verticalAlignment: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'center' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignverticallytop', value: 'top', iconName: 'alignverticallytop' }, + { displayName: 'alignverticallycenter', value: 'center', iconName: 'alignverticallycenter' }, + { displayName: 'alignverticallybottom', value: 'bottom', iconName: 'alignverticallybottom' }, + ], + accordian: 'Text', + isFxNotRequired: true, + }, + decoration: { + type: 'switch', + displayName: 'Decoration', + isIcon: true, + options: [ + { displayName: 'none', value: 'none', iconName: 'minus' }, + { displayName: 'underline', value: 'underline', iconName: 'underline' }, + { displayName: 'overline', value: 'overline', iconName: 'overline' }, + { displayName: 'line-through', value: 'line-through', iconName: 'linethrough' }, + ], + accordian: 'Text', + }, + transformation: { + type: 'switch', + displayName: 'Transformation', + isIcon: true, + options: [ + { displayName: 'none', value: 'none', iconName: 'minus' }, + { displayName: 'uppercase', value: 'uppercase', iconName: 'uppercase' }, + { displayName: 'lowercase', value: 'lowercase', iconName: 'lowercase' }, + { displayName: 'capitalize', value: 'capitalize', iconName: 'capitalize' }, + ], + accordian: 'Text', + }, + letterSpacing: { type: 'numberInput', displayName: 'Letter spacing', accordian: 'Text' }, + wordSpacing: { type: 'numberInput', displayName: 'Word spacing', accordian: 'Text' }, + fontVariant: { + type: 'select', + displayName: 'Font variant', + options: [ + { name: 'normal', value: 'normal' }, + { name: 'small-caps', value: 'small-caps' }, + { name: 'initial', value: 'initial' }, + { name: 'inherit', value: 'inherit' }, + ], + accordian: 'Text', + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { + schema: { type: 'string' }, + defaultValue: '#fff00000', + }, + accordian: 'Container', + colorPickerPosition: 'top', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + accordian: 'Container', + colorPickerPosition: 'top', + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'Container', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000090', + }, + accordian: 'Container', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { schema: { type: 'string' }, defaultValue: 'default' }, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'Container', + isFxNotRequired: true, + }, + }, + exposedVariables: { + text: 'Hello, there!', + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'Text', defaultValue: 'New text' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'setVisibility', displayName: 'Value', defaultValue: `{{true}}`, type: 'toggle' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'setLoading', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'setDisable', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + textFormat: { value: 'html' }, + text: { value: `Hello {{globals.currentUser.firstName}}👋` }, + loadingState: { value: `{{false}}` }, + disabledState: { value: '{{false}}' }, + visibility: { value: '{{true}}' }, + }, + events: [], + styles: { + backgroundColor: { value: '#fff00000' }, + textColor: { value: '#000000' }, + textSize: { value: '{{14}}' }, + textAlign: { value: 'left' }, + fontWeight: { value: 'normal' }, + decoration: { value: 'none' }, + transformation: { value: 'none' }, + fontStyle: { value: 'normal' }, + lineHeight: { value: '{{1.5}}' }, + textIndent: { value: '{{0}}' }, + letterSpacing: { value: '{{0}}' }, + wordSpacing: { value: '{{0}}' }, + fontVariant: { value: 'normal' }, + verticalAlignment: { value: 'center' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + borderColor: { value: '' }, + borderRadius: { value: '{{6}}' }, + isScrollRequired: { value: 'enabled' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/textarea.js b/server/src/helpers/widget-config/textarea.js new file mode 100644 index 0000000000..c5e71be77d --- /dev/null +++ b/server/src/helpers/widget-config/textarea.js @@ -0,0 +1,93 @@ +export const textareaConfig = { + name: 'Textarea', + displayName: 'Text Area', + description: 'Multi-line text input', + component: 'TextArea', + defaultSize: { + width: 6, + height: 100, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'string' }, + defaultValue: 'default text', + }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Placeholder text', + }, + }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + borderRadius: { + type: 'code', + displayName: 'Border radius', + validation: { + schema: { type: 'number' }, + defaultValue: 4, + }, + }, + }, + exposedVariables: { + value: + 'ToolJet is an open-source low-code platform for building and deploying internal tools with minimal engineering efforts 🚀', + }, + actions: [ + { + handle: 'setText', + displayName: 'Set Text', + params: [{ handle: 'text', displayName: 'text', defaultValue: 'New Text' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + value: { + value: + 'ToolJet is an open-source low-code platform for building and deploying internal tools with minimal engineering efforts 🚀', + }, + placeholder: { value: 'Placeholder text' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + borderRadius: { value: '{{4}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/textinput.js b/server/src/helpers/widget-config/textinput.js new file mode 100644 index 0000000000..15a52ea306 --- /dev/null +++ b/server/src/helpers/widget-config/textinput.js @@ -0,0 +1,302 @@ +export const textinputConfig = { + name: 'TextInput', + displayName: 'Text Input', + description: 'User text input field', + component: 'TextInput', + defaultSize: { + width: 10, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { schema: { type: 'string' }, defaultValue: 'Label' }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Enter your input', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'Default value', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' }, + minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, + maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + events: { + onChange: { displayName: 'On change' }, + onEnterPressed: { displayName: 'On enter pressed' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + width: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + textColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconHome2' }, + accordian: 'field', + visibility: false, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CFD3D859' }, + accordian: 'field', + visibility: false, + showLabel: false, + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + value: '', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setFocus', + displayName: 'Set focus', + }, + { + handle: 'setBlur', + displayName: 'Set blur', + }, + { + handle: 'disable', + displayName: 'Disable(deprecated)', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'visibility', + displayName: 'Visibility(deprecated)', + params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + definition: { + validation: { + mandatory: { value: '{{false}}' }, + regex: { value: '' }, + minLength: { value: '' }, + maxLength: { value: '' }, + customRule: { value: '' }, + }, + + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + value: { value: '' }, + label: { value: 'Label' }, + placeholder: { value: 'Enter your input' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + textColor: { value: '#1B1F24' }, + borderColor: { value: '#CCD1D5' }, + accentColor: { value: '#4368E3' }, + errTextColor: { value: '#D72D39' }, + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#fff' }, + iconColor: { value: '#CFD3D859' }, + direction: { value: 'left' }, + width: { value: '{{33}}' }, + alignment: { value: 'side' }, + color: { value: '#1B1F24' }, + auto: { value: '{{true}}' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + icon: { value: 'IconHome2' }, + iconVisibility: { value: false }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/timeline.js b/server/src/helpers/widget-config/timeline.js new file mode 100644 index 0000000000..6ece608f5c --- /dev/null +++ b/server/src/helpers/widget-config/timeline.js @@ -0,0 +1,60 @@ +export const timelineConfig = { + name: 'Timeline', + displayName: 'Timeline', + description: 'Show event timeline', + component: 'Timeline', + properties: { + data: { + type: 'code', + displayName: 'Timeline data', + validation: { + schema: { type: 'array', element: { type: 'object' } }, + defaultValue: "[{title: 'Product Launched', date: '20/10/2021'}]", + }, + }, + hideDate: { + type: 'toggle', + displayName: 'Hide date', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + defaultSize: { + width: 20, + height: 270, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + events: {}, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' } }, + }, + }, + exposedVariables: { + value: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + data: { + value: + "{{ [ \n\t\t{ title: 'Product Launched', subTitle: 'First version of our product released to public', date: '20/10/2021', iconBackgroundColor: '#4d72fa'},\n\t\t { title: 'First Signup', subTitle: 'Congratulations! We got our first signup', date: '22/10/2021', iconBackgroundColor: '#4d72fa'}, \n\t\t { title: 'First Payment', subTitle: 'Hurray! We got our first payment', date: '01/11/2021', iconBackgroundColor: '#4d72fa'} \n] }}", + }, + hideDate: { value: '{{false}}' }, + }, + events: [], + styles: { + visibility: { value: '{{true}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/timer.js b/server/src/helpers/widget-config/timer.js new file mode 100644 index 0000000000..a7cfe05a41 --- /dev/null +++ b/server/src/helpers/widget-config/timer.js @@ -0,0 +1,97 @@ +export const timerConfig = { + name: 'Timer', + displayName: 'Timer', + description: 'Countdown or stopwatch', + component: 'Timer', + defaultSize: { + width: 11, + height: 128, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { type: 'string' }, + defaultValue: '00:00:00:000', + }, + }, + type: { + type: 'select', + displayName: 'Timer type', + options: [ + { name: 'Count up', value: 'countUp' }, + { name: 'Count down', value: 'countDown' }, + ], + validation: { + schema: { type: 'string' }, + defaultValue: 'countUp', + }, + }, + }, + validation: {}, + events: { + onStart: { displayName: 'On Start' }, + onResume: { displayName: 'On Resume' }, + onPause: { displayName: 'On Pause' }, + onCountDownFinish: { displayName: 'On Count Down Finish' }, + onReset: { displayName: 'On Reset' }, + }, + styles: { + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + defaultValue: false, + }, + }, + }, + exposedVariables: { + value: '', + }, + definition: { + validation: {}, + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + value: { + value: '00:00:00:000', + }, + type: { + value: 'countUp', + }, + }, + defaults: [ + { + type: 'countUp', + value: '00:00:00:000', + paramName: 'value', + }, + { + type: 'countDown', + value: '00:00:10:000', + paramName: 'value', + }, + ], + events: [], + styles: { + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/toggleswitch.js b/server/src/helpers/widget-config/toggleswitch.js new file mode 100644 index 0000000000..ec3a97450d --- /dev/null +++ b/server/src/helpers/widget-config/toggleswitch.js @@ -0,0 +1,83 @@ +export const toggleswitchConfig = { + name: 'ToggleSwitchLegacy', + displayName: 'Toggle Switch (Legacy)', + description: 'User-controlled on-off switch', + component: 'ToggleSwitch', + defaultSize: { + width: 6, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + }, + }, + defaultValue: { + type: 'toggle', + displayName: 'Default status', + validation: { + schema: { type: 'boolean' }, + }, + }, + }, + events: { + onChange: { displayName: 'On change' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text color', + validation: { + schema: { type: 'string' }, + }, + }, + toggleSwitchColor: { + type: 'color', + displayName: 'Toggle switch color', + validation: { + schema: { type: 'string' }, + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + }, + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { + schema: { type: 'boolean' }, + }, + }, + }, + exposedVariables: { + value: false, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Toggle label' }, + defaultValue: { value: '{{false}}' }, + }, + events: [], + styles: { + textColor: { value: '' }, + toggleSwitchColor: { value: '' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/toggleswitchv2.js b/server/src/helpers/widget-config/toggleswitchv2.js new file mode 100644 index 0000000000..6753fbb50d --- /dev/null +++ b/server/src/helpers/widget-config/toggleswitchv2.js @@ -0,0 +1,192 @@ +export const toggleSwitchV2Config = { + name: 'ToggleSwitch', + displayName: 'Toggle Switch', + description: 'User-controlled on-off switch', + component: 'ToggleSwitchV2', + defaultSize: { + width: 6, + height: 30, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { + schema: { type: 'string' }, + }, + }, + + defaultValue: { + type: 'switch', + displayName: 'Default state', + validation: { schema: { type: 'boolean' } }, + options: [ + { displayName: 'On', value: '{{true}}' }, + { displayName: 'Off', value: '{{false}}' }, + ], + accordian: 'label', + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' } }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' } }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + events: { + onChange: { displayName: 'On change' }, + }, + styles: { + textColor: { + type: 'color', + displayName: 'Text Color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'label', + }, + borderColor: { + type: 'color', + displayName: 'Border color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + toggleSwitchColor: { + type: 'color', + displayName: 'Checked color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + uncheckedColor: { + type: 'color', + displayName: 'Unchecked color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + handleColor: { + type: 'color', + displayName: 'Handle color', + validation: { + schema: { type: 'string' }, + }, + accordian: 'switch', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' } }, + options: [ + { displayName: 'Left', value: 'left' }, + { displayName: 'Right', value: 'right' }, + ], + accordian: 'label', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } }, + accordian: 'switch', + }, + }, + exposedVariables: { + value: false, + label: 'Label', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'toggle', + displayName: 'toggle', + }, + { + handle: 'setValue', + displayName: 'Set value', + params: [{ handle: 'value', displayName: 'value' }], + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + validation: { + mandatory: { value: '{{false}}' }, + customRule: { value: null }, + }, + properties: { + label: { value: 'Label' }, + defaultValue: { value: '{{false}}' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + textColor: { value: '#1B1F24' }, + toggleSwitchColor: { value: '#4368E3' }, //keeping same key for backward comopatibility + uncheckedColor: { value: '#E4E7EB' }, + borderColor: { value: '#E4E7EB' }, + handleColor: { value: '#FFFFFF' }, + alignment: { value: 'right' }, + boxShadow: { value: '0px 0px 0px 0px #00000090' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/treeSelect.js b/server/src/helpers/widget-config/treeSelect.js new file mode 100644 index 0000000000..1d7485b47a --- /dev/null +++ b/server/src/helpers/widget-config/treeSelect.js @@ -0,0 +1,79 @@ +export const treeSelectConfig = { + name: 'TreeSelect', + displayName: 'Tree Select', + description: 'Hierarchical item selector', + defaultSize: { + width: 12, + height: 200, + }, + component: 'TreeSelect', + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { type: 'code', displayName: 'Title' }, + data: { type: 'code', displayName: 'Structure' }, + checkedData: { type: 'code', displayName: 'Checked values' }, + expandedData: { type: 'code', displayName: 'Expanded values' }, + }, + events: { + onChange: { displayName: 'On change' }, + onCheck: { displayName: 'On check' }, + onUnCheck: { displayName: 'On uncheck' }, + }, + styles: { + textColor: { type: 'color', displayName: 'Text Color' }, + checkboxColor: { type: 'color', displayName: 'Checkbox color' }, + visibility: { type: 'toggle', displayName: 'Visibility' }, + disabledState: { type: 'toggle', displayName: 'Disable' }, + }, + exposedVariables: { + checked: ['asia', 'china', 'beijing', 'shanghai', 'japan', 'india', 'delhi', 'mumbai', 'bengaluru'], + expanded: ['asia'], + checkedPathArray: [ + ['asia'], + ['asia', 'china'], + ['asia', 'china', 'beijing'], + ['asia', 'china', 'shanghai'], + ['asia', 'japan'], + ['asia', 'india'], + ['asia', 'india', 'delhi'], + ['asia', 'india', 'mumbai'], + ['asia', 'india', 'bengaluru'], + ], + checkedPathStrings: [ + 'asia', + 'asia-china', + 'asia-china-beijing', + 'asia-china-shanghai', + 'asia-japan', + 'asia-india', + 'asia-india-delhi', + 'asia-india-mumbai', + 'asia-india-bengaluru', + ], + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + label: { value: 'Countries' }, + data: { + value: + '{{[{"label":"Asia","value":"asia","children":[{"label":"China","value":"china","children":[{"label":"Beijing","value":"beijing"},{"label":"Shanghai","value":"shanghai"}]},{"label":"Japan","value":"japan"},{"label":"India","value":"india","children":[{"label":"Delhi","value":"delhi"},{"label":"Mumbai","value":"mumbai"},{"label":"Bengaluru","value":"bengaluru"}]}]},{"label":"Europe","value":"europe","children":[{"label":"France","value":"france"},{"label":"Spain","value":"spain"},{"label":"England","value":"england"}]},{"label":"Africa","value":"africa"}]}}', + }, + checkedData: { value: '{{["asia"]}}' }, + expandedData: { value: '{{["asia"]}}' }, + }, + events: [], + styles: { + textColor: { value: '' }, + checkboxColor: { value: '' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + }, + }, +}; diff --git a/server/src/helpers/widget-config/verticalDivider.js b/server/src/helpers/widget-config/verticalDivider.js new file mode 100644 index 0000000000..443526c3b8 --- /dev/null +++ b/server/src/helpers/widget-config/verticalDivider.js @@ -0,0 +1,49 @@ +export const verticalDividerConfig = { + name: 'VerticalDivider', + displayName: 'Vertical Divider', + description: 'Vertical line separator', + component: 'VerticalDivider', + defaultSize: { + width: 2, + height: 100, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: {}, + events: {}, + styles: { + dividerColor: { + type: 'color', + displayName: 'Divider color', + validation: { + schema: { type: 'string' }, + defaultValue: '#000000', + }, + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { + schema: { type: 'boolean' }, + defaultValue: true, + }, + }, + }, + exposedVariables: { + value: {}, + }, + definition: { + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: {}, + events: [], + styles: { + visibility: { value: '{{true}}' }, + dividerColor: { value: '#000000' }, + }, + }, +};