[#187] [On Week] Improve and enrich EUI ESLint plugin

packages/eslint-plugin/.babelrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

packages/eslint-plugin/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+};

packages/eslint-plugin/.gitignore

@@ -0,0 +1,3 @@
+package.tgz
+.yarn
+lib

packages/eslint-plugin/.npmignore

@@ -1 +1,2 @@
 rules/*.test.js
+package.tgz

packages/eslint-plugin/README.md

@@ -4,8 +4,8 @@ This package contains an eslint plugin that enforces some default rules for usin
 
 ## Setup
 
-1. install `@elastic/eslint-plugin-eui` as a dev dependency
-2. extend `plugin:@elastic/eui/recommended` in your eslint config
+1. Install `@elastic/eslint-plugin-eui` as a dev dependency.
+2. Extend `plugin:@elastic/eui/recommended` in your ESLint config.
 
 ## Rules
 
@@ -15,11 +15,139 @@ This package contains an eslint plugin that enforces some default rules for usin
 
 In some cases it makes sense to disable this rule locally, such as when <kbd>cmd</kbd>+click should open the link in a new tab, but a standard click should use the `history.pushState()` API to change the URL without triggering a full page load.
 
+### `@elastic/eui/no-restricted-eui-imports`
+
+At times, we deprecate features that may need more highlighting and/or that are not possible to annotate with JSDoc `@deprecated`, e.g. JSON token imports: `@elastic/eui/dist/eui_theme_*.json` (for context: https://github.com/elastic/kibana/issues/199715#json-tokens).
+
+We don't use `no-restricted-imports` because ESLint doesn't allow multiple error levels at once and it may conflict with the consumer's existing ESLint configuration for that rule. We need to assure that our rule will produce a warning (as a recommendation).
+
+All deprecations still must follow our [deprecation process](../../wiki/eui-team-processes/deprecations.md).
+
+### `@elastic/eui/no-css-color`
+
+This rule warns engineers to not use literal css color in the codebase, particularly for CSS properties that apply color to 
+either the html element or text nodes, but rather urge users to defer to using the color tokens provided by EUI.
+
+This rule kicks in on the following JSXAttributes; `style`, `className` and `css` and supports various approaches to providing styling declarations.
+
+#### Example
+
+The following code:
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+    return (
+        <EuiText style={{ color: 'red' }}>You know, for search</EuiText>
+    )
+}
+```
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+
+    const style = {
+        color: 'red'
+    }
+
+    return (
+        <EuiText style={{ color: style.color }}>You know, for search</EuiText>
+    )
+}
+```
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+    const colorValue = '#dd4040';
+
+    return (
+        <EuiText style={{ color: colorValue }}>You know, for search</EuiText>
+    )
+}
+```
+
+will all raise an eslint report with an appropriate message of severity that matches the configuration of the rule, further more all the examples above
+will also match for when the attribute in question is `css`. The `css` attribute will also raise a report the following cases below;
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { css } from '@emotion/css';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+    return (
+        <EuiText css={css`color: '#dd4040' `}>You know, for search</EuiText>
+    )
+}
+```
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+    return (
+        <EuiText css={() => ({ color: '#dd4040' })}>You know, for search</EuiText>
+    )
+}
+```
+
+A special case is also covered for the `className` attribute, where the rule will also raise a report for the following case below;
+
+
+```
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
+
+import React from 'react';
+import { css } from '@emotion/css';
+import { EuiText } from '@elastic/eui';
+
+function MyComponent() {
+    return (
+        <EuiText className={css`color: '#dd4040'`}>You know, for search</EuiText>
+    )
+}
+```
+
+It's worth pointing out that although the examples provided are specific to EUI components, this rule applies to all JSX elements.
+
+## `@elastic/eui/prefer-css-attributes-for-eui-components`
+
+This rule warns engineers to use the `css` attribute for EUI components instead of the `style` attribute. 
+
+## Testing
+
+### Against an existing package
+
+To test the local changes to the plugin, you must:
+
+1. Run `yarn pack` in the directory.
+2. In your project's `package.json`, point `@elastic/eslint-plugin-eui` to `file:/path/to/package.tgz`.
+3. Install dependencies: `yarn kbn bootstrap --no-validate`.
+
 ## Publishing
 
 This package is published separately from the rest of EUI, as required by eslint. The code is not transpiled, so make sure to use `require()` statements rather than `import`, and once the code is updated run:
 
 1. `npm version patch|minor|major`
-2. commit version bump
-3. `npm publish` in this directory 
-4. push the version bump upstream
+2. Commit version bump.
+3. `npm publish` in this directory.
+4. Push the version bump upstream.

packages/eslint-plugin/package.json

@@ -4,15 +4,58 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/elastic/eui.git"
+    "url": "https://github.com/elastic/eui.git",
+    "directory": "packages/eslint-plugin"
   },
   "homepage": "https://github.com/elastic/eui/blob/main/packages/eslint-plugin",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.js"
+  },
   "peerDependencies": {
-    "eslint": ">=5 <7"
+    "eslint": "^8.57.0 || ^9.0.0",
+    "typescript": ">=4.8.4 <6.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.4.0"
-  }
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.26.0",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
+    "@types/cssstyle": "^2.2.4",
+    "@types/dedent": "^0.7.2",
+    "@types/jest": "^29.5.14",
+    "@types/micromatch": "^4.0.9",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
+    "@typescript-eslint/rule-tester": "^8.22.0",
+    "@typescript-eslint/typescript-estree": "^8.22.0",
+    "@typescript-eslint/utils": "^8.22.0",
+    "cssstyle": "^4.2.1",
+    "dedent": "^1.5.3",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "micromatch": "^4.0.8",
+    "rimraf": "^6.0.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "test": "jest src",
+    "build": "yarn build:clean && yarn build:compile && yarn build:compile:esm && yarn build:types",
+    "build:clean": "rimraf lib/",
+    "build:compile:esm": "tsc --project ./tsconfig.esm.json",
+    "build:compile": "NODE_ENV=production babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx",
+    "build:types": "NODE_ENV=production tsc --project tsconfig.types.json",
+    "build:pack": "yarn build && npm pack"
+  },
+  "files": [
+    "lib",
+    "!**/.tsbuildinfo",
+    "!**/*.test.js",
+    "!**/*.test.js.map",
+    "!**/*.test.d.ts"
+  ]
 }