npm package: @sankhyalabs/contas-receber
Description: Para execução do projeto é necessário ter o node instalado o indicado é na versão [16](https://nodejs.org/dist/v16.13.0/node-v16.13.0-x64.msi)
Latest version: 1.0.0-SKA-123455.20240104180653

# Aplicação React
### Esse é um projeto de exemplo para construção de telas Sankhya utilizando a biblioteca de componentes ez-ui no framework React

Para execução do projeto é necessário ter o node instalado o indicado é na versão [16](https://nodejs.org/dist/v16.13.0/node-v16.13.0-x64.msi)

Com o node instalado execute dentro da pasta do projeto o comando `npm install`

Esse comando faz o download e instala os modulos NPM

##### Outros comandos NPM

`npm start` - Comando que cria um servidor na porta 3000 para executar o projeto da tela e permitir testes
`npm build` - Comando que faz a transpilação do código react gerando dentro da pasta build um compilado permitindo assim publicar a tela. (Para publicação correta da tela deve ser vista alguns detalhes)

### Dependências importantes

[@sankhyalabs/ezui](https://git.sankhya.com.br/sankhyalabs/ez-ui) - Biblioteca de componentes ez-ui, essa biblioteca contém componentes agnósticos a framework, e agnóstico a regras de negocio do SankhyaOM.

[@sankhyalabs/react-ezui](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/tree/master/react-output) - Projeto para utilização especificamente no React, esse projeto tem como objetivo a disponibilização dos componentes do @sankhyalabs/ezui para utilização com React JSX facilitando a implementação utilizando a lib React.

[@sankhyalabs/sankhyablocks](https://git.sankhya.com.br/sankhyalabs/sankhya-blocks) - Esse projeto tem o papel de disponibilizar utilitários referente o contexto do SankhyaOM, nele podemos ter algumas regras referente a dicionário de dados Sankhya, workspace do SankhyaOM, application e etc. Seu principal papel é oferecer building blocks para facilitar a utilização do ez-ui no contexto do SankhyaOM.

[@sankhyalabs/ez-design](https://git.sankhya.com.br/sankhyalabs/ez-design) - Esse projeto é responsável por definir o tema da aplicação, tanto o @sankhyalabs/ezui quanto a aplicação dependem desse projeto para definir o tema da aplicação.

gulp - Para realizar deploy dos bundles da tela para o SankhyaOM.

### Fontes e códigos importantes

- No index.tsx ou index.js no src do projeto deve-se utilizar o seguinte import:
    ``` js
    import { applyPolyfills, defineCustomElements } from "@sankhyalabs/ezui/loader"
    ```
    No final do arquivo após a renderização  da div root deve-se executar a seguinte função
    ``` js
    applyPolyfills().then(() => {
        defineCustomElements();
    });
    ```

- No index.html da pasta public deve-se importar o seguinte css:
    ``` js
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sankhyalabs/ez-design@latest/dist/default/ez-themed.min.css"/>
    ```
    > Nota:  Esse css já é importado no template launcher html mudanças realizada nesse index.html não serão refletidas dentro do sankhya

- No package.json é necessário definir o homepage com ./reactApps/{path-da-tela} no projeto é definido um de exemplo como o abaixo:
    ``` json
      "homepage": "./reactApps/ContasReceber",
    ```

### Utilização de tela react dentro do Sankhya-W

##### Telas já existentes
Semelhante ao WorkspaceHelper que definimos o caminho das telas que irão utilizar a versão HTML5 temos também o ReactAppsHelper que por sua vez tem por objetivo de informar as telas que irão ser desenvolvidas utilizando o React e o novo desing system.

Para configurar abra o arquivo
/MGE-Modelcore/src/br/com/sankhya/modelcore/helper/workspace/PlatformLabsScreensHelper.java

A partir da linha 15 é possível adicionar os path das telas exemplo abaixo:

``` java
platformLabsScreensPath.add("/mgefin/ContasReceber");
```
##### Novas telas
Em novas telas ao criar o xml do evento no caminho da tela a url deve ter como parâmetro isReact=true e o caminho deve apontar para mge(modulo)/reactApps/nomedatela abaixo um exemplo de url de tela:
``` xml
<url><![CDATA[/mgefin/reactApps/contas-receber/contasReceber.xhtml5?isReactLabs=true&mgeSession=${mge.session.id}&resourceID=${resourceID}]]></url>
```
##### Parâmetro do servidor para habilitar as telas
No período de desenvolvimento é necessário adicionar o seguinte parâmetro nas configurações do Widfly ou Jboss
``-Dbr.com.sankhya.labs.use.new.screens=S``