Merge pull request #101 from madou/container-grow

feat: Reshaping Container, SimpleReveal, Nested Baba's

Author: Madou

README.md

@@ -1,24 +1,40 @@
 # yubaba
 
-is an element animation orchestrator for React.js ✨
+easy to use animations with powerful orchestration for React.js 🧙✨
 
-[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba)
-[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
+[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
 
 [![Example animation using yubaba](https://user-images.githubusercontent.com/6801309/55383683-87894b80-5574-11e9-80ef-7394eb6eca63.gif)](https://yubabajs.com/advanced-usage)
 
-## Why yubaba
+## What is yubaba???
 
-`yubaba` is as much of a _platform_ as it is an **orchestrator**.
-It comes with prebuilt animations you can drop in and start using immediately,
-such as [ConcealMove](https://yubabajs.com/conceal-move) and [RevealMove](https://yubabajs.com/reveal-move) which together can [create an awesome user experience](https://yubabajs.com/advanced-usage) seen above!
+It's all about **animation** 🧙✨ - it can help with:
 
-But even better you can create [_custom_ animations](https://yubabajs.com/custom-animations)!
-Using the same internals the [prebuilt animations use](https://yubabajs.com/getting-started),
-it comes with a first class customization experience for you to do,
-well,
-anything!
+- [Moving an element](https://yubabajs.com/move) from one position to another
+- [Revealing elements](https://yubabajs.com/focal-reveal-move) like you see above
+- [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view; and
+- [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
+- [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
+- Composing animations together to create composite animations, for example [CrossFadeMove](https://yubabajs.com/cross-fade-move)
+- [Anything you can imagine](https://yubabajs.com/custom-animations), seriously 🤩
 
-## [Docs](https://yubabajs.com)
+## Installation
 
-See the documentation at [yubabajs.com](https://yubabajs.com).
+`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
+
+```bash
+npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x --save
+```
+
+or
+
+```bash
+yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x
+```
+
+## Next steps
+
+- **First time** here? After installing head over to [Getting started](https://yubabajs.com/getting-started) to start learning the basics
+- Interested in **animating an element**? Check out [Focal animations](https://yubabajs.com/focal-animations)
+- For **ready made experiences** check out [Composite components](https://yubabajs.com/composite-components), just grab them and go!
+- Having **trouble**? Maybe [Troubleshooting](https://yubabajs.com/troubleshooting) has your answers

doczrc.js

@@ -1,7 +1,7 @@
 const pkg = require('./packages/yubaba/package.json');
 
 module.exports = {
-  title: 'yubaba docs',
+  title: 'yubaba 🧙✨',
   description: `yubaba ${pkg.description}`,
   typescript: true,
   dest: '/docs',

packages/yubaba/package.json

@@ -7,7 +7,7 @@
   "main": "dist/cjs/packages/yubaba/src/index.js",
   "module": "dist/esm/packages/yubaba/src/index.js",
   "sideEffects": false,
-  "description": "is an element animation orchestrator for React.js ✨",
+  "description": "easy to use animations with powerful orchestration for React.js 🧙",
   "keywords": [
     "react",
     "flip",
@@ -24,7 +24,7 @@
   },
   "size-limit": [
     {
-      "limit": "6 KB",
+      "limit": "7 KB",
       "path": "dist/esm/packages/yubaba/src/index.js"
     }
   ],

packages/yubaba/src/Baba/index.tsx

@@ -21,27 +21,22 @@ import noop from '../lib/noop';
 import * as babaStore from '../lib/babaStore';
 import { InjectedProps, withBabaManagerContext } from '../BabaManager';
 
-
 export type AnimationFunc = () => Promise<void>;
 
-
 export interface MappedAnimation {
   animate: AnimationFunc;
   beforeAnimate: AnimationFunc;
   afterAnimate: AnimationFunc;
   cleanup: () => void;
 }
 
-
 export type AnimationBlock = MappedAnimation[];
 
-
 export interface ChildProps {
   style?: InlineStyles;
   className?: string;
 }
 
-
 export interface State {
   shown: boolean;
   childProps: ChildProps;
@@ -481,6 +476,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
 
     return (
       <Collector
+        topMostCollector
         receiveData={this.setData}
         receiveRenderChildren={this.setReactNode}
         receiveRef={this.setRef}
@@ -497,5 +493,4 @@ If it's an image, try and have the image loaded before mounting, or set a static
   }
 }
 
-
 export const WrappedBaba = withBabaManagerContext(Baba);

packages/yubaba/src/Collector/__docs__/docs.mdx

@@ -1,6 +1,7 @@
 ---
 name: Collector
 route: /collector
+menu: Utility helpers
 ---
 
 import { Playground, PropsTable } from 'docz';

packages/yubaba/src/Collector/index.tsx

@@ -86,6 +86,7 @@ export interface CollectorProps extends CollectorChildrenProps {
   data?: CollectorData;
   style?: InlineStyles;
   className?: string;
+  topMostCollector?: boolean;
 }
 
 export interface Collect {
@@ -113,6 +114,7 @@ export default class Collector extends React.Component<CollectorProps> {
       receiveRenderChildren,
       receiveRef,
       receiveData,
+      topMostCollector,
     } = this.props;
 
     if (typeof children !== 'function') {
@@ -126,7 +128,7 @@ export default class Collector extends React.Component<CollectorProps> {
                     receiveRef(ref);
                   }
 
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.ref(ref);
                   }
                 },
@@ -136,13 +138,13 @@ export default class Collector extends React.Component<CollectorProps> {
                     receiveFocalTargetRef(ref);
                   }
 
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.focalTargetRef(ref);
                   }
                 },
                 data: childData => {
                   const collectedData = data ? [data].concat(childData) : childData;
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.data(collectedData);
                   }
 
@@ -151,7 +153,7 @@ export default class Collector extends React.Component<CollectorProps> {
                   }
                 },
                 renderChildren: node => {
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.renderChildren(node);
                   }
 
@@ -161,9 +163,10 @@ export default class Collector extends React.Component<CollectorProps> {
                 },
                 style: {
                   ...style,
-                  ...(collect ? collect.style : {}),
+                  ...(collect && !topMostCollector ? collect.style : {}),
                 },
-                className: className || (collect ? collect.className : undefined),
+                className:
+                  className || (collect && !topMostCollector ? collect.className : undefined),
               }}
             >
               {children}
@@ -177,7 +180,7 @@ export default class Collector extends React.Component<CollectorProps> {
       <CollectorContext.Consumer>
         {collect => {
           if (typeof children === 'function') {
-            if (collect) {
+            if (!topMostCollector && collect) {
               const collectedData = data ? [data] : [];
               collect.renderChildren(children);
               collect.data(collectedData);
@@ -189,17 +192,18 @@ export default class Collector extends React.Component<CollectorProps> {
 
             return React.Children.only(
               children({
-                className: className || (collect ? collect.className : undefined),
+                className:
+                  className || (collect && !topMostCollector ? collect.className : undefined),
                 ref: (ref: HTMLElement) => {
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.ref(ref);
                   }
 
                   if (receiveRef) {
                     receiveRef(ref);
                   }
                 },
-                style: collect ? { ...style, ...collect.style } : style || {},
+                style: collect && !topMostCollector ? { ...style, ...collect.style } : style || {},
               })
             );
           }

packages/yubaba/src/FocalTarget/__docs__/docs.mdx

@@ -1,6 +1,7 @@
 ---
 name: FocalTarget
 route: /focal-target
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';

packages/yubaba/src/Wait/__docs__/docs.mdx

@@ -1,6 +1,7 @@
 ---
 name: Wait
 route: /wait
+menu: Utility helpers
 ---
 
 import { Playground, PropsTable } from 'docz';

packages/yubaba/src/__docs__/1-introduction/docs.mdx

@@ -1,5 +1,5 @@
 ---
-name: 1. Introduction
+name: 1. Introduction 📖
 route: /
 order: 5
 ---
@@ -8,36 +8,41 @@ import EmailChain from '../3-advanced-usage/EmailChain';
 
 # yubaba
 
-is an element animation orchestrator for React.js ✨
+easy to use animations with powerful orchestration for React.js 🧙✨
 
 [![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
 
 <EmailChain />
 
-## Why yubaba?
+## What is yubaba???
 
-`yubaba` is as much of a _platform_ as much as it is an **orchestrator**.
-It can control when, where, and how to start animations and comes with prebuilt animations you can drop in and start using immediately,
-such as [ConcealMove](/conceal-move) and [RevealMove](/reveal-move)!
+It's all about **animation** 🧙✨ - it can help with:
 
-Even better you can create _custom_ animations!
-Using the same [internals](/collector) the [prebuilt animations use](https://github.com/madou/yubaba/tree/master/packages/yubaba/src/animations),
-it comes with a first class customization experience for you to do,
-well,
-anything!
+- [Moving an element](/move) from one position to another
+- [Revealing elements](/focal-reveal-move) like you see above
+- [Supporting animations](/supporting-animations) by obstructing elements in view; and
+- [Hiding children elements](/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
+- [Orchestrating](/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](/advanced-usage#controlling-in-what-order-animations-should-execute)
+- Composing animations together to create composite animations, for example [CrossFadeMove](/cross-fade-move)
+- [Anything you can imagine](/custom-animations), seriously 🤩
 
 ## Installation
 
 `yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
 
 ```bash
-npm install yubaba [email protected] --save
+npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x --save
 ```
 
 or
 
 ```bash
-yarn add yubaba [email protected]
+yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x
 ```
 
-> **Tip -** After installing head over to [Getting started](/getting-started) to start learning the basics!
+## Next steps
+
+- **First time** here? After installing head over to [Getting started](/getting-started) to start learning the basics
+- Interested in **animating an element**? Check out [Focal animations](/focal-animations)
+- For **ready made experiences** check out [Composite components](/composite-components), just grab them and go!
+- Having **trouble**? Maybe [Troubleshooting](/troubleshooting) has your answers

packages/yubaba/src/__docs__/2-getting-started/docs.mdx

@@ -1,5 +1,5 @@
 ---
-name: 2. Getting started
+name: 2. Getting started 🏃
 route: /getting-started
 order: 4
 ---

packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx

@@ -21,7 +21,7 @@ import {
 } from '@material-ui/core';
 import * as Styled from './styled';
 import { WrappedBaba as Baba } from '../../Baba';
-import RevealMove from '../../animations/RevealMove';
+import FocalRevealMove from '../../animations/FocalRevealMove';
 import ConcealMove from '../../animations/ConcealMove';
 import FocalTarget from '../../FocalTarget';
 
@@ -41,7 +41,7 @@ const EmailChain = () => {
         {Styled.data.map((email, index) => (
           <React.Fragment key={index}>
             <Baba name={`card-${index}`} in={props.in}>
-              <RevealMove duration={600}>
+              <FocalRevealMove duration={600}>
                 {baba => (
                   <div {...baba}>
                     <ListItem button>
@@ -57,7 +57,7 @@ const EmailChain = () => {
                     </ListItem>
                   </div>
                 )}
-              </RevealMove>
+              </FocalRevealMove>
             </Baba>
             <Divider variant="inset" />
           </React.Fragment>