Skip to content

Commit 9ebee06

Browse files
rise-erpeldingrise-erpelding
committed
feat(storybook): add translations from a single source
1 parent 9290865 commit 9ebee06

File tree

4 files changed

+162
-36
lines changed

4 files changed

+162
-36
lines changed

‎.storybook/intl/translations.json

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
{
2+
"ar": {
3+
"accordion.text": "",
4+
"actionbutton.text": "",
5+
"assetcard.name": "",
6+
"assetlist.file": "",
7+
"badge.label": "",
8+
"button.label": "",
9+
"combobox.text": "",
10+
"fieldlabel.label": "اسم المستخدم",
11+
"helptext.text": "",
12+
"logicbutton.button": "",
13+
"menu.menuItem": "",
14+
"millercolumns.file": "",
15+
"picker.placeholder": "",
16+
"search.value": "",
17+
"tag.label": "",
18+
"textfield.value": "محمد_أحمد",
19+
"treeview.value": ""
20+
},
21+
"en": {
22+
"accordion.text": "",
23+
"actionbutton.text": "",
24+
"assetcard.name": "",
25+
"assetlist.file": "",
26+
"badge.label": "",
27+
"button.label": "",
28+
"combobox.text": "",
29+
"fieldlabel.label": "Username",
30+
"helptext.text": "",
31+
"logicbutton.button": "",
32+
"menu.menuItem": "",
33+
"millercolumns.file": "",
34+
"picker.placeholder": "",
35+
"search.value": "",
36+
"tag.label": "",
37+
"textfield.value": "john_doe",
38+
"treeview.value": ""
39+
},
40+
"fa": {
41+
"accordion.text": "",
42+
"actionbutton.text": "",
43+
"assetcard.name": "",
44+
"assetlist.file": "",
45+
"badge.label": "",
46+
"button.label": "",
47+
"combobox.text": "",
48+
"fieldlabel.label": "نام کاربری",
49+
"helptext.text": "",
50+
"logicbutton.button": "",
51+
"menu.menuItem": "",
52+
"millercolumns.file": "",
53+
"picker.placeholder": "",
54+
"search.value": "",
55+
"tag.label": "",
56+
"textfield.value": "علی_رضا",
57+
"treeview.value": ""
58+
},
59+
"he": {
60+
"accordion.text": "",
61+
"actionbutton.text": "",
62+
"assetcard.name": "",
63+
"assetlist.file": "",
64+
"badge.label": "",
65+
"button.label": "",
66+
"combobox.text": "",
67+
"fieldlabel.label": "שם משתמש",
68+
"helptext.text": "",
69+
"logicbutton.button": "",
70+
"menu.menuItem": "",
71+
"millercolumns.file": "",
72+
"picker.placeholder": "",
73+
"search.value": "",
74+
"tag.label": "",
75+
"textfield.value": "דני123",
76+
"treeview.value": ""
77+
},
78+
"ja": {
79+
"accordion.text": "",
80+
"actionbutton.text": "",
81+
"assetcard.name": "",
82+
"assetlist.file": "",
83+
"badge.label": "",
84+
"button.label": "",
85+
"combobox.text": "",
86+
"fieldlabel.label": "ユーザー名",
87+
"helptext.text": "",
88+
"logicbutton.button": "",
89+
"menu.menuItem": "",
90+
"millercolumns.file": "",
91+
"picker.placeholder": "",
92+
"search.value": "",
93+
"tag.label": "",
94+
"textfield.value": "山田太郎",
95+
"treeview.value": ""
96+
},
97+
"ko": {
98+
"accordion.text": "",
99+
"actionbutton.text": "",
100+
"assetcard.name": "",
101+
"assetlist.file": "",
102+
"badge.label": "",
103+
"button.label": "",
104+
"combobox.text": "",
105+
"fieldlabel.label": "사용자 이름",
106+
"helptext.text": "",
107+
"logicbutton.button": "",
108+
"menu.menuItem": "",
109+
"millercolumns.file": "",
110+
"picker.placeholder": "",
111+
"search.value": "",
112+
"tag.label": "",
113+
"textfield.value": "김철수",
114+
"treeview.value": ""
115+
},
116+
"th": {
117+
"accordion.text": "",
118+
"actionbutton.text": "",
119+
"assetcard.name": "",
120+
"assetlist.file": "",
121+
"badge.label": "",
122+
"button.label": "",
123+
"combobox.text": "",
124+
"fieldlabel.label": "ชื่อผู้ใช้",
125+
"helptext.text": "",
126+
"logicbutton.button": "",
127+
"menu.menuItem": "",
128+
"millercolumns.file": "",
129+
"picker.placeholder": "",
130+
"search.value": "",
131+
"tag.label": "",
132+
"textfield.value": "สมชาย",
133+
"treeview.value": ""
134+
},
135+
"zh": {
136+
"accordion.text": "",
137+
"actionbutton.text": "",
138+
"assetcard.name": "",
139+
"assetlist.file": "",
140+
"badge.label": "",
141+
"button.label": "",
142+
"combobox.text": "",
143+
"fieldlabel.label": "用户名",
144+
"helptext.text": "",
145+
"logicbutton.button": "",
146+
"menu.menuItem": "",
147+
"millercolumns.file": "",
148+
"picker.placeholder": "",
149+
"search.value": "",
150+
"tag.label": "",
151+
"textfield.value": "张伟",
152+
"treeview.value": ""
153+
}
154+
}

