feat(common-ui): Add Modal Confirm and Provider

[victorgcramos]

This Diff adds ModalProvider and ModalConfirm components
on common-ui package.

Preview

Usage

You can open and close modals using the useModal hook:

import { ModalConfirm, ModalProvider, useModal } from "../components";

function ModalButton() {
  const [open] = useModal();
  return (
    <Button
      onClick={() => open(ModalConfirm)}
    >
      Open Modal
    </Button>
  );
}

function App() {
  return (
    <ModalProvider>
      <ModalButton />
    </ModalProvider>
  );
}

[tiagoalvesdulce]

The way you are using the ModalConfirm component makes the React.memo irrelevant. In fact, it's making performance a little bit worse due to the shallow comparisons between new and old props every time. See:

open(ModalConfirm, {
          onSubmit: () => {
            console.log("confirmed");
          },
        })

onSubmit will never be the same function. It will always create a new function in this case. This happens always that you create a function inline or inside the component (and the component is unmounted and mounted again).

I'd say you can remove React.memo HOC here.

Everything else looks good.

[tiagoalvesdulce]

LGTM