Merge pull request #115 from madou/rename-baba-to-animator

chore: renames baba component to animator

Author: Madou

README.md

@@ -41,12 +41,12 @@ yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
 ## Usage
 
 ```js
-import Baba, { Move } from 'yubaba';
+import Animator, { Move } from 'yubaba';
 
 ({ isLarge }) => (
-  <Baba name="my-first-baba" key={isLarge}>
-    <Move>{baba => <div {...baba} className={isLarge ? 'large' : 'small'} />}</Move>
-  </Baba>
+  <Animator name="my-first-baba" key={isLarge}>
+    <Move>{anim => <div {...anim} className={isLarge ? 'large' : 'small'} />}</Move>
+  </Animator>
 );
 ```
 

packages/yubaba-common/src/createMoveExamples/index.tsx

@@ -1,31 +1,31 @@
 ---
-name: Baba
-route: /baba
+name: Animator
+route: /animator
 ---
 
 import { Playground, Props } from 'docz';
-import Baba from '../index';
+import Animator from '../index';
 
-# Baba
+# Animator
 
 This is the brains component.
 When unmounting or flipping the `in` prop from `true` to `false`,
-it will execute all the animations **top to bottom** if a matching Baba pair (either itself or another Baba element) is found within `50ms`.
+it will execute all the animations **top to bottom** if a matching Animator pair (either itself or another Animator element) is found within `50ms`.
 
 > **Tip -** See [Getting started](/getting-started) for more information on how to use this component.
 
 ## Usage
 
 ```js
-import Baba from 'yubaba';
+import Animator from 'yubaba';
 
 const ListItem = ({ index }) => (
-  <Baba name={`item-${index}`}>
+  <Animator name={`item-${index}`}>
     {({ ref, style, className }) => <div ref={ref} style={style} className={className} />}
-  </Baba>
+  </Animator>
 );
 ```
 
 ## Props
 
-<Props of={Baba} />
+<Props of={Animator} />

…ckages/yubaba/src/Baba/__docs__/docs.mdx …es/yubaba/src/Animator/__docs__/docs.mdxpackages/yubaba/src/Baba/__docs__/docs.mdx renamed to packages/yubaba/src/Animator/__docs__/docs.mdx packages/yubaba/src/Baba/__docs__/docs.mdx renamed to packages/yubaba/src/Animator/__docs__/docs.mdx

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Baba /> should pass dom data to child animation 1`] = `
+exports[`<Animator /> should pass dom data to child animation 1`] = `
 Array [
   Object {
     "destination": Object {
@@ -49,7 +49,7 @@ Array [
 ]
 `;
 
