diff --git a/packages/i18n/package.json b/packages/i18n/package.json new file mode 100644 index 0000000..ce9df34 --- /dev/null +++ b/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" + } +} 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/i18n.ts b/packages/i18n/src/i18n.ts new file mode 100644 index 0000000..4d93afa --- /dev/null +++ b/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; diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts new file mode 100644 index 0000000..bf2a23c --- /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 { TranslationProvider, useLanguage } from "./TranslationProvider"; +export { default as i18n } from "./i18n"; 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/tsconfig.json b/packages/i18n/tsconfig.json new file mode 100644 index 0000000..8d11274 --- /dev/null +++ b/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"] +} 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..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,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 ( - <> +

Hello from DiagramEditor component!

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

Content: {props.content}

+ - + +
+ {t("welcome")} {t("start")} {t("setup")} +
+ ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5eefd81..83cf6d5 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 @@ -51,6 +51,9 @@ catalogs: husky: specifier: ^9.1.7 version: 9.1.7 + i18next: + specifier: ^25.10.9 + 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.6 + version: 16.6.6 rimraf: specifier: ^6.1.3 version: 6.1.3 @@ -111,7 +117,48 @@ importers: specifier: 'catalog:' version: 5.9.3 + packages/i18n: + dependencies: + 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) + devDependencies: + '@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-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3) + rimraf: + specifier: 'catalog:' + version: 6.1.3 + packages/serverless-workflow-diagram-editor: + dependencies: + '@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:' @@ -1200,6 +1247,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==} @@ -1611,6 +1662,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 +1678,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 +1927,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 +2312,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'} @@ -3020,6 +3102,16 @@ snapshots: dependencies: '@types/react': 19.2.14 + '@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: + - i18next + - react + - react-dom + - react-native + - typescript + '@types/react@19.2.14': dependencies: csstype: 3.2.3 @@ -3438,6 +3530,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 +3550,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 +3837,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 +4173,8 @@ snapshots: transitivePeerDependencies: - msw + void-elements@3.1.0: {} + w3c-xmlserializer@5.0.0: dependencies: xml-name-validator: 5.0.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 7994462..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