feat: added locale select to storybook toolbar (#1173)

packages/storybook/.storybook/preview.js

@@ -4,14 +4,19 @@ import {NextUIProvider} from "@nextui-org/react";
 import Style from "./style";
 
 export const decorators = [
-  (Story) => (
+  (Story, {globals: {locale}}) => {
-    <NextUIProvider>
+    const direction =
-      <div className="bg-dark">
+      locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
-        <Style />
+
-        <Story />
+    return (
-      </div>
+      <NextUIProvider locale={locale}>
-    </NextUIProvider>
+        <div className="bg-dark" lang={locale} dir={direction}>
-  ),
+          <Style />
+          <Story />
+        </div>
+      </NextUIProvider>
+    );
+  },
 ];
 
 export const parameters = {
@@ -48,3 +53,53 @@ export const parameters = {
     },
   },
 };
+
+const locales = [
+  "ar-AE",
+  "bg-BG",
+  "cs-CZ",
+  "da-DK",
+  "de-DE",
+  "el-GR",
+  "en-US",
+  "es-ES",
+  "et-EE",
+  "fi-FI",
+  "fr-FR",
+  "he-IL",
+  "hr-HR",
+  "hu-HU",
+  "it-IT",
+  "ja-JP",
+  "ko-KR",
+  "lt-LT",
+  "lv-LV",
+  "nb-NO",
+  "nl-NL",
+  "pl-PL",
+  "pt-BR",
+  "pt-PT",
+  "ro-RO",
+  "ru-RU",
+  "sk-SK",
+  "sl-SI",
+  "sr-SP",
+  "sv-SE",
+  "tr-TR",
+  "uk-UA",
+  "zh-CN",
+  "zh-TW",
+];
+
+export const globalTypes = {
+  locale: {
+    toolbar: {
+      icon: "globe",
+      items: locales.map((locale) => ({
+        value: locale,
+        title: new Intl.DisplayNames(undefined, {type: "language"}).of(locale),
+        right: new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "Right to Left" : undefined,
+      })),
+    },
+  },
+};