TypeScript conversion of animation package

.storybook/main.cjs

@@ -46,6 +46,7 @@ module.exports = {
     '../packages/wp-story-editor/src/**/stories/*.@(js|mdx)',
     '../packages/activation-notice/src/**/stories/*.@(js|mdx)',
     '../packages/design-system/src/**/stories/*.@(js|mdx)',
+    '../packages/animation/src/**/stories/*.@(js|mdx)',
   ],
   addons: [
     '@storybook/addon-a11y/register',

packages/animation/package.json

@@ -28,28 +28,30 @@
   },
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@googleforcreators/elements": "*",
     "@googleforcreators/i18n": "*",
+    "@googleforcreators/media": "*",
     "@googleforcreators/react": "*",
     "@googleforcreators/units": "*",
     "flagged": "^2.0.6",
     "prop-types": "^15.8.1",
     "styled-components": "^5.3.6",
-    "uuid": "^9.0.0",
-    "web-animations-js": "^2.3.2"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1"
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/styled-components": "^5.1.26",
+    "@types/web-animations-js": "^2.2.12"
   }
 }

packages/animation/src/components/AMPAnimations.js → packages/animation/src/components/AMPAnimations.tsx

@@ -25,14 +25,16 @@ function AMPAnimations() {
     actions: { getAnimationParts },
   } = useStoryAnimationContext();
 
-  return animationTargets.reduce(
-    (animators, target) => [
-      ...animators,
-      ...getAnimationParts(target).map(({ id, AMPAnimation }) => (
-        <AMPAnimation key={id} prefixId={providerId} />
-      )),
-    ],
-    []
+  return (
+    <>
+      {animationTargets
+        .map((target) => [
+          getAnimationParts(target).map(({ id, AMPAnimation }) => (
+            <AMPAnimation key={id} prefixId={providerId} />
+          )),
+        ])
+        .flat(2)}
+    </>
   );
 }
 

packages/animation/src/components/AMPWrapper.js → packages/animation/src/components/AMPWrapper.tsx

@@ -18,11 +18,13 @@
  * External dependencies
  */
 import { useMemo } from '@googleforcreators/react';
-import PropTypes from 'prop-types';
+import type { FunctionComponent, PropsWithChildren } from 'react';
 
 /**
  * Internal dependencies
  */
+import type { AnimationPart } from '../parts';
+import type { WrapperProps } from './types';
 import useStoryAnimationContext from './useStoryAnimationContext';
 
 const fullSizeAbsoluteStyles = {
@@ -32,15 +34,26 @@ const fullSizeAbsoluteStyles = {
   position: 'absolute',
   top: 0,
   left: 0,
-};
+} as const;
 
-function ComposableWrapper({ animationParts, children }) {
+type ComposableWrapperProps = PropsWithChildren<{
+  animationParts: AnimationPart[];
+}>;
+
+type Composed = PropsWithChildren<unknown>;
+
+function ComposableWrapper({
+  animationParts,
+  children,
+}: ComposableWrapperProps) {
+  const root: FunctionComponent = (props: Composed) =>
+    props.children as React.ReactElement;
   const ComposedWrapper = useMemo(
     () =>
-      animationParts.reduce(
-        (Composable, animationPart) => {
+      animationParts.reduce<FunctionComponent>(
+        (Composable: FunctionComponent, animationPart: AnimationPart) => {
           const { AMPTarget } = animationPart;
-          const Composed = function (props) {
+          const Composed = (props: Composed) => {
             return (
               <Composable>
                 <AMPTarget style={fullSizeAbsoluteStyles}>
@@ -49,23 +62,16 @@ function ComposableWrapper({ animationParts, children }) {
               </Composable>
             );
           };
-          Composed.propTypes = { children: PropTypes.node };
           return Composed;
         },
-        (props) => props.children
+        root
       ),
     [animationParts]
   );
 
   return <ComposedWrapper>{children}</ComposedWrapper>;
 }
-
-ComposableWrapper.propTypes = {
-  animationParts: PropTypes.arrayOf(PropTypes.object),
-  children: PropTypes.node.isRequired,
-};
-
-function AMPWrapper({ target, children }) {
+function AMPWrapper({ target, children }: WrapperProps) {
   const {
     actions: { getAnimationParts },
   } = useStoryAnimationContext();
@@ -77,9 +83,4 @@ function AMPWrapper({ target, children }) {
   );
 }
 
-AMPWrapper.propTypes = {
-  target: PropTypes.string,
-  children: PropTypes.node,
-};
-
 export default AMPWrapper;

packages/animation/src/components/WAAPIWrapper.js → packages/animation/src/components/WAAPIWrapper.tsx

@@ -16,37 +16,36 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useCallback, useRef, useEffect } from '@googleforcreators/react';
 
 /**
  * Internal dependencies
  */
 import createKeyframeEffect from '../utils/createKeyframeEffect';
 import FullSizeAbsolute from './fullSizeAbsolute';
-import { WAAPIAnimationProps } from './types';
+import type { WAAPIAnimationWrapperProps, WrapperProps } from './types';
 import useStoryAnimationContext from './useStoryAnimationContext';
 
 function WAAPIAnimationWrapper({
   children,
   hoistAnimation,
   keyframes,
   timings,
-  targetLeafElement,
-}) {
-  const target = useRef(null);
+  targetLeafElement = false,
+}: WAAPIAnimationWrapperProps) {
+  const target = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (!keyframes) {
-      return () => {};
+      return () => undefined;
     }
 
     const targetEl = targetLeafElement
       ? target.current?.querySelector('[data-leaf-element="true"]')
       : target.current;
 
     if (!targetEl) {
-      return () => {};
+      return () => undefined;
     }
     const effect = createKeyframeEffect(targetEl, keyframes, timings);
     return hoistAnimation(new Animation(effect, document.timeline));
@@ -55,21 +54,20 @@ function WAAPIAnimationWrapper({
   return <FullSizeAbsolute ref={target}>{children}</FullSizeAbsolute>;
 }
 
-WAAPIAnimationWrapper.propTypes = WAAPIAnimationProps;
-
-function WAAPIWrapper({ children, target }) {
-  const { hoistWAAPIAnimation, AnimationParts } = useStoryAnimationContext(
+function WAAPIWrapper({ children, target }: WrapperProps) {
+  const { hoistWAAPIAnimation, animationParts } = useStoryAnimationContext(
     ({ actions }) => ({
       hoistWAAPIAnimation: actions.hoistWAAPIAnimation,
-      AnimationParts: actions.getAnimationParts(target),
+      animationParts: actions.getAnimationParts(target),
     })
   );
-  const WAAPIAnimationParts = AnimationParts?.map(
+  const WAAPIAnimationParts = animationParts?.map(
     (anim) => anim.WAAPIAnimation
   );
 
   const hoistAnimation = useCallback(
-    (animation) => hoistWAAPIAnimation({ animation, elementId: target }),
+    (animation: Animation) =>
+      hoistWAAPIAnimation({ animation, elementId: target }),
     [target, hoistWAAPIAnimation]
   );
 
@@ -101,9 +99,4 @@ function WAAPIWrapper({ children, target }) {
   );
 }
 
-WAAPIWrapper.propTypes = {
-  children: PropTypes.node,
-  target: PropTypes.string,
-};
-
 export default WAAPIWrapper;