KaiUI
# 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)