feat(storybook): add localization tooling

Author: castastrophe

.storybook/decorators/language.js

@@ -1,5 +1,7 @@
-import { makeDecorator, useEffect } from "@storybook/preview-api";
-import { fetchContainers } from "./helpers.js";
+import { allFakers } from "@faker-js/faker";
+import { makeDecorator, useEffect } from '@storybook/preview-api';
+import { capitalize } from "lodash-es";
+import { fetchContainers } from "./helpers";
 /* global Typekit */
 
 /**
@@ -17,9 +19,21 @@ export const withLanguageWrapper = makeDecorator({
 			viewMode,
 		} = context;
 
-		useEffect(() => {
-			const isNotEnglish = lang && lang !== "en-US";
+		const isNotEnglish = lang && lang !== "en-US";
+		const isRTL = ["ar", "fa", "he"].includes(lang);
+
+		// @todo: this can't be used for VRT because the strings are random
+		// Attach the generator tool to the parameters for use in the story
+		context.generator = allFakers?.[lang];
+
+		// Add a custom generator for titles
+		context.generator.lorem.title = (count) => capitalize(context.generator.lorem.words(count));
 
+		// Add a textDirection property to the globals for use in the story
+		context.globals.textDirection = isRTL ? "rtl" : "ltr";
+
+
+		useEffect(() => {
 			// If it is US-language or unset use the rok6rmo Adobe font web project id (smaller size),
 			// otherwise use the mge7bvf kit with all the language settings (larger size)
 			const kitId = isNotEnglish ? "mge7bvf" : "rok6rmo";
@@ -55,10 +69,12 @@ export const withLanguageWrapper = makeDecorator({
 				} catch (e) {/* empty */}
 			}
 
+			// Set the language and direction on the relevant containers
 			for (const container of fetchContainers(id, viewMode === "docs")) {
 				container.lang = lang;
+				container.dir = !isRTL ? "ltr" : "rtl";
 			}
-		}, [lang]);
+		}, [lang, isNotEnglish, isRTL, viewMode, id]);
 
 		return StoryFn(context);
 	},

.storybook/decorators/text-direction.js

@@ -15,7 +15,7 @@ const modes = {
     "Context: Spectrum 1": {
         scale: "medium",
         color: "light",
-        textDirection: "ltr",
+        lang: "en_US",
         context: "legacy",
     },
     "Context: Express": {
@@ -27,7 +27,7 @@ const modes = {
     "Dark | RTL": {
         scale: "medium",
         color: "dark",
-        textDirection: "rtl",
+        lang: "ar",
     },
 };
 
@@ -39,3 +39,34 @@ export const disableDefaultModes = {
         return acc;
     }, {}),
 };
+
+export const mobile = {
+    "Mobile": {
+        scale: "large",
+    },
+};
+
+export const viewports = {
+    small: {
+        width: 480,
+    },
+};
+
+export const i18n = {
+    // This is the default language, so we don't need to specify it here
+    // "English": {
+    //     lang: "en_US",
+    // },
+    "Hebrew": {
+        lang: "he",
+    },
+    "Japanese": {
+        lang: "ja",
+    },
+    "Korean": {
+        lang: "ko",
+    },
+    "Arabic": {
+        lang: "ar",
+    },
+};

.storybook/modes/index.js

@@ -9,9 +9,9 @@
 	"exports": {
 		".": "./preview.js",
 		"./blocks": "./blocks/index.js",
+		"./blocks/*": "./blocks/*",
 		"./decorators": "./decorators/index.js",
 		"./decorators/*": "./decorators/*",
-		"./deprecated/*": "./deprecated/*",
 		"./loaders": "./loaders/index.js",
 		"./loaders/*": "./loaders/*",
 		"./main": "./main.js",
@@ -20,6 +20,7 @@
 		"./modes/*": "./modes/*",
 		"./package.json": "./package.json",
 		"./preview": "./preview.js",
+		"./templates/*": "./templates/*",
 		"./types": "./types/index.js",
 		"./types/*": "./types/*"
 	},
@@ -38,6 +39,7 @@
 		"@babel/core": "^7.26.0",
 		"@chromaui/addon-visual-tests": "^1.0.0",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@faker-js/faker": "^8.4.1",
 		"@storybook/addon-a11y": "^8.3.6",
 		"@storybook/addon-actions": "^8.3.6",
 		"@storybook/addon-console": "^3.0.0",

.storybook/package.json

@@ -47,19 +47,6 @@ export default {
 			dynamicTitle: true,
 		},
 	},
-	textDirection: {
-		title: "Text direction",
-		description: "Direction of the content flow",
-		defaultValue: "ltr",
-		type: "string",
-		toolbar: {
-			items: [
-				{ value: "ltr", title: "Left to right" },
-				{ value: "rtl", title: "Right to left" },
-			],
-			dynamicTitle: true,
-		},
-	},
 	// @todo https://jira.corp.adobe.com/browse/CSS-314
 	reducedMotion: {
 		title: "Reduce motion",
@@ -77,14 +64,15 @@ export default {
 	lang: {
 		title: "Language",
 		description: "Language of the content",
-		defaultValue: "en-US",
+		defaultValue: "en_US",
 		type: "string",
 		toolbar: {
 			items: [
-				{ value: "en-US", title: "🇺🇸", right: "English (US)" },
-				{ value: "ja", title: "🇯🇵", right: "日本語" },
-				{ value: "ko", title: "🇰🇷", right: "한국어" },
-				{ value: "zh", title: "🇨🇳", right: "中文" },
+				{ value: "en_US", title: "English", right: "English (US)" },
+				{ value: "he", title: "Hebrew", right: "עִברִית" },
+				{ value: "ja", title: "Japanese", right: "日本語" },
+				{ value: "ko", title: "Korean", right: "한국어" },
+				{ value: "ar", title: "Arabic", right: "عربي" },
 			],
 			dynamicTitle: true,
 		},

.storybook/types/global.js

@@ -1935,6 +1935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@faker-js/faker@npm:^8.4.1":
+  version: 8.4.1
+  resolution: "@faker-js/faker@npm:8.4.1"
+  checksum: 10c0/4f2aecddcfdc2cc8b50b2d15d1e37302a7c7a5bbd184ae910a9d271bc11248533ca74dcdd4a9ccbe20410553e7af0f6a4d334c5b955635e09a32ddf4a64942d4
+  languageName: node
+  linkType: hard
+
 "@fastify/busboy@npm:^2.0.0":
   version: 2.1.1
   resolution: "@fastify/busboy@npm:2.1.1"
@@ -3828,6 +3835,7 @@ __metadata:
     "@babel/core": "npm:^7.26.0"
     "@chromaui/addon-visual-tests": "npm:^1.0.0"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"
+    "@faker-js/faker": "npm:^8.4.1"
     "@spectrum-css/table": "workspace:^"
     "@spectrum-css/tokens": "workspace:^"
     "@spectrum-css/typography": "workspace:^"