Skip to content
✈️ The next iteration of Pagar.me's Dashboard
Branch: master
Clone or download
Latest commit 36b4466 May 16, 2019

README.md

Pilot

Join the chat at https://gitter.im/pagarme/react-event-components


A próxima versão da Dashboard Pagar.me

Índice

Introdução

Pilot é o codinome da nova dashboard do Pagar.me. O produto foi criado a partir de feedbacks dos usuários, para que eles possam ter uma experiência cada vez mais transparente de sua operação financeira no Pagar.me, e consigam focar no seu negócio!

Tecnologia utilizada

A stack foi escolhida com base no que empresas como Facebook, AirBnb, e New York Times estão usando para construir suas experiências. Também foi levado em consideração a simplicidade, curva de aprendizado e requisitos como fácil distribuição e entrega progressiva.

Tendo isso em vista, optamos por usar React e Ramda. A estrutura do projeto foi iniciada rapidamente usando o FormerKit Dashboard, projeto que desenvolvemos baseado no Create React App para nos permitir criar rapidamente projetos de dashboards.

Requisitos

Este repositório é um monorepo que aloja os pacotes que compõem a Pilot. Para instalar as dependências é necessário usar o Yarn versão 1.0 ou superior, que suporta a funcionalidade de Workspaces.

Instalação

Algumas instruções para desenvolver na Pilot:

  1. Clonando o repositório

    $ git clone git@github.com:pagarme/pilot.git
  2. Rodando o servidor

    Entre na pasta principal do projeto:

    $ cd pilot

    Use o Yarn para instalar as dependências:

    $ yarn

    Entre no diretório da Pilot e inicie a aplicação:

    $ cd packages/pilot
    $ yarn start

Cockpit

cockpit-data-flow

O Cockpit é nossa biblioteca para efetuar requests a serviços externos, e devolver os dados retornados em um formato estruturado para serem utilizados nas páginas da Pilot. Atualmente, a principal função do Cockpit é fazer a comunicação com a API utilizando o pagarme-js. Porém, sua estrutura permite interação com outros serviços, caso haja necessidade. Uma request ao Cockpit equivale a uma ou mais requests na API, onde o dado retornado será tratado para ser renderizado na Pilot.

Rodando testes no Cockpit

Entre no diretório do Cockpit e inicie os testes:

$ cd packages/cockpit
$ yarn test

Estrutura do projeto

  • packages: Toda a estrutura de arquivos e pastas dos monorepos, seguindo a funcionalidades de Workspaces.

    • cockpit: Contém a estrutura de arquivos e pastas do Cockpit.

      • config: Configurações gerais do Webpack e Jest.
      • dist: Scripts prontos para produção.
      • scripts: Todos os scripts usados para testes.
      • src: Código-fonte do Cockpit.
    • pilot: Contém a estrutura de arquivos e pastas do Pilot.

      • src
        • components: Componentes pequenos, geralmente compostos de JSX e estilos. Não devem conter estado e devem estar aqui apenas caso sejam reutilizados em várias áreas distintas do app.
        • containers: Componentes grandes, compostos de outros componentes. Podem conter estilos e estado (desde que o estado seja irrelevante para o contexto da rota). Podem estar aqui para serem reutilizados ou por serem usados em uma rota inteira.
        • pages: Componentes grandes que contém a lógica de busca de dados e manutenção de estado das rotas do app. Não devem conter estilos e são os únicos componentes que podem ser conectados ao Redux.
        • formatters: Funções utilizadas para formatação dos dados da aplicação.
        • models: Dados estáticos que fazem parte da aplicação e mapeiam para dados usados ou retornados pela API.
      • stories: Nossa biblioteca de componentes, containers e páginas da aplicação. Utilizamos o Storybook para auxiliar no desenvolvimento usando mocks e para efetuar validações visuais.

Contribuindo

Para ler informações sobre contribuição, confira nosso guia de contribuição em CONTRIBUTING.md.

Licenças

Veja as licenças em LICENSES.

You can’t perform that action at this time.