npm package: @jdecode-dev/jdecode-ui
Description: Jdecode UI
Author: jdecode-dev
Latest version: 0.0.12-beta

# Jdecode UI :wrench:

### :warning: IMPORTANT! Jdecode UI is under construction and may have some issues

I do not recommend use/install this Library until it is finished. Hope will be soon.


---------
**Jdecode UI**


![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
[![Downloads][downloads-image]][npm-link]
[![NPM version][npm-image]][npm-link]
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://www.npmjs.com/package/datafire)

[downloads-image]: https://img.shields.io/npm/dm/@jdecode-dev/jdecode-ui.svg
[npm-image]: https://img.shields.io/npm/v/datafire.svg
[npm-link]: https://www.npmjs.com/package/@jdecode-dev/jdecode-ui




Jdecode UI is a framework-agnostic collection of UI components.

This components are build using Stencil. 
To know more about Stencil, here you have [Stencil Documentation](https://stenciljs.com/docs/introduction).

-----

## 1. Install Components

#### From GIT:
To use this components, simply download or clone the repository.

You can clone the repository using this comands in your terminal:
```
git clone https://github.com/jdecode-dev/jdecode-ui.git jdecode-ui
cd jdecode-ui
```

After that, run the following commands to get it up and running:

Use NPM or YARN:

```shell
npm install
npm start
```

```
yarn 
yarn start
```

#### From NPM:
This library is published as a package in npm. Check the package link: [@jdecode-dev/jdecode-ui](https://www.npmjs.com/package/@jdecode-dev/jdecode-ui).

To use the components in your project, you have 3 options:

##### I. Script tag
Put a script tag: <script src='https://unpkg.com/@jdecode-dev/jdecode-ui@X.X.X/dist/mycomponent.js'> </script> in the <head> of your index.html

*Important: The ```X.X.X``` is the specific version of the library, you should use specifc versions to prevent against breaking changes.

#### For options II and III you must install from NPM:
You can install the package from NPM. Simply run this comand:

```shell
npm i @jdecode-dev/jdecode-ui --save
```

##### II. Node Modules
Put a script tag similar to this <script src='node_modules/@jdecode-dev/jdecode-ui/'></script> in the <head> of your index.html

##### III. In a stencil-starter app
Add this line in your index.ts:
```
import '@jdecode-dev/jdecode-ui'
```

After  you can use the element anywhere in your template, JSX, html etc



## 2. Use Components

Inside 'index.html' you will find samples of all the components that you can use.


## 3. Modify Components

You will need a SCSS compiler, you can use this comand to install SASS:

```
yarn add --dev @stencil/sass
```
or:
```
npm install -g sass
```

To view the components, you can use the `index.html` page.

To see your changes, use this line:
```
npm run start
```

## 4. Share your modified Components
After your modifications, you can build your components for production:

```
npm run build
````

Inside 'dist/' folder you will have all your components compiled and ready to share.