From 625ad898c51a309c4fcae1e0e0529a9d27e55880 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 25 Mar 2026 13:11:17 +0530 Subject: [PATCH 1/6] Implemented i18n basic setup Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 28 +++++++ packages/i18n/src/config.ts | 30 +++++++ packages/i18n/src/index.ts | 18 +++++ packages/i18n/src/locales/en/common.json | 6 ++ packages/i18n/src/resources.ts | 25 ++++++ packages/i18n/src/types.d.ts | 25 ++++++ packages/i18n/tsconfig.json | 10 +++ .../package.json | 5 ++ .../src/diagram-editor/DiagramEditor.tsx | 6 ++ .../src/i18n.ts | 22 +++++ pnpm-lock.yaml | 80 +++++++++++++++++++ 11 files changed, 255 insertions(+) create mode 100644 packages/i18n/package.json create mode 100644 packages/i18n/src/config.ts create mode 100644 packages/i18n/src/index.ts create mode 100644 packages/i18n/src/locales/en/common.json create mode 100644 packages/i18n/src/resources.ts create mode 100644 packages/i18n/src/types.d.ts create mode 100644 packages/i18n/tsconfig.json create mode 100644 packages/serverless-workflow-diagram-editor/src/i18n.ts diff --git a/packages/i18n/package.json b/packages/i18n/package.json new file mode 100644 index 0000000..d9cd14f --- /dev/null +++ b/packages/i18n/package.json @@ -0,0 +1,28 @@ +{ + "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": "^25.10.4", + "react-i18next": "^16.6.1" + }, + "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..6510661 --- /dev/null +++ b/packages/i18n/src/config.ts @@ -0,0 +1,30 @@ +/* + * 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 function setupI18n(instance: i18n) { + return instance.use(initReactI18next).init({ + resources, + defaultNS, + fallbackLng: "en", + interpolation: { + escapeValue: false, + }, + }); +} diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts new file mode 100644 index 0000000..4eb3dfa --- /dev/null +++ b/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 * 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..0acae75 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": "^25.10.4", + "react-i18next": "^16.6.1" + }, "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) => { +
+ {t("welcome")} {t("start")} {t("setup")}{" "} +
); }; diff --git a/packages/serverless-workflow-diagram-editor/src/i18n.ts b/packages/serverless-workflow-diagram-editor/src/i18n.ts new file mode 100644 index 0000000..c302c02 --- /dev/null +++ b/packages/serverless-workflow-diagram-editor/src/i18n.ts @@ -0,0 +1,22 @@ +/* + * 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"; + +await setupI18n(i18n); + +export default i18n; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5eefd81..5c6af1e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -111,7 +111,33 @@ importers: specifier: 'catalog:' version: 5.9.3 + packages/i18n: + dependencies: + i18next: + specifier: ^25.10.4 + version: 25.10.9(typescript@5.9.3) + react-i18next: + specifier: ^16.6.1 + version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + devDependencies: + '@types/node': + specifier: 'catalog:' + version: 25.5.0 + rimraf: + specifier: 'catalog:' + version: 6.1.3 + packages/serverless-workflow-diagram-editor: + dependencies: + '@serverlessworkflow/i18n': + specifier: workspace:* + version: link:../i18n + i18next: + specifier: ^25.10.4 + version: 25.10.9(typescript@5.9.3) + react-i18next: + specifier: ^16.6.1 + version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) devDependencies: '@chromatic-com/storybook': specifier: 'catalog:' @@ -1611,6 +1637,9 @@ packages: html-escaper@2.0.2: resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==} + html-parse-stringify@3.0.1: + resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==} + http-proxy-agent@7.0.2: resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} engines: {node: '>= 14'} @@ -1624,6 +1653,14 @@ packages: engines: {node: '>=18'} hasBin: true + i18next@25.10.9: + resolution: {integrity: sha512-hQY9/bFoQKGlSKMlaCuLR8w1h5JjieqrsnZvEmj1Ja6Ec7fbyc4cTrCsY9mb9Sd8YQ/swsrKz1S9M8AcvVI70w==} + peerDependencies: + typescript: ^5 || ^6 + peerDependenciesMeta: + typescript: + optional: true + iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} @@ -1865,6 +1902,22 @@ packages: peerDependencies: react: ^19.2.4 + react-i18next@16.6.6: + resolution: {integrity: sha512-ZgL2HUoW34UKUkOV7uSQFE1CDnRPD+tCR3ywSuWH7u2iapnz86U8Bi3Vrs620qNDzCf1F47NxglCEkchCTDOHw==} + peerDependencies: + i18next: '>= 25.10.9' + react: '>= 16.8.0' + react-dom: '*' + react-native: '*' + typescript: ^5 || ^6 + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + typescript: + optional: true + react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -2234,6 +2287,10 @@ packages: jsdom: optional: true + void-elements@3.1.0: + resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} + engines: {node: '>=0.10.0'} + w3c-xmlserializer@5.0.0: resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} engines: {node: '>=18'} @@ -3438,6 +3495,10 @@ snapshots: html-escaper@2.0.2: {} + html-parse-stringify@3.0.1: + dependencies: + void-elements: 3.1.0 + http-proxy-agent@7.0.2: dependencies: agent-base: 7.1.4 @@ -3454,6 +3515,12 @@ snapshots: husky@9.1.7: {} + i18next@25.10.9(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.29.2 + optionalDependencies: + typescript: 5.9.3 + iconv-lite@0.6.3: dependencies: safer-buffer: 2.1.2 @@ -3735,6 +3802,17 @@ snapshots: react: 19.2.4 scheduler: 0.27.0 + react-i18next@16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3): + dependencies: + '@babel/runtime': 7.29.2 + html-parse-stringify: 3.0.1 + i18next: 25.10.9(typescript@5.9.3) + react: 19.2.4 + use-sync-external-store: 1.6.0(react@19.2.4) + optionalDependencies: + react-dom: 19.2.4(react@19.2.4) + typescript: 5.9.3 + react-is@17.0.2: {} react@19.2.4: {} @@ -4060,6 +4138,8 @@ snapshots: transitivePeerDependencies: - msw + void-elements@3.1.0: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 From a3ebcb6acde46a73487a5788294e0b6c0973b622 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 25 Mar 2026 13:36:51 +0530 Subject: [PATCH 2/6] Resolved copilots suggestions Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 2 +- packages/i18n/src/index.ts | 2 ++ packages/serverless-workflow-diagram-editor/src/i18n.ts | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/i18n/package.json b/packages/i18n/package.json index d9cd14f..454125e 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -15,7 +15,7 @@ "scripts": { "clean": "rimraf ./dist", "build": "pnpm clean && tsc -p tsconfig.json", - "build:prod": "pnpm -run build" + "build:prod": "pnpm run build" }, "dependencies": { "i18next": "^25.10.4", diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts index 4eb3dfa..88ff33e 100644 --- a/packages/i18n/src/index.ts +++ b/packages/i18n/src/index.ts @@ -14,5 +14,7 @@ * limitations under the License. */ +import type {} from "./types"; + export * from "./config"; export * from "./resources"; diff --git a/packages/serverless-workflow-diagram-editor/src/i18n.ts b/packages/serverless-workflow-diagram-editor/src/i18n.ts index c302c02..d9d6af0 100644 --- a/packages/serverless-workflow-diagram-editor/src/i18n.ts +++ b/packages/serverless-workflow-diagram-editor/src/i18n.ts @@ -17,6 +17,6 @@ import i18n from "i18next"; import { setupI18n } from "@serverlessworkflow/i18n"; -await setupI18n(i18n); +void setupI18n(i18n); export default i18n; From 6f76d97fe6d6ddfc10e1e2da2bf8434a965e9061 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 25 Mar 2026 13:42:17 +0530 Subject: [PATCH 3/6] Resolved dependency issue Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 6 ++-- .../package.json | 6 ++-- pnpm-lock.yaml | 31 +++++++++++-------- pnpm-workspace.yaml | 2 ++ 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 454125e..7556645 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -17,12 +17,10 @@ "build": "pnpm clean && tsc -p tsconfig.json", "build:prod": "pnpm run build" }, - "dependencies": { - "i18next": "^25.10.4", - "react-i18next": "^16.6.1" - }, "devDependencies": { "@types/node": "catalog:", + "i18next": "catalog:", + "react-i18next": "catalog:", "rimraf": "catalog:" } } diff --git a/packages/serverless-workflow-diagram-editor/package.json b/packages/serverless-workflow-diagram-editor/package.json index 0acae75..4ee1f40 100644 --- a/packages/serverless-workflow-diagram-editor/package.json +++ b/packages/serverless-workflow-diagram-editor/package.json @@ -38,9 +38,7 @@ "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook" }, "dependencies": { - "@serverlessworkflow/i18n": "workspace:*", - "i18next": "^25.10.4", - "react-i18next": "^16.6.1" + "@serverlessworkflow/i18n": "workspace:*" }, "devDependencies": { "@chromatic-com/storybook": "catalog:", @@ -57,11 +55,13 @@ "@types/react-dom": "catalog:", "@vitest/coverage-v8": "catalog:", "@vitest/ui": "catalog:", + "i18next": "catalog:", "jsdom": "catalog:", "oxfmt": "catalog:", "oxlint": "catalog:", "react": "catalog:", "react-dom": "catalog:", + "react-i18next": "catalog:", "rimraf": "catalog:", "storybook": "catalog:", "vite": "catalog:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c6af1e..acf9fdb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -51,6 +51,9 @@ catalogs: husky: specifier: ^9.1.7 version: 9.1.7 + i18next: + specifier: ^25.10.4 + version: 25.10.9 jsdom: specifier: ^25.0.0 version: 25.0.1 @@ -69,6 +72,9 @@ catalogs: react-dom: specifier: ^19.2.4 version: 19.2.4 + react-i18next: + specifier: ^16.6.1 + version: 16.6.6 rimraf: specifier: ^6.1.3 version: 6.1.3 @@ -112,17 +118,16 @@ importers: version: 5.9.3 packages/i18n: - dependencies: - i18next: - specifier: ^25.10.4 - version: 25.10.9(typescript@5.9.3) - react-i18next: - specifier: ^16.6.1 - version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) devDependencies: '@types/node': specifier: 'catalog:' version: 25.5.0 + i18next: + specifier: 'catalog:' + version: 25.10.9(typescript@5.9.3) + react-i18next: + specifier: 'catalog:' + version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) rimraf: specifier: 'catalog:' version: 6.1.3 @@ -132,12 +137,6 @@ importers: '@serverlessworkflow/i18n': specifier: workspace:* version: link:../i18n - i18next: - specifier: ^25.10.4 - version: 25.10.9(typescript@5.9.3) - react-i18next: - specifier: ^16.6.1 - version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) devDependencies: '@chromatic-com/storybook': specifier: 'catalog:' @@ -181,6 +180,9 @@ importers: '@vitest/ui': specifier: 'catalog:' version: 4.1.1(vitest@4.1.1) + i18next: + specifier: 'catalog:' + version: 25.10.9(typescript@5.9.3) jsdom: specifier: 'catalog:' version: 25.0.1 @@ -196,6 +198,9 @@ importers: react-dom: specifier: 'catalog:' version: 19.2.4(react@19.2.4) + react-i18next: + specifier: 'catalog:' + version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) rimraf: specifier: 'catalog:' version: 6.1.3 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 7994462..0a0d1ca 100644 --- a/pnpm-workspace.yaml +++ b/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" From 001c00e249ccba9f5ac98416bc616828443b1b4c Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Wed, 25 Mar 2026 14:03:23 +0530 Subject: [PATCH 4/6] Resolved copilot reviews Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 7 ++++-- packages/i18n/src/config.ts | 15 ++++++++++-- .../package.json | 6 ++--- .../src/i18n.ts | 5 ++-- pnpm-lock.yaml | 24 +++++++++++-------- 5 files changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/i18n/package.json b/packages/i18n/package.json index 7556645..a953284 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -17,10 +17,13 @@ "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:", - "i18next": "catalog:", - "react-i18next": "catalog:", "rimraf": "catalog:" } } diff --git a/packages/i18n/src/config.ts b/packages/i18n/src/config.ts index 6510661..82baefb 100644 --- a/packages/i18n/src/config.ts +++ b/packages/i18n/src/config.ts @@ -18,13 +18,24 @@ import type { i18n } from "i18next"; import { initReactI18next } from "react-i18next"; import { resources, defaultNS } from "./resources"; -export function setupI18n(instance: i18n) { - return instance.use(initReactI18next).init({ +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/serverless-workflow-diagram-editor/package.json b/packages/serverless-workflow-diagram-editor/package.json index 4ee1f40..fbe5a2f 100644 --- a/packages/serverless-workflow-diagram-editor/package.json +++ b/packages/serverless-workflow-diagram-editor/package.json @@ -38,7 +38,9 @@ "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook" }, "dependencies": { - "@serverlessworkflow/i18n": "workspace:*" + "@serverlessworkflow/i18n": "workspace:*", + "i18next": "catalog:", + "react-i18next": "catalog:" }, "devDependencies": { "@chromatic-com/storybook": "catalog:", @@ -55,13 +57,11 @@ "@types/react-dom": "catalog:", "@vitest/coverage-v8": "catalog:", "@vitest/ui": "catalog:", - "i18next": "catalog:", "jsdom": "catalog:", "oxfmt": "catalog:", "oxlint": "catalog:", "react": "catalog:", "react-dom": "catalog:", - "react-i18next": "catalog:", "rimraf": "catalog:", "storybook": "catalog:", "vite": "catalog:", diff --git a/packages/serverless-workflow-diagram-editor/src/i18n.ts b/packages/serverless-workflow-diagram-editor/src/i18n.ts index d9d6af0..18bc5e5 100644 --- a/packages/serverless-workflow-diagram-editor/src/i18n.ts +++ b/packages/serverless-workflow-diagram-editor/src/i18n.ts @@ -17,6 +17,5 @@ import i18n from "i18next"; import { setupI18n } from "@serverlessworkflow/i18n"; -void setupI18n(i18n); - -export default i18n; +const i18nReady = setupI18n(i18n); +export { i18nReady }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index acf9fdb..29da452 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,16 +118,20 @@ importers: version: 5.9.3 packages/i18n: - devDependencies: - '@types/node': - specifier: 'catalog:' - version: 25.5.0 + dependencies: + '@serverlessworkflow/i18n': + specifier: workspace:* + version: 'link:' i18next: specifier: 'catalog:' version: 25.10.9(typescript@5.9.3) react-i18next: specifier: 'catalog:' version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + devDependencies: + '@types/node': + specifier: 'catalog:' + version: 25.5.0 rimraf: specifier: 'catalog:' version: 6.1.3 @@ -137,6 +141,12 @@ importers: '@serverlessworkflow/i18n': specifier: workspace:* version: link:../i18n + i18next: + specifier: 'catalog:' + version: 25.10.9(typescript@5.9.3) + react-i18next: + specifier: 'catalog:' + version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) devDependencies: '@chromatic-com/storybook': specifier: 'catalog:' @@ -180,9 +190,6 @@ importers: '@vitest/ui': specifier: 'catalog:' version: 4.1.1(vitest@4.1.1) - i18next: - specifier: 'catalog:' - version: 25.10.9(typescript@5.9.3) jsdom: specifier: 'catalog:' version: 25.0.1 @@ -198,9 +205,6 @@ importers: react-dom: specifier: 'catalog:' version: 19.2.4(react@19.2.4) - react-i18next: - specifier: 'catalog:' - version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) rimraf: specifier: 'catalog:' version: 6.1.3 From 4cfa4b99ca1b0b40f56359d75dd542ae3a5e4531 Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Fri, 27 Mar 2026 13:44:24 +0530 Subject: [PATCH 5/6] i18n setup provider Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 4 +- packages/i18n/src/TranslationProvider.tsx | 51 +++++++++++++++++++ packages/i18n/src/{config.ts => i18n.ts} | 25 +++++---- packages/i18n/src/index.ts | 6 +-- packages/i18n/src/resources.ts | 25 --------- packages/i18n/src/types.d.ts | 25 --------- packages/i18n/tsconfig.json | 1 + .../src/diagram-editor/DiagramEditor.tsx | 14 ++--- .../src/i18n.ts | 21 -------- pnpm-lock.yaml | 32 +++++++++--- pnpm-workspace.yaml | 6 +-- 11 files changed, 105 insertions(+), 105 deletions(-) create mode 100644 packages/i18n/src/TranslationProvider.tsx rename packages/i18n/src/{config.ts => i18n.ts} (73%) delete mode 100644 packages/i18n/src/resources.ts delete mode 100644 packages/i18n/src/types.d.ts delete mode 100644 packages/serverless-workflow-diagram-editor/src/i18n.ts diff --git a/packages/i18n/package.json b/packages/i18n/package.json index a953284..b983984 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -18,12 +18,14 @@ "build:prod": "pnpm run build" }, "dependencies": { - "@serverlessworkflow/i18n": "workspace:*", "i18next": "catalog:", "react-i18next": "catalog:" }, "devDependencies": { "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "@types/react-i18next": "^8.1.0", "rimraf": "catalog:" } } diff --git a/packages/i18n/src/TranslationProvider.tsx b/packages/i18n/src/TranslationProvider.tsx new file mode 100644 index 0000000..c733d3e --- /dev/null +++ b/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({ + 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 ( + + {children} + + ); +} diff --git a/packages/i18n/src/config.ts b/packages/i18n/src/i18n.ts similarity index 73% rename from packages/i18n/src/config.ts rename to packages/i18n/src/i18n.ts index 82baefb..4d93afa 100644 --- a/packages/i18n/src/config.ts +++ b/packages/i18n/src/i18n.ts @@ -14,28 +14,27 @@ * limitations under the License. */ -import type { i18n } from "i18next"; +import i18n from "i18next"; import { initReactI18next } from "react-i18next"; -import { resources, defaultNS } from "./resources"; -export async function setupI18n(instance: i18n) { - if (instance.isInitialized) { - return instance; - } +import en from "./locales/en/common.json"; - await instance.use(initReactI18next).init({ - resources, - defaultNS, +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, }, }); - - return instance; } + +export default i18n; diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts index 88ff33e..bf2a23c 100644 --- a/packages/i18n/src/index.ts +++ b/packages/i18n/src/index.ts @@ -14,7 +14,5 @@ * limitations under the License. */ -import type {} from "./types"; - -export * from "./config"; -export * from "./resources"; +export { TranslationProvider, useLanguage } from "./TranslationProvider"; +export { default as i18n } from "./i18n"; diff --git a/packages/i18n/src/resources.ts b/packages/i18n/src/resources.ts deleted file mode 100644 index 0cdf52a..0000000 --- a/packages/i18n/src/resources.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * 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 deleted file mode 100644 index 7ef1530..0000000 --- a/packages/i18n/src/types.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* - * 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 index 4444bef..8d11274 100644 --- a/packages/i18n/tsconfig.json +++ b/packages/i18n/tsconfig.json @@ -1,5 +1,6 @@ { "extends": "../../tsconfig.base.json", + "types": ["node"], "compilerOptions": { "outDir": "dist", "rootDir": "src", 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 f497154..988ce79 100644 --- a/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx +++ b/packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx @@ -14,9 +14,9 @@ * limitations under the License. */ -import type { CSSProperties } from "react"; -import "../i18n"; +import { CSSProperties } from "react"; import { useTranslation } from "react-i18next"; +import { TranslationProvider } from "@serverlessworkflow/i18n"; const clickmeBtnStyle: CSSProperties = { border: "2px solid blue", @@ -33,20 +33,20 @@ export type DiagramEditorProps = { }; export const DiagramEditor = (props: DiagramEditorProps) => { - //TODO: Implement the actual component this is just a placeholder const { t } = useTranslation(); - return ( - <> +

Hello from DiagramEditor component!

Read-only: {props.isReadOnly ? "true" : "false"}

Content: {props.content}

+ +
- {t("welcome")} {t("start")} {t("setup")}{" "} + {t("welcome")} {t("start")} {t("setup")}
- + ); }; diff --git a/packages/serverless-workflow-diagram-editor/src/i18n.ts b/packages/serverless-workflow-diagram-editor/src/i18n.ts deleted file mode 100644 index 18bc5e5..0000000 --- a/packages/serverless-workflow-diagram-editor/src/i18n.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * 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 }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29da452..ae1f07e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,7 +34,7 @@ catalogs: specifier: ^14.6.1 version: 14.6.1 '@types/node': - specifier: ^25.3.3 + specifier: ^25.5.0 version: 25.5.0 '@types/react': specifier: ^19.2.14 @@ -52,7 +52,7 @@ catalogs: specifier: ^9.1.7 version: 9.1.7 i18next: - specifier: ^25.10.4 + specifier: ^25.10.9 version: 25.10.9 jsdom: specifier: ^25.0.0 @@ -73,7 +73,7 @@ catalogs: specifier: ^19.2.4 version: 19.2.4 react-i18next: - specifier: ^16.6.1 + specifier: ^16.6.6 version: 16.6.6 rimraf: specifier: ^6.1.3 @@ -119,9 +119,6 @@ importers: packages/i18n: dependencies: - '@serverlessworkflow/i18n': - specifier: workspace:* - version: 'link:' i18next: specifier: 'catalog:' version: 25.10.9(typescript@5.9.3) @@ -132,6 +129,15 @@ importers: '@types/node': specifier: 'catalog:' version: 25.5.0 + '@types/react': + specifier: 'catalog:' + version: 19.2.14 + '@types/react-dom': + specifier: 'catalog:' + version: 19.2.3(@types/react@19.2.14) + '@types/react-i18next': + specifier: ^8.1.0 + version: 8.1.0(i18next@25.10.9(typescript@5.9.3))(react@19.2.4)(typescript@5.9.3) rimraf: specifier: 'catalog:' version: 6.1.3 @@ -1235,6 +1241,10 @@ packages: peerDependencies: '@types/react': ^19.2.0 + '@types/react-i18next@8.1.0': + resolution: {integrity: sha512-d4xhcjX5b3roNMObRNMfb1HinHQlQLPo8xlDj60dnHeeAw2bBymR2cy/l1giJpHzo/ZFgSvgVUvIWr4kCrenCg==} + deprecated: This is a stub types definition. react-i18next provides its own type definitions, so you do not need this installed. + '@types/react@19.2.14': resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==} @@ -3086,6 +3096,16 @@ snapshots: dependencies: '@types/react': 19.2.14 + '@types/react-i18next@8.1.0(i18next@25.10.9(typescript@5.9.3))(react@19.2.4)(typescript@5.9.3)': + dependencies: + react-i18next: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + transitivePeerDependencies: + - i18next + - react + - react-dom + - react-native + - typescript + '@types/react@19.2.14': dependencies: csstype: 3.2.3 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 0a0d1ca..1f54703 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -10,18 +10,20 @@ catalog: "@testing-library/jest-dom": ^6.9.1 "@testing-library/react": ^16.3.2 "@testing-library/user-event": ^14.6.1 - "@types/node": ^25.3.3 + "@types/node": ^25.5.0 "@types/react": ^19.2.14 "@types/react-dom": ^19.2.3 "@vitest/coverage-v8": ^4.1.0 "@vitest/ui": ^4.1.0 husky: ^9.1.7 + i18next: ^25.10.9 jsdom: ^25.0.0 lint-staged: ^16.4.0 oxfmt: ^0.41.0 oxlint: ^1.56.0 react: ^19.2.4 react-dom: ^19.2.4 + react-i18next: ^16.6.6 rimraf: ^6.1.3 storybook: ^10.2.19 syncpack: ^14.2.0 @@ -29,8 +31,6 @@ 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" From a7ed3aa21cfdc992762e69ad184aa5f539e0d07d Mon Sep 17 00:00:00 2001 From: kumaradityaraj Date: Fri, 27 Mar 2026 13:56:51 +0530 Subject: [PATCH 6/6] i18n setup provider error resolve Signed-off-by: kumaradityaraj --- packages/i18n/package.json | 4 ++++ pnpm-lock.yaml | 10 ++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/i18n/package.json b/packages/i18n/package.json index b983984..ce9df34 100644 --- a/packages/i18n/package.json +++ b/packages/i18n/package.json @@ -27,5 +27,9 @@ "@types/react-dom": "catalog:", "@types/react-i18next": "^8.1.0", "rimraf": "catalog:" + }, + "peerDependencies": { + "react": "^19.0.0", + "react-dom": "^19.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ae1f07e..83cf6d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -122,6 +122,12 @@ importers: i18next: specifier: 'catalog:' version: 25.10.9(typescript@5.9.3) + react: + specifier: ^19.0.0 + version: 19.2.4 + react-dom: + specifier: ^19.0.0 + version: 19.2.4(react@19.2.4) react-i18next: specifier: 'catalog:' version: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) @@ -137,7 +143,7 @@ importers: version: 19.2.3(@types/react@19.2.14) '@types/react-i18next': specifier: ^8.1.0 - version: 8.1.0(i18next@25.10.9(typescript@5.9.3))(react@19.2.4)(typescript@5.9.3) + version: 8.1.0(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) rimraf: specifier: 'catalog:' version: 6.1.3 @@ -3096,7 +3102,7 @@ snapshots: dependencies: '@types/react': 19.2.14 - '@types/react-i18next@8.1.0(i18next@25.10.9(typescript@5.9.3))(react@19.2.4)(typescript@5.9.3)': + '@types/react-i18next@8.1.0(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)': dependencies: react-i18next: 16.6.6(i18next@25.10.9(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) transitivePeerDependencies: