diff --git a/packages/i18n/package.json b/packages/i18n/package.json
new file mode 100644
index 0000000..a953284
--- /dev/null
+++ b/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:"
+ }
+}
diff --git a/packages/i18n/src/config.ts b/packages/i18n/src/config.ts
new file mode 100644
index 0000000..82baefb
--- /dev/null
+++ b/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;
+}
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
new file mode 100644
index 0000000..88ff33e
--- /dev/null
+++ b/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";
diff --git a/packages/i18n/src/locales/en/common.json b/packages/i18n/src/locales/en/common.json
new file mode 100644
index 0000000..7f9d457
--- /dev/null
+++ b/packages/i18n/src/locales/en/common.json
@@ -0,0 +1,6 @@
+{
+ "hello": "Hello",
+ "welcome": "Welcome to the editor",
+ "setup": "Setup",
+ "start": "Start"
+}
diff --git a/packages/i18n/src/resources.ts b/packages/i18n/src/resources.ts
new file mode 100644
index 0000000..0cdf52a
--- /dev/null
+++ b/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";
diff --git a/packages/i18n/src/types.d.ts b/packages/i18n/src/types.d.ts
new file mode 100644
index 0000000..7ef1530
--- /dev/null
+++ b/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"];
+ }
+}
diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json
new file mode 100644
index 0000000..4444bef
--- /dev/null
+++ b/packages/i18n/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "rootDir": "src",
+ "declaration": true,
+ "emitDeclarationOnly": false
+ },
+ "include": ["src"]
+}
diff --git a/packages/serverless-workflow-diagram-editor/package.json b/packages/serverless-workflow-diagram-editor/package.json
index de855e0..fbe5a2f 100644
--- a/packages/serverless-workflow-diagram-editor/package.json
+++ b/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:",
diff --git a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx
index a896f45..f497154 100644
--- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx
+++ b/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) => {
+