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,9 @@
     "start": "storybook dev -p 6006 --no-open",
     "build:storybook": "pnpm clean:storybook && storybook build --output-dir ./dist-storybook"
   },
+  "dependencies": {
+    "@serverlessworkflow/i18n": "workspace:*"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",
     "@storybook/addon-a11y": "catalog:",

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

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import type { CSSProperties } from "react";
+import { CSSProperties } from "react";
+import {
+  swdEditorDictionaries,
+  SwdEditorI18nContext,
+  swdEditorI18nDefaults,
+  useSwdEditorI18n,
+} from "../i18n";
+import { I18nDictionariesProvider } from "@serverlessworkflow/i18n/dist/react-components";
 
 const clickmeBtnStyle: CSSProperties = {
   border: "2px solid blue",
@@ -28,19 +35,36 @@ const clickmeBtnStyle: CSSProperties = {
 export type DiagramEditorProps = {
   content: string;
   isReadOnly: boolean;
+  locale: string;
 };
 
 export const DiagramEditor = (props: DiagramEditorProps) => {
-  //TODO: Implement the actual component this is just a placeholder
+  return (
+    <I18nDictionariesProvider
+      defaults={swdEditorI18nDefaults}
+      dictionaries={swdEditorDictionaries}
+      initialLocale={props.locale}
+      ctx={SwdEditorI18nContext}
+    >
+      <DiagramEditorInner {...props} />
+    </I18nDictionariesProvider>
+  );
+};
+
+const DiagramEditorInner = (props: DiagramEditorProps) => {
+  const { i18n } = useSwdEditorI18n();
 
   return (
     <>
       <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>
+
+      <p>{i18n.hello}</p>
     </>
   );
 };

packages/serverless-workflow-diagram-editor/src/i18n/SwdEditorI18n.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 { ReferenceDictionary } from "@serverlessworkflow/i18n/dist/core";
+
+interface SwdEditorDictionary extends ReferenceDictionary<{}> {}
+
+export interface SwdEditorI18n extends SwdEditorDictionary {}
+
+export interface SwdEditorI18n {
+  hello: string;
+}

packages/serverless-workflow-diagram-editor/src/i18n/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 "./SwdEditorI18n";
+export * from "./setup";

packages/serverless-workflow-diagram-editor/src/i18n/locales/en.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 { SwdEditorI18n } from "../SwdEditorI18n";
+
+export const en: SwdEditorI18n = {
+  hello: "Welcome to the editor",
+};

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

@@ -0,0 +1,17 @@
+/*
+ * 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 { en } from "./en";

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

@@ -0,0 +1,35 @@
+/*
+ * 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 * as React from "react";
+import { useContext } from "react";
+import { en } from "./locales";
+import { I18nContextType } from "@serverlessworkflow/i18n/dist/react-components";
+import { SwdEditorI18n } from "./SwdEditorI18n";
+import { I18nDefaults, I18nDictionaries } from "@serverlessworkflow/i18n/dist/core";
+
+export const swdEditorI18nDefaults: I18nDefaults<SwdEditorI18n> = {
+  locale: "en",
+  dictionary: en,
+};
+export const swdEditorDictionaries: I18nDictionaries<SwdEditorI18n> = new Map([["en", en]]);
+export const SwdEditorI18nContext = React.createContext<I18nContextType<SwdEditorI18n>>(
+  {} as never,
+);
+
+export function useSwdEditorI18n(): I18nContextType<SwdEditorI18n> {
+  return useContext(SwdEditorI18nContext);
+}