‎.storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"./package.json": "./package.json",
2323
"./preview": "./preview.js",
2424
"./templates/*": "./templates/*",
25+
"./translations": "./intl/translations.json",
2526
"./types": "./types/index.js",
2627
"./types/*": "./types/*"
2728
},

‎.storybook/preview.js

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
withReducedMotionWrapper,
99
withTestingPreviewWrapper,
1010
} from "./decorators";
11+
import translations from "./intl/translations.json";
1112
import {
1213
FontLoader,
1314
IconLoader,
@@ -34,6 +35,8 @@ setConsoleOptions({
3435
],
3536
});
3637

38+
export { translations };
39+
3740
/** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
3841
export const parameters = {
3942
layout: "centered",

‎components/textfield/stories/template.js

+4-36
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/templat
22
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
33
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
44
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
5+
import translations from "@spectrum-css/preview/translations";
56
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
67
import { html } from "lit";
78
import { classMap } from "lit/directives/class-map.js";
@@ -300,44 +301,11 @@ export const KeyboardFocusTemplate = (args, context) => Container({
300301
}, context);
301302

302303
export const LocaleWrapper = (args, context) => {
303-
const translations = {
304-
en: {
305-
labelText: "Username",
306-
value: "john_doe",
307-
},
308-
ja: {
309-
labelText: "ユーザー名",
310-
value: "山田太郎",
311-
},
312-
zh: {
313-
labelText: "用户名",
314-
value: "张伟",
315-
},
316-
ko: {
317-
labelText: "사용자 이름",
318-
value: "김철수",
319-
},
320-
ar: {
321-
labelText: "اسم المستخدم",
322-
value: "محمد_أحمد",
323-
},
324-
he: {
325-
labelText: "שם משתמש",
326-
value: "דני123",
327-
},
328-
fa: {
329-
labelText: "نام کاربری",
330-
value: "علی_رضا",
331-
},
332-
th: {
333-
labelText: "ชื่อผู้ใช้",
334-
value: "สมชาย",
335-
},
336-
};
337-
338304
const { lang: contextLang } = context.globals;
339305
const lang = args.lang || contextLang;
340-
const { labelText, value } = translations[lang] ?? translations.en;
306+
const langTranslations = translations[lang] ?? translations.en;
307+
const labelText = langTranslations["fieldlabel.label"];
308+
const value = langTranslations["textfield.value"];
341309

342310
return html`
343311
<div lang=${ifDefined(args.lang)}>

0 commit comments

Comments
 (0)