feat: [BREAKING CHANGE] - support react 16.8.0+

[donovanclarke]

React has changed a lot since this module has had any improvements done. This module was re-worked prior to when react 16.8.0 was released. And components were mainly class based.

Now that we are at react 19, it is time to think about how we move this forward. I think a good first step for v2. Is that we will still include the class based version, however we will allow users to transfer over to a functional component if they are running react 16.8.0+.

There has also been many changes around babel, and testing strategies. Updating this now will help make migrating much easier. Also to note, enzyme is no longer the preferred approach. And thus, we have removed it in favor of using jest.

We have also took time to update the storybook configuration. We no longer rely on an outdated storybook, and have moved to storybook v8.

I would like to move this package towards using typescript, and including a hook to support animations as well. Though I think a good interim step would be to release v2 (2.0.0). This would allow users to still use this in legacy applications if needed. Though support will be for react 16.8.0 only.

• Move to React 19
• Update storybook to use v8
• Update babel to latest
• Add eslint back (conflicting with storybook and react 19).
• Re-write tests using react testing library

Stretch:

• Look into chromatic

[donovanclarke]

Some more changes have been made.

The legacy version used this.anim = .... This is an outdated approach. Even though it's a class component. This makes testing the component extremely hard as this is generally updated in the components lifecycle method. There was no reliable way to check this, and to make sure it was functioning properly.

I updated the approach to create a ref within the constructor of the component.

I have also added the ability to use a forwardRef version. Hopefully this opens up functionality for other use-cases.

Currently working on creating tests for the functional version. And stripping out unused dev dependencies.

[donovanclarke]

Version 2.0.0 Plan

• Include class component
• Include class component with forwardRef
• Include functional component (work with React 16.8.0+)
• No longer rely on mocha, chai, enzyme or sinon. Prefer react-testing-library and jest.

Version 2.1.0 Plan

• Deprecate class component.
• Support React 16.8.0+ only
• Create react hook based version

Version 2.2.0 Plan

• Convert to typescript and typescript support.

[donovanclarke]

I have noticed a bug with the class component around when an animation is meant to loop and transition. It will currently continue loop through the initial animation, then show the animation that should not be looped. However, it will then transition back to the original animation and loop indefinitely.

The functional component works as expected. Though the class and functional version should be 1:1.

The expected behavior is that when we want to transition and loop. It should be controlled by the user.

Criteria:
Animate and loop animation one.
Transition to non-looped animation two.

Stay on non-looped animation until the user decides to change the animation.