# :sparkles: - 2ª Aula 

## Criando o repositório no github e comitando o trabalho anterior

#/home/rfpereira/github/live/chatcollab> git init

#/home/rfpereira/github/live/chatcollab> git remote add origin git@github.com:phaelfp/chatcollab.git

Antes de continuar vamos fazer algumas configurações para padronização de código em projetos

### [EsLint](https://eslint.org/)

* Instalar o eslint `yarn create @eslint/config`
  * How would you like to use ESLint? `style`
  * What type of modules does your project use? `esm`
  * Which framework does your project use? `react`
  * Does your project use TypeScript? `No`
  * Where does your code run? `browser`
  * How would you like to define a style for your project?
    `Use a popular style guide` -> `airbnb`
  * What format do you wnat your config file to be in? `JSON`
  * Would you like to install them now with npm? `Yes`

### [Prettier](https://github.com/prettier/eslint-config-prettier)

Para auxiliar o eslint na padronização de código utilizamos o Prettier

Antes de fazermos esta configuração temos que instalar os plugins para nossa IDE

## Visual Code - IDE de desenvolvimento

Abrir o vscode com o projeto
#/user/rfpereira/github/lives/chatcollab>code .

### Plugins
* Para ter os recursos do Eslint na IDE usamos o plugin [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
* Para ajudar na formatação/padronização do código usamos o plugin [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Depois de instalar os plugins voltamos ao terminal para fazer a instalação do eslint config with prettier e o prettier

#/user/rfpereira/github/lives/chatcollab>yarn add -D eslint-config-prettier prettier

O parametro `-D` é utilizado para instalar o pacote somente em desenvolvimento. 

Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar `"prettier"` depois de `"airbnb",`

Depois abrir o arquivo .prettierrc e colar o código abaixo

```JSON
{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}
```

`Ctrl + Shift + p` digitar `Save without Formatting` e clicar

Para verificar `Ctrl + ,` e clicar no icon da configuração JSON no topo a direita e verificar se tem a linha `"editor.formatOnSave": true,` e a linha `"[javascriptreact]":{"editor.defaultFormatter": "esbenp.prettier-vscode"}`

Para que esta configuração siga em todos que iram trabalhar no projeto temos que copiar aa linhas mensionadas acima e no projeto criar uma pasta .vscode e dentro dela criar m arquivo settings.json e colar as linhas entre `{}` abrir bigodes e fechar bigodes 

Para informar os plugins necessários também acompanharem o projeto é só irmos em cada Plugin clicar na engrenagem e depois em na ultima opção `Add to Workspace Recommendations` e depois disso será criado dentro da pasta .vscode o arquivo extensions.json

Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade
Então utilizamos um recurso do Git chamada Hooks.

Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.

Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o [Husky](https://github.com/typicode/husky) sendo que tem uma forma de utiliza-lo melhor que é [lint-staged](https://github.com/okonet/lint-staged)

#/user/rfpereira/github/lives/chatcollab>npx mrm@2 lint-staged

Já vai instalar e configurar o lint-staged e o husky para gente ficar feliz!

Para padronizar os commits vamos utilizar o [gitmoji](https://www.npmjs.com/package/gitmoji-cli)
* npm i -g gitmoji-cli

Para configurar o hook prepare-commit-msg para utilizar o padrão do commit
* npx gitmoji -i

Agora vamos continuar o processo de versionamento.

#/home/rfpereira/github/live/chatcollab>git add .

#/home/rfpereira/github/live/chatcollab>git commit 
`Não precissa passar o -m já que vamos utilizar o gitmoji`

## Storybook

Uma das mais utilizadas ferramentas de documentação de interface principalmente com React.

### Instalar no projeto
* `npx sb init`

### Iniciar o Storybook
* `yarn storybook`

Dentro do projeto vamos criar um pasta dentro de `src` com o nome `components` 

# Criação do nosso primeiro componente

Vamos criar o component Title para o título de boas-vindas.

Dentro da pasta `components` vamos criar uma pasta `Title` e dentro dela vamos criar os arquivos:
- index.js
- Title.stories.jsx `Documentação do component para o Storybook`
- Title.jsx
- Title.style.js

## Title.stories.jsx
```js
import React from 'react';
import Title from '.';

export default {
  title: 'Components/Title',
  component: Title,
};

const Template = (args) => <Title {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: 'Default',
};

export const Small = Template.bind({});
Small.args = {
  children: 'Small',
};
```

## Title.jsx
```js
import Style from './Title.style';

const Title = function titleComponent({ children }) {
  return <Style.Title>{children}</Style.Title>;
};

export default Title;
```

## index.js
```js
import Title from './Title';

export default Title;
```

## Title.style.js
```js
import styled from 'styled-components';

const Style = {};

Style.Title = styled.h1`
  font-size: 40px;
`;

export default Style;
```

### Instalar uma dependencia para tratar o CSS o [Styled Components](https://styled-components.com/)

* yarn add styled-components

### Plugin Visual Code - IDE
* Adicionar o [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components) não esqueca de clicar na engrenagem e adicionar o plugin no Workspace como fizemos nos outros plugins