Eslint rules (#69)

* create initial eslint rule

* Adding lint rule no-hard-coded-font (size); fixing lint warnings of hard-coded font size

* adding test to no-hard-coded-font rule

* adding .eslintignore file; fixing hard-coded colors to use Colors

* preparing for npm upload

Author: Inbal-Tish

.eslintignore

@@ -0,0 +1 @@
+/src/style/typography.js

.eslintrc

@@ -1,24 +1,25 @@
 {
   "parser": "babel-eslint",
-  "plugins": ["react-native"],
+  "plugins": ["react-native", "uilib"],
   "extends": ["airbnb"],
   "rules": {
-    "object-curly-spacing": "off",
-    "react/prefer-stateless-function": "off",
-    "react/jsx-filename-extension": "off",
-    "react/require-default-props": "off",
+    "arrow-body-style": "off",
+    "class-methods-use-this": "off",
+    "consistent-return": "off",
+    "global-require": "off",
+    "import/prefer-default-export": "off",
+    "no-plusplus": "off",
+    "no-return-assign": "off",
     "no-use-before-define": "off",
+    "max-len": [2, 120, 4, {"ignoreUrls": true}],
+    "object-curly-spacing": "off",
     "react/forbid-prop-types": "off",
+    "react/jsx-filename-extension": "off",
     "react/jsx-space-before-closing": "off",
     "react/jsx-tag-spacing": "off",
-    "max-len": [2, 120, 4, {"ignoreUrls": true}],
-    "class-methods-use-this": "off",
-    "arrow-body-style": "off",
-    "no-plusplus": "off",
-    "import/prefer-default-export": "off",
-    "global-require": "off",
-    "consistent-return": "off",
-    "no-return-assign": "off"
+    "react/prefer-stateless-function": "off",
+    "react/require-default-props": "off",
+    "uilib/no-hard-coded-font": "warn"
   },
   "env": {
     "browser": true,

.npmignore

@@ -232,6 +232,7 @@ android/
 typings/
 demo/
 uilib-docs/
+eslint-rules/
 scripts/
 demo-app.component.js
 index.android.js

eslint-rules/README.md

@@ -0,0 +1,51 @@
+# eslint-plugin-uilib
+
+uilib set of eslint rules
+
+## Installation
+
+You'll first need to install [ESLint](http://eslint.org):
+
+```
+$ npm i eslint --save-dev
+```
+
+Next, install `eslint-plugin-uilib`:
+
+```
+$ npm install eslint-plugin-uilib --save-dev
+```
+
+**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-uilib` globally.
+
+## Usage
+
+Add `uilib` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+    "plugins": [
+        "uilib"
+    ]
+}
+```
+
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+    "rules": {
+        "uilib/rule-name": 2
+    }
+}
+```
+
+## Supported Rules
+
+* Fill in provided rules here
+
+
+
+
+

eslint-rules/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-hard-coded-font': require('./lib/rules/no-hard-coded-font'),
+  },
+};

eslint-rules/lib/index.js

@@ -0,0 +1,19 @@
+/**
+ * @fileoverview uilib set of eslint rules
+ * @author Ethan Sharabi
+ */
+
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const requireIndex = require('requireindex');
+
+//------------------------------------------------------------------------------
+// Plugin Definition
+//------------------------------------------------------------------------------
+
+// import all rules in lib/rules
+module.exports.rules = requireIndex(__dirname + "/rules");

eslint-rules/lib/rules/no-hard-coded-color.js

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview Rule to disallow hard coded font style
+ * @author Inbal Tish
+ */
+
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'disallow hard coded font style',
+      category: 'Possible Errors',
+      recommended: true,
+    },
+    messages: {
+      reportMessage: 'Please do not use hard coded fontSize prop in style objects, instead use Typography presets',
+    },
+    fixable: 'code',
+    schema: [], // no options
+  },
+  create(context) {
+    return {
+      ObjectExpression: function (node) {
+        node.properties.forEach((property) => {
+          if (property.key) {
+            const propName = property.key.name;
+            if (propName === 'fontSize') {
+              if (property.value.type === 'CallExpression') {
+                return;
+              }
+              if (property.value.type === 'MemberExpression') {
+                const objectName = property.value.object.object.name;
+                if (objectName.toLowerCase() === 'typography') {
+                  return;
+                }
+              }
+              // console.log(`${property.value.value} should be fixed!`);
+              context.report({
+                node,
+                messageId: 'reportMessage',
+              });
+            }
+          }
+        });
+      },
+    };
+  },
+};

eslint-rules/lib/rules/no-hard-coded-font.js

@@ -0,0 +1,26 @@
+{
+  "name": "eslint-plugin-uilib",
+  "version": "1.0.0",
+  "description": "uilib set of eslint rules",
+  "keywords": [
+    "eslint",
+    "eslintplugin",
+    "eslint-plugin"
+  ],
+  "author": "Tnbal Tish <[email protected]>",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "mocha tests --recursive"
+  },
+  "dependencies": {
+    "requireindex": "~1.1.0"
+  },
+  "devDependencies": {
+    "eslint": "~3.9.1",
+    "mocha": "^3.1.2"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "license": "ISC"
+}

eslint-rules/package.json

@@ -0,0 +1,47 @@
+const rule = require('../../../lib/rules/no-hard-coded-font');
+const RuleTester = require('eslint').RuleTester;
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
+    },
+  },
+});
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-hard-coded-font', rule, {
+  valid: [
+    { code: 'const goodUsage = <Text style={{color: \'red\'}}/>;' },
+    { code: 'const goodUsage = <Text style={{fontSize: Typography.text10.fontSize}}/>;' },
+  ],
+  invalid: [
+    {
+      code: 'const badUsage = <Text style={{fontSize: 15}}/>;',
+      errors: [
+        {
+          messageId: 'foo',
+        },
+      ],
+    },
+    {
+      code: 'const badUsage = <Text style={{fontSize: Constants.isAndroid ? 16 : 17}}/>;',
+      errors: [
+        {
+          messageId: 'foo',
+        },
+      ],
+    },
+    {
+      code: 'const badUsage = <Text style={{fontSize: size}}/>;',
+      errors: [
+        {
+          messageId: 'foo',
+        },
+      ],
+    },
+  ],
+});

eslint-rules/tests/lib/rules/no-hard-coded-color.js

@@ -18,6 +18,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint src -c .eslintrc",
+    "lint:test": "mocha eslint-rules/tests/lib/rules",
     "xcode": "open ./ios/uilib.xcodeproj",
     "build": "mkdir -p dist && cp -r src/assets dist/ && babel src --out-dir dist",
     "log": "react-native log-ios | grep 'ethan -'",
@@ -48,9 +49,11 @@
     "eslint-plugin-jsx-a11y": "4.0.0",
     "eslint-plugin-react": "^6.9.0",
     "eslint-plugin-react-native": "^2.0.0",
+    "eslint-plugin-uilib": "file:./eslint-rules",
     "gatsby": "^1.9.128",
     "gh-pages": "^1.1.0",
     "jest": "^20.0.4",
+    "mocha": "^5.0.0",
     "react": "16.0.0",
     "react-addons-test-utils": "^15.4.2",
     "react-autobind": "^1.0.6",

eslint-rules/tests/lib/rules/no-hard-coded-font.js

@@ -52,7 +52,7 @@ describe('BaseComponent', () => {
     });
 
     it('should return value of the custom made typography', () => {
-      const customTypography = {fontSize: 34, fontWeight: '400'};
+      const customTypography = {fontSize: Typography.text30.fontSize, fontWeight: '400'};
       Typography.loadTypographies({customTypography});
       expect(new BaseComponent({customTypography: true}).extractTypographyValue()).toEqual(customTypography);
       expect(

package.json

@@ -186,11 +186,13 @@ function createStyles({size, labelColor, imageSource}) {
       bottom: 1,
       left: 1,
     },
+    /*eslint-disable*/
     initials: {
       fontSize: size * fontSizeToImageSizeRatio,
       color: labelColor,
       backgroundColor: 'rgba(0,0,0,0)',
     },
+    /*eslint-enable*/
     defaultImage: {
       width: size,
       height: size,

src/commons/__tests__/BaseComponent.spec.js

@@ -414,7 +414,7 @@ function createStyles() {
       backgroundColor: undefined,
     },
     shadowStyle: {
-      shadowColor: '#3082C8',
+      shadowColor: Colors.blue10,
       shadowOffset: {height: 5, width: 0},
       shadowOpacity: 0.35,
       shadowRadius: 9.5,

src/components/avatar/index.js

@@ -131,7 +131,7 @@ export default class Carousel2 extends BaseComponent {
       // const titleStyle = {
       //   color: this.deltaX.interpolate({
       //     inputRange,
-      //     outputRange: this.generateOutputRange(pageIndex, ['#C2C7CB', '#20303C']),
+      //     outputRange: this.generateOutputRange(pageIndex, [Colors.dark60, Colors.dark10]),
       //   }),
       //   transform: [{
       //     scale: this.deltaX.interpolate({

src/components/button/index.js

@@ -153,7 +153,7 @@ function createStyles() {
       alignSelf: 'center',
     },
     x: {
-      fontSize: 15,
+      fontSize: Typography.text80.fontSize,
       color: 'black',
     },
   });

src/components/carousel/Carousel2.js

@@ -42,7 +42,7 @@ export default function createStyles() {
       borderColor: separatorColor,
     },
     buttonText: {
-      fontSize: 30,
+      ...Typography.text40,
       fontWeight: '200',
       color: ThemeManager.primaryColor,
       backgroundColor: 'transparent',