diff --git a/packages/bootstrap-components/components.json b/packages/bootstrap-components/components.json index 684a8acbb7..70d4668213 100644 --- a/packages/bootstrap-components/components.json +++ b/packages/bootstrap-components/components.json @@ -1,24 +1,5 @@ { "_lib": "./dist/index.js", - "_generators": { - "_lib": "./dist/generators.js", - "app": { - "name": "App", - "description": "Generate app based on your backend" - }, - "forms": { - "name": "Forms", - "description": "Generate forms, based on your records" - }, - "indexTables": { - "name": "Index Tables", - "description": "Generate a table based on an index" - }, - "recordHomepages": { - "name": "Record Homepage", - "description": "Generates a 'homepage' based on your record types, including a create/edit form. Selecting a nav item will display a root content" - } - }, "form" : { "importPath": "Form", "name": "Form", diff --git a/packages/bootstrap-components/package.json b/packages/bootstrap-components/package.json index dd26d3aa90..e13101c1b2 100644 --- a/packages/bootstrap-components/package.json +++ b/packages/bootstrap-components/package.json @@ -4,7 +4,7 @@ "main": "dist/index.js", "module": "dist/index.js", "scripts": { - "build": "rollup -c && rollup -c rollup.generatorsconfig.js", + "build": "rollup -c", "prepublishOnly": "npm run build", "testbuild": "rollup -w -c rollup.testconfig.js", "dev": "run-p start:dev testbuild", diff --git a/packages/bootstrap-components/rollup.generatorsconfig.js b/packages/bootstrap-components/rollup.generatorsconfig.js deleted file mode 100644 index 77469eea83..0000000000 --- a/packages/bootstrap-components/rollup.generatorsconfig.js +++ /dev/null @@ -1,14 +0,0 @@ -import resolve from "rollup-plugin-node-resolve" - -export default { - input: "src/generators.js", - output: [ - { - file: "dist/generators.js", - format: "esm", - name: "budibaseStandardComponents", - sourcemap: "inline", - }, - ], - plugins: [resolve()], -} diff --git a/packages/bootstrap-components/scripts/publishDev.js b/packages/bootstrap-components/scripts/publishDev.js index 713247656b..7a674ebcbc 100644 --- a/packages/bootstrap-components/scripts/publishDev.js +++ b/packages/bootstrap-components/scripts/publishDev.js @@ -5,12 +5,10 @@ const { join, basename } = require("path") const packagesFolder = ".." const jsFile = dir => join(dir, "index.js") -const generatorsFile = dir => join(dir, "generators.js") const jsMapFile = dir => join(dir, "index.js.map") const sourceJs = jsFile("dist") const sourceJsMap = jsMapFile("dist") const componentsFile = "components.json" -const sourceGenerators = generatorsFile("dist") const appPackages = join(packagesFolder, "server", "appPackages") @@ -69,7 +67,6 @@ const nodeModules = appName => const copySourceJs = copySource(sourceJs) const copySourceJsMap = copySource(sourceJsMap) - const copyGenerators = copySource(sourceGenerators) const copyComponentsJson = copySource(componentsFile) for (let app of apps) { @@ -77,16 +74,13 @@ const nodeModules = appName => await copySourceJs(nodeModulesDist(app)) await copySourceJsMap(nodeModulesDist(app)) - await copyGenerators(nodeModulesDist(app)) await copyComponentsJson(nodeModules(app)) await copySourceJs(join(publicMain(app), "dist")) await copySourceJsMap(join(publicMain(app), "dist")) - await copyGenerators(join(publicMain(app), "dist")) await copySourceJs(join(publicUnauth(app), "dist")) await copySourceJsMap(join(publicUnauth(app), "dist")) - await copyGenerators(join(publicUnauth(app), "dist")) } })() diff --git a/packages/bootstrap-components/src/generators.js b/packages/bootstrap-components/src/generators.js deleted file mode 100644 index 103146916b..0000000000 --- a/packages/bootstrap-components/src/generators.js +++ /dev/null @@ -1,4 +0,0 @@ -export { forms } from "./generators/formsGenerator" -export { indexTables } from "./generators/indexTablesGenerator" -export { app } from "./generators/appGenerator" -export { recordHomePageComponents as recordHomepages } from "./generators/recordHomePageGenerator" diff --git a/packages/bootstrap-components/src/generators/appGenerator.js b/packages/bootstrap-components/src/generators/appGenerator.js deleted file mode 100644 index f4181b2249..0000000000 --- a/packages/bootstrap-components/src/generators/appGenerator.js +++ /dev/null @@ -1,37 +0,0 @@ -import { - navContentComponentName, - selectNavContent, -} from "./selectedNavContentGenerator" -import { recordHomepages } from "./recordHomePageGenerator" -export const app = ({ records, indexes, helpers }) => [ - { - name: "Application Root", - inherits: "@budibase/bootstrap-components/nav", - props: { - items: recordHomepages({ indexes, records }).map(navItem), - orientation: "horizontal", - alignment: "start", - fill: false, - pills: true, - selectedItem: { - "##bbstate": "selectedNav", - "##bbstatefallback": `${records[0].name}`, - "##bbsource": "store", - }, - className: "p-3", - }, - }, - { - name: "Login", - inherits: "@budibase/standard-components/login", - props: {}, - }, - ...selectNavContent({ records, indexes, helpers }), -] - -export const navItem = ({ record }) => ({ - title: record.collectionName, - component: { - _component: navContentComponentName(record), - }, -}) diff --git a/packages/bootstrap-components/src/generators/buttonGenerators.js b/packages/bootstrap-components/src/generators/buttonGenerators.js deleted file mode 100644 index 14f83b2101..0000000000 --- a/packages/bootstrap-components/src/generators/buttonGenerators.js +++ /dev/null @@ -1,18 +0,0 @@ -export const buttons = () => [ - { - name: "common/Primary Button", - description: "Bootstrap primary button ", - inherits: "@budibase/standard-components/button", - props: { - className: "btn btn-primary", - }, - }, - { - name: "common/Default Button", - description: "Bootstrap default button", - inherits: "@budibase/standard-components/button", - props: { - className: "btn btn-secondary", - }, - }, -] diff --git a/packages/bootstrap-components/src/generators/formsGenerator.js b/packages/bootstrap-components/src/generators/formsGenerator.js deleted file mode 100644 index aa842a2090..0000000000 --- a/packages/bootstrap-components/src/generators/formsGenerator.js +++ /dev/null @@ -1,128 +0,0 @@ -import { buttons } from "./buttonGenerators" - -export const forms = ({ records, indexes, helpers }) => [ - ...records.map(root), - ...buttons({ records, indexes, helpers }), -] - -export const formName = record => `${record.name}/${record.name} Form` - -const root = record => ({ - name: formName(record), - description: `Control for creating/updating '${record.nodeKey()}' `, - inherits: "@budibase/standard-components/container", - props: { - className: "p-1", - children: [ - { - component: { - _component: "@budibase/standard-components/h3", - text: `Edit ${record.name}`, - }, - }, - form(record), - saveCancelButtons(record), - ], - }, -}) - -const form = record => ({ - component: { - _component: "@budibase/standard-components/form", - formControls: record.fields.map(f => formControl(record, f)), - }, -}) - -const formControl = (record, field) => { - if ( - field.type === "string" && - field.typeOptions.values && - field.typeOptions.values.length > 0 - ) { - return { - control: { - _component: "@budibase/standard-components/select", - options: field.typeOptions.values.map(v => ({ id: v, value: v })), - value: { - "##bbstate": `${record.name}.${field.name}`, - "##bbsource": "store", - }, - className: "form-control", - }, - label: field.label, - } - } else { - return { - control: { - _component: "@budibase/standard-components/input", - value: { - "##bbstate": `${record.name}.${field.name}`, - "##bbsource": "store", - }, - className: "form-control", - type: - field.type === "string" - ? "text" - : field.type === "datetime" - ? "date" - : field.type === "number" - ? "number" - : "text", - }, - label: field.label, - } - } -} - -const saveCancelButtons = record => ({ - component: { - _component: "@budibase/standard-components/stackpanel", - direction: "horizontal", - children: [ - paddedPanelForButton({ - _component: "common/Primary Button", - contentText: `Save ${record.name}`, - onClick: [ - { - "##eventHandlerType": "Save Record", - parameters: { - statePath: `${record.name}`, - }, - }, - { - "##eventHandlerType": "Set State", - parameters: { - path: `isEditing${record.name}`, - value: "", - }, - }, - ], - }), - paddedPanelForButton({ - _component: "common/Default Button", - contentText: `Cancel`, - onClick: [ - { - "##eventHandlerType": "Set State", - parameters: { - path: `isEditing${record.name}`, - value: "", - }, - }, - ], - }), - ], - }, -}) - -const paddedPanelForButton = button => ({ - control: { - _component: "@budibase/standard-components/container", - className: "btn-group", - children: [ - { - component: button, - }, - ], - }, -}) diff --git a/packages/bootstrap-components/src/generators/getRecordPath.js b/packages/bootstrap-components/src/generators/getRecordPath.js deleted file mode 100644 index 5d2003954d..0000000000 --- a/packages/bootstrap-components/src/generators/getRecordPath.js +++ /dev/null @@ -1,14 +0,0 @@ -export const getRecordPath = () => { - const parts = [] - - const add = current => { - parts.push(current.name) - if (current.parent().type === "root") { - return - } - - add(current.parent()) - } - - return parts.reverse().join("/") -} diff --git a/packages/bootstrap-components/src/generators/indexTablesGenerator.js b/packages/bootstrap-components/src/generators/indexTablesGenerator.js deleted file mode 100644 index 45464c177c..0000000000 --- a/packages/bootstrap-components/src/generators/indexTablesGenerator.js +++ /dev/null @@ -1,53 +0,0 @@ -import { getRecordPath } from "./getRecordPath" - -export const indexTables = ({ indexes, helpers }) => - indexes.map(i => indexTable(i, helpers)) - -const excludedColumns = ["id", "isNew", "key", "type", "sortKey"] - -export const indexTableProps = (index, helpers) => ({ - data: { - "##bbstate": index.nodeKey(), - "##bbsource": "store", - }, - tableClass: "table table-hover", - theadClass: "thead-dark", - columns: helpers - .indexSchema(index) - .filter(c => !excludedColumns.includes(c.name)) - .map(column), - onRowClick: [ - { - "##eventHandlerType": "Set State", - parameters: { - path: `selectedrow_${index.name}`, - value: { - "##bbstate": "key", - "##bbsource": "event", - }, - }, - }, - ], -}) - -export const getIndexTableName = (index, record) => { - record = record || index.parent().type === "record" ? index.parent() : null - - return record - ? `${getRecordPath(record)}/${index.name} Table` - : `${index.name} Table` -} - -const indexTable = (index, helpers) => ({ - name: getIndexTableName(index), - inherits: "@budibase/standard-components/table", - props: indexTableProps(index, helpers), -}) - -const column = col => ({ - title: col.name, - value: { - "##bbstate": col.name, - "##bbsource": "context", - }, -}) diff --git a/packages/bootstrap-components/src/generators/recordHomePageGenerator.js b/packages/bootstrap-components/src/generators/recordHomePageGenerator.js deleted file mode 100644 index 825db10c87..0000000000 --- a/packages/bootstrap-components/src/generators/recordHomePageGenerator.js +++ /dev/null @@ -1,183 +0,0 @@ -import { getIndexTableName, indexTables } from "./indexTablesGenerator" - -import { buttons } from "./buttonGenerators" - -export const recordHomePageComponents = ({ indexes, records, helpers }) => [ - ...recordHomepages({ indexes, records }).map(component), - - ...recordHomepages({ indexes, records }).map(homePageButtons), - - ...indexTables({ indexes, records, helpers }), - - ...buttons({ indexes, buttons, helpers }), -] - -const findIndexForRecord = (indexes, record) => { - const forRecord = indexes.filter(i => - i.allowedRecordNodeIds.includes(record.nodeId) - ) - if (forRecord.length === 0) return - if (forRecord.length === 1) return forRecord[0] - const noMap = forRecord.filter(i => !i.filter || !i.filter.trim()) - if (noMap.length === 0) forRecord[0] - return noMap[0] -} - -export const recordHomepages = ({ indexes, records }) => - records - .filter(r => r.parent().type === "root") - .map(r => ({ - record: r, - index: findIndexForRecord(indexes, r), - })) - .filter(r => r.index) - -export const homepageComponentName = record => - `${record.name}/${record.name} homepage` - -const component = ({ record, index }) => ({ - inherits: "@budibase/standard-components/container", - name: homepageComponentName(record), - props: { - className: "d-flex flex-column h-100", - children: [ - { - component: { - _component: `${record.name}/homepage buttons`, - }, - }, - { - component: { - _component: getIndexTableName(index), - }, - className: "flex-gow-1 overflow-auto", - }, - ], - onLoad: [ - { - "##eventHandlerType": "Set State", - parameters: { - path: `isEditing${record.name}`, - value: "", - }, - }, - { - "##eventHandlerType": "List Records", - parameters: { - statePath: index.nodeKey(), - indexKey: index.nodeKey(), - }, - }, - ], - }, -}) - -const homePageButtons = ({ index, record }) => ({ - inherits: "@budibase/standard-components/container", - name: `${record.name}/homepage buttons`, - props: { - className: "btn-toolbar mt-4 mb-2", - children: [ - { - component: { - _component: "@budibase/standard-components/container", - className: "btn-group mr-3", - children: [ - { - component: { - _component: "common/Default Button", - contentText: `Create ${record.name}`, - onClick: [ - { - "##eventHandlerType": "Get New Record", - parameters: { - statePath: record.name, - collectionKey: `/${record.collectionName}`, - childRecordType: record.name, - }, - }, - { - "##eventHandlerType": "Set State", - parameters: { - path: `isEditing${record.name}`, - value: "true", - }, - }, - ], - }, - }, - { - component: { - _component: "common/Default Button", - contentText: `Refresh`, - onClick: [ - { - "##eventHandlerType": "List Records", - parameters: { - statePath: index.nodeKey(), - indexKey: index.nodeKey(), - }, - }, - ], - }, - }, - ], - }, - }, - { - component: { - _component: "@budibase/standard-components/if", - condition: `$store.selectedrow_${index.name} && $store.selectedrow_${index.name}.length > 0`, - thenComponent: { - _component: "@budibase/standard-components/container", - className: "btn-group", - children: [ - { - component: { - _component: "common/Default Button", - contentText: `Edit ${record.name}`, - onClick: [ - { - "##eventHandlerType": "Load Record", - parameters: { - statePath: record.name, - recordKey: { - "##bbstate": `selectedrow_${index.name}`, - "##source": "store", - }, - }, - }, - { - "##eventHandlerType": "Set State", - parameters: { - path: `isEditing${record.name}`, - value: "true", - }, - }, - ], - }, - }, - { - component: { - _component: "common/Default Button", - contentText: `Delete ${record.name}`, - onClick: [ - { - "##eventHandlerType": "Delete Record", - parameters: { - recordKey: { - "##bbstate": `selectedrow_${index.name}`, - "##source": "store", - }, - }, - }, - ], - }, - }, - ], - }, - }, - }, - ], - }, -}) diff --git a/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js b/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js deleted file mode 100644 index 1fc7928c8f..0000000000 --- a/packages/bootstrap-components/src/generators/selectedNavContentGenerator.js +++ /dev/null @@ -1,32 +0,0 @@ -import { - recordHomepages, - homepageComponentName, - recordHomePageComponents, -} from "./recordHomePageGenerator" -import { formName, forms } from "./formsGenerator" - -export const selectNavContent = ({ indexes, records, helpers }) => [ - ...recordHomepages({ indexes, records }).map(component), - - ...recordHomePageComponents({ indexes, records, helpers }), - - ...forms({ indexes, records, helpers }), -] - -export const navContentComponentName = record => - `${record.name}/${record.name} Nav Content` - -const component = ({ record }) => ({ - inherits: "@budibase/standard-components/if", - description: `the component that gets displayed when the ${record.collectionName} nav is selected`, - name: navContentComponentName(record), - props: { - condition: `$store.isEditing${record.name}`, - thenComponent: { - _component: formName(record), - }, - elseComponent: { - _component: homepageComponentName(record), - }, - }, -}) diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index 1fc6e88105..5035222d7f 100644 --- a/packages/builder/rollup.config.js +++ b/packages/builder/rollup.config.js @@ -19,8 +19,7 @@ const _builderProxy = proxy("/_builder", { const apiProxy = proxy( [ "/_builder/api/**", - "/_builder/**/componentlibrary", - "/_builder/**/componentlibraryGenerators", + "/_builder/**/componentlibrary" ], { target, diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js index e178eb3244..ed720ad6c0 100644 --- a/packages/builder/src/builderStore/loadComponentLibraries.js +++ b/packages/builder/src/builderStore/loadComponentLibraries.js @@ -1,5 +1,3 @@ -import { map } from "lodash/fp" - export const loadLibs = async (appName, appPackage) => { const allLibraries = {} for (let lib of appPackage.pages.componentLibraries) { @@ -10,16 +8,6 @@ export const loadLibs = async (appName, appPackage) => { return allLibraries } -export const loadGeneratorLibs = async (appName, appPackage) => { - const allGeneratorLibs = {} - for (let lib of appPackage.pages.componentLibraries) { - const generatorModule = await import(makeGeneratorLibraryUrl(appName, lib)) - allGeneratorLibs[lib] = generatorModule - } - - return allGeneratorLibs -} - export const loadLibUrls = (appName, appPackage) => { const allLibraries = [] for (let lib of appPackage.pages.componentLibraries) { @@ -35,13 +23,5 @@ export const loadLib = async (appName, lib, allLibs) => { return allLibs } -export const loadGeneratorLib = async (appName, lib, allGeneratorLibs) => { - allGeneratorLibs[lib] = await import(makeGeneratorLibraryUrl(appName, lib)) - return allGeneratorLibs -} - export const makeLibraryUrl = (appName, lib) => `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}` - -export const makeGeneratorLibraryUrl = (appName, lib) => - `/_builder/${appName}/componentlibraryGenerators?lib=${encodeURI(lib)}` diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index ead7e51109..97a49b2fdc 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -35,13 +35,10 @@ import { import { expandComponentDefinition } from "../userInterface/pagesParsing/types" import { loadLibs, - loadLibUrls, - loadGeneratorLibs, + loadLibUrls } from "./loadComponentLibraries" import { buildCodeForScreens } from "./buildCodeForScreens" import { generate_screen_css } from "./generate_css" -import { insertCodeMetadata } from "./insertCodeMetadata" -// import { uuid } from "./uuid" let appname = "" @@ -94,7 +91,6 @@ export const getStore = () => { store.deleteLevel = deleteLevel(store) store.setActiveNav = setActiveNav(store) store.saveScreen = saveScreen(store) - store.refreshComponents = refreshComponents(store) store.addComponentLibrary = addComponentLibrary(store) store.renameScreen = renameScreen(store) store.deleteScreen = deleteScreen(store) @@ -159,8 +155,6 @@ const initialise = (store, initial) => async () => { } initial.libraries = await loadLibs(appname, pkg) - - initial.generatorLibraries = await loadGeneratorLibs(appname, pkg) initial.loadLibraryUrls = () => loadLibUrls(appname, pkg) initial.appname = appname initial.pages = pkg.pages @@ -168,7 +162,6 @@ const initialise = (store, initial) => async () => { initial.hierarchy = pkg.appDefinition.hierarchy initial.accessLevels = pkg.accessLevels initial.screens = values(pkg.screens) - initial.generators = generatorsArray(pkg.components.generators) initial.components = values(pkg.components.components).map( expandComponentDefinition ) @@ -187,9 +180,6 @@ const initialise = (store, initial) => async () => { return initial } -const generatorsArray = generators => - pipe(generators, [keys, filter(k => k !== "_lib"), map(k => generators[k])]) - const showSettings = store => () => { store.update(s => { s.showSettings = !s.showSettings @@ -683,27 +673,6 @@ const removeStylesheet = store => stylesheet => { }) } -const refreshComponents = store => async () => { - const componentsAndGenerators = await api - .get(`/_builder/api/${appname}/components`) - .then(r => r.json()) - - const components = pipe(componentsAndGenerators.components, [ - keys, - map(k => ({ ...componentsAndGenerators[k], name: k })), - map(c => expandComponentDefinition(c)), - ]) - - store.update(s => { - s.components = pipe(s.components, [ - filter(c => !isRootComponent(c)), - concat(components), - ]) - s.generators = componentsAndGenerators.generators - return s - }) -} - const _savePage = async s => { const page = s.pages[s.currentPageName] @@ -749,19 +718,25 @@ const setCurrentPage = store => pageName => { const getContainerComponent = components => components.find(c => c.name === "@budibase/standard-components/container") -const addChildComponent = store => componentName => { - store.update(s => { - const component = componentName.startsWith("##") - ? getBuiltin(componentName) - : s.components.find(c => c.name === componentName) - const newComponent = createProps(component) +/** + * @param {string} componentToAdd - name of the component to add to the application + * @param {string} presetName - name of the component preset if defined + */ +const addChildComponent = store => (componentToAdd, presetName) => { + store.update(state => { + const component = componentToAdd.startsWith("##") + ? getBuiltin(componentToAdd) + : state.components.find(({ name }) => name === componentToAdd) + const presetProps = presetName ? component.presets[presetName] : {}; + const newComponent = createProps(component, presetProps); - s.currentComponentInfo._children = s.currentComponentInfo._children.concat( + state.currentComponentInfo._children = state.currentComponentInfo._children.concat( newComponent.props ) - _savePage(s) - return s + _savePage(state) + + return state }) } diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte index 5f57244250..99836cc7ca 100644 --- a/packages/builder/src/common/PlusButton.svelte +++ b/packages/builder/src/common/PlusButton.svelte @@ -1,4 +1,8 @@ - + diff --git a/packages/builder/src/userInterface/ComponentsList.svelte b/packages/builder/src/userInterface/ComponentsList.svelte deleted file mode 100644 index fb00d3e4aa..0000000000 --- a/packages/builder/src/userInterface/ComponentsList.svelte +++ /dev/null @@ -1,158 +0,0 @@ - - -
- {#each componentLibraries as lib} -
{lib.libName}
- -
- - - {#each $store.builtins.concat(lib.components.filter(_ => true)) as component} -
onComponentChosen(component.name)}> -
{splitName(component.name).componentName}
-
- {/each} - -
- {/each} - -
- - diff --git a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte index 5df2d0d1bb..d163acc9ae 100644 --- a/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte @@ -1,7 +1,7 @@ @@ -53,17 +55,19 @@ class="uk-input uk-form-small" value={bindingFallbackValue || bindingPath} on:change={e => { - setBindingFallback(e.target.value); - onChanged(e.target.value); + setBindingFallback(e.target.value) + onChanged(e.target.value) }} /> - + {#if stateBindings.length} + + {/if} {#if isOpen}