Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Storybook][i18n] initialize i18n with english locale #185033

Merged
merged 4 commits into from
Jun 7, 2024
Merged

[Storybook][i18n] initialize i18n with english locale #185033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
181460d
initialize i18n with english locale
Bamieh Jun 7, 2024
12076fe
Merge branch 'main' into i18n_fix_storybook
kibanamachine Jun 7, 2024
58bee22
fix types
Bamieh Jun 7, 2024
d1ff7c0
Merge branch 'i18n_fix_storybook' of github.com:Bamieh/kibana into i1…
Bamieh Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions packages/kbn-storybook/src/lib/decorators.tsx
View file
Open in desktop
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
View file
Open in desktop
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