Merge branch 'master' into greenkeeper/initial

Author: Intellicode

.gitignore

@@ -25,3 +25,5 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+.idea

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 5
-  - 6
+  - 8
+  - 10
 after_success:
   - npm run coveralls

README.md

@@ -4,7 +4,7 @@ ESLint plugin for React Native
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/Intellicode/eslint-plugin-react-native.svg)](https://greenkeeper.io/)
 
-[![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][deps-image]][deps-url] [![Coverage Status][coverage-image]][coverage-url] [![Code Climate][climate-image]][climate-url] [![BCH compliance][bettercode-image]][bettercode-url] 
+[![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][deps-image]][deps-url] [![Coverage Status][coverage-image]][coverage-url] [![Code Climate][climate-image]][climate-url] [![BCH compliance][bettercode-image]][bettercode-url]
 
 React Native specific linting rules for ESLint. This repository is structured like  (and contains code from) the excellent [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react).
 
@@ -13,20 +13,20 @@ React Native specific linting rules for ESLint. This repository is structured li
 Install [ESLint](https://www.github.com/eslint/eslint) either locally or globally.
 
 ```sh
-$ npm install eslint
+$ npm install --save-dev eslint
 ```
 
 To make most use of this plugin, its recommended to install [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) in addition to [ESLint](https://www.github.com/eslint/eslint). If you installed `ESLint` globally, you have to install eslint-plugin-react globally too. Otherwise, install it locally.
 
 ```sh
-$ npm install eslint-plugin-react
+$ npm install --save-dev eslint-plugin-react
 ```
 
 Similarly, install eslint-plugin-react-native
 
 
 ```sh
-$ npm install eslint-plugin-react-native
+$ npm install --save-dev eslint-plugin-react-native
 ```
 
 # Configuration
@@ -46,8 +46,20 @@ If it is not already the case you must also configure `ESLint` to support JSX.
 
 ```json
 {
-  "ecmaFeatures": {
-    "jsx": true
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      }
+  }
+}
+```
+
+In order to whitelist all *browser-like* globals, add `react-native/react-native` to your config.
+
+```json
+{
+  "env": {
+    "react-native/react-native": true
   }
 }
 ```
@@ -61,16 +73,19 @@ Finally, enable all of the rules that you would like to use.
     "react-native/split-platform-components": 2,
     "react-native/no-inline-styles": 2,
     "react-native/no-color-literals": 2,
+    "react-native/no-raw-text": 2,
   }
 }
 ```
 
 # List of supported rules
 
 * [no-unused-styles](docs/rules/no-unused-styles.md): Detect `StyleSheet` rules which are not used in your React components
+* [sort-styles](docs/rules/sort-styles.md): Require style definitions to be sorted alphabetically
 * [split-platform-components](docs/rules/split-platform-components.md): Enforce using platform specific filenames when necessary
 * [no-inline-styles](docs/rules/no-inline-styles.md): Detect JSX components with inline styles that contain literal values
 * [no-color-literals](docs/rules/no-color-literals.md): Detect `StyleSheet` rules and inline styles containing color literals instead of variables
+* [no-raw-text](docs/rules/no-raw-text.md): Detect raw text outside of `Text`  component
 
 [npm-url]: https://npmjs.org/package/eslint-plugin-react-native
 [npm-image]: http://img.shields.io/npm/v/eslint-plugin-react-native.svg?style=flat-square

docs/rules/no-raw-text.md

@@ -0,0 +1,30 @@
+# Detect raw text outside of Text component
+All strings in React Native should be wrapped with a Text component.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+<View>some text</View>
+```
+
+```js
+const text = 'some text';
+<View>{`${text}`}</View>
+```
+
+The following patterns are not considered warnings:
+
+```js
+<View><Text>some text</Text></View>
+```
+
+```js
+const text = 'some text';
+<View><Text>{`${text}`}</Text></View>
+```
+
+#### This rule has an object option:
+
+- "skip" – allow to skip checking for the array of custom components

docs/rules/no-unused-styles.md

@@ -120,4 +120,4 @@ const styles = StyleSheet.create({
   text: {}
 });
 ```
-There should be atleast one component, so centralized `StyleSheets` are not checked for unused rules.
+There should be at least one component, so centralized `StyleSheets` are not checked for unused rules.

docs/rules/sort-styles.md

@@ -0,0 +1,132 @@
+# Require StyleSheet keys to be sorted
+It's like [sort-keys](https://eslint.org/docs/rules/sort-keys), but just for React Native styles.
+
+Keeping your style definitions sorted is a common convention that helps with readability. This rule lets you enforce an ascending (default) or descending alphabetical order for both "class names" and style properties.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  button: {
+    width: 100,
+    color: 'green',
+  },
+});
+```
+
+```js
+const styles = StyleSheet.create({
+  button: {},
+  anchor: {},
+});
+```
+
+The following patterns are not considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  button: {
+    color: 'green',
+    width: 100,
+  },
+});
+```
+
+```js
+const styles = StyleSheet.create({
+  anchor: {},
+  button: {},
+});
+```
+
+## Options
+
+```
+{
+    "react-native/sort-styles": ["error", "asc", { "ignoreClassNames": false, "ignoreStyleProperties": false }]
+}
+```
+
+The 1st option is "asc" or "desc".
+
+* `"asc"` (default) - enforce properties to be in ascending order.
+* `"desc"` - enforce properties to be in descending order.
+
+The 2nd option is an object which has 2 properties.
+
+* `ignoreClassNames` - if `true`, order will not be enforced on the class name level. Default is `false`.
+* `ignoreStyleProperties` - if `true`, order will not be enforced on the style property level. Default is `false`.
+
+### desc
+
+`/* eslint react-native/sort-styles: ["error", "desc"] */`
+
+The following patterns are considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  button: {
+    color: 'green',
+    width: 100,
+  },
+});
+```
+
+```js
+const styles = StyleSheet.create({
+  anchor: {},
+  button: {},
+});
+```
+
+The following patterns are not considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  button: {
+    width: 100,
+    color: 'green',
+  },
+});
+```
+
+```js
+const styles = StyleSheet.create({
+  button: {},
+  anchor: {},
+});
+```
+
+### ignoreClassNames
+
+`/* eslint react-native/sort-styles: ["error", "asc", { "ignoreClassNames": true }] */`
+
+The following patterns are not considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  button: {
+    color: 'green',
+    width: 100,
+  },
+  anchor: {},
+});
+```
+
+# ignoreStyleProperties
+
+`/* eslint react-native/sort-styles: ["error", "asc", { "ignoreStyleProperties": true }] */`
+
+The following patterns are not considered warnings:
+
+```js
+const styles = StyleSheet.create({
+  anchor: {},
+  button: {
+    width: 100,
+    color: 'green',
+  },
+});
+```

