@preply/ds-i18n

Contains the translations for the Design System.

Usage

Just get json from locales folder and merge it with host translations.

import dsMessages from '@preply/ds-i18n/locales/en.json';

const translations = {
  ...hostMessages,
  ...dsMessages,
};

<IntlProvider locale="en" messages={translations}>
  <App />
</IntlProvider>;

Usage (inside design-system repo)

Packages

For packages like @preply/ds-web-lib, we need to setup one of these tools:

• babel-plugin-formatjs
• @formatjs/ts-transformer
• @swc/plugin-formatjs

Example for vite and babel-plugin-formatjs:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

import { getPrefixedId } from '@preply/ds-i18n';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['formatjs'],
      },
    }),
  ],
  ...
});

Apps

In general, just wrapping the app with IntlProvider is enough.

<IntlProvider locale="en">
  <App />
</IntlProvider>

Also, check storybook implementation for more complex example to display actual translations in different locales.

Translation flow

1. Use react-intl in your code

import { FormattedMessage } from 'react-intl';

const DEFAULT_REQUIRED_LABEL = (
  <FormattedMessage
    id="preply-ds.fieldLabel.required"
    defaultMessage="Required"
    description="Form field required label"
  />
);

Please prefix all your ids with preply-ds. to avoid collisions with host translations.

New strings will be automatically extracted and pushed to the design-system.json source file in preply-web-product Crowdin project.

2. Request translations

See Localization at Preply for more details

3. New translations will be pulled automatically

Pull Translations workflow will pull the translations from the Crowdin daily at 6:00 AM UTC. If there are any new translations, a PR will be created automatically.

Scripts

Note: In general, you're not supposed to run these scripts manually, they're run by the CI pipeline.

trans:extract

Extracts the translations from the source code into temporary tmp/design-system.json file.

This file contains additional context for the translators.

Example of a tmp/design-system.json file:

{
  "preply-ds.fieldLabel.required": {
    "defaultMessage": "Required",
    "description": "Form field required label"
  }
}

trans:push

Pushes the translations to the Crowdin.

trans:pull

Pulls the translations from the Crowdin into temporary tmp/crowdin folder.

Example of fetched translations:

{
  "preply-ds.fieldLabel.required": {
    "defaultMessage": "Required",
    "description": "Form field required label"
  }
}

trans:compile

Compiles the translations into simple key-value pairs in the locales folder.

Example of compiled translations:

{
  "preply-ds.fieldLabel.required": "Required"
}