Add i18n

.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "formatjs",
+      {
+        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
+        "ast": true
+      }
+    ]
+  ]
+}

CHANGELOG.md

@@ -11,6 +11,7 @@
  - Add filter schema to registry to create dynamic filters in items tab
  - Render text value instead of key value in vocabulary select
  - Create scale images in IImageAttachment behavior
+ - Add i18n ( english, catalan, spanish)
 
 
 0.23.1

e2e/cypress/integration/actions.js

@@ -253,7 +253,7 @@ LOGIN_TYPES.forEach((loginType) => {
 
         cy.get(CONTEXT_TOOLBAR_SELECTORS.selectFilteType).select('Item')
         cy.wait('@get-object-@search**')
-        cy.get(ITEMS_PANELS_SELECTORS.table).should('contain', 'Anything here!')
+        cy.get(ITEMS_PANELS_SELECTORS.table).should('contain', 'No results')
 
         cy.visit(
           `/${Cypress.env('GUILLOTINA_DB')}/${Cypress.env(

e2e/cypress/integration/content.js

@@ -90,7 +90,7 @@ LOGIN_TYPES.forEach((loginType) => {
       })
 
       cy.get(USER_FORM_SELECTORS.btnUpate).click()
-      cy.get(NOTIFICATION_SELECTOR).should('contain', 'Data updated')
+      cy.get(NOTIFICATION_SELECTOR).should('contain', 'User updated')
       cy.get(`[data-test='${BREADCRUMB_SELECTORS.prefixItem}-users']`).click()
 
       // Delete Item

e2e/cypress/integration/gmi-type-content.js

@@ -75,7 +75,7 @@ LOGIN_TYPES.forEach((loginType) => {
       })
 
       cy.wait('@patch-object-test-gmi-item/@upload/**')
-      cy.get(NOTIFICATION_SELECTOR).should('contain', `file uploaded!`)
+      cy.get(NOTIFICATION_SELECTOR).should('contain', `File uploaded!`)
 
       // Upload image
       cy.get(`[data-test='formImageAttachmentTest']`).within(() => {

e2e/cypress/integration/language.js

@@ -0,0 +1,53 @@
+import { ITEMS_PANELS_SELECTORS } from '../elements/panels-selectors'
+
+describe('check languages', function () {
+  beforeEach('clear', function () {
+    cy.clearLocalStorage()
+    cy.clearCookies()
+  })
+
+  it('Check eng language', function () {
+    cy.containerLogin()
+    cy.findAllByText('Addons').click()
+    cy.findAllByText('Install')
+    cy.findAllByText('Remove')
+    cy.findAllByText('Available Addons')
+    cy.findAllByText('Installed Addons')
+    cy.findAllByText('Actions').click()
+    cy.findAllByText('Delete')
+    cy.findAllByText('Move to...')
+    cy.findAllByText('Copy to...')
+  })
+
+  it('Check ca language', function () {
+    cy.containerLogin({
+      language: 'ca',
+    })
+    cy.findAllByText('Addons').click()
+    cy.findAllByText('Instal·la')
+    cy.findAllByText('Elimina')
+    cy.findAllByText('Addons Disponibles')
+    cy.findAllByText('Addons Instal·lats')
+
+    cy.findAllByText('Actions').click()
+    cy.findAllByText('Elimina')
+    cy.findAllByText('Mou a...')
+    cy.findAllByText('Copia a...')
+  })
+
+  it('Check es language', function () {
+    cy.containerLogin({
+      language: 'es',
+    })
+    cy.findAllByText('Addons').click()
+    cy.findAllByText('Instalar')
+    cy.findAllByText('Eliminar')
+    cy.findAllByText('Complementos Disponibles')
+    cy.findAllByText('Complementos Instalados')
+
+    cy.findAllByText('Actions').click()
+    cy.findAllByText('Eliminar')
+    cy.findAllByText('Mover a...')
+    cy.findAllByText('Copiar a...')
+  })
+})

e2e/cypress/support/login.js

@@ -3,7 +3,7 @@ import { BREADCRUMB_SELECTORS } from '../elements/breadcrumb-selectors'
 
 Cypress.Commands.add(
   'autologin',
-  function ({ username, password, api_url } = {}) {
+  function ({ username, password, api_url, language = 'en' } = {}) {
     const url = api_url || Cypress.env('GUILLOTINA')
     const user = username || 'root'
     const pw = password || 'root'
@@ -21,7 +21,11 @@ Cypress.Commands.add(
       cy.setLocalStorage('auth_expires', new Date(response.body.exp).getTime())
     })
 
-    cy.visit('/')
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, 'language', { value: language })
+      },
+    })
     cy.get('.box > .container').should('be.visible')
   }
 )
@@ -66,14 +70,18 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'containerLogin',
-  function ({ username, password, api_url } = {}) {
+  function ({ username, password, api_url, language = 'en' } = {}) {
     cy.intercept('POST', `/@login`).as('login')
     const url = api_url || Cypress.env('GUILLOTINA')
     const user = username || 'root'
     const pw = password || 'root'
 
     cy.interceptPostObject('@login')
-    cy.visit('/')
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, 'language', { value: language })
+      },
+    })
     cy.get(LOGIN_SELECTORS.form).should('be.visible')
     cy.get(LOGIN_SELECTORS.username).type('root').should('have.value', 'root')
     cy.get(LOGIN_SELECTORS.password).type('root').should('have.value', 'root')

e2e/vite_example/src/App.tsx

@@ -109,7 +109,7 @@ function App() {
   const [currentSchema, setCurrentSchema] = useState('/')
   const [clientInstance, setClientInstance] = useState(undefined)
   const [isLogged, setLogged] = useState(auth.isLogged)
-  console.log('auth is logged', auth.isLogged)
+
   useEffect(() => {
     setClientInstance(getClient(url, currentSchema, auth))
   }, [currentSchema])
@@ -127,11 +127,13 @@ function App() {
     return null
   }
 
+  console.log('language', navigator.language)
   return (
     <ClientProvider client={clientInstance}>
       <Layout auth={auth} onLogout={onLogout}>
         {isLogged && (
           <Guillotina
+            locale={navigator.language || 'en'}
             auth={auth}
             url={currentSchema}
             registry={{

package.json

@@ -19,6 +19,7 @@
     "jwt-decode": "3.1.2",
     "prop-types": "15.7.2",
     "react-beautiful-dnd": "13.1.1",
+    "react-intl": "6.5.5",
     "react-useportal": "1.0.19",
     "uuid": "9.0.1"
   },
@@ -29,9 +30,11 @@
   "devDependencies": {
     "@babel/cli": "7.12.10",
     "@babel/core": "7.12.10",
+    "@formatjs/cli": "^6.2.4",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.2.2",
     "@testing-library/user-event": "12.6.0",
+    "babel-plugin-formatjs": "^10.5.10",
     "husky": "4.3.6",
     "microbundle": "0.13.0",
     "prettier": "2.2.1",
@@ -47,7 +50,13 @@
     "build:js": "rm -rf ./dist && microbundle --jsx React.createElement --no-compress --sourcemap",
     "build:css": "rm -rf ./dist/css && mkdir ./dist/css && sass ./src/guillo-gmi/scss/styles.sass ./dist/css/style.css",
     "prepublish": "yarn build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "intl-extract": "formatjs extract 'src/**/*.js' --out-file src/guillo-gmi/locales/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'",
+    "intl-compile-en": "formatjs compile src/guillo-gmi/locales/en.json --ast --out-file src/guillo-gmi/locales/compiled/en.json",
+    "intl-compile-ca": "formatjs compile src/guillo-gmi/locales/ca.json --ast --out-file src/guillo-gmi/locales/compiled/ca.json",
+    "intl-compile-es": "formatjs compile src/guillo-gmi/locales/es.json --ast --out-file src/guillo-gmi/locales/compiled/es.json",
+    "intl-compile": "npm run intl-compile-en && npm run intl-compile-es && npm run intl-compile-ca"
+
   },
   "eslintConfig": {
     "extends": "react-app"

src/guillo-gmi/components/behavior_view.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { useTraversal } from '../contexts'
 import { get } from '../lib/utils'
+import { useIntl } from 'react-intl'
+import { genericMessages } from '../locales/generic_messages'
 
 export function BehaviorsView({ context, schema }) {
   const Ctx = useTraversal()
@@ -34,9 +36,10 @@ export function BehaviorsView({ context, schema }) {
 }
 
 export function BehaviorNotImplemented() {
+  const intl = useIntl()
   return (
     <tr>
-      <td colSpan="3">Not Implemented</td>
+      <td colSpan="3">{intl.formatMessage(genericMessages.not_implemented)}</td>
     </tr>
   )
 }

src/guillo-gmi/components/behaviors/iimageattachment.js

@@ -7,10 +7,16 @@ import { Delete } from '../ui'
 import { Button } from '../input/button'
 import { FileUpload } from '../input/upload'
 import { Confirm } from '../../components/modal'
+import { useIntl } from 'react-intl'
+import {
+  genericFileMessages,
+  genericMessages,
+} from '../../locales/generic_messages'
 
 const _sizesImages = ['large', 'preview', 'mini', 'thumb']
 
 export function IImageAttachment({ properties, values }) {
+  const intl = useIntl()
   const cfg = useConfig()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
@@ -22,13 +28,12 @@ export function IImageAttachment({ properties, values }) {
 
   const uploadFile = async (ev) => {
     ev.preventDefault()
-
     setLoading(true)
     setError(undefined)
     const endpoint = `${Ctx.path}@upload/image`
     const req = await Ctx.client.upload(endpoint, file)
     if (req.status !== 200) {
-      setError('Failed to upload file')
+      setError(intl.formatMessage(genericFileMessages.error_upload_file))
       setLoading(false)
       return
     }
@@ -44,15 +49,19 @@ export function IImageAttachment({ properties, values }) {
       }
 
       if (hasError) {
-        setError(`Failed to upload file ${endpointSize}`)
+        setError(
+          intl.formatMessage(genericFileMessages.error_upload_file_size, {
+            size: sizesImages[i],
+          })
+        )
         setLoading(false)
         return
       }
     }
 
     setFile(undefined)
     setLoading(false)
-    Ctx.flash(`Image uploaded!`, 'success')
+    Ctx.flash(intl.formatMessage(genericFileMessages.image_uploaded), 'success')
     Ctx.refresh()
   }
 
@@ -62,12 +71,12 @@ export function IImageAttachment({ properties, values }) {
     const endpoint = `${Ctx.path}@delete/image`
     const req = await Ctx.client.delete(endpoint, file)
     if (req.status !== 200) {
-      setError('Failed to delete file')
+      setError(intl.formatMessage(genericFileMessages.failed_delete_file))
       setLoading(false)
       return
     }
     setLoading(false)
-    Ctx.flash(`Image deleted!`, 'success')
+    Ctx.flash(intl.formatMessage(genericFileMessages.image_deleted), 'success')
     Ctx.refresh()
   }
 
@@ -81,12 +90,14 @@ export function IImageAttachment({ properties, values }) {
           loading={loading}
           onCancel={() => setShowConfirmToDelete(false)}
           onConfirm={() => deleteFile()}
-          message={`Are you sure to remove the image?`}
+          message={intl.formatMessage(
+            genericFileMessages.confirm_message_delete_image
+          )}
         />
       )}
       {values['image'] && (
         <tr>
-          <td key={1}>Image</td>
+          <td key={1}>{intl.formatMessage(genericMessages.image)}</td>
           <td key={2}>
             <div className="is-flex is-align-items-center">
               <EditableField
@@ -111,7 +122,9 @@ export function IImageAttachment({ properties, values }) {
       {modifyContent && (
         <tr>
           <td colSpan={2}>
-            <label className="label">Upload an image</label>
+            <label className="label">
+              {intl.formatMessage(genericFileMessages.upload_an_image)}
+            </label>
             <form
               className="is-flex is-align-items-center"
               style={{ gap: '15px' }}
@@ -128,7 +141,7 @@ export function IImageAttachment({ properties, values }) {
                   onClick={uploadFile}
                   disabled={!file}
                 >
-                  Upload
+                  {intl.formatMessage(genericMessages.upload)}
                 </Button>
               </div>
             </form>