Aliasing config and additional test button component for test app (#66)

* Fix for field modal infinite render loop once closed from click away

* Added rollupgenerators to md to keep builder happy

* Beginning the button component and general setup

* Aliasing config and additional test button component for test app

packages/materialdesign-components/components.json

@@ -8,5 +8,13 @@
       "className": "string"
     },
     "tags": []
+  },
+  "button": {
+    "name": "Button",
+    "description": "A button",
+    "props": {
+      "raised": "bool"
+    },
+    "tags": []
   }
 }

packages/materialdesign-components/package.json

@@ -13,18 +13,22 @@
   },
   "devDependencies": {
     "@budibase/client": "^0.0.16",
+    "@material/button": "^4.0.0",
     "@nx-js/compiler-util": "^2.0.0",
     "bcryptjs": "^2.4.3",
     "fs-extra": "^8.1.0",
     "lodash": "^4.17.15",
     "npm-run-all": "^4.1.5",
     "rollup": "^1.11.0",
+    "rollup-plugin-alias": "^2.2.0",
     "rollup-plugin-commonjs": "^10.0.2",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-livereload": "^1.0.1",
     "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-postcss": "^2.0.5",
     "rollup-plugin-svelte": "^5.0.0",
     "rollup-plugin-terser": "^5.1.1",
+    "sass": "^1.25.1-test.1",
     "shortid": "^2.2.15",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.12.1"

packages/materialdesign-components/rollup.config.js

@@ -1,12 +1,28 @@
-import svelte from 'rollup-plugin-svelte';
+import svelte from "rollup-plugin-svelte";
-import resolve from 'rollup-plugin-node-resolve';
+import postcss from "rollup-plugin-postcss";
+import resolve from "rollup-plugin-node-resolve";
+import path from "path";
+
+const postcssOptions = () => ({
+  extensions: [".scss", ".sass"],
+  extract: false,
+  minimize: true,
+  use: [
+    [
+      "sass",
+      {
+        includePaths: ["./node_modules"]
+      }
+    ]
+  ]
+});
 
 export default {
-	input: 'src/index.js',
+  input: "src/index.js",
   output: [
     {
       file: "dist/index.js",
-			format: 'esm', 
+      format: "esm",
       name: "budibaseStandardComponents",
       sourcemap: "inline"
     }
@@ -15,6 +31,7 @@ export default {
     svelte({
       hydratable: true
     }),
-		resolve()
+    resolve(),
+    postcss(postcssOptions())
   ]
 };

packages/materialdesign-components/rollup.generatorsconfig.js

@@ -0,0 +1,14 @@
+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()]
+};

packages/materialdesign-components/rollup.testconfig.js

