[TASK] Foundation for interpreting story animations schema

[littlemilkstudio]

Summary

• Adds StoryAnimation.Provider
  • Interprets animations into generators for a given ID, rn used with WAAPI, but compatible with AMP
  • Adds a playWAAPIAnimations() method to control WAAPI animations
  • Adds an onWAAPIFinish prop that will fire everytime all hoisted animations complete (can use to increment page number)
• Adds StoryAnimation.WAAPIWrapper
  • Composes all animations for a target with later animations being children of earlier anims
  • Creates WAAPI animation part based off of type.
• Adds WAAPI animation part generator which given a type and that types args, creates & hoists animation as well as creating relevant markup for animation.
• Creates notion of Animation Parts which ties the keyframe & timings to markup given some args. right now only did this for ANIMATION_TYPES.BOUNCE but should be simple to port over old animation configs to this new pattern.

example use:

<StoryAnimation.Provider animations={[
  ...,
  { target: "some_uuid", type: <animation_type>, ...args }
]}>
...
  <div data-element-id="some_uuid" class="wrapper">
      <StoryAnimation.WAAPIWrapper target="some_uuid">
        <div />
      </StoryAnimation.WAAPIWrapper>
  </div>
...
</StoryAnimation.Provider>

Relevant Technical Choices

Web Animations API - Grouping
Basically had to add some notion of grouping on top of the web animations api. Accomplished this
by just hoisting all Animation objects up into the provider. We can then create any group operations we'd like on the hoisted animations. rn only play & onfinish supported.

Animation Parts
Animation schema is basically looks like:
{ type: 'ANIM_TYPE', ...args } which we transform into ANIM_TYPE(args) => ReactWrapperComponent. This should be a pretty extensible in the future for applying to amp-animations or any other animation package. Possibly maleable enough to add a ANIMATION_TYPE.SEQUENCE or anything else in the future because we just pass relevant args to a function that creates a react component.

To-do

• Port over rest of animation configs to animation parts and add containers
• Create <StoryAnimation.AMPWrapper /> which follows the animation parts pattern
• Create AMP(type, args) animation part generator (should be able to leverage @mariano-formidable amp-animation animator work here)
• Create amp-animation methods in provider (should mostly be passing around animation id names which should be nice)

How to test

Unit
Run unit tests & make sure they pass.

QA
Open up storybook and go to Dashboard > Components > StoryAnimation > default this should show a square that has nested BOUNCE animations applied to it and alternates between red & green color each time all the animations finish

---

[codecov]

Codecov Report

Merging #1789 into master will increase coverage by 0.22%.
The diff coverage is 86.74%.

@@             Coverage Diff              @@
##             master    #1789      +/-   ##
============================================
+ Coverage     64.44%   64.66%   +0.22%     
  Complexity      230      230              
============================================
  Files           576      582       +6     
  Lines          9334     9422      +88     
============================================
+ Hits           6015     6093      +78     
- Misses         3319     3329      +10     

Impacted Files	Coverage Δ	Complexity Δ
...ashboard/animations/animationParts/bounce/index.js	15.38% <15.38%> (ø)	0.00 <0.00> (?)
...s/src/dashboard/animations/animationParts/index.js	100.00% <100.00%> (ø)	0.00 <0.00> (?)
...ashboard/components/storyAnimation/WAAPIWrapper.js	100.00% <100.00%> (ø)	0.00 <0.00> (?)
...s/src/dashboard/components/storyAnimation/index.js	100.00% <100.00%> (ø)	0.00 <0.00> (?)
...rc/dashboard/components/storyAnimation/provider.js	100.00% <100.00%> (ø)	0.00 <0.00> (?)
...ponents/storyAnimation/useStoryAnimationContext.js	100.00% <100.00%> (ø)	0.00 <0.00> (?)
assets/src/dashboard/constants/stories.js	100.00% <0.00%> (ø)	0.00% <0.00%> (ø%)
assets/src/dashboard/app/api/useStoryApi.js	85.71% <0.00%> (ø)	0.00% <0.00%> (ø%)
assets/src/dashboard/app/views/myStories/index.js	0.00% <0.00%> (ø)	0.00% <0.00%> (ø%)
...ts/src/dashboard/utils/useDashboardResultsLabel.js	100.00% <0.00%> (ø)	0.00% <0.00%> (ø%)
... and 9 more

[github-actions]

Size Change: 0 B

Total Size: 869 kB

ℹ️ View Unchanged

Filename	Size	Change
assets/css/edit-story.css	3.04 kB	0 B
assets/css/stories-dashboard.css	3.04 kB	0 B
assets/js/edit-story.js	406 kB	0 B
assets/js/stories-dashboard.js	457 kB	0 B

_{compressed-size-action}

[mariano-formidable]

Fantastic work! Only a few nits/ideas for you to consider. Once you've considered them and applied any changes you deem necessary, I'll be happy to re-review and approve! 🎉

[mariano-formidable]

Awesome work!! 🎉