UI Components

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

If something doesn’t work, please file an issue.

Install

npm i @credijusto/ui-components

External Requirements

• react
• react-dom
• react-router-dom

Documentation

Visit ui-components-docs.credijusto.info website for more information

(For the visual system, go to the figma file)

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 from the official CDN.

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 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:

npm i

Run the development server

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 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. 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 with postcss-preset-env 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, 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

npm test

Versioning

ui-components uses semantic versioning 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
• Diego Lara
• Michell Alegría
• Jacob Garcia
• Christian Consuelo
• César Guadarrama
• Miguel Arroyo
• Jesús Mendoza
• Robert J. Kusznier

License

MIT, Credijusto.com © 2019