Merge pull request #106 from Conor-Mack/feature/md-components-json

Completed MD Components JSON and Tidyup

packages/materialdesign-components/components.json

@@ -1,20 +1,183 @@
 {
   "_lib": "./dist/index.js",
-  "h1": {
+  "_generators": {},
-    "name": "H1",
+  "body1": {
-    "description": "An HTML H1 tag",
+    "name": "body1",
+    "description": "Sets the font properties as Roboto Body 1",
     "props": {
-      "text": "string",
+      "text": "string"
-      "className": "string"
+    }, 
+    "tags": []
+  },
+  "body2": {
+    "name": "body2",
+    "description": "Sets the font properties as Roboto Body 2",
+    "props": {
+      "text": "string"
     }, 
     "tags": []
   },
   "button": {
-    "name": "Button",
+    "name": "button",
-    "description": "A button",
+    "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
     "props": {
-      "raised": "bool"
+      "onClick": "event",
+      "variant": "string",
+      "colour": "string",
+      "size": "string",
+      "href": "string",
+      "icon": "string",
+      "trailingIcon": "bool",
+      "fullwidth": "bool",
+      "text": "string",
+      "disabled": "bool"
+    },
+    "tags": []
+  },
+  "caption": {
+    "name": "caption",
+    "description": "Sets the font properties as Roboto Caption",
+    "props": {
+      "text": "string"
+    }, 
+    "tags": []
+  },
+  "checkbox": {
+    "name": "checkbox",
+    "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
+    "props": {
+      "onClick": "event",
+      "id": "string",
+      "label": "string",
+      "disabled": "bool",
+      "alignEnd": "bool",
+      "indeterminate": "bool",
+      "checked": "bool"
+    },
+    "tags": []
+  },
+  "h1": {
+    "name": "h1",
+    "description": "Sets the font properties as Roboto Headline1",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "h2": {
+    "name": "h2",
+    "description": "Sets the font properties as Roboto Headline2",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "h3": {
+    "name": "h3",
+    "description": "Sets the font properties as Roboto Headline3",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "h4": {
+    "name": "h4",
+    "description": "Sets the font properties as Roboto Headline4",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "h5": {
+    "name": "h5",
+    "description": "Sets the font properties as Roboto Headline5",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "h6": {
+    "name": "h6",
+    "description": "Sets the font properties as Roboto Headline6",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "label": {
+    "name": "label",
+    "description": "A simple label component that displays its text in the standard Roboto Material Design font",
+    "props": {
+      "bold": "bool"
+    },
+    "tags": []
+  },
+  "overline": {
+    "name": "overline",
+    "description": "Sets the font properties as Roboto Overline",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "radiobutton": {
+    "name": "radiobutton",
+    "description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
+    "props": {
+      "onClick": "event",
+      "id": "string",
+      "label": "string",
+      "names": "string",
+      "name": "string",
+      "checked": "bool",
+      "disabled": "bool",
+      "alignEnd": "bool"
+    },
+    "tags": []
+  },
+  "sub1": {
+    "name": "sub1",
+    "description": "Sets the font properties as Roboto Subtitle1",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "sub2": {
+    "name": "sub2",
+    "description": "Sets the font properties as Roboto Subtitle2",
+    "props": {
+      "text": "string"
+    },
+    "tags": []
+  },
+  "textfield": {
+    "name": "textfield",
+    "description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
+    "props": {
+      "onChange": "event",
+      "label": "string",
+      "variant": "string",
+      "disabled": "bool",
+      "fullwidth": "bool",
+      "colour":"string",
+      "size":"string",
+      "type": "string",
+      "required": "bool",
+      "minLength": "number",
+      "maxLength": "number",
+      "helperText": "string",
+      "errorText": "string",
+      "placeholder": "string",
+      "icon": "string",
+      "trailingIcon": "bool",
+      "textarea": "bool",
+      "rows": "number",
+      "cols": "number",
+      "validation": "bool",
+      "persistent": "bool"
     },
     "tags": []
   }
 }
+

packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte

@@ -8,7 +8,7 @@
 
   export let id = ""
   export let label = ""
-  export let names = "radios"
+  export let name = "radios"
   export let checked = false
   export let disabled = false
   export let alignEnd = false
@@ -37,7 +37,7 @@
       {id}
       class={cb.elem`native-control`}
       type="radio"
-      {names}
+      {name}
       {checked}
       {disabled}
       on:click={onClick} />

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

@@ -1,12 +1,12 @@
 
 export const props = {
   h1: {
-    _component: "@budibase/materialdesign-components/H1",
+    _component: "@budibase/materialdesign-components/h1",
     _children: [],
     text: "Im a big header",
   },
   overline: {
-    _component: "@budibase/materialdesign-components/Overline",
+    _component: "@budibase/materialdesign-components/overline",
     _children: [],
     text: "Im a wee overline",
   },

packages/materialdesign-components/src/Typography/index.js

@@ -1,13 +1,13 @@
 import "./_style.scss";
-export { default as H1 } from "./H1.svelte";
+export { default as body1 } from "./Body1.svelte";
-export { default as H2 } from "./H2.svelte";
+export { default as body2 } from "./Body2.svelte";
-export { default as H3 } from "./H3.svelte";
+export { default as caption } from "./Caption.svelte";
-export { default as H4 } from "./H4.svelte";
+export { default as h1 } from "./H1.svelte";
-export { default as H5 } from "./H5.svelte";
+export { default as h2 } from "./H2.svelte";
-export { default as H6 } from "./H6.svelte";
+export { default as h3 } from "./H3.svelte";
-export { default as Body1 } from "./Body1.svelte";
+export { default as h4 } from "./H4.svelte";
-export { default as Body2 } from "./Body2.svelte";
+export { default as h5 } from "./H5.svelte";
-export { default as Sub1 } from "./Sub1.svelte";
+export { default as h6 } from "./H6.svelte";
-export { default as Sub2 } from "./Sub2.svelte";
+export { default as overline } from "./Overline.svelte";
-export { default as Caption } from "./Caption.svelte";
+export { default as sub1 } from "./Sub1.svelte";
-export { default as Overline } from "./Overline.svelte";
+export { default as sub2 } from "./Sub2.svelte";

packages/materialdesign-components/src/index.js

@@ -6,4 +6,5 @@ export { textfield } from "./Textfield"
 export * from "./Typography"
 export { checkbox, checkboxgroup } from "./Checkbox"
 export { radiobutton, radiobuttongroup } from "./Radiobutton"
+export { label } from "./Common/Label.svelte"
 

packages/materialdesign-components/src/scripts/publishDev.js

@@ -0,0 +1,92 @@
+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"))
+  }
+})()