@zydon/common-csr

Commons CSR (@zydon/common-csr)

Biblioteca de componentes e hooks compartilhados para projetos React com Client-Side Rendering (CSR) do ecossistema Zydon. Complementa o pacote @zydon/common com recursos especificos para renderizacao no lado do cliente.

Proposito

Fornecer componentes de UI reutilizaveis (navegacao, editores rich text, editores SQL) e hooks utilitarios que sao exclusivos para aplicacoes CSR, evitando duplicacao de codigo entre os microfrontends da Zydon.

Funcionalidades Principais

• Componente Image: Imagem otimizada construida sobre react-lazy-load-image-component com lazy loading
• Navegacao: Componentes de menu em tres variantes (NavSectionHorizontal, NavSectionMini, NavSectionVertical)
• Editor rich text: Editor de texto rico construido sobre react-quill com versoes standalone e integrada a formularios
• Editor SQL: Editor de queries SQL com highlight, disponivel como campo de formulario react-hook-form
• Hook useActiveLink: Verifica se uma rota especifica esta ativa no React Router

Arquitetura e Stack

Categoria	Tecnologia
Framework	React
Linguagem	TypeScript
UI	MUI (Material UI)
Roteamento	React Router DOM
Imagens	react-lazy-load-image-component
Editor rich text	react-quill
Formularios	react-hook-form

Componentes Exportados

Componentes de UI

Componente	Descricao
Image	Componente de imagem com lazy loading. Priorize este componente ao renderizar imagens
Editor	Editor rich text construido sobre react-quill
EditorField	Editor rich text como campo de formulario react-hook-form
SQLEditor	Editor SQL construido sobre react-quill
SQLEditorField	Editor SQL como campo de formulario react-hook-form

Componentes de Navegacao

Componente	Descricao
NavSectionHorizontal	Itens de navegacao dispostos horizontalmente
NavSectionMini	Itens de navegacao em versao compacta/mini
NavSectionVertical	Itens de navegacao dispostos verticalmente

Hooks

Hook	Descricao
useActiveLink	Retorna se a rota passada como parametro esta ativa ou nao

Como Utilizar

Instalacao

yarn add @zydon/common-csr
yarn add @emotion/react @emotion/styled @mui/material react-router-dom
yarn add @types/react-lazy-load-image-component -D

Desenvolvimento

Pre-requisitos

• Node.js
• Yarn

Testando localmente

1. Clone o repositorio
2. Crie uma branch para suas alteracoes
3. Realize as implementacoes/correcoes
4. Compile e crie o link local:

   yarn build
   npm link

5. Em outro projeto, conecte o pacote local:

   npm link @zydon/common-csr

6. Utilize o componente App.tsx para testar implementacoes de forma pratica

Publicacao

Apos merge na branch main, as alteracoes sao publicadas automaticamente no npm.

Comandos

Comando	Descricao
yarn build	Compila o pacote
npm link	Cria link simbolico para testes locais