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

[weronikaolejniczak]

Summary

Closes #187

This PR is part of an On Week initiative to improve the sate of the EUI ESLint plugin and enrich with useful rules.

The changes done:

• migrated the package to ESM and TypeScript
• added no-restricted-eui-imports rule to display a warning on JSON token imports
• moved no-css-color and prefer-css-attribute-for-eui-components from kbn-eslint-plugin-css
  • no-css-color rule: highlights hard-coded colors
  • prefer-css-attribute-for-eui-components rule: recommends css use over style (inline styles)

Potential future changes:

• migrate to Vitest (RuleTester) for out-of-the-box ESM and TS support, and superior performance to Jest
• create a CI job to run the tests for when the package has been changed
• implement design tokens specific rules

no-restricted-eui-imports

I added a new rule to our ESLint plugin, no-restricted-eui-imports, that won't conflict with the inbuilt no-restricted-imports rule and will allow us to define several error levels at once. I.e. we want some imports to be marked as warning and not an error, as it's done in Kibana.

Context:

• Previous Kibana PR
• Slack thread

The JSON token imports in @kbn/eslint/module_migration need to be removed as well:

https://github.com/elastic/kibana/blob/212b1926743ca5821992c2877d9c68f621e1875e/packages/kbn-eslint-config/.eslintrc.js#L131-L140

no-css-color and prefer-css-attribute-for-eui-components from kbn-eslint-plugin-css

Written by @eokoneyo. We agreed to move the rules to EUI repo, as the rules concern EUI components and may benefit other EUI consumers like Cloud UI.

[TESTING WIP]

Useful resources

• Legacy ESLint setup | typescript-eslint
• Custom rules | typescript-eslint
• Vitest | typescript-eslint
• Custom rules > Message ids | ESLint

QA

1. Pack the ESLint plugin: yarn workspace @elastic/eslint-plugin-eui pack
2. Go to Kibana and point the EUI ESLint plugin to the tarball: "@elastic/eslint-plugin-eui": "file:path/to/the/package.tgz"
3. Install dependencies in Kibana and bootstrap: yarn kbn bootstrap --no-validate

Unit tests: yarn workspace @elastic/eslint-plugin-eui test

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8304/
• Storybook: https://eui.elastic.co/pr_8304/storybook
• New docs: https://eui.elastic.co/pr_8304/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 5248aa8

History

• 💔 Build #3396 failed 7fc8386
• 💔 Build #3395 failed d69e9c5
• 💚 Build #3394 succeeded c6b9ddf
• 💚 Build #3393 succeeded f5e62c1