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"