feat(Provider): add option for disabling animations

[mnajdova]

Changes introduced in the API with this PR in order to fix #1273:

• The theme object does not contain the rtl and renderer props anymore. These props, together with the new added disableAnimations prop are hoisted at the top level of the Provider's props API:

Prev:

<Provider theme={{siteVariables: {...}, rtl: true}}>
  <Avatar ... />
</Provider>

Now:

<Provider theme={{siteVariables: {...}}} rtl>
  <Avatar ... />
</Provider>

• ComponentStyleFunctionParam interface is extended with the rtl prop, which is not defined in the theme anymore, as well as with the new disableAnimations prop.
• Example of how the disabling of the animations works

import React from 'react'
import { Animation, Icon, Provider, Loader } from '@stardust-ui/react'

// simple spinner animation
const spinner = {
  keyframe: {
    from: {
      transform: 'rotate(0deg)',
    },
    to: {
      transform: 'rotate(360deg)',
    },
  },
  duration: '5s',
  iterationCount: 'infinite',
}

const AnimationExample = () => (<>
  {/* This tree should not have animations */}
  <Provider
    theme={{ animations: { spinner }}}
    disableAnimations
  >
    {/* Animation provided trough the Animation component */}
    <Animation name="spinner">
      <Icon name="umbrella" circular bordered />
    </Animation>
    {/* Animation provided trough the animation prop */}
    <Icon name='book' animation='spinner' />
    {/* Animation provided trough the styles of the component */}
    <Loader />

    {/* This subtree should have animations. */}
    <Provider disableAnimations={false}>
      <Animation name="spinner">
        <Icon name="umbrella" circular bordered />
      </Animation>
      <Icon name='book' animation='spinner' />
      <Loader />
    </Provider>
  </Provider>
</>)

export default AnimationExample

TODO

• add tests

[codecov]

Codecov Report

Merging #1377 into master will decrease coverage by 0.11%.
The diff coverage is 68.75%.

@@            Coverage Diff             @@
##           master    #1377      +/-   ##
==========================================
- Coverage   73.26%   73.14%   -0.12%     
==========================================
  Files         802      805       +3     
  Lines        6021     6073      +52     
  Branches     1755     1775      +20     
==========================================
+ Hits         4411     4442      +31     
- Misses       1604     1625      +21     
  Partials        6        6

Impacted Files	Coverage Δ
packages/react/src/lib/felaRenderer.tsx	75% <ø> (ø)	⬆️
...src/themes/teams/components/Loader/loaderStyles.ts	0% <ø> (ø)	⬆️
packages/react/src/lib/mergeThemes.ts	100% <ø> (ø)	⬆️
packages/react/src/types.ts	50% <ø> (ø)	⬆️
...ges/react/src/components/ItemLayout/ItemLayout.tsx	77.14% <ø> (ø)	⬆️
...eact/src/themes/base/components/Icon/iconStyles.ts	17.39% <0%> (ø)	⬆️
...hemes/teams/components/Popup/popupContentStyles.ts	23.07% <0%> (ø)	⬆️
...emes/teams/components/Animation/animationStyles.ts	0% <0%> (ø)	⬆️
.../src/themes/base/components/Loader/loaderStyles.ts	12.5% <0%> (ø)	⬆️
...act/src/themes/teams/components/Icon/iconStyles.ts	14.7% <0%> (ø)	⬆️
... and 14 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1388367...94d1875. Read the comment docs.

[mnajdova]

As these are applied on div elements, we need the React.CSSProperties as a type

[mnajdova]

This makes the ICSSInJSStyle not being able to accept something typed as React.CSSProperties. Not sure if this will be a problem, but if we don't add this, we will have to introduce new names for the animations defined as stardust animations (as {keyframe: function, params: {...}})

[mnajdova]

Not sure how to check here that the keyframe was actually the first param, as the animationName is replaced with string after the plugin is invoked, so I cannot use the same reference. I tried extracting the keyframe function in a const, but then again jest reports it as a different function.

[layershifter]

It's strange to have children slot, but I don't have better idea

[mnajdova]

I was struggling a bit with this one as well, but this is the most correct..

[layershifter]

Can we add a new dedicated example to docs for the disableAnimations prop?

[mnajdova]

@layershifter yes, will add some examples. Do you agree with adding examples in the Provider's page for the rtl, disableAnimations and renderer props as those are now in it's API?

[layershifter]

@mnajdova Not sure about rtl and renderer, but we definitely should have an example for animations.

[mnajdova]

I added for rtl and disableAnimations. As the renderer is now something we are calculating, will not specify example for it. I don't see why we should not have an example of how rtl is used, as we have it as an option on each example.

@layershifter let me know if you have anything else.