Add localization (i18n) support #15

packages/i18n/package.json

@@ -0,0 +1,29 @@
+{
+  "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": {
+    "@serverlessworkflow/i18n": "workspace:*",
+    "i18next": "catalog:",
+    "react-i18next": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "rimraf": "catalog:"
+  }
+}

packages/i18n/src/config.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 type { i18n } from "i18next";
+import { initReactI18next } from "react-i18next";
+import { resources, defaultNS } from "./resources";
+
+export async function setupI18n(instance: i18n) {
+  if (instance.isInitialized) {
+    return instance;
+  }
+
+  await instance.use(initReactI18next).init({
+    resources,
+    defaultNS,
+    fallbackLng: "en",
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    react: {
+      useSuspense: false,
+    },
+  });
+
+  return instance;
+}

packages/i18n/src/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 type {} from "./types";
+
+export * from "./config";
+export * from "./resources";

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

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

packages/i18n/src/resources.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 enCommon from "./locales/en/common.json";
+
+export const resources = {
+  en: {
+    common: enCommon,
+  },
+} as const;
+
+export const defaultNS = "common";

packages/i18n/src/types.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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-i18next";
+import { resources, defaultNS } from "./resources";
+
+declare module "react-i18next" {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: (typeof resources)["en"];
+  }
+}

packages/i18n/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "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

@@ -15,6 +15,8 @@
  */
 
 import type { CSSProperties } from "react";
+import "../i18n";
+import { useTranslation } from "react-i18next";
 
 const clickmeBtnStyle: CSSProperties = {
   border: "2px solid blue",
@@ -32,6 +34,7 @@ export type DiagramEditorProps = {
 
 export const DiagramEditor = (props: DiagramEditorProps) => {
   //TODO: Implement the actual component this is just a placeholder
+  const { t } = useTranslation();
 
   return (
     <>
@@ -41,6 +44,9 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
       <button style={clickmeBtnStyle} onClick={() => alert("Hello from Diagram!")}>
         Click me!
       </button>
+      <div>
+        {t("welcome")} {t("start")} {t("setup")}{" "}
+      </div>
     </>
   );
 };

packages/serverless-workflow-diagram-editor/src/i18n.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { setupI18n } from "@serverlessworkflow/i18n";
+
+const i18nReady = setupI18n(i18n);
+export { i18nReady };

pnpm-workspace.yaml

@@ -29,6 +29,8 @@ catalog:
   vite: ^6.0.0
   vite-tsconfig-paths: ^6.1.1
   vitest: ^4.1.0
+  i18next: ^25.10.4
+  react-i18next: ^16.6.1
 cleanupUnusedCatalogs: true
 onlyBuiltDependencies:
   - "@swc/core"