Add active locale item to storybook toolbar

Author: robertlong

.storybook/preview.js

@@ -1,17 +1,27 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
 import "../src/react-components/styles/global.scss";
 import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
 import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
+import { setLocale } from "../src/utils/i18n";
 
-const Layout = ({ children }) => {
+const Layout = ({ children, locale }) => {
   useAccessibleOutlineStyle();
+
+  useEffect(
+    () => {
+      setLocale(locale);
+    },
+    [locale]
+  );
+
   return <WrappedIntlProvider>{children}</WrappedIntlProvider>;
 };
 
 export const decorators = [
-  Story => (
-    <Layout>
+  (Story, context) => (
+    <Layout locale={context.globals.locale}>
       <Story />
     </Layout>
   )
@@ -31,3 +41,18 @@ export const parameters = {
     }
   }
 };
+
+const locales = Object.entries(AVAILABLE_LOCALES).map(([value, title]) => ({ title, value }));
+locales.unshift({ title: "Browser Default", value: "browser" });
+
+export const globalTypes = {
+  locale: {
+    name: "Locale",
+    description: "Active locale",
+    defaultValue: "browser",
+    toolbar: {
+      icon: "globe",
+      items: locales
+    }
+  }
+};

src/utils/i18n.js

@@ -8,7 +8,7 @@ const cachedMessages = new Map();
 let _locale = DEFAULT_LOCALE;
 let _localeData = defaultLocaleData;
 
-function findLocale() {
+function findLocale(locale) {
   const locales = (() => {
     if (navigator.languages) {
       return [...navigator.languages];
@@ -21,25 +21,23 @@ function findLocale() {
     }
   })();
 
-  const preferences = window.APP.store.state.preferences;
-
-  if (preferences.locale && preferences.locale !== "browser") {
-    locales.unshift(preferences.locale);
+  if (locale && locale !== "browser") {
+    locales.unshift(locale);
   }
 
   for (let i = 0; i < locales.length; i++) {
-    const locale = locales[i];
-    if (AVAILABLE_LOCALES.hasOwnProperty(locale)) {
-      return locale;
+    const curLocale = locales[i];
+    if (AVAILABLE_LOCALES.hasOwnProperty(curLocale)) {
+      return curLocale;
     }
-    if (FALLBACK_LOCALES.hasOwnProperty(locale)) {
-      FALLBACK_LOCALES.hasOwnProperty(locale);
+    if (FALLBACK_LOCALES.hasOwnProperty(curLocale)) {
+      FALLBACK_LOCALES.hasOwnProperty(curLocale);
     }
     // Also check the primary language subtag in case
     // we do not have an entry for full tag
     // See https://en.wikipedia.org/wiki/IETF_language_tag#Syntax_of_language_tags
     // and https://github.com/mozilla/hubs/pull/3350/files#diff-70ef5717d3da03ef288e8d15c2fda32c5237d7f37074421496f22403e4475bf1R16
-    const primaryLanguageSubtag = locale.split("-")[0].toLowerCase();
+    const primaryLanguageSubtag = curLocale.split("-")[0].toLowerCase();
     if (AVAILABLE_LOCALES.hasOwnProperty(primaryLanguageSubtag)) {
       return primaryLanguageSubtag;
     }
@@ -50,20 +48,20 @@ function findLocale() {
   return DEFAULT_LOCALE;
 }
 
-function updateLocale() {
-  const locale = findLocale();
+export function setLocale(locale) {
+  const resolvedLocale = findLocale(locale);
 
-  if (locale === DEFAULT_LOCALE) {
-    _locale = locale;
+  if (resolvedLocale === DEFAULT_LOCALE) {
+    _locale = resolvedLocale;
     _localeData = defaultLocaleData;
     document.body.dispatchEvent(new CustomEvent("locale-updated"));
   } else {
-    if (cachedMessages.has(locale)) {
-      _locale = locale;
+    if (cachedMessages.has(resolvedLocale)) {
+      _locale = resolvedLocale;
       document.body.dispatchEvent(new CustomEvent("locale-updated"));
     } else {
-      import(`../assets/locales/${locale}.json`).then(({ default: localeData }) => {
-        _locale = locale;
+      import(`../assets/locales/${resolvedLocale}.json`).then(({ default: localeData }) => {
+        _locale = resolvedLocale;
         _localeData = localeData;
         document.body.dispatchEvent(new CustomEvent("locale-updated"));
       });
@@ -74,9 +72,9 @@ function updateLocale() {
 const interval = window.setInterval(() => {
   if (window.APP && window.APP.store) {
     window.clearInterval(interval);
-    updateLocale();
+    setLocale(window.APP.store.state.preferences.locale);
     window.APP.store.addEventListener("statechanged", () => {
-      updateLocale();
+      setLocale(window.APP.store.state.preferences.locale);
     });
   }
 }, 100);