@cleitonper/lib v0.0.6
Lib
Projeto base para criação de biblioteca de componentes ReactJS
Este projeto tem como objetivo servir como base para criação de bibliotecas de componentes baseados em ReactJS. Dentre os recursos disponíveis no projeto, estão:
- Suporte a Typescript
- Processo de build com rollup
1. Instalando a biblioteca
Faça a instalação do pacote usando npm
ou yarn
.
NPM: Instalação com npm
# Instalação do pacote
npm install @cleitonper/lib
# Instale as dependencias pares, caso não estejam instaladas
npm install react react-dom react-redux @reduxjs/toolkit @mui/material @emotion/styled @emotion/react
Yarn: Instalação com yarn
# Instalação do pacote
yarn add @cleitonper/lib
# Instale as dependencias pares, caso não estejam instaladas
yarn add react react-dom react-redux @reduxjs/toolkit @mui/material @emotion/styled @emotion/react
Importante! Instale também todas as dependencias definidas na seção peerDependencies
, do package.json
.
Importante! Apesar de não estar nas peerDependencies
, este pacote também depende do framework NextJS
. Ao iniciar um
novo projeto, faça sua criação com create-next-app
2. Usando os componentes
Os componentes da biblioteca dependem de determinados contextos para que funcionem corretamente, como contexto
da biblioteca redux
e material-ui
. Antes de usar qualquer componente, inclua o contexto FeaturesProvider
no nível mais alto do projeto, como no exemplo a seguir:
import { FeaturesProvider, TodoList } from '@cleitonper/lib';
export const App = () => {
return (
<FeaturesProvider>
{/* Os componentes devem ser filhos de FeaturesProvider */}
<TodoList />
</FeaturesProvider>
);
};
3. Ambiente de desenvolvimento do pacote
Durante o desenvolvimento do pacote, não é necessário publicar uma nova versão para testar as mudanças.
A ferramenta npm link
pode ser usada para apontar
instalação deste pacote para um diretório local.
Veja a seguir o passo a paso de como criar uma aplicação cliente e testar o pacote localmente.
3.1 Clone o projeto
# Clone o repositório
git clone git@github.com:cleitonper/lib.git
# Instale as dependencias
npm install
# Faça o build do projeto
npm run build:package
3.2 Crie uma aplicação cliente
# Crie uma aplicação NextJS
npx create-next-app@latest client
# Instale o pacote
npm install @cleitonper/lib
# Instale as dependencias pares
npm install react-redux @reduxjs/toolkit @mui/material @emotion/styled @emotion/react
3.3 Crie um link entre o pacote e a aplicação cliente
Dentro da pasta do pacote (lib
), execute o comando a seguir para criar uma referência
local para as instalações de @cleitonper/lib
para a pasta lib
.
Ao fazer isso, nossa aplicação cliente (client
) poderá usar a bliblioteca apontando
para o diretório local lib
, ao invés de baixar o pacote do registry do npm.
# Dentro da pasta do pacote, execute
npm link
Dentro da pasta da aplicação cliente (client
), execute o comando a seguir para apontar
a instalação do pacote para o diretório local lib
.
npm link @cleitonper/lib
Neste ponto, toda vez que o comando de build for executado, a instalação do pácote @cleitonper/lib
dentro da aplicação cliente client
terá uma versão atualizada, com as ultimas mudanças feitas localmente.
!Dica Para não ter que gerar um novo build sempre que fizer uma mudança no pacote, é possível executar o comando de build em watch mode. Para fazer isso, dentro da pasta do pacote, execute o seguinte comando:
# Executando o build em watch mode
npm run build:package -- -w
Dica! Para ver ser o pacote foi corretamente linkado, execute o comando npm ls --global @cleitonper/lib
.
Dica! Para remover o link do pacote local, execute o comando npm rm --global @cleitonper/lib
.
4. Publicando uma nova versão
# Faça login no npm
npm login
# Faça o build do projeto
npm run build:package
# Atualize o campo version do package.json
# Por enquanto, este passo deve ser feito manualmente
# Publique a nova versão no registry
npm publish --access public