Create input elements based on custom definitions file (#27)

* Update concordialang-ui-core

* Run build script on pre-commit

* Create input elements based on custom definitions file

* Fix file names, exports and refactor input element generation

* Add label in widgets folder and refactor the html-ui-prototyper

* Expect a "concordialang-ui-html.json" file with the app configuration

dist/commands/generate.d.ts

@@ -3,7 +3,8 @@ export default class Generate extends Command {
     static description: string;
     static flags: {
         help: import("@oclif/parser/lib/flags").IBooleanFlag<void>;
-        features: flags.IOptionFlag<string | undefined>;
+        features: flags.IOptionFlag<string>;
+        outputDir: flags.IOptionFlag<string>;
     };
     run(): Promise<void>;
 }

dist/commands/generate.js

@@ -1,25 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const command_1 = require("@oclif/command");
-const fs = require("fs");
-const generator_1 = require("../generator");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+const tslib_1 = require('tslib')
+const command_1 = require('@oclif/command')
+const fs = require('fs')
+const html_ui_prototyper_1 = require('../html-ui-prototyper')
 class Generate extends command_1.Command {
-    run() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            const { flags } = this.parse(Generate);
-            if (flags.features) {
-                const processResult = JSON.parse(flags.features);
-                const generator = new generator_1.default(fs);
-                const result = yield generator.generate(processResult.features);
-                this.log(JSON.stringify(result));
-            }
-        });
-    }
+	run() {
+		return tslib_1.__awaiter(this, void 0, void 0, function*() {
+			const { flags } = this.parse(Generate)
+			if (flags.features) {
+				const processResult = JSON.parse(flags.features)
+				const generator = new html_ui_prototyper_1.default(
+					fs,
+					flags.outputDir
+				)
+				const result = yield generator.generate(processResult.features)
+				this.log(JSON.stringify(result))
+			}
+		})
+	}
 }
-Generate.description = 'Generate html files';
+Generate.description = 'Generate html files'
 Generate.flags = {
-    help: command_1.flags.help({ char: 'h' }),
-    features: command_1.flags.string({ description: 'processed features from ast' })
-};
-exports.default = Generate;
+	help: command_1.flags.help({ char: 'h' }),
+	features: command_1.flags.string({
+		description: 'processed features from ast',
+		required: true,
+	}),
+	outputDir: command_1.flags.string({
+		description: 'location where output files will be saved',
+		required: true,
+	}),
+}
+exports.default = Generate

dist/generator.d.ts → dist/html-ui-prototyper.d.ts

@@ -1,7 +1,9 @@
 import { Feature, Prototyper } from 'concordialang-ui-core';
-export default class Generator implements Prototyper {
+export default class HtmlUIPrototyper implements Prototyper {
     private _fs;
-    constructor(_fs?: any);
+    private _outputDir;
+    constructor(_fs: any, _outputDir: string);
     generate(features: Feature[]): Promise<string[]>;
     private createHtmlFile;
+    private getAppConfig;
 }

dist/html-ui-prototyper.js

@@ -0,0 +1,60 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+const tslib_1 = require('tslib')
+const fs = require('fs')
+const util_1 = require('util')
+const path_1 = require('path')
+const prettier = require('prettier')
+const cosmiconfig = require('cosmiconfig')
+const widget_factory_1 = require('./widgets/widget-factory')
+class HtmlUIPrototyper {
+	constructor(_fs = fs, _outputDir) {
+		this._fs = _fs
+		this._outputDir = _outputDir
+	}
+	generate(features) {
+		return tslib_1.__awaiter(this, void 0, void 0, function*() {
+			const appConfig = this.getAppConfig()
+			const factory = new widget_factory_1.default(appConfig)
+			const createFilePromises = []
+			for (let feature of features) {
+				const elements = feature.uiElements.map(uiElement =>
+					factory.create(uiElement)
+				)
+				createFilePromises.push(
+					this.createHtmlFile(feature.name, elements)
+				)
+			}
+			return Promise.all(createFilePromises)
+		})
+	}
+	createHtmlFile(fileName, widgets) {
+		return tslib_1.__awaiter(this, void 0, void 0, function*() {
+			let content = widgets.reduce((result, widget) => {
+				return result + widget.renderToString()
+			}, '')
+			content = prettier.format(`<form>\n${content}</form>`, {
+				parser: 'html',
+				htmlWhitespaceSensitivity: 'ignore',
+			})
+			const path = path_1.format({
+				dir: this._outputDir,
+				name: fileName,
+				ext: '.html',
+			})
+			yield util_1.promisify(fs.writeFile)(path, content)
+			return path
+		})
+	}
+	getAppConfig() {
+		try {
+			const explorer = cosmiconfig()
+			const configFile = explorer.loadSync('concordialang-ui-html.json')
+			const appConfig = configFile.config
+			return appConfig
+		} catch (e) {
+			throw new Error('Config file not found')
+		}
+	}
+}
+exports.default = HtmlUIPrototyper

dist/index.d.ts

@@ -1 +1 @@
-export * from './generator';
+export * from './html-ui-prototyper';

dist/index.js

@@ -1,4 +1,4 @@
 'use strict'
 Object.defineProperty(exports, '__esModule', { value: true })
 const tslib_1 = require('tslib')
-tslib_1.__exportStar(require('./generator'), exports)
+tslib_1.__exportStar(require('./html-ui-prototyper'), exports)

dist/interfaces/app-config.d.ts

@@ -0,0 +1,11 @@
+export interface AppConfig {
+    widgets?: {
+        input?: WidgetConfig;
+    };
+}
+export interface WidgetConfig {
+    opening: string;
+    closure?: string;
+    wrapperOpening?: string;
+    wrapperClosure?: string;
+}

dist/interfaces/app-config.js

@@ -0,0 +1,2 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })

