biblioteca-ui-netimoveis v0.6.0
Guia de primeiros passos para desenvolvedores Biblioteca UI Netimóveis (consumo)
Biblioteca UI Netimóveis contém uma coleção de componentes React + tailwind + StyledComponent que podem ser usados para criar aplicativos React acessíveis e eficientes, de acordo com as diretrizes da marca Netimóveis.
Este guia de introdução fornece as instruções básicas para instalar os componentes como uma dependência em seu aplicativo e começar a usar esses componentes. A documentação de cada componente individual fornece informações mais detalhadas, incluindo:
- Uma visão geral com orientação de uso contextual e práticas recomendadas
- Exemplos de variações comuns do componente, como tamanhos e estados
- Uma descrição detalhada dos adereços React disponíveis, juntamente com um ambiente de playground interativo
Primeiro passo para iniciar o projeto em seu ambiente de desenvolvimento
- Validando as configurações da maquina
- Configurando o VSCode
- Baixando e rodando o projeto
1 - Validando as configurações
Para rodar o projeto tenha em sua maquina os seguintes softwares/pacotes instalados.
- Node
- Npm
- Yarn
2 - VSCODE
2.1 Extensões
Plugins obrigatorios para o projeto
- Eslint
- Editorconfig
- Prettier - Code formatter
2.2 Extensões opcionais
as extensões abaixos são opcionais
- Material Icon Theme
- Bracket Pair Colorize 2
- styled-components-snippets
- Visual Studio IntelliCode
- Color Highlight
2.3 Outras configurações do VSCode
Recomendado instalar a fonte firacode, gitHub FiraCode
Caso queira ajustar as configurações settings do seu VSCode, sege um padrão.
{
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Dracula",
"window.zoomLevel": 0,
"editor.matchBrackets": "never",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"explorer.confirmDelete": false,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.rulers": [80, 120],
"editor.renderLineHighlight": "gutter",
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"javascript.updateImportsOnFileMove.enabled": "never",
"editor.parameterHints.enabled": false,
"breadcrumbs.enabled": true,
"javascript.suggest.autoImports": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"explorer.compactFolders": false,
"explorer.confirmDragAndDrop": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.formatOnType": true,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
3 - Baixando e rodando o projeto
Baixe o projeto a partir da branch master
# https
git clone https://NetimoveisCelso@bitbucket.org/redenetimoveis/biblioteca-ui-netimoveis.git
Crie uma nova branch em sua maquina new branch
git checkout -b NOME_BRANCH
3.1 Configurando o Projeto
No projeto da Biblioteca de UI temos o Storybook e nossos componentes.
Estamos utilizando o yarn, roda o comando abaixo (raiz do projeto) para baixar os pacotes.
yarn
Rode o projeto do Storybook com o seguinte comando, assim você terá acesso ao projeto do Storybook com seus componentes criados
yarn storybook
Buildar a Biblioteca UI para utilizar os componentes criados
Agora, para você utilizar os componentes criados no projeto exemplo
(./exemple/)
Você precisará realizar o build da biblioteca, da seguinte forma abaixo:
yarn build
pronto!
Sua biblioteca esta pronta para ser consumida no projeto de example
ATENÇÃO - PODE GERAR UM ERRO DE MESMO DEPOIS QUE BUILDAR A SUA BIBLIOTECA, NO PROJETO EXEMPLO AS PROPS OU OUTRAS ALTERAÇÃOS NO COMPONENTE NÃO FUNCIONE, CALMA, APENAS EXECUTE ESTE PROCEDIMENTO, PODE SER SEU TYPESCRIPT QUE DEU PROBLEMA
Aperte F1 no VSCode e execute >TypeScript: Restart TS server
Agora podemos entrar na pasta de example e chamar nossos components e testar assim como esta no nosso exemplo
cd example && yarn install