Docs (#111)

* chore: docs

* chore: description

* chore: badge

* chore: fix

* chore: fix

* chore: fix

* chore: fix

* chore: fix

* chore: fix

* chore: fix

* chore: fix

README.md

@@ -1,19 +1,28 @@
 # @tokenstreet/eslint-plugin
 
-description
+This plugin is used for tokenstreet React Native projects.
+
+[![npm version](https://badgen.net/npm/v/@tokenstreet/eslint-plugin)](https://www.npmjs.com/package/@tokenstreet/eslint-plugin)
+[![downloads](https://badgen.net/npm/dm/@tokenstreet/eslint-plugin)](https://www.npmjs.com/package/@tokenstreet/eslint-plugin)
+[![types](https://badgen.net/npm/types/@tokenstreet/eslint-plugin)](https://www.npmjs.com/package/@tokenstreet/eslint-plugin)
+[![minzipped size](https://badgen.net/bundlephobia/minzip/@tokenstreet/eslint-plugin)](https://bundlephobia.com/result?p=@tokenstreet/eslint-plugin@latest)
+[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/tokenstreet-tech/eslint-plugin/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
+
+Most of the rules will not make sense for other projects.
+However, this repository and the associated npm package is public to make tooling easier for us.
 
 ## Installation
 
-You'll first need to install [ESLint](https://eslint.org/):
+You'll need to install [ESLint](https://eslint.org/) and the plugin:
 
 ```sh
-npm i eslint --save-dev
+yarn add -D eslint @tokenstreet/eslint-plugin
 ```
 
-Next, install `@tokenstreet/eslint-plugin`:
+or
 
 ```sh
-npm install @tokenstreet/eslint-plugin --save-dev
+npm install eslint @tokenstreet/eslint-plugin --save-dev
 ```
 
 ## Usage
@@ -26,16 +35,30 @@ Add `@tokenstreet` to the plugins section of your `.eslintrc` configuration file
 }
 ```
 
-Then configure the rules you want to use under the rules section.
+To activate all rules, use the following configuration:
+
+```json
+{
+    "extends": ["@tokenstreet/all"]
+}
+```
+
+Alternatively, individual rules can be activated or deactivated:
 
 ```json
 {
     "rules": {
-        "@tokenstreet/no-text-component": 2
+        "@tokenstreet/no-error": 2,
+        "@tokenstreet/no-logger-error-method": 2,
+        "@tokenstreet/no-text-component": 2,
+        "@tokenstreet/no-throw": 2
     }
 }
 ```
 
 ## Supported Rules
 
--   Fill in provided rules here
+-   [`no-error`](docs/rules/no-error.md)
+-   [`no-logger-error-method`](docs/rules/no-logger-error-method.md)
+-   [`no-text-component`](docs/rules/no-text-component.md)
+-   [`no-throw`](docs/rules/no-throw.md)

docs/rules/no-error.md

@@ -0,0 +1,42 @@
+# No Error (no-error)
+
+We use our `ErrorHandler` to handle warnings, errors and fatal errors,
+which reacts appropriately and unified to the severity.
+Therefore, this handler should always be used instead of throwing an error yourself.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```ts
+new Error('foo');
+new EvalError('foo');
+new InternalError('foo');
+new RangeError('foo');
+new ReferenceError('foo');
+new SyntaxError('foo');
+new TypeError('foo');
+new URIError('foo');
+throw new Error('foo');
+throw new EvalError('foo');
+throw new InternalError('foo');
+throw new RangeError('foo');
+throw new ReferenceError('foo');
+throw new SyntaxError('foo');
+throw new TypeError('foo');
+throw new URIError('foo');
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+new FooClass();
+const Error = 'foo';
+ErrorHandler.error({ code: FrontendErrorCodeEnum.BAD_HEX_COLOR, filename: 'ColorUtil.ts' });
+```
+
+## When Not To Use It
+
+For parts of the start-up process, for example our config.
+The `ErrorHandler` uses the config, and the config uses the `ErrorHandler`.
+This would create a recursive cycle.

docs/rules/no-logger-error-method.md

@@ -0,0 +1,27 @@
+# No Logger Error Method (no-logger-error-method)
+
+The logger methods `warn`, `error` and `fatal` should not be used directly.
+Instead, one should call the `ErrorHandler`, which reacts appropriately to the status and calls the `Logger`.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```ts
+Logger.warn('Logger.ts', 'message');
+Logger.error('Logger.ts', 'message');
+Logger.fatal('Logger.ts', 'message');
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+Logger.debug('Logger.ts', 'message');
+Logger.info('Logger.ts', 'message');
+```
+
+## When Not To Use It
+
+For parts of the start-up process, for example our config.
+The `Logger` uses the config, and the config uses the `Logger`.
+This would create a recursive cycle.

docs/rules/no-text-component.md

@@ -1,22 +1,34 @@
 # No Text component (no-text-component)
 
-We use our Typography component to display text, which for example preconfigures the font family and other properties.
+We use our Typography component to display text,
+which for example preconfigures the font family and other properties.
 Therefore, this component should always be used instead of the text component.
 
+The ESLint rule `no-restricted-imports` would make this rule only partially redundant,
+as it would only prohibit the `Text` component, but not `Animated.Text`.
+This is in the nature of this rule, as only the entire React Native `Animated` module can be imported.
+
+```yml
+no-restricted-imports:
+    - 2
+    - name: react-native
+      importNames:
+          - Text
+      message: The react-native <Text /> component is not allowed. Please use the custom <Typography /> component.
+```
+
 ## Rule Details
 
 Examples of **incorrect** code for this rule:
 
 ```ts
 const MyComponent = () => <Text>Some text</Text>;
+const MyComponent = () => <Animated.Text>Some text</Animated.Text>;
 ```
 
 Examples of **correct** code for this rule:
 
 ```ts
 const MyComponent = () => <Typography>Some text</Typography>;
+const MyComponent = () => <Typography.Animated>Some text</Typography.Animated>;
 ```
-
-## When Not To Use It
-
-Give a short description of when it would be appropriate to turn off this rule.

docs/rules/no-throw.md

@@ -0,0 +1,26 @@
+# No Throw (no-throw)
+
+We use our `ErrorHandler` to handle warnings, errors and fatal errors,
+which reacts appropriately and unified to the severity.
+Therefore, this handler should always be used instead of throwing an error yourself.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```ts
+throw new Error('foo');
+throw error;
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+ErrorHandler.error({ code: FrontendErrorCodeEnum.BAD_HEX_COLOR, filename: 'ColorUtil.ts' });
+```
+
+## When Not To Use It
+
+For parts of the start-up process, for example our config.
+The `ErrorHandler` uses the config, and the config uses the `ErrorHandler`.
+This would create a recursive cycle.

lib/rules/no-error.ts

@@ -1,8 +1,8 @@
 /**
  * @fileoverview
- * We use the ErrorHandler to handle warnings, errors and fatal errors,
+ * We use our `ErrorHandler` to handle warnings, errors and fatal errors,
  * which reacts appropriately and unified to the severity.
- * Therefore, this should always be used instead of throwing an error yourself.
+ * Therefore, this handler should always be used instead of throwing an error yourself.
  *
  * @author Daniel Reichhart <[email protected]>
  */

lib/rules/no-logger-error-method.ts

@@ -1,7 +1,7 @@
 /**
  * @fileoverview
- * The logger methods "warn", "error" and "fatal" should not be used directly.
- * Instead, one should call the ErrorHandler, which reacts appropriately to the status and calls the logger.
+ * The logger methods `warn`, `error` and `fatal` should not be used directly.
+ * Instead, one should call the `ErrorHandler`, which reacts appropriately to the status and calls the `Logger`.
  *
  * @author Daniel Reichhart <[email protected]>
  */

lib/rules/no-text-component.ts

@@ -1,5 +1,9 @@
 /**
- * @fileoverview We use our Typography component to display text, which for example preconfigures the font family and other properties. Therefore, this component should always be used instead of the text component.
+ * @fileoverview
+ * We use our Typography component to display text,
+ * which for example preconfigures the font family and other properties.
+ * Therefore, this component should always be used instead of the text component.
+ *
  * @author Daniel Reichhart <[email protected]>
  */
 import type { Rule } from 'eslint';

lib/rules/no-throw.ts

@@ -1,8 +1,8 @@
 /**
  * @fileoverview
- * We use the ErrorHandler to handle warnings, errors and fatal errors,
+ * We use our `ErrorHandler` to handle warnings, errors and fatal errors,
  * which reacts appropriately and unified to the severity.
- * Therefore, this should always be used instead of throwing an error yourself.
+ * Therefore, this handler should always be used instead of throwing an error yourself.
  *
  * @author Daniel Reichhart <[email protected]>
  */

tests/lib/rules/no-error.ts

@@ -1,8 +1,8 @@
 /**
  * @fileoverview
- * We use the ErrorHandler to handle warnings, errors and fatal errors,
+ * We use our `ErrorHandler` to handle warnings, errors and fatal errors,
  * which reacts appropriately and unified to the severity.
- * Therefore, this should always be used instead of throwing an error yourself.
+ * Therefore, this handler should always be used instead of throwing an error yourself.
  *
  * @author Daniel Reichhart <[email protected]>
  */
@@ -46,5 +46,9 @@ ruleTester.run('no-error', noError, {
         { code: "throw new TypeError('foo');", errors: [error] },
         { code: "throw new URIError('foo');", errors: [error] },
     ],
-    valid: ['new FooClass()', "const Error = 'foo'"],
+    valid: [
+        'new FooClass()',
+        "const Error = 'foo'",
+        "ErrorHandler.error({ code: FrontendErrorCodeEnum.BAD_HEX_COLOR, filename: 'ColorUtil.ts' });",
+    ],
 });

tests/lib/rules/no-logger-error-method.ts

@@ -1,7 +1,7 @@
 /**
  * @fileoverview
- * The logger methods "warn", "error" and "fatal" should not be used directly.
- * Instead, one should call the ErrorHandler, which reacts appropriately to the status and calls the logger.
+ * The logger methods `warn`, `error` and `fatal` should not be used directly.
+ * Instead, one should call the `ErrorHandler`, which reacts appropriately to the status and calls the `Logger`.
  *
  * @author Daniel Reichhart <[email protected]>
  */

tests/lib/rules/no-text-component.ts

@@ -26,7 +26,7 @@ const ruleTester = new eslint.RuleTester({ parserOptions: { ecmaFeatures: { jsx:
 ruleTester.run('no-text-components', noTextComponent, {
     invalid: [
         {
-            code: 'const MyComponent = () => (<Text>Some text</Text>)',
+            code: 'const MyComponent = () => <Text>Some text</Text>',
             errors: [
                 {
                     message:
@@ -36,7 +36,7 @@ ruleTester.run('no-text-components', noTextComponent, {
             ],
         },
         {
-            code: 'const MyComponent = () => (<Animated.Text>Some text</Animated.Text>)',
+            code: 'const MyComponent = () => <Animated.Text>Some text</Animated.Text>',
             errors: [
                 {
                     message:
@@ -47,7 +47,7 @@ ruleTester.run('no-text-components', noTextComponent, {
         },
     ],
     valid: [
-        'const MyComponent = () => (<Typography>Some text</Typography>)',
-        'const MyComponent = () => (<Typography.Animated>Some text</Typography.Animated>)',
+        'const MyComponent = () => <Typography>Some text</Typography>',
+        'const MyComponent = () => <Typography.Animated>Some text</Typography.Animated>',
     ],
 });

tests/lib/rules/no-throw.ts

@@ -1,8 +1,8 @@
 /**
  * @fileoverview
- * We use the ErrorHandler to handle warnings, errors and fatal errors,
+ * We use our `ErrorHandler` to handle warnings, errors and fatal errors,
  * which reacts appropriately and unified to the severity.
- * Therefore, this should always be used instead of throwing an error yourself.
+ * Therefore, this handler should always be used instead of throwing an error yourself.
  *
  * @author Daniel Reichhart <[email protected]>
  */
@@ -32,5 +32,5 @@ ruleTester.run('no-throw', noThrow, {
         { code: "throw new Error('foo');", errors: [error] },
         { code: 'throw error;', errors: [error] },
     ],
-    valid: [],
+    valid: ["ErrorHandler.error({ code: FrontendErrorCodeEnum.BAD_HEX_COLOR, filename: 'ColorUtil.ts' });"],
 });