Merge pull request #112 from mjashanks/master

A few builder bugfixes, discovered when trying to use another component lib (MD)

packages/builder/src/builderStore/loadComponentLibraries.js

@@ -1,6 +1,11 @@
+import { flatten, values, uniq, map } from "lodash/fp"
+import { pipe } from "../common/core"
+
 export const loadLibs = async (appName, appPackage) => {
   const allLibraries = {}
-  for (let lib of appPackage.pages.componentLibraries) {
+
+  for (let lib of libsFromPages(appPackage.pages)) {
+    
     const libModule = await import(makeLibraryUrl(appName, lib))
     allLibraries[lib] = libModule
   }
@@ -10,7 +15,7 @@ export const loadLibs = async (appName, appPackage) => {
 
 export const loadLibUrls = (appName, appPackage) => {
   const allLibraries = []
-  for (let lib of appPackage.pages.componentLibraries) {
+  for (let lib of libsFromPages(appPackage.pages)) {
     const libUrl = makeLibraryUrl(appName, lib)
     allLibraries.push({ libName: lib, importPath: libUrl })
   }
@@ -25,3 +30,11 @@ export const loadLib = async (appName, lib, allLibs) => {
 
 export const makeLibraryUrl = (appName, lib) =>
   `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}`
+
+export const libsFromPages = pages => pipe(pages, [
+  values,
+  map(p => p.componentLibraries),
+  flatten,
+  uniq
+])
+

packages/builder/src/builderStore/store.js

@@ -140,8 +140,6 @@ const initialise = (store, initial) => async () => {
   ])
 
   pkg.pages = {
-    componentLibraries: ["@budibase/standard-components"],
-    stylesheets: [],
     main: {
       ...pkg.pages.main,
       _screens: Object.values(main_screens),

packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte

@@ -38,7 +38,7 @@
         class="item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 67}px">
-        <span class="item-name">{get_capitalised_name(component._component)}</span>
+        <div>{get_capitalised_name(component._component)}</div>
         <div class="reorder-buttons">
           {#if index > 0}
           <button on:click|stopPropagation={() => onMoveUpComponent(component)}>
@@ -87,8 +87,8 @@
   }
 
   .item {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: 1fr auto auto auto;
     padding: 0px 5px 0px 67px;
     margin: auto 0px;
     border-radius: 3px;
@@ -96,14 +96,10 @@
     align-items: center;
   }
 
-  .item > span {
-    width: 1px;
-    flex: 1 1 auto;
-  }
-
   .item button {
     display: none;
     height: 20px;
+    width: 30px;
     color: var(--slate);
     padding: 0px 5px;
   }
@@ -136,7 +132,8 @@
 
   .reorder-buttons > button {
     flex: 1 1 auto;
-    height: 17px
+    height: 17px;
+    width: 30px;
   }
 
 </style>

packages/builder/src/userInterface/SettingsView.svelte

@@ -5,7 +5,7 @@
   import IconButton from "../common/IconButton.svelte"
   import { libraryDependencies } from "./pagesParsing/findDependencies"
   import UIkit from "uikit"
-
+  import { libsFromPages } from "../builderStore/loadComponentLibraries"
   let addNewLib = ""
   let addNewStylesheet = ""
   let modalElement
@@ -61,7 +61,7 @@
             <Button color="primary-outline" on:click={addLib}>Add</Button>
           </span>
         </p>
-        {#each $store.pages.componentLibraries as lib}
+        {#each $store.pages[$store.currentPageName].componentLibraries as lib}
           <div>
             <span class="row-text">{lib}</span>
             <IconButton icon="x" on:click={() => removeLibrary(lib)} />
@@ -79,7 +79,7 @@
             </Button>
           </span>
         </p>
-        {#each $store.pages.stylesheets as stylesheet}
+        {#each $store.pages[$store.currentPageName].stylesheets as stylesheet}
           <div>
             <span class="row-text">{stylesheet}</span>
             <IconButton

packages/cli/src/commands/new/appPackageTemplate/package.json

@@ -8,6 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@budibase/standard-components": "^0.0.3"
+    "@budibase/standard-components": "^0.0.3",
+    "@budibase/materialdesign-components": "^0.0.16"
   }
 }

packages/cli/src/commands/new/appPackageTemplate/pages.json

@@ -1,14 +0,0 @@
-{
-  "main": {
-    "index": {},
-    "appBody": ""
-  },
-  "unauthenticated": {
-    "index": {},
-    "appBody": ""
-  },
-  "componentLibraries": [
-    "@budibase/standard-components"
-  ],
-  "stylesheets": []
-}

packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json

@@ -2,7 +2,7 @@
 	"title": "Test App",
 	"favicon": "./_shared/favicon.png",
 	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
 		"_component": "@budibase/standard-components/container",
 		"_children": [],

packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json

@@ -2,7 +2,7 @@
 	"title": "Test App",
 	"favicon": "./_shared/favicon.png",
 	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
 		"_component": "@budibase/standard-components/container",
 		"_children": [],

packages/materialdesign-components/package.json

@@ -36,7 +36,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
   "dependencies": {

packages/materialdesign-components/scripts/publishDev.js

@@ -26,7 +26,7 @@ const publicMain = appName =>
     "lib",
     "node_modules",
     "@budibase",
-    "standard-components"
+    "materialdesign-components"
   )
 const publicUnauth = appName =>
   join(
@@ -37,7 +37,7 @@ const publicUnauth = appName =>
     "lib",
     "node_modules",
     "@budibase",
-    "standard-components"
+    "materialdesign-components"
   )
 const nodeModulesDist = appName =>
   join(
@@ -45,11 +45,18 @@ const nodeModulesDist = appName =>
     appName,
     "node_modules",
     "@budibase",
-    "standard-components",
+    "materialdesign-components",
     "dist"
   )
+
 const nodeModules = appName =>
-  join(appPackages, appName, "node_modules", "@budibase", "standard-components")
+  join(
+    appPackages,
+    appName,
+    "node_modules",
+    "@budibase",
+    "materialdesign-components"
+  )
 
 ;(async () => {
   const apps = await readdir(appPackages)