diogo-codengage / test-copy3

Sanar

Este projeto foi desenvolvido para que seja atendido de forma ampla, eficiênte e produtiva todas as necessidades das diversas plataformas pertencentes à Editora Sanar.

• SANAR
• Instalação;
• Execução;
• Estrutura;
• Construção;
• Observações;
• Bibliotecas utilizadas;
• Padrões utilizadas;
• Dicas e recomendações;
• Sanar UI

---

Instalação

Apesar de estar sendo executado na raíz da aplicação, este comando instalará também as dependências nos submódulos da aplicação (/packages):

$ yarn

Execução

Para a execução dos submódulos o arquivo package.json terá em sua seção de scripts uma referência para cada script relacionado aos submódulos.

Exemplo: $ yarn app1:start ou $ yarn app1:build.

Ao ser adicionada nova aplicação e/ou biblioteca será necessária a adição de um script referenciando seus comandos.

//sanar/package.json
"scripts": {
	"newapp:start": "yarn workspace newapp start"
}

Estrutura (Monorepo)

Como citado, a Editora Sanar possui diversas plataformas - que seguem o mesmo padrão visual - com diversos conteúdos distintos. Avaliando esta necessidade, fora optado pela utilização de um Monorepo baseado na seguinte estrutura:

//sanar
	/packages
		/app1
			package.json
		/lib1
			package.json
		...
	package.json

Construção

Nesta estrutura fora utilizado o Yarn Workspaces para o gerenciamento de todas as dependências e submódulos. Logo, estas sendo em comum entre os demais projetos, ela deverá ser adicionada ao package.json na raíz da aplicação. Caso contrário, apenas na aplicação/biblioteca que necessite a utilização da mesma.

//sanar/packages.json
"workspaces": [
	"packages/*"
]

Observações

• Em casos onde será necessária a configuração de um build por meio do Babel, deverá ser importada a configuração do arquivo da raíz da aplicação - como feito em packages/sanar-ui/babel.config.js - e alterado pontualmente as necessidades, deixando assim, a responsabilidade ao projeto raíz.

Bibliotecas utilizadas

• Ant Design
• Babel
• Jest
• LESS
• React
• React Testing Library
• Storybook
• Yarn
  • Workspaces

Padrões utilizados:

• Atomic Design;
• Git Flow; - Os nomes da branch deverá seguir a nomenclatura sugerida pelo Jira: CÓD-TASK; - Ex.: NE-001-Documentar-projeto.
• Commits: Para possuírmos um padrão de commits fora utilizados as ferramentas listadas ao final deste tópico. - Padrões e convenções: - Deverão ser em inglês; - O commit deve ser da forma imperativa: - Ex.: add, fix, adjust, etc; - Seguindo o CLI da ferramenta (yarn commit) teria o seguinte padrão: - Característica - as opções são listadas pelo CLI: - Ex.: feat, refactor, docs; - Contexto: - Ex.: e-sanar, sanar-ui, core; - Mensagem curta: add component Button; - Mensagem longa (opcional); - **RESULTADO: ** feat(sanar-ui): add component Button; - Ferramentas: - Commitzen; - CLI; - Convetional.

Dicas e Recomendações

• Para usuários do Visual Studio Code: - Prettier;

---

Sanar UI

Esta biblioteca - localizada em: /sanar/packages/sanar-ui - possuirá todos os elementos visuais que serão compartilhados entre as demais aplicações do ecossistema Sanar.

Para o seu desenvolvimento é utilizado os seguintes padrões e bibliotecas:

• Ant Design;
• Atomic Design;
• Storybook;
  • Todos os componentes que serão adicionados ao Storybook deverão conter a extensão *.stories.* para que a adição seja automática; - Deverá ser contido pela pasta a qual está categorizado dentro do padrão do Atomic Design (Atoms, Molecules, Organisms, entre outros); - Ex.: storiesOf("Atoms.Button", module)
• Testes (Jest | React Testing Library):
  • Cada componente terá em sua raíz a pasta __tests__ contendo todos os arquivos de teste; - O arquivo de testes deverá seguir o padrão: NomeComponente.test.js; - Todo o arquivo com a extensão *.test.* será adicionado automaticamente à lista de testes para a execução;
• Componentes:
  • Terão de sempre iniciar com o prefixo ES; - Ex.: ESButton, ESCard;
  • Deverão conter a extensão .jsx;
  • Seus diferentes tipos de aplicação deverão - quando necessário a criação de outro arquivo - conter alguma referência de que pertecem para aquele ecossistema; - Ex.: Button, ButtonIcon, Menu, SubMenu;
• Estilização:
  • Seguirão o seguinte processo para a importação: //Button/style.less //Atoms/atoms.less @import('./Button/style.less'); // Components/components.less @import('./Atoms/atoms.less')