V3 (#45)

* working on v3

* more update animation key frames

* update with animate key frames

* working on aniamteGroup

* draft version

* update

* delete unused files

* delete unused files

* fixing useAnimate

* fixing useAnimate

* update all the hooks

* update

* covert to flow to typescript

* get it working with typescript

* remove all unit tests

* fix types

* type clean up

* move type update

* fix bug on animate group

* update on unit tests

* more unit tests update

* unit test for animateGroup

* unit test for AnimateKeyFrames

* useAnimateGroup

* testing on useAnimateGroup

* working version with useAnimateGroup

* fix unit test

* fix unit test

* unit test for useAnimateGroup

* update readme

* update readme

* update readme

* update readme

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:@typescript-eslint/recommended'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  rules: {
+    '@typescript-eslint/indent': 'off'
+  },
+};

.gitignore

@@ -61,6 +61,8 @@ typings/
 
 .DS_Store
 
+/dist
 /lib
 .idea/
-.coveralls.yml
+.coveralls.yml
+.rpt2_cache/

README.md

@@ -24,35 +24,81 @@
 
 ## Quickstart
 
-```jsx
-import react from 'react';
-import { Animate, AnimateKeyframes, AnimateGroup } from 'react-simple-animate';
+#### Components
 
-const props = {
-  startStyle: { opacity: 0 }
-  endStyle: { opacity: 1 }
-};
+```jsx
+import React from "react";
+import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
 
-export default () => {
-  return (
-    // This example demonstrate animate individual element.
-    <Animate play {...props}>
+export default () => (
+  <>
+    {/* This example demonstrate animate individual element. */}
+    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
       <h1>React simple animate</h1>
     </Animate>
-
-    // This example demonstrate animate keyframes with individual element.
-    <AnimateKeyframes play iterationCount="infinite" keyframes={['opacity: 0', 'opacity: 1']}>
+    {/* This example demonstrate animate keyframes with individual element. */}
+    <AnimateKeyframes
+      play
+      iterationCount="infinite"
+      keyframes={["opacity: 0", "opacity: 1"]}
+    >
       <h1>React simple animate with keyframes</h1>
     </AnimateKeyframes>
-
-    // This example demonstrate animate group of animation with sequenceIndex.
+    {/* This example demonstrate animate group of animation with sequenceIndex. */}
     <AnimateGroup play>
-      <Animate {...props} sequenceIndex={0} />
-      <p>Next animation below: </p>
-      <Animate {...props} sequenceIndex={1} />
-      <p>Final animation below: </p>
-      <Animate {...props} sequenceIndex={2} />
+      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
+        first
+      </Animate>
+
+      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>
+        second
+      </Animate>
+      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>
+        third
+      </Animate>
     </AnimateGroup>
+  </>
+);
+
+```
+
+#### Hooks
+
+```jsx
+import react from 'react';
+import { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate';
+
+export const useAnimateExample = () => {
+  const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } });
+
+  useEffect(() => play(true), []);
+
+  return <div style={style}>useAnimate</div>;
+};
+
+export const useAnimateKeyframesExample = () => {
+  const { style, play } = useAnimateKeyframes({ 
+    keyframes: ['opacity: 0', 'opacity: 1'], 
+    iterationCount: 4 
+  });
+
+  useEffect(() => play(true), []);
+
+  return <div style={style}>useAnimate</div>;
+};
+
+export const useAnimateGroup = () => {
+  const { styles = [], play } = useAnimateGroup({
+    sequences: [
+      { start: { opacity: 1 }, end: { opacity: 0 } },
+      { start: { background: "red" }, end: { background: "blue" } }
+    ]
+  });
+
+  useEffect(() => play(true), []);
+
+  return (
+    {styles.map(style => <div style={style}>useAnimateGroup</div>)}
   );
 };
 ```

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: 'tsconfig.jest.json',
+    },
+  },
+  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+  setupFiles: ['<rootDir>/setup.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+};