@hero-design/eslint-plugin 7.27.1

package/.eslintrc.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:eslint-plugin/recommended',
+    'plugin:node/recommended',
+  ],
+  env: {
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['tests/**/*.js'],
+      env: { jest: true },
+    },
+  ],
+};

package/.turbo/turbo-lint.log

@@ -0,0 +1,2 @@
+@hero-design/eslint-plugin:lint: cache hit, replaying output 0000ee444f6d82b6
+@hero-design/eslint-plugin:lint: $ eslint .

package/.turbo/turbo-test:ci.log

@@ -0,0 +1,10 @@
+@hero-design/eslint-plugin:test:ci: cache hit, replaying output a90258f7b0211480
+@hero-design/eslint-plugin:test:ci: $ jest --runInBand --logHeapUsage
+@hero-design/eslint-plugin:test:ci: PASS tests/lib/rules/no-deprecated-component-prop-value.js (58 MB heap size)
+@hero-design/eslint-plugin:test:ci: PASS tests/lib/rules/no-deprecated-component-prop.js (71 MB heap size)
+@hero-design/eslint-plugin:test:ci: 
+@hero-design/eslint-plugin:test:ci: Test Suites: 2 passed, 2 total
+@hero-design/eslint-plugin:test:ci: Tests:       30 passed, 30 total
+@hero-design/eslint-plugin:test:ci: Snapshots:   0 total
+@hero-design/eslint-plugin:test:ci: Time:        1.672 s, estimated 3 s
+@hero-design/eslint-plugin:test:ci: Ran all test suites.

package/README.md

@@ -0,0 +1,46 @@
+# @hero-design/eslint-plugin
+
+Hero Design's eslint plugin
+
+## Installation
+
+You'll first need to install [ESLint](https://eslint.org/):
+
+```sh
+yarn add -D eslint
+```
+
+Next, install `@hero-design/eslint-plugin`:
+
+```sh
+yarn add -D @hero-design/eslint-plugin
+```
+
+## Usage
+
+Add `@hero-design` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin` postfix:
+
+```json
+{
+  "plugins": ["@hero-design"]
+}
+```
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+  "rules": {
+    "@hero-design/rule-name": 2
+  }
+}
+```
+
+## Supported Rules
+
+| Rule                                            | Description                                 |
+| ----------------------------------------------- | ------------------------------------------- |
+| @hero-design/no-deprecated-component-prop       | Disallow deprecated component props         |
+| @hero-design/no-deprecated-component-prop-value | Disallow deprecated component prop's values |
+| @hero-design/no-deprecated-theme-key            | Disallow deprecated theme keys              |
+| @hero-design/not-recommended-import             | Disallow not recommended imports            |

package/docs/rules/no-deprecated-component-prop-value.md

