Extract transition component handling to useTransitionComponent hook

[acelaya]

This PR extracts all the logic to manage TransitionComponents from Dialog to a reusable hook, opening the door to use it in other places with components that can expose a similar props API, while they internally use this hook.

As a good side effect, we can extract all the complexity to internally sync state to properly manage transitions, from the Dialog component, making it simpler.

Note
This PR is easier to review ignoring whitespaces.

[acelaya]

My initial idea to hide the logic of conditionally wrapping the consuming component in a TransitionComponent or a Fragment was to expose an actual component:

const Wrapper = !transitionComponent ? Fragment : ({ children }) => {
  const TransitionComp = transitionComponent;
  return <TransitionComp ... />;
};

And then use it like this in the consuming component:

const { Wrapper, ... } = useTransitionComponent(...);

return (
  <Wrapper>
    <div>...</div>
  </Wrapper>
);

However, that introduces a component which is defined within a component, and the effects didn't work as expected.

That's why I ended up creating a callback that does the wrapping.

[codecov]

Codecov Report

Merging #1131 (41d7443) into closable-dialog-transition (c29884d) will not change coverage.
The diff coverage is 100.00%.

@@                     Coverage Diff                      @@
##           closable-dialog-transition     #1131   +/-   ##
============================================================
  Coverage                      100.00%   100.00%           
============================================================
  Files                              57        58    +1     
  Lines                             822       830    +8     
  Branches                          320       320           
============================================================
+ Hits                              822       830    +8     

Files Changed	Coverage Δ
src/components/feedback/Dialog.tsx	100.00% <100.00%> (ø)
src/hooks/use-transition-component.tsx	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[acelaya]

Closing as per #1117 (comment)