diff --git a/.babelrc b/.babelrc index 9620bdf..cc4ee7a 100755 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015", "stage-2", "react"] -} \ No newline at end of file + "presets": ["es2015", "stage-2", "react", "flow"] +} diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000..363b337 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,9 @@ +[ignore] + +[include] + +[libs] + +[lints] + +[options] diff --git a/package-lock.json b/package-lock.json index 7fb11eb..fe9f5c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-content-loader", - "version": "1.4.0", + "version": "1.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3456,6 +3456,12 @@ "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", "dev": true }, + "flow-bin": { + "version": "0.57.3", + "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.57.3.tgz", + "integrity": "sha512-bbB7KLR1bLS0CvHSsKseOGFF6iI2N9ocL14EQv8Hng28ZksD0gNRzR2JopqA3WGrQYJukDU1W4ZuKoBaRuElFA==", + "dev": true + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", diff --git a/package.json b/package.json index c952e14..6830038 100755 --- a/package.json +++ b/package.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", diff --git a/src/Wrap.js b/src/Wrap.js index 08600bc..957735c 100644 --- a/src/Wrap.js +++ b/src/Wrap.js @@ -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() diff --git a/src/custom/Circle.js b/src/custom/Circle.js index a2185f7..5dcf1ca 100644 --- a/src/custom/Circle.js +++ b/src/custom/Circle.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 } diff --git a/src/custom/Rect.js b/src/custom/Rect.js index eda5fcf..eb53c75 100644 --- a/src/custom/Rect.js +++ b/src/custom/Rect.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 } diff --git a/src/index.js b/src/index.js index f658c4b..14c5fa5 100755 --- a/src/index.js +++ b/src/index.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 { + 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 - break case 'code': return - break case 'list': return - break default: case 'facebook': return - 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 } diff --git a/src/stylized/CodeStyle.js b/src/stylized/CodeStyle.js index b9215f5..c334c3c 100644 --- a/src/stylized/CodeStyle.js +++ b/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 CodeStyle = props => { +const CodeStyle = (props: WrapProps): React.Element<*> => { return ( diff --git a/src/stylized/FacebookStyle.js b/src/stylized/FacebookStyle.js index 54ab47e..f39f37d 100644 --- a/src/stylized/FacebookStyle.js +++ b/src/stylized/FacebookStyle.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 ( diff --git a/src/stylized/InstagramStyle.js b/src/stylized/InstagramStyle.js index ef270b3..4e40108 100644 --- a/src/stylized/InstagramStyle.js +++ b/src/stylized/InstagramStyle.js @@ -1,9 +1,11 @@ -import React from 'react' +//@flow +import * as React from 'react' import Wrap from '../Wrap' +import type { WrapProps } from '../Wrap'; -const InstagramStyle = props => { +const InstagramStyle = (props: WrapProps): React.Element<*> => { return ( - + diff --git a/src/stylized/ListStyle.js b/src/stylized/ListStyle.js index 09c130e..ec3e0aa 100644 --- a/src/stylized/ListStyle.js +++ b/src/stylized/ListStyle.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 ListStyle = props => { +const ListStyle = (props: WrapProps): React.Element<*> => { return (