import { Meta } from '@storybook/blocks'
import { Diff } from '~storybook/components'
import migrationBonus from './code-diffs/migration-bonus.diff?raw'
import migrationFETBonus from './code-diffs/migration-fe-template-bonus.diff?raw'
import migrationFETToV1 from './code-diffs/migration-fe-template-to-v1.diff?raw'
import migrationToV1 from './code-diffs/migration-to-v1.diff?raw'

<Meta title="Components/KaizenProvider/Installation" />

# Kaizen Provider

Provides the necessary global contexts for all Kaizen components, as well as any global level Kaizen component/wrappers.

## Usage

Ideally, there should only be one `KaizenProvider` that should wrap your entire application.

```jsx
import { KaizenProvider } from '@kaizen/components'
;<KaizenProvider>
  <App />
</KaizenProvider>
```

### Internationalization support

- [Internationalization in Kaizen](/docs/components-kaizenprovider-internationalization-in-kaizen--docs)

## Migrating to KaizenProvider v1.0

`KaizenProvider` our new root level wrapping component.

<Diff>{migrationToV1}</Diff>

If you're using the [frontend-template](https://github.com/cultureamp/frontend-template), you can replace it like this:

Note: `defaultPreset` comes from the `frontend-template`.

<Diff>{migrationFETToV1}</Diff>

### Bonus

If you're using the `defaultTheme`, this is already setup within the provider, so depending on your team's setup you might be able to remove config that sets this up for you.

<Diff className="mb-16">{migrationBonus}</Diff>

<Diff>{migrationFETBonus}</Diff>