From 0f5703034be233bac7fee9a009decdcb21511c97 Mon Sep 17 00:00:00 2001 From: Conor-Mack Date: Mon, 17 Feb 2020 14:00:37 +0000 Subject: [PATCH] Completed MD Components JSON and Tidyup --- .../materialdesign-components/components.json | 181 +++++++++++++++++- .../src/Radiobutton/Radiobutton.svelte | 4 +- .../src/Test/props.js | 4 +- .../src/Typography/index.js | 24 +-- .../materialdesign-components/src/index.js | 1 + .../src/scripts/publishDev.js | 92 +++++++++ 6 files changed, 281 insertions(+), 25 deletions(-) create mode 100644 packages/materialdesign-components/src/scripts/publishDev.js diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 2aface718d..dc01faa4f9 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -1,20 +1,183 @@ { "_lib": "./dist/index.js", - "h1": { - "name": "H1", - "description": "An HTML H1 tag", + "_generators": {}, + "body1": { + "name": "body1", + "description": "Sets the font properties as Roboto Body 1", "props": { - "text": "string", - "className": "string" - }, + "text": "string" + }, + "tags": [] + }, + "body2": { + "name": "body2", + "description": "Sets the font properties as Roboto Body 2", + "props": { + "text": "string" + }, "tags": [] }, "button": { - "name": "Button", - "description": "A button", + "name": "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": [] } } + diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 194f849e94..9ebc5bb7f2 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/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} /> diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index df0125f214..40ed88c920 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/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", }, diff --git a/packages/materialdesign-components/src/Typography/index.js b/packages/materialdesign-components/src/Typography/index.js index 7c2a6d8a45..321080295b 100644 --- a/packages/materialdesign-components/src/Typography/index.js +++ b/packages/materialdesign-components/src/Typography/index.js @@ -1,13 +1,13 @@ import "./_style.scss"; -export { default as H1 } from "./H1.svelte"; -export { default as H2 } from "./H2.svelte"; -export { default as H3 } from "./H3.svelte"; -export { default as H4 } from "./H4.svelte"; -export { default as H5 } from "./H5.svelte"; -export { default as H6 } from "./H6.svelte"; -export { default as Body1 } from "./Body1.svelte"; -export { default as Body2 } from "./Body2.svelte"; -export { default as Sub1 } from "./Sub1.svelte"; -export { default as Sub2 } from "./Sub2.svelte"; -export { default as Caption } from "./Caption.svelte"; -export { default as Overline } from "./Overline.svelte"; +export { default as body1 } from "./Body1.svelte"; +export { default as body2 } from "./Body2.svelte"; +export { default as caption } from "./Caption.svelte"; +export { default as h1 } from "./H1.svelte"; +export { default as h2 } from "./H2.svelte"; +export { default as h3 } from "./H3.svelte"; +export { default as h4 } from "./H4.svelte"; +export { default as h5 } from "./H5.svelte"; +export { default as h6 } from "./H6.svelte"; +export { default as overline } from "./Overline.svelte"; +export { default as sub1 } from "./Sub1.svelte"; +export { default as sub2 } from "./Sub2.svelte"; diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index 424c7d20a0..83acd5f26b 100644 --- a/packages/materialdesign-components/src/index.js +++ b/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" diff --git a/packages/materialdesign-components/src/scripts/publishDev.js b/packages/materialdesign-components/src/scripts/publishDev.js new file mode 100644 index 0000000000..80c82e8ddc --- /dev/null +++ b/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")) + } +})()