https://github.com/adrianmachado/kaiui
React component library for KaiOS apps
https://github.com/adrianmachado/kaiui
kaios mobile-development react react-component-library ui-components ui-framework
Last synced: 11 months ago
JSON representation
React component library for KaiOS apps
- Host: GitHub
- URL: https://github.com/adrianmachado/kaiui
- Owner: AdrianMachado
- License: mit
- Created: 2019-06-25T02:25:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T21:46:30.000Z (over 2 years ago)
- Last Synced: 2025-04-09T20:13:43.404Z (11 months ago)
- Topics: kaios, mobile-development, react, react-component-library, ui-components, ui-framework
- Language: TypeScript
- Homepage:
- Size: 4.86 MB
- Stars: 192
- Watchers: 9
- Forks: 38
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# KaiUI
UI Component library for building KaiOS apps. All components and views are navigable using a phone's d-pad and softkeys.
**CAUTION:** The style specs of some components has been updated recently, which has yet to be reflected in this implementation. Please refer to the [KaiOS blog article](https://medium.com/design-at-kai/design-exploration-for-ui-components-in-kaios-smart-feature-phones-85f211603ed0) on Medium.
## Building and Usage
KaiUI has not yet been deployed to NPM. To build and play with the demo app run:
```
npm install
npm start
```
For use in the KaiOS emulator you must build
```
npm build
```
And update the hashes of the JS and CSS files in [index.html](https://github.com/AdrianMachado/KaiUI/blob/master/index.html) manually before running.
## Components
All specs can be found [here](https://developer.kaiostech.com/docs/design-guide/ui-component)
| Name | Preview | Spec |
| ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| Header |  |  |
| Tabs |  |  |
| SoftKey |  |  |
| Text List Item |  |  |
| Body Text List Item |  | |
| Icon List Item |  | |
| Arrow List Item |  | |
| Separator |  |  |
| Checkbox |  |  |
| Radio Button |  | |
| Progress-Download |  |  |
| Progress-Buffering |  | |
| Slider |  |  |
| Button |  |  |
| Input |  |  |
## Views
Navigation details can be found [here](https://developer.kaiostech.com/docs/design-guide/basic-navigation)
| Name | Preview |
| -------- | -------------------------------------------------------------------- |
| TabView |  |
| ListView |  |
## Popups
| Name | Preview | Spec |
| ------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| Toast |  |  |
## Notifications
Notifications are provided by KaiOS itself when you use the standard [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/notification) while your app is running, or the [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) if you want push notifications. Installed apps need to request permission for this through the manifest file. Just add this line to the permissions section of your `manifest.webapp` file.
```
"desktop-notification": {}
```
Once this is added, you can send the user notifications without needing to request permission.
## Themes
Standardized colors and font stylings are found in the [themes directory](https://github.com/AdrianMachado/KaiUI/tree/master/src/theme). These follow the KaiOS [typography standard](https://developer.kaiostech.com/docs/design-guide/typography).
Currently you can customize the focus color of components through props, font color is a WIP.
## Icons
KaiUI uses custom icons provided on the KaiOS developer portal. These are included in the kai-icons font and incorporated as [SASS/CSS classes](https://github.com/AdrianMachado/KaiUI/tree/master/src/kai-font).
# Contributing
There's much work to be done on building out more UI components, writing tests, and integrating typing (probably using flow).
Please look at currently open issues and our [Contributing Guide](https://github.com/AdrianMachado/KaiUI/blob/master/CONTRIBUTING.md)