zapala-react-ui

It's a React library to share user interface components. It's a css-in-js styled library created using styled-somponents. It was created as an UI pattern for Zapala Front-End.

Get started

To start, you must have a proper environment.

Environment

• node@^12.14.1
• yarn@^1.19.0
• react@^16.8.x
• react-dom@^16.8.x
• styled-component@^5.0.x

Installing

Add the library to the project's dependencies. It's fairly encoraged to install using yarn.

$ yarn add zapala-react-ui

Using

To import some component from zapala-react-ui to your App.

import { Container } from 'zapala-react-ui';

export default function App() {
  return (
    <div>
      <Container>Testando</Container>
    </div>
  );
}

There is a components documentation, after we have a link to that we'll shared it here.

Contributing

You sould be aware that this library was made using ES6+ and styled-components, React is the main library, all of the components has been created using TDD and documented using docz.

Installing

First of all clone the repository. If you don't have permission, ask for your leader.

$ git clone [email protected]:ZapalaCorp/zapala-react-ui.git
$ cd zapala-react-ui

Install all dependencies.

$ yarn

Proccess of contributing

• Before make any change, you should create a new branch from master.
• Start running the test, see it on TDD section.
• Create your component folder in src/
• The component must have this structure

|- Component
  |- Component.js
  |- Component.doc.mdx
  |- Component.test.js
  |- Component.style.js
  |- index.js 

• Commit your changes present tense messages, for example.

git commit -m "create: Carousel component"
git commit -m "add: validation to email field"
git commit -m "remove: unecessary styles"
git commit -m "refactor: Header component to be responsive"

• Create a new pull request to the master branch
• Ask someone to review your code.

Documentation

To run the docz server while you're developing

$ yarn docz:dev

TDD - Test Driven Development

It's encouraged you use TDD to contribute to this library. Ok, we know that sometimes we have difficults to do it due to limited time. But give priority to do it to be a great maintainer of the project's quality.

Run the test:watch

$ yarn test:watch

Create the test in the same folder of the component with the same name following test.js.

|- Container
  |- Container.js
  |- Container.test.js <- example

Follow this example to create your tests.

import React from 'react';
import { mount } from 'enzyme';

import Container from './Container';

describe('Container', () => {
  it('should render children text', () => {
    const text = 'testing...'
    const wrapper = mount(<Container>{text}</Container>);

    expect(wrapper.text()).toEqual(text);
  });
});

Linking

I supose that you want to install the local library to your app in order to see it running before you publish it.

Inside of the library, register the library.

$ yarn link

It must show a response like this.

success Registered "zapala-react-ui".

Inside the your project, you link the library using link.

$ cd ../your-project
$ yarn link 'zapala-react-ui'

Ok, it's linked locally to your project, so if you make changes on your local zapala-react-ui it will reflect on your project.

If you're having some trouble linking the library about duplicated react, follow this tutorial.

Inside the library, create a link of your project's react using npm.

$ npm link '../[your-project]/node_modules/react'

Best practices

Following these practices make you a better professional

• Follow SOLID, KISS and DRY principles
• Versioning as a professional with git best practices and conventional commits