Merge pull request #139 from Monte9/feature/linter-fixes

Feature/linter fixes

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
+        "node": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {
@@ -11,6 +12,7 @@ module.exports = {
         },
         "sourceType": "module"
     },
+    "parser": "babel-eslint",
     "plugins": [
         "react"
     ],
@@ -78,7 +80,7 @@ module.exports = {
         "lines-around-comment": "error",
         "lines-around-directive": "error",
         "max-depth": "error",
-        "max-lines": "error",
+        "max-lines": "off",
         "max-nested-callbacks": "error",
         "max-params": "error",
         "max-statements": "error",
@@ -199,6 +201,8 @@ module.exports = {
         "prefer-template": "error",
         "radix": "error",
         "react/jsx-uses-vars": "error",
+        "react/jsx-uses-react": "error",   
+        "react/jsx-uses-vars": "error",
         "require-await": "error",
         "rest-spread-spacing": "error",
         "semi-spacing": "error",

.github/workflows/build.yml

@@ -24,4 +24,5 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         registry-url: 'https://registry.npmjs.org'
-    - run: yarn
+    - run: yarn install --frozen-lockfile
+    - run: yarn lint-all

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-all

demo/src/Card.js

@@ -6,54 +6,45 @@ const Card = props => {
     children,
     containerStyle,
     wrapperStyle,
-    imageWrapperStyle,
     title,
     titleStyle,
     titleNumberOfLines,
-    featuredTitle,
-    featuredTitleStyle,
-    featuredSubtitle,
-    featuredSubtitleStyle,
-    dividerStyle,
     image,
-    imageStyle,
-    imageProps,
-    theme,
     ...attributes
   } = props;
 
   return (
     <View
       {...attributes}
-      style={StyleSheet.flatten([
+      style={StyleSheet.flatten( [
         styles.container,
-        containerStyle && containerStyle,
-      ])}
+        containerStyle && containerStyle
+      ] )}
     >
       <View
-        style={StyleSheet.flatten([
+        style={StyleSheet.flatten( [
           styles.wrapper,
-          wrapperStyle && wrapperStyle,
-        ])}
+          wrapperStyle && wrapperStyle
+        ] )}
       >
-        {title === '' || React.isValidElement(title)
-          ? title
-          : title &&
-            title.length && (
+        {title === '' || React.isValidElement( title ) ?
+          title :
+          title &&
+            title.length &&
               <View>
                 <Text
                   testID="cardTitle"
-                  style={StyleSheet.flatten([
+                  style={StyleSheet.flatten( [
                     styles.cardTitle,
                     image && styles.imageCardTitle,
-                    titleStyle && titleStyle,
-                  ])}
+                    titleStyle && titleStyle
+                  ] )}
                   numberOfLines={titleNumberOfLines}
                 >
                   {title}
                 </Text>
               </View>
-            )}
+            }
         {children}
       </View>
     </View>
@@ -68,57 +59,57 @@ const styles = {
     margin: 15,
     marginBottom: 0,
     borderColor: 'gray',
-    ...Platform.select({
+    ...Platform.select( {
       android: {
-        elevation: 1,
+        elevation: 1
       },
       default: {
         shadowColor: 'rgba(0,0,0, .2)',
         shadowOffset: { height: 0, width: 0 },
         shadowOpacity: 1,
-        shadowRadius: 1,
-      },
-    }),
+        shadowRadius: 1
+      }
+    } )
   },
   featuredTitle: {
     fontSize: 18,
     marginBottom: 8,
     color: 'white',
-    ...Platform.select({
+    ...Platform.select( {
       default: {
-        fontWeight: '800',
-      },
-    }),
+        fontWeight: '800'
+      }
+    } )
   },
   featuredSubtitle: {
     fontSize: 13,
     marginBottom: 8,
     color: 'white',
-    ...Platform.select({
+    ...Platform.select( {
       default: {
-        fontWeight: '400',
-      },
-    }),
+        fontWeight: '400'
+      }
+    } )
   },
   wrapper: {
-    backgroundColor: 'transparent',
+    backgroundColor: 'transparent'
   },
   divider: {
-    marginBottom: 15,
+    marginBottom: 15
   },
   cardTitle: {
     fontSize: 14,
     color: 'gray',
-    ...Platform.select({
+    ...Platform.select( {
       default: {
-        fontWeight: 'bold',
-      },
-    }),
+        fontWeight: 'bold'
+      }
+    } ),
     textAlign: 'center',
