Funcionalidades

• ⚡️ NextJS - Desenvolvido com NextJS

• 🔮 Nextra - Framework para documentação do design system

• 🦾 Typescript - Desenvolvido com o poder do Typescript

• 💻 ShadCN - Framework UI para desenvolvimento dos componentes. Baseado no RadixUI

• 🎨 Tailwind - Framework CSS que utiliza classes utilitárias através do Atomic CSS - Tailwind para React Native

• 🐶 Husky - Padronização e controle de commits

• 🚀 Eslint + Prettier - Padronização do código e lint de errors

O projeto requer Node >= 16.8.0

Recomenda-se o uso do Yarn para o gerenciamento dos pacotes

Requisitos

Components

Todos os componentes que serão utilizados pela lib, deverão ser criados obrigatoriamente no seguinte diretório e na seguinte nomenclatura (.src/components/Nome.tsx)

Tailwind

Utilizamos o Tailwind para criação da nossa UI. Ele se utiliza do classes utilitárias através do Atomic CSS. Os arquivos de configuração dos tokens estão dentro da pasta (.src/assets/css/tokens.css)

Assets

Aqui deverá conter todos os assets que deverão ser usados na utilização da lib. Você encontrará na seguinte pasta (.src/assets/)

Gitflow

Utilizamos o padrão de gitflow do mercado. Temos três branchs principais: production (produção), homolog (homologação) e development (desenvolvimento). Quando estiverem desenvolvendo uma nova feature, se utilizar da seguinte nomenclatura: feat/nome-da-feature. Após a finalização deve-se criar a PR e fazer o merge com development. Por regra, as PRs somente podem ser mergeados após o review e aceite de pelo menos um integrante da equipe.

Commits

Nos commits deverá ser utilizado a convenção dos Conventional Commits.

Husky

Ferramente utilizada para padronizar e controlar os commits que são feitos dentro do projeto. Quando for realizar o commit lembre-se de utilizar os commits semânticos e de não ter nenhum erro de lint em seu código, caso contrário o husky bloqueará seu commit até que você corrija esses erros e caso a mensagem no commit não seja semântica o husky também bloqueará seu commit.

ESLint/Prettier

Para padronizar nosso código utilizamos o Eslint e o Prettier dentro de nossos projetos. É importante caso use o Vscode de utilizar as extensões: esbenp.prettier-vscode, dbaeumer.vscode-eslint

Utilização

Configuração

Rode o comando para instalar todas as dependências do projeto

yarn install

Rode o comando para instalar o husky

yarn prepare

Rode o comando para dar permissão aos scripts do husky

chmod ug+x .husky/*

Desenvolvimento

Rode o comando para iniciar o ambiente de desenvolvimento

yarn dev

OBS: Basta acessar o http://localhost:3000/ para visualizar a aplicação em seu browser favorito

Build

Para fazer o processo de build

yarn build

Para rodar a aplicação em modo de produção

yarn start

Para lintar possíveis erros da aplicação

yarn lint