A próxima versão do sistema Web da Its4Company
Alo! Alo! Seja Bem vindo ao repositório. Lite4 é o codinome do novo sistema Web da Its4Company. O produto está sendo criado a partir do que empresas como Facebook, AirBnb, Uber, e New York Times estão usando para construir suas experiências. Também foi levado em consideração a simplicidade, curva de aprendizado, automatização e requisitos como fácil distribuição, entrega progressiva e principalmente manutenibilidade do projeto.
A estrutura do projeto foi iniciada a partir de várias pesquisas, referências e projetos open source para nos permitir criar a melhor estrutura de trabalho.
Componente não recebe state, lógica, tratamento de erro, ele é unicamente um comportamento da view encapsulado. Todo o data deve ser passado via props.
É um conjunto de components encapsulado para executar determinado comportamento na view. Todas os state, lógica, tratamento de erro, e etc, são referentes a ele próprio. O que não depende dele.
-
mapStateToProps: Mapeaia todas as operações (Dispatchs) do modulo
-
mapDispatchToProps: Mapeia o state e selectors do modulo
.
├── .storybook # configuração do storybook
├── .vscode # configuração VSCode
├── configs # Pasta raiz de configurações do projeto
├── dist # Pasta de distribuíção (build)
├── node_modules # Pacotes node.js
├── refs # Código de referência de design partners
├── scripts # Scripts auxiliares e complementares da infra
├── src # Código fonte
│ ├── client # Código front-end
│ │ ├── components # Componentes reutilisáveis e modularizados
│ │ ├── containers # Componentes complexos que conecta com redux
│ │ ├── images # Imagens
│ │ ├── lib # Wrapper das dependências e funções reaproveitavéis
│ │ ├── routes # Routes
│ │ ├── store # Redux
│ │ ├── styles # Estilo global
│ │ ├── translations # Config da internacionalização; messages comuns e globais
│ │ ├── vendors # Libs terceiros que precisam ser atualizados manualmente, addons etc
│ | ├── App.tsx # Ponto de entrada para renderização
│ | ├── constants.ts # Constantes da aplicação
│ | ├── index.html # index.html :p
│ | └── index.tsx # Depreciado: Será incluso no App.tsx
│ ├── server # Código backend - em desenvolvimento :p
│ └── shared # Código isomórfico
├── stories # Documentação
├── tests # Testes globais
├── types # Typagem typescript personalizada
├── ... # Em brevePara contribuir para este repositório instale estes programas em seu computador.
Abra sua PR. Fique atento aos padrões de projeto que é usado neste, que são:
- CSS/SCSS
- Typescript/Javascript: O TSlint irá lhe guiar com o style1, style2 e com pequenas alterações
- Git e Outros: Bee Stylish
Está configurado no hook do git commit o prettier que fará automatimente a formatação do código.
Usamos o Github flow no desenvolvimento. Para criar um novo PR:
- Crie um fork deste repositório e clone em seu computador
- Crie uma nova branch baseada na master (
git checkout -b fix/button-sizepor exemplo) - Faça suas alterações, criando commits que agrupam as alterações feitas
- Envie sua branch para seu fork (
git push origin fix/button-size, por exemplo)
Caso sua branch fique desatualizada, poderemos solicitar um rebase. Para fazê-lo:
- Adicione nosso "upstream" como remoto:
git remote add upstream https://github.com/pagarme/pilot - Busque as atualizações do upstream:
git fetch upstream - Faça o rebase de sua branch:
git rebase upstream/master <sua-branch> - Resolva os conflitos e use
git rebase --continuepara continuar - Faça o force push em seu fork:
git push origin <sua-branch> --force-with-lease
-
Baixe o código fonte:
git clone https://github.com/its4company/its4-web.git -
Instalação das dependências do projeto
yarn -
Iniciando o projeto
yarn dev
Use yarn build
Todos comandos
| Comandos | Descrição |
|---|---|
yarn |
Instala todas as dependências do projeto |
clean:dist |
Limpa pasta de distribuição |
lint |
Lint typescript/javascript e CSS/SCSS |
lint:ts |
Lint typescript/javascript |
lint:sass |
Lint CSS/SCSS |
i18n:extract |
Extraí mensagens em src/client/translations/extracted para tradução dos termos |
i18n:watch |
Escuta alterações nos arquivos Messages.ts e extrai os termos |
prebuild |
Auto Executa antes de build. Executa: clean:dist, lint |
build:webpack |
Webpack em modo de production |
build |
Executa build:webpack, doc:build. Build app para ./dist/ |
postbuild |
Auto Executa depois de build. Verifica se todos os termos foram traduzidos |
dev |
Build app continuamente (HMR) com servidor http://localhost:3000 |
dev:webpack |
Webpack em modo de develop |
pretest |
Auto Executa antes de test. Executa: lint |
test |
Testa aplicação |
doc |
Build documentação continuamente (HMR) com servidor em http://localhost:6000 |
doc:build |
Build documentação para /dist/doc |
- CSS Blocks (Esperando lançar versão webpack 4)
- Muitas outras implementações, faça a sua :p
Existe algo a ser discutido? Abra sua Issue ou mande seu PR