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

@@ -1,12 +1,20 @@
 {
-	"_lib": "./dist/index.js",
-	"h1": {
-		"name": "H1",
-		"description": "An HTML H1 tag",
-		"props" : {
-			"text": "string",
-			"className":"string"
-		},
-		"tags": []
-	}
-}
+  "_lib": "./dist/index.js",
+  "h1": {
+    "name": "H1",
+    "description": "An HTML H1 tag",
+    "props": {
+      "text": "string",
+      "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,20 +1,37 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from 'rollup-plugin-node-resolve';
+import svelte from "rollup-plugin-svelte";
+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',
-	output: [
-		{ 
-			file: "dist/index.js", 
-			format: 'esm', 
-			name:"budibaseStandardComponents",
-			sourcemap: "inline"
-		}
-	],
-	plugins: [
-		svelte({
-			hydratable:true
-		}),
-		resolve()
-	]
+  input: "src/index.js",
+  output: [
+    {
+      file: "dist/index.js",
+      format: "esm",
+      name: "budibaseStandardComponents",
+      sourcemap: "inline"
+    }
+  ],
+  plugins: [
+    svelte({
+      hydratable: true
+    }),
+    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,93 +1,149 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import livereload from 'rollup-plugin-livereload';
-import { terser } from 'rollup-plugin-terser';
-import json from 'rollup-plugin-json';
+import svelte from "rollup-plugin-svelte";
+import resolve from "rollup-plugin-node-resolve";
+import commonjs from "rollup-plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+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",
-    "last", "union", "reduce", "isObject",
-    "cloneDeep", "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"];
+  "find",
+  "isUndefined",
+  "split",
+  "max",
+  "last",
+  "union",
+  "reduce",
+  "isObject",
+  "cloneDeep",
+  "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",
-    "tail", "findIndex", "startsWith", 
-    "dropRight", "takeRight", 
-    "trim", "split", "replace", 
-    "merge", "assign"];
+  "flow",
+  "head",
+  "find",
+  "each",
+  "tail",
+  "findIndex",
+  "startsWith",
+  "dropRight",
+  "takeRight",
+  "trim",
+  "split",
+  "replace",
+  "merge",
+  "assign"
+];
 
 const coreExternal = [
-	"lodash", "lodash/fp", "date-fns",
-	"lunr", "safe-buffer", "shortid",
-	"@nx-js/compiler-util", "bcryptjs"
+  "lodash",
+  "lodash/fp",
+  "date-fns",
+  "lunr",
+  "safe-buffer",
+  "shortid",
+  "@nx-js/compiler-util",
+  "bcryptjs"
 ];
 
 export default {
-	input: 'src/Test/testMain.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/bundle.js',
-		globals: {
-			"crypto": "crypto"
-		}
-	},
-	plugins: [
-		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');
-			},
-			
-			hydratable:true
-		}),
+  input: "src/Test/testMain.js",
+  output: {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: "public/bundle.js",
+    globals: {
+      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");
+      },
+
+      hydratable: true
+    }),
 
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration —
-		// consult the documentation for details:
-		// https://github.com/rollup/rollup-plugin-commonjs
-		resolve({
-			browser: true,
-			dedupe: importee => {
-				return importee === 'svelte' 
-					   || importee.startsWith('svelte/')
-					   || coreExternal.includes(importee);
-			},
-			preferBuiltins: true
-		}),
-		commonjs({
-			namedExports: {
-				"lodash/fp": lodash_fp_exports,
-				"lodash":lodash_exports,
-				"shortid": ["generate"]
-			}
-		}),
-		json(),
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration —
+    // consult the documentation for details:
+    // https://github.com/rollup/rollup-plugin-commonjs
+    resolve({
+      browser: true,
+      dedupe: importee => {
+        return (
+          importee === "svelte" ||
+          importee.startsWith("svelte/") ||
+          coreExternal.includes(importee)
+        );
+      },
+      preferBuiltins: true
+    }),
+    commonjs({
+      namedExports: {
+        "lodash/fp": lodash_fp_exports,
+        lodash: lodash_exports,
+        shortid: ["generate"]
+      }
+    }),
+    json(),
 
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  }
 };

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

@@ -1,40 +1,35 @@
 <script>
-import createApp from "./createApp";
-import { props } from "./props";
+  import createApp from "./createApp";
+  import { props } from "./props";
 
-let _bb;
+  let _bb;
 
-const _appPromise = createApp();
-_appPromise.then(a => _bb = a);
+  const _appPromise = createApp();
+  _appPromise.then(a => (_bb = a));
 
-const testProps = props.justAnH1;
+  const testProps = props.justAnH1;
+  const button = props.button;
 
-let currentComponent;
+  let currentComponent;
 
-$: {
-    if(_bb && currentComponent) {
-        _bb.hydrateChildren([testProps], currentComponent);
+  $: {
+    if (_bb && currentComponent) {
+      _bb.hydrateChildren([testProps, button], currentComponent);
     }
-}
-
-
-
+  }
 </script>
 
-{#await _appPromise}
-loading
-{:then _bb}
-
-<div id="current_component" bind:this={currentComponent}>
-</div>
-
-{/await}
-
-
 <style>
-#current_component {
+  #current_component {
     height: 100%;
     width: 100%;
-}
+  }
 </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"
-    }
-
-}
+  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 h1 } from "./H1.svelte";
+export { default as button } from "./Button.svelte";