finch-frontend-web-components6

Front-end WEB Components

Este é um Next.js projeto inicializado com create-next-app.

Tem como objetivo agrupar os componentes reutilizaveis do design system da Finch que serão publicados no npm registry.

Utiliza como base de estilização principal o Tailwind CSS.

Setup do Projeto

Depêndencias e versões necessárias para a execução do projeto

• Nodejs >= v18
• NPM >= v9

O download e instalação do Nodejs, já trás em seu pacote o NPM na versao mais atual.

Depêndencias para manter a padronização do projeto

Para a padronização e organizacão dos códigos do projeto, utilizamos algumas extsões do Visual Studio Code (VSCode)

• ESLint
• Prettier - Code formatter

OPCIONAL: Para aplicar essas depêndencias na formatação dos arquivos de forma automatica, basta abrir o arquivo de configuração de usuario do VSCode:

• MacOS

command + shift + p

• Windows / Linux

ctrl + shift + p

Procure por:

Preferências: Abrir as Configurações do Usuário (JSON)
ou/
Preferences: Open User Settings (JSON)

Adicione no arquivo de configurações:

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.addMissingImports": true
},

Depêndencias adicionais para facilitar o desenvolvimento do projeto

Para facilitar o desenvolvimento com classes HTML utilizando o Tailwind CSS a principal extesão do Visual Studio Code (VSCode) a ser utilizada:

• Tailwind CSS IntelliSense

Download do projeto

git clone [e-mail]:finch360/frontend-web-components.git

Iniciar/ excecutar o projeto

Instalação das dependencias do node

npm install

Após a instalação das dependências, execute o projeto

npm run dev

Esse comando, irá criar um servidor local, apontando para a porta 3000

Abra http://localhost:3000 em seu navegador para ver o resultado.

Estrutura do projeto

tests: Para todos os testes unitários do sistema;

@core: Para toda a parte negocial da aplicação. Contém recursos como:

consts: Recursos imutaveis e reutilizaveis em toda a aplicação (constantes alfa numéricas);

enums: Recursos imutaveis e reutilizaveis em toda a aplicação (numéricos);

events: controle e propagação de eventos da aplicação;

interfaces: Para modelos de dados;

models: Para modelos de dados em formato de classes com valores inicializados;

services: Conexão com serviços externos (API`s);

utils: funções globais da aplicação, como formatação de campos, validação de datas, entre outros;

assets: Para armazenar todas as imagens e recursos de midia da aplicação;

components: Para armazenar todos os componentes reutilizaveis da aplicação;

pages: Para armazenar todas as paginas da aplicação;

style: Para adicionar recursos CSS que vão além da configuração do Tailwind CSS.

Referências

Para saber mais sobre Next.js, dê uma olhada nos seguintes recursos:

• Documentação Next.js - aprenda sobre os recursos e API do Next.js.
• Aprenda Next.js - um tutorial interativo do Next.js.

---

OBS

adicionar/ explicar configuração do node/ package.json para publicar no registry do NPM, conforme conseguirmos realizar a criação de alguns componentes.

Adicionar template docker/ compose