From 078d8c07bb3333ce8f974ee81669bd67b836f9aa Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 7 Jan 2021 12:15:55 +0000 Subject: [PATCH 01/59] Fix: Text overlap in data table#961 fix: Text overlap in data table #961 This fix clamps the text to one line and hides the overflow with an ellipsis. --- .../backend/DataTable/TableHeader/TableHeader.svelte | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte index 9588b34dd7..f6ef036f40 100644 --- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte +++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte @@ -103,6 +103,15 @@ opacity: 1; } + .column-header-name { + white-space: normal !important; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; + } + .sort-icon { position: relative; top: 2px; From 9b035df33e2a423ba58e5ff2c47b531ab60c10f8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 12 Jan 2021 20:00:35 +0000 Subject: [PATCH 02/59] WIP component management and definition refactor --- packages/builder/src/builderStore/index.js | 29 +- .../builderStore/loadComponentLibraries.js | 5 +- .../src/builderStore/store/frontend.js | 369 ++++++++++-------- .../store/screenTemplates/index.js | 19 +- .../builder/src/builderStore/storeUtils.js | 130 +++--- .../AppPreview/CurrentItemPreview.svelte | 2 +- .../ComponentDropdownMenu.svelte | 22 +- .../ComponentTree.svelte | 14 +- .../ComponentNavigationTree/dragDropStore.js | 38 +- .../ComponentPropertiesPanel.svelte | 6 +- .../ComponentSelectionList.svelte | 61 ++- .../userInterface/SettingsView.svelte | 46 +-- .../userInterface/assetParsing/createProps.js | 97 ----- .../userInterface/componentStructure.json | 11 + .../userInterface/temporaryPanelStructure.js | 130 +----- .../client/src/components/Component.svelte | 5 +- .../server/src/api/controllers/component.js | 7 +- packages/server/src/constants/layouts.js | 6 +- packages/standard-components/README.md | 62 +-- packages/standard-components/components.json | 63 +-- packages/standard-components/manifest.json | 79 ++++ packages/standard-components/package.json | 5 + ...otPlaceholder.svelte => ScreenSlot.svelte} | 5 + packages/standard-components/src/index.js | 51 +-- packages/standard-components/yarn.lock | 27 ++ 25 files changed, 589 insertions(+), 700 deletions(-) delete mode 100644 packages/builder/src/components/userInterface/assetParsing/createProps.js create mode 100644 packages/builder/src/components/userInterface/componentStructure.json create mode 100644 packages/standard-components/manifest.json rename packages/standard-components/src/{ScreenSlotPlaceholder.svelte => ScreenSlot.svelte} (76%) diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index cf668670bb..a22678fa92 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -5,7 +5,7 @@ import { getThemeStore } from "./store/theme" import { derived, writable } from "svelte/store" import analytics from "analytics" import { FrontendTypes, LAYOUT_NAMES } from "../constants" -import { makePropsSafe } from "components/userInterface/assetParsing/createProps" +import { findComponent } from "./storeUtils" export const store = getFrontendStore() export const backendUiStore = getBackendUiStore() @@ -25,31 +25,10 @@ export const currentAsset = derived(store, $store => { export const selectedComponent = derived( [store, currentAsset], ([$store, $currentAsset]) => { - if (!$currentAsset || !$store.selectedComponentId) return null - - function traverse(node, callback) { - if (node._id === $store.selectedComponentId) return callback(node) - - if (node._children) { - node._children.forEach(child => traverse(child, callback)) - } - - if (node.props) { - traverse(node.props, callback) - } + if (!$currentAsset || !$store.selectedComponentId) { + return null } - - let component - traverse($currentAsset, found => { - const componentIdentifier = found._component ?? found.props._component - const componentDef = componentIdentifier.startsWith("##") - ? found - : $store.components[componentIdentifier] - - component = makePropsSafe(componentDef, found) - }) - - return component + return findComponent($currentAsset.props, $store.selectedComponentId) } ) diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js index 9d534f86fe..e6516f7d79 100644 --- a/packages/builder/src/builderStore/loadComponentLibraries.js +++ b/packages/builder/src/builderStore/loadComponentLibraries.js @@ -21,12 +21,9 @@ export const fetchComponentLibDefinitions = async appId => { */ export const fetchComponentLibModules = async application => { const allLibraries = {} - for (let libraryName of application.componentLibraries) { const LIBRARY_URL = `/${application._id}/componentlibrary?library=${libraryName}` - const libraryModule = await import(LIBRARY_URL) - allLibraries[libraryName] = libraryModule + allLibraries[libraryName] = await import(LIBRARY_URL) } - return allLibraries } diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index acb5929b3c..6369e0e41a 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -1,9 +1,5 @@ import { get, writable } from "svelte/store" import { cloneDeep } from "lodash/fp" -import { - createProps, - getBuiltin, -} from "components/userInterface/assetParsing/createProps" import { allScreens, backendUiStore, @@ -15,14 +11,13 @@ import { import { fetchComponentLibDefinitions } from "../loadComponentLibraries" import api from "../api" import { FrontendTypes } from "../../constants" -import getNewComponentName from "../getNewComponentName" import analytics from "analytics" import { - findChildComponentType, - generateNewIdsForComponent, - getComponentDefinition, - findParent, + findComponentType, + findComponentParent, + findComponentPath, } from "../storeUtils" +import { uuid } from "../uuid" const INITIAL_FRONTEND_STATE = { apps: [], @@ -48,14 +43,7 @@ export const getFrontendStore = () => { store.actions = { initialise: async pkg => { const { layouts, screens, application } = pkg - - store.update(state => { - state.appId = application._id - return state - }) - const components = await fetchComponentLibDefinitions(pkg.application._id) - store.update(state => ({ ...state, libraries: pkg.application.componentLibraries, @@ -66,17 +54,14 @@ export const getFrontendStore = () => { layouts, screens, hasAppPackage: true, - builtins: [getBuiltin("##builtin/screenslot")], appInstance: pkg.application.instance, })) - await backendUiStore.actions.database.select(pkg.application.instance) }, routing: { fetch: async () => { const response = await api.get("/api/routing") const json = await response.json() - store.update(state => { state.routes = json.routes return state @@ -245,122 +230,194 @@ export const getFrontendStore = () => { return state }) }, - create: (componentToAdd, presetProps) => { - const selectedAsset = get(currentAsset) + getDefinition: componentName => { + if (!componentName) { + return null + } + const name = componentName.startsWith("@budibase") + ? componentName + : `@budibase/standard-components/${componentName}` + return get(store).components[name] + }, + createInstance: (componentName, presetProps) => { + const definition = store.actions.components.getDefinition(componentName) + if (!definition) { + return null + } - store.update(state => { - function findSlot(component_array) { - if (!component_array) { - return false + // Generate default props + let props = { ...presetProps } + if (definition.settings) { + definition.settings.forEach(setting => { + if (setting.defaultValue !== undefined) { + props[setting.key] = setting.defaultValue } - for (let component of component_array) { - if (component._component === "##builtin/screenslot") { - return true - } - - if (component._children) findSlot(component) - } - return false - } - - if ( - componentToAdd.startsWith("##") && - findSlot(selectedAsset?.props._children) - ) { - return state - } - - const component = getComponentDefinition(state, componentToAdd) - - const instanceId = get(backendUiStore).selectedDatabase._id - const instanceName = getNewComponentName(component, state) - - const newComponent = createProps(component, { - ...presetProps, - _instanceId: instanceId, - _instanceName: instanceName, }) + } - const selected = get(selectedComponent) + // Add any extra properties the component needs + let extras = {} + if (definition.hasChildren) { + extras._children = [] + } - const currentComponentDefinition = - state.components[selected._component] + return { + _id: uuid(), + _component: definition.component, + _styles: { normal: {}, hover: {}, active: {} }, + _instanceName: `New ${definition.component.split("/")[2]}`, + ...cloneDeep(props), + ...extras, + } + }, + create: (componentName, presetProps) => { + // Create new component + const componentInstance = store.actions.components.createInstance( + componentName, + presetProps + ) + if (!componentInstance) { + return + } - const allowsChildren = currentComponentDefinition.children - - // Determine where to put the new component. - let targetParent - if (allowsChildren) { - // Child of the selected component - targetParent = selected + // Find parent node to attach this component to + let parentComponent + const selected = get(selectedComponent) + const asset = get(currentAsset) + if (!asset) { + return + } + if (selected) { + // Use current screen or layout as parent if no component is selected + const definition = store.actions.components.getDefinition( + selected._component + ) + if (definition?.hasChildren) { + // Use selected component if it allows children + parentComponent = selected } else { - // Sibling of selected component - targetParent = findParent(selectedAsset.props, selected) + // Otherwise we need to use the parent of this component + parentComponent = findComponentParent(asset.props, selected._id) } + } else { + // Use screen or layout if no component is selected + parentComponent = asset.props + } - // Don't continue if there's no parent - if (!targetParent) return state - - // Push the new component - targetParent._children.push(newComponent.props) - - store.actions.preview.saveSelected() + // Attach component + if (!parentComponent) { + return + } + if (!parentComponent._children) { + parentComponent._children = [] + } + parentComponent._children.push(componentInstance) + // Save components and update UI + store.actions.preview.saveSelected() + store.update(state => { state.currentView = "component" - state.selectedComponentId = newComponent.props._id - - analytics.captureEvent("Added Component", { - name: newComponent.props._component, - }) + state.selectedComponentId = componentInstance._id return state }) + + // Log event + analytics.captureEvent("Added Component", { + name: componentInstance._component, + }) + + return componentInstance + }, + delete: component => { + if (!component) { + return + } + const asset = get(currentAsset) + if (!asset) { + return + } + const parent = findComponentParent(asset.props, component._id) + if (parent) { + parent._children = parent._children.filter( + child => child._id !== component._id + ) + store.actions.components.select(parent) + } + store.actions.preview.saveSelected() }, copy: (component, cut = false) => { const selectedAsset = get(currentAsset) + if (!selectedAsset) { + return null + } + + // Update store with copied component store.update(state => { state.componentToPaste = cloneDeep(component) state.componentToPaste.isCut = cut - if (cut) { - const parent = findParent(selectedAsset.props, component._id) + return state + }) + + // Remove the component from its parent if we're cutting + if (cut) { + const parent = findComponentParent(selectedAsset.props, component._id) + if (parent) { parent._children = parent._children.filter( child => child._id !== component._id ) store.actions.components.select(parent) } - - return state - }) + } }, paste: async (targetComponent, mode) => { - const selectedAsset = get(currentAsset) let promises = [] store.update(state => { - if (!state.componentToPaste) return state - - const componentToPaste = cloneDeep(state.componentToPaste) - // retain the same ids as things may be referencing this component - if (componentToPaste.isCut) { - // in case we paste a second time - state.componentToPaste.isCut = false - } else { - generateNewIdsForComponent(componentToPaste, state) - } - delete componentToPaste.isCut - - if (mode === "inside") { - targetComponent._children.push(componentToPaste) + // Stop if we have nothing to paste + if (!state.componentToPaste) { return state } - const parent = findParent(selectedAsset.props, targetComponent) + // Clone the component to paste + // Retain the same ID if cutting as things may be referencing this component + const cut = state.componentToPaste.isCut + delete state.componentToPaste.isCut + let componentToPaste = cloneDeep(state.componentToPaste) + if (cut) { + state.componentToPaste = null + } else { + componentToPaste._id = uuid() + } - const targetIndex = parent._children.indexOf(targetComponent) - const index = mode === "above" ? targetIndex : targetIndex + 1 - parent._children.splice(index, 0, cloneDeep(componentToPaste)) + if (mode === "inside") { + // Paste inside target component if chosen + if (!targetComponent._children) { + targetComponent._children = [] + } + targetComponent._children.push(componentToPaste) + } else { + // Otherwise find the parent so we can paste in the correct order + // in the parents child components + const selectedAsset = get(currentAsset) + if (!selectedAsset) { + return state + } + const parent = findComponentParent( + selectedAsset.props, + targetComponent._id + ) + if (!parent) { + return state + } + // Insert the component in the correct position + const targetIndex = parent._children.indexOf(targetComponent) + const index = mode === "above" ? targetIndex : targetIndex + 1 + parent._children.splice(index, 0, cloneDeep(componentToPaste)) + } + + // Save and select the new component promises.push(store.actions.preview.saveSelected()) store.actions.components.select(componentToPaste) - return state }) await Promise.all(promises) @@ -385,90 +442,68 @@ export const getFrontendStore = () => { await store.actions.preview.saveSelected() }, updateProp: (name, value) => { + let component = get(selectedComponent) + if (!name || !component) { + return + } + component[name] = value store.update(state => { - let current_component = get(selectedComponent) - current_component[name] = value - - state.selectedComponentId = current_component._id - store.actions.preview.saveSelected() + state.selectedComponentId = component._id return state }) + store.actions.preview.saveSelected() }, findRoute: component => { - // Gets all the components to needed to construct a path. const selectedAsset = get(currentAsset) - let pathComponents = [] - let parent = component - let root = false - while (!root) { - parent = findParent(selectedAsset.props, parent) - if (!parent) { - root = true - } else { - pathComponents.push(parent) - } + if (!component || !selectedAsset) { + return "/" } - // Remove root entry since it's the screen or layout. - // Reverse array since we need the correct order of the IDs - const reversedComponents = pathComponents.reverse().slice(1) + // Get the path to this component + const path = findComponentPath(selectedAsset.props, component._id) || [] - // Add component - const allComponents = [...reversedComponents, component] - - // Map IDs - const IdList = allComponents.map(c => c._id) - - // Construct ID Path: - return IdList.join("/") + // Remove root entry since it's the screen or layout + return path.slice(1).join("/") }, links: { save: async (url, title) => { - let promises = [] const layout = get(mainLayout) - store.update(state => { - // Try to extract a nav component from the master layout - const nav = findChildComponentType( - layout, - "@budibase/standard-components/navigation" - ) - if (nav) { - let newLink + if (!layout) { + return + } - // Clone an existing link if one exists - if (nav._children && nav._children.length) { - // Clone existing link style - newLink = cloneDeep(nav._children[0]) + // Find a nav bar in the main layout + const nav = findComponentType( + layout, + "@budibase/standard-components/navigation" + ) + if (!nav) { + return + } - // Manipulate IDs to ensure uniqueness - generateNewIdsForComponent(newLink, state, false) + let newLink + if (nav._children && nav._children.length) { + // Clone an existing link if one exists + newLink = cloneDeep(nav._children[0]) - // Set our new props - newLink._instanceName = `${title} Link` - newLink.url = url - newLink.text = title - } else { - // Otherwise create vanilla new link - const component = getComponentDefinition( - state, - "@budibase/standard-components/link" - ) - const instanceId = get(backendUiStore).selectedDatabase._id - newLink = createProps(component, { - url, - text: title, - _instanceName: `${title} Link`, - _instanceId: instanceId, - }).props - } - - // Save layout - nav._children = [...nav._children, newLink] - promises.push(store.actions.layouts.save(layout)) + // Set our new props + newLink._id = uuid() + newLink._instanceName = `${title} Link` + newLink.url = url + newLink.text = title + } else { + // Otherwise create vanilla new link + newLink = { + ...store.actions.components.createInstance("link"), + url, + text: title, + _instanceName: `${title} Link`, } - return state - }) - await Promise.all(promises) + } + + // Save layout + nav._children = [...nav._children, newLink] + await store.actions.layouts.save(layout) }, }, }, diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js index ddf48cbe44..9258feb57e 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/index.js +++ b/packages/builder/src/builderStore/store/screenTemplates/index.js @@ -4,7 +4,6 @@ import rowListScreen from "./rowListScreen" import emptyNewRowScreen from "./emptyNewRowScreen" import createFromScratchScreen from "./createFromScratchScreen" import emptyRowDetailScreen from "./emptyRowDetailScreen" -import { generateNewIdsForComponent } from "../../storeUtils" import { uuid } from "builderStore/uuid" const allTemplates = tables => [ @@ -16,13 +15,21 @@ const allTemplates = tables => [ emptyRowDetailScreen, ] -// allows us to apply common behaviour to all create() functions +// Recurses through a component tree and generates new unique ID's +const makeUniqueIds = component => { + if (!component) { + return + } + component._id = uuid() + if (component._children) { + component._children.forEach(makeUniqueIds) + } +} + +// Allows us to apply common behaviour to all create() functions const createTemplateOverride = (frontendState, create) => () => { const screen = create() - for (let component of screen.props._children) { - generateNewIdsForComponent(component, frontendState, false) - } - screen.props._id = uuid() + makeUniqueIds(screen.props) screen.name = screen.props._id screen.routing.route = screen.routing.route.toLowerCase() return screen diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index 4ee2dd7ccc..0d13522711 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -1,80 +1,82 @@ -import { getBuiltin } from "components/userInterface/assetParsing/createProps" -import { uuid } from "./uuid" -import getNewComponentName from "./getNewComponentName" +/** + * Recursively searches for a specific component ID + */ +export const findComponent = (rootComponent, id) => { + return searchComponentTree(rootComponent, comp => comp._id === id) +} /** - * Find the parent component of the passed in child. - * @param {Object} rootProps - props to search for the parent in - * @param {String|Object} child - id of the child or the child itself to find the parent of + * Recursively searches for a specific component type */ -export const findParent = (rootProps, child) => { - let parent - walkProps(rootProps, (props, breakWalk) => { - if ( - props._children && - (props._children.includes(child) || - props._children.some(c => c._id === child)) - ) { - parent = props - breakWalk() - } - }) - return parent +export const findComponentType = (rootComponent, type) => { + return searchComponentTree(rootComponent, comp => comp._component === type) } -export const walkProps = (props, action, cancelToken = null) => { - cancelToken = cancelToken || { cancelled: false } - action(props, () => { - cancelToken.cancelled = true - }) - - if (props._children) { - for (let child of props._children) { - if (cancelToken.cancelled) return - walkProps(child, action, cancelToken) - } - } -} - -export const generateNewIdsForComponent = ( - component, - state, - changeName = true -) => - walkProps(component, prop => { - prop._id = uuid() - if (changeName) prop._instanceName = getNewComponentName(prop, state) - }) - -export const getComponentDefinition = (state, name) => - name.startsWith("##") ? getBuiltin(name) : state.components[name] - -export const findChildComponentType = (node, typeToFind) => { - // Stop recursion if invalid props - if (!node || !typeToFind) { +/** + * Recursively searches for the parent component of a specific component ID + */ +export const findComponentParent = (rootComponent, id, parentComponent) => { + if (!rootComponent || !id) { return null } - - // Stop recursion if this element matches - if (node._component === typeToFind) { - return node + if (rootComponent._id === id) { + return parentComponent } - - // Otherwise check if any children match - // Stop recursion if no valid children to process - const children = node._children || (node.props && node.props._children) - if (!children || !children.length) { + if (!rootComponent._children) { return null } - - // Recurse and check each child component - for (let child of children) { - const childResult = findChildComponentType(child, typeToFind) + for (const child of rootComponent._children) { + const childResult = findComponentParent(child, id, rootComponent) + if (childResult) { + return childResult + } + } + return null +} + +/** + * Recursively searches for a specific component ID and records the component + * path to this component + */ +export const findComponentPath = (rootComponent, id, path = []) => { + if (!rootComponent || !id) { + return null + } + if (rootComponent._id === id) { + return [...path, id] + } + if (!rootComponent._children) { + return null + } + for (const child of rootComponent._children) { + const newPath = [...path, rootComponent._id] + const childResult = findComponentPath(child, id, newPath) + if (childResult != null) { + return childResult + } + } + return null +} + +/** + * Recurses through a component tree evaluating a matching function against + * components until a match is found + */ +const searchComponentTree = (rootComponent, matchComponent) => { + if (!rootComponent || !matchComponent) { + return null + } + if (matchComponent(rootComponent)) { + return rootComponent + } + if (!rootComponent._children) { + return null + } + for (const child of rootComponent._children) { + const childResult = searchComponentTree(child, matchComponent) if (childResult) { return childResult } } - - // If we reach here then no children were valid return null } diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index c5bcb2951a..8e899c0bb1 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -14,7 +14,7 @@ const screenPlaceholder = new Screen() .name("Screen Placeholder") .route("*") - .component("@budibase/standard-components/screenslotplaceholder") + .component("@budibase/standard-components/screenslot") .instanceName("Content Placeholder") .json() diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 251a60155f..0b97684d82 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -2,10 +2,9 @@ import { goto } from "@sveltech/routify" import { get } from "svelte/store" import { store, currentAsset } from "builderStore" - import { getComponentDefinition } from "builderStore/storeUtils" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { last } from "lodash/fp" - import { findParent } from "builderStore/storeUtils" + import { findComponentParent } from "builderStore/storeUtils" import { DropdownMenu } from "@budibase/bbui" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" @@ -17,7 +16,7 @@ $: noChildrenAllowed = !component || - !getComponentDefinition($store, component._component)?.children + !store.actions.components.getDefinition(component._component)?.hasChildren $: noPaste = !$store.componentToPaste const lastPartOfName = c => (c ? last(c._component.split("/")) : "") @@ -35,7 +34,7 @@ const moveUpComponent = () => { store.update(state => { const asset = get(currentAsset) - const parent = findParent(asset.props, component) + const parent = findComponentParent(asset.props, component) if (parent) { const currentIndex = parent._children.indexOf(component) @@ -55,7 +54,7 @@ const moveDownComponent = () => { store.update(state => { const asset = get(currentAsset) - const parent = findParent(asset.props, component) + const parent = findComponentParent(asset.props, component) if (parent) { const currentIndex = parent._children.indexOf(component) @@ -78,18 +77,7 @@ } const deleteComponent = () => { - store.update(state => { - const asset = get(currentAsset) - const parent = findParent(asset.props, component) - - if (parent) { - parent._children = parent._children.filter(child => child !== component) - selectComponent(parent) - } - - store.actions.preview.saveSelected() - return state - }) + store.actions.components.delete(component) } const storeComponentForCopy = (cut = false) => { diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte index 320a81f00d..1fd3f423d3 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte @@ -1,7 +1,6 @@
- {#each categories as category, idx} + {#each enrichedStructure as item, idx}
onCategoryChosen(category, idx)} + on:click={() => onItemChosen(item, idx)} class:active={idx === selectedIndex}> - {#if category.icon}{/if} - {category.name} - {#if category.isCategory}{/if} + {#if item.icon}{/if} + {item.name} + {#if item.isCategory}{/if}
{/each}
@@ -56,12 +75,12 @@ {anchor} align="left"> - {#each categories[selectedIndex].children as item} + {#each enrichedStructure[selectedIndex].children as item} {#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)} onComponentChosen(item)} /> + on:click={() => onItemChosen(item)} /> {/if} {/each} diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 211e04d009..3c0c903061 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -1,14 +1,11 @@ diff --git a/packages/builder/src/components/userInterface/assetParsing/createProps.js b/packages/builder/src/components/userInterface/assetParsing/createProps.js deleted file mode 100644 index 0bd2a4aa15..0000000000 --- a/packages/builder/src/components/userInterface/assetParsing/createProps.js +++ /dev/null @@ -1,97 +0,0 @@ -import { isString, isUndefined, cloneDeep } from "lodash/fp" -import { TYPE_MAP } from "./types" -import { assign } from "lodash" -import { uuid } from "builderStore/uuid" - -export const getBuiltin = _component => { - const { props } = createProps({ _component }) - - return { - _component, - name: "Screenslot", - props, - } -} - -/** - * @param {object} componentDefinition - component definition from a component library - * @param {object} derivedFromProps - extra props derived from a components given props. - * @return {object} the fully created properties for the component, and any property parsing errors - */ -export const createProps = (componentDefinition, derivedFromProps) => { - const errorOccurred = (propName, error) => errors.push({ propName, error }) - - const props = { - _id: uuid(), - _component: componentDefinition._component, - _styles: { normal: {}, hover: {}, active: {} }, - } - - const errors = [] - - if (!componentDefinition._component) { - errorOccurred("_component", "Component name not supplied") - } - - for (let propName in componentDefinition.props) { - const parsedPropDef = parsePropDef(componentDefinition.props[propName]) - - if (parsedPropDef.error) { - errors.push({ propName, error: parsedPropDef.error }) - } else { - props[propName] = parsedPropDef - } - } - - if (derivedFromProps) { - assign(props, derivedFromProps) - } - - if (isUndefined(props._children)) { - props._children = [] - } - - return { - props, - errors, - } -} - -export const makePropsSafe = (componentDefinition, props) => { - if (!componentDefinition) { - console.error( - "No component definition passed to makePropsSafe. Please check the component definition is being passed correctly." - ) - } - const safeProps = createProps(componentDefinition, props).props - for (let propName in safeProps) { - props[propName] = safeProps[propName] - } - - for (let propName in props) { - if (safeProps[propName] === undefined) { - delete props[propName] - } - } - - if (!props._styles) { - props._styles = { normal: {}, hover: {}, active: {} } - } - - return props -} - -const parsePropDef = propDef => { - const error = message => ({ error: message, propDef }) - - if (isString(propDef)) { - if (!TYPE_MAP[propDef]) return error(`Type ${propDef} is not recognised.`) - - return cloneDeep(TYPE_MAP[propDef].default) - } - - const type = TYPE_MAP[propDef.type] - if (!type) return error(`Type ${propDef.type} is not recognised.`) - - return cloneDeep(propDef.default) -} diff --git a/packages/builder/src/components/userInterface/componentStructure.json b/packages/builder/src/components/userInterface/componentStructure.json new file mode 100644 index 0000000000..db136f885a --- /dev/null +++ b/packages/builder/src/components/userInterface/componentStructure.json @@ -0,0 +1,11 @@ +[ + { + "name": "Category", + "icon": "ri-file-edit-line", + "children": [ + "container" + ] + }, + "grid", + "screenslot" +] \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index fbbc54eec9..c89fca3d73 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -20,93 +20,6 @@ import { all } from "./propertyCategories.js" export default { categories: [ - { - _component: "@budibase/standard-components/container", - name: "Container", - description: "This component contains things within itself", - icon: "ri-layout-column-line", - commonProps: {}, - children: [], - properties: { - design: { ...all }, - settings: [ - { - key: "type", - label: "Type", - control: OptionSelect, - options: [ - "article", - "aside", - "details", - "div", - "figure", - "figcaption", - "footer", - "header", - "main", - "mark", - "nav", - "paragraph", - "summary", - ], - }, - ], - }, - }, - { - name: "Grid", - _component: "@budibase/standard-components/datagrid", - description: - "a datagrid component with functionality to add, remove and edit rows.", - icon: "ri-grid-line", - properties: { - design: { ...all }, - settings: [ - { - label: "Source", - key: "datasource", - control: TableViewSelect, - }, - { - label: "Detail URL", - key: "detailUrl", - control: DetailScreenSelect, - }, - { - label: "Editable", - key: "editable", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Theme", - key: "theme", - control: OptionSelect, - options: [ - "alpine", - "alpine-dark", - "balham", - "balham-dark", - "material", - ], - placeholder: "alpine", - }, - { - label: "Height", - key: "height", - defaultValue: "500", - control: Input, - }, - { - label: "Pagination", - key: "pagination", - valueKey: "checked", - control: Checkbox, - }, - ], - }, - children: [], - }, { name: "Repeater", _component: "@budibase/standard-components/list", @@ -152,8 +65,8 @@ export default { isCategory: true, children: [ { - _component: "@budibase/standard-components/dataform", - name: "Form Basic", + _component: "@budibase/standard-components/form", + name: "Form", icon: "ri-file-edit-line", properties: { design: { ...all }, @@ -161,17 +74,8 @@ export default { }, }, { - _component: "@budibase/standard-components/dataformwide", - name: "Form Wide", - icon: "ri-file-edit-line", - properties: { - design: { ...all }, - settings: [], - }, - }, - { - _component: "@budibase/standard-components/input", - name: "Textfield", + _component: "@budibase/standard-components/textfield", + name: "Text Field", description: "A textfield component that allows the user to input text.", icon: "ri-edit-box-line", @@ -199,19 +103,19 @@ export default { // settings: [], // }, // }, - { - _component: "@budibase/standard-components/datepicker", - name: "Date Picker", - description: "A basic date picker component", - icon: "ri-calendar-line", - children: [], - properties: { - design: { ...all }, - settings: [ - { label: "Placeholder", key: "placeholder", control: Input }, - ], - }, - }, + // { + // _component: "@budibase/standard-components/datepicker", + // name: "Date Picker", + // description: "A basic date picker component", + // icon: "ri-calendar-line", + // children: [], + // properties: { + // design: { ...all }, + // settings: [ + // { label: "Placeholder", key: "placeholder", control: Input }, + // ], + // }, + // }, ], }, { diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 23ba364dfb..322d083f94 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -35,7 +35,10 @@ const getComponentConstructor = component => { const split = component?.split("/") const name = split?.[split.length - 1] - return name === "screenslot" ? Router : ComponentLibrary[name] + if (name === "screenslot" && $builderStore.previewType !== "layout") { + return Router + } + return ComponentLibrary[name] } // Returns a unique key to let svelte know when to remount components. diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js index 2d28520609..9630a7c900 100644 --- a/packages/server/src/api/controllers/component.js +++ b/packages/server/src/api/controllers/component.js @@ -21,17 +21,18 @@ exports.fetchAppComponentDefinitions = async function(ctx) { appDirectory, componentLibrary, ctx.isDev ? "" : "package", - "components.json" + "manifest.json" )) + console.log(componentJson) const result = {} // map over the components.json and add the library identifier as a key // button -> @budibase/standard-components/button for (let key of Object.keys(componentJson)) { - const fullComponentName = `${componentLibrary}/${key}` + const fullComponentName = `${componentLibrary}/${key}`.toLowerCase() result[fullComponentName] = { - _component: fullComponentName, + component: fullComponentName, ...componentJson[key], } } diff --git a/packages/server/src/constants/layouts.js b/packages/server/src/constants/layouts.js index 0b25bf52a9..189c99daac 100644 --- a/packages/server/src/constants/layouts.js +++ b/packages/server/src/constants/layouts.js @@ -14,7 +14,7 @@ const EMPTY_LAYOUT = { _children: [ { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", - _component: "##builtin/screenslot", + _component: "@budibase/standard-components/screenslot", _styles: { normal: { flex: "1 1 auto", @@ -151,7 +151,7 @@ const BASE_LAYOUTS = [ }, { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", - _component: "##builtin/screenslot", + _component: "@budibase/standard-components/screenslot", _styles: { normal: { flex: "1 1 auto", @@ -206,7 +206,7 @@ const BASE_LAYOUTS = [ _children: [ { _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967", - _component: "##builtin/screenslot", + _component: "@budibase/standard-components/screenslot", _styles: { normal: { flex: "1 1 auto", diff --git a/packages/standard-components/README.md b/packages/standard-components/README.md index 71e531fc9d..67729ac3db 100644 --- a/packages/standard-components/README.md +++ b/packages/standard-components/README.md @@ -1,33 +1,43 @@ -*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)* +## Manifest ---- - -# component-template - -A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit): - -```bash -npx degit sveltejs/component-template my-new-component -cd my-new-component -npm install # or yarn -``` - -Your component's source code lives in `src/index.html`. - -TODO - -* [ ] some firm opinions about the best way to test components -* [ ] update `degit` so that it automates some of the setup work +The `manifest.json` file exports the definitions of all components available in this version +of the client library. The manifest is used by the builder to correctly display components and +their settings, and know how to correctly interact with them. -## Setting up -* Run `npm init` (or `yarn init`) -* Replace this README with your own +### Component Definitions + +The object key is the name of the component, as exported by `index.js`. + +- **name** - the name displayed in the builder +- **description** - not currently used +- **icon** - the icon displayed in the builder +- **hasChildren** - whether the component accepts children or not +- **styleable** - whether the component accepts design props or not +- **dataProvider** - whether the component provides a data context or not +- **bindable** - whether the components provides a bindable value or not +- **settings** - array of settings displayed in the builder + +###Settings Definitions + +The `type` field in each setting is used by the builder to know which component to use to display +the setting, so it's important that this field is correct. The valid options are: + +- **text** - A text field +- **select** - A select dropdown. Accompany these with an `options` field to provide options +- **datasource** - A datasource (e.g. a table or a view) +- **boolean** - A boolean field +- **number** - A numeric text field +- **detailURL** - A URL to a page which displays details about a row. +Exclusively used for grids which link to row details. -## Consuming components +The available fields in each setting definition are: -Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.** - -For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json. +- **type** - the type of field which determines which component the builder will use +to display the setting +- **key** - the key of this setting in the component +- **label** - the label displayed in the builder +- **defaultValue** - the default value of the setting +- **placeholder** - the placeholder for the setting diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 7da618224e..8a801a9fcb 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -141,35 +141,7 @@ } } }, - "datagrid": { - "name": "Grid", - "description": "a datagrid component with functionality to add, remove and edit rows.", - "data": true, - "props": { - "datasource": "tables", - "editable": "bool", - "theme": { - "type": "options", - "default": "alpine", - "options": [ - "alpine", - "alpine-dark", - "balham", - "balham-dark", - "material" - ] - }, - "height": { - "type": "number", - "default": "540" - }, - "pagination": { - "type": "bool", - "default": true - }, - "detailUrl": "string" - } - }, + "dataform": { "name": "Form", "description": "an HTML table that fetches data from a table or view and displays it.", @@ -623,38 +595,7 @@ "url": "string" } }, - "container": { - "name": "Container", - "children": true, - "description": "An element that contains and lays out other elements. e.g.
,
etc", - "props": { - "type": { - "type": "options", - "options": [ - "article", - "aside", - "details", - "div", - "firgure", - "figcaption", - "footer", - "header", - "main", - "mark", - "nav", - "paragraph", - "summary" - ], - "default": "div" - } - }, - "baseComponent": true, - "tags": [ - "div", - "container", - "layout" - ] - }, + "heading": { "name": "Heading", "description": "An HTML H1 - H6 tag", diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json new file mode 100644 index 0000000000..67d3d9d080 --- /dev/null +++ b/packages/standard-components/manifest.json @@ -0,0 +1,79 @@ +{ + "container": { + "name": "Container", + "description": "This component contains things within itself", + "icon": "ri-layout-column-line", + "hasChildren": true, + "styleable": true, + "settings": [ + { + "type": "select", + "key": "type", + "label": "Type", + "defaultValue": "div", + "options": [ + "article", + "aside", + "details", + "div", + "figure", + "figcaption", + "footer", + "header", + "main", + "mark", + "nav", + "paragraph", + "summary" + ] + } + ] + }, + "grid": { + "name": "Grid", + "description": + "A datagrid component with functionality to add, remove and edit rows.", + "icon": "ri-grid-line", + "styleable": true, + "settings": [ + { + "type": "datasource", + "label": "Source", + "key": "datasource" + }, + { + "type": "detailURL", + "label": "Detail URL", + "key": "detailUrl" + }, + { + "type": "boolean", + "label": "Editable", + "key": "editable" + }, + { + "type": "select", + "label": "Theme", + "key": "theme", + "options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"], + "defaultValue": "alpine" + }, + { + "type": "number", + "label": "Height", + "key": "height", + "defaultValue": "500" + }, + { + "type": "boolean", + "label": "Pagination", + "key": "pagination" + } + ] + }, + "screenslot": { + "name": "Screenslot", + "description": "Contains your app screens", + "styleable": true + } +} diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 006fe9da5c..ed2e7828d0 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -36,6 +36,11 @@ "@budibase/bbui": "^1.52.4", "@budibase/svelte-ag-grid": "^0.0.16", "@fortawesome/fontawesome-free": "^5.14.0", + "@spectrum-css/button": "^3.0.0-beta.6", + "@spectrum-css/icon": "^3.0.0-beta.2", + "@spectrum-css/page": "^3.0.0-beta.0", + "@spectrum-css/typography": "^3.0.0-beta.1", + "@spectrum-css/vars": "^3.0.0-beta.2", "apexcharts": "^3.22.1", "flatpickr": "^4.6.6", "lodash.debounce": "^4.0.8", diff --git a/packages/standard-components/src/ScreenSlotPlaceholder.svelte b/packages/standard-components/src/ScreenSlot.svelte similarity index 76% rename from packages/standard-components/src/ScreenSlotPlaceholder.svelte rename to packages/standard-components/src/ScreenSlot.svelte index 82e8b28c0e..abd1809d79 100644 --- a/packages/standard-components/src/ScreenSlotPlaceholder.svelte +++ b/packages/standard-components/src/ScreenSlot.svelte @@ -1,3 +1,8 @@ + +

Screen Slot

diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 65b0fdd3c0..487d639fb4 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -1,28 +1,31 @@ import "@budibase/bbui/dist/bbui.css" import "flatpickr/dist/flatpickr.css" +import "@spectrum-css/vars/dist/spectrum-global.css" +import "@spectrum-css/vars/dist/spectrum-medium.css" +import "@spectrum-css/vars/dist/spectrum-light.css" + export { default as container } from "./Container.svelte" -export { default as text } from "./Text.svelte" -export { default as heading } from "./Heading.svelte" -export { default as input } from "./Input.svelte" -export { default as richtext } from "./RichText.svelte" -export { default as button } from "./Button.svelte" -export { default as login } from "./Login.svelte" -export { default as link } from "./Link.svelte" -export { default as image } from "./Image.svelte" -export { default as navigation } from "./Navigation.svelte" -export { default as datagrid } from "./grid/Component.svelte" -export { default as dataform } from "./DataForm.svelte" -export { default as dataformwide } from "./DataFormWide.svelte" -export { default as list } from "./List.svelte" -export { default as embed } from "./Embed.svelte" -export { default as stackedlist } from "./StackedList.svelte" -export { default as card } from "./Card.svelte" -export { default as cardhorizontal } from "./CardHorizontal.svelte" -export { default as cardstat } from "./CardStat.svelte" -export { default as rowdetail } from "./RowDetail.svelte" -export { default as newrow } from "./NewRow.svelte" -export { default as datepicker } from "./DatePicker.svelte" -export { default as icon } from "./Icon.svelte" -export { default as screenslotplaceholder } from "./ScreenSlotPlaceholder.svelte" -export * from "./charts" +export { default as grid } from "./grid/Component.svelte" +export { default as screenslot } from "./ScreenSlot.svelte" + +// export { default as text } from "./Text.svelte" +// export { default as heading } from "./Heading.svelte" +// export { default as input } from "./Input.svelte" +// export { default as richtext } from "./RichText.svelte" +// export { default as button } from "./Button.svelte" +// export { default as login } from "./Login.svelte" +// export { default as link } from "./Link.svelte" +// export { default as image } from "./Image.svelte" +// export { default as navigation } from "./Navigation.svelte" +// export { default as list } from "./List.svelte" +// export { default as embed } from "./Embed.svelte" +// export { default as stackedlist } from "./StackedList.svelte" +// export { default as card } from "./Card.svelte" +// export { default as cardhorizontal } from "./CardHorizontal.svelte" +// export { default as cardstat } from "./CardStat.svelte" +// export { default as rowdetail } from "./RowDetail.svelte" +// export { default as newrow } from "./NewRow.svelte" +// export { default as datepicker } from "./DatePicker.svelte" +// export { default as icon } from "./Icon.svelte" +// export * from "./charts" diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock index 507dd84674..d9d1f754df 100644 --- a/packages/standard-components/yarn.lock +++ b/packages/standard-components/yarn.lock @@ -132,6 +132,33 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@spectrum-css/button@^3.0.0-beta.6": + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a" + integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg== + +"@spectrum-css/icon@^3.0.0-beta.2": + version "3.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb" + integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA== + +"@spectrum-css/page@^3.0.0-beta.0": + version "3.0.0-beta.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58" + integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA== + dependencies: + "@spectrum-css/vars" "^3.0.0-beta.2" + +"@spectrum-css/typography@^3.0.0-beta.1": + version "3.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.0-beta.1.tgz#c2c2097c49e2711e8d048afcbaa5ccfe1a6ea7f1" + integrity sha512-NnRvEnrTdt53ZUYh42v+ff6bUTUjG1qHctVJrIv8XrivFSc4L475x3lJgHmSVQeDoDLAsVOtISlJBXKrqK5eRQ== + +"@spectrum-css/vars@^3.0.0-beta.2": + version "3.0.0-beta.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157" + integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA== + "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" From 6b9e61e7e6359cafb812d94ee9b58fcbf4eeef3e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 14 Jan 2021 09:09:23 +0000 Subject: [PATCH 03/59] Fix component navigation, fix settings editing, fix design editing --- .../src/builderStore/store/frontend.js | 60 +++++++++--- .../ComponentDropdownMenu.svelte | 60 ++++++------ .../ComponentPropertiesPanel.svelte | 49 +++------- .../userInterface/DesignView.svelte | 16 ++-- .../userInterface/IconSelect/index.js | 3 - .../MultiTableViewFieldSelect.svelte | 2 +- .../userInterface/PropertyGroup.svelte | 5 +- .../EventsEditor/EventEditorModal.svelte | 0 .../EventsEditor/EventPropertyControl.svelte | 0 .../EventsEditor/actions/CreateRow.svelte | 0 .../EventsEditor/actions/DeleteRow.svelte | 0 .../EventsEditor/actions/NavigateTo.svelte | 0 .../EventsEditor/actions/SaveFields.svelte | 0 .../EventsEditor/actions/SaveRow.svelte | 0 .../EventsEditor/actions/UpdateRow.svelte | 0 .../EventsEditor/actions/index.js | 0 .../EventsEditor/index.js | 2 + .../FlatButtonGroup}/FlatButton.svelte | 0 .../FlatButtonGroup}/FlatButtonGroup.svelte | 0 .../FlatButtonGroup/index.js | 2 + .../IconSelect/IconSelect.svelte | 0 .../IconSelect/icons.js | 0 .../PropertyPanelControls/IconSelect/index.js | 4 + .../LayoutSelect.svelte | 2 +- .../MultiOptionSelect.svelte | 0 .../OptionSelect.svelte | 2 +- .../PropertyControl.svelte | 2 +- .../RoleSelect.svelte | 0 .../ScreenSelect.svelte | 0 .../TableSelect.svelte | 0 .../TableViewFieldSelect.svelte | 0 .../TableViewSelect.svelte | 4 +- .../userInterface/SettingsView.svelte | 93 +++++++++++-------- .../assetParsing/getRootComponent.js | 10 -- .../assetParsing/searchComponents.js | 46 --------- .../assetParsing/splitRootComponentName.js | 13 --- .../userInterface/assetParsing/types.js | 25 ----- ...opertyCategories.js => componentStyles.js} | 29 +----- .../userInterface/temporaryPanelStructure.js | 14 +-- .../standard-components/src/ScreenSlot.svelte | 27 +++--- 40 files changed, 190 insertions(+), 280 deletions(-) delete mode 100644 packages/builder/src/components/userInterface/IconSelect/index.js rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/EventEditorModal.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/EventPropertyControl.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/CreateRow.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/DeleteRow.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/NavigateTo.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/SaveFields.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/SaveRow.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/UpdateRow.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/EventsEditor/actions/index.js (100%) create mode 100644 packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/index.js rename packages/builder/src/components/userInterface/{ => PropertyPanelControls/FlatButtonGroup}/FlatButton.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls/FlatButtonGroup}/FlatButtonGroup.svelte (100%) create mode 100644 packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/index.js rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/IconSelect/IconSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/IconSelect/icons.js (100%) create mode 100644 packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/index.js rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/LayoutSelect.svelte (84%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/MultiOptionSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/OptionSelect.svelte (99%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/PropertyControl.svelte (98%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/RoleSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/ScreenSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/TableSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/TableViewFieldSelect.svelte (100%) rename packages/builder/src/components/userInterface/{ => PropertyPanelControls}/TableViewSelect.svelte (96%) delete mode 100644 packages/builder/src/components/userInterface/assetParsing/getRootComponent.js delete mode 100644 packages/builder/src/components/userInterface/assetParsing/searchComponents.js delete mode 100644 packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js delete mode 100644 packages/builder/src/components/userInterface/assetParsing/types.js rename packages/builder/src/components/userInterface/{propertyCategories.js => componentStyles.js} (96%) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 8f131ac0ff..fcb1224608 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -11,12 +11,13 @@ import { } from "builderStore" import { fetchComponentLibDefinitions } from "../loadComponentLibraries" import api from "../api" -import { FrontendTypes } from "../../constants" +import { FrontendTypes } from "constants" import analytics from "analytics" import { findComponentType, findComponentParent, findComponentPath, + findComponent, } from "../storeUtils" import { uuid } from "../uuid" @@ -44,21 +45,21 @@ export const getFrontendStore = () => { store.actions = { initialise: async pkg => { const { layouts, screens, application } = pkg - const components = await fetchComponentLibDefinitions(pkg.application._id) + const components = await fetchComponentLibDefinitions(application._id) store.update(state => ({ ...state, - libraries: pkg.application.componentLibraries, + libraries: application.componentLibraries, components, - name: pkg.application.name, - description: pkg.application.description, - appId: pkg.application._id, + name: application.name, + description: application.description, + appId: application._id, layouts, screens, hasAppPackage: true, - appInstance: pkg.application.instance, + appInstance: application.instance, })) await hostingStore.actions.fetch() - await backendUiStore.actions.database.select(pkg.application.instance) + await backendUiStore.actions.database.select(application.instance) }, routing: { fetch: async () => { @@ -226,6 +227,25 @@ export const getFrontendStore = () => { }, components: { select: component => { + if (!component) { + return + } + + // If this is the root component, select the asset instead + const asset = get(currentAsset) + const parent = findComponentParent(asset.props, component._id) + if (parent == null) { + const state = get(store) + const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT + if (isLayout) { + store.actions.layouts.select(asset._id) + } else { + store.actions.screens.select(asset._id) + } + return + } + + // Otherwise select the component store.update(state => { state.selectedComponentId = component._id state.currentView = "component" @@ -236,10 +256,10 @@ export const getFrontendStore = () => { if (!componentName) { return null } - const name = componentName.startsWith("@budibase") - ? componentName - : `@budibase/standard-components/${componentName}` - return get(store).components[name] + if (!componentName.startsWith("@budibase")) { + componentName = `@budibase/standard-components/${componentName}` + } + return get(store).components[componentName] }, createInstance: (componentName, presetProps) => { const definition = store.actions.components.getDefinition(componentName) @@ -273,6 +293,19 @@ export const getFrontendStore = () => { } }, create: (componentName, presetProps) => { + const selected = get(selectedComponent) + const asset = get(currentAsset) + const state = get(store) + + // Only allow one screen slot, and in the layout + if (componentName.endsWith("screenslot")) { + const isLayout = state.currentFrontEndType === FrontendTypes.LAYOUT + const slot = findComponentType(asset.props, componentName) + if (!isLayout || slot != null) { + return + } + } + // Create new component const componentInstance = store.actions.components.createInstance( componentName, @@ -284,8 +317,7 @@ export const getFrontendStore = () => { // Find parent node to attach this component to let parentComponent - const selected = get(selectedComponent) - const asset = get(currentAsset) + if (!asset) { return } diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 0b97684d82..5ab3898c8d 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -32,43 +32,35 @@ } const moveUpComponent = () => { - store.update(state => { - const asset = get(currentAsset) - const parent = findComponentParent(asset.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === 0) return state - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex - 1, 0, component) - parent._children = newChildren - } - state.selectedComponentId = component._id - store.actions.preview.saveSelected() - - return state - }) + const asset = get(currentAsset) + const parent = findComponentParent(asset.props, component._id) + if (!parent) { + return + } + const currentIndex = parent._children.indexOf(component) + if (currentIndex === 0) { + return + } + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex - 1, 0, component) + parent._children = newChildren + store.actions.preview.saveSelected() } const moveDownComponent = () => { - store.update(state => { - const asset = get(currentAsset) - const parent = findComponentParent(asset.props, component) - - if (parent) { - const currentIndex = parent._children.indexOf(component) - if (currentIndex === parent._children.length - 1) return state - - const newChildren = parent._children.filter(c => c !== component) - newChildren.splice(currentIndex + 1, 0, component) - parent._children = newChildren - } - state.selectedComponentId = component._id - store.actions.preview.saveSelected() - - return state - }) + const asset = get(currentAsset) + const parent = findComponentParent(asset.props, component._id) + if (!parent) { + return + } + const currentIndex = parent._children.indexOf(component) + if (currentIndex === parent._children.length - 1) { + return + } + const newChildren = parent._children.filter(c => c !== component) + newChildren.splice(currentIndex + 1, 0, component) + parent._children = newChildren + store.actions.preview.saveSelected() } const duplicateComponent = () => { diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index cee504719a..6291917cd0 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -2,48 +2,30 @@ import { get } from "svelte/store" import { store, selectedComponent, currentAsset } from "builderStore" import { FrontendTypes } from "constants" - import panelStructure from "./temporaryPanelStructure.js" import CategoryTab from "./CategoryTab.svelte" import DesignView from "./DesignView.svelte" import SettingsView from "./SettingsView.svelte" import { setWith } from "lodash" - let flattenedPanel = flattenComponents(panelStructure.categories) - let categories = [ + const categories = [ { value: "settings", name: "Settings" }, { value: "design", name: "Design" }, ] let selectedCategory = categories[0] - $: componentInstance = - $store.currentView !== "component" - ? { ...$currentAsset, ...$selectedComponent } - : $selectedComponent - $: componentDefinition = store.actions.components.getDefinition( - componentInstance._component + $: definition = store.actions.components.getDefinition( + $selectedComponent._component ) - $: componentPropDefinition = - flattenedPanel.find( - // use for getting controls for each component property - c => c._component === componentInstance._component - ) || {} - - $: panelDefinition = - componentPropDefinition.properties && - componentPropDefinition.properties[selectedCategory.value] + $: isComponentOrScreen = + $store.currentView === "component" || + $store.currentFrontEndType === FrontendTypes.SCREEN + $: isNotScreenslot = !$selectedComponent._component.endsWith("screenslot") + $: showDisplayName = isComponentOrScreen && isNotScreenslot const onStyleChanged = store.actions.components.updateStyle const onCustomStyleChanged = store.actions.components.updateCustomStyle const onResetStyles = store.actions.components.resetStyles - $: isComponentOrScreen = - $store.currentView === "component" || - $store.currentFrontEndType === FrontendTypes.SCREEN - $: isNotScreenslot = !componentInstance._component.endsWith("screenslot") - - $: displayName = - isComponentOrScreen && componentInstance._instanceName && isNotScreenslot - function walkProps(component, action) { action(component) if (component.children) { @@ -91,24 +73,23 @@ {categories} {selectedCategory} /> -{#if displayName} -
{componentInstance._instanceName}
+{#if showDisplayName} +
{$selectedComponent._instanceName}
{/if}
{#if selectedCategory.value === 'design'} {:else if selectedCategory.value === 'settings'} diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index cbc110d3b9..5be4a421ba 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -1,16 +1,16 @@
@@ -32,12 +32,12 @@
-
- {#if propertyGroupNames.length > 0} - {#each propertyGroupNames as groupName} +
+ {#if groups.length > 0} + {#each groups as groupName} - import TableViewFieldSelect from "./TableViewFieldSelect.svelte" + import TableViewFieldSelect from "./PropertyPanelControls/TableViewFieldSelect.svelte" diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 69797c4a21..548e13399b 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,6 +1,5 @@ -
+

Screen Slot

The screens that you create will be displayed inside this box. @@ -14,16 +18,15 @@ From 7c4c7e0ae1ef4dd03f57d67c4c68d49d4e981fdf Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 14 Jan 2021 09:45:09 +0000 Subject: [PATCH 04/59] Update file structure to be sensible for design section --- .../SetupPanel/AutomationBlockSetup.svelte | 2 +- .../SetupPanel}/BindableInput.svelte | 2 +- .../automation/SetupPanel/RowSelector.svelte | 4 +- .../AppPreview}/ComponentSelectionList.svelte | 0 .../AppPreview/CurrentItemPreview.svelte | 0 .../AppPreview}/componentStructure.json | 3 +- .../AppPreview/iframeTemplate.html | 0 .../AppPreview/iframeTemplate.js | 0 .../AppPreview/index.js | 0 .../ComponentDropdownMenu.svelte | 0 .../ComponentTree.svelte | 0 .../LayoutDropdownMenu.svelte | 0 .../ComponentNavigationTree/PathTree.svelte | 0 .../ScreenDropdownMenu.svelte | 0 .../ComponentNavigationTree/dragDropStore.js | 0 .../ComponentNavigationTree/index.svelte | 0 .../FrontendNavigatePane.svelte | 8 +- .../NavigationPanel}/Layout.svelte | 0 .../NavigationPanel}/NewLayoutModal.svelte | 0 .../NavigationPanel}/NewScreenModal.svelte | 0 .../PropertiesPanel}/BindingDropdown.svelte | 0 .../PropertiesPanel}/CategoryTab.svelte | 0 .../PropertiesPanel}/DesignView.svelte | 2 +- .../GenericBindingPopover.svelte | 0 .../PropertiesPanel/PropertiesPanel.svelte} | 0 .../PropertyControls/Checkbox.svelte | 7 ++ .../PropertyControls/ColorPicker.svelte | 7 ++ .../DetailScreenSelect.svelte | 0 .../EventsEditor/EventEditorModal.svelte | 0 .../EventsEditor/EventPropertyControl.svelte | 0 .../EventsEditor/actions/CreateRow.svelte | 0 .../EventsEditor/actions/DeleteRow.svelte | 0 .../EventsEditor/actions/NavigateTo.svelte | 0 .../EventsEditor/actions/SaveFields.svelte | 0 .../EventsEditor/actions/SaveRow.svelte | 0 .../actions/TriggerAutomation.svelte | 41 +++++----- .../EventsEditor/actions/UpdateRow.svelte | 0 .../EventsEditor/actions/index.js | 0 .../PropertyControls}/EventsEditor/index.js | 0 .../FlatButtonGroup/FlatButton.svelte | 0 .../FlatButtonGroup/FlatButtonGroup.svelte | 0 .../FlatButtonGroup/index.js | 0 .../IconSelect/IconSelect.svelte | 0 .../PropertyControls}/IconSelect/icons.js | 0 .../PropertyControls}/IconSelect/index.js | 0 .../PropertyControls}/Input.svelte | 0 .../PropertyControls}/LayoutSelect.svelte | 0 .../MultiOptionSelect.svelte | 0 .../MultiTableViewFieldSelect.svelte | 5 ++ .../PropertyControls}/OptionSelect.svelte | 2 +- .../PropertyControls}/PropertyControl.svelte | 2 +- .../PropertyControls}/PropertyGroup.svelte | 10 +-- .../PropertyControls}/RoleSelect.svelte | 0 .../PropertyControls}/ScreenSelect.svelte | 0 .../PropertyControls}/TableSelect.svelte | 0 .../TableViewFieldSelect.svelte | 0 .../PropertyControls}/TableViewSelect.svelte | 4 +- .../PropertiesPanel}/SettingsView.svelte | 9 ++- .../PropertiesPanel}/componentStyles.js | 5 +- .../temporaryPanelStructure.js | 31 ++------ .../FeedbackIframe.svelte | 0 .../FeedbackNavLink.svelte | 0 .../LayoutTemplateControls.svelte | 78 ------------------- .../MultiTableViewFieldSelect.svelte | 5 -- .../src/pages/[application]/_reset.svelte | 2 +- .../pages/[application]/deploy/index.svelte | 2 +- .../design/[assetType]/_layout.svelte | 6 +- packages/standard-components/components.json | 33 -------- packages/standard-components/manifest.json | 24 ++++++ .../standard-components/src/Button.svelte | 2 +- packages/standard-components/src/index.js | 2 +- 71 files changed, 97 insertions(+), 201 deletions(-) rename packages/builder/src/components/{userInterface => automation/SetupPanel}/BindableInput.svelte (91%) rename packages/builder/src/components/{userInterface => design/AppPreview}/ComponentSelectionList.svelte (100%) rename packages/builder/src/components/{userInterface => design}/AppPreview/CurrentItemPreview.svelte (100%) rename packages/builder/src/components/{userInterface => design/AppPreview}/componentStructure.json (81%) rename packages/builder/src/components/{userInterface => design}/AppPreview/iframeTemplate.html (100%) rename packages/builder/src/components/{userInterface => design}/AppPreview/iframeTemplate.js (100%) rename packages/builder/src/components/{userInterface => design}/AppPreview/index.js (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentDropdownMenu.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/ComponentTree.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/LayoutDropdownMenu.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/PathTree.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/ScreenDropdownMenu.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/dragDropStore.js (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/ComponentNavigationTree/index.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/FrontendNavigatePane.svelte (90%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/Layout.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/NewLayoutModal.svelte (100%) rename packages/builder/src/components/{userInterface => design/NavigationPanel}/NewScreenModal.svelte (100%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/BindingDropdown.svelte (100%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/CategoryTab.svelte (100%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/DesignView.svelte (97%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/GenericBindingPopover.svelte (100%) rename packages/builder/src/components/{userInterface/ComponentPropertiesPanel.svelte => design/PropertiesPanel/PropertiesPanel.svelte} (100%) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/Checkbox.svelte create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte rename packages/builder/src/components/{userInterface => design/PropertiesPanel/PropertyControls}/DetailScreenSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/EventEditorModal.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/EventPropertyControl.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/CreateRow.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/DeleteRow.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/NavigateTo.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/SaveFields.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/SaveRow.svelte (100%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/TriggerAutomation.svelte (80%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/UpdateRow.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/actions/index.js (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/EventsEditor/index.js (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/FlatButtonGroup/FlatButton.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/FlatButtonGroup/FlatButtonGroup.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/FlatButtonGroup/index.js (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/IconSelect/IconSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/IconSelect/icons.js (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/IconSelect/index.js (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/Input.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/LayoutSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/MultiOptionSelect.svelte (100%) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/OptionSelect.svelte (98%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/PropertyControl.svelte (97%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel/PropertyControls}/PropertyGroup.svelte (72%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/RoleSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/ScreenSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/TableSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/TableViewFieldSelect.svelte (100%) rename packages/builder/src/components/{userInterface/PropertyPanelControls => design/PropertiesPanel/PropertyControls}/TableViewSelect.svelte (95%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/SettingsView.svelte (91%) rename packages/builder/src/components/{userInterface => design/PropertiesPanel}/componentStyles.js (99%) rename packages/builder/src/components/{userInterface => design}/temporaryPanelStructure.js (97%) rename packages/builder/src/components/{userInterface/Feedback => feedback}/FeedbackIframe.svelte (100%) rename packages/builder/src/components/{userInterface/Feedback => feedback}/FeedbackNavLink.svelte (100%) delete mode 100644 packages/builder/src/components/userInterface/LayoutTemplateControls.svelte delete mode 100644 packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 5d3371ee7d..bcbd2741b2 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -5,7 +5,7 @@ import { Button, Input, Select, Label } from "@budibase/bbui" import { automationStore } from "builderStore" import WebhookDisplay from "../Shared/WebhookDisplay.svelte" - import BindableInput from "components/userInterface/BindableInput.svelte" + import BindableInput from "./BindableInput.svelte" export let block export let webhookModal diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/automation/SetupPanel/BindableInput.svelte similarity index 91% rename from packages/builder/src/components/userInterface/BindableInput.svelte rename to packages/builder/src/components/automation/SetupPanel/BindableInput.svelte index 76624abd06..f5b7434267 100644 --- a/packages/builder/src/components/userInterface/BindableInput.svelte +++ b/packages/builder/src/components/automation/SetupPanel/BindableInput.svelte @@ -1,5 +1,5 @@ + + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte new file mode 100644 index 0000000000..63ce8da6c4 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColorPicker.svelte @@ -0,0 +1,7 @@ + + + diff --git a/packages/builder/src/components/userInterface/DetailScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte similarity index 100% rename from packages/builder/src/components/userInterface/DetailScreenSelect.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/EventEditorModal.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/EventPropertyControl.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/CreateRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CreateRow.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/CreateRow.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CreateRow.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/DeleteRow.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/NavigateTo.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/SaveFields.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/SaveRow.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte similarity index 80% rename from packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte index 3e46f813fd..3addd55ea0 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte @@ -41,53 +41,53 @@ newOrExisting = "existing" parameters.newAutomationName = "" } -
-
- - - + disabled={!hasAutomations} /> +
- - - - + disabled={!hasAutomations} /> +
- {#if newOrExisting=== "existing"} - {/each} {:else} - + {/if} -
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/UpdateRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateRow.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/UpdateRow.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/UpdateRow.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/actions/index.js rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/EventsEditor/index.js rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/index.js diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/FlatButton.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/FlatButton.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/FlatButtonGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/FlatButtonGroup.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/index.js similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/FlatButtonGroup/index.js rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/index.js diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/IconSelect.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/icons.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/icons.js similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/icons.js rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/icons.js diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/IconSelect/index.js rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/index.js diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/Input.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/LayoutSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/LayoutSelect.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/LayoutSelect.svelte diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/MultiOptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte similarity index 100% rename from packages/builder/src/components/userInterface/PropertyPanelControls/MultiOptionSelect.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte new file mode 100644 index 0000000000..7d2f17a02b --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiTableViewFieldSelect.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte similarity index 98% rename from packages/builder/src/components/userInterface/PropertyPanelControls/OptionSelect.svelte rename to packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte index 4b27b7ba17..3ee839fbd0 100644 --- a/packages/builder/src/components/userInterface/PropertyPanelControls/OptionSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte @@ -1,7 +1,7 @@ - -
- {#each meta as { placeholder }, i} - {#each propertyChoices as [displayName, [cssPropValue, icon]]} - - {/each} - {/each} -
- - diff --git a/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte deleted file mode 100644 index 710ce0f811..0000000000 --- a/packages/builder/src/components/userInterface/MultiTableViewFieldSelect.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index a02287a89e..478980995e 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -3,7 +3,7 @@ import { Button } from "@budibase/bbui" import SettingsLink from "components/settings/Link.svelte" import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte" - import FeedbackNavLink from "components/userInterface/Feedback/FeedbackNavLink.svelte" + import FeedbackNavLink from "components/Feedback/FeedbackNavLink.svelte" import { get } from "builderStore/api" import { isActive, goto, layout } from "@sveltech/routify" diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte index 462601ff48..c372044b24 100644 --- a/packages/builder/src/pages/[application]/deploy/index.svelte +++ b/packages/builder/src/pages/[application]/deploy/index.svelte @@ -7,7 +7,7 @@ import Spinner from "components/common/Spinner.svelte" import DeploymentHistory from "components/deploy/DeploymentHistory.svelte" import analytics from "analytics" - import FeedbackIframe from "components/userInterface/Feedback/FeedbackIframe.svelte" + import FeedbackIframe from "components/Feedback/FeedbackIframe.svelte" let loading = false let deployments = [] diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte index df013f2abe..252538a4d0 100644 --- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte @@ -7,9 +7,9 @@ } from "builderStore" import { onMount } from "svelte" import CurrentItemPreview from "components/userInterface/AppPreview" - import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte" - import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte" - import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte" + import ComponentPropertiesPanel from "components/userInterface/PropertiesPanel/ComponentPropertiesPanel.svelte" + import ComponentSelectionList from "components/userInterface/AppPreview/ComponentSelectionList.svelte" + import FrontendNavigatePane from "components/userInterface/NavigationPanel/FrontendNavigatePane.svelte" $: instance = $store.appInstance diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 8a801a9fcb..c4304235fd 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -21,39 +21,6 @@ "logoUrl": "string" } }, - "button": { - "name": "Button", - "description": "an html