Create useFlip hook

[leroykorterink]

We can use gsap Flip to animate an element between states.

useFlip(ref, {
  duration: 0.6,
  delay: 0.3,
});

import { useIsomorphicLayoutEffect, unref, Unreffable } from '@mediamonks/react-hooks';
import gsap from 'gsap';
import Flip from 'gsap/Flip';
import { useMemo, useRef, type MutableRefObject } from 'react';

gsap.registerPlugin(Flip);

export function useFlip(
  ref: Unreffable<HTMLElement | null>,
  flipStateVariables: Flip.FromToVars = {},
): MutableRefObject<Flip.FlipState | undefined> {
  const flipStateRef = useRef<Flip.FlipState>();

  const memoizedFlipStateVariables = useMemo(
    () => flipStateVariables,
    // eslint-disable-next-line react-hooks/exhaustive-deps
    Object.values(flipStateVariables),
  );

  if (typeof window !== 'undefined') {
    flipStateRef.current = Flip.getState(unref(ref));
  }

  useIsomorphicLayoutEffect(() => {
    if (flipStateRef.current === undefined) {
      return;
    }

    Flip.from(flipStateRef.current, {
      ...memoizedFlipStateVariables,
    });
  });

  return flipStateRef;
}