Web:Components:Cron Removed global translates and added local translates

packages/components/.storybook/decorators/i18nextStoryDecorator.js

@@ -1,17 +1,9 @@
 import { I18nextProvider } from "react-i18next";
-import React, { useEffect, Suspense } from "react";
+import React, { 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]);
-
+const i18nextStoryDecorator = (Story) => {
   return (
     // here catches the suspense from components not yet ready (still loading translations)
     // alternative set useSuspense false on i18next.options.react when initializing i18next

packages/components/.storybook/globals/index.js

@@ -9,47 +9,6 @@ const globalTypes = {
       dynamicTitle: true,
     },
   },
-
-  locale: {
-    name: "Locale",
-    description: "Internationalization locale",
-    toolbar: {
-      icon: "globe",
-      defaultValue: "en",
-      dynamicTitle: true,
-      showName: true,
-      items: [
-        { value: "ar-SA", title: "عربي (المملكة العربية السعودية)" },
-        { value: "az", title: "Azərbaycan (Latın, Azərbaycan)" },
-        { value: "bg", title: "Български (България)" },
-        { value: "cs", title: "Český (Česká republika)" },
-        { value: "de", title: "Deutsch (Deutschland)" },
-        { value: "el-GR", title: "Ελληνικά (Ελλάδα)" },
-        { value: "en", title: "English" },
-        { value: "es", title: "Español (España)" },
-        { value: "fi", title: "Suomi (Suomi)" },
-        { value: "fr", title: "Français (France)" },
-        { value: "hy-AM", title: "Հայերեն (Հայաստան)" },
-        { value: "it", title: "Italiano (Italia)" },
-        { value: "ja-JP", title: "日本語（日本）" },
-        { value: "ko-KR", title: "한국어(대한민국)" },
-        { value: "lo-LA", title: "ພາສາລາວ" },
-        { value: "lv", title: "Latviešu (Latvija)" },
-        { value: "nl", title: "Nederlands (Nederland)" },
-        { value: "pl", title: "Polski (Polska)" },
-        { value: "pt", title: "Português (Portugal)" },
-        { value: "pt-BR", title: "Português (Brasil)" },
-        { value: "ro", title: "Română (România)" },
-        { value: "ru", title: "Русский" },
-        { value: "sk", title: "Slovenčina (Slovensko)" },
-        { value: "sl", title: "Slovensko (Slovenija)" },
-        { value: "tr", title: "Türkçe (Türkiye)" },
-        { value: "uk-UA", title: "Українська (Україна)" },
-        { value: "vi", title: "Tiếng Việt (Việt Nam)" },
-        { value: "zh-CN", title: "中文（简体，中国）" },
-      ],
-    },
-  },
 };
 
 export default globalTypes;

packages/components/.storybook/i18n.js

@@ -8,6 +8,9 @@ newInstance
   .use(HttpBackend)
   .use(initReactI18next)
   .init({
+    load: "currentOnly",
+    ns: ["Common"],
+    defaultNS: "Common",
     backend: {
       backendOptions: [
         {

packages/components/.storybook/preview.js

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

packages/components/Cron/Cron.stories.tsx

@@ -1,14 +1,45 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { useTranslation } from "react-i18next";
+import i18nextStoryDecorator from "../.storybook/decorators/i18nextStoryDecorator";
 
 import Cron, { getNextSynchronization } from ".";
 import TextInput from "../text-input/text-input";
 import Button from "../button";
+import CronProps from "./Cron.props";
 
-type CronType = typeof Cron;
+type CronType = FC<{ locale: string } & CronProps>;
 
 type Story = StoryObj<CronType>;
 
+const locales = [
+  "az",
+  "ar-SA",
+  "zh-cn",
+  "cs",
+  "nl",
+  "en",
+  "fi",
+  "fr",
+  "de",
+  "de-ch",
+  "el",
+  "it",
+  "ja",
+  "ko",
+  "lv",
+  "pl",
+  "pt",
+  "pt-br",
+  "ru",
+  "sk",
+  "sl",
+  "es",
+  "tr",
+  "uk",
+  "vi",
+];
+
 const meta: Meta<CronType> = {
   title: "Components/Cron",
   component: Cron,
@@ -23,21 +54,29 @@ const meta: Meta<CronType> = {
       description:
         "Triggered when the cron component detects an error with the value.",
     },
+    locale: { control: "select", options: locales },
   },
+  decorators: [i18nextStoryDecorator],
 };
 
 export default meta;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    locale: "en",
+  },
+
+  render: ({ value: defaultValue, locale }) => {
+    const { i18n } = useTranslation();
 
-  render: ({ value: defaultValue }, context) => {
     const [input, setInput] = useState(defaultValue);
 
     const [cron, setCron] = useState(defaultValue);
     const [error, setError] = useState<Error>();
 
-    const { locale } = context.globals;
+    useEffect(() => {
+      i18n.changeLanguage(locale);
+    }, [locale]);
 
     const onError = (error?: Error) => {
       setError(error);