docs: automate docs with eslint-doc-generator

README.md

@@ -1,8 +1,6 @@
+# ESLint plugin for React Native
 
-ESLint plugin for React Native
-==============================
-
-# Project update
+## Project update
 
 Dear users, first of all, thanks for using the plugin! At the moment development activity is low, I've personally not worked with React Native for many years and have little time to continue updating the plugin. I'll do my best to update the plugin to ensure compatibility with new eslint versions, but unfortunately I do not have time to asses new features/pull requests. Thanks for your understanding!
 
@@ -12,28 +10,27 @@ Dear users, first of all, thanks for using the plugin! At the moment development
 
 React Native specific linting rules for ESLint. This repository is structured like  (and contains code from) the excellent [eslint-plugin-react](http://github.com/yannickcr/eslint-plugin-react).
 
-# Installation
+## Installation
 
 Install [ESLint](https://www.github.com/eslint/eslint) either locally or globally.
 
 ```sh
-$ npm install --save-dev eslint
+npm install --save-dev eslint
 ```
 
 To make most use of this plugin, its recommended to install [eslint-plugin-react](http://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 --save-dev eslint-plugin-react
+npm install --save-dev eslint-plugin-react
 ```
 
 Similarly, install eslint-plugin-react-native
 
-
 ```sh
-$ npm install --save-dev eslint-plugin-react-native
+npm install --save-dev eslint-plugin-react-native
 ```
 
-# Configuration
+## Configuration
 
 Add `plugins` section and specify ESLint-plugin-React (optional) and ESLint-plugin-react-native as a plugin.
 
@@ -91,15 +88,25 @@ Finally, enable all of the rules that you would like to use.
 }
 ```
 
-# List of supported rules
+## List of supported rules
+
+<!-- begin auto-generated rules list -->
 
-* [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
-* [no-single-element-style-arrays](docs/rules/no-single-element-style-arrays.md): No style arrays that have 1 element only `<View style={[{height: 10}]}/>`
+💼 [Configurations](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations) enabled in.\
+🌐 Set in the `all` [configuration](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).\
+🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).
+
+| Name                                                                           | Description                                                                                                          | 💼 | 🔧 |
+| :----------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------- | :- | :- |
+| [no-color-literals](docs/rules/no-color-literals.md)                           | Detect `StyleSheet` rules and inline styles containing color literals instead of variables                           | 🌐 |    |
+| [no-inline-styles](docs/rules/no-inline-styles.md)                             | Detect JSX components with inline styles that contain literal values                                                 | 🌐 |    |
+| [no-raw-text](docs/rules/no-raw-text.md)                                       | Detect raw text outside of `Text` component                                                                          | 🌐 |    |
+| [no-single-element-style-arrays](docs/rules/no-single-element-style-arrays.md) | Disallow single element style arrays. These cause unnecessary re-renders as the identity of the array always changes | 🌐 | 🔧 |
+| [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                                                             | 🌐 | 🔧 |
+
+<!-- end auto-generated rules list -->
 
 [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
@@ -115,9 +122,10 @@ Finally, enable all of the rules that you would like to use.
 
 [bettercode-image]: https://bettercodehub.com/edge/badge/Intellicode/eslint-plugin-react-native
 [bettercode-url]: https://bettercodehub.com
-# Shareable configurations
 
-## All
+## Shareable configurations
+
+### All
 
 This plugin also exports an `all` configuration that includes every available rule.
 

docs/rules/no-color-literals.md

@@ -1,9 +1,14 @@
-# Detect color literals in styles
-When developing UIs, we often find ourselves reusing the same colors in multiple places in the UI. 
+# Detect `StyleSheet` rules and inline styles containing color literals instead of variables (`react-native/no-color-literals`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+<!-- end auto-generated rule header -->
+
+When developing UIs, we often find ourselves reusing the same colors in multiple places in the UI.
 If the colors have to be updated, they likely have to be updated across the board. So it's good practice
 to store the color definitions in variables instead of hardcoding them inside styles. This rule
-will detect color properties that have literals (ie strings) as values. 
- 
+will detect color properties that have literals (ie strings) as values.
+
 The rule looks at all properties that contain `color` (case-insensitive) in their name
 in either `StyleSheet` definitions or JSX properties that have `style` in their name.
 
@@ -51,7 +56,6 @@ The following patterns are considered warnings:
   });
 ```
 
-
 The following patterns are not considered warnings:
 
 ```js

docs/rules/no-inline-styles.md

@@ -1,7 +1,12 @@
-# Detect inline styles in components
-It's (subjectively) good practice to separate styles from the view layout, when possible. 
+# Detect JSX components with inline styles that contain literal values (`react-native/no-inline-styles`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+<!-- end auto-generated rule header -->
+
+It's (subjectively) good practice to separate styles from the view layout, when possible.
 This rule detects inline style objects when they contain literal values. If inline styles only contain
-variable values, the style is considered acceptable because it's sometimes necessary to set styles 
+variable values, the style is considered acceptable because it's sometimes necessary to set styles
 based on `state` or `props`.
 
 ## Rule Details
@@ -27,13 +32,15 @@ const Hello = React.createClass({
 ```
 
 The following pattern is not considered a warning:
+
 ```js
 const Hello = React.createClass({
   render: function() {
     return <Text style={styles.name}>Hello {this.props.name}</Text>;
   }
 });
 ```
+
 Any attribute that contains the word `style` is checked for inline object literals. Both of the following
 are considered warnings:
 

docs/rules/no-raw-text.md

@@ -1,4 +1,9 @@
-# Detect raw text outside of Text component
+# Detect raw text outside of `Text` component (`react-native/no-raw-text`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+<!-- end auto-generated rule header -->
+
 All strings in React Native should be wrapped with a Text component.
 
 ## Rule Details
@@ -25,6 +30,8 @@ const text = 'some text';
 <View><Text>{`${text}`}</Text></View>
 ```
 
-#### This rule has an object option:
+## Options
+
+This rule has an object option:
 
 - "skip" – allow to skip checking for the array of custom components

docs/rules/no-single-element-style-arrays.md

@@ -1,4 +1,10 @@
-# No Single Element Style Arrays are allowed
+# Disallow single element style arrays. These cause unnecessary re-renders as the identity of the array always changes (`react-native/no-single-element-style-arrays`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
 
 These cause unnecessary re-renders as each time the array's identity changes.
 

docs/rules/no-unused-styles.md

@@ -1,4 +1,9 @@
-# Detect unused StyleSheet rules in React components
+# Detect `StyleSheet` rules which are not used in your React components (`react-native/no-unused-styles`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+<!-- end auto-generated rule header -->
+
 When working on a component over a longer period of time, you could end up with unused StyleSheet rules that slipped in over time but are forgotten as you continue to improve your UX/UI design.
 
 ## Rule Details
@@ -18,6 +23,7 @@ const Hello = React.createClass({
 ```
 
 The following patterns are not considered warnings:
+
 ```js
 const styles = StyleSheet.create({
   name: {}
@@ -29,6 +35,7 @@ const Hello = React.createClass({
   }
 });
 ```
+
 The most common case.
 
 ```js
@@ -44,6 +51,7 @@ const Hello = React.createClass({
   }
 });
 ```
+
 Style rules referenced in a Style array are marked as used.
 
 ```js
@@ -57,6 +65,7 @@ const Hello = React.createClass({
   }
 });
 ```
+
 Style rules referenced in a conditional and logical expressions are marked as used.
 
 ```js
@@ -95,6 +104,7 @@ const Hello = React.createClass({
   }
 });
 ```
+
 Rules are also marked as used when they are used in tags that contain the word `style`.
 
 ```js
@@ -113,11 +123,13 @@ const Welcome = React.createClass({
   }
 });
 ```
+
 Usage is tracked over multiple components in the same file.
 
 ```js
 const styles = StyleSheet.create({
   text: {}
 });
 ```
+
 There should be at least one component, so centralized `StyleSheets` are not checked for unused rules.

docs/rules/sort-styles.md

@@ -1,4 +1,11 @@
-# Require StyleSheet keys to be sorted
+# Require style definitions to be sorted alphabetically (`react-native/sort-styles`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
 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.

docs/rules/split-platform-components.md

@@ -1,11 +1,19 @@
-# Enforce using platform specific filenames when necessary
+# Enforce using platform specific filenames when necessary (`react-native/split-platform-components`)
+
+💼 This rule is enabled in the 🌐 `all` [config](https://github.com/Intellicode/eslint-plugin-react-native#shareable-configurations).
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
 When working on a project that supports both Android and IOS, you have to make sure that you
 use platform specific filenames when you use platform specific components to produce the correct
 bundle per platform.
 
 The following patterns are considered warnings:
 
 filename: Hello.js
+
 ```js
 const React = require('react-native');
 const {
@@ -20,6 +28,7 @@ const Hello = React.createClass({
 ```
 
 filename: Hello.js
+
 ```js
 const React = require('react-native');
 const {
@@ -34,6 +43,7 @@ const Hello = React.createClass({
 ```
 
 Any filename
+
 ```js
 const React = require('react-native');
 const {
@@ -53,6 +63,7 @@ const Hello = React.createClass({
 ```
 
 Using `import` declaration pattern: Hello.js
+
 ```js
 import React from 'react'
 import { ActivityIndicatiorIOS } from 'react-native'
@@ -65,6 +76,7 @@ export default function Hello() {
 The following patterns are not considered warnings:
 
 filename: Hello.ios.js
+
 ```js
 const React = require('react-native');
 const {
@@ -79,6 +91,7 @@ const Hello = React.createClass({
 ```
 
 filename: Hello.android.js
+
 ```js
 const React = require('react-native');
 const {
@@ -93,6 +106,7 @@ const Hello = React.createClass({
 ```
 
 Using `import` declaration pattern: Hello.ios.js
+
 ```js
 import React from 'react'
 import { ActivityIndicatiorIOS } from 'react-native'

lib/rules/no-color-literals.js

@@ -57,6 +57,9 @@ const create = Components.detect((context) => {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Detect `StyleSheet` rules and inline styles containing color literals instead of variables',
+    },
     schema: [],
   },
   create,

lib/rules/no-inline-styles.js

@@ -44,6 +44,9 @@ const create = Components.detect((context) => {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Detect JSX components with inline styles that contain literal values',
+    },
     schema: [],
   },
   create,

lib/rules/no-raw-text.js

@@ -90,6 +90,9 @@ function create(context) {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Detect raw text outside of `Text` component',
+    },
     schema: [
       {
         type: 'object',

lib/rules/no-unused-styles.js

@@ -64,6 +64,9 @@ const create = Components.detect((context, components) => {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Detect `StyleSheet` rules which are not used in your React components',
+    },
     schema: [],
   },
   create,

lib/rules/sort-styles.js

@@ -134,6 +134,9 @@ function create(context) {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Require style definitions to be sorted alphabetically',
+    },
     fixable: 'code',
     schema: [
       {

lib/rules/split-platform-components.js

@@ -79,6 +79,9 @@ function create(context) {
 
 module.exports = {
   meta: {
+    docs: {
+      description: 'Enforce using platform specific filenames when necessary',
+    },
     fixable: 'code',
     schema: [{
       type: 'object',