-exports[`<Baba /> should pass dom data to child animation when using in prop 1`] = `
+exports[`<Animator /> should pass dom data to child animation when using in prop 1`] = `
 Array [
   Object {
     "destination": Object {
@@ -98,7 +98,7 @@ Array [
 ]
 `;
 
-exports[`<Baba /> should pass target dom data to child animation 1`] = `
+exports[`<Animator /> should pass target dom data to child animation 1`] = `
 Object {
   "location": Object {
     "left": 0,
@@ -116,7 +116,7 @@ Object {
 }
 `;
 
-exports[`<Baba /> should render markup in a portal created by multiple animations 1`] = `
+exports[`<Animator /> should render markup in a portal created by multiple animations 1`] = `
 Array [
   <Portal
     containerInfo={
@@ -147,7 +147,7 @@ Array [
 ]
 `;
 
-exports[`<Baba /> should render markup in a portal created in an animation 1`] = `
+exports[`<Animator /> should render markup in a portal created in an animation 1`] = `
 <Portal
   containerInfo={
     <div>
@@ -163,7 +163,7 @@ exports[`<Baba /> should render markup in a portal created in an animation 1`] =
 </Portal>
 `;
 
-exports[`<Baba /> should update markup created in an animation in after animate phase 1`] = `
+exports[`<Animator /> should update markup created in an animation in after animate phase 1`] = `
 <Portal
   containerInfo={
     <div>
@@ -179,7 +179,7 @@ exports[`<Baba /> should update markup created in an animation in after animate
 </Portal>
 `;
 
-exports[`<Baba /> should update markup created in an animation in animate phase 1`] = `
+exports[`<Animator /> should update markup created in an animation in animate phase 1`] = `
 <Portal
   containerInfo={
     <div>
@@ -195,7 +195,7 @@ exports[`<Baba /> should update markup created in an animation in animate phase
 </Portal>
 `;
 
-exports[`<Baba /> should update markup in a portal created by multiple animations in animate phase 1`] = `
+exports[`<Animator /> should update markup in a portal created by multiple animations in animate phase 1`] = `
 Array [
   <Portal
     containerInfo={

…aba/src/Baba/__snapshots__/test.tsx.snap …src/Animator/__snapshots__/test.tsx.snappackages/yubaba/src/Baba/__snapshots__/test.tsx.snap renamed to packages/yubaba/src/Animator/__snapshots__/test.tsx.snap packages/yubaba/src/Baba/__snapshots__/test.tsx.snap renamed to packages/yubaba/src/Animator/__snapshots__/test.tsx.snap

@@ -17,7 +17,7 @@ import { getElementBoundingBox } from '../lib/dom';
 import defer from '../lib/defer';
 import noop from '../lib/noop';
 import { precondition, warn } from '../lib/log';
-import * as babaStore from '../lib/babaStore';
+import * as store from '../lib/animatorStore';
 import { InjectedProps, withVisibilityManagerContext } from '../VisibilityManager';
 
 export type AnimationFunc = () => Promise<void>;
@@ -41,23 +41,23 @@ export interface State {
   animationsMarkup: React.ReactPortal[];
 }
 
-export interface BabaProps extends CollectorChildrenProps, InjectedProps {
+export interface AnimatorProps extends CollectorChildrenProps, InjectedProps {
   /**
-   * Name of the yubaba animation, this should match the target yubaba.
+   * Name of the animator, this should match the target animator.
    */
   name: string;
 
   /**
-   * Used alternatively to the implicit animation triggering via unmounting or mounting of Baba components.
+   * Used alternatively to the implicit animation triggering via unmounting or mounting of Animator components.
    * Only use `in` if your component is expected to persist through the entire lifecyle of the app.
    * When you transition to the "next page" make sure to set your "in" to false. When you transition
-   * back to the original page set the "in" prop back to true. This lets the Baba components know when to
+   * back to the original page set the "in" prop back to true. This lets the Animator components know when to
    * execute the animations.
    */
   in?: boolean;
 
   /**
-   * Callback called when all animations have finished and been cleaned up. Fired from the triggering Baba
+   * Callback called when all animations have finished and been cleaned up. Fired from the triggering Animator
    * component.
    */
   onFinish: () => void;
@@ -66,7 +66,7 @@ export interface BabaProps extends CollectorChildrenProps, InjectedProps {
    * Time this component will wait until it throws away the animation.
    * Defaults to 50ms, might want to bump it up if loading something that was code split.
    */
-  timeToWaitForNextBaba: number;
+  timeToWaitForNextAnimator: number;
 
   /**
    * HTMLElement container used when creating elements for animations,
@@ -75,12 +75,12 @@ export interface BabaProps extends CollectorChildrenProps, InjectedProps {
   container: HTMLElement | (() => HTMLElement);
 }
 
-export default class Baba extends React.PureComponent<BabaProps, State> {
-  static displayName = 'Baba';
+export default class Animator extends React.PureComponent<AnimatorProps, State> {
+  static displayName = 'Animator';
 
   static defaultProps = {
     onFinish: noop,
-    timeToWaitForNextBaba: 50,
+    timeToWaitForNextAnimator: 50,
     container: document.body,
   };
 
@@ -106,30 +106,30 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
   componentDidMount() {
     const { in: componentIn, name } = this.props;
 
-    if (componentIn === undefined && babaStore.has(name)) {
+    if (componentIn === undefined && store.has(name)) {
       // A child has already been stored, so this is probably the matching pair.
       this.executeAnimations();
       return;
     }
 
     if (componentIn === undefined || componentIn) {
       // Ok nothing is there yet, show ourself and store DOM data for later.
-      // We'll be waiting for another Baba to mount.
+      // We'll be waiting for another Animator to mount.
       this.showSelfAndNotifyManager();
     }
   }
 
-  componentWillUpdate(prevProps: BabaProps) {
+  componentWillUpdate(prevProps: AnimatorProps) {
     const { in: isIn } = this.props;
     if (prevProps.in === false && isIn === true) {
       // We're being removed from "in". Let's recalculate our DOM position.
       this.storeDOMData();
-      this.delayedClearBabaStore();
+      this.delayedClearStore();
       this.abortAnimations();
     }
   }
 
-  componentDidUpdate(prevProps: BabaProps) {
+  componentDidUpdate(prevProps: AnimatorProps) {
     const { in: isIn, name } = this.props;
 
     if (isIn === prevProps.in) {
@@ -147,7 +147,7 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
     }
 
     if (isIn) {
-      if (babaStore.has(name)) {
+      if (store.has(name)) {
         this.executeAnimations();
         return;
       }
@@ -158,7 +158,7 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
 
   componentWillUnmount() {
     this.storeDOMData();
-    this.delayedClearBabaStore();
+    this.delayedClearStore();
     this.abortAnimations();
     this.unmounting = true;
   }
@@ -173,28 +173,28 @@ export default class Baba extends React.PureComponent<BabaProps, State> {
     }
   }
 
-  delayedClearBabaStore() {
-    const { name, timeToWaitForNextBaba } = this.props;
+  delayedClearStore() {
+    const { name, timeToWaitForNextAnimator } = this.props;
 
-    setTimeout(() => babaStore.remove(name), timeToWaitForNextBaba);
+    setTimeout(() => store.remove(name), timeToWaitForNextAnimator);
   }
 
   storeDOMData() {
     if (this.unmounting) {
       return;
     }
 
-    // If there is only a Baba target and no child animations
+    // If there is only a Animator target and no child animations
     // data will be undefined, which means there are no animations to store.
     if (this.data) {
       if (process.env.NODE_ENV === 'development') {
         precondition(
           this.element,
           `The ref was not set when trying to store data, check that a child element has a ref passed. This needs to be set so we can take a snapshot of the origin DOM element.
 
-<${Baba.displayName} name="${this.props.name}">
+<${Animator.displayName} name="${this.props.name}">
   {props => <div ref={props.ref} />}
-</${Baba.displayName}>
+</${Animator.displayName}>
 `
         );
       }
@@ -214,7 +214,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
       // NOTE: Currently in react 16.3 if the parent being unmounted is a Fragment
       // there is a chance for sibling elements to be removed from the DOM first
       // resulting in inaccurate calculations of location. Watch out!
-      const data: babaStore.BabaData = {
+      const data: store.AnimatorData = {
         elementData: {
           element: this.element as HTMLElement,
           elementBoundingBox,
@@ -225,14 +225,14 @@ If it's an image, try and have the image loaded before mounting, or set a static
         collectorData: this.data,
       };
 
-      babaStore.set(name, data);
+      store.set(name, data);
     }
   }
 
   executeAnimations = () => {
     const { name, container: getContainer, context } = this.props;
     const container = typeof getContainer === 'function' ? getContainer() : getContainer;
-    const fromTarget = babaStore.get(name);
+    const fromTarget = store.get(name);
 
     if (fromTarget) {
       const { collectorData, elementData } = fromTarget;
@@ -474,4 +474,4 @@ If it's an image, try and have the image loaded before mounting, or set a static
   }
 }
 
-export const WrappedBaba = withVisibilityManagerContext(Baba);
+export const WrappedAnimator = withVisibilityManagerContext(Animator);

packages/yubaba/src/Baba/index.tsx packages/yubaba/src/Animator/index.tsxpackages/yubaba/src/Baba/index.tsx renamed to packages/yubaba/src/Animator/index.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import Baba from './index';
+import Animator from './index';
 import Noop from '../animations/Noop';
 
-interface BabaProfilerProps {
+interface AnimatorProfilerProps {
   iterations: number;
 }
 
-interface BabaProfilerState {
+interface AnimatorProfilerState {
   start: boolean;
   profiling: boolean;
   finished: boolean;
 }
 
-class BabaProfiler extends React.Component<BabaProfilerProps, BabaProfilerState> {
-  state: BabaProfilerState = BabaProfiler.getDefaultState();
+class AnimatorProfiler extends React.Component<AnimatorProfilerProps, AnimatorProfilerState> {
+  state: AnimatorProfilerState = AnimatorProfiler.getDefaultState();
 
   curStart: number = -1;
 
@@ -72,7 +72,7 @@ class BabaProfiler extends React.Component<BabaProfilerProps, BabaProfilerState>
     this.curEnd = -1;
     this.results = [];
     this.iteration = 1;
-    this.setState(BabaProfiler.getDefaultState(), this.start);
+    this.setState(AnimatorProfiler.getDefaultState(), this.start);
   };
 
   static getDefaultState() {
@@ -110,33 +110,33 @@ class BabaProfiler extends React.Component<BabaProfilerProps, BabaProfilerState>
     return (
       <div>
         {!this.state.start ? (
-          <Baba name="profiler">
+          <Animator name="profiler">
             <Noop>
-              {baba => (
-                <div {...baba}>
+              {anim => (
+                <div {...anim}>
                   <span>{this.iteration}</span>
                 </div>
               )}
             </Noop>
-          </Baba>
+          </Animator>
         ) : (
           <div>
-            <Baba name="profiler" onFinish={this.onNextIteration}>
-              {baba => (
-                <div {...baba}>
+            <Animator name="profiler" onFinish={this.onNextIteration}>
+              {anim => (
+                <div {...anim}>
                   <span>{this.iteration}</span>
                 </div>
               )}
-            </Baba>
+            </Animator>
           </div>
         )}
       </div>
     );
   }
 }
 
-storiesOf('yubaba/Baba', module)
-  .add('profiler (1)', () => <BabaProfiler iterations={1} />)
-  .add('profiler (10)', () => <BabaProfiler iterations={10} />)
-  .add('profiler (100)', () => <BabaProfiler iterations={100} />)
-  .add('profiler (1000)', () => <BabaProfiler iterations={1000} />);
+storiesOf('yubaba/Animator', module)
+  .add('profiler (1)', () => <AnimatorProfiler iterations={1} />)
+  .add('profiler (10)', () => <AnimatorProfiler iterations={10} />)
+  .add('profiler (100)', () => <AnimatorProfiler iterations={100} />)
+  .add('profiler (1000)', () => <AnimatorProfiler iterations={1000} />);