@@ -1,56 +1,110 @@
-import svelte from 'rollup-plugin-svelte';
+import svelte from "rollup-plugin-svelte";
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from "rollup-plugin-node-resolve";
-import commonjs from 'rollup-plugin-commonjs';
+import commonjs from "rollup-plugin-commonjs";
-import livereload from 'rollup-plugin-livereload';
+import livereload from "rollup-plugin-livereload";
-import { terser } from 'rollup-plugin-terser';
+import { terser } from "rollup-plugin-terser";
-import json from 'rollup-plugin-json';
+import json from "rollup-plugin-json";
+import alias from "rollup-plugin-alias";
+import path from "path";
+
+const aliases = {
+  resolve: [".js", ".svelte"],
+  entries: [
+    { find: "@BBMD", replacement: path.resolve(__dirname, "dist/index.js") }
+  ]
+};
 
 const production = !process.env.ROLLUP_WATCH;
 
 const lodash_fp_exports = [
-    "find", "isUndefined", "split", "max",
+  "find",
-    "last", "union", "reduce", "isObject",
+  "isUndefined",
-    "cloneDeep", "some", "isArray", "map",
+  "split",
-    "filter", "keys", "isFunction", "isEmpty",
+  "max",
-    "countBy", "join", "includes", "flatten",
+  "last",
-    "constant", "first", "intersection", "take",
+  "union",
-    "has", "mapValues", "isString", "isBoolean",
+  "reduce",
-    "isNull", "isNumber", "isObjectLike", "isDate",
+  "isObject",
-    "clone", "values", "keyBy", "isNaN",
+  "cloneDeep",
-    "isInteger", "toNumber"];
+  "some",
+  "isArray",
+  "map",
+  "filter",
+  "keys",
+  "isFunction",
+  "isEmpty",
+  "countBy",
+  "join",
+  "includes",
+  "flatten",
+  "constant",
+  "first",
+  "intersection",
+  "take",
+  "has",
+  "mapValues",
+  "isString",
+  "isBoolean",
+  "isNull",
+  "isNumber",
+  "isObjectLike",
+  "isDate",
+  "clone",
+  "values",
+  "keyBy",
+  "isNaN",
+  "isInteger",
+  "toNumber"
+];
 
 const lodash_exports = [
-    "flow", "head",  "find","each",
+  "flow",
-    "tail", "findIndex", "startsWith", 
+  "head",
-    "dropRight", "takeRight", 
+  "find",
-    "trim", "split", "replace", 
+  "each",
-    "merge", "assign"];
+  "tail",
+  "findIndex",
+  "startsWith",
+  "dropRight",
+  "takeRight",
+  "trim",
+  "split",
+  "replace",
+  "merge",
+  "assign"
+];
 
 const coreExternal = [
-	"lodash", "lodash/fp", "date-fns",
+  "lodash",
-	"lunr", "safe-buffer", "shortid",
+  "lodash/fp",
-	"@nx-js/compiler-util", "bcryptjs"
+  "date-fns",
+  "lunr",
+  "safe-buffer",
+  "shortid",
+  "@nx-js/compiler-util",
+  "bcryptjs"
 ];
 
 export default {
-	input: 'src/Test/testMain.js',
+  input: "src/Test/testMain.js",
   output: {
     sourcemap: true,
-		format: 'iife',
+    format: "iife",
-		name: 'app',
+    name: "app",
-		file: 'public/bundle.js',
+    file: "public/bundle.js",
     globals: {
-			"crypto": "crypto"
+      crypto: "crypto"
     }
   },
   plugins: [
+    alias(aliases),
     svelte({
       // enable run-time checks when not in production
       dev: !production,
       // we'll extract any component CSS out into
       // a separate file — better for performance
       css: css => {
-				css.write('public/bundle.css');
+        css.write("public/bundle.css");
       },
 
       hydratable: true
@@ -64,24 +118,26 @@ export default {
     resolve({
       browser: true,
       dedupe: importee => {
-				return importee === 'svelte' 
+        return (
-					   || importee.startsWith('svelte/')
+          importee === "svelte" ||
-					   || coreExternal.includes(importee);
+          importee.startsWith("svelte/") ||
+          coreExternal.includes(importee)
+        );
       },
       preferBuiltins: true
     }),
     commonjs({
       namedExports: {
         "lodash/fp": lodash_fp_exports,
-				"lodash":lodash_exports,
+        lodash: lodash_exports,
-				"shortid": ["generate"]
+        shortid: ["generate"]
       }
     }),
     json(),
 
     // Watch the `public` directory and refresh the
     // browser on changes when not in production
-		!production && livereload('public'),
+    !production && livereload("public"),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify

packages/materialdesign-components/src/Button.svelte

@@ -0,0 +1,12 @@
+<script>
+  import "@material/button/mdc-button.scss";
+  export let raised = false;
+
+  let c = raised ? "mdc-button mdc-button--raised" : "mdc-button";
+</script>
+
+<button class={c}>
+  <div class="mdc-button__ripple" />
+
+  <span class="mdc-button__label">Button</span>
+</button>

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -5,32 +5,20 @@ import { props } from "./props";
   let _bb;
 
   const _appPromise = createApp();
-_appPromise.then(a => _bb = a);
+  _appPromise.then(a => (_bb = a));
 
   const testProps = props.justAnH1;
+  const button = props.button;
 
   let currentComponent;
 
   $: {
     if (_bb && currentComponent) {
-        _bb.hydrateChildren([testProps], currentComponent);
+      _bb.hydrateChildren([testProps, button], currentComponent);
     }
   }
-
-
-
 </script>
 
-{#await _appPromise}
-loading
-{:then _bb}
-
-<div id="current_component" bind:this={currentComponent}>
-</div>
-
-{/await}
-
-
 <style>
   #current_component {
     height: 100%;
@@ -38,3 +26,10 @@ loading
   }
 </style>
 
+{#await _appPromise}
+  loading
+{:then _bb}
+
+  <div id="current_component" bind:this={currentComponent} />
+
+{/await}

packages/materialdesign-components/src/Test/props.js

@@ -1,10 +1,12 @@
-
 export const props = {
-
   justAnH1: {
     _component: "@budibase/materialdesign-components/h1",
     _children: [],
     text: "This is a Header"
+  },
+  button: {
+    _component: "@budibase/materialdesign-components/button",
+    _children: [],
+    raised: true
   }
-
+};
-}

packages/materialdesign-components/src/Test/testComponents.js

@@ -1,3 +1,4 @@
 import h1 from "../H1.svelte";
+import { button } from "@BBMD";
 
-export default {h1};
+export default { h1, button };

packages/materialdesign-components/src/index.js

@@ -1,2 +1,3 @@
 export { default as h1 } from "./H1.svelte";
+export { default as button } from "./Button.svelte";