Merge pull request #7 from kidunot89/release-0.0.4

Release 0.0.4

CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+## [0.0.4]
+### Removed
+- **Unnecessary debug code** removed from context.js and chain.js.
+
+## [0.0.3]
+### Changes
+- **withAnimeJs** wrapped component can be used stand-alone without a parent `Chain` component.
+- **entering, exiting, and initial** props removed from `withAnimeJs`' `propTypes` definition.
+- **README.md** updated.
+- **with-anime.test.js** updated.
+### Fixes
+- **processTimeout** `withAnimeJs`' default timeout calculation fixed for states with multiple steps.

README.md

@@ -29,7 +29,6 @@ const App = () => (
     <Chain id="app" in={ true }>
         <Container
             id="section"
-            initial={ { opacity: 0 } }
             entering={ {
                 opacity: 1,
                 translateX: [ '-100%', 0 ],
@@ -40,6 +39,7 @@ const App = () => (
                 translateX: [ 0, '+100%' ],
                 duration: 450,
             } }
+            exited={ { opacity: 0 } }
         >
     </Chain>
 )
@@ -50,9 +50,9 @@ render( <App />, document.getByElementId( 'app' ) );
 ## Transition Components
 ### Chain
 #### Props
-- **id** `string|number` *required* - Chained component unique identifier
+- **id** `string|number` *required* - ChainContext unique identifier
 #### Notes & Examples
-Functions as a relay for the transition and a wrapper to **[React Transition Group](https://github.com/reactjs/react-transition-group)**'s [`Transition`]() component. It stores the `state` of Transition component and passes it to the `ChainContext` context using `React.js`' [Context API](https://reactjs.org/docs/context.html) for use by all child components. All props for the Transition component are passed through and work like normal, except `timeout`. The `timeout` prop defaults to the highest enter and exit timeouts of all mounted child `InnerChain` `animationHOC( component )`.
+Functions as a relay for the transition and a wrapper to **[React Transition Group](https://github.com/reactjs/react-transition-group)**'s [`Transition`]() component. It stores the `state` of Transition component and passes it to the `ChainContext` context using `React.js`' [Context API](https://reactjs.org/docs/context.html) for use by all child components. All props for the Transition component are passed through and work like normal, except `timeout`. The `timeout` prop defaults to the highest enter and exit timeouts of all mounted direct child **withAnimeJs( component )**s.
 
 ```
 <Chain id="app" in={ true }>
@@ -62,11 +62,11 @@ Functions as a relay for the transition and a wrapper to **[React Transition Gro
 
 ### InnerChain
 #### Props
-- **id** `string|number` *required* - Chained component unique identifier
+- **id** `string|number` *required* - ChainContext unique identifier
 - **inOnEntering** `boolean` - toggle Transition `in` prop on `entering` or `exiting` states
 - **reverse** `boolean` - `in` prop set to *true* on `exiting` states and *false* on `entering` states
 #### Notes & Examples
-Functions as a middleman of sorts by retrieving the `state` of the closest parent `Chain` or `InnerChain` component through context and passing it down to its children.
+Functions as a middleman of sorts by retrieving the `state` of the closest parent **Chain** or **InnerChain** component through context and passing it down to its children.
 ```
 <Chain id="app" in={ true }>
     <InnerChain>
@@ -78,42 +78,47 @@ Functions as a middleman of sorts by retrieving the `state` of the closest paren
 ## Animation HOCs
 ### withAnimeJs
 #### Props
-- **id** `string|number` *required* - Chained component unique identifier
-- **initial** `object|object[]` - AnimeJs initial state parameters
-- **entering** `object|object[]` - AnimeJs entering parameters
-- **exiting** `object|object[]` - AnimeJs exiting parameters
+- **id** `string|number` *required* - ChainContext unique identifier
+- **state** `string` - component's current state
 - **processTimeout** `function` - callback used to calculate parent Chain/InnerChain timeout
 #### Notes & Examples
-A HOC that wraps and executes a series of **[Anime.js](http://animejs.com)** calls on children. Anime.js manipulates DOM and doesn't interact with the VirtualDOM React uses meaning for it to properly target element the `ref` prop must be set on the wrapped component, like example below.
+A HOC that wraps and executes a series of **[Anime.js](http://animejs.com)** calls on its children. Anime.js manipulates DOM and doesn't interact with the VirtualDOM React uses, meaning for it to properly target elements the `ref` prop must be set somewhere on the wrapped component, like example below.
 ```
 const Container = withAnimeJs( 
-    React.forwardRef( ( { animeRef, context, ...r }, ref ) => (
-        <div ref={ ref } { ...r }></div>
+    React.forwardRef( ( { animeRef, context, children, ...r }, ref ) => (
+        <div ref={ ref } { ...r }>
+            <span>Wrapped</span>
+            { children }
+        </div>
     )
 ) );
 ```
-The resulting component will take some additional props `entering`, `exiting`, and `initial`, and `processTimeout`. The first three are parameters for Anime.js each applied at different states in the transition's cycle. Consult **Anime.js**' [documentation](http://animejs.com/documentation/) for more info. `processTimeout` is callback used to calculate the `timeout` prop used for the parent `Chain` or `InnerChain` component. The default callback is pretty robust so you'll rarely ever have to set this.
+The resulting component can be animated by state. This is done by providing anime.js parameters as a prop named after the corresponding state. You can see an example of this in the following example. Consult **Anime.js**' [documentation](http://animejs.com/documentation/) for more info. `processTimeout` is a callback used to calculate the `timeout` prop used for a parenting **Chain** or **InnerChain** component. The default callback is pretty robust and isn't used during stand-alone use so you'll rarely ever have to set this.
 ```
-<Chain id="app" in={ true }>
     <Container
         id="section"
-        initial={ { opacity: 0 } } // No duration
-        entering={ {
+        state="hello"
+        hello={ {
             opacity: 1,
             translateX: [ '-100%', 0 ],
             duration: 600,
         } }
-        exiting={ {
+        goodbye={ {
             opacity: 0,
             translateX: [ 0, '+100%' ],
             duration: 450,
         } }
     >
-</Chain>
+        ...
+    </Container>
 ```
+When no `state` prop is provided, it's set to that of the nearest parent `ChainContext`. If none is found, it uses the default which is `unmounted`. Using in conjournment with the **Chain** and **InnerChain** components can allow for centralized state-management and complex transitions without much effort. 
+In the sandbox below is a recreation of couple of [Tobias Ahlin](http://tobiasahlin.com)'s [Moving Letters](http://tobiasahlin.com/moving-letters/#) examples. [Styled Components](https://www.styled-components.com/) are used for the base styling, but this can easily be replace with plain css.
+
+[![Edit ChainDrive Example-1](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/00rv90712v)
 
 ## Coming Soon
-- Demo
+- More Examples
 
 ## Potential Ideas
 - More animated HOCs using other animation libraries