✨ Add support for I18n

[alf0ns3]

• i18n used to localize all the frontend strings
• fr localization
• de localization

[0x46616c6b]

Thanks for this contribution! I highly appreciate it. Could you please check to ensure the translations are working with the test setup? I could add the German translations afterwards.

[alf0ns3]

@0x46616c6b yes sure, I'm working with React for the first time so let me know if creating a new test-utils.tsx file is not the correct way to do.

[alf0ns3]

Also, locally I have an error running npm run coverage:

TypeError: localStorage.getItem is not a function

I made all the tests working by adding this snippet on test-utils.tsx file:

// Mock localStorage for tests
Object.defineProperty(window, 'localStorage', {
  value: {
    getItem: vi.fn(() => null),
    setItem: vi.fn(() => {}),
    removeItem: vi.fn(() => {}),
    clear: vi.fn(() => {}),
  },
  writable: true,
})

but I don't have a local Ticker instance running and it seems to don't be linked to the coded I added, so that I didn't commited it yet.

[0x46616c6b]

Also, locally I have an error running npm run coverage:

TypeError: localStorage.getItem is not a function

I made all the tests working by adding this snippet on test-utils.tsx file:

// Mock localStorage for tests
Object.defineProperty(window, 'localStorage', {
  value: {
    getItem: vi.fn(() => null),
    setItem: vi.fn(() => {}),
    removeItem: vi.fn(() => {}),
    clear: vi.fn(() => {}),
  },
  writable: true,
})

but I don't have a local Ticker instance running and it seems to don't be linked to the coded I added, so that I didn't commited it yet.

You can use our Ticker API, we provide a Ticker for local development:

TICKER_API_URL="https://ticker-api.systemli.org/v1"

[0x46616c6b]

Is it okay if I make some simplifications based on your code changes?

[alf0ns3]

Is it okay if I make some simplifications based on your code changes?

Yeah sure!

[0x46616c6b]

Hmm, I can't push to your fork. But here what I would do:

• remove test-utils.tsx (not necessary)
• revert the changes on the test files
• add the following to the vitest-setup.ts

import { initReactI18next } from 'react-i18next'
import i18n from 'i18next'
import en from './src/i18n/locales/en.json'

i18n.use(initReactI18next).init({
  resources: { en: { translation: en } },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
})

[alf0ns3]

Also, locally I have an error running npm run coverage:

TypeError: localStorage.getItem is not a function

I made all the tests working by adding this snippet on test-utils.tsx file:

// Mock localStorage for tests
Object.defineProperty(window, 'localStorage', {
  value: {
    getItem: vi.fn(() => null),
    setItem: vi.fn(() => {}),
    removeItem: vi.fn(() => {}),
    clear: vi.fn(() => {}),
  },
  writable: true,
})

but I don't have a local Ticker instance running and it seems to don't be linked to the coded I added, so that I didn't commited it yet.

You can use our Ticker API, we provide a Ticker for local development:

TICKER_API_URL="https://ticker-api.systemli.org/v1"

I still have the same error TypeError: localStorage.getItem is not a function when I run locally npm run test, even with the TICKER_API_URL correctly configured (I can access the test messages from within http://localhost:4000).

Do you have an idea to make it working accordingly?

[alf0ns3]

I wanted to update dayjs behavior to use the locale defined by the browser, but I didn't managed to make it working yet

[0x46616c6b]

Which node version are you using? The CI and also on my machine with Node LTS/JOD (22) the tests are passing.

[alf0ns3]

Which node version are you using? The CI and also on my machine with Node LTS/JOD (22) the tests are passing.

node --version
v25.2.1

npm --version 
11.6.2

So I'll rollback to v22

[alf0ns3]

Hmm, I can't push to your fork. But here what I would do:

* remove `test-utils.tsx` (not necessary)

* revert the changes on the test files

* add the following to the `vitest-setup.ts`

import { initReactI18next } from 'react-i18next'
import i18n from 'i18next'
import en from './src/i18n/locales/en.json'

i18n.use(initReactI18next).init({
  resources: { en: { translation: en } },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
})

I gave you an access to my fork if you want to push code directly there

[0x46616c6b]

I use nvm and the .nvmrc file to manage the version for projects.

[0x46616c6b]

The PR looks really good to me. You only want to make dayjs i18n aware as well, correct?

[alf0ns3]

I use nvm and the .nvmrc file to manage the version for projects.

thanks for the tip, it's working now

[alf0ns3]

The PR looks really good to me. You only want to make dayjs i18n aware as well, correct?

I managed to make dayjs locale working! e931d1c

This PR is ready to be merged now

[doobry-systemli]

Really nice 😍 Maybe a small comment in the readme on how to update the localization JSON files (e.g. after introducing a new translation string) would be helpful.