README
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