@diogobiz/platform-ui v1.0.0

Este projeto contem libs utilitários de componentes de ui e utils para frontend em React.

• Instalação;
• Execução;
• Estrutura;
• Bibliotecas utilizadas;
• Padrões utilizadas;
• Dicas e recomendações;
• Components
• Sanar UI
• Utils

Instalação

Executar na raiz do projeto para instalar todas as dependências: $ 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 components:start ou $ yarn components:build.

Ou acessando direto o workspace e executando seu respectivo script (O nome do workspace é o nome do projeto no seu respectivo package.json).

Exemplo: $ yarn workspace @sanar/components start ou $ yarn workspace @sanar/components build.

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:

Atualmente os projetos que fazem uso dessas libs são:

• Sanar saúde
• SanarFlix
• Residência médica

/platform-ui
	/libs
		/components
			package.json
		/sanar-ui
			package.json
		/utils
			package.json
		...
	package.json

Bibliotecas utilizadas

• Ant Design
• Babel
• Jest
• LESS
• React
• i18next
• date-fns
• Styled-components
• Styled-system
• Styled-tools
• React Testing Library
• Storybook
• Yarn
  • Workspaces

Padrões utilizados:

• Atomic Design;
• 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;

Components

Esta biblioteca - localizada em: /plataform-ui/libs/components - possuí components react utilizando styles-compoents e styled-system.

Todos os componentes deverão ser criados nessa lib e não.

NÂO CRIAR COMPONOENTES NOVOS NA LIB SANAR-UI, SALVO SE O SEU PROJETO ESTEJA UTILIZANDO ELA DIRETAMENTE E NÂO SUPORTE STYLED-COMPONENTS.

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 SAN; - Ex.: SANButton, SANCard;
  • Deverão conter a extensão .tsx;
  • 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:
  • Styled-components + Styled-system

Sanar UI

Esta biblioteca - localizada em: /plataform-ui/libs/sanar-ui.

Está lib está em processo de depreciação, a mesma utiliza Ant Design e less. Todos os novos componentes devem ser criado na lib components ja utilizando a nova stack de styled-components e não mais Antd + less

Utils

Esta biblioteca - localizada em: /plataform-ui/libs/utils.

Nela deverão ser implentados utilitários que são, ou possam ser usados em varios mais de um projeto. ~~