@@ -0,0 +1,63 @@
+# Disallow deprecated component prop's values (no-deprecated-component-prop-value)
+
+## Rule Details
+
+This rule aims to disallow deprecated component prop's values.
+
+Examples of **incorrect** code for this rule:
+
+```js
+<Card prop="deprecatedVariant" />
+```
+
+Examples of **correct** code for this rule:
+
+```js
+<Card prop="newVariant" />
+```
+
+### Options
+
+This rule receives option including package name and component prop's values that are deprecated. For example:
+
+```json
+{
+  "package": "@hero-design/rn",
+  "components": [
+    {
+      "name": "Tag",
+      "props": [{ "name": "intent", "values": ["default"] }]
+    },
+    {
+      "name": "Alert",
+      "props": [{ "name": "variant", "values": ["default"] }]
+    },
+    {
+      "name": "Button",
+      "props": [{ "name": "variant", "values": ["basic-transparent"] }]
+    },
+    {
+      "name": "Button.Icon",
+      "props": [
+        {
+          "name": "icon",
+          "values": [
+            "carat-down-small",
+            "carat-down",
+            "carat-left-small",
+            "carat-left",
+            "carat-right-small",
+            "carat-right",
+            "carat-up-small",
+            "carat-up"
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+## When To Use It
+
+Use this rule when you want to disallow deprecated component prop's values.

package/docs/rules/no-deprecated-component-prop.md

@@ -0,0 +1,37 @@
+# Disallow deprecated component props (no-deprecated-component-prop)
+
+## Rule Details
+
+This rule aims to disallow deprecated component props.
+
+Examples of **incorrect** code for this rule:
+
+```js
+<Card deprecatedProp="any" />
+```
+
+Examples of **correct** code for this rule:
+
+```js
+<Card newProp="any" />
+```
+
+### Options
+
+This rule receives option including package name and component props that are deprecated. For example:
+
+```json
+{
+  "package": "@hero-design/rn",
+  "components": [
+    { "name": "Card", "props": ["variant"] },
+    { "name": "Switch", "props": ["size"] },
+    { "name": "Select", "props": ["onDimiss", "numberOfLines"] },
+    { "name": "Select.Multi", "props": ["onDimiss", "numberOfLines"] },
+  ],
+},
+```
+
+## When To Use It
+
+Use this rule when you want to disallow deprecated component props.

package/docs/rules/no-deprecated-theme-key.md

@@ -0,0 +1,38 @@
+# Disallow deprecated theme keys (no-deprecated-theme-key)
+
+## Rule Details
+
+This rule aims to disallow deprecated theme keys.
+
+Examples of **incorrect** code for this rule:
+
+```js
+<Card style={{ backgroundColor: theme.colors.deprecatedColor }} />
+```
+
+Examples of **correct** code for this rule:
+
+```js
+<Card style={{ backgroundColor: theme.colors."new"Color }} />
+```
+
+### Options
+
+This rule receives option including old keys and "new" keys to replace them. For example:
+
+```json
+{
+  "keys": [
+    { "old": "deprecatedKey", "new": "newKey" },
+    { "old": "colors.globalPrimary", "new": "colors.onDefaultGlobalSurface" },
+    {
+      "old": "colors.globalPrimaryBackground",
+      "new": "colors.defaultGlobalSurface"
+    }
+  ]
+}
+```
+
+## When To Use It
+
+Use this rule when you want to disallow deprecated theme keys.

package/docs/rules/not-recommended-import.md

@@ -0,0 +1,53 @@
+# Disallow not recommended imports (not-recommended-import)
+
+## Rule Details
+
+This rule aims to disallow not recommended import.
+
+Examples of **incorrect** code for this rule:
+
+```js
+import { notRecommendedUtility, DeprecatedComponent } from '@hero-design/rn';
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import { recommendedUtility, Component } from '@hero-design/rn';
+```
+
+### Options
+
+This rule receives option as an array of configs. Each config includes package name, not recommended imports and the corresponding linter messages.
+Use `"name": "default"` to disallow default import. For example:
+
+```json
+[
+  {
+    "package": "@hero-design/rn",
+    "imports": [
+      {
+        "name": "swagSystemPalette",
+        "message": "Please use colors from useTheme hook instead."
+      }
+    ]
+  },
+  {
+    "package": "@hero-design/colors",
+    "imports": [
+      {
+        "name": "default",
+        "message": "Please use colors from useTheme hook instead."
+      },
+      {
+        "name": "colorScales",
+        "message": "Please use colors from useTheme hook instead."
+      }
+    ]
+  }
+]
+```
+
+## When To Use It
+
+Use it when you want to disallow not recommended import.

package/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testRegex: '(/tests/.*)\\.(ts|tsx|js|jsx)$',
+};

package/lib/index.js

@@ -0,0 +1,387 @@
+/**
+ * @fileoverview Hero Design's eslint plugin
+ * @author Thong Quach
+ */
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const requireIndex = require('requireindex');
+
+//------------------------------------------------------------------------------
+// Plugin Definition
+//------------------------------------------------------------------------------
+
+// import all rules in lib/rules
+module.exports = {
+  rules: requireIndex(__dirname + '/rules'),
+  configs: {
+    internalRn: {
+      plugins: ['@hero-design'],
+      rules: {
+        '@hero-design/no-deprecated-theme-key': [
+          'warn',
+          {
+            keys: [
+              {
+                old: 'colors.globalPrimary',
+                new: 'colors.onDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.globalPrimaryLight',
+                new: 'colors.globalPrimaryLight',
+              },
+              {
+                old: 'colors.globalPrimaryBackground',
+                new: 'colors.defaultGlobalSurface',
+              },
+              {
+                old: 'colors.primaryLight',
+                new: 'colors.secondary',
+              },
+              {
+                old: 'colors.primaryDark',
+                new: 'colors.primary',
+              },
+              {
+                old: 'colors.primaryBackground',
+                new: 'colors.highlightedSurface',
+              },
+              {
+                old: 'colors.primaryBackgroundDark',
+                new: 'colors.mutedOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.secondaryLight',
+                new: 'colors.secondaryLight',
+              },
+              {
+                old: 'colors.secondaryBackground',
+                new: 'colors.secondaryBackground',
+              },
+              {
+                old: 'colors.infoMediumLight',
+                new: 'colors.mutedInfo',
+              },
+              {
+                old: 'colors.infoLight',
+                new: 'colors.mutedInfo',
+              },
+              {
+                old: 'colors.infoBackground',
+                new: 'colors.infoSurface',
+              },
+              {
+                old: 'colors.successLight',
+                new: 'colors.mutedSuccess',
+              },
+              {
+                old: 'colors.successDark',
+                new: 'colors.success',
+              },
+              {
+                old: 'colors.successBackground',
+                new: 'colors.successSurface',
+              },
+              {
+                old: 'colors.danger',
+                new: 'colors.error',
+              },
+              {
+                old: 'colors.dangerMediumLight',
+                new: 'colors.mutedError',
+              },
+              {
+                old: 'colors.dangerLight',
+                new: 'colors.mutedError',
+              },
+              {
+                old: 'colors.dangerBackground',
+                new: 'colors.errorSurface',
+              },
+              {
+                old: 'colors.warningLight',
+                new: 'colors.mutedWarning',
+              },
+              {
+                old: 'colors.warningDark',
+                new: 'colors.warning',
+              },
+              {
+                old: 'colors.warningBackground',
+                new: 'colors.warningSurface',
+              },
+              {
+                old: 'colors.platformBackground',
+                new: 'colors.defaultGlobalSurface',
+              },
+              {
+                old: 'colors.backgroundLight',
+                new: 'colors.neutralGlobalSurface',
+              },
+              {
+                old: 'colors.backgroundDark',
+                new: 'colors.darkGlobalSurface',
+              },
+              {
+                old: 'colors.text',
+                new: 'colors.onDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.subduedText',
+                new: 'colors.mutedOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.disabledText',
+                new: 'colors.inactiveOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.disabledLightText',
+                new: 'colors.disabledOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.invertedText',
+                new: 'colors.onDarkGlobalSurface',
+              },
+              {
+                old: 'colors.outline',
+                new: 'colors.secondaryOutline',
+              },
+              {
+                old: 'colors.archivedLight',
+                new: 'colors.disabledOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.archivedDark',
+                new: 'colors.archived',
+              },
+              {
+                old: 'colors.archivedBackground',
+                new: 'colors.archivedSurface',
+              },
+              {
+                old: 'colors.black',
+                new: 'colors.onDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.inactiveBackground',
+                new: 'colors.inactiveOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.shadow',
+                new: 'colors.secondaryOutline',
+              },
+              {
+                old: 'colors.mutedGlobalPrimary',
+                new: 'colors.mutedOnDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.onGlobalPrimary',
+                new: 'colors.onDefaultGlobalSurface',
+              },
+              {
+                old: 'colors.globalSecondary',
+                new: 'colors.secondary',
+              },
+              {
+                old: 'colors.globalPrimaryOutline',
+                new: 'colors.primaryOutline',
+              },
+              {
+                old: 'colors.globalSecondaryOutline',
+                new: 'colors.secondaryOutline',
+              },
+              {
+                old: 'colors.mutedPrimary',
+                new: 'colors.mutedPrimary',
+              },
+              {
+                old: 'colors.highlightedSecondarySurface',
+                new: 'colors.highlightedSecondarySurface',
+              },
+              {
+                old: 'colors.mutedSecondary',
+                new: 'colors.mutedSecondary',
+              },
+              {
+                old: 'colors.disabledSecondary',
+                new: 'colors.disabledSecondary',
+              },
+              {
+                old: 'colors.lightHighlightedSurface',
+                new: 'colors.highlightedSurface',
+              },
+            ],
+          },
+        ],
+        '@hero-design/no-deprecated-component-prop': [
+          'warn',
+          {
+            package: '@hero-design/rn',
+            components: [
+              { name: 'Card', props: ['variant'] },
+              { name: 'Switch', props: ['size'] },
+              { name: 'Select', props: ['onDimiss', 'numberOfLines'] },
+              { name: 'Select.Multi', props: ['onDimiss', 'numberOfLines'] },
+            ],
+          },
+        ],
+        '@hero-design/no-deprecated-component-prop-value': [
+          'warn',
+          {
+            package: '@hero-design/rn',
+            components: [
+              {
+                name: 'Tag',
+                props: [{ name: 'intent', values: ['default'] }],
+              },
+              {
+                name: 'Alert',
+                props: [{ name: 'variant', values: ['default'] }],
+              },
+              {
+                name: 'Button',
+                props: [{ name: 'variant', values: ['basic-transparent'] }],
+              },
+              {
+                name: 'Button.Icon',
+                props: [
+                  {
+                    name: 'icon',
+                    values: [
+                      'carat-down-small',
+                      'carat-down',
+                      'carat-left-small',
+                      'carat-left',
+                      'carat-right-small',
+                      'carat-right',
+                      'carat-up-small',
+                      'carat-up',
+                    ],
+                  },
+                ],
+              },
+              {
+                name: 'Button.Utility',
+                props: [
+                  {
+                    name: 'icon',
+                    values: [
+                      'carat-down-small',
+                      'carat-down',
+                      'carat-left-small',
+                      'carat-left',
+                      'carat-right-small',
+                      'carat-right',
+                      'carat-up-small',
+                      'carat-up',
+                    ],
+                  },
+                ],
+              },
+              {
+                name: 'Icon',
+                props: [
+                  {
+                    name: 'icon',
+                    values: [
+                      'carat-down-small',
+                      'carat-down',
+                      'carat-left-small',
+                      'carat-left',
+                      'carat-right-small',
+                      'carat-right',
+                      'carat-up-small',
+                      'carat-up',
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+    recommendedRn: {
+      plugins: ['@hero-design'],
+      extends: ['plugin:@hero-design/internalRn'],
+      rules: {
+        '@hero-design/not-recommended-import': [
+          'warn',
+          {
+            package: '@hero-design/rn',
+            imports: [
+              {
+                name: 'swagSystemPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'workSystemPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'jobsSystemPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'walletSystemPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'eBensSystemPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+            ],
+          },
+          {
+            package: '@hero-design/colors',
+            imports: [
+              {
+                name: 'default',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'defaultWebPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'defaultMobilePalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'mixColor',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'colorScales',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'eBensPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'jobsPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'swagPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'walletPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+              {
+                name: 'workPalette',
+                message: 'Please use colors from useTheme hook instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+};