-    marginBottom: 15,
+    marginBottom: 15
   },
   imageCardTitle: {
-    marginTop: 15,
+    marginTop: 15
   },
   overlayContainer: {
     flex: 1,
@@ -130,8 +121,8 @@ const styles = {
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
-  },
+    bottom: 0
+  }
 };
 
-export default Card;
+export default Card;

demo/src/SwipeRatingScreen.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { 
+import {
   Text, View, ScrollView, SafeAreaView, Platform, StyleSheet
 } from 'react-native';
 import { Rating } from 'react-native-ratings';
@@ -10,6 +10,7 @@ const WATER_IMAGE = require( '../assets/water.png' );
 
 class SwipeRatingScreen extends Component {
   ratingCompleted( rating ) {
+    // eslint-disable-next-line no-console
     console.log( `Rating is: ${rating}` );
   }
 
@@ -28,9 +29,10 @@ class SwipeRatingScreen extends Component {
             <Rating showRating={true} fractions={false} />
           </Card>
           <Card title="WITH FRACTIONS" containerStyle={styles.card}>
-            <Rating 
-              showRating={true} fractions={2} ratingTextColor="teal" 
-              onStartRating={() => console.log("started rating")}
+            <Rating
+              showRating={true} fractions={2} ratingTextColor="teal"
+              // eslint-disable-next-line no-console
+              onStartRating={() => console.log( "started rating" )}
             />
           </Card>
           <Card title="CUSTOM RATING" containerStyle={styles.card}>
@@ -84,7 +86,7 @@ const styles = StyleSheet.create( {
   flex: {
     flex: 1
   },
-  center:  {
+  center: {
     justifyContent: 'center',
     alignItems: 'center'
   },
@@ -107,9 +109,9 @@ const styles = StyleSheet.create( {
     color: '#34495e'
   },
   card: {
-    width: '85%', 
+    width: '85%',
     marginBottom: 20
   }
-});
+} );
 
-export default SwipeRatingScreen;
+export default SwipeRatingScreen;

demo/src/TapRatingScreen.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
-import { 
+import {
   Text, View, ScrollView, SafeAreaView, Platform, StyleSheet
 } from 'react-native';
 import { AirbnbRating } from 'react-native-ratings';
 
 import Card from './Card';
+const WATER_IMAGE = require( '../assets/water.png' );
 
 class TapRatingScreen extends Component {
   ratingCompleted( rating ) {
+    // eslint-disable-next-line no-console
     console.log( `Rating is: ${rating}` );
   }
 
@@ -34,18 +36,24 @@ class TapRatingScreen extends Component {
               onFinishRating={this.ratingCompleted}
             />
           </Card>
+          <Card title="CUSTOM IMAGE" containerStyle={styles.card}>
+            <AirbnbRating
+              onFinishRating={this.ratingCompleted}
+              starImage={WATER_IMAGE}
+            />
+          </Card>
           <Card title="CUSTOM COLOR" containerStyle={styles.card}>
             <AirbnbRating showRating={false} selectedColor="green" />
           </Card>
           <Card title="DISABLED" containerStyle={styles.card}>
             <AirbnbRating isDisabled={true} showRating={false} defaultRating={4} />
           </Card>
           <Card title="CUSTOM CONTAINER STYLE" containerStyle={styles.card}>
-            <AirbnbRating 
+            <AirbnbRating
               starContainerStyle={{
                   alignSelf: "center",
                   backgroundColor: "green"
-              }} 
+              }}
               isDisabled={true}
               showRating={false}
               defaultRating={4}
@@ -61,7 +69,7 @@ const styles = StyleSheet.create( {
   flex: {
     flex: 1
   },
-  center:  {
+  center: {
     justifyContent: 'center',
     alignItems: 'center'
   },
@@ -84,9 +92,9 @@ const styles = StyleSheet.create( {
     color: '#34495e'
   },
   card: {
-    width: '85%', 
+    width: '85%',
     marginBottom: 20
-  },
-});
+  }
+} );
 
-export default TapRatingScreen;
+export default TapRatingScreen;

package.json

@@ -21,7 +21,10 @@
   ],
   "scripts": {
     "lint": "eslint src/",
-    "clean-install": "rm -rf node_modules && yarn"
+    "lint-demo": "eslint demo/src/",
+    "lint-all": "yarn lint && yarn lint-demo",
+    "clean-install": "rm -rf node_modules && yarn",
+    "prepare": "husky install"
   },
   "author": "Monte Thakkar",
   "license": "MIT",
@@ -34,8 +37,10 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "babel-eslint": "^10.1.0",
     "eslint": "^5.6.1",
     "eslint-plugin-react": "^7.11.1",
+    "husky": "^5.2.0",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "^0.61.4"