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:

1. Uma visão geral com orientação de uso contextual e práticas recomendadas
2. Exemplos de variações comuns do componente, como tamanhos e estados
3. 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

1. Validando as configurações da maquina
2. Configurando o VSCode
3. 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://[email protected]/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