From cb9da8b3a4aaf22ea557eb406662e3662a6eb21c Mon Sep 17 00:00:00 2001 From: Juha Tauriainen Date: Thu, 27 Jul 2017 15:27:43 +0300 Subject: [PATCH 1/3] Setup gulp with eslint and fixed all the issues --- .eslintrc | 15 ++++++ Components/Col.js | 79 ++++++++++++++++-------------- Components/Grid.js | 87 ++++++++++++++++----------------- Components/Row.js | 81 +++++++++++++++--------------- Components/_tests_/Col.test.js | 10 ++-- Components/_tests_/Grid.test.js | 10 ++-- Components/_tests_/Row.test.js | 10 ++-- Utils/computeProps.js | 57 ++++++++++----------- gulpfile.js | 19 +++++++ package.json | 27 +++++----- 10 files changed, 213 insertions(+), 182 deletions(-) create mode 100644 .eslintrc create mode 100644 gulpfile.js diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..86f061b --- /dev/null +++ b/.eslintrc @@ -0,0 +1,15 @@ +{ + "extends": "airbnb", + "parser": "babel-eslint", + "rules": { + "comma-dangle": 0, + "object-curly-spacing": 0, + "no-underscore-dangle": 0, + "no-console": 0, + "react/jsx-filename-extension": 0, + }, + "globals": { + "expect": true, + "test": true + } +} diff --git a/Components/Col.js b/Components/Col.js index 4387f47..1834adf 100644 --- a/Components/Col.js +++ b/Components/Col.js @@ -1,51 +1,54 @@ -'use strict'; - import React, {Component} from 'react'; import {View, TouchableOpacity} from 'react-native'; import computeProps from '../Utils/computeProps'; -import _ from 'lodash'; - export default class ColumnNB extends Component { - prepareRootProps() { - - var type = { - flexDirection: 'column', - flex: (this.props.size) ? this.props.size : (this.props.style && this.props.style.width) ? 0 : 1, - } - - var defaultProps = { - style: type - } - return computeProps(this.props, defaultProps); + setNativeProps(nativeProps) { + this._root.setNativeProps(nativeProps); + } - } + props: { + style: Object, + size: number, + children: Object, + onPress: Function + }; + + prepareRootProps() { + const flex = (this.props.style && this.props.style.width) ? 0 : 1; + const defaultProps = { + style: { + flexDirection: 'column', + flex: this.props.size ? this.props.size : flex, + } + }; + + return computeProps(this.props, defaultProps); + } - setNativeProps(nativeProps) { - this._root.setNativeProps(nativeProps); - } + renderCol() { + return ( + { + this._root = component; + }} + {...this.props} + {...this.prepareRootProps()} + > + {this.props.children} + + ); + } render() { - if(this.props.onPress){ - return( + if (this.props.onPress) { + return ( - this._root = component} - {...this.props} - {...this.prepareRootProps()} - >{this.props.children} - - ); + {this.renderCol()} + + ); } - else{ - return( - this._root = component} - {...this.props} - {...this.prepareRootProps()} - >{this.props.children} - ); - } - } + return this.renderCol(); + } } diff --git a/Components/Grid.js b/Components/Grid.js index 785312e..23be0a5 100644 --- a/Components/Grid.js +++ b/Components/Grid.js @@ -1,63 +1,58 @@ -'use strict'; - import React, {Component} from 'react'; import {View, TouchableOpacity} from 'react-native'; +import {reduce} from 'lodash'; import computeProps from '../Utils/computeProps'; -import _ from 'lodash'; -import Col from './Col'; import Row from './Row'; +const ifRow = () => + reduce(React.Children, (initial, child) => + (child && child.type === Row) || initial + , false); export default class GridNB extends Component { - prepareRootProps() { - - var type = { - flex: 1, - flexDirection: this.ifRow() ? 'column' : 'row' - } - - var defaultProps = { - style: type - } + setNativeProps(nativeProps) { + this._root.setNativeProps(nativeProps); + } - return computeProps(this.props, defaultProps); + props: { + children: Object, + onPress: Function + }; - } + prepareRootProps() { + const defaultProps = { + style: { + flex: 1, + flexDirection: ifRow() ? 'column' : 'row' + } + }; - ifRow() { - var row = false; - React.Children.forEach(this.props.children, function (child) { - if(child && child.type == Row) - row = true; - }) - return row; - } + return computeProps(this.props, defaultProps); + } - setNativeProps(nativeProps) { - this._root.setNativeProps(nativeProps); - } + renderGrid() { + return ( + { + this._root = component; + }} + {...this.props} + {...this.prepareRootProps()} + > + {this.props.children} + + ); + } render() { - if(this.props.onPress){ - return( + if (this.props.onPress) { + return ( - this._root = component} - {...this.props} - {...this.prepareRootProps()} - >{this.props.children} - - ); + {this.renderGrid()} + + ); } - else{ - return( - this._root = component} - {...this.props} - {...this.prepareRootProps()} - >{this.props.children} - ); - } - } + return this.renderGrid(); + } } diff --git a/Components/Row.js b/Components/Row.js index df906ef..43bb15e 100644 --- a/Components/Row.js +++ b/Components/Row.js @@ -1,53 +1,54 @@ -'use strict'; - import React, {Component} from 'react'; import {View, TouchableOpacity} from 'react-native'; - import computeProps from '../Utils/computeProps'; -import _ from 'lodash'; - export default class RowNB extends Component { - prepareRootProps() { - - var type = { - flexDirection: 'row', - flex: (this.props.size) ? this.props.size : (this.props.style && this.props.style.height) ? 0 : 1, - } - - var defaultProps = { - style: type - } - return computeProps(this.props, defaultProps); - - } + setNativeProps(nativeProps) { + this._root.setNativeProps(nativeProps); + } + + props: { + style: Object, + size: number, + children: Object, + onPress: Function + }; + + prepareRootProps() { + const flex = (this.props.style && this.props.style.height) ? 0 : 1; + const defaultProps = { + style: { + flexDirection: 'row', + flex: this.props.size ? this.props.size : flex + } + }; - setNativeProps(nativeProps) { - this._root.setNativeProps(nativeProps); - } + return computeProps(this.props, defaultProps); + } - render() { - if(this.props.onPress){ - return( - - this._root = component} + renderView() { + return ( + { + this._root = component; + }} {...this.props} {...this.prepareRootProps()} - >{this.props.children} - + > + {this.props.children} + + ); + } + + render() { + if (this.props.onPress) { + return ( + + {this.renderView()} + ); - } - else{ - return( - this._root = component} - {...this.props} - {...this.prepareRootProps()} - >{this.props.children} - ); - } } - + return this.renderView(); + } } diff --git a/Components/_tests_/Col.test.js b/Components/_tests_/Col.test.js index 6e0fb14..3e28d16 100644 --- a/Components/_tests_/Col.test.js +++ b/Components/_tests_/Col.test.js @@ -1,9 +1,9 @@ -import "react-native"; -import React from "react"; -import Col from "../Col"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; +import Col from '../Col'; -test("renders correctly", () => { +test('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/Components/_tests_/Grid.test.js b/Components/_tests_/Grid.test.js index bfa1f95..d1f452f 100644 --- a/Components/_tests_/Grid.test.js +++ b/Components/_tests_/Grid.test.js @@ -1,9 +1,9 @@ -import "react-native"; -import React from "react"; -import Grid from "../Grid"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; +import Grid from '../Grid'; -test("renders correctly", () => { +test('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/Components/_tests_/Row.test.js b/Components/_tests_/Row.test.js index d06f219..232bcd3 100644 --- a/Components/_tests_/Row.test.js +++ b/Components/_tests_/Row.test.js @@ -1,9 +1,9 @@ -import "react-native"; -import React from "react"; -import Row from "../Row"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; +import Row from '../Row'; -test("renders correctly", () => { +test('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/Utils/computeProps.js b/Utils/computeProps.js index 8b73c64..631ee0a 100644 --- a/Utils/computeProps.js +++ b/Utils/computeProps.js @@ -1,49 +1,42 @@ -var React = require("react"); -import ReactNativePropRegistry - from "react-native/Libraries/Renderer/shims/ReactNativePropRegistry"; -var _ = require("lodash"); +import ReactNativePropRegistry from 'react-native/Libraries/Renderer/shims/ReactNativePropRegistry'; +import {clone, merge, forEach, isArray} from 'lodash'; -module.exports = function(incomingProps, defaultProps) { +export default (incomingProps, defaultProps) => { // External props has a higher precedence - var computedProps = {}; + let computedProps = {}; - incomingProps = _.clone(incomingProps); - delete incomingProps.children; + const props = clone(incomingProps); + delete props.children; - var incomingPropsStyle = incomingProps.style; - delete incomingProps.style; + const propsStyle = props.style; + delete props.style; - // console.log(defaultProps, incomingProps); - - if (incomingProps) _.merge(computedProps, defaultProps, incomingProps); - else computedProps = defaultProps; + if (props) { + merge(computedProps, defaultProps, props); + } else { + computedProps = defaultProps; + } // Pass the merged Style Object instead - if (incomingPropsStyle) { - var computedPropsStyle = {}; - computedProps.style = {}; - if (Array.isArray(incomingPropsStyle)) { - _.forEach(incomingPropsStyle, style => { - if (typeof style == "number") { - _.merge(computedPropsStyle, ReactNativePropRegistry.getByID(style)); + if (propsStyle) { + let computedPropsStyle = {style: {}}; + + if (isArray(propsStyle)) { + forEach(propsStyle, (style) => { + if (typeof style === 'number') { + merge(computedPropsStyle, ReactNativePropRegistry.getByID(style)); } else { - _.merge(computedPropsStyle, style); + merge(computedPropsStyle, style); } }); + } else if (typeof computedPropsStyle === 'number') { + computedPropsStyle = ReactNativePropRegistry.getByID(propsStyle); } else { - if (typeof incomingPropsStyle == "number") { - computedPropsStyle = ReactNativePropRegistry.getByID( - incomingPropsStyle - ); - } else { - computedPropsStyle = incomingPropsStyle; - } + computedPropsStyle = propsStyle; } - _.merge(computedProps.style, defaultProps.style, computedPropsStyle); + merge(computedProps.style, defaultProps.style, computedPropsStyle); } - // console.log("computedProps ", computedProps); - return computedProps; }; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..a9c7d50 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,19 @@ +const gulp = require('gulp'); +const plumber = require('gulp-plumber'); +const notify = require('gulp-notify'); +const eslint = require('gulp-eslint'); +const watch = require('gulp-watch'); +const filePaths = ['./Utils/**/*.js', './Components/**/*.js']; + +gulp.task('lint', () => + gulp.src(filePaths) + .pipe(plumber()) + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()) + .on('error', notify.onError('Lint error: <%= error.message %>')) +); + +gulp.task('default', ['lint'], () => { + watch(filePaths, () => gulp.start(['lint'])); +}); diff --git a/package.json b/package.json index cbac1d2..9fee85f 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "version": "0.1.15", "private": false, "dependencies": { - "lodash": "^4.11.1" + "lodash": "^4.11.1", + "react": "^15.6.1", + "react-native": "^0.46.4" }, "scripts": { "test": "jest" @@ -44,16 +46,19 @@ ] }, "devDependencies": { - "babel-eslint": "^6.0.4", - "eslint": "^2.9.0", - "eslint-plugin-react": "^5.0.1", - "eslint-plugin-react-native": "^1.0.0", - "babel-jest": "20.0.3", - "babel-preset-react-native": "1.9.2", - "jest": "20.0.3", - "react": "16.0.0-alpha.12", - "react-test-renderer": "16.0.0-alpha.12", - "react-native": "0.46.0" + "babel-eslint": "^6.1.2", + "eslint": "^3.19.0", + "eslint-config-airbnb": "^15.1.0", + "eslint-plugin-import": "^2.7.0", + "eslint-plugin-jsx-a11y": "^5.1.1", + "eslint-plugin-react": "^7.1.0", + "eslint-plugin-react-native": "^1.2.1", + "gulp": "^3.9.1", + "gulp-eslint": "^3.0.1", + "gulp-notify": "^3.0.0", + "gulp-plumber": "^1.1.0", + "gulp-watch": "^4.3.11", + "react-test-renderer": "^15.6.1" }, "repository": { "type": "git", From 5cf2c1a503c3125f22a1d30ef90920282cfaf8ae Mon Sep 17 00:00:00 2001 From: Juha Tauriainen Date: Thu, 27 Jul 2017 15:37:19 +0300 Subject: [PATCH 2/3] Add accidentally removed packages from package.json --- package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9fee85f..73bf425 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": false, "dependencies": { "lodash": "^4.11.1", - "react": "^15.6.1", + "react": "16.0.0-alpha.12", "react-native": "^0.46.4" }, "scripts": { @@ -46,6 +46,9 @@ ] }, "devDependencies": { + "babel-jest": "^20.0.3", + "babel-preset-react-native": "^2.1.0", + "jest": "^20.0.4", "babel-eslint": "^6.1.2", "eslint": "^3.19.0", "eslint-config-airbnb": "^15.1.0", @@ -58,7 +61,7 @@ "gulp-notify": "^3.0.0", "gulp-plumber": "^1.1.0", "gulp-watch": "^4.3.11", - "react-test-renderer": "^15.6.1" + "react-test-renderer": "16.0.0-alpha.12" }, "repository": { "type": "git", From 6f092445ca488cdcd81f50dc3cf690515d5f9b64 Mon Sep 17 00:00:00 2001 From: Juha Tauriainen Date: Thu, 27 Jul 2017 15:39:00 +0300 Subject: [PATCH 3/3] Improve testing script to include eslint --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 73bf425..96ffd11 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "react-native": "^0.46.4" }, "scripts": { - "test": "jest" + "lint": "node_modules/gulp/bin/gulp.js lint", + "test": "npm run lint && jest" }, "jest": { "preset": "react-native",