Generate all widgets based on config file

dist/commands/generate.js

@@ -15,7 +15,7 @@ class Generate extends command_1.Command {
 					flags.outputDir
 				)
 				const result = yield generator.generate(processResult.features)
-				this.log(JSON.stringify(result))
+				this.log(result.join('\n'))
 			}
 		})
 	}

dist/html-ui-prototyper.js

@@ -16,6 +16,8 @@ class HtmlUIPrototyper {
 		return tslib_1.__awaiter(this, void 0, void 0, function*() {
 			const appConfig = this.getAppConfig()
 			const factory = new widget_factory_1.default(appConfig)
+			if (features.length === 0)
+				return Promise.resolve(['No features found'])
 			const createFilePromises = []
 			for (let feature of features) {
 				const elements = feature.uiElements.map(uiElement =>
@@ -33,7 +35,7 @@ class HtmlUIPrototyper {
 			let content = widgets.reduce((result, widget) => {
 				return result + widget.renderToString()
 			}, '')
-			content = prettier.format(`<form>\n${content}</form>`, {
+			content = prettier.format(`<form>${content}</form>`, {
 				parser: 'html',
 				htmlWhitespaceSensitivity: 'ignore',
 			})

dist/interfaces/app-config.d.ts

@@ -1,11 +1,23 @@
 export interface AppConfig {
     widgets?: {
         input?: WidgetConfig;
+        radio?: WidgetConfig;
+        checkbox?: WidgetConfig;
+        select?: WidgetConfig;
+        label?: LabelConfig;
     };
 }
 export interface WidgetConfig {
     opening: string;
     closure?: string;
+    optionOpening?: string;
+    optionClosure?: string;
     wrapperOpening?: string;
     wrapperClosure?: string;
+    label?: LabelConfig;
 }
+interface LabelConfig {
+    opening: string;
+    closure: string;
+}
+export {};

dist/utils/prop.d.ts

@@ -1 +1,2 @@
+export declare const PROPS_INJECTION_POINT = "%s";
 export declare function formatProperties(props: any, validProperties: string[]): string;

dist/utils/prop.js

@@ -1,5 +1,7 @@
 'use strict'
 Object.defineProperty(exports, '__esModule', { value: true })
+const case_1 = require('case')
+exports.PROPS_INJECTION_POINT = '%s'
 function formatProperties(props, validProperties) {
 	const translateProp = key => {
 		switch (key) {
@@ -10,23 +12,7 @@ function formatProperties(props, validProperties) {
 		}
 	}
 	const getFormattedProp = key => {
-		let value = props[key]
-		const invalidIdPattern = /^\/\//
-		if (key === 'id') {
-			let newKey = key
-			// TODO: replace test wit str.match(pattern)
-			if (!invalidIdPattern.test(value)) {
-				const validIdPattern = /^#|~/
-				const validClassPattern = /^\./
-				if (validIdPattern.test(value)) {
-					value = value.toString().replace(validIdPattern, '')
-				} else if (validClassPattern.test(value)) {
-					newKey = 'class'
-					value = value.toString().replace(validClassPattern, '')
-				}
-				return `${translateProp(newKey)}="${value}"`
-			}
-		}
+		let value = case_1.camel(props[key].toString())
 		return `${translateProp(key)}="${value}"`
 	}
 	const formatValid = (result, prop) => {

dist/widgets/button.d.ts

@@ -1,7 +1,9 @@
 import { Widget } from 'concordialang-ui-core';
+import { WidgetConfig } from '../interfaces/app-config';
 export default class Button extends Widget {
+    private _config;
     private readonly VALID_PROPERTIES;
-    constructor(props: any, name?: string);
+    constructor(props: any, name: string, _config: WidgetConfig);
     renderToString(): string;
     private getType;
 }

dist/widgets/button.js

@@ -3,18 +3,24 @@ Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
 const prop_1 = require('../utils/prop')
 class Button extends concordialang_ui_core_1.Widget {
-	constructor(props, name) {
+	constructor(props, name, _config) {
 		super(props, name || '')
+		this._config = _config
 		this.VALID_PROPERTIES = ['id', 'disabled', 'value']
 	}
 	renderToString() {
-		// const inputType = this.getType(this.props.datatype as string)
-		const properties = prop_1.formatProperties(
+		const buttonType = this.getType(this.props.datatype)
+		let properties = prop_1.formatProperties(
 			this.props,
 			this.VALID_PROPERTIES
 		)
-		// return `<button ${inputType}${properties}>${this.name}</button>`
-		return `<button ${properties}>${this.name}</button>`
+		properties = `${buttonType} ${properties}`
+		const buttonOpening = this._config.opening.replace(
+			prop_1.PROPS_INJECTION_POINT,
+			properties
+		)
+		const buttonClosure = this._config.closure
+		return buttonOpening + this.name + buttonClosure
 	}
 	getType(datatype) {
 		return `type="${datatype || 'button'}"`

dist/widgets/checkbox.d.ts

@@ -1,6 +1,8 @@
 import { Widget } from 'concordialang-ui-core';
+import { WidgetConfig } from '../interfaces/app-config';
 export default class Checkbox extends Widget {
+    private _config;
     private readonly VALID_PROPERTIES;
-    constructor(props: any, name: string);
+    constructor(props: any, name: string, _config: WidgetConfig);
     renderToString(): string;
 }

dist/widgets/checkbox.js

@@ -2,22 +2,29 @@
 Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
 const prop_1 = require('../utils/prop')
+const wrapper_1 = require('./wrapper')
 class Checkbox extends concordialang_ui_core_1.Widget {
-	constructor(props, name) {
+	constructor(props, name, _config) {
 		super(props, name)
+		this._config = _config
 		this.VALID_PROPERTIES = ['value', 'required']
 	}
-	// TODO: remove \n
 	renderToString() {
-		const properties = prop_1.formatProperties(
+		const inputType = 'type="checkbox"'
+		let properties = prop_1.formatProperties(
 			this.props,
 			this.VALID_PROPERTIES
 		)
-		if (properties)
-			return `<div>\n<input type="checkbox" ${properties}>${
-				this.name
-			}\n</div>`
-		return `<div>\n<input type="checkbox">${this.name}\n</div>`
+		properties = `${inputType} ${properties}`
+		const inputOpening = this._config.opening.replace(
+			prop_1.PROPS_INJECTION_POINT,
+			properties
+		)
+		const inputClosure = this._config.closure || ''
+		return wrapper_1.wrap(
+			inputOpening + this.name + inputClosure,
+			this._config
+		)
 	}
 }
 exports.default = Checkbox

dist/widgets/input.d.ts

@@ -5,6 +5,5 @@ export default class Input extends Widget {
     private readonly VALID_PROPERTIES;
     constructor(props: any, name: string, _config: WidgetConfig);
     renderToString(): string;
-    private wrap;
     private getType;
 }

dist/widgets/input.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
 const prop_1 = require('../utils/prop')
 const label_1 = require('./label')
+const wrapper_1 = require('./wrapper')
 class Input extends concordialang_ui_core_1.Widget {
 	constructor(props, name, _config) {
 		super(props, name)
@@ -22,22 +23,17 @@ class Input extends concordialang_ui_core_1.Widget {
 			this.props,
 			this.VALID_PROPERTIES
 		)
-		const input = this._config.opening.replace(
-			'%s',
+		const inputOpening = this._config.opening.replace(
+			prop_1.PROPS_INJECTION_POINT,
 			`${inputType} ${properties}`
 		)
 		const inputClosure = this._config.closure || ''
-		const label = label_1.createLabel(this.name, this.props.id.toString())
-		return this.wrap(label + input + inputClosure)
-	}
-	wrap(elements) {
-		if (this._config.wrapperOpening && this._config.wrapperClosure)
-			return (
-				this._config.wrapperOpening +
-				elements +
-				this._config.wrapperClosure
-			)
-		return elements
+		const label = label_1.createLabel(
+			this.name,
+			this.props.id.toString(),
+			this._config
+		)
+		return wrapper_1.wrap(label + inputOpening + inputClosure, this._config)
 	}
 	getType(datatype) {
 		let typeProperty

dist/widgets/label.d.ts

@@ -1 +1,2 @@
-export declare function createLabel(name: string, id: string): string;
+import { WidgetConfig } from '../interfaces/app-config';
+export declare function createLabel(widgetName: string, widgetId: string, widgetConfig: WidgetConfig): string;

dist/widgets/label.js

@@ -1,10 +1,17 @@
 'use strict'
 Object.defineProperty(exports, '__esModule', { value: true })
-function createLabel(name, id) {
-	const validIdPattern = /^(#|~|\d|\w).*/
-	const labelFor = validIdPattern.test(id)
-		? `for="${id.replace(/^#|~/, '')}"`
+const prop_1 = require('../utils/prop')
+function createLabel(widgetName, widgetId, widgetConfig) {
+	if (!widgetConfig.label) return ''
+	const idPattern = /^(#|~|\d|\w).*/
+	const labelFor = widgetId.match(idPattern)
+		? `for="${widgetId.replace(/^#|~/, '')}"`
 		: ''
-	return `<label ${labelFor}>${name}</label>`
+	const labelOpening = widgetConfig.label.opening.replace(
+		prop_1.PROPS_INJECTION_POINT,
+		labelFor
+	)
+	const labelClosure = widgetConfig.label.closure
+	return labelOpening + widgetName + labelClosure
 }
 exports.createLabel = createLabel

dist/widgets/radio.d.ts

@@ -1,6 +1,8 @@
 import { Widget } from 'concordialang-ui-core';
+import { WidgetConfig } from '../interfaces/app-config';
 export default class Radio extends Widget {
+    private _config;
     private readonly VALID_PROPERTIES;
-    constructor(props: any, name: string);
+    constructor(props: any, name: string, _config: WidgetConfig);
     renderToString(): string;
 }

dist/widgets/radio.js

@@ -3,28 +3,37 @@ Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
 const prop_1 = require('../utils/prop')
 const label_1 = require('./label')
+const wrapper_1 = require('./wrapper')
 class Radio extends concordialang_ui_core_1.Widget {
-	constructor(props, name) {
+	constructor(props, name, _config) {
 		super(props, name)
+		this._config = _config
 		this.VALID_PROPERTIES = ['value']
 	}
-	// TODO: remove \n
 	renderToString() {
-		const properties = prop_1.formatProperties(
-			this.props,
-			this.VALID_PROPERTIES
-		)
+		const inputType = 'type="radio"'
+		const label = label_1.createLabel(this.name, '', this._config)
 		let inputs = []
-		const label = label_1.createLabel(this.name, this.props.id.toString())
-		const inputName = this.name.toLowerCase()
-		if (properties) {
-			for (let value of this.props.value) {
-				let input = `<input type="radio" name="${inputName}" value="${value.toLowerCase()}">${value}`
-				inputs.push(input)
-			}
-			return `<div>\n${label + inputs.join('\n')}\n</div>`
+		for (let value of this.props.value) {
+			// TODO: o que fazer no formatProperties em relação ao value?
+			// provavelmente terei que instalar o pacote "case"
+			// para ter 'value="algumaCoisa"', quando value for "Alguma Coisa"
+			//
+			// TODO: adicionar propriedades 'id' e 'nome'
+			const props = Object.assign({}, this.props, { value })
+			let properties = prop_1.formatProperties(
+				props,
+				this.VALID_PROPERTIES
+			)
+			properties = `${inputType} ${properties}`
+			const inputOpening = this._config.opening.replace(
+				prop_1.PROPS_INJECTION_POINT,
+				properties
+			)
+			const inputClosure = this._config.closure || ''
+			inputs.push(inputOpening + value + inputClosure)
 		}
-		return '<div>\n<input type="radio">\n</div>'
+		return wrapper_1.wrap(label + inputs.join(''), this._config)
 	}
 }
 exports.default = Radio

dist/widgets/select.d.ts

@@ -1,7 +1,10 @@
 import { Widget } from 'concordialang-ui-core';
+import { WidgetConfig } from '../interfaces/app-config';
 export default class Select extends Widget {
-    private readonly VALID_PROPERTIES;
-    constructor(props: any, name: string);
+    private _config;
+    private readonly SELECT_VALID_PROPERTIES;
+    private readonly OPTION_VALID_PROPERTIES;
+    constructor(props: any, name: string, _config: WidgetConfig);
     renderToString(): string;
     private getOptions;
 }

dist/widgets/select.js

@@ -3,30 +3,50 @@ Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
 const prop_1 = require('../utils/prop')
 const label_1 = require('./label')
+const wrapper_1 = require('./wrapper')
 class Select extends concordialang_ui_core_1.Widget {
-	constructor(props, name) {
+	constructor(props, name, _config) {
 		super(props, name)
-		this.VALID_PROPERTIES = ['id', 'required']
+		this._config = _config
+		this.SELECT_VALID_PROPERTIES = ['id', 'required']
+		this.OPTION_VALID_PROPERTIES = ['value']
 	}
-	// TODO: remove \n
 	renderToString() {
 		const properties = prop_1.formatProperties(
 			this.props,
-			this.VALID_PROPERTIES
+			this.SELECT_VALID_PROPERTIES
 		)
-		if (!properties) return '<div>\n<select></select>\n</div>'
+		const selectOpening = this._config.opening.replace(
+			prop_1.PROPS_INJECTION_POINT,
+			properties
+		)
+		const selectClosure = this._config.closure
 		const options = this.getOptions()
-		const select = `<select ${properties}>\n${options}\n</select>\n`
-		const label = label_1.createLabel(this.name, this.props.id.toString())
-		return `<div>\n${label + select}</div>`
+		const select = selectOpening + options + selectClosure
+		const label = label_1.createLabel(
+			this.name,
+			this.props.id.toString(),
+			this._config
+		)
+		return wrapper_1.wrap(label + select, this._config)
 	}
 	getOptions() {
+		if (!this._config.optionOpening) return ''
 		let options = []
 		for (let value of this.props.value) {
-			let option = `<option value="${value.toLowerCase()}">${value}</option>`
-			options.push(option)
+			const optionProps = { value }
+			const properties = prop_1.formatProperties(
+				optionProps,
+				this.OPTION_VALID_PROPERTIES
+			)
+			const optionOpening = this._config.optionOpening.replace(
+				prop_1.PROPS_INJECTION_POINT,
+				properties
+			)
+			const optionClosure = this._config.optionClosure
+			options.push(optionOpening + value + optionClosure)
 		}
-		return options.join('\n')
+		return options.join('')
 	}
 }
 exports.default = Select

dist/widgets/widget-factory.d.ts

@@ -5,4 +5,8 @@ export default class WidgetFactory {
     constructor(_config: AppConfig);
     create(element: UiElement): Widget;
     private createInputElement;
+    private createRadioElement;
+    private createCheckboxElement;
+    private createSelectElement;
+    private createButtonElement;
 }