feat(storybook): add translations from a single source

adobe · Dec 12, 2024 · d437d20 · d437d20
1 parent afd2dac
commit d437d20
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 36 deletions.
diff --git a/.storybook/intl/translations.json b/.storybook/intl/translations.json
@@ -0,0 +1,154 @@
+{
+  "ar": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "اسم المستخدم",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "محمد_أحمد",
+    "treeview.value": ""
+  },
+  "en": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "Username",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "john_doe",
+    "treeview.value": ""
+  },
+  "fa": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "نام کاربری",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "علی_رضا",
+    "treeview.value": ""
+  },
+  "he": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "שם משתמש",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "דני123",
+    "treeview.value": ""
+  },
+  "ja": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "ユーザー名",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "山田太郎",
+    "treeview.value": ""
+  },
+  "ko": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "사용자 이름",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "김철수",
+    "treeview.value": ""
+  },
+  "th": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "ชื่อผู้ใช้",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "สมชาย",
+    "treeview.value": ""
+  },
+  "zh": {
+    "accordion.text": "",
+    "actionbutton.text": "",
+    "assetcard.name": "",
+    "assetlist.file": "",
+    "badge.label": "",
+    "button.label": "",
+    "combobox.text": "",
+    "fieldlabel.label": "用户名",
+    "helptext.text": "",
+    "logicbutton.button": "",
+    "menu.menuItem": "",
+    "millercolumns.file": "",
+    "picker.placeholder": "",
+    "search.value": "",
+    "tag.label": "",
+    "textfield.value": "张伟",
+    "treeview.value": ""
+  }
+}
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -22,6 +22,7 @@
 		"./package.json": "./package.json",
 		"./preview": "./preview.js",
 		"./templates/*": "./templates/*",
+		"./translations": "./intl/translations.json",
 		"./types": "./types/index.js",
 		"./types/*": "./types/*"
 	},

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -8,6 +8,7 @@ import {
 	withReducedMotionWrapper,
 	withTestingPreviewWrapper,
 } from "./decorators";
+import translations from "./intl/translations.json";
 import {
 	FontLoader,
 	IconLoader,
@@ -34,6 +35,8 @@ setConsoleOptions({
 	],
 });
 
+export { translations };
+
 /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
 export const parameters = {
 	layout: "centered",

diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
@@ -2,6 +2,7 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/templat
 import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Container, getRandomId } from "@spectrum-css/preview/decorators";
+import translations from "@spectrum-css/preview/translations";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -300,44 +301,11 @@ export const KeyboardFocusTemplate = (args, context) => Container({
 }, context);
 
 export const LocaleWrapper = (args, context) => {
-	const translations = {
-		en: {
-			labelText: "Username",
-			value: "john_doe",
-		},
-		ja: {
-			labelText: "ユーザー名",
-			value: "山田太郎",
-		},
-		zh: {
-			labelText: "用户名",
-			value: "张伟",
-		},
-		ko: {
-			labelText: "사용자 이름",
-			value: "김철수",
-		},
-		ar: {
-			labelText: "اسم المستخدم",
-			value: "محمد_أحمد",
-		},
-		he: {
-			labelText: "שם משתמש",
-			value: "דני123",
-		},
-		fa: {
-			labelText: "نام کاربری",
-			value: "علی_رضا",
-		},
-		th: {
-			labelText: "ชื่อผู้ใช้",
-			value: "สมชาย",
-		},
-	};
-
 	const { lang: contextLang } = context.globals;
 	const lang = args.lang || contextLang;
-	const { labelText, value } = translations[lang] ?? translations.en;
+	const langTranslations = translations[lang] ?? translations.en;
+	const labelText = langTranslations["fieldlabel.label"];
+	const value = langTranslations["textfield.value"];
 
 	return html`
 		<div lang=${ifDefined(args.lang)}>