diff --git a/packages/builder/assets/banner-image.png b/packages/builder/assets/banner-image.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/builder/assets/banner-image.png differ diff --git a/packages/builder/assets/bb-logo.svg b/packages/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/packages/builder/package.json b/packages/builder/package.json index cb91f2ce42..086d22382a 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -82,4 +82,4 @@ "svelte": "^3.0.0" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} \ No newline at end of file +} diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 4326e7cb0f..5826d4f824 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -1,142 +1,54 @@ -import { pipe } from "components/common/core" -import { filter, map, reduce, toPairs } from "lodash/fp" - -const self = n => n -const join_with = delimiter => a => a.join(delimiter) -const empty_string_to_unset = s => (s.length ? s : "0") -const add_suffix_if_number = suffix => s => { - try { - if (isNaN(s) || isNaN(parseFloat(s))) return s - } catch (_) { - return s - } - return s + suffix -} - -export const make_margin = values => - pipe(values, [ - map(empty_string_to_unset), - map(add_suffix_if_number("px")), - join_with(" "), - ]) - -const css_map = { - templaterows: { - name: "grid-template-rows", - generate: self, - }, - templatecolumns: { - name: "grid-template-columns", - generate: self, - }, - align: { - name: "align-items", - generate: self, - }, - justify: { - name: "justify-content", - generate: self, - }, - direction: { - name: "flex-direction", - generate: self, - }, - gridarea: { - name: "grid-area", - generate: make_margin, - }, - gap: { - name: "grid-gap", - generate: n => `${n}px`, - }, - columnstart: { - name: "grid-column-start", - generate: self, - }, - columnend: { - name: "grid-column-end", - generate: self, - }, - rowstart: { - name: "grid-row-start", - generate: self, - }, - rowend: { - name: "grid-row-end", - generate: self, - }, - padding: { - name: "padding", - generate: make_margin, - }, - margin: { - name: "margin", - generate: make_margin, - }, - zindex: { - name: "z-index", - generate: self, - }, - height: { - name: "height", - generate: self, - }, - width: { - name: "width", - generate: self, - }, -} - -export const generate_rule = ([name, values]) => - `${css_map[name].name}: ${css_map[name].generate(values)};` - -const handle_grid = (acc, [name, value]) => { - let tmp = [] - - if (name === "row" || name === "column") { - if (value[0]) tmp.push([`${name}start`, value[0]]) - if (value[1]) tmp.push([`${name}end`, value[1]]) - return acc.concat(tmp) - } - - return acc.concat([[name, value]]) -} - -const object_to_css_string = [ - toPairs, - reduce(handle_grid, []), - filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)), - map(generate_rule), - join_with("\n"), -] - -export const generate_css = ({ layout, position }) => { - let _layout = pipe(layout, object_to_css_string) - if (_layout.length) { - _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};` - } - - return { - layout: _layout, - position: pipe(position, object_to_css_string), - } -} - -const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` - -export const generate_screen_css = component_array => { +export const generate_screen_css = component_arr => { let styles = "" - let emptyStyles = { layout: {}, position: {} } - - for (let i = 0; i < component_array.length; i += 1) { - const { _styles, _id, _children } = component_array[i] - const { layout, position } = generate_css(_styles || emptyStyles) - - styles += apply_class(_id, "pos", position) + "\n" - styles += apply_class(_id, "lay", layout) + "\n" + for (const { _styles, _id, _children, _component } of component_arr) { + let [componentName] = _component.match(/[a-z]*$/) + Object.keys(_styles).forEach(selector => { + const cssString = generate_css(_styles[selector]) + if (cssString) { + styles += apply_class(_id, componentName, cssString, selector) + } + }) if (_children && _children.length) { styles += generate_screen_css(_children) + "\n" } } return styles.trim() } + +export const generate_css = style => { + let cssString = Object.entries(style).reduce((str, [key, value]) => { + //TODO Handle arrays and objects here also + if (typeof value === "string") { + if (value) { + return (str += `${key}: ${value};\n`) + } + } else if (Array.isArray(value)) { + if (value.length > 0 && !value.every(v => v === "")) { + return (str += `${key}: ${value + .map(generate_array_styles) + .join(" ")};\n`) + } + } + }, "") + + return (cssString || "").trim() +} + +export const generate_array_styles = item => { + let safeItem = item === "" ? 0 : item + let hasPx = new RegExp("px$") + if (!hasPx.test(safeItem)) { + return `${safeItem}px` + } else { + return safeItem + } +} + +export const apply_class = (id, name = "element", styles, selector) => { + if (selector === "normal") { + return `.${name}-${id} {\n${styles}\n}` + } else { + let sel = selector === "selected" ? "::selection" : `:${selector}` + return `.${name}-${id}${sel} {\n${styles}\n}` + } +} diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index a8315918ba..f4d47064be 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -140,10 +140,11 @@ const _saveScreen = async (store, s, screen) => { return s } -const _saveScreenApi = (screen, s) => +const _saveScreenApi = (screen, s) => { api .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen) .then(() => _savePage(s)) +} const createScreen = store => (screenName, route, layoutComponentName) => { store.update(state => { @@ -278,7 +279,6 @@ const removeStylesheet = store => stylesheet => { const _savePage = async s => { const page = s.pages[s.currentPageName] - await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, { page: { componentLibraries: s.pages.componentLibraries, ...page }, uiFunctions: s.currentPageFunctions, @@ -427,6 +427,7 @@ const setComponentStyle = store => (type, name, value) => { state.currentComponentInfo._styles = {} } state.currentComponentInfo._styles[type][name] = value + state.currentPreviewItem._css = generate_screen_css([ state.currentPreviewItem.props, ]) diff --git a/packages/builder/src/builderStore/store/workflow.js b/packages/builder/src/builderStore/store/workflow.js index 6ce68e2fa9..f1eb8b93f5 100644 --- a/packages/builder/src/builderStore/store/workflow.js +++ b/packages/builder/src/builderStore/store/workflow.js @@ -36,9 +36,10 @@ const workflowActions = store => ({ select: workflow => { store.update(state => { state.selectedWorkflowId = workflow._id + state.selectedWorkflowBlock = null return state; }) - } + } }); export const getWorkflowStore = () => { diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 9cc3b3926a..8cff0e24bd 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -1,13 +1,78 @@ + +
toggleColorpicker(true)} + class="color-preview" + style={`background: ${value}`} /> + +
+
toggleColorpicker(false)} /> +
+ +
+
+ + + diff --git a/packages/builder/src/components/common/Icons/Apps.svelte b/packages/builder/src/components/common/Icons/Apps.svelte new file mode 100644 index 0000000000..270acefe8b --- /dev/null +++ b/packages/builder/src/components/common/Icons/Apps.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Bug.svelte b/packages/builder/src/components/common/Icons/Bug.svelte new file mode 100644 index 0000000000..027c4c4b70 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Bug.svelte @@ -0,0 +1,15 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Community.svelte b/packages/builder/src/components/common/Icons/Community.svelte new file mode 100644 index 0000000000..ca4b8792c9 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Community.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Contribution.svelte b/packages/builder/src/components/common/Icons/Contribution.svelte new file mode 100644 index 0000000000..faa7560167 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Contribution.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Documentation.svelte b/packages/builder/src/components/common/Icons/Documentation.svelte new file mode 100644 index 0000000000..56481ab385 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Documentation.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Email.svelte b/packages/builder/src/components/common/Icons/Email.svelte new file mode 100644 index 0000000000..8a88818192 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Email.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Hosting.svelte b/packages/builder/src/components/common/Icons/Hosting.svelte new file mode 100644 index 0000000000..9511e4fe3c --- /dev/null +++ b/packages/builder/src/components/common/Icons/Hosting.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Tutorials.svelte b/packages/builder/src/components/common/Icons/Tutorials.svelte new file mode 100644 index 0000000000..169d6a8d45 --- /dev/null +++ b/packages/builder/src/components/common/Icons/Tutorials.svelte @@ -0,0 +1,11 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Twitter.svelte b/packages/builder/src/components/common/Icons/Twitter.svelte new file mode 100644 index 0000000000..eaac6dc86b --- /dev/null +++ b/packages/builder/src/components/common/Icons/Twitter.svelte @@ -0,0 +1,16 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/Updates.svelte b/packages/builder/src/components/common/Icons/Updates.svelte new file mode 100644 index 0000000000..b25555094d --- /dev/null +++ b/packages/builder/src/components/common/Icons/Updates.svelte @@ -0,0 +1,13 @@ + + + + diff --git a/packages/builder/src/components/common/Icons/index.js b/packages/builder/src/components/common/Icons/index.js index fae247b311..c7e4da29da 100644 --- a/packages/builder/src/components/common/Icons/index.js +++ b/packages/builder/src/components/common/Icons/index.js @@ -19,3 +19,13 @@ export { default as AddIcon } from "./Add.svelte" export { default as JavaScriptIcon } from "./JavaScript.svelte" export { default as PreviewIcon } from "./Preview.svelte" export { default as SettingsIcon } from "./Settings.svelte" +export { default as AppsIcon } from "./Apps.svelte" +export { default as UpdatesIcon } from "./Updates.svelte" +export { default as HostingIcon } from "./Hosting.svelte" +export { default as DocumentationIcon } from "./Documentation.svelte" +export { default as TutorialsIcon } from "./Tutorials.svelte" +export { default as CommunityIcon } from "./Community.svelte" +export { default as ContributionIcon } from "./Contribution.svelte" +export { default as BugIcon } from "./Bug.svelte" +export { default as EmailIcon } from "./Email.svelte" +export { default as TwitterIcon } from "./Twitter.svelte" diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 50b07f41f0..a136b4e2f3 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,19 +1,22 @@ - + diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index 078edea28f..ffe6880f51 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -2,43 +2,58 @@ import { onMount } from "svelte" export let meta = [] - export let size = "" - export let values = [] + export let label = "" + export let value = [0, 0, 0, 0] export let type = "number" - export let onStyleChanged = () => {} + export let onChange = () => {} - let _values = values.map(v => v) - - $: onStyleChanged(_values) + function handleChange(val, idx) { + value.splice(idx, 1, val) + value = value + onChange(value) + } -
- {#each meta as { placeholder }, i} - (_values[i] = e.target.value)} /> - {/each} +
+
{label}
+
+ {#each meta as { placeholder }, i} + handleChange(e.target.value || 0, i)} /> + {/each} +
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte index 64812353fd..8a7fd6bb90 100644 --- a/packages/builder/src/components/nav/BackendNav.svelte +++ b/packages/builder/src/components/nav/BackendNav.svelte @@ -81,12 +81,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte index 7d678c9104..cc9e5d86a7 100644 --- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte @@ -125,12 +125,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte index 6aa23c2e31..22ba16c45d 100644 --- a/packages/builder/src/components/start/AppList.svelte +++ b/packages/builder/src/components/start/AppList.svelte @@ -1,19 +1,32 @@
-
-

Choose an Application

+
Your Web Apps
{#each apps as app} - {app.name} +
+

{app.name}

+

+ A minimalist CRM which removes the noise and allows you to focus + on your business. +

+
+
Last Edited - 25th May 2020
+ + Open Web App + +
+
{/each}
@@ -22,31 +35,68 @@ diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index a1ceac9eeb..27a4851c8d 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -16,6 +16,11 @@ return props } + const getComponentTypeName = component => { + let [componentName] = component._component.match(/[a-z]*$/) + return componentName || "element" + } + $: iframe && console.log( iframe.contentDocument.head.insertAdjacentHTML( @@ -60,7 +65,7 @@ _children: [ { _component: "@budibase/standard-components/container", - _styles: { position: {}, layout: {} }, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _id: "__screenslot__text", _code: "", className: "", @@ -69,7 +74,12 @@ _children: [ { _component: "@budibase/standard-components/text", - _styles: { position: {}, layout: {} }, + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, _id: "__screenslot__text_2", _code: "", text: "content", @@ -88,6 +98,8 @@ appRootPath: "", } + $: selectedComponentType = getComponentTypeName($store.currentComponentInfo) + $: selectedComponentId = $store.currentComponentInfo ? $store.currentComponentInfo._id : "" @@ -102,6 +114,7 @@ srcdoc={iframeTemplate({ styles, stylesheetLinks, + selectedComponentType, selectedComponentId, frontendDefinition: JSON.stringify(frontendDefinition), currentPageFunctions: $store.currentPageFunctions, diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 3c774cc4b8..dd2ca69dbb 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -1,6 +1,7 @@ export default ({ styles, stylesheetLinks, + selectedComponentType, selectedComponentId, frontendDefinition, currentPageFunctions, @@ -11,7 +12,7 @@ export default ({ diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 76d0c5605c..a255e92d90 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -1,4 +1,5 @@
-
    -
  • - -
    • -
  • - -
    • - {#if !component._component.startsWith('##')} -
  • - -
    • -
  • - -
    • - {/if} -
+ + (selectedCategory = category)} + {categories} + {selectedCategory} /> +
- - {#if current_view === 'props'} - {#if $store.currentView === 'detail'} - {#each screen_props as [k, v, id] (id)} -
- - store.setMetadataProp(k, target.value)} /> -
- {/each} - - {:else} - - {/if} - {:else if current_view === 'layout'} - - {:else if current_view === 'events'} - + {#if selectedCategory.value === 'design'} + + {:else if selectedCategory.value === 'settings'} + + {:else if selectedCategory.value === 'events'} + {/if} - -
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 169c3ab284..3ffab198e9 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -2,6 +2,7 @@ import { splitName } from "./pagesParsing/splitRootComponentName.js" import components from "./temporaryPanelStructure.js" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import CategoryTab from "./CategoryTab.svelte" import { find, sortBy, @@ -36,15 +37,12 @@
-
    - {#each categories as category} -
  • (selectedCategory = category)} - class:active={selectedCategory === category}> - {category.name} -
    • - {/each} -
+ + (selectedCategory = category)} + {selectedCategory} + {categories} /> +
selectTab(COMPONENT_SELECTION_TAB)}> - Components + Add
@@ -54,33 +54,28 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 0; + padding: 20px 20px; + border-left: solid 1px #e8e8ef; } .switcher { display: flex; - justify-content: space-between; - margin: 20px; + margin: 0px 20px 20px 0px; } .switcher > button { - text-rendering: optimizeLegibility; display: inline-block; border: none; margin: 0; padding: 0; cursor: pointer; - font-size: 14px; - text-transform: uppercase; - background: rgba(0, 0, 0, 0); - font-weight: 500; - color: var(--secondary40); + font-size: 18px; + font-weight: 700; + color: var(--ink-lighter); margin-right: 20px; - letter-spacing: 1px; } .switcher > .selected { - color: var(--secondary100); - font-weight: 600; + color: var(--ink); } diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte new file mode 100644 index 0000000000..40aac9027a --- /dev/null +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -0,0 +1,71 @@ + + +
+ +
+ +
+ +
+ {#if propertyGroupNames.length > 0} + {#each propertyGroupNames as groupName} + + {/each} + {:else} +
+ This component does not have any design properties +
+ {/if} +
+
+ + diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index c85607bd8f..2a61912173 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -25,16 +25,14 @@ export const EVENT_TYPE = "event" export let component - export let components let modalOpen = false let events = [] let selectedEvent = null $: { - const componentDefinition = components[component._component] - events = Object.keys(componentDefinition.props) - .filter(propName => componentDefinition.props[propName] === EVENT_TYPE) + events = Object.keys(component) + .filter(propName => ["onChange", "onClick", "onLoad"].includes(propName)) .map(propName => ({ name: propName, handlers: component[propName] || [], diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte new file mode 100644 index 0000000000..9e11a546e3 --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -0,0 +1,38 @@ + + +
onClick(value || text)}> + {#if useIcon} + + {:else} + {text} + {/if} +
+ + diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte new file mode 100644 index 0000000000..9081694c0c --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -0,0 +1,52 @@ + + +
+ {#each buttonProps as props} +
+ +
+ {/each} +
+ + diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte new file mode 100644 index 0000000000..4fbedde4ac --- /dev/null +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -0,0 +1,36 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte new file mode 100644 index 0000000000..82acb8b3f9 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -0,0 +1,66 @@ + + +
+
{label}
+
+ handleChange(key, val)} + onChange={val => handleChange(key, val)} + {...props} /> +
+
+ + diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte new file mode 100644 index 0000000000..6d0cf63ab0 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -0,0 +1,82 @@ + + +
+
(show = !show)}> +
+ +
+
{capitalize(name)}
+
+
+ + {#each properties as props} + onStyleChanged(styleCategory, key, value)} + props={{ ...excludeProps(props, ['control', 'label']) }} /> + {/each} +
+
+ + diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte new file mode 100644 index 0000000000..36b2ab9c75 --- /dev/null +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -0,0 +1,41 @@ + + +{#if panelDefinition.length > 0} + {#each panelDefinition as definition} + {#if propExistsOnComponentDef(definition.key)} + + {/if} + {/each} +{:else} +
+ This component does not have any settings. +
+{/if} + + diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte new file mode 100644 index 0000000000..13d7a7e2a1 --- /dev/null +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -0,0 +1,240 @@ + + +
+ +
+ +
+
+ Navigator +
+ + Pages +
+ +
+ +
+
+ +
+ + + +
+ +
+
+ + Screens + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+ + {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'} +
+ +
+ {/if} + +
+ + + + + store.deleteComponent(componentToDelete)} /> + + diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js index c37e05e023..de4de1c2a6 100644 --- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js @@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => { const props = { _id: uuid(), _component: componentDefinition._component, - _styles: { position: {}, layout: {} }, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _code: "", } @@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => { } if (!props._styles) { - props._styles = { layout: {}, position: {} } + props._styles = { normal: {}, hover: {}, active: {}, selected: {} } } return props diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js new file mode 100644 index 0000000000..07101779a5 --- /dev/null +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -0,0 +1,173 @@ +import Input from "../common/Input.svelte" +import OptionSelect from "./OptionSelect.svelte" +import InputGroup from "../common/Inputs/InputGroup.svelte" +// import Colorpicker from "../common/Colorpicker.svelte" +/* + TODO: Allow for default values for all properties +*/ + +export const layout = [ + { + label: "Direction", + key: "flex-direction", + control: OptionSelect, + initialValue: "columnReverse", + options: [ + { label: "row" }, + { label: "row-reverse", value: "rowReverse" }, + { label: "column" }, + { label: "column-reverse", value: "columnReverse" }, + ], + }, + { label: "Justify", key: "justify-content", control: Input }, + { label: "Align", key: "align-items", control: Input }, + { + label: "Wrap", + key: "flex-wrap", + control: OptionSelect, + options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], + }, +] + +const spacingMeta = [ + { placeholder: "T" }, + { placeholder: "R" }, + { placeholder: "B" }, + { placeholder: "L" }, +] +export const spacing = [ + { + label: "Padding", + key: "padding", + control: InputGroup, + meta: spacingMeta, + }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, +] + +export const size = [ + { label: "Width", key: "width", control: Input }, + { label: "Height", key: "height", control: Input }, + { label: "Min W", key: "min-width", control: Input }, + { label: "Min H", key: "min-height", control: Input }, + { label: "Max W", key: "max-width", control: Input }, + { label: "Max H", key: "max-height", control: Input }, +] + +export const position = [ + { + label: "Position", + key: "position", + control: OptionSelect, + options: [ + { label: "static" }, + { label: "relative" }, + { label: "fixed" }, + { label: "absolute" }, + { label: "sticky" }, + ], + }, +] + +export const typography = [ + { + label: "Font", + key: "font-family", + control: OptionSelect, + defaultValue: "initial", + options: [ + "initial", + "Times New Roman", + "Georgia", + "Arial", + "Arial Black", + "Comic Sans MS", + "Impact", + "Lucida Sans Unicode", + ], + styleBindingProperty: "font-family", + }, + { + label: "Weight", + key: "font-weight", + control: OptionSelect, + options: [ + { label: "normal" }, + { label: "bold" }, + { label: "bolder" }, + { label: "lighter" }, + ], + }, + { label: "size", key: "font-size", defaultValue: "", control: Input }, + { label: "Line H", key: "line-height", control: Input }, + { + label: "Color", + key: "color", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { + label: "align", + key: "text-align", + control: OptionSelect, + options: ["initial", "left", "right", "center", "justify"], + }, //custom + { label: "transform", key: "text-transform", control: Input }, //custom + { label: "style", key: "font-style", control: Input }, //custom +] + +export const background = [ + { + label: "Background", + key: "background", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { label: "Image", key: "image", control: Input }, //custom +] + +export const border = [ + { label: "Radius", key: "border-radius", control: Input }, + { label: "Width", key: "border-width", control: Input }, //custom + { + label: "Color", + key: "border-color", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { label: "Style", key: "border-style", control: Input }, +] + +export const effects = [ + { label: "Opacity", key: "opacity", control: Input }, + { label: "Rotate", key: "transform", control: Input }, //needs special control + { label: "Shadow", key: "box-shadow", control: Input }, +] + +export const transitions = [ + { label: "Property", key: "transition-property", control: Input }, + { label: "Duration", key: "transition-timing-function", control: Input }, + { label: "Ease", key: "transition-ease", control: Input }, +] + +export const all = { + layout, + spacing, + size, + position, + typography, + background, + border, + effects, + transitions, +} + +export function excludeProps(props, propsToExclude) { + const modifiedProps = {} + for (const prop in props) { + if (!propsToExclude.includes(prop)) { + modifiedProps[prop] = props[prop] + } + } + return modifiedProps +} diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index ce64b37945..ae6a658e7a 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,3 +1,9 @@ +import Input from "../common/Input.svelte" +import OptionSelect from "./OptionSelect.svelte" +import Checkbox from "../common/Checkbox.svelte" + +import { all } from "./propertyCategories.js" + export default { categories: [ { @@ -20,6 +26,31 @@ export default { icon: "ri-layout-row-fill", commonProps: {}, children: [], + properties: { + design: { ...all }, + settings: [ + { + key: "type", + label: "Type", + control: OptionSelect, + options: [ + { label: "article" }, + { label: "aside" }, + { label: "details" }, + { label: "div" }, + { label: "figure" }, + { label: "figcaption" }, + { label: "footer" }, + { label: "header" }, + { label: "main" }, + { label: "mark" }, + { label: "nav" }, + { label: "paragraph" }, + { label: "summary" }, + ], + }, + ], + }, }, { name: "Text", @@ -32,13 +63,21 @@ export default { name: "Headline", description: "A component for displaying heading text", icon: "ri-heading", - props: { - type: { - type: "options", - options: ["h1", "h2", "h3", "h4", "h5", "h6"], - default: "h1", - }, - text: "string", + properties: { + design: { ...all }, + settings: [ + { + key: "text", + label: "Text", + control: Input, + }, + { + key: "type", + label: "Type", + control: OptionSelect, + options: ["h1", "h2", "h3", "h4", "h5", "h6"], + }, + ], }, }, { @@ -46,7 +85,34 @@ export default { name: "Paragraph", description: "A component for displaying paragraph text.", icon: "ri-paragraph", - props: {}, + properties: { + design: { ...all }, + settings: [ + { + label: "Text", + key: "text", + control: Input, + }, + { + label: "Type", + key: "type", + control: OptionSelect, + options: [ + "none", + "bold", + "strong", + "italic", + "emphasis", + "mark", + "small", + "del", + "ins", + "sub", + "sup", + ], + }, + ], + }, }, ], }, @@ -62,21 +128,38 @@ export default { description: "A textfield component that allows the user to input text.", icon: "ri-edit-box-line", - props: {}, + properties: { + design: { ...all }, + settings: [ + { label: "Label", key: "label", control: Input }, + { + label: "Type", + key: "type", + control: OptionSelect, + options: ["text", "password"], + }, + ], + }, }, { _component: "@budibase/standard-components/checkbox", name: "Checkbox", description: "A selectable checkbox component", icon: "ri-checkbox-line", - props: {}, + properties: { + design: { ...all }, + settings: [{ label: "Label", key: "label", control: Input }], + }, }, { _component: "@budibase/standard-components/radiobutton", name: "Radiobutton", description: "A selectable radiobutton component", icon: "ri-radio-button-line", - props: {}, + properties: { + design: { ...all }, + settings: [{ label: "Label", key: "label", control: Input }], + }, }, { _component: "@budibase/standard-components/select", @@ -84,7 +167,10 @@ export default { description: "A select component for choosing from different options", icon: "ri-file-list-line", - props: {}, + properties: { + design: { ...all }, + settings: [], + }, }, ], }, @@ -93,24 +179,51 @@ export default { name: "Button", description: "A basic html button that is ready for styling", icon: "ri-radio-button-fill", - commonProps: {}, children: [], + properties: { + design: { + ...all, + }, + settings: [ + { label: "Text", key: "text", control: Input }, + { + label: "Disabled", + key: "disabled", + valueKey: "checked", + control: Checkbox, + }, + ], + }, }, { _component: "@budibase/standard-components/icon", name: "Icon", description: "A basic component for displaying icons", icon: "ri-sun-fill", - commonProps: {}, children: [], + properties: { + design: { ...all }, + }, }, { _component: "@budibase/standard-components/link", name: "Link", description: "A basic link component for internal and external links", icon: "ri-link", - commonProps: {}, children: [], + properties: { + design: { ...all }, + settings: [ + { label: "Text", key: "text", control: Input }, + { label: "Url", key: "url", control: Input }, + { + label: "Open New Tab", + key: "openInNewTab", + valueKey: "checked", + control: Checkbox, + }, + ], + }, }, ], }, @@ -124,17 +237,16 @@ export default { description: "A basic card component that can contain content and actions.", icon: "ri-layout-bottom-line", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, { - _component: "@budibase/standard-components/login", name: "Login", description: "A component that automatically generates a login screen for your app.", icon: "ri-login-box-fill", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, { name: "Navigation Bar", @@ -142,8 +254,8 @@ export default { description: "A component for handling the navigation within your app.", icon: "ri-navigation-fill", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, ], }, @@ -153,19 +265,17 @@ export default { children: [ { name: "Table", - _component: "@budibase/materialdesign-components/Datatable", description: "A component that generates a table from your data.", icon: "ri-archive-drawer-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { - _component: "@budibase/materialdesign-components/Form", name: "Form", description: "A component that generates a form from your data.", icon: "ri-file-edit-fill", - commonProps: {}, - component: "@budibase/materialdesign-components/Form", + properties: { design: { ...all } }, + _component: "@budibase/materialdesign-components/Form", template: { component: "@budibase/materialdesign-components/Form", description: "Form for saving a record", @@ -178,7 +288,7 @@ export default { name: "DataTable", description: "A table for displaying data from the backend.", icon: "ri-archive-drawer-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -186,7 +296,7 @@ export default { name: "DataForm", description: "Form stuff", icon: "ri-file-edit-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -194,7 +304,7 @@ export default { _component: "@budibase/standard-components/datachart", description: "Shiny chart", icon: "ri-bar-chart-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -202,7 +312,7 @@ export default { _component: "@budibase/standard-components/datalist", description: "Shiny list", icon: "ri-file-list-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -210,7 +320,7 @@ export default { _component: "@budibase/standard-components/datamap", description: "Shiny map", icon: "ri-map-pin-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, ], diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 08921f95d2..7edc1c6d40 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -1,5 +1,20 @@ :root { + + --white: #FFFFFF; + + --blue: #0055ff; + --blue-light: #F1F4FC; + --blue-dark: #2F4C9B; + + --ink: #393C44; + --ink-light: #808192; + --ink-lighter: #ADAEC4; + + --grey: #F2F2F2; + --grey-light: #FBFBFB; + --grey-dark: #E6E6E6; + --primary100: #0055ff; --primary80: rgba(0, 85, 255, 0.8); --primary60: #rgba(0, 85, 255, 0.6); @@ -9,7 +24,7 @@ --primary5: #rgba(0, 85, 255, 0.05); --primarydark: #0044cc; - --secondary100:#000333; + --secondary100:#393C44; --secondary80: rgba(0, 3, 51, 0.8); --secondary60: rgba(0, 3, 51, 0.6); --secondary40: rgba(0, 3, 51, 0.4); @@ -34,7 +49,7 @@ --deletion10: #F2545B1A; --deletiondark: #CF4046; - --white: #FFFFFF; + --darkslate: #1a202c; --slate: #d8d8d8; --lightslate: #f9f9f9; @@ -105,7 +120,7 @@ h3 { h4 { font-family: var(--fontbold); font-size: 18pt; - color: var(--secondary100); + color: var(--ink); } h5 { diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 65239c2e69..23c5aaf6c0 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -10,18 +10,15 @@ - - - \ No newline at end of file diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js index f664629c66..eb1357fde2 100644 --- a/packages/builder/src/main.js +++ b/packages/builder/src/main.js @@ -1,5 +1,4 @@ import "./global.css" -import "./flowy.css"; import "./fonts.css" import "./budibase.css" import "/assets/roboto-v20-latin-ext_latin-300" diff --git a/packages/builder/src/pages/[application]/_layout.svelte b/packages/builder/src/pages/[application]/_layout.svelte index 02f4e9884d..5de5e3379b 100644 --- a/packages/builder/src/pages/[application]/_layout.svelte +++ b/packages/builder/src/pages/[application]/_layout.svelte @@ -31,8 +31,9 @@
@@ -85,13 +86,14 @@ .top-nav { flex: 0 0 auto; - height: 48px; - background: #0d203b; + height: 60px; + background: #fff; padding: 0px 20px 0 20px; display: flex; box-sizing: border-box; justify-content: space-between; align-items: center; + border-bottom: 1px solid var(--grey); } .content > div { @@ -110,8 +112,8 @@ .topnavitem { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 10px; + color: var(--ink-lighter); + margin: 0px 00px 0px 20px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -121,19 +123,19 @@ } .topnavitem:hover { - color: rgb(255, 255, 255, 0.8); + color: var(--ink-light); font-weight: 500; } .active { - color: white; - font-weight: 600; + color: var(--ink); + font-weight: 500; } .topnavitemright { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 5px; + color: var(--ink-light); + margin: 0px 20px 0px 0px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -155,7 +157,8 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px 8px 0; + padding: 0px 10px 8px 0; + align-items: center; } .home-logo:hover { @@ -167,7 +170,7 @@ } .home-logo img { - height: 100%; + height: 40px; } span:first-letter { text-transform: capitalize; diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 153226dc5a..069e720b17 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -37,4 +37,13 @@ width: 275px; height: 100%; } + + @media only screen and (min-width: 1800px) { + .nav { + overflow: auto; + flex: 0 1 auto; + width: 300px; + height: 100%; + } + } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 67cffb9577..c480a75bfa 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -54,9 +54,7 @@
- Navigator -
- + Navigate Pages
@@ -129,18 +127,16 @@ .root { display: grid; grid-template-columns: 275px 1fr 275px; - height: 100%; width: 100%; - background: #fafafa; + background: var(--grey-light); } @media only screen and (min-width: 1800px) { .root { display: grid; grid-template-columns: 300px 1fr 300px; - height: 100%; width: 100%; - background: #fafafa; + background: var(--grey-light); } } @@ -159,20 +155,16 @@ margin: 40px; background: #fff; border-radius: 5px; - box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); } .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; - overflow-y: scroll; } .components-nav-page { font-size: 13px; - color: #000333; - text-transform: uppercase; + color: var(--ink); padding-left: 20px; margin-top: 20px; font-weight: 600; @@ -182,8 +174,7 @@ .components-nav-header { font-size: 13px; - color: #000333; - text-transform: uppercase; + color: var(--ink); margin-top: 20px; font-weight: 600; opacity: 0.4; @@ -235,13 +226,10 @@ } .navigator-title { - font-size: 14px; - color: var(--secondary100); - font-weight: 600; - text-transform: uppercase; + font-size: 18px; + color: var(--ink); + font-weight: bold; padding: 0 20px 20px 20px; - line-height: 1rem !important; - letter-spacing: 1px; } .border-line { diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js b/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js deleted file mode 100644 index 73ebcd6949..0000000000 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as BlockPanel } from "./BlockPanel.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte new file mode 100644 index 0000000000..1bfd17779a --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte @@ -0,0 +1,88 @@ + + +
+
+ Setup +
+
+ {#if workflowBlock} + + + {:else if $workflowStore.selectedWorkflowId} + +
+ +
+ +
+
+
+ + Some User Access Stuff Here +
+ + {/if} +
+
+ + diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte new file mode 100644 index 0000000000..1613a78f18 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte @@ -0,0 +1,17 @@ + + + +{#each workflowArgs as workflowArg} +
+ +
+ +
+
+{/each} diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js b/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js new file mode 100644 index 0000000000..800406ff7a --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js @@ -0,0 +1 @@ +export { default as SetupPanel } from "./SetupPanel.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte new file mode 100644 index 0000000000..b9e43e7847 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte @@ -0,0 +1,51 @@ + + +
+ +
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte new file mode 100644 index 0000000000..d444c14848 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte @@ -0,0 +1,23 @@ + + +
+ {#each blocks as block, idx} + + {#if idx !== blocks.length - 1} + + {/if} + {/each} +
+ + diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte new file mode 100644 index 0000000000..d533e01fa8 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte @@ -0,0 +1,33 @@ + + +
+
{block.heading}
+
+

{block.body}

+
+ + diff --git a/packages/builder/src/pages/[application]/workflow/flowy/apl.js b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js similarity index 100% rename from packages/builder/src/pages/[application]/workflow/flowy/apl.js rename to packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js deleted file mode 100644 index 18bd078eaa..0000000000 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as WorkflowList } from "./WorkflowList.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte similarity index 57% rename from packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte index 4f2bc3c5cc..66330f11b5 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte @@ -1,8 +1,10 @@
-
- Blocks - Props -
{#each SUB_TABS as tab}
{#each definitions as blockDefinition} -
- -
-
- -
-
-

{blockDefinition.name}

-

{blockDefinition.description}

-
-
-
+ {/each}
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte similarity index 98% rename from packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte index 4420ab4db3..510b21704e 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte @@ -16,7 +16,6 @@ name, instanceId, }) - flowy.deleteBlocks(); onClosed() } diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte similarity index 74% rename from packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte index 5e1efe6868..ed28f1b2c2 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte @@ -23,17 +23,16 @@
-
- Workflows - -
+
    {#each $workflowStore.workflows as workflow}
  • workflowStore.actions.select(workflow)}> - + {workflow.name}
    • {/each} @@ -41,16 +40,8 @@
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte new file mode 100644 index 0000000000..7de90a6e05 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte @@ -0,0 +1,61 @@ + + +
+
+ (selectedTab = 'WORKFLOWS')}> + Workflows + + {#if $workflowStore.selectedWorkflowId} + (selectedTab = 'ADD')}> + Add + + {/if} +
+ {#if selectedTab === 'WORKFLOWS'} + + {:else if selectedTab === 'ADD'} + + {/if} +
+ + diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js similarity index 62% rename from packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js index 2a90c8eeda..5920070a7a 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js @@ -1,6 +1,6 @@ const ACTIONS = { SET_STATE: { - name: "Update UI", + name: "Update UI State", icon: "", description: "Update your User Interface with some data.", type: "CLIENT", @@ -22,6 +22,24 @@ const ACTIONS = { icon: "ri-delete-bin-line", name: "Delete Record", type: "SERVER", + }, + FIND_RECORD: { + description: "Delete a record from your database.", + icon: "ri-delete-bin-line", + name: "Find Record", + type: "SERVER", + }, + CREATE_USER: { + description: "Create a new user.", + icon: "ri-user-add-fill", + name: "Create User", + type: "SERVER", + }, + SEND_EMAIL: { + description: "Send an email.", + icon: "ri-mail-open-fill", + name: "Send Email", + type: "SERVER", } }; @@ -49,11 +67,17 @@ const TRIGGERS = { }, }; -const UTILITIES = { - IFELSE: { - name: "If/Else", +const LOGIC = { + FILTER: { + name: "Filter", icon: "ri-git-branch-line", - description: "Perform different actions based on a condition", + description: "Filter any workflows which do not meet certain conditions.", + type: "CLIENT" + }, + DELAY: { + name: "Delay", + icon: "ri-git-branch-line", + description: "Delay the workflow until an amount of time has passed.", type: "CLIENT" }, } @@ -61,5 +85,5 @@ const UTILITIES = { export default { ACTIONS, TRIGGERS, - UTILITIES + LOGIC } \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js new file mode 100644 index 0000000000..dea50a6d41 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js @@ -0,0 +1,3 @@ +export { default as WorkflowPanel } from "./WorkflowPanel.svelte"; +export { default as BlockList } from "./BlockList/BlockList.svelte"; +export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte index 7b546e0397..54aa07717f 100644 --- a/packages/builder/src/pages/[application]/workflow/_layout.svelte +++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte @@ -1,20 +1,18 @@
- +
- {#if $workflowStore.selectedWorkflowId} - - {/if} +
diff --git a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte b/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte deleted file mode 100644 index 2990eb9e86..0000000000 --- a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
diff --git a/packages/builder/src/pages/[application]/workflow/index.svelte b/packages/builder/src/pages/[application]/workflow/index.svelte index 766d9efaea..817aa67552 100644 --- a/packages/builder/src/pages/[application]/workflow/index.svelte +++ b/packages/builder/src/pages/[application]/workflow/index.svelte @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/orchestrator/index.js b/packages/builder/src/pages/[application]/workflow/orchestrator/index.js deleted file mode 100644 index 5f037c07ff..0000000000 --- a/packages/builder/src/pages/[application]/workflow/orchestrator/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import api from "builderStore/api"; - -class Orchestrator { - set strategy(strategy) { - this._stategy = strategy - } - - execute(workflow) { - this._strategy.execute(workflow); - } -} - -const ClientStrategy = { - execute: function(workflow) { - const block = workflow.next; - const EXECUTE_WORKFLOW_URL = `api/${workflow.instanceId}/workflows/${workflow._id}`; - - switch (block.type) { - case "CLIENT": - // fetch the workflow code from the server, then execute it here in the client - // catch any errors - // check against the conditions in the workflow - // if everything is fine, recurse - this.execute(workflow.next); - break; - case "SERVER": - // hit the server endpoint and wait for the response - // catch any errors - // check against the conditions in the workflow - // if everything is fine, recurse - await api.post() - break; - default: - break; - } - - } -} \ No newline at end of file diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index 7c1fc5920e..cf9aa87bb3 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -2,7 +2,21 @@ import { store } from "builderStore" import AppList from "components/start/AppList.svelte" import { onMount } from "svelte" + import ActionButton from "components/common/ActionButton.svelte" import IconButton from "components/common/IconButton.svelte" + import { + SettingsIcon, + AppsIcon, + UpdatesIcon, + HostingIcon, + DocumentationIcon, + TutorialsIcon, + CommunityIcon, + ContributionIcon, + BugIcon, + EmailIcon, + TwitterIcon, + } from "components/common/Icons/" import Spinner from "components/common/Spinner.svelte" let promise = getApps() @@ -19,23 +33,275 @@ } -
- {#await promise} -
+ +
+
Build
+
+ + + +
Apps
+
+
+ + + +
Settings
+
+ + + + +
Updates
+ + + + + +
Hosting
+ +
+ +
+
Learn
+ + + + +
Documentation
+ + + + + +
Tutorials
+ + + + + +
Community
+ +
+ +
+
Contact
+ + + + +
Contribute to our product
+ + + + + +
Report bug
+ + + + + +
Email
+ + + + + +
Twitter
+ +
+
+ +
+
Welcome to Budibase
+ + {#await promise} + + {:then result} + + {:catch err} +

{err}

+ {/await} +
+
diff --git a/packages/builder/tests/generate_css.spec.js b/packages/builder/tests/generate_css.spec.js index 5fa4a94db9..b2a7fca64d 100644 --- a/packages/builder/tests/generate_css.spec.js +++ b/packages/builder/tests/generate_css.spec.js @@ -1,320 +1,55 @@ import { generate_css, - make_margin, generate_screen_css, + generate_array_styles } from "../src/builderStore/generate_css.js" -describe("make_margin", () => { - test("it should generate a valid rule", () => { - expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px") - }) - - test("empty values should output 0", () => { - expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px") - expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px") - expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px") - }) -}) - describe("generate_css", () => { - test("it should generate a valid css rule: grid-area", () => { - expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({ - layout: "", - position: "", - }) + + test("Check how partially empty arrays are handled", () => { + expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"]) }) - test("it should generate a valid css rule: grid-gap", () => { - expect(generate_css({ layout: { gap: "10" } })).toEqual({ - layout: "grid-gap: 10px;\ndisplay: grid;", - position: "", - }) + test("Check how array styles are output", () => { + expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;") }) - test("it should generate a valid css rule: column 1", () => { - expect(generate_css({ position: { column: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) + test("Check handling of an array with empty string values", () => { + expect(generate_css({ padding: ["", "", "", ""] })).toBe("") }) - test("it should generate a valid css rule: column 2", () => { - expect(generate_css({ position: { column: ["1", ""] } })).toEqual({ - position: "grid-column-start: 1;", - layout: "", - }) + test("Check handling of an empty array", () => { + expect(generate_css({ margin: [] })).toBe("") }) - test("it should generate a valid css rule: column 3", () => { - expect(generate_css({ position: { column: ["", "1"] } })).toEqual({ - position: "grid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: column 4", () => { - expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({ - position: "grid-column-start: 1;\ngrid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 1", () => { - expect(generate_css({ position: { row: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) - }) - - test("it should generate a valid css rule: row 2", () => { - expect(generate_css({ position: { row: ["1", ""] } })).toEqual({ - position: "grid-row-start: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 3", () => { - expect(generate_css({ position: { row: ["", "1"] } })).toEqual({ - position: "grid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 4", () => { - expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({ - position: "grid-row-start: 1;\ngrid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 1", () => { - expect( - generate_css({ position: { padding: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "padding: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 2", () => { - expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual( - { - position: "padding: 1px 0px 0px 1px;", - layout: "", - } - ) - }) - - test("it should generate a valid css rule: margin 1", () => { - expect( - generate_css({ position: { margin: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "margin: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: margin 2", () => { - expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({ - position: "margin: 1px 0px 0px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 1", () => { - expect(generate_css({ position: { zindex: "" } })).toEqual({ - position: "", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 2", () => { - expect(generate_css({ position: { zindex: "1" } })).toEqual({ - position: "z-index: 1;", - layout: "", - }) + test("Check handling of valid font property", () => { + expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;") }) }) + describe("generate_screen_css", () => { - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - }, - ] - - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } } + + test("Test generation of normal css styles", () => { + expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}") }) - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 5, - _children: [], - }, - ], - }, - ], - }, - ], - }, - ], - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 6, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 7, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 8, - }, - ] + const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } } - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -} -.pos-5 { -margin: 1px 1px 1px 1px; -} -.lay-5 { - -} -.pos-6 { -margin: 1px 1px 1px 1px; -} -.lay-6 { - -} -.pos-7 { -margin: 1px 1px 1px 1px; -} -.lay-7 { - -} -.pos-8 { -margin: 1px 1px 1px 1px; -} -.lay-8 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + test("Test generation of hover css styles", () => { + expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}") }) -}) + + const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } } + + test("Test generation of selection css styles", () => { + expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}") + }) + + const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } } + + test.only("Testing handling of empty component styles", () => { + expect(generate_screen_css([emptyComponent])).toBe("") + }) +}) \ No newline at end of file diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json index 4f25934bba..af75ddec68 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json index 298d73e8b6..3452a6df55 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json @@ -9,8 +9,10 @@ "_id": 1, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json index 89a23a78e5..6f02b78c62 100644 --- a/packages/cli/src/commands/new/page.template.json +++ b/packages/cli/src/commands/new/page.template.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/client/src/api/workflow/index.js b/packages/client/src/api/workflow/index.js index 7af5fc39dd..f9aa3403b3 100644 --- a/packages/client/src/api/workflow/index.js +++ b/packages/client/src/api/workflow/index.js @@ -2,7 +2,6 @@ import Orchestrator, { clientStrategy } from "./orchestrator"; export const triggerWorkflow = api => ({ workflow }) => { - console.log(workflow); const workflowOrchestrator = new Orchestrator( api, "inst_60dd510_700f7dc06735403e81d5af91072d7241" diff --git a/packages/client/src/api/workflow/orchestrator.js b/packages/client/src/api/workflow/orchestrator.js index 36c460876f..46b12f89a2 100644 --- a/packages/client/src/api/workflow/orchestrator.js +++ b/packages/client/src/api/workflow/orchestrator.js @@ -31,7 +31,7 @@ export default class Orchestrator { // Execute a workflow from a running budibase app export const clientStrategy = { context: {}, - bindContextArgs: function(args) { + bindContextArgs: function(args, api) { const mappedArgs = { ...args }; console.log("original args", args) @@ -50,12 +50,16 @@ export const clientStrategy = { // if the value is bound to state if (argValue.startsWith("$state")) { - const path = argValue.match("$context.", ""); - // pass in the value from context - mappedArgs[arg] = get(path, this.context); + const path = argValue.replace("$state.", ""); + // pass in the value from state + // TODO: not working + mappedArgs[arg] = api.getState(path); } } } + + console.log(mappedArgs); + return Object.values(mappedArgs); }, run: async function({ workflow, api, instanceId }) { @@ -85,7 +89,7 @@ export const clientStrategy = { url: EXECUTE_WORKFLOW_URL, body: { action: block.actionId, - args: block.args + args: this.bindContextArgs(block.args, api) } }); diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js index ebb5dd34da..22dff2b2a8 100644 --- a/packages/client/src/render/attachChildren.js +++ b/packages/client/src/render/attachChildren.js @@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => { } } - htmlElement.classList.add(`lay-${treeNode.props._id}`) + // htmlElement.classList.add(`lay-${treeNode.props._id}`) const childNodes = [] for (let childProps of treeNode.props._children) { diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js index 916ac82960..a7c3e6ddcf 100644 --- a/packages/client/src/render/prepareRenderComponent.js +++ b/packages/client/src/render/prepareRenderComponent.js @@ -35,8 +35,9 @@ export const prepareRenderComponent = ({ thisNode.rootElement = htmlElement.children[htmlElement.children.length - 1] + let [componentName] = props._component.match(/[a-z]*$/) if (props._id && thisNode.rootElement) { - thisNode.rootElement.classList.add(`pos-${props._id}`) + thisNode.rootElement.classList.add(`${componentName}-${props._id}`) } } } diff --git a/packages/server/builder/assets/10-1.png b/packages/server/builder/assets/10-1.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/server/builder/assets/10-1.png differ diff --git a/packages/server/builder/assets/banner-image.png b/packages/server/builder/assets/banner-image.png new file mode 100644 index 0000000000..3531495668 Binary files /dev/null and b/packages/server/builder/assets/banner-image.png differ diff --git a/packages/server/builder/assets/bb-logo.svg b/packages/server/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/server/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/packages/server/builder/assets/space.jpeg b/packages/server/builder/assets/space.jpeg new file mode 100644 index 0000000000..427aeb13c7 Binary files /dev/null and b/packages/server/builder/assets/space.jpeg differ diff --git a/packages/server/builder/assets/space.jpg b/packages/server/builder/assets/space.jpg new file mode 100644 index 0000000000..6fbde46033 Binary files /dev/null and b/packages/server/builder/assets/space.jpg differ diff --git a/packages/server/package.json b/packages/server/package.json index 446679c5f0..6e2d095655 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -44,6 +44,7 @@ "@budibase/client": "^0.0.32", "@budibase/core": "^0.0.32", "@koa/router": "^8.0.0", + "@sendgrid/mail": "^7.1.1", "ajv": "^6.12.2", "bcryptjs": "^2.4.3", "dotenv": "^8.2.0", diff --git a/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js new file mode 100644 index 0000000000..072d61932f --- /dev/null +++ b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js @@ -0,0 +1,27 @@ +const sgMail = require('@sendgrid/mail'); + +sgMail.setApiKey(process.env.SENDGRID_API_KEY); + +module.exports = async function sendEmail(args) { + + const msg = { + to: args.to, + from: args.from, + subject: args.subject, + text: args.text + }; + + try { + await sgMail.send(msg); + return { + success: true, + err + } + } catch (err) { + return { + success: false, + err + } + } + +} \ No newline at end of file diff --git a/packages/server/src/api/controllers/workflow/index.js b/packages/server/src/api/controllers/workflow/index.js index 8d9c7bc1e7..ee7c536519 100644 --- a/packages/server/src/api/controllers/workflow/index.js +++ b/packages/server/src/api/controllers/workflow/index.js @@ -65,7 +65,7 @@ exports.update = async function(ctx) { exports.fetch = async function(ctx) { const db = new CouchDB(ctx.params.instanceId) const response = await db.query(`database/by_type`, { - type: "workflow", + key: ["workflow"], include_docs: true, }) ctx.body = response.rows.map(row => row.doc) diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock index 8a64a7cb8a..763e28134e 100644 --- a/packages/server/yarn.lock +++ b/packages/server/yarn.lock @@ -194,6 +194,20 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@budibase/client@^0.0.32": + version "0.0.32" + resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496" + integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A== + dependencies: + "@nx-js/compiler-util" "^2.0.0" + bcryptjs "^2.4.3" + deep-equal "^2.0.1" + lodash "^4.17.15" + lunr "^2.3.5" + regexparam "^1.3.0" + shortid "^2.2.8" + svelte "^3.9.2" + "@budibase/core@^0.0.32": version "0.0.32" resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa" @@ -409,6 +423,30 @@ resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297" integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ== +"@sendgrid/client@^7.1.1": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f" + integrity sha512-V2BmOO81wHNmbTDwTJ07Olb9dWrj1G19xK4crwds68b9R0w05aOWDddZTvpn9mZnHwIJYqcZcBJuhdHDejuSHg== + dependencies: + "@sendgrid/helpers" "^7.0.1" + axios "^0.19.2" + +"@sendgrid/helpers@^7.0.1": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@sendgrid/helpers/-/helpers-7.0.1.tgz#b97debc793ed3f9f56102e12c2a6d2bbbf0ffb78" + integrity sha512-i/zsissq1upgdywtuJKysaplJJZC24GdtEKiJC1IRlXvBHzIjH4eU+rqUFO8h+hGji3UMURGgMFuLUXTUYvZ9w== + dependencies: + chalk "^2.0.1" + deepmerge "^4.2.2" + +"@sendgrid/mail@^7.1.1": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@sendgrid/mail/-/mail-7.1.1.tgz#26191594722d5961de1b61cd9c48fa9a69fd197b" + integrity sha512-VXdJ9J6vBNMw+wMIGFRvms6EmV6pvoRHMWoLJGweHlsZDnvmK3rWUnnNaS3OdDQ3A8B5bMv2WKsEnHsMZ6iDUg== + dependencies: + "@sendgrid/client" "^7.1.1" + "@sendgrid/helpers" "^7.0.1" + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -825,6 +863,11 @@ array-equal@^1.0.0: resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM= +array-filter@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83" + integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM= + array-unique@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" @@ -897,6 +940,13 @@ atomic-sleep@^1.0.0: resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b" integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ== +available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" + integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ== + dependencies: + array-filter "^1.0.0" + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -907,6 +957,13 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e" integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug== +axios@^0.19.2: + version "0.19.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27" + integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA== + dependencies: + follow-redirects "1.5.10" + babel-jest@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54" @@ -1567,6 +1624,13 @@ dateformat@^3.0.3: resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== +debug@=3.1.0, debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -1588,13 +1652,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: dependencies: ms "^2.1.1" -debug@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== - dependencies: - ms "2.0.0" - decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -1612,6 +1669,26 @@ decompress-response@^3.3.0: dependencies: mimic-response "^1.0.0" +deep-equal@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0" + integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA== + dependencies: + es-abstract "^1.17.5" + es-get-iterator "^1.1.0" + is-arguments "^1.0.4" + is-date-object "^1.0.2" + is-regex "^1.0.5" + isarray "^2.0.5" + object-is "^1.1.2" + object-keys "^1.1.1" + object.assign "^4.1.0" + regexp.prototype.flags "^1.3.0" + side-channel "^1.0.2" + which-boxed-primitive "^1.0.1" + which-collection "^1.0.1" + which-typed-array "^1.1.2" + deep-equal@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -1627,6 +1704,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + defer-to-connect@^1.0.1: version "1.1.3" resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591" @@ -1965,7 +2047,7 @@ error-inject@^1.0.0: resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37" integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc= -es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: +es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5: version "1.17.5" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9" integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg== @@ -1982,6 +2064,19 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" +es-get-iterator@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8" + integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ== + dependencies: + es-abstract "^1.17.4" + has-symbols "^1.0.1" + is-arguments "^1.0.4" + is-map "^2.0.1" + is-set "^2.0.1" + is-string "^1.0.5" + isarray "^2.0.5" + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -2444,6 +2539,13 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -2967,11 +3069,21 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" +is-arguments@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3" + integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA== + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-bigint@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4" + integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g== + is-binary-path@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" @@ -2979,6 +3091,11 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" +is-boolean-object@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e" + integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ== + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -3015,7 +3132,7 @@ is-data-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-date-object@^1.0.1: +is-date-object@^1.0.1, is-date-object@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== @@ -3090,11 +3207,21 @@ is-installed-globally@^0.3.1: global-dirs "^2.0.1" is-path-inside "^3.0.1" +is-map@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1" + integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw== + is-npm@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d" integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig== +is-number-object@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197" + integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw== + is-number@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195" @@ -3131,11 +3258,21 @@ is-regex@^1.0.5: dependencies: has "^1.0.3" +is-set@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43" + integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA== + is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= +is-string@^1.0.4, is-string@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6" + integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ== + is-symbol@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" @@ -3152,11 +3289,31 @@ is-type-of@^1.0.0: is-class-hotfix "~0.0.6" isstream "~0.1.2" +is-typed-array@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d" + integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ== + dependencies: + available-typed-arrays "^1.0.0" + es-abstract "^1.17.4" + foreach "^2.0.5" + has-symbols "^1.0.1" + is-typedarray@^1.0.0, is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-weakmap@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" + integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== + +is-weakset@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83" + integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -3182,6 +3339,11 @@ isarray@1.0.0, isarray@~1.0.0: resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= +isarray@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + isbinaryfile@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b" @@ -4589,6 +4751,14 @@ object-inspect@^1.7.0: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67" integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw== +object-is@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6" + integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.5" + object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" @@ -5310,6 +5480,19 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" +regexp.prototype.flags@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75" + integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.0-next.1" + +regexparam@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f" + integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g== + regexpp@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f" @@ -5638,6 +5821,14 @@ shortid@^2.2.8: dependencies: nanoid "^2.1.0" +side-channel@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947" + integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA== + dependencies: + es-abstract "^1.17.0-next.1" + object-inspect "^1.7.0" + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" @@ -6046,6 +6237,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svelte@^3.9.2: + version "3.22.3" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b" + integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw== + symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -6526,11 +6722,44 @@ whatwg-url@^7.0.0: tr46 "^1.0.1" webidl-conversions "^4.0.2" +which-boxed-primitive@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1" + integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ== + dependencies: + is-bigint "^1.0.0" + is-boolean-object "^1.0.0" + is-number-object "^1.0.3" + is-string "^1.0.4" + is-symbol "^1.0.2" + +which-collection@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" + integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== + dependencies: + is-map "^2.0.1" + is-set "^2.0.1" + is-weakmap "^2.0.1" + is-weakset "^2.0.1" + which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= +which-typed-array@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2" + integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ== + dependencies: + available-typed-arrays "^1.0.2" + es-abstract "^1.17.5" + foreach "^2.0.5" + function-bind "^1.1.1" + has-symbols "^1.0.1" + is-typed-array "^1.1.3" + which@^1.2.9, which@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 4705f2b45b..f9c800489e 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -12,10 +12,10 @@ "props": { "logoUrl": "string", "title": "string", - "backgroundColor": "colour", - "color": "colour", + "backgroundColor": "string", + "color": "string", "borderWidth": "string", - "borderColor": "colour", + "borderColor": "string", "borderStyle": "string" } }, @@ -23,35 +23,10 @@ "name": "Button", "description": "an html