From 36534f1915054021e88d9cb28e457add8423bcbb Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Thu, 25 May 2023 23:28:11 -0700
Subject: [PATCH] feat: add storybook i18n decorator (#2538)

Co-authored-by: Himself65 <himself65@outlook.com>
---
 packages/component/.storybook/preview.tsx | 34 +++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/component/.storybook/preview.tsx b/packages/component/.storybook/preview.tsx
index 424e591d62..454b46fd3e 100644
--- a/packages/component/.storybook/preview.tsx
+++ b/packages/component/.storybook/preview.tsx
@@ -1,7 +1,8 @@
-import { useEffect, ComponentType } from 'react';
-import { ThemeProvider, useTheme } from 'next-themes';
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
+import { LOCALES, createI18n } from '@affine/i18n';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { ComponentType, useEffect } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 
 export const parameters = {
@@ -15,6 +16,34 @@ export const parameters = {
   },
 };
 
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: LOCALES.map(locale => ({
+        title: locale.originalName,
+        value: locale.tag,
+        right: locale.flagEmoji,
+      })),
+    },
+  },
+};
+
+const createI18nDecorator = ({ options } = { options: {} }) => {
+  const i18n = createI18n(options);
+  const withI18n = (Story, context) => {
+    const locale = context.globals.locale;
+    useEffect(() => {
+      i18n.changeLanguage(locale);
+    }, [locale]);
+    return <Story {...context} />;
+  };
+  return withI18n;
+};
+
 const Component = () => {
   const isDark = useDarkMode();
   const theme = useTheme();
@@ -33,4 +62,5 @@ export const decorators = [
       </ThemeProvider>
     );
   },
+  createI18nDecorator(),
 ];