Merge pull request #97 from madou/fix-move-anim-flashing

chore: fix builds, add more docz, type improvements

Author: Madou

.storybook/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = {
         test: /\.tsx$/,
         loader: 'ts-loader',
         include: path.resolve(__dirname, '../packages'),
-        exclude: ['node_modules'],
+        exclude: /node_modules/,
         options: {
           transpileOnly: true,
         },
@@ -24,7 +24,7 @@ module.exports = {
         test: /\.(jpg|gif|png|jpeg|webp)$/,
         loader: 'file-loader',
         include: path.resolve(__dirname, '../packages'),
-        exclude: ['node_modules'],
+        exclude: /node_modules/,
       },
     ],
   },

packages/yubaba/package.json

@@ -24,7 +24,7 @@
   },
   "size-limit": [
     {
-      "limit": "5.82 KB",
+      "limit": "6 KB",
       "path": "dist/esm/packages/yubaba/src/index.js"
     }
   ],

packages/yubaba/src/Collector/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ElementBoundingBox } from '../lib/dom';
 
+export type InlineStyles = React.CSSProperties;
+
 export interface TargetProps {
   style: InlineStyles;
   className?: string;
@@ -64,10 +66,6 @@ export interface AnimationData {
   destination: ElementData;
 }
 
-export interface InlineStyles {
-  [key: string]: string | number | undefined;
-}
-
 export interface ElementData {
   element: HTMLElement;
   elementBoundingBox: ElementBoundingBox;

packages/yubaba/src/__docs__/4-custom-animations/OneFullRotation.tsx

@@ -13,7 +13,7 @@ export default class OneFullRotation extends React.Component<CollectorChildrenPr
         ...prevStyle,
         opacity: 1,
         transformOrigin: 'center',
-        transform: combine((prevStyle.transform as string) || '', '')('rotate(360deg)'),
+        transform: combine(prevStyle.transform, '')('rotate(360deg)'),
       }),
     });
 

packages/yubaba/src/animations/Move/index.tsx

@@ -85,7 +85,7 @@ export default class Move extends React.Component<MoveProps> {
         transformOrigin: '0 0',
         visibility: 'visible',
         willChange: combine('transform')(prevStyles.willChange),
-        transform: combine((prevStyles.transform as string) || '', '')(
+        transform: combine(prevStyles.transform, '')(
           `translate3d(${toStartXOffset}px, ${toStartYOffset}px, 0) scale3d(${math.percentageDifference(
             originTarget.size.width,
             destinationTarget.size.width

packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx

@@ -219,4 +219,8 @@ starting from the [FocalTarget](/focal-target) element.
 Because of this is trashes layout as well as affects other elements on the screen,
 if the element you're revealing doesn't have a fixed width it will look _bad_.
 
-One way of getting around this is by using the `useClipPath` prop - however it is not supported in IE11.
+It will also mean that if the target elements are vertically or horizontally centered -
+they will affect the flow of the page and elements will start moving around.
+Not great!
+
+One way of getting around both of these is by using the `useClipPath` prop - however it is not supported in IE11.

packages/yubaba/src/lib/style.tsx

@@ -1,4 +1,4 @@
-export const combine = (t1: string, delimeter = ',') => (t2?: string | number) => {
+export const combine = (t1: string = '', delimeter = ',') => (t2?: string | number) => {
   if (t2) {
     return `${t1}${delimeter} ${t2}`;
   }