@preply/ds-i18n

@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

• 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.

• Request translations

See Localization at Preply for more details

• 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"
}