MD components library - empty proj (#61)

Added a shell Material Design components packages

packages/materialdesign-components/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+yarn.lock
+package-lock.json
+dist/index.js

packages/materialdesign-components/README.md

@@ -0,0 +1,33 @@
+*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
+
+---
+
+# 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
+
+
+## Setting up
+
+* Run `npm init` (or `yarn init`)
+* Replace this README with your own
+
+
+## Consuming components
+
+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.

packages/materialdesign-components/components.json

@@ -0,0 +1,12 @@
+{
+	"_lib": "./dist/index.js",
+	"h1": {
+		"name": "H1",
+		"description": "An HTML H1 tag",
+		"props" : {
+			"text": "string",
+			"className":"string"
+		},
+		"tags": []
+	}
+}

packages/materialdesign-components/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@budibase/materialdesign-components",
+  "svelte": "src/index.svelte",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "rollup -c && rollup -c rollup.generatorsconfig.js",
+    "prepublishOnly": "npm run build",
+    "testbuild": "rollup -w -c rollup.testconfig.js",
+    "dev": "run-p start:dev testbuild",
+    "start:dev": "sirv public --single --dev",
+    "publishdev": "yarn build && node ./scripts/publishDev.js"
+  },
+  "devDependencies": {
+    "@budibase/client": "^0.0.15",
+    "@nx-js/compiler-util": "^2.0.0",
+    "fs-extra": "^8.1.0",
+    "lodash": "^4.17.15",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^1.11.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-svelte": "^5.0.0",
+    "rollup-plugin-terser": "^5.1.1",
+    "shortid": "^2.2.15",
+    "sirv-cli": "^0.4.4",
+    "svelte": "^3.12.1"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "version": "0.0.15",
+  "license": "MIT",
+  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
+}

packages/materialdesign-components/public/bundle.css

@@ -0,0 +1,3 @@
+#current_component.svelte-uuhis1{height:100%;width:100%}
+
+/*# sourceMappingURL=bundle.css.map */

packages/materialdesign-components/public/bundle.css.map

@@ -0,0 +1,12 @@
+{
+  "version": 3,
+  "file": "bundle.css",
+  "sources": [
+    "..\\src\\Test\\TestApp.svelte"
+  ],
+  "sourcesContent": [
+    "<script>\r\nimport createApp from \"./createApp\";\r\nimport { props } from \"./props\";\r\n\r\nlet _bb;\r\n\r\nconst _appPromise = createApp();\r\n_appPromise.then(a => _bb = a);\r\n\r\nconst testProps = props.justAnH1;\r\n\r\nlet currentComponent;\r\n\r\n$: {\r\n    if(_bb && currentComponent) {\r\n        _bb.hydrateChildren(testProps._children, currentComponent);\r\n    }\r\n}\r\n\r\n\r\n\r\n</script>\r\n\r\n{#await _appPromise}\r\nloading\r\n{:then _bb}\r\n\r\n<div id=\"current_component\" bind:this={currentComponent}>\r\n</div>\r\n\r\n{/await}\r\n\r\n\r\n<style>\r\n#current_component {\r\n    height: 100%;\r\n    width: 100%;\r\n}\r\n</style>\r\n\r\n"
+  ],
+  "names": [],
+  "mappings": "AAkCA,kBAAkB,cAAC,CAAC,AAChB,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,AACf,CAAC"
+}

packages/materialdesign-components/public/clientAppDefinition.js

@@ -0,0 +1 @@
+window['##BUDIBASE_APPDEFINITION##'] = {"hierarchy":{"name":"root","type":"root","children":[{"name":"customer","type":"record","fields":[{"name":"name","type":"string","typeOptions":{"maxLength":1000,"values":null,"allowDeclaredValuesOnly":false},"label":"name","getInitialValue":"default","getUndefinedValue":"default"}],"children":[{"name":"invoiceyooo","type":"record","fields":[{"name":"amount","type":"number","typeOptions":{"minValue":99999999999,"maxValue":99999999999,"decimalPlaces":2},"label":"amount","getInitialValue":"default","getUndefinedValue":"default"}],"children":[],"validationRules":[],"nodeId":2,"indexes":[],"allidsShardFactor":1,"collectionName":"invoices","isSingle":false}],"validationRules":[],"nodeId":1,"indexes":[{"name":"customer_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":5}],"allidsShardFactor":64,"collectionName":"customers","isSingle":false}],"pathMaps":[],"indexes":[{"name":"Yeo index","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[1],"nodeId":4},{"name":"everyones_invoices","type":"index","map":"return {...record};","filter":"","indexType":"ancestor","getShardName":"","getSortKey":"record.id","aggregateGroups":[],"allowedRecordNodeIds":[2],"nodeId":6}],"nodeId":0},"componentLibraries":["budibase-standard-components"],"appRootPath":"/testApp2","props":{}}

packages/materialdesign-components/public/global.css

@@ -0,0 +1,62 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

packages/materialdesign-components/public/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/bundle.css'>
+
+</head>
+
+<body>
+	<script src='/bundle.js'></script>
+</body>
+</html>

packages/materialdesign-components/rollup.config.js

@@ -0,0 +1,20 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+	input: 'src/index.js',
+	output: [
+		{ 
+			file: "dist/index.js", 
+			format: 'esm', 
+			name:"budibaseStandardComponents",
+			sourcemap: "inline"
+		}
+	],
+	plugins: [
+		svelte({
+			hydratable:true
+		}),
+		resolve()
+	]
+};

packages/materialdesign-components/rollup.testconfig.js

@@ -0,0 +1,89 @@
+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';
+
+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"];
+
+const lodash_exports = [
+    "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"
+];
+
+export default {
+	input: 'src/Test/testMain.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/bundle.js'
+	},
+	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
+		}),
+
+		// 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);
+			}
+		}),
+		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'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};

