# iblis-components
> Beautiful React UI components to be used in a SaaS
Latest version **0.0.1-alpha.5** (published 2018-07-28) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install iblis-components
pnpm add iblis-components
yarn add iblis-components
bun add iblis-components
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1-alpha.5 |
| Published | 2018-07-28 |
| First published | 2018-07-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 218.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vincent Delacourt |
| Maintainers | vdelacou |
## Links
- npm: https://www.npmjs.com/package/iblis-components
- npm.io page: https://npm.io/package/iblis-components
## Dependencies (7)
- [react](https://npm.io/package/react.md) ^16.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [iblis-font](https://npm.io/package/iblis-font.md) ^1.0.7
- [redux-form](https://npm.io/package/redux-form.md) ^7.4.2
- [typeface-roboto](https://npm.io/package/typeface-roboto.md) ^0.0.54
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^1.4.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^1.1.0
## Recent versions
- 0.0.1-alpha.5 (latest) — 2018-07-28
- 0.0.1-alpha.4 — 2018-07-28
- 0.0.1-alpha.3 — 2018-07-28
- 0.0.1-alpha.2 — 2018-07-28
- 0.0.1-alpha.1 — 2018-07-28
## README
# Iblis UI
_**Beautiful React UI components to be used in a SaaS**_
[](https://www.npmjs.com/package/iblis-ui)
[](https://travis-ci.org/vdelacou/iblis-ui)
[](https://david-dm.org/vdelacou/iblis-ui)
[](https://codeclimate.com/github/vdelacou/iblis-ui/maintainability)
## Why
When you use javascript or typescript (with React or React Native for example) it could be difficult to display a SVG file in your app.
Many libraries exists but looks a little too much complicated to use :
* [React Inline Svg](https://github.com/vdelacou/iblis-font) Load the SVG with an XHR request and then embed it in the document
* [React Native Svg](https://github.com/react-native-community/react-native-svg) Didn't success to easy load my own SVG from a file
## Solution
By creating your own font, you can easily use your SVG file by displaying it like normal text.
## Demos
- [See fonts](https://vdelacou.github.io/iblis-font/) use `` in the Font Test Drive
- [Demo source](./docs)
## 📌 Install
`npm install iblis-font`
or
`yarn add iblis-font`
## 💻 Usage
Iblis-Font assume you’re using webpack to process CSS and files. This package includes all necessary font files (woff, eot, ttf, svg) and a CSS file with font-face declarations pointing at these files.
You will need to have webpack setup to load css and font files. Many tools built with Webpack will work out of the box with Typefaces such as [Gatsby](https://github.com/gatsbyjs/gatsby) and [Create React App](https://github.com/facebookincubator/create-react-app).
To use, simply require the package in your project’s entry file e.g.
```javascript
// Load Iblis Font
require('iblis-font')
```
You can then display the icon by typing :
``
Or if you use React:
```javascript
{'\ue900'}
```
If you use material-ui:
```javascript
```
If you are using react native for iOS :
In `info.plist` add for the key: `UIAppFonts` the value in array `Iblis.ttf`
Add the `Iblis.ttf` to your assets folder and lauch `react-native link` to link the file with your android and iOS project
## How to create your own font
First you need to have your icons in SVG format
To create the font I use the online tools: [IcoMoon App](https://icomoon.io/app/)
You need to import your svg file
Then select all the icon your want for your font and click on generate font
Then in the zip you can find the fonts in the `/fonts` folder and the `style.css`
## 🕺 Contribute
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
2. Send a pull request 🙌
## 🔨 Todo
* Add more icons
## 💊 Known issues:
* Nothing for the moment
## 🙏 Thanks:
* [Typefaces](https://github.com/KyleAMathews/typefaces) for giving me the idea
* [IconMoon](https://icomoon.io/) to allow to create your own font for free
# Iblis-Components
[](https://www.npmjs.com/package/iblis-font)
[](https://travis-ci.org/vdelacou/iblis-font)
[](https://david-dm.org/vdelacou/iblis-font)
[](https://codeclimate.com/github/vdelacou/iblis-font/maintainability)
[](https://codeclimate.com/github/vdelacou/iblis-font/test_coverage)
## How to use
Install it and run storybook:
```bash
yarn
yarn storybook
```
You can now explore all components at http://localhost:6006
## How to Export as a Static App
Install it and export:
```bash
yarn
yarn build-storybook
```
## How to Dev
If you use Visual Studio Code, I recommand you to install the following plugins:
* https://marketplace.visualstudio.com/items?itemName=eg2.tslint (to be sure that your code respect our guidelines specified in the linter tslint.json)
To see change just edit the compoments in folder `./src/components` directly and see change with hot-reload.
If you create a new component , you need add a new stories in the folder `./stories` and see the difference with all the properties
## How to build
Before push a new version, use:
```bash
yarn
yarn build
```
TODO
update type definition for addon with v4 when it wil be updated
generate documentation for textfield and selectfield
use excludedPropTypes to exclude the InjectedFormProps from documentation
https://medium.freecodecamp.org/effective-use-of-typescript-with-react-3a1389b6072a
https://github.com/piotrwitek/react-redux-typescript-guide
# list all the libraries
#talk about theming
# exampe how to use in stories
# not exhausitive (see example how to use and expand)
#Can be sure as it is or could be a a good starter to create your own components
# // require.resolve("react-docgen-typescript-loader")
# font ilbis-ofony
# put the list of library
## 🕺 Contribute
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device
2. Install dependencies using Yarn: `yarn install`
3. Make the necessary changes and ensure that the tests are passing using `yarn test`
4. Send a pull request 🙌
---
_Source: https://npm.io/package/iblis-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._