npm package: @liferay-react/boilerplate-shared
Description: Boilerplate Shared
Latest version: 1.0.4

# @liferay-react/boilerplate-shared

> Conjunto de ferramentas, componentes e padrões para aceleração de desenvolvimento de Portlets React no Liferay DXP.

🔗 **GitHub:** [Benhur-Silveira/gx2-react-liferay-boilerplate-shared](https://github.com/Benhur-Silveira/gx2-react-liferay-boilerplate-shared)

Este pacote oferece uma base sólida para a criação de micro-frontends baseados em React para o ecossistema Liferay, incluindo um utilitário CLI para scaffolding e uma biblioteca compartilhada de utilitários.

## 🚀 Funcionalidades Principais

- **CLI Scaffolding**: Crie novos projetos Liferay-React pré-configurados em segundos.
- **Componentes React**: Componentes de UI padronizados e reutilizáveis (ex: `Button`).
- **Hooks Customizados**: Abstrações úteis como `useMediaQuery`.
- **Serviços de API**: Instância do Axios pré-configurada com tokens de autenticação do Liferay.
- **Máscaras e Validações**: Suporte para padrões brasileiros (CPF/CNPJ).
- **Integração Liferay**: Configurado nativamente para `liferay-npm-bundler`.

---

## 🛠️ Instalação e Uso do CLI

Para criar um novo projeto baseado neste boilerplate, você pode usar o utilitário CLI diretamente via `npx`:

```bash
npx @liferay-react/boilerplate-shared
```

### Instalação Global (Opcional)

Se preferir ter o comando sempre disponível no seu terminal, instale globalmente:

```bash
npm install -g @liferay-react/boilerplate-shared
```

Após a instalação, você pode iniciar um novo projeto apenas digitando:

```bash
create-shared-boilerplate
```

O CLI irá guiá-lo através de algumas perguntas:

1. **Nome do projeto**: O diretório que será criado.
2. **Caminho do Liferay**: Localização do seu bundle Liferay para deploy automático.

### Componentes

```jsx
import { Button } from "{{PROJECT_NAME}}";

const MyComponent = () => (
  <Button variant="primary" onClick={() => console.log("Click!")}>
    Clique Aqui
  </Button>
);
```

### Services (Axios)

A instância `apiLiferay` já vem configurada com os headers `x-csrf-token` e `X-Liferay-Auth-Token` necessários para requisições autenticadas no portal.

```javascript
import { apiLiferay } from "{{PROJECT_NAME}}";
const fetchData = async () => {
  const response = await apiLiferay.get("/my-headless-api/v1.0/resource");
  return response.data;
};
```

---

## ⚙️ Scripts de Desenvolvimento

Se você estiver contribuindo para este boilerplate ou desenvolvendo localmente:

| Comando          | Descrição                                                       |
| :--------------- | :-------------------------------------------------------------- |
| `npm run build`  | Compila os arquivos `src` para `build` usando Babel.            |
| `npm run bundle` | Executa o `liferay-npm-bundler` para preparar o pacote Liferay. |
| `npm run deploy` | Compila, pacotiza e faz o deploy no diretório configurado.      |

---

## 🧪 Stack Tecnológica

- **React 18**
- **Axios** (Comunicação API)
- **TanStack Query v4** (Gerenciamento de Estado)
- **Zod** (Validação de Schema)
- **Babel & Liferay NPM Bundler**

---

## 📝 Licença

Este projeto está sob a licença [MIT](LICENSE).

Liferay © 2024