Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zikani03/ika
Form testing and filling just got faster! 💪
https://github.com/zikani03/ika
forms javascript-library user-experience user-interface
Last synced: 6 days ago
JSON representation
Form testing and filling just got faster! 💪
- Host: GitHub
- URL: https://github.com/zikani03/ika
- Owner: zikani03
- License: mit
- Created: 2020-04-05T16:51:10.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T18:04:34.000Z (7 months ago)
- Last Synced: 2024-06-17T20:13:37.707Z (7 months ago)
- Topics: forms, javascript-library, user-experience, user-interface
- Language: TypeScript
- Homepage: https://labs.zikani.me/ika/
- Size: 487 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ika
===
`ika` is a small JavaScript library that makes filling forms faster for development and can turns regular users into power users.
It allows you to auto-generate random data via faker-js for filling out your forms (convenient during testing). It also supports tagging fields on a form with a shorthand that enables users to fill multiple form fields on the page using shorthands all at once.
## DEMO
## USAGE
In order to use ika, you need to add the `ika.min.css` and `ika.min.js` files to your page. You can get them from the `build` directory or use the one hosted on my domain.
```html
```
### Auto-filling forms using faker-js integration
`ika` has support for [Faker.js](https://fakerjs.dev/) to generate values for Form inputs to help you save time filling in forms, especially useful when testing your applications.
Let's assume you have the following two forms in your project (even if they were on different pages/views)
```html
```
You can add ika script as shown below. When you load ika in this way, an ika input popup is injected after the page loads.
Once ika loads, you can click "Fill" button (without typing any input in the textarea) which will then use either the value generated by Faker.js or your custom random data function as defined in your ika form config.
```html
import {faker} from "https://cdn.skypack.dev/@faker-js/[email protected]?dts"
window.faker = faker
window.ikaConfig = {
faker: faker,
floatingButton: true,
forms: {
"*": {
"firstName": "faker.name.firstName",
"lastName": "faker.name.lastName",
},
"form[name=firstForm]": {
"firstName": "faker.name.firstName",
"lastName": "faker.name.lastName",
"dateOfBirth": function(el) {
return faker.date.birthdate().toISOString().substring(0, 10)
}
},
"form[name=secondForm]": {
"firstName": () => "Static FirstName",
"lastName": () => "Static LastName",
}
}
}
import "/ika.js"
```
### Tagged Inputs
By default ika uses the `name`s of the fields to identify the form inputs, but for best flexibility (and integration with frameworks) you can tag your input fields with `data-ika` attributes to identify fields that you want to be able to interact with through ika.
For example:
```html
Java
```
### Showing the ika-input at a specific position
By default, if your document doesn't have a DOM element with ID of `ika-apa`, it will create it and append it to the document which will appear on the screen as a popup. You can control where the input appears by adding an element with `ika-apa` ID in your document. Once ika loads, it will look for that element and place the input component there.
## Styling
You can modify the styling of the element to fit your application's/form's aesthetics.
In order to do so. you mostly need to modify the following elements with CSS:
```css
/* The wrapper element that contains the text area and the button */
#nndi--ika-control {}
/* The element for the button */
#nndi--ika-btn {}
/* The element for the "text area" */
#nndi--ika-txt {}
```
## LICENSE
MIT
See [LICENSE](./LICENSE)
---
Copyright (c) Zikani Nyirenda Mwase