IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components Added i18n in storybook and fixed keys

Browse Source
This commit is contained in:
Akmal Isomadinov 2023-09-11 18:31:06 +05:00
parent 74f1425a51
commit 28035d391e
10 changed files with 177 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/components/.storybook/decorators/i18nextStoryDecorator.js Normal file
View File

@ -0,0 +1,26 @@
import { I18nextProvider } from "react-i18next";
import React, { useEffect, Suspense } from "react";
import i18n from "../i18n";
const i18nextStoryDecorator = (Story, context) => {
const { locale } = context.globals;
// When the locale global changes
// Set the new locale in i18n
useEffect(() => {
i18n.changeLanguage(locale);
}, [locale]);
return (
// here catches the suspense from components not yet ready (still loading translations)
// alternative set useSuspense false on i18next.options.react when initializing i18next
<Suspense fallback={<div>loading translations...</div>}>
<I18nextProvider i18n={i18n}>
<Story />
</I18nextProvider>
</Suspense>
);
};
export default i18nextStoryDecorator;

13
packages/components/.storybook/globals/index.js
View File

@ -9,6 +9,19 @@ const globalTypes = {
dynamicTitle: true,
},
},
locale: {
name: "Locale",
description: "Internationalization locale",
toolbar: {
icon: "globe",
items: [
{ value: "en", title: "English" },
{ value: "ru", title: "Русский" },
],
showName: true,
},
},
};
export default globalTypes;

109
packages/components/.storybook/i18n.js Normal file
View File