index.js

@@ -6,7 +6,9 @@ const allRules = {
   'no-unused-styles': require('./lib/rules/no-unused-styles'),
   'no-inline-styles': require('./lib/rules/no-inline-styles'),
   'no-color-literals': require('./lib/rules/no-color-literals'),
+  'sort-styles': require('./lib/rules/sort-styles'),
   'split-platform-components': require('./lib/rules/split-platform-components'),
+  'no-raw-text': require('./lib/rules/no-raw-text'),
 };
 
 function configureAsError(rules) {
@@ -29,7 +31,14 @@ module.exports = {
     'no-unused-styles': 0,
     'no-inline-styles': 0,
     'no-color-literals': 0,
+    'sort-styles': 0,
     'split-platform-components': 0,
+    'no-raw-text': 0,
+  },
+  environments: {
+    'react-native': {
+      globals: require('eslint-plugin-react-native-globals').environments.all.globals,
+    },
   },
   configs: {
     all: {

lib/rules/no-color-literals.js

@@ -32,7 +32,7 @@ module.exports = Components.detect((context) => {
 
   return {
     VariableDeclarator: (node) => {
-      if (astHelpers.isStyleSheetDeclaration(node)) {
+      if (astHelpers.isStyleSheetDeclaration(node, context.settings)) {
         const styles = astHelpers.getStyleDeclarations(node);
 
         if (styles) {

lib/rules/no-raw-text.js

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview Detects raw text outside of Text component
+ * @author Alex Zhukov
+ */
+
+'use strict';
+
+module.exports = (context) => {
+  const options = context.options[0] || {};
+
+  const elementName = node => (
+    node.openingElement &&
+    node.openingElement.name &&
+    node.openingElement.name.type === 'JSXIdentifier' &&
+    node.openingElement.name.name
+  );
+
+  const report = (node) => {
+    const errorValue = node.type === 'TemplateLiteral'
+      ? `TemplateLiteral: ${node.expressions[0].name}`
+      : node.value.trim();
+
+    const formattedErrorValue = errorValue.length > 0
+      ? `Raw text (${errorValue})`
+      : 'Whitespace(s)';
+
+    context.report({
+      node,
+      message: `${formattedErrorValue} cannot be used outside of a <Text> tag`,
+    });
+  };
+
+  const skippedElements = options.skip ? options.skip : [];
+  const allowedElements = ['Text', 'TSpan', 'StyledText'].concat(skippedElements);
+
+  const getValidation = node => !allowedElements.includes(elementName(node.parent));
+
+  return {
+    Literal(node) {
+      const parentType = node.parent.type;
+      const onlyFor = ['JSXExpressionContainer', 'JSXElement'];
+      if (typeof node.value !== 'string' ||
+        /^[\r\n\t\f\v]+$/.test(node.value.replace(/ /g, '')) ||
+        !onlyFor.includes(parentType) ||
+        (node.parent.parent && node.parent.parent.type === 'JSXAttribute')
+      ) return;
+
+      const isStringLiteral = parentType === 'JSXExpressionContainer';
+      if (getValidation(isStringLiteral ? node.parent : node)) {
+        report(node);
+      }
+    },
+
+    JSXText(node) {
+      if (getValidation(node)) {
+        report(node);
+      }
+    },
+
+    TemplateLiteral(node) {
+      if (
+        node.parent.type !== 'JSXExpressionContainer' ||
+        (node.parent.parent && node.parent.parent.type === 'JSXAttribute')
+      ) return;
+
+      if (getValidation(node.parent)) {
+        report(node);
+      }
+    },
+  };
+};
+
+module.exports.schema = [
+  {
+    type: 'object',
+    properties: {
+      skip: {
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+      },
+    },
+    additionalProperties: false,
+  },
+];

lib/rules/no-unused-styles.js

@@ -42,7 +42,7 @@ module.exports = Components.detect((context, components) => {
     },
 
     VariableDeclarator: function (node) {
-      if (astHelpers.isStyleSheetDeclaration(node)) {
+      if (astHelpers.isStyleSheetDeclaration(node, context.settings)) {
         const styleSheetName = astHelpers.getStyleSheetName(node);
         const styles = astHelpers.getStyleDeclarations(node);