import { Meta } from '@storybook/blocks'
import { LinkTo } from '~storybook/components/LinkTo'

<Meta title="Components/KaizenProvider/Internationalization in Kaizen" />

# Internationalization in Kaizen

The goal of Internationalization in Kaizen is to handle the translation of hard-coded strings in Kaizen components.

If you need guidance on translating your app check, the `@cultureamp/i18n-react-intl` [package docs](https://github.com/cultureamp/unified-home/blob/master/packages/i18n-react-intl/README.md).

## What Kaizen internationalization covers

While most Kaizen components receive display text and accessibility information through props, some have text built in. For some of these cases, Kaizen provides translation support.
Translation support in a Kaizen component will cover:

- Internal display text (that isn't provided by the user through props)

- Internal accessibility text, such as an `aria-label` (that isn't provided by the user through props)

Disclaimer: Internationalization is a new feature in Kaizen, and not all Kaizen components are translated yet.
Please check with us on a case-by-case basis regarding which components are translated. Also keep in mind that translations take time to be fully processed, meaning that components with translation support may have messages for certain locales but not others at any given time.
For a full list of our supported languages and their tiers, see [here](https://github.com/cultureamp/translation-bot/blob/master/config/kaizen-design-system.yaml).

## Usage

Setting up internationalization for Kaizen components involves:

- Adding unified-home's `react-intl` [webpack-plugin](https://github.com/cultureamp/unified-home/tree/master/packages/i18n-react-intl#integrating-with-webpack) to your webpack config

- Wrapping your app in the <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo>

There is a slight difference in the implementation of the `KaizenProvider`, depending on whether or not your app already handles its translations with `react-intl`.

### When a `react-intl` provider is set up with `@cultureamp/i18n-react-intl`

`KaizenProvider` will use the existing `react-intl` provider to track the locale and access its own translation files. There is no need to pass in a locale prop.
For more information on `@cultureamp/i18n-react-intl`, see their docs here.

Note: This will work with StaticIntlProvider or DynamicIntlProvider.

```tsx
import { DynamicIntlProvider } from '@cultureamp/i18n-react-intl'
import { KaizenProvider } from '@kaizen/components'
;<DynamicIntlProvider>
  <KaizenProvider>
    <YourApp />
  </KaizenProvider>
</DynamicIntlProvider>
```

### When your app isn't set up with a provider from `@cultureamp/i18n-react-intl`

In these cases, you'll need to pass the current locale as a prop to the `KaizenProvider`, so it knows which language is currently active.

```tsx
import { KaizenProvider } from '@kaizen/components'
;<KaizenProvider locale={locale}>
  <YourApp />
</KaizenProvider>
```