Add flowtype

Author: Brandon Dail

.flowconfig

@@ -0,0 +1,12 @@
+[ignore]
+<PROJECT_ROOT>/demo/.*
+<PROJECT_ROOT>/lib/.*
+<PROJECT_ROOT>/dist/.*
+<PROJECT_ROOT>/node_modules/.*
+
+
+[include]
+
+[libs]
+
+[options]

package.json

@@ -4,6 +4,7 @@
   "description": "animation library for Radium",
   "main": "index.js",
   "scripts": {
+    "flow": "flow",
     "test": "jest"
   },
   "keywords": [
@@ -14,12 +15,11 @@
   ],
   "author": "Brandon Dail <[email protected]>",
   "license": "MIT",
-  "peerDependencies": {
-    "radium": "^0.18.1"
-  },
   "devDependencies": {
     "builder": "^3.0.0",
-    "builder-radium-component-dev": "^2.1.2"
+    "builder-radium-component-dev": "^2.1.2",
+    "flow-bin": "^0.32.0",
+    "radium": "^0.18.1"
   },
   "dependencies": {
     "builder-radium-component": "^2.1.2",

src/components/bounce.js

@@ -1,7 +1,8 @@
-import Radium from 'radium';
+// @flow
 import { translate3d, cubicBezier } from '../utils';
+import type { Animation, Keyframe } from '../types';
 
-const base = {
+const base: Keyframe = {
   animationTimingFunction: cubicBezier(
     0.2125,
     0.610,
@@ -11,7 +12,7 @@ const base = {
   transform: translate3d(0, 0, 0),
 }
 
-const bounce = {
+const bounce: Animation = {
   '0%': base,
   '20%': base,
   '40%': {

src/components/flash.js

@@ -1,12 +1,14 @@
-const visible = {
+import type { Keyframe, Animation } from '../types';
+
+const visible: Keyframe = {
   opacity: 1,
 };
 
-const invisible = {
+const invisible: Keyframe = {
   opacity: 0,
 };
 
-const flash = {
+const flash: Animation = {
   from: visible,
   '25%': invisible,
   '50%': visible,

src/components/jello.js

@@ -1,10 +1,11 @@
 import { skewXY } from '../utils';
+import type { Keyframe, Animation } from '../types';
 
-const noSkew = {
+const noSkew: Keyframe = {
   transform: 'none',
 };
 
-const jello = {
+const jello: Animation = {
   from: noSkew,
   '11.1%': noSkew,
   '22.2%': {

src/components/pulse.js

@@ -1,6 +1,7 @@
 import { scale3d } from '../utils';
+import type { Animation } from '../types';
 
-const pulse = {
+const pulse: Animation = {
   from: {
     transform: scale3d(1, 1, 1),
   },

src/types.js

@@ -0,0 +1,8 @@
+// @flow
+export type Keyframe = {
+  [property: string]: string | number,
+}
+
+export type Animation = {
+  [keyframe: string]: Keyframe,
+}

src/utils.js

@@ -1,19 +1,23 @@
 // @flow
 
-export const cubicBezier = (a, b, c, d) =>
-  `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+export const cubicBezier = (
+  a: number,
+  b: number,
+  c: number,
+  d: number
+): string => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 
-export const translate3d = (a, b, c ) =>
+export const translate3d = (a: number, b: number, c: number): string =>
   `translate3d(${a}px, ${b}px, ${c}px)`;
 
-export const scale3d = (a, b, c) =>
+export const scale3d = (a: number, b: number, c: number): string =>
   `scale3d(${a}, ${b}, ${c})`;
 
-export const skewX = (deg) =>
+export const skewX = (deg: number): string =>
   `skewX(${deg}deg)`;
 
-export const skewY = (deg) =>
+export const skewY = (deg: number): string =>
   `skewY(${deg}deg)`;
 
-export const skewXY = (x, y) =>
+export const skewXY = (x: number, y: number): string =>
   `${skewX(x)} ${skewY(y)}`;