[#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.

Example files in Kibana:

• src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.tsx

• x-pack/examples/alerting_example/public/alert_types/always_firing.tsx

With additional configuration:

• src/platform/plugins/private/vis_types/vega/public/data_model/utils.ts

Useful resources

• Legacy ESLint setup | typescript-eslint
• Custom rules | typescript-eslint
• Vitest | typescript-eslint
• Custom rules > Message ids | ESLint
• CJS, ESM and type definitions in package.json

QA

1. Follow the steps on this PR to test in Kibana.
2. Run the 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: 733d059

History

• 💚 Build #3564 succeeded a1ce680
• 💚 Build #3556 succeeded 5ef3f21
• 💚 Build #3492 succeeded 7a40fae
• 💚 Build #3420 succeeded b8f4827
• 💚 Build #3417 succeeded 93831a6
• 💚 Build #3399 succeeded 5248aa8

cc @weronikaolejniczak