Welcome to uijs-kit 👋

> Framework for building UI elements programmatically using JavaScript. ### 🏠 [UIJS-KIT Homepage](https://github.com/ioncakephper/ui) ## Introduction Are you a JavaScript developer and want to create UI elements quickly with a consistent Bootstrap code? Take a look at `UIJS-KIT`. Out of the box, it provides functions to generate UI element. For example: - `textField` function creates the HTML code for `` and provides the `label` tag for the input field. All is encapsulated with a `.form-group`. - functions for popular input UI elements: checkboxes, boolean, color, radio, select, textarea, color, time, url, date, datetime, datetime-local, or week. - quick indicator for required fields: a trailing asterisk (*) in the label field. - options field allows you to specify custom name and id attributes. You can also add additional properties and use them in field type templates. ## Install ```sh npm install uijs-kit ``` ## Usage ```js const {textField, colorField} = require('uijs-kit') let fields = [ textField('First name'), // optional. Label, name, and id properties derived from text parameter textField('Last name*'), // required (see trailing asterisk). Label, name, required, and id properties derived from text parameter colorField('Background color', {name: 'bg-color'}), // optional. Label derived from text parameter, name and id specified in name property ] let values = {} let renderedFields = fields.map(field => field.render(values)) console.log(JSON.stringify(renderedFields)) ``` ### SelectField: field with choices ```js const {selectField} = require('uijs-kit'); // choices as array of objects with label and value properties let choices = ["Choice 1", "Choice 2"].map((label, value) => { return { label, value: `${value}` } }) // generate the selectField and pass the choices let f = selectField('Select', choices); let values = {select: '1'}; // a record storing values for fields let html = f.render(values); console.log(html); //

// Select: // //

``` ## API See [api.md](api.md) for API documentation. ## Run tests ```sh npm run test ``` ## Roadmap - [x] UiField descendant (UiFieldWithFields) to handle collection of fields - [x] UiFormField class to generate form - [x] Update shortcut functions code documentation: type, default param values, return type. - [ ] Create documentation site with Docusaurus, outlined with Skelosaurus. Store it at Github pages for this repository - [ ] Create button Ui classes and shortcut functions (e.g UiButton, UiSubmit, UiReset) - [ ] Extend formField function to add submit and reset buttons. ## Author 👤 **Ion Gireada** * Github: [@ioncakephper](https://github.com/ioncakephper) ## 🤝 Contributing Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/ioncakephper/ui/issues). You can also take a look at the [contributing guide](https://github.com/ioncakephper/ui/blob/master/CONTRIBUTING.md). [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md) ## Show your support Give a ⭐️ if this project helped you!