Add localization (i18n) support #15

packages/i18n/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@serverlessworkflow/i18n",
+  "version": "1.0.0",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build": "pnpm clean && tsc -p tsconfig.json",
+    "build:prod": "pnpm run build"
+  },
+  "dependencies": {
+    "i18next": "catalog:",
+    "react-i18next": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/react-i18next": "^8.1.0",
+    "rimraf": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

packages/i18n/src/TranslationProvider.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
+
+type LanguageContextType = {
+  language: string;
+  changeLanguage: (lng: string) => void;
+};
+
+const LanguageContext = createContext<LanguageContextType>({
+  language: "en",
+  changeLanguage: () => {},
+});
+
+export const useLanguage = () => useContext(LanguageContext);
+
+export function TranslationProvider({ children }: { children: React.ReactNode }) {
+  const [language, setLanguage] = useState(i18n.language);
+
+  useEffect(() => {
+    const handler = (lng: string) => setLanguage(lng);
+    i18n.on("languageChanged", handler);
+    return () => i18n.off("languageChanged", handler);
+  }, []);
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, changeLanguage }}>
+      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+    </LanguageContext.Provider>
+  );
+}

packages/i18n/src/i18n.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import en from "./locales/en/common.json";
+
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next).init({
+    resources: {
+      en: { common: en },
+    },
+    lng: "en",
+    fallbackLng: "en",
+    ns: ["common"],
+    defaultNS: "common",
+    interpolation: {
+      escapeValue: false,
+    },
+    react: {
+      useSuspense: false,
+    },
+  });
+}
+
+export default i18n;

packages/i18n/src/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { TranslationProvider, useLanguage } from "./TranslationProvider";
+export { default as i18n } from "./i18n";

packages/i18n/src/locales/en/common.json

@@ -0,0 +1,6 @@
+{
+  "hello": "Hello",
+  "welcome": "Welcome to the editor",
+  "setup": "Setup",
+  "start": "Start"
+}

packages/i18n/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "types": ["node"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src"]
+}

packages/serverless-workflow-diagram-editor/package.json

@@ -37,6 +37,11 @@
     "start": "storybook dev -p 6006 --no-open",
     "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook"
   },
+  "dependencies": {
+    "@serverlessworkflow/i18n": "workspace:*",
+    "i18next": "catalog:",
+    "react-i18next": "catalog:"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",
     "@storybook/addon-a11y": "catalog:",

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import type { CSSProperties } from "react";
+import { CSSProperties } from "react";
+import { useTranslation } from "react-i18next";
+import { TranslationProvider } from "@serverlessworkflow/i18n";
 
 const clickmeBtnStyle: CSSProperties = {
   border: "2px solid blue",
@@ -31,16 +33,20 @@ export type DiagramEditorProps = {
 };
 
 export const DiagramEditor = (props: DiagramEditorProps) => {
-  //TODO: Implement the actual component this is just a placeholder
-
+  const { t } = useTranslation();
   return (
-    <>
+    <TranslationProvider>
       <h1>Hello from DiagramEditor component!</h1>
       <p>Read-only: {props.isReadOnly ? "true" : "false"}</p>
       <p>Content: {props.content}</p>
+
       <button style={clickmeBtnStyle} onClick={() => alert("Hello from Diagram!")}>
         Click me!
       </button>
-    </>
+
+      <div>
+        {t("welcome")} {t("start")} {t("setup")}
+      </div>
+    </TranslationProvider>
   );
 };