moderniza-components

Moderniza Components

Livraria de componentes próprios da moderniza. Utilizados no gestão e plataforma.

Node: 16.20.0 LTS

Documentação

• Documentação dos componentes

TODO

• Aceitar arquivos de estilo (.scss)
• Minificar os estilos (.css) do build

Compatibilidade

Algumas funcionalidade podem não estar inclusas no projeto. Então verifique a compatibilidade abaixo:

• O compilador da livraria só builda arquivos (.js) e (.css)
• Não é suportado <></>. Utilize '', ou, <React.Fragment>
• Não é suportado Optional chaining objeto?.propriedade?.outra

Requerimento de instalação

Para instalar, rodar e compilar o projeto na sua maquina é necessário ter:

• Versão mais atual do Python (3.12^).
• Node GyP npm install -g node-gyp.
• Visual Studio Build Tools (2022^) apenas para Windows.

Caso você não tenha todos os requisitos irá falhar ao executar npm install. Como obter, como instalar em Linux ou outra plataforma? Instalação Node GyP.

Instalação da livraria

• Execute o comando npm install moderniza-components@latest para instalar a livraria. Em algumas versões mais antigas do Node e NPM é necessário utilizar o parametro --legacy-peer-deps para normalizar a arvore de dependencias
• Importe os estilos da moderniza import 'moderniza-components/dist/index.css'

Tenha instalado no respositório que receberá o moderniza-components

• "reactstrap": "9.0.1" <- (package.json)
• "primeicons": "^6.0.1" <- (package.json)
• "primereact": "^9.5.0" <- (package.json)
• "react-scripts": "4.0.2" <- (package.json)
• "react-dom": "^18.1.0" <- (package.json)
• "react": "^18.1.0" <- (package.json)

Utilização da livraria

Utilize a livraria desta maneira:

/*
 * Caso esteja faltando estilos do reactstrap, importe o css como especificado em:
 * https://reactstrap.github.io/?path=/docs/home-installation--page
 */

// Importação de estilos de outras dependencias relacionadas
import "primereact/resources/primereact.min.css"; // primereact base
import "primeicons/primeicons.css"; // icones primereact
import "primereact/resources/themes/lara-light-indigo/theme.css"; // tema prime react

// Moderniza components abaixo
import "moderniza-components/dist/index.css"; // CSS
import { Dataview, Dumb } from "moderniza-components"; // Componentes

Instalando em modo pre-visualização

Caso esteja tudo correto após finalizar a instalação principal será iniciada a instalação do preview.

npm install
cd preview
npm install

Executando o modo pre-visualização

Abra o terminal para executar

npm start

Buildando a livraria

Abra o terminal para executar

npm run build

Estrutura dos componentes

Estrutura de pasta aceita para livraria

Estrutura básica

• src/[nome-componente]
  • index.js (arquivo principal do componente)
  • [nome-componente].css (arquivo principal de estilos)

Estrutura avançada

• src/[nome-componente]
  • index.js (arquivo principal do componente)
  • [nome-componente].css (arquivo principal de estilos) <- import {view/components/*}
  • src/[nome-componente]/model
    • src/[nome-componente]/model/a.js <- export {a}
    • src/[nome-componente]/model/b.js <- export {b}
  • src/[nome-componente]/view
    • src/[nome-componente]/view/index.js <- export {view}
    • src/[nome-componente]/view/components/a.js <- export {a}
    • src/[nome-componente]/view/components/a.css
  • src/[nome-componente]/controller
    • src/[nome-componente]/controller/a.js <- export {a}
    • src/[nome-componente]/controller/b.js <- export {b}