Refactor: Component Modal

[Ar3secchim]

📃 Description:

Este pull request tem como objetivo realizar uma refatoração completa do componente de modal do projeto, adicionando o Modal de Alert,utilizando a biblioteca Radix UI para melhorar a usabilidade, acessibilidade e a manutenção do código.

✅ Checklist:

• Meu código segue as diretrizes de estilo deste projeto
• Realizei uma auto revisão do meu código
• Minhas alterações não geram novos alertas
• Adicionei testes para minhas alterações

🔄 Main changes:

1. Simplificação do código: O código atual do modal pode estar complexo e difícil de manter e de reutilizar em diferentes situações. Nesta refatoração, procurei simplificar a estrutura do modal, removendo lógicas desnecessárias e dividindo-o em componentes menores, facilitando a leitura e o entendimento do código.
2. Separação de preocupações: O modal atual pode misturar responsabilidades, como lógicas de estilos e de manipulação do estado. Com a refatoração, busquei separar as preocupações, estados tornando o modal mais reutilizável em diferentes partes do projeto.
3. Acrescentei o modal de Alert para substituir a lib sweetalert. Acabei decidindo por fazer um componente usando pattern de composição para não ficar com código muito confuso e cheio de condicionais, além de ter muitas props para cada componente de modal.
4. Estilos: Além de adotar os estilos global para o ModalRoot, seguindo as diretrizes de design da aplicação. Isso garante que o modal se integre harmoniosamente ao restante da interface e que as mudanças pontuais de estilo de cada componente fica de responsabilidade do tal.
5. Refatoração dos componentes de que estava utilizando o componente Modal anteriores para utilizar esse novo ModalRoot.
6. Coloquei esse componente ModalAlert na lógica do contextApi de modal.

💡 Peço atenção de quem for fazer review principalmente na tipagem, pois ainda não domino Typescript.

Additional notes:

Separei o componente Modal em pequenos componentes. No qual são partes que podem ser customizadas por si só, sendo assim reutilizadas em outros componentes.

Esse é o componente Modal que tem como responsabilidade apenas de juntas todas as outras partes (componentes menores).

//src/components/Modal/Modal.tsx
// partes do componentes
export const Modal = {
  Root: ModalRoot,
  Content: ModalContent,
  ContentAlert: ModalContentAlert,
  Title: ModalTitle,
  Description: ModalDescription,
};

Componente ModalAlert que vai substituir a lib sweetalert. Criado a partir do ModalRoot.

//src/components/Modal/ModalAlert/ModalAlert.tsx
const ModalAlert = () => {
  const { openModal, closeModal, ALERT_MODAL } = useModal();
  return (
    <Modal.Root
      open={ALERT_MODAL}
      onOpenChange={() => closeModal(ModalActionTypes.ALERT_MODAL)}
    >
      <Modal.ContentAlert>
        <Modal.Title text="Tem certeza que deseja mudar a foto do perfil?" />
        <Modal.Description text=" " />
      </Modal.ContentAlert>
    </Modal.Root>
  );
};

export default ModalAlert;

Componente ModalAlert renderizado:

💡 Assim que essa PR for concluida faço as substituição da sweetalert pelo ModalAlert #240

[oliveirabalsa]

Oi @Ar3secchim, tem alguns conflitos de merge

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
9 Code Smells

No Coverage information
0.0% Duplication