Feature/v1 Add ProgressBar

[robesonck]

Description

This request solves the Progress Bar Exercise .

To do that, some setup changes were needed:

• Updated some libraries. This was needed to the tests to work correctly. This could happen in it's own independent PR, but since we're here we could merge on the way.
• Created a Button and a ProgressBar components
• Created a useProgressBarState that has a reducer inside. This allows to use complex logic, while keeping the ProgressBar minimal.
• Unit tests
• CSS Animations

Recording

Screen.Recording.2021-12-25.at.18.38.35.mov

This recording shows how when starting the fake API request, the bar starts animating . After that, if we finish the request the bar animates until the end in one second and fades out in 3.

After that first demo, we can see in the recording how if we follow the same process, but don't let the bar finish fading it just starts again from the beginning without a problem

Assumptions

• The button's measures are close to the design, but as I don't have measures it doesn't looks exactly right. This could be easily fixable in the future
• Assuming we want the bar in the top of the solution box, and not in top of the window

[robesonck]

Note for reviewers:

Removing 1 since it's the difference in border-width compared with the normal state. Same happens with the active state.

[robesonck]

Note for reviewers:

Here we are disabling the dependencies because addNormalAnimation and stopMilliseconds change often, making this effect be called many times, so it's easier in the case to just pass one dependency

[robesonck]

Note for reviewers:

Even if useReducer can feel more complex at times, I noticed that in this case we need to update many pieces of state at once and that's easier with a reducer than with useState