Setup flow and convert existing component files (#21)

* add flow and babel-preset-flow

* convert index.js to flow

* convert Wrap.js to use flow

* convert CodeStyle.js

* convert other stylized component files to use flow

* convert Rect and Circle to use flow

* add type checking for React.Element

Author: pallymore

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015", "stage-2", "react"]
-}
+    "presets": ["es2015", "stage-2", "react", "flow"]
+}

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]

package-lock.json

@@ -1,8 +1,7 @@
 {
   "name": "react-content-loader",
   "version": "1.4.1",
-  "description":
-    "This project is a collection the loader based on styles cards on Facebook, make with SVG and React.",
+  "description": "This project is a collection the loader based on styles cards on Facebook, make with SVG and React.",
   "repository": {
     "type": "git",
     "url": "https://github.com/danilowoz/react-content-loader"
@@ -14,22 +13,28 @@
     "url": "https://github.com/danilowoz/react-content-loader/issues"
   },
   "homepage": "https://github.com/danilowoz/react-content-loader",
-  "keywords": ["react", "facebook-style", "loader", "loading", "content", "svg"],
+  "keywords": [
+    "react",
+    "facebook-style",
+    "loader",
+    "loading",
+    "content",
+    "svg"
+  ],
   "options": {
     "mocha": "--require scripts/mocha_runner ./tests/**/*.js ./tests/*.js"
   },
   "scripts": {
-    "watch":
-      "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
-    "prepublish":
-      "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
+    "watch": "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
+    "prepublish": "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
     "lint": "eslint 'src/**/*.js'",
     "prettier": "prettier --write 'src/**/*.{js,jsx,json,css}'",
     "testonly": "mocha $npm_package_options_mocha",
     "test": "npm run lint && npm run testonly",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "flow": "flow"
   },
   "devDependencies": {
     "@storybook/react": "^3.1.9",
@@ -39,6 +44,7 @@
     "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
     "chai": "^3.5.0",
@@ -49,6 +55,7 @@
     "eslint-plugin-babel": "^3.1.0",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^4.2.3",
+    "flow-bin": "^0.57.3",
     "jsdom": "^8.1.0",
     "mocha": "^2.4.5",
     "nodemon": "^1.9.1",

package.json

@@ -1,7 +1,14 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
 import uuid from 'uuid'
 
-const Wrap = props => {
+import type { Props as ContentLoaderProps } from './index';
+
+export type WrapProps = {
+  children?: React.ChildrenArray<*>
+} & ContentLoaderProps
+
+const Wrap = (props: WrapProps): React.Element<*> => {
   let idClip = uuid.v1()
   let idGradient = uuid.v1()
 

src/Wrap.js

@@ -1,6 +1,13 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
 
-const Circle = props => {
+type Props = {
+  x: number,
+  y: number,
+  radius: number,
+}
+
+const Circle = (props: Props): React.Element<*> => {
   const { x = 0, y = 0, radius = 50 } = props
   return <circle cx={x} cy={y} r={radius} />
 }

src/custom/Circle.js

@@ -1,6 +1,15 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
 
-const Rect = props => {
+type Props = {
+  x: number,
+  y: number,
+  radius: number,
+  width: number,
+  height: number,
+}
+
+const Rect = (props: Props): React.Element<*> => {
   const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
   return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
 }

src/custom/Rect.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+//@flow
+import * as React from 'react'
 
 import Wrap from './Wrap'
 // Stylized
@@ -11,8 +11,37 @@ import ListStyle from './stylized/ListStyle'
 import Rect from './custom/Rect'
 import Circle from './custom/Circle'
 
-class ContentLoader extends Component {
-  constructor(props) {
+export type Props = {
+  style: {[key: string]: any},
+  type: string,
+  speed: number,
+  width: number,
+  height: number,
+  primaryColor: string,
+  secondaryColor: string,
+}
+
+type State = {
+  style: {[key: string]: any},
+  type: string,
+  speed: number,
+  width: number,
+  height: number,
+  primaryColor: string,
+  secondaryColor: string,
+}
+
+class ContentLoader extends React.Component<Props, State> {
+  static defaultProps = {
+    type: 'facebook',
+    speed: 2,
+    width: 400,
+    height: 130,
+    primaryColor: '#f0f0f0',
+    secondaryColor: '#e0e0e0',
+  }
+
+  constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -35,43 +64,20 @@ class ContentLoader extends Component {
       switch (this.state.type.toLowerCase()) {
         case 'instagram':
           return <InstagramStyle {...this.state} />
-          break
 
         case 'code':
           return <CodeStyle {...this.state} />
-          break
 
         case 'list':
           return <ListStyle {...this.state} />
-          break
 
         default:
         case 'facebook':
           return <FacebookStyle {...this.state} />
-          break
       }
     }
   }
 }
 
-ContentLoader.propTypes = {
-  style: PropTypes.object,
-  type: PropTypes.string,
-  speed: PropTypes.number,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  primaryColor: PropTypes.string,
-  secondaryColor: PropTypes.string,
-}
-
-ContentLoader.defaultProps = {
-  type: 'facebook',
-  speed: 2,
-  width: 400,
-  height: 130,
-  primaryColor: '#f0f0f0',
-  secondaryColor: '#e0e0e0',
-}
-
 export default ContentLoader
 export { Rect, Circle }

src/index.js

@@ -1,7 +1,9 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
 import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
 
-const CodeStyle = props => {
+const CodeStyle = (props: WrapProps): React.Element<*> => {
     return (
     <Wrap {...props}>
       <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />

src/stylized/CodeStyle.js

@@ -1,7 +1,9 @@
-import React from 'react'
+//@flow
+import * as React from 'react'
 import Wrap from '../Wrap'
+import type { WrapProps } from '../Wrap';
 
-const FacebookStyle = props => {
+const FacebookStyle = (props: WrapProps): React.Element<*> => {
   return (
     <Wrap {...props}>
       <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />