Merge pull request #355 from ibi-group/use-storybook-react-intl-addon

Use storybook-react-intl addon

Author: binh-dam-ibigroup

.storybook/main.js

@@ -20,7 +20,8 @@ module.exports = {
         }
       }
     },
-    "@storybook/addon-viewport"
+    "@storybook/addon-viewport",
+    "storybook-react-intl"
   ],
   stories: [
     "../packages/**/*.story.mdx",

.storybook/preview.js

@@ -1,36 +1,39 @@
 import { setupWorker } from "msw";
+import { withReactIntl } from "storybook-react-intl/dist/cjs/withReactIntl";
+
 import locationFieldHandlers from "../packages/location-field/src/mocks/handlers";
-import itineraryBodyHandlers from '../packages/itinerary-body/src/__mocks__/handlers'
+import itineraryBodyHandlers from "../packages/itinerary-body/src/__mocks__/handlers";
 import geocoderHandlers from "../packages/geocoder/src/test-fixtures/handlers";
 
+import { reactIntl } from './react-intl.js';
+
 // Only install worker when running in browser
-if (typeof global.process === 'undefined') {
+if (typeof global.process === "undefined") {
   const worker = setupWorker(
     ...locationFieldHandlers,
     ...itineraryBodyHandlers,
     ...geocoderHandlers
   );
-  worker.start({onUnhandledRequest: "bypass"})
+  worker.start({ onUnhandledRequest: "bypass" });
 }
 
-
 export const parameters = {
   a11y: {
     config: {
       rules: [
         {
           //  moved to technical backlog
-          id: 'aria-required-parent',
+          id: "aria-required-parent",
           reviewOnFail: true,
         },
         {
           // Appears to be a story bug
-          id: 'duplicate-id',
+          id: "duplicate-id",
           reviewOnFail: true
         },
         {
           // Appears to be a story bug
-          id: 'duplicate-id-aria',
+          id: "duplicate-id-aria",
           reviewOnFail: true
         }
       ],
@@ -43,4 +46,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+  locale: reactIntl.defaultLocale,
+  locales: {
+    "en-US": { title: "English (US)", left: "🇺🇸" },
+    fr: { title: "Français", left: "🇫🇷" },
+    unknown: { title: "Unknown", left: "🚫" }
+  },
+  reactIntl
+};
+
+// Per https://www.npmjs.com/package/@storybook/addon-storyshots,
+// explicitly export the storybook-react-intl decorator
+// so it is included in jest snapshots.
+export const decorators = [withReactIntl];

.storybook/react-intl.js

@@ -0,0 +1,51 @@
+import flatten from "flat";
+
+/**
+ * Copied from https://stackoverflow.com/questions/50940640/how-to-determine-if-jest-is-running-the-code-or-not
+ */
+function isRunningJest() {
+    return process.env.JEST_WORKER_ID !== undefined;
+}
+
+/** Locales supported in the storybook "Globe" dropdown menu. */
+const locales = ["en-US", "fr", "unknown"];
+
+/** List of packages that will have localization support in Storybook. */ 
+const packages = [
+  "from-to-location-picker",
+  "location-field",
+  "trip-details",
+  "trip-form"
+];
+
+/** Messages for all packages AND locales above. */
+const messages = {};
+
+if (!isRunningJest()) {
+  // Populate messages if not running snapshots.
+  // (Message printouts would be unnecessary replicated in snapshots without that check.)
+  packages.forEach((pkg) => {
+    locales.forEach((locale) => {
+      try {
+        messages[locale] = {
+          ...messages.[locale],
+          ...flatten(require(`../packages/${pkg}/i18n/${locale}.yml`))
+        };
+      } catch (e) {
+        // There is no yml files for the "unknown" locale,
+        // so it should fail, and we won't display an error message in that case.
+        if (locale !== "unknown") console.error(e);
+      }    
+    });
+  });
+}
+
+// TODO: place any applicable (date, time, etc) format parameters here.
+const formats = {};
+
+export const reactIntl = {
+  defaultLocale: "en-US",
+  formats,
+  locales,
+  messages
+};