Skip to content

Commit

Permalink
[Storybook][i18n] initialize i18n with english locale (#185033)
Browse files Browse the repository at this point in the history
## Summary

We added a check to ensure that `i18n` is initialized on the browser
before any javascript code uses `i18n`. We need to do the same in the
storybook so it works properly.

To summarize in a couple of pictures 😄 

**Before PR:**

![image](https://github.com/elastic/kibana/assets/6191849/3a598dd9-963d-4f4a-aa2a-d98a3d7f379a)


**After PR:**


![image](https://github.com/elastic/kibana/assets/6191849/e0f0b4a7-69f4-4eb1-b5b6-14bdfa716caf)


cc @petrklapka
  • Loading branch information
Bamieh committed Jun 7, 2024
1 parent 8f9630b commit 75d6815
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 2 deletions.
7 changes: 5 additions & 2 deletions packages/kbn-storybook/src/lib/decorators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ import { CoreTheme } from '@kbn/core-theme-browser';
import { I18nStart } from '@kbn/core-i18n-browser';
import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';
import { i18n } from '@kbn/i18n';

const theme$ = new BehaviorSubject<CoreTheme>({ darkMode: false });

const i18n: I18nStart = {
const i18nStart: I18nStart = {
Context: ({ children }) => <I18nProvider>{children}</I18nProvider>,
};

Expand All @@ -36,14 +37,16 @@ const analytics: AnalyticsServiceStart = {
* `globals` provided by the Storybook theme switcher to set the `colorMode`.
*/
const KibanaContextDecorator: DecoratorFn = (storyFn, { globals }) => {
// TODO: Add a switcher to see components in other locales or pseudo locale
i18n.init({ locale: 'en', messages: {} });
const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';

useEffect(() => {
theme$.next({ darkMode: colorMode === 'dark' });
}, [colorMode]);

return (
<KibanaRootContextProvider {...{ theme: { theme$ }, analytics, i18n }}>
<KibanaRootContextProvider {...{ theme: { theme$ }, analytics, i18n: i18nStart }}>
{storyFn()}
</KibanaRootContextProvider>
);
Expand Down
1 change: 1 addition & 0 deletions packages/kbn-storybook/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@kbn/repo-info",
"@kbn/dev-cli-runner",
"@kbn/core-theme-browser",
"@kbn/i18n",
"@kbn/i18n-react",
"@kbn/core-i18n-browser",
"@kbn/react-kibana-context-root",
Expand Down

0 comments on commit 75d6815

Please sign in to comment.