feat: card atom

[guilhermevrs]

Objective

The idea here is to have a base card component and to extend it for the real cards.
This would enable for example to extend the card-ui to have:

• Normal playing cards
• Tarot playing cards
• etc

This PR includes then:

• Update of testing dependencies
• Fixed issue with react-scripts and Jest. Check waitFor error "MutationObserver is not a constructor" with latest version testing-library/dom-testing-library#477
• Utils for components

Missing actions

• Need the linting / formating
• Need the CI
• Squash once finish

Closes #16

[guilhermevrs]

[tib-tib]

In my mind I was picturing the Card component to be much simpler, something like:

return (
  <img src={isFront ? frontFace : backFace } />
)

, with frontFace and backFace being two svg urls. And that was it haha!

I don't think having a generateSvg method makes sense, because depending on the kind of cards we would have (Tarot, UNO, whatever) we might not have the same way of retrieving/generating them.
At some point we might even get a deck of cards from the backend and it would be a list of something like Card: { value: 'ace', color: 'spades', url: 'url-of-my-svg-card' }.

Anyway, I think what you did is perfectly fine, just wanted to express my thoughts :)

[guilhermevrs]

Well, what I was thinking for the PlayingCard is to be an extension of BaseCard.
So BaseCard could be any card, since the only thing you can do is to place it somewhere and turn it via click.

I called PlayingCard because I was referring to a "normal playing card". I would imagine a UnoCard or TarotCard if it's the thing. Specially because the type of entry would be different (I mean, you wouldn't instantiate the UnoCard with JokerBlack).

Now about using the img tag. You can only do it if you have an SVG separated for each card. In this one, it's a SVG Sprite (so a single download can get you all the cards already). Since it's an SVG sprite, you can't simply use the <img src= I guess.
Moreover, using img src blocks you of using SVG inline attributes (like fill for example).

At server level, indeed, you could receive the data (like the SVG url). But then would that be a single SVG or an SVG sprite?
If it's a single, we could have a mode for loading the card from single SVG (in that case, two svgs, one for the front and one for the back).

Again, let's discuss during our call

[guilhermevrs]

Closes #3