dist/utils/prop.js

@@ -0,0 +1,41 @@
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+function formatProperties(props, validProperties) {
+	const translateProp = key => {
+		switch (key) {
+			case 'format':
+				return 'pattern'
+			default:
+				return key
+		}
+	}
+	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}"`
+			}
+		}
+		return `${translateProp(key)}="${value}"`
+	}
+	const formatValid = (result, prop) => {
+		return validProperties.includes(prop)
+			? result + getFormattedProp(prop) + ' '
+			: result
+	}
+	return Object.keys(props)
+		.reduce(formatValid, '')
+		.trimRight()
+}
+exports.formatProperties = formatProperties

dist/widgets/button.d.ts

@@ -1,5 +1,5 @@
 import { Widget } from 'concordialang-ui-core';
-export declare class Button extends Widget {
+export default class Button extends Widget {
     private readonly VALID_PROPERTIES;
     constructor(props: any, name?: string);
     renderToString(): string;

dist/widgets/button.js

@@ -1,20 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const concordialang_ui_core_1 = require("concordialang-ui-core");
-const prop_1 = require("./prop");
+'use strict'
+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) {
-        super(props, name);
-        // private readonly DATA_TYPES = ['button', 'submit', 'reset']
-        this.VALID_PROPERTIES = ['id', 'disabled', 'value'];
-    }
-    renderToString() {
-        const inputType = this.getType(this.props.datatype);
-        const properties = prop_1.formatProperties(this.props, this.VALID_PROPERTIES);
-        return `<button ${inputType} ${properties}>${this.name}</button>`;
-    }
-    getType(datatype) {
-        return `type="${datatype || 'button'}"`;
-    }
+	constructor(props, name) {
+		super(props, name || '')
+		this.VALID_PROPERTIES = ['id', 'disabled', 'value']
+	}
+	renderToString() {
+		// const inputType = this.getType(this.props.datatype as string)
+		const properties = prop_1.formatProperties(
+			this.props,
+			this.VALID_PROPERTIES
+		)
+		// return `<button ${inputType}${properties}>${this.name}</button>`
+		return `<button ${properties}>${this.name}</button>`
+	}
+	getType(datatype) {
+		return `type="${datatype || 'button'}"`
+	}
 }
-exports.Button = Button;
+exports.default = Button

dist/widgets/checkbox.d.ts

@@ -1,5 +1,6 @@
 import { Widget } from 'concordialang-ui-core';
-export declare class Checkbox extends Widget {
-    constructor(props: any, name?: string);
+export default class Checkbox extends Widget {
+    private readonly VALID_PROPERTIES;
+    constructor(props: any, name: string);
     renderToString(): string;
 }

dist/widgets/checkbox.js

@@ -1,12 +1,23 @@
 'use strict'
 Object.defineProperty(exports, '__esModule', { value: true })
 const concordialang_ui_core_1 = require('concordialang-ui-core')
+const prop_1 = require('../utils/prop')
 class Checkbox extends concordialang_ui_core_1.Widget {
 	constructor(props, name) {
 		super(props, name)
+		this.VALID_PROPERTIES = ['value', 'required']
 	}
+	// TODO: remove \n
 	renderToString() {
-		return `<input type="checkbox">TESTE`
+		const 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>`
 	}
 }
-exports.Checkbox = Checkbox
+exports.default = Checkbox

dist/widgets/input.d.ts

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