@ -0,0 +1,109 @@
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";
import i18n from "i18next";
const newInstance = i18n.createInstance();
newInstance
.use(HttpBackend)
.use(initReactI18next)
.init({
backend: {
backendOptions: [
{
loadPath: "../../client/public/locales/{{lng}}/{{ns}}.json",
},
{
loadPath: "../../../public/locales/{{lng}}/{{ns}}.json",
},
],
},
// resources: {
// en: {
// Common: {
// EveryYear: "Every year",
// EveryMonth: "Every month",
// EveryDay: "Every day",
// EveryWeek: "Every week",
// EveryHour: "Every hour",
// EveryMinute: "Every minute",
// In: "in",
// At: "at",
// On: "on",
// And: "and",
// EveryDayOfTheMonth: "Every day of the month",
// DayOfTheMonth: "Day of the month",
// EveryDayOfTheWeek: "Every day of the week",
// DayOfTheWeek: "Day of the week",
// JAN: "JAN",
// FEB: "FEB",
// MAR: "MAR",
// APR: "APR",
// MAY: "MAY",
// JUN: "JUN",
// JUL: "JUL",
// AUG: "AUG",
// SEP: "SEP",
// OCT: "OCT",
// NOV: "NOV",
// DEC: "DEC",
// SUN: "SUN",
// MON: "MON",
// TUE: "TUE",
// WED: "WED",
// THU: "THU",
// FRI: "FRI",
// SAT: "SAT",
// },
// },
// ru: {
// Common: {
// EveryYear: "Каждый год",
// EveryMonth: "Каждый месяц",
// EveryDay: "Каждый день",
// EveryWeek: "Каждую неделю",
// EveryHour: "Каждый час",
// EveryMinute: "Каждую минуту",
// In: "В",
// At: "В",
// On: "На",
// And: "и",
// EveryDayOfTheMonth: "Каждый день месяца",
// DayOfTheMonth: "Day of the month",
// EveryDayOfTheWeek: "Каждый день недели",
// DayOfTheWeek: "Day of the week",
// JAN: "Январь",
// FEB: "Февраль",
// MAR: "Март",
// APR: "Апрель",
// MAY: "Май",
// JUN: "Июнь",
// JUL: "Июль",
// AUG: "Август",
// SEP: "Сентябрь",
// OCT: "Октябрь",
// NOV: "Ноябрь",
// DEC: "Декабрь",
// SUN: "Воскресенье",
// MON: "Общие",
// TUE: "Вторник",
// WED: "Среда",
// THU: "Четверг",
// FRI: "Пятница",
// SAT: "Суббота",
// },
// },
// },
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
export default newInstance;

3
packages/components/.storybook/preview.js
View File

@ -11,6 +11,8 @@ import lightTheme from "./lightTheme";
import darkTheme from "./darkTheme";
import StorybookGlobalStyles from "./styles/StorybookGlobalStyles";
import i18nextStoryDecorator from "./decorators/i18nextStoryDecorator";
const preview = {
globalTypes,
parameters: {
@ -46,6 +48,7 @@ const preview = {
</ThemeWrapper>
);
},
i18nextStoryDecorator,
],
};

54
packages/components/Cron/Cron.stories.tsx
View File

@ -1,62 +1,10 @@
import React, { useEffect, useMemo, useState } from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { initReactI18next } from "react-i18next";
import i18n from "i18next";
import Cron, { getNextSynchronization } from ".";
import TextInput from "../text-input/text-input";
import Button from "../button";
i18n.use(initReactI18next).init({
resources: {
en: {
Common: {
EveryYear: "Every year",
EveryMonth: "Every month",
EveryDay: "Every day",
EveryWeek: "Every week",
EveryHour: "Every hour",
EveryMinute: "Every minute",
In: "in",
At: "at",
On: "on",
And: "and",
EveryDayOfTheMonth: "Every day of the month",
DayOfTheMonth: "Day of the month",
EveryDayOfTheWeek: "Every day of the week",
DayOfTheWeek: "Day of the week",
JAN: "JAN",
FEB: "FEB",
MAR: "MAR",
APR: "APR",
MAY: "MAY",
JUN: "JUN",
JUL: "JUL",
AUG: "AUG",
SEP: "SEP",
OCT: "OCT",
NOV: "NOV",
DEC: "DEC",
SUN: "SUN",
MON: "MON",
TUE: "TUE",
WED: "WED",
THU: "THU",
FRI: "FRI",
SAT: "SAT",
},
},
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
type CronType = typeof Cron;
type Story = StoryObj<CronType>;
@ -125,7 +73,7 @@ export const Default: Story = {
scale={false}
/>
{/*@ts-ignore*/}
<Button size="small" label={"Set value"} onClick={onClick} />
<Button size="small" primary label={"Set value"} onClick={onClick} />
</div>
<Cron value={cron} setValue={setValue} onError={onError} />

2
packages/components/Cron/Cron.tsx
View File

@ -90,7 +90,7 @@ function Cron({ value = defaultCronString, setValue, onError }: CronProps) {
};
}, [period]);
const units = useMemo(() => getUnits(t), []);
const units = useMemo(() => getUnits(t), [t]);
return (
<CronWrapper>

2
packages/components/Cron/Field/Hours/Hours.tsx
View File

@ -10,7 +10,7 @@ function Hours({ hours, setHours, unit, t }: HoursProps) {
setValue={setHours}
placeholder={t("EveryHour")}
unit={unit}
prefix={t("at")}
prefix={t("At")}
dropDownMaxHeight={300}
/>
);

4
packages/components/Cron/Field/Period/Period.tsx
View File

@ -10,10 +10,10 @@ function Period({ period = "Hour", setPeriod, t }: PeriodProps) {
setPeriod(arg.key);
};
const options = useMemo(() => getOptions(t), []);
const options = useMemo(() => getOptions(t), [t]);
const selectedOption = useMemo(
() => ({ key: period, label: getLabel(period, t) }),
[period]
[period, t]
);
return (

1
packages/components/package.json
View File

@ -96,6 +96,7 @@
"eslint-plugin-jest": "^26.9.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-storybook": "^0.6.12",
"i18next-http-backend": "^2.2.2",
"jest": "^24.9.0",
"jest-enzyme": "^7.1.2",
"jest-junit": "^10.0.0",

21
yarn.lock
View File

@ -3219,6 +3219,7 @@ __metadata:
fast-deep-equal: ^3.1.3
framer-motion: ^4.1.17
html-to-react: ^1.5.0
i18next-http-backend: ^2.2.2
jest: ^24.9.0
jest-enzyme: ^7.1.2
jest-junit: ^10.0.0
@ -12049,6 +12050,15 @@ __metadata:
languageName: node
linkType: hard
"cross-fetch@npm:3.1.6":
version: 3.1.6
resolution: "cross-fetch@npm:3.1.6"
dependencies:
node-fetch: ^2.6.11
checksum: 704b3519ab7de488328cc49a52cf1aa14132ec748382be5b9557b22398c33ffa7f8c2530e8a97ed8cb55da52b0a9740a9791d361271c4591910501682d981d9c
languageName: node
linkType: hard
"cross-fetch@npm:^3.1.5":
version: 3.1.8
resolution: "cross-fetch@npm:3.1.8"
@ -15835,6 +15845,15 @@ __metadata:
languageName: node
linkType: hard
"i18next-http-backend@npm:^2.2.2":
version: 2.2.2
resolution: "i18next-http-backend@npm:2.2.2"
dependencies:
cross-fetch: 3.1.6
checksum: b098cf89e685bf8f2487a3cfd2e792d85218620b8311c91cc0782f2af03420e518c5d8e899cd9011af3472837362556d7468ff38c890aaf98d2721419a901434
languageName: node
linkType: hard
"i18next@npm:^20.6.1":
version: 20.6.1
resolution: "i18next@npm:20.6.1"
@ -19733,7 +19752,7 @@ __metadata:
languageName: node
linkType: hard
"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.12, node-fetch@npm:^2.6.5, node-fetch@npm:^2.6.7":
"node-fetch@npm:^2.0.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.11, node-fetch@npm:^2.6.12, node-fetch@npm:^2.6.5, node-fetch@npm:^2.6.7":
version: 2.7.0
resolution: "node-fetch@npm:2.7.0"
dependencies: