Zydon common resources for React projects (only Client-Side Rendering (CSR))

Instalação no seu projeto

• instalação pacote: yarn add @zydon/common-csr
• instalação dependências necessárias: yarn add @emotion/react @emotion/styled @mui/material react-router-dom
• instalação @types necessários: yarn add @types/react-lazy-load-image-component -D

Recursos disponíveis

Esse pacote tem os seguintes recursos disponiveis (components, hooks e utils):

Componentes

• Image: componente de imagem construido em cima do react-lazy-load-image-component (Priorize quando for utilizar/rendererizar uma imagem)

Componentes de navegação

• NavSectionHorizontal: itens para navegação na horizontal
• NavSectionMini: itens para navegação, versão mini
• NavSectionVertical: itens para navegação na vertical
• Editor: editor rich text construido em cima do react-quill
• EditorField: editor rich text construido em cima do react-quill
• SQLEditor: editor sql construido em cima do react-quill
• SQLEditorEditorField: editor sql construido em cima do react-quill e que funciona como campo de formulário react-hook-form

Hooks

• useActiveLink: hook que mostra se a rota passada está ativa ou não

Como fazer implementações/correções nesse pacote?

Para realizar implementações ou correções neste pacote, siga os passos abaixo:

• Clone o repositório: Faça um clone do repositório do projeto na sua máquina local.
• Crie uma branch: Crie uma nova branch para suas alterações. Isso mantém o trabalho organizado e facilita a revisão do código.
• Realize as implementações/correções: Faça as modificações necessárias no código. Certifique-se de seguir as práticas de codificação estabelecidas no projeto.
• Teste localmente: Para testar suas alterações, execute os seguintes comandos no diretório do projeto: yarn build para construir o pacote. npm link para criar um link simbólico do pacote na sua máquina.
• Teste em um projeto separado: Em outro projeto local, use o comando npm link @zydon/common-csr para conectar o pacote localmente e verificar se as alterações funcionam conforme o esperado.

Dica: Você pode utilizar o componente App.tsx para testar suas implementações/correções de forma prática.

• Suba suas alterações: Após testar e validar as mudanças, faça o push da sua branch para o repositório remoto.
• Solicite um merge: Abra um pull request para a branch main. Após a revisão e aprovação, as mudanças serão mescladas.
• Publicação automática: As alterações aprovadas serão publicadas automaticamente no npm após alguns minutos.