# UI Components

<center>
  <img src="https://github.com/credijusto/ui-components/blob/master/assets/logo/default.png?raw=true" width="170px" />
</center>

Customizable UI components, functions and utilities for developing React apps.

If something doesn’t work, please [file an issue](https://github.com/credijusto/ui-components/issues/new).

## Install

```sh
npm i @credijusto/ui-components
```

#### External Requirements

- `react`
- `react-dom`
- `react-router-dom`

## Documentation

Visit [ui-components-docs.credijusto.info](https://ui-components-docs.credijusto.info/) website for more information

(For the visual system, go to the [figma file](https://www.figma.com/file/W2z5uSdse6pOls09ot2ttF/design-system?node-id=0%3A1))

## Basic usage

To use the library, you just need to install it

`npm install @credijusto-internal/ui-components`

In order to have all our styles and variables you must wrap your main application component with the `AppWrapper` component. This will create the css custom properties and import the [Inter](https://rsms.me/inter/) from the official CDN.

```jsx
import React from 'react';
import Router from 'routes';

import { AppWrapper } from '@credijusto-internal/ui-components';

const App = () => {
  return (
    <AppWrapper>
      <Router />
    </AppWrapper>
  )
}

export default App;
```

## Development

`ui-components` uses [Docz](https://docz.site) to document each of our components. It is also useful to watch live changes of the components you are building, to run the project in development mode use:

```sh
npm i
```

Run the development server

```sh
npm start
```

Now the project should be ready at <http://localhost:3000/>, or on the next free port.

### Javascript Guidelines

`ui-components` uses `eslint-config-js-scripts`, a set of lint rules that extend the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) and ads some custom rules; we include a pre-commit hook that enforces these rules.

### CSS Guidelines

This project aims to use `styled-components` in every component, a CSS-in-JS that helps with a lot of problems, check it out in [styled-components website](https://www.styled-components.com/). We're currently transitioning to use only styled-components.

> In the meanwhile some of our older components still use PostCSS. Read more about it below.

This project uses [PostCSS](https://postcss.org/) with [`postcss-preset-env`](https://preset-env.cssdb.org/) and another set of PCSS plugins;this enables to have SASS-like syntax that allows us to use variables, functions, classes and inheritance but keeps a very familiar syntax.

The project encourages to use [CSS BEM](<(http://getbem.com/introduction/)>), a CSS writing style that encapsulates components and prevents namespace pollution and the need to override a ton of CSS. It is also the CSS writing standard for good pure CSS.

### Testing

```sh
npm test
```

### Versioning

ui-components uses [semantic versioning](https://semver.org) using git tags on the `master` branch and the `version` field of the `package.json`.

Remember to increment the version via `npm version` and don't forget to add an entry to `CHANGELOG.md` each time you send a pull request with a feature or bugfix.

Process: Push your work including your changes to the `CHANGELOG.md` in the same branch, once approved, increment the version in the `package.json` file . Once it's merged, add the tag on master branch and push the tags.

## Contributors

- [Julio Montaño](https://github.com/jmz7v)
- [Diego Lara](https://github.com/dyegolara)
- [Michell Alegría](https://github.com/aegre)
- [Jacob Garcia](https://github.com/jacobgarcia)
- [Christian Consuelo](https://github.com/cristowi)
- [César Guadarrama](https://github.com/cesargdm)
- [Miguel Arroyo](https://github.com/ruidovisual)
- [Jesús Mendoza](https://github.com/jesusz0r)
- [Robert J. Kusznier](https://github.com/robertjk)

## License

MIT, Credijusto.com © 2019