diff --git a/.betterer.eslint.config.js b/.betterer.eslint.config.js
index 80231c4a1e9..8d742ae5187 100644
--- a/.betterer.eslint.config.js
+++ b/.betterer.eslint.config.js
@@ -10,6 +10,7 @@ const testingLibraryPlugin = require('eslint-plugin-testing-library');
const grafanaConfig = require('@grafana/eslint-config/flat');
const grafanaPlugin = require('@grafana/eslint-plugin');
+const grafanaI18nPlugin = require('@grafana/i18n/eslint-plugin');
// Include the Grafana config and remove the rules,
// as we just want to pull in all of the necessary configuration but not run the rules
@@ -65,6 +66,7 @@ module.exports = [
'no-barrel-files': barrelPlugin,
'@grafana': grafanaPlugin,
'testing-library': testingLibraryPlugin,
+ '@grafana/i18n': grafanaI18nPlugin,
},
linterOptions: {
// This reports unused disable directives that we can clean up but
diff --git a/eslint.config.js b/eslint.config.js
index 6c427e66fb6..d4da985724c 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,6 +13,7 @@ const unicornPlugin = require('eslint-plugin-unicorn');
const grafanaConfig = require('@grafana/eslint-config/flat');
const grafanaPlugin = require('@grafana/eslint-plugin');
+const grafanaI18nPlugin = require('@grafana/i18n/eslint-plugin');
const bettererConfig = require('./.betterer.eslint.config');
const getEnvConfig = require('./scripts/webpack/env-util');
@@ -294,6 +295,7 @@ module.exports = [
name: 'grafana/i18n-overrides',
plugins: {
'@grafana': grafanaPlugin,
+ '@grafana/i18n': grafanaI18nPlugin,
},
files: [
'public/app/!(plugins)/**/*.{ts,tsx,js,jsx}',
@@ -308,8 +310,8 @@ module.exports = [
'**/mock*.{ts,tsx}',
],
rules: {
- '@grafana/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$', 'use[A-Z].*'] }],
- '@grafana/no-translation-top-level': 'error',
+ '@grafana/i18n/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$', 'use[A-Z].*'] }],
+ '@grafana/i18n/no-translation-top-level': 'error',
},
},
{
diff --git a/packages/grafana-eslint-rules/README.md b/packages/grafana-eslint-rules/README.md
index 1571403244a..1fb043a4ec0 100644
--- a/packages/grafana-eslint-rules/README.md
+++ b/packages/grafana-eslint-rules/README.md
@@ -111,184 +111,3 @@ const getStyles = (theme: GrafanaTheme2) => ({
### `theme-token-usage`
Used to find all instances of `theme` tokens being used in the codebase and emit the counts as metrics. Should **not** be used as an actual lint rule!
-
-### `no-untranslated-strings`
-
-Check if strings are marked for translation inside JSX Elements, in certain JSX props, and in certain object properties.
-
-### Options
-
-#### `forceFix`
-
-Allows specifying directories that, if the file is present within, then the rule will automatically fix the errors. This is primarily a workaround to allow for automatic mark up of new violations as the rule evolves.
-
-#### Example:
-
-```ts
-{
- '@grafana/no-untranslated-strings': ['error', { forceFix: ['app/features/some-feature'] }],
-}
-```
-
-#### `calleesToIgnore`
-
-Allows specifying regexes for methods that should be ignored when checking if object properties are untranslated.
-
-This is particularly useful to exclude references to properties such as `label` inside `css()` calls.
-
-#### Example:
-
-```ts
-{
- '@grafana/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$'] }],
-}
-
-// The below would not be reported as an error
-const foo = css({
- label: 'test',
-});
-
-// The below would still be reported as an error
-const bar = {
- label: 'test',
-};
-```
-
-#### JSXText
-
-```tsx
-// Bad ❌
-
- Copied
-
-
-// Good ✅
-
- Copied
-
-```
-
-#### JSXAttributes
-
-```tsx
-// Bad ❌
-
-
-// Good ✅
-
-```
-
-#### Object properties
-
-```tsx
-// Bad ❌
-const someConfig = {
- label: 'Some label',
-};
-
-// Good ✅
-const getSomeConfig = () => ({
- label: t('some.key.label', 'Some label'),
-});
-```
-
-#### Passing variables to translations
-
-```tsx
-// Bad ❌
-const SearchTitle = ({ term }) =>
Results for {term}
;
-
-// Good ✅
-const SearchTitle = ({ term }) => Results for {{ term }};
-
-// Good ✅ (if you need to interpolate variables inside nested components)
-const SearchTerm = ({ term }) => {term};
-const SearchTitle = ({ term }) => (
-
- Results for
-
-);
-
-// Good ✅ (if you need to interpolate variables and additional translated strings inside nested components)
-const SearchTitle = ({ term }) => (
-
- Results for {'{{ myVariable }}'} and this translated text is also in green
-
-);
-```
-
-#### How to translate props or attributes
-
-This rule checks if a string is wrapped up by the `Trans` tag, or if certain props contain untranslated strings.
-We ask for such props to be translated with the `t()` function.
-
-The below props are checked for untranslated strings:
-
-- `label`
-- `description`
-- `placeholder`
-- `aria-label`
-- `title`
-- `subTitle`
-- `text`
-- `tooltip`
-- `message`
-- `name`
-
-```tsx
-// Bad ❌
-;
-
-// Good ✅
-const placeholder = t('form.username-placeholder', 'Username');
-return ;
-```
-
-Check more info about how translations work in Grafana in [Internationalization.md](https://github.com/grafana/grafana/blob/main/contribute/internationalization.md)
-
-### `no-translation-top-level`
-
-Ensure that `t()` translation method is not used at the top level of a file, outside of a component of method.
-This is to prevent calling the translation method before it's been instantiated.
-
-This does not cause an error if a file is lazily loaded, but refactors can cause errors, and it can cause problems in tests.
-Fix the
-
-```tsx
-// Bad ❌
-const someTranslatedText = t('some.key', 'Some text');
-const SomeComponent = () => {
- return ;
-};
-
-// Good ✅
-const SomeComponent = () => {
- const someTranslatedText = t('some.key', 'Some text');
- return ;
-};
-
-// Bad ❌
-const someConfigThatHasToBeShared = [{ foo: t('some.key', 'Some text') }];
-const SomeComponent = () => {
- return (
-
- );
-};
-```
diff --git a/packages/grafana-eslint-rules/index.cjs b/packages/grafana-eslint-rules/index.cjs
index c3f69b593e5..2babd165372 100644
--- a/packages/grafana-eslint-rules/index.cjs
+++ b/packages/grafana-eslint-rules/index.cjs
@@ -1,8 +1,6 @@
const noAriaLabelSelectors = require('./rules/no-aria-label-e2e-selectors.cjs');
const noBorderRadiusLiteral = require('./rules/no-border-radius-literal.cjs');
const noUnreducedMotion = require('./rules/no-unreduced-motion.cjs');
-const noUntranslatedStrings = require('./rules/no-untranslated-strings.cjs');
-const noTranslationTopLevel = require('./rules/no-translation-top-level.cjs');
const themeTokenUsage = require('./rules/theme-token-usage.cjs');
const noRestrictedImgSrcs = require('./rules/no-restricted-img-srcs.cjs');
@@ -12,8 +10,6 @@ module.exports = {
'no-aria-label-selectors': noAriaLabelSelectors,
'no-border-radius-literal': noBorderRadiusLiteral,
'theme-token-usage': themeTokenUsage,
- 'no-untranslated-strings': noUntranslatedStrings,
- 'no-translation-top-level': noTranslationTopLevel,
'no-restricted-img-srcs': noRestrictedImgSrcs,
},
};
diff --git a/packages/grafana-i18n/package.json b/packages/grafana-i18n/package.json
index e24446833ab..4bedfae9dcc 100644
--- a/packages/grafana-i18n/package.json
+++ b/packages/grafana-i18n/package.json
@@ -26,6 +26,10 @@
"./internal": {
"import": "./src/internal/index.ts",
"require": "./src/internal/index.ts"
+ },
+ "./eslint-plugin": {
+ "import": "./src/eslint/index.cjs",
+ "require": "./src/eslint/index.cjs"
}
},
"publishConfig": {
diff --git a/packages/grafana-i18n/src/eslint/README.md b/packages/grafana-i18n/src/eslint/README.md
new file mode 100644
index 00000000000..4fb1abdf8f6
--- /dev/null
+++ b/packages/grafana-i18n/src/eslint/README.md
@@ -0,0 +1,185 @@
+# Grafana Internationalization ESLint Rules
+
+This package also contains custom i18n eslint rules for use within the Grafana codebase and plugins.
+
+## Rules
+
+### `no-untranslated-strings`
+
+Check if strings are marked for translation inside JSX Elements, in certain JSX props, and in certain object properties.
+
+### Options
+
+#### `forceFix`
+
+Allows specifying directories that, if the file is present within, then the rule will automatically fix the errors. This is primarily a workaround to allow for automatic mark up of new violations as the rule evolves.
+
+#### Example:
+
+```ts
+{
+ '@grafana/i18n/no-untranslated-strings': ['error', { forceFix: ['app/features/some-feature'] }],
+}
+```
+
+#### `calleesToIgnore`
+
+Allows specifying regexes for methods that should be ignored when checking if object properties are untranslated.
+
+This is particularly useful to exclude references to properties such as `label` inside `css()` calls.
+
+#### Example:
+
+```ts
+{
+ '@grafana/i18n/no-untranslated-strings': ['error', { calleesToIgnore: ['^css$'] }],
+}
+
+// The below would not be reported as an error
+const foo = css({
+ label: 'test',
+});
+
+// The below would still be reported as an error
+const bar = {
+ label: 'test',
+};
+```
+
+#### JSXText
+
+```tsx
+// Bad ❌
+
+ Copied
+
+
+// Good ✅
+
+ Copied
+
+```
+
+#### JSXAttributes
+
+```tsx
+// Bad ❌
+
+
+// Good ✅
+
+```
+
+#### Object properties
+
+```tsx
+// Bad ❌
+const someConfig = {
+ label: 'Some label',
+};
+
+// Good ✅
+const getSomeConfig = () => ({
+ label: t('some.key.label', 'Some label'),
+});
+```
+
+#### Passing variables to translations
+
+```tsx
+// Bad ❌
+const SearchTitle = ({ term }) =>
Results for {term}
;
+
+// Good ✅
+const SearchTitle = ({ term }) => Results for {{ term }};
+
+// Good ✅ (if you need to interpolate variables inside nested components)
+const SearchTerm = ({ term }) => {term};
+const SearchTitle = ({ term }) => (
+
+ Results for
+
+);
+
+// Good ✅ (if you need to interpolate variables and additional translated strings inside nested components)
+const SearchTitle = ({ term }) => (
+
+ Results for {'{{ myVariable }}'} and this translated text is also in green
+
+);
+```
+
+#### How to translate props or attributes
+
+This rule checks if a string is wrapped up by the `Trans` tag, or if certain props contain untranslated strings.
+We ask for such props to be translated with the `t()` function.
+
+The below props are checked for untranslated strings:
+
+- `label`
+- `description`
+- `placeholder`
+- `aria-label`
+- `title`
+- `subTitle`
+- `text`
+- `tooltip`
+- `message`
+- `name`
+
+```tsx
+// Bad ❌
+;
+
+// Good ✅
+const placeholder = t('form.username-placeholder', 'Username');
+return ;
+```
+
+Check more info about how translations work in Grafana in [Internationalization.md](https://github.com/grafana/grafana/blob/main/contribute/internationalization.md)
+
+### `no-translation-top-level`
+
+Ensure that `t()` translation method is not used at the top level of a file, outside of a component of method.
+This is to prevent calling the translation method before it's been instantiated.
+
+This does not cause an error if a file is lazily loaded, but refactors can cause errors, and it can cause problems in tests.
+
+```tsx
+// Bad ❌
+const someTranslatedText = t('some.key', 'Some text');
+const SomeComponent = () => {
+ return ;
+};
+
+// Good ✅
+const SomeComponent = () => {
+ const someTranslatedText = t('some.key', 'Some text');
+ return ;
+};
+
+// Bad ❌
+const someConfigThatHasToBeShared = [{ foo: t('some.key', 'Some text') }];
+const SomeComponent = () => {
+ return (
+