https://github.com/ioncakephper/ui
Framework for building UI elements programmatically in JavaScript.
https://github.com/ioncakephper/ui
generated-code html5 javascript
Last synced: about 1 month ago
JSON representation
Framework for building UI elements programmatically in JavaScript.
- Host: GitHub
- URL: https://github.com/ioncakephper/ui
- Owner: ioncakephper
- License: mit
- Created: 2023-08-18T10:07:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-11T22:26:12.000Z (4 months ago)
- Last Synced: 2025-04-01T02:48:32.893Z (3 months ago)
- Topics: generated-code, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 10.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
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:
//
// Choice 1
// Choice 2
//
//
```
## API
See [api](./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
- [ x] 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).
[](CODE_OF_CONDUCT.md)
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Copyright © 2023 [Ion Gireada](https://github.com/ioncakephper).
This project is [MIT](https://github.com/ioncakephper/ui/blob/master/LICENSE) licensed.