Add eslint-plugin-formatjs

.eslintrc.json

@@ -7,6 +7,12 @@
         "plugin:prettier/recommended",
         "plugin:react/jsx-runtime"
     ],
+    "plugins": [
+        "formatjs"
+    ],
+    "settings": {
+        "formatjs": { "additionalFunctionNames": ["defineTranslations"] }
+    },
     "parserOptions": {
         "project": "./tsconfig.json"
     },
@@ -19,6 +25,24 @@
         "jest.setup.ts"
     ],
     "rules": {
+        // start of formatjs/recommended profile from next version
+        "formatjs/no-offset": "error",
+        //"formatjs/enforce-default-message": ["error", "literal"],
+        //"formatjs/enforce-description": ["error", "literal"],
+        "formatjs/enforce-placeholders": "error",
+        "formatjs/no-emoji": "error",
+        "formatjs/no-multiple-whitespaces": "error",
+        "formatjs/no-multiple-plurals": "error",
+        "formatjs/no-complex-selectors": ["error", { "limit": 20 }],
+        "formatjs/no-useless-message": "error",
+        "formatjs/prefer-pound-in-plural": "error",
+        //"formatjs/no-missing-icu-plural-one-placeholders": "error", //scan license header?...
+        "formatjs/enforce-plural-rules": ["error", { "one": true, "other": true }],
+        //"formatjs/no-literal-string-in-jsx": ["warn", { "props": { "include": [["*", "{label,placeholder,title}"]] } }],
+        "formatjs/blocklist-elements": ["error", ["selectordinal"]],
+        // end of formatjs/recommended profile
+        "formatjs/no-invalid-icu": "error",
+        "formatjs/prefer-formatted-message": "warn",
         "prettier/prettier": "warn",
         "curly": "error",
         "no-console": "off",

.gitignore

@@ -1,4 +1,5 @@
 /vite.config.mts-timestamp-*
+/vite-config-mts-timestamp-*.js
 /coverage
 /dist
 /node_modules

package.json

@@ -111,6 +111,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-flowtype": "^8.0.3",
+        "eslint-plugin-formatjs": "^4.13.3",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-prettier": "^4.2.1",

src/components/inputs/reactHookForm/agGridTable/csvUploader/CsvUploader.tsx

@@ -152,7 +152,9 @@ export function CsvUploader({
             <Dialog open={isConfirmationPopupOpen} aria-labelledby="dialog-confirmation-csv-data">
                 <DialogTitle id="dialog-confirmation-csv-data">Confirmation</DialogTitle>
                 <DialogContent>
-                    <DialogContentText>{intl.formatMessage({ id: 'keepCSVDataMessage' })}</DialogContentText>
+                    <DialogContentText>
+                        <FormattedMessage id="keepCSVDataMessage" />
+                    </DialogContentText>
                 </DialogContent>
                 <DialogActions>
                     <CancelButton onClick={handleCancelDialog} />

src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx

@@ -9,9 +9,8 @@ import { useCallback, useEffect, useMemo } from 'react';
 import Grid from '@mui/material/Grid';
 import { Autocomplete, FormControl, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material';
 import { ValueEditorProps } from 'react-querybuilder';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useValid } from './hooks/useValid';
-
 import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
@@ -101,7 +100,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     >
                         {PROPERTY_VALUE_OPERATORS.map((operator) => (
                             <MenuItem key={operator.customName} value={operator.customName}>
-                                {intl.formatMessage({ id: operator.label })}
+                                <FormattedMessage id={operator.label} />
                             </MenuItem>
                         ))}
                     </Select>

src/components/inputs/reactQueryBuilder/compositeRuleEditor/RuleValueEditor.tsx

@@ -6,7 +6,7 @@
  */
 import { ValueEditorProps } from 'react-querybuilder';
 import { Grid, MenuItem, Select, Typography } from '@mui/material';
-import { useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { CompositeRule, OperatorOption } from '../../../filter/expert/expertFilter.type';
 
 const styles = {
@@ -31,7 +31,6 @@ export function RuleValueEditor(props: RuleValueEditorProps) {
         rule,
         handleOnChangeRule,
     } = props;
-    const intl = useIntl();
 
     // set operator as the previous in rule if exists, otherwise the first operator in schema is selected
     const operator = rule?.operator ?? (fieldData.operators as OperatorOption[])?.map((op) => op.name)[0];
@@ -54,7 +53,9 @@ export function RuleValueEditor(props: RuleValueEditorProps) {
     return (
         <Grid container paddingTop={1}>
             <Grid container item xs={4} sx={styles.gridItem}>
-                <Typography>{intl.formatMessage({ id: fieldData.label })}</Typography>
+                <Typography>
+                    <FormattedMessage id={fieldData.label} />
+                </Typography>
             </Grid>
             <Grid container item xs={2.5} sx={styles.gridItem} paddingLeft={1}>
                 <Select
@@ -67,7 +68,7 @@ export function RuleValueEditor(props: RuleValueEditorProps) {
                 >
                     {(fieldData.operators as OperatorOption[])?.map((option) => (
                         <MenuItem key={option.name} value={option.name}>
-                            {intl.formatMessage({ id: option.label })}
+                            <FormattedMessage id={option.label} />
                         </MenuItem>
                     ))}
                 </Select>

src/components/topBar/UserInformationDialog.tsx

@@ -99,8 +99,12 @@ function UserInformationDialog({ openDialog, user, onClose }: UserInformationDia
                             <Typography>
                                 {userDetails?.maxAllowedCases}
                                 <Box component="span" sx={styles.usedTopography}>
-                                    ( <FormattedMessage id="user-information-dialog/used" />:
-                                    {` ${userDetails?.numberCasesUsed}`} )
+                                    (
+                                    <FormattedMessage
+                                        id="user-information-dialog/used"
+                                        values={{ nb: userDetails?.numberCasesUsed }}
+                                    />
+                                    )
                                 </Box>
                             </Typography>
                         </Grid>

src/index.ts

@@ -10,5 +10,6 @@ export * from './hooks';
 export * from './redux';
 export * from './services';
 export * from './utils';
+export * from './translations/utils';
 export * from './translations/en';
 export * from './translations/fr';

src/translations/en/cardErrorBoundaryEn.ts

@@ -1,12 +1,18 @@
-/**
+/*
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-export const cardErrorBoundaryEn = {
-    'card_error_boundary/title': 'Sorry, unexpected error :(',
-    'card_error_boundary/content': 'Please reload, or close and reopen this application, or contact support.',
-    'card_error_boundary/expandederrorheader': 'Error message (and see more information in the developper console):',
-};
+import { defineMessages } from '../utils';
+
+export const cardErrorBoundaryEn = defineMessages({
+    'card_error_boundary/title': { defaultMessage: 'Sorry, unexpected error :(' },
+    'card_error_boundary/content': {
+        defaultMessage: 'Please reload, or close and reopen this application, or contact support.',
+    },
+    'card_error_boundary/expandederrorheader': {
+        defaultMessage: 'Error message (and see more information in the developer console):',
+    },
+});

src/translations/en/commonButtonEn.ts

@@ -4,10 +4,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const commonButtonEn = {
-    cancel: 'Cancel',
-    validate: 'Validate',
-    'button.changeType': 'Change',
-    'button.changeOperator': 'Change',
-};
+export const commonButtonEn = defineMessages({
+    cancel: { defaultMessage: 'Cancel' },
+    validate: { defaultMessage: 'Validate' },
+    'button.changeType': { defaultMessage: 'Change' },
+    'button.changeOperator': { defaultMessage: 'Change' },
+});

src/translations/en/componentsEn.ts

@@ -4,8 +4,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const componentsEn = {
-    notBuiltNodeTooltip: 'Value from last built node in current branch',
-    builtNodeTooltip: 'Current value taking into account all applied modifications',
-};
+export const componentsEn = defineMessages({
+    notBuiltNodeTooltip: { defaultMessage: 'Value from last built node in current branch' },
+    builtNodeTooltip: { defaultMessage: 'Current value taking into account all applied modifications' },
+});

src/translations/en/csvEn.ts

@@ -4,14 +4,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const csvEn = {
-    ImportCSV: 'Import CSV',
-    noDataInCsvFile: 'No data found in this file',
-    wrongCsvHeadersError:
-        'This CSV file has the wrong headers. Use Generate CSV Skeleton button to get supported CSV format',
-    keepCSVDataMessage: 'Do you want to replace or add the new data to the current list ?',
-    GenerateCSV: 'Generate CSV skeleton',
-    UploadCSV: 'Upload CSV',
-    uploadMessage: ' No file selected',
-};
+export const csvEn = defineMessages({
+    ImportCSV: { defaultMessage: 'Import CSV' },
+    noDataInCsvFile: { defaultMessage: 'No data found in this file' },
+    wrongCsvHeadersError: {
+        defaultMessage:
+            'This CSV file has the wrong headers. Use Generate CSV Skeleton button to get supported CSV format',
+    },
+    keepCSVDataMessage: { defaultMessage: 'Do you want to replace or add the new data to the current list?' },
+    GenerateCSV: { defaultMessage: 'Generate CSV skeleton' },
+    UploadCSV: { defaultMessage: 'Upload CSV' },
+    uploadMessage: { defaultMessage: 'No file selected' },
+});

src/translations/en/descriptionEn.ts

@@ -4,11 +4,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const descriptionEn = {
-    description: 'Description',
-    descriptionProperty: 'Description',
-    descriptionModificationError: 'An error occurred while editing the description',
-    descriptionLimitError: 'Description exceeds character limit',
-    AddDescription: 'Add a description',
-};
+export const descriptionEn = defineMessages({
+    description: { defaultMessage: 'Description' },
+    descriptionProperty: { defaultMessage: 'Description' },
+    descriptionModificationError: { defaultMessage: 'An error occurred while editing the description' },
+    descriptionLimitError: { defaultMessage: 'Description exceeds character limit' },
+    AddDescription: { defaultMessage: 'Add a description' },
+});

src/translations/en/directoryItemsInputEn.ts

@@ -4,7 +4,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const directoryItemsInputEn = {
-    'directory_items_input/ElementAlreadyUsed': 'This element is already used',
-};
+export const directoryItemsInputEn = defineMessages({
+    'directory_items_input/ElementAlreadyUsed': { defaultMessage: 'This element is already used' },
+});

src/translations/en/elementSearchEn.ts

@@ -4,8 +4,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const elementSearchEn = {
-    'element_search/label': 'Search for an element',
-    'element_search/noResult': 'No result',
-};
+export const elementSearchEn = defineMessages({
+    'element_search/label': { defaultMessage: 'Search for an element' },
+    'element_search/noResult': { defaultMessage: 'No result' },
+});

src/translations/en/equipmentSearchEn.ts

@@ -4,24 +4,25 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const equipmentSearchEn = {
-    'equipment_search/label': 'Search for an equipment',
-    'equipment_search/switchTag': 'SWITCH',
-    'equipment_search/busbarSectionTag': 'BBS',
-    'equipment_search/lineTag': 'LINE',
-    'equipment_search/2wtTag': '2W TRANSFO',
-    'equipment_search/3wtTag': '3W TRANSFO',
-    'equipment_search/generatorTag': 'GENERATOR',
-    'equipment_search/batteryTag': 'BATTERY',
-    'equipment_search/loadTag': 'LOAD',
-    'equipment_search/shuntTag': 'SHUNT',
-    'equipment_search/svcTag': 'SVC',
-    'equipment_search/hvdcLineTag': 'HVDC LINE',
-    'equipment_search/hvdcLineVscTag': 'HVDC LINE (VSC)',
-    'equipment_search/hvdcLineLccTag': 'HVDC LINE (LCC)',
-    'equipment_search/hvdcStationTag': 'HVDC STATION',
-    'equipment_search/voltageLevelTag': 'VOLTAGE LEVEL',
-    'equipment_search/substationTag': 'SUBSTATION',
-    'equipment_search/busTag': 'BUS',
-};
+export const equipmentSearchEn = defineMessages({
+    'equipment_search/label': { defaultMessage: 'Search for an equipment' },
+    'equipment_search/switchTag': { defaultMessage: 'SWITCH' },
+    'equipment_search/busbarSectionTag': { defaultMessage: 'BBS' },
+    'equipment_search/lineTag': { defaultMessage: 'LINE' },
+    'equipment_search/2wtTag': { defaultMessage: '2W TRANSFO' },
+    'equipment_search/3wtTag': { defaultMessage: '3W TRANSFO' },
+    'equipment_search/generatorTag': { defaultMessage: 'GENERATOR' },
+    'equipment_search/batteryTag': { defaultMessage: 'BATTERY' },
+    'equipment_search/loadTag': { defaultMessage: 'LOAD' },
+    'equipment_search/shuntTag': { defaultMessage: 'SHUNT' },
+    'equipment_search/svcTag': { defaultMessage: 'SVC' },
+    'equipment_search/hvdcLineTag': { defaultMessage: 'HVDC LINE' },
+    'equipment_search/hvdcLineVscTag': { defaultMessage: 'HVDC LINE (VSC)' },
+    'equipment_search/hvdcLineLccTag': { defaultMessage: 'HVDC LINE (LCC)' },
+    'equipment_search/hvdcStationTag': { defaultMessage: 'HVDC STATION' },
+    'equipment_search/voltageLevelTag': { defaultMessage: 'VOLTAGE LEVEL' },
+    'equipment_search/substationTag': { defaultMessage: 'SUBSTATION' },
+    'equipment_search/busTag': { defaultMessage: 'BUS' },
+});

src/translations/en/equipmentsEn.ts

@@ -4,24 +4,25 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
+import { defineMessages } from '../utils';
 
-export const equipmentsEn = {
-    Substations: 'Substations',
-    VoltageLevels: 'Voltage levels',
-    Lines: 'Lines',
-    TwoWindingsTransformers: 'Two windings transformers',
-    ThreeWindingsTransformers: 'Three windings transformers',
-    Generators: 'Generators',
-    Loads: 'Loads',
-    Batteries: 'Batteries',
-    ShuntCompensators: 'Shunt compensators',
-    Hydro: 'Hydro',
-    Nuclear: 'Nuclear',
-    Wind: 'Wind',
-    Thermal: 'Thermal',
-    Solar: 'Solar',
-    Other: 'Other',
-    LccConverterStations: 'LCC converter stations',
-    VscConverterStations: 'VSC converter stations',
-    StaticVarCompensators: 'Static var compensators',
-};
+export const equipmentsEn = defineMessages({
+    Substations: { defaultMessage: 'Substations' },
+    VoltageLevels: { defaultMessage: 'Voltage levels' },
+    Lines: { defaultMessage: 'Lines' },
+    TwoWindingsTransformers: { defaultMessage: 'Two windings transformers' },
+    ThreeWindingsTransformers: { defaultMessage: 'Three windings transformers' },
+    Generators: { defaultMessage: 'Generators' },
+    Loads: { defaultMessage: 'Loads' },
+    Batteries: { defaultMessage: 'Batteries' },
+    ShuntCompensators: { defaultMessage: 'Shunt compensators' },
+    Hydro: { defaultMessage: 'Hydro' },
+    Nuclear: { defaultMessage: 'Nuclear' },
+    Wind: { defaultMessage: 'Wind' },
+    Thermal: { defaultMessage: 'Thermal' },
+    Solar: { defaultMessage: 'Solar' },
+    Other: { defaultMessage: 'Other' },
+    LccConverterStations: { defaultMessage: 'LCC converter stations' },
+    VscConverterStations: { defaultMessage: 'VSC converter stations' },
+    StaticVarCompensators: { defaultMessage: 'Static var compensators' },
+});