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 |