eslint-plugin-grommet - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CONTRIBUTING.md

@@ -15,4 +15,3 @@ # Contributing
 
-1. fork the `eslint-plugin-grommet` repository
-1. clone it `git clone https://github.com/<your-username>/eslint-plugin-grommet.git`
+1. clone the `eslint-plugin-grommet` repository
 1. install dependencies using: `yarn`
@@ -26,3 +25,3 @@
 
-### Writing a new rule
+### Creating a new rule
 
@@ -49,3 +48,3 @@ To set-up a new rule, the easist approach is to use [Yeoman generator](https://www.npmjs.com/package/generator-eslint).
 
-Follow the prompts to name your rule and give a description. Once your rule has been created, you should see 3 files associated with your rule:
+Follow the prompts to name your rule and give a description. Keep in mind our [rule naming conventions](#rule-naming-conventions). Once your rule has been created, you should see 3 files associated with your rule:
 
@@ -56,20 +55,90 @@ - `lib/rules/<your-rule>.js`
 
-Write the logic for your rule in the `lib/rules/<your-rule>.js` file. For guidance, refer to Eslint's [Working with Plugins](https://eslint.org/docs/developer-guide/working-with-plugins) documentation.
+#### Rule naming conventions
 
-It may be helpful to use [Abstract Syntax Tree (AST)](https://astexplorer.net/) to find the appropriate selector for your rule. More guidance on selectors can be found under Eslint's [Selectors](https://eslint.org/docs/developer-guide/selectors) documentation.
+- If a rule is specific to a single component, it should be prefixed with that component name. For example, `image-alt-text`.
+- All rules should be lowercase with a dash (-) separate words. Component names are considered a single word. For example: `datatable-groupby-onmore`.
 
-### Rule naming conventions
+### Writing your rule
 
-- If a rule is specific to a single component, it should be prefixed with that component name. For example, `image-alt-text`.
-- All rules should be lowercase with a dash (-) separate words. Component names are considered a single word. For example: `datatable-groupBy-onMore`.
+Your rule can be found in `lib/rules/<your-rule>.js` file. Follow these steps when writing your rule:
 
-## Testing Your Rule
+1. Use [Abstract Syntax Tree (AST)]([https://astexplorer.net/](https://astexplorer.net/#/gist/8472f65002e82a8da746829c483f7d20/4f96d0f09a3de5daba8184264542e7d4fed96208) as a sandbox to write and test your rule. AST makes it easy to find the correct selector for a given element. More guidance on selectors can be found under Eslint's [Selectors](https://eslint.org/docs/developer-guide/selectors) documentation.
+2. Copy and paste the return state from your AST sandbox into the return statement of `lib/rules/<your-rule>.js`.
+3. Update `meta.docs.category` to "Best Practices" and `meta.docs.recommended` to true.
+4. Delete `meta.docs.schema`.
+5. Add `messages` to your `meta.docs` with a key that matches your rule name and a string value that serves as the message for ESLint to display when your rule fails. For example, for the rule `image-alt-text`, the following should be added:
+```
+meta: {
+   docs: {
+   ...
+      messages: {
+         'image-alt-text': 'Image requires alt text that is descriptive about what the image contains.',
+      },
+   },
+}
+```
+6. In the `context.report` of your rule, reference the message via the messageId. For example, for the rule `image-alt-text`, you should reference the messageId defined in `message.docs.messages`:
+```
+context.report({
+   node: node,
+   messageId: 'image-alt-text',
+});
+```
 
-- You can use Eslint's [RuleTester](https://eslint.org/docs/developer-guide/nodejs-api#ruletester) to test your rule. Tests are written in tests/lib/rules/<your-rule>.js. To test your rule, run:
+For additional guidance, refer to Eslint's [Working with Plugins](https://eslint.org/docs/developer-guide/working-with-plugins) documentation.
 
+### Adding your rule to the recommended configuration
+
+When a rule is part of the recommended configuration, it will automatically be enabled when a project adds `plugin:grommet/recommended` to the `extends` object of their ESLint configuration.
+
+To add your rule to the recommended configuration, go to `lib/index.js` and add your rule in alphabetical order to `configs.recommended.rules`. If your rule should cause an error, mark its value as `error`. If your rule should cause a warning, mark its value as `warn`. See [ESLint Configuring Rules](https://eslint.org/docs/user-guide/configuring/rules#configuring-rules) documentation for added guidance.
+
+For example, if your rule should cause an error, you would add the following to the config:
+
 ```
+module.exports.configs = {
+  recommended: {
+    plugins: ['grommet'],
+    rules: {
+      ...
+      'grommet/<your-rule>': 'error',
+    },
+  },
+};
+```
+
+### Testing Your Rule
+
+You can use Eslint's [RuleTester](https://eslint.org/docs/developer-guide/nodejs-api#ruletester) to test your rule. Tests are written in `tests/lib/rules/<your-rule>.js`. Tests should be added to the `tests/lib/rules/<your-rule>.js` file.
+  
+To allow the parser to accept JSX, add the following configurations to the `ruleTester` variable:
+
+```
+var ruleTester = new RuleTester({
+  parserOptions: { ecmaFeatures: { jsx: true } },
+});
+```
+  
+To check that your error is appearing properly, reference it by its `messageId`. For example, if your rule was `image-alt-text`, you would do the following:
+
+```
+invalid: [
+    {
+      code: '<Image src="/ocean.png" />',
+      errors: [
+        {
+          messageId: "image-alt-text",
+        },
+      ],
+    },
+  ],
+ ```
+
+To test your rule, run:
+
+```
 yarn test
 ```
 
-## Contributing to the Documentation
+### Contributing to the Documentation
 
@@ -76,0 +145,0 @@ If you are adding a new rule or adjusting an existing rule, ensure that the documentation for that rule is up-to-date. Documentation for a given rule is found in `docs/rules/<your-rule>.js`.

lib/index.js

@@ -24,10 +24,15 @@ /**
     rules: {
-      'grommet/button-single-kind': 'error',
-      'grommet/datatable-aria-describedby': 'error',
-      'grommet/datatable-groupby-onmore': 'error',
-      'grommet/formfield-prefer-children': 'error',
-      'grommet/image-alt-text': 'error',
-      'grommet/spinner-message': 'error',
+      'grommet/anchor-label': 'warn',
+      'grommet/button-icon-a11ytitle': 'warn',
+      'grommet/button-single-kind': 'warn',
+      'grommet/datatable-aria-describedby': 'warn',
+      'grommet/datatable-groupby-onmore': 'warn',
+      'grommet/formfield-htmlfor-id': 'warn',
+      'grommet/formfield-name': 'warn',
+      'grommet/formfield-prefer-children': 'warn',
+      'grommet/hoverindicator-onclick': 'warn',
+      'grommet/image-alt-text': 'warn',
+      'grommet/spinner-message': 'warn',
     },
   },
 };

lib/rules/button-single-kind.js

@@ -13,3 +13,3 @@ /**
   meta: {
-    type: 'problem',
+    type: 'suggestion',
     docs: {
@@ -19,2 +19,3 @@ description: 'Rule to ensure Button does not have multiple kinds applied',
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/button-single-kind.md',
     },
@@ -21,0 +22,0 @@ fixable: null,

lib/rules/datatable-aria-describedby.js

@@ -18,7 +18,8 @@ /**
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/datatable-aria-describedby.md',
     },
     fixable: null,
     messages: {
-      'datatable-aria-describedby':
-        'DataTable requires `aria-describedby` property that aligns with an `id` on a text element that describes the context of the DataTable.',
+      'datatable-aria-describedby': `DataTable requires 'aria-describedby' property. Its value should 
+      correspond with the 'id' of a text element describing the subject of the DataTable.`,
     },
@@ -25,0 +26,0 @@ },

lib/rules/datatable-groupby-onmore.js

@@ -19,7 +19,7 @@ /**
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/datatable-groupby-onmore.md',
     },
     fixable: null,
     messages: {
-      'datatable-groupby-onmore':
-        'groupBy and onMore cannot be used together, remove one or the other.',
+      'datatable-groupby-onmore': `'groupBy' and 'onMore' cannot be used together, remove one.`,
     },
@@ -26,0 +26,0 @@ },

lib/rules/formfield-prefer-children.js

@@ -13,2 +13,3 @@ /**
   meta: {
+    type: 'suggestion',
     docs: {
@@ -19,9 +20,9 @@ description:
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/formfield-prefer-children.md',
     },
     fixable: null,
     messages: {
-      'formfield-prefer-children':
-        'It is not recommended to use component property. Instead, implement input as a child of FormField.',
+      'formfield-prefer-children': `It is not recommended to use the 'component' property. Instead, 
+      implement the input as a child of FormField.`,
     },
-    type: 'suggestion',
   },
@@ -28,0 +29,0 @@

lib/rules/image-alt-text.js

@@ -19,7 +19,8 @@ /**
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/image-alt-text.md',
     },
     fixable: null,
     messages: {
-      'image-alt-text':
-        'Image requires alt text that is descriptive about what the image contains.',
+      'image-alt-text': `Image requires 'alt' text describing what the image depicts. Required for 
+      assitive technologies.`,
     },
@@ -26,0 +27,0 @@ },

lib/rules/spinner-message.js

@@ -18,7 +18,8 @@ /**
       recommended: true,
+      url: 'https://github.com/grommet/eslint-plugin-grommet/blob/master/docs/rules/spinner-message.md',
     },
     fixable: null,
     messages: {
-      'spinner-message':
-        'Spinner requires message prop that is descriptive about what is being loaded. It will be announced by screen readers. See Spinner docs: https://v2.grommet.io/spinner#message.',
+      'spinner-message': `Spinner requires the 'message' prop describing what is being loaded. 
+      The message will be announced by screen readers. See Spinner docs: https://v2.grommet.io/spinner#message.`,
     },
@@ -25,0 +26,0 @@ },

package.json

 {
   "name": "eslint-plugin-grommet",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "lib/index.js",
@@ -10,2 +10,3 @@ "description": "Lint rules to use with Grommet.",
   ],
+  "license": "MIT",
   "bugs": "https://github.com/grommet/eslint-plugin-grommet/issues",
@@ -40,3 +41,2 @@ "repository": {
   },
-  "license": "MIT",
   "pre-commit": [
@@ -43,0 +43,0 @@ "lint-fix",

README.md

@@ -21,6 +21,19 @@ # eslint-plugin-grommet
 
-Add `grommet` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+### Recommended rules
 
+To use the recommended set of rules, add `plugin:grommet/recommended` to the extends section of your `.eslintrc` configuration file. The `plugin:` prefix informs ESLint that the configuration lives within an `eslint-plugin-` package as opposed to an `eslint-config-` package.
+
+
 ```json
 {
+  "extends": ["plugin:grommet/recommended"]
+}
+```
+
+### Opting into and out of specific rules
+
+To opt-in or opt-out of specific rules, add `grommet` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
   "plugins": ["grommet"]
@@ -40,2 +53,16 @@ }
 
+### Example configuration
+
+In the configuration below, the recommended rules are all being enforced except for `formfield-prefer-children`. Be mindful when disabling rules from the recommended configuration as this may result in accessibility errors or other missed best practice guidance.
+
+```json
+{
+  "extends": ["plugin:grommet/recommended"],
+  "plugins": ["grommet"],
+  "rules": {
+    "grommet/formfield-prefer-children": 0
+  }
+}
+```
+
 ## Supported Rules
@@ -42,0 +69,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53991

increased by87.67%

Number of package files

42

increased by55.56%

Lines of code

1040

increased by98.47%

Number of lines in readme file

74

increased by57.45%

No dependency changes