packages/materialdesign-components/scripts/publishDev.js

@@ -0,0 +1,63 @@
+const { readdir, stat, copyFile } = require("fs-extra");
+const { constants } = require("fs");
+const { join, basename } = require("path");
+const serverConfig = require("../../server/config")();
+
+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", serverConfig.latestPackagesFolder);
+
+const publicMain = appName => join(appPackages, appName, "public", "main", "lib", "node_modules", "@budibase", "standard-components");
+const publicUnauth = appName => join(appPackages, appName, "public", "unauthenticated", "lib", "node_modules", "@budibase", "standard-components");
+const nodeModulesDist = appName => join(appPackages, appName, "node_modules", "@budibase", "standard-components", "dist");
+const nodeModules = appName => join(appPackages, appName, "node_modules", "@budibase", "standard-components");
+
+(async () => {
+
+    const apps = await readdir(appPackages);
+
+    const copySource = file => async toDir => {
+        const dest = join(toDir, basename(file));
+        try {
+            await copyFile(file, dest, constants.COPYFILE_FICLONE);
+            console.log(`COPIED ${file} to ${dest}`);
+        } catch(e) {
+            console.log(`COPY FAILED ${file} to ${dest}: ${e}`);
+        }
+    }
+
+    const copySourceJs = copySource(sourceJs);
+    const copySourceJsMap = copySource(sourceJsMap);
+    const copyGenerators = copySource(sourceGenerators);
+    const copyComponentsJson = copySource(componentsFile);
+    
+
+    for(let app of apps) {
+        if(app === ".data") continue;
+        if(!(await stat(join(appPackages, app))).isDirectory()) continue;
+
+        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"));
+    }
+
+})();

packages/materialdesign-components/src/H1.svelte

@@ -0,0 +1,12 @@
+<script>
+export let text="";
+export let className=""
+
+export let _bb;
+
+
+</script>
+
+<h1 class={className}>
+    {text}
+</h1>

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

@@ -0,0 +1,40 @@
+<script>
+import createApp from "./createApp";
+import { props } from "./props";
+
+let _bb;
+
+const _appPromise = createApp();
+_appPromise.then(a => _bb = a);
+
+const testProps = props.justAnH1;
+
+let currentComponent;
+
+$: {
+    if(_bb && currentComponent) {
+        _bb.hydrateChildren(testProps._children, currentComponent);
+    }
+}
+
+
+
+</script>
+
+{#await _appPromise}
+loading
+{:then _bb}
+
+<div id="current_component" bind:this={currentComponent}>
+</div>
+
+{/await}
+
+
+<style>
+#current_component {
+    height: 100%;
+    width: 100%;
+}
+</style>
+

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

@@ -0,0 +1,18 @@
+import { createApp } from "@budibase/client/src/createApp";
+import componentsJson from "../../components.json";
+import packageJson from "../../package.json";
+
+export default async () =>  {
+
+    const components = {...componentsJson};
+    delete components._lib;
+
+    componentLibraries[packageJson.name] = components;
+
+    const appDef = {hierarchy:{}, actions:{}};
+    const user = {name:"yeo", permissions:[]};
+   
+    var app = createApp(componentLibraries, appDef, user);
+    return app;
+
+}

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

@@ -0,0 +1,9 @@
+
+export const props = {
+
+    justAnH1 : {
+        _component:"@budibase/materialdesign-components/h1",
+        text: "This is a Header"
+    }
+
+}

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

@@ -0,0 +1,7 @@
+import App from './TestApp.svelte';
+
+const app = new App({
+	target: document.body,
+});
+
+export default app;

packages/materialdesign-components/src/buildStyle.js

@@ -0,0 +1,9 @@
+export const buildStyle = (styles) => {
+    let str = "";
+    for(let s in styles) {
+        if(styles[s]) {
+            str += `${s}: ${styles[s]}; `
+        }
+    }
+    return str;
+}

packages/materialdesign-components/src/index.js

@@ -0,0 +1 @@
+export {default as h1} from  "./H1.svelte";