@deriv-com/translations 0.0.0-development

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 deriv.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# `@deriv-com/translations`
+
+This is a localization library that uses `i18next`, `react-i18next`, and a custom OTA SDK for translations.
+
+**In this document**
+
+- [Overview](#overview)
+- [Requirements](#requirements)
+- [Setup](#setup)
+- [Usage](#usage)
+    - [`initializeI18n`](#initializei18n)
+    - [`<Localize />`](#localize-component-example)
+    - [~~`localize`~~](#localize-example)
+    - [`useTranslations` Hook](#usetranslations-hook)
+- [Syncing translations to CDN](#syncing-translations)
+- [Contributing](#contributing)
+
+## Overview
+
+![image](https://github.com/amir-deriv/translations/assets/129206554/e303f0cb-e15f-41e9-92ad-f930e43c484b)
+
+
+## Requirements
+
+The stored translation directory must have the following structure:
+`{{ BASE_URL }}/translations/{lang}.json`
+
+base_url is the cdnUrl passed to the `initializeI18n` function, and lang is the language code. Refer to the [example](#initializei18n)
+
+## Getting Started
+
+Install the package by running:
+
+```bash
+npm install @deriv-com/translations
+```
+
+### Setup
+
+- initialize translations in main component by importing and calling `initializeI18n` outside of the component function
+- pass the return value to the `TranslationProvider` component from `@deriv-com/translations`.
+- pass default language to the `TranslationProvider` component.
+
+```jsx
+    import { initializeI18n, TranslationProvider } from '@deriv/translations';
+    ...
+    const i18nInstance = initializeI18n({ cdnUrl: 'https://cdn.example.com' })
+
+    const App = () => {
+        ...
+        return (
+            <TranslationProvider defaultLang={'EN'} i18nInstance={i18nInstance}>
+                <App />
+            </TranslationProvider>
+        )
+    }
+
+```
+
+## Usage
+
+### `initializeI18n`
+
+The `initializeI18n` function initializes the `i18next` instance with the OTA SDK, `react-i18next`, and a language detector. It takes an object with a cdnUrl property, which is the URL of the CDN where the translations are stored.
+
+```javascript
+import initializeI18n from "@deriv-com/translations";
+
+initializeI18n({ cdnUrl: "https://cdn.example.com" });
+```
+
+- For strings use either `localize(...)` or `<Localize />`
+
+### `Localize` component example:
+
+```jsx
+import { Localize } from "@deriv-com/translations";
+
+<Localize
+  i18n_default_text="You cannot use your real money account with {{website_name}} at this time."
+  values={{ website_name }}
+/>;
+```
+
+### ~~`localize`~~ example:
+
+> Note that the `localize` function is deprecated and should be replaced with the `useTranslations` hook or the `Localize` component. the example of the `localize` function is provided for backward compatibility.
+
+```jsx
+import { localize } from "@deriv-com/translations";
+
+<h4 className="drawer__notifications-header">
+  {localize("all notifications")}
+</h4>;
+```
+
+### `useTranslations` Hook
+
+The useTranslations hook is a custom hook that adds some more returned values on top of the `useTranslation` hook from `react-i18next`. It can be used to translate strings in your components, toggle the language of the app and see the current language etc.
+
+Example usage:
+
+```javascript
+import { useTranslations } from "@username/package";
+
+const MyComponent = () => {
+  const { localize, switchLanguage, currentLang } = useTranslations();
+
+  const handleLanguageChange = () => {
+    switchLanguage(currentLang === "EN" ? "DE" : "EN");
+  };
+
+  return <p onClick={handleLanguageChange}>{localize("Change language")}</p>;
+};
+```
+
+## Syncing translations
+
+There is a github action that syncs the translations from Crowdin to the CDN.
+
+The action takes following inputs:
+
+- `CROWDIN_BRANCH_NAME`: Running on production, test or staging etc
+- `CROWDIN_PROJECT_ID`: Crowdin project ID which can be found in the crowdin project settings
+- `CROWDIN_PERSONAL_TOKEN`: Crowdin personal token which can be found in the crowdin account settings
+- `R2_ACCOUNT_ID`: R2 account ID from the Cloudflare R2 dashboard
+- `R2_ACCESS_KEY_ID`: R2 access key ID from the Cloudflare R2 dashboard
+- `R2_SECRET_ACCESS_KEY`: R2 secret access key from the Cloudflare R2 dashboard
+- `R2_BUCKET_NAME`: R2 bucket name from the Cloudflare R2 dashboard
+
+Refer to the action file [here](https://github.com/deriv-com/shared-actions/blob/master/.github/actions/sync_crowdin_translation_with_cloudflare/action.yml)
+
+## Contributing
+
+Contributions are welcome. Please open a pull request with your changes.

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Localize } from "./localize";

package/dist/components/index.js

@@ -0,0 +1,9 @@
+import { default as e } from "./localize.js";
+import "react/jsx-runtime";
+import "react";
+import "../utils-L82GdMuf.js";
+import "../i18nInstance-I4t--qpO.js";
+import "../context-NlNsLXrG.js";
+export {
+  e as Localize
+};

package/dist/components/localize.d.ts

@@ -0,0 +1,9 @@
+type TLocalizeProps = {
+    i18n_default_text: string;
+    values?: object;
+    components?: JSX.Element[];
+    options?: Record<string, unknown>;
+    shouldUnescape?: boolean;
+};
+export default function Localize({ i18n_default_text, values, components, options, shouldUnescape, }: TLocalizeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/localize.js

@@ -0,0 +1,365 @@
+import { jsx as z } from "react/jsx-runtime";
+import { createElement as T, isValidElement as K, Fragment as M, cloneElement as _, Children as J, useContext as U } from "react";
+import { w as X, b as H } from "../utils-L82GdMuf.js";
+import { g as Y, b as I } from "../i18nInstance-I4t--qpO.js";
+import { I as Z } from "../context-NlNsLXrG.js";
+function q(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var G = {
+  area: !0,
+  base: !0,
+  br: !0,
+  col: !0,
+  embed: !0,
+  hr: !0,
+  img: !0,
+  input: !0,
+  link: !0,
+  meta: !0,
+  param: !0,
+  source: !0,
+  track: !0,
+  wbr: !0
+};
+const Q = /* @__PURE__ */ q(G);
+var R = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+function B(t) {
+  var e = { type: "tag", name: "", voidElement: !1, attrs: {}, children: [] }, n = t.match(/<\/?([^\s]+?)[/\s>]/);
+  if (n && (e.name = n[1], (Q[n[1]] || t.charAt(t.length - 2) === "/") && (e.voidElement = !0), e.name.startsWith("!--"))) {
+    var o = t.indexOf("-->");
+    return { type: "comment", comment: o !== -1 ? t.slice(4, o) : "" };
+  }
+  for (var c = new RegExp(R), s = null; (s = c.exec(t)) !== null; )
+    if (s[0].trim())
+      if (s[1]) {
+        var l = s[1].trim(), p = [l, ""];
+        l.indexOf("=") > -1 && (p = l.split("=")), e.attrs[p[0]] = p[1], c.lastIndex--;
+      } else
+        s[2] && (e.attrs[s[2]] = s[3].trim().substring(1, s[3].length - 1));
+  return e;
+}
+var tt = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g, et = /^\s*$/, nt = /* @__PURE__ */ Object.create(null);
+function L(t, e) {
+  switch (e.type) {
+    case "text":
+      return t + e.content;
+    case "tag":
+      return t += "<" + e.name + (e.attrs ? function(n) {
+        var o = [];
+        for (var c in n)
+          o.push(c + '="' + n[c] + '"');
+        return o.length ? " " + o.join(" ") : "";
+      }(e.attrs) : "") + (e.voidElement ? "/>" : ">"), e.voidElement ? t : t + e.children.reduce(L, "") + "</" + e.name + ">";
+    case "comment":
+      return t + "<!--" + e.comment + "-->";
+  }
+}
+var st = { parse: function(t, e) {
+  e || (e = {}), e.components || (e.components = nt);
+  var n, o = [], c = [], s = -1, l = !1;
+  if (t.indexOf("<") !== 0) {
+    var p = t.indexOf("<");
+    o.push({ type: "text", content: p === -1 ? t : t.substring(0, p) });
+  }
+  return t.replace(tt, function(m, f) {
+    if (l) {
+      if (m !== "</" + n.name + ">")
+        return;
+      l = !1;
+    }
+    var v, E = m.charAt(1) !== "/", k = m.startsWith("<!--"), b = f + m.length, $ = t.charAt(b);
+    if (k) {
+      var y = B(m);
+      return s < 0 ? (o.push(y), o) : ((v = c[s]).children.push(y), o);
+    }
+    if (E && (s++, (n = B(m)).type === "tag" && e.components[n.name] && (n.type = "component", l = !0), n.voidElement || l || !$ || $ === "<" || n.children.push({ type: "text", content: t.slice(b, t.indexOf("<", b)) }), s === 0 && o.push(n), (v = c[s - 1]) && v.children.push(n), c[s] = n), (!E || n.voidElement) && (s > -1 && (n.voidElement || n.name === m.slice(2, -1)) && (s--, n = s === -1 ? o : c[s]), !l && $ !== "<" && $)) {
+      v = s === -1 ? o : c[s].children;
+      var u = t.indexOf("<", b), i = t.slice(b, u === -1 ? void 0 : u);
+      et.test(i) && (i = " "), (u > -1 && s + v.length >= 0 || i !== " ") && v.push({ type: "text", content: i });
+    }
+  }), o;
+}, stringify: function(t) {
+  return t.reduce(function(e, n) {
+    return e + L("", n);
+  }, "");
+} };
+function S(t, e) {
+  if (!t)
+    return !1;
+  const n = t.props ? t.props.children : t.children;
+  return e ? n.length > 0 : !!n;
+}
+function V(t) {
+  if (!t)
+    return [];
+  const e = t.props ? t.props.children : t.children;
+  return t.props && t.props.i18nIsDynamicList ? P(e) : e;
+}
+function rt(t) {
+  return Object.prototype.toString.call(t) !== "[object Array]" ? !1 : t.every((e) => K(e));
+}
+function P(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function ot(t, e) {
+  const n = {
+    ...e
+  };
+  return n.props = Object.assign(t.props, e.props), n;
+}
+function W(t, e) {
+  if (!t)
+    return "";
+  let n = "";
+  const o = P(t), c = e.transSupportBasicHtmlNodes && e.transKeepBasicHtmlNodesFor ? e.transKeepBasicHtmlNodesFor : [];
+  return o.forEach((s, l) => {
+    if (typeof s == "string")
+      n += `${s}`;
+    else if (K(s)) {
+      const p = Object.keys(s.props).length, m = c.indexOf(s.type) > -1, f = s.props.children;
+      if (!f && m && p === 0)
+        n += `<${s.type}/>`;
+      else if (!f && (!m || p !== 0))
+        n += `<${l}></${l}>`;
+      else if (s.props.i18nIsDynamicList)
+        n += `<${l}></${l}>`;
+      else if (m && p === 1 && typeof f == "string")
+        n += `<${s.type}>${f}</${s.type}>`;
+      else {
+        const v = W(f, e);
+        n += `<${l}>${v}</${l}>`;
+      }
+    } else if (s === null)
+      H("Trans: the passed in value is invalid - seems you passed in a null child.");
+    else if (typeof s == "object") {
+      const {
+        format: p,
+        ...m
+      } = s, f = Object.keys(m);
+      if (f.length === 1) {
+        const v = p ? `${f[0]}, ${p}` : f[0];
+        n += `{{${v}}}`;
+      } else
+        H("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", s);
+    } else
+      H("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", s);
+  }), n;
+}
+function at(t, e, n, o, c, s) {
+  if (e === "")
+    return [];
+  const l = o.transKeepBasicHtmlNodesFor || [], p = e && new RegExp(l.map((u) => `<${u}`).join("|")).test(e);
+  if (!t && !p && !s)
+    return [e];
+  const m = {};
+  function f(u) {
+    P(u).forEach((a) => {
+      typeof a != "string" && (S(a) ? f(V(a)) : typeof a == "object" && !K(a) && Object.assign(m, a));
+    });
+  }
+  f(t);
+  const v = st.parse(`<0>${e}</0>`), E = {
+    ...m,
+    ...c
+  };
+  function k(u, i, a) {
+    const g = V(u), O = $(g, i.children, a);
+    return rt(g) && O.length === 0 || u.props && u.props.i18nIsDynamicList ? g : O;
+  }
+  function b(u, i, a, g, O) {
+    u.dummy ? (u.children = i, a.push(_(u, {
+      key: g
+    }, O ? void 0 : i))) : a.push(...J.map([u], (h) => {
+      const r = {
+        ...h.props
+      };
+      return delete r.i18nIsDynamicList, T(h.type, {
+        ...r,
+        key: g,
+        ref: h.ref
+      }, O ? null : i);
+    }));
+  }
+  function $(u, i, a) {
+    const g = P(u);
+    return P(i).reduce((h, r, C) => {
+      const N = r.children && r.children[0] && r.children[0].content && n.services.interpolator.interpolate(r.children[0].content, E, n.language);
+      if (r.type === "tag") {
+        let j = g[parseInt(r.name, 10)];
+        a.length === 1 && !j && (j = a[0][r.name]), j || (j = {});
+        const d = Object.keys(r.attrs).length !== 0 ? ot({
+          props: r.attrs
+        }, j) : j, w = K(d), A = w && S(r, !0) && !r.voidElement, F = p && typeof d == "object" && d.dummy && !w, D = typeof t == "object" && t !== null && Object.hasOwnProperty.call(t, r.name);
+        if (typeof d == "string") {
+          const x = n.services.interpolator.interpolate(d, E, n.language);
+          h.push(x);
+        } else if (S(d) || A) {
+          const x = k(d, r, a);
+          b(d, x, h, C);
+        } else if (F) {
+          const x = $(g, r.children, a);
+          b(d, x, h, C);
+        } else if (Number.isNaN(parseFloat(r.name)))
+          if (D) {
+            const x = k(d, r, a);
+            b(d, x, h, C, r.voidElement);
+          } else if (o.transSupportBasicHtmlNodes && l.indexOf(r.name) > -1)
+            if (r.voidElement)
+              h.push(T(r.name, {
+                key: `${r.name}-${C}`
+              }));
+            else {
+              const x = $(g, r.children, a);
+              h.push(T(r.name, {
+                key: `${r.name}-${C}`
+              }, x));
+            }
+          else if (r.voidElement)
+            h.push(`<${r.name} />`);
+          else {
+            const x = $(g, r.children, a);
+            h.push(`<${r.name}>${x}</${r.name}>`);
+          }
+        else if (typeof d == "object" && !w) {
+          const x = r.children[0] ? N : null;
+          x && h.push(x);
+        } else
+          b(d, N, h, C, r.children.length !== 1 || !N);
+      } else if (r.type === "text") {
+        const j = o.transWrapTextNodes, d = s ? o.unescape(n.services.interpolator.interpolate(r.content, E, n.language)) : n.services.interpolator.interpolate(r.content, E, n.language);
+        j ? h.push(T(j, {
+          key: `${r.name}-${C}`
+        }, d)) : h.push(d);
+      }
+      return h;
+    }, []);
+  }
+  const y = $([{
+    dummy: !0,
+    children: t || []
+  }], v, P(t || []));
+  return V(y[0]);
+}
+function it(t) {
+  let {
+    children: e,
+    count: n,
+    parent: o,
+    i18nKey: c,
+    context: s,
+    tOptions: l = {},
+    values: p,
+    defaults: m,
+    components: f,
+    ns: v,
+    i18n: E,
+    t: k,
+    shouldUnescape: b,
+    ...$
+  } = t;
+  const y = E || I();
+  if (!y)
+    return X("You will need to pass in an i18next instance by using i18nextReactModule"), e;
+  const u = k || y.t.bind(y) || ((A) => A);
+  s && (l.context = s);
+  const i = {
+    ...Y(),
+    ...y.options && y.options.react
+  };
+  let a = v || u.ns || y.options && y.options.defaultNS;
+  a = typeof a == "string" ? [a] : a || ["translation"];
+  const g = W(e, i), O = m || g || i.transEmptyNodeValue || c, {
+    hashTransKey: h
+  } = i, r = c || (h ? h(g || O) : g || O);
+  y.options && y.options.interpolation && y.options.interpolation.defaultVariables && (p = p && Object.keys(p).length > 0 ? {
+    ...p,
+    ...y.options.interpolation.defaultVariables
+  } : {
+    ...y.options.interpolation.defaultVariables
+  });
+  const C = p ? l.interpolation : {
+    interpolation: {
+      ...l.interpolation,
+      prefix: "#$?",
+      suffix: "?$#"
+    }
+  }, N = {
+    ...l,
+    count: n,
+    ...p,
+    ...C,
+    defaultValue: O,
+    ns: a
+  }, j = r ? u(r, N) : O;
+  f && Object.keys(f).forEach((A) => {
+    const F = f[A];
+    if (typeof F.type == "function" || !F.props || !F.props.children || j.indexOf(`${A}/>`) < 0 && j.indexOf(`${A} />`) < 0)
+      return;
+    function D() {
+      return T(M, null, F);
+    }
+    f[A] = T(D);
+  });
+  const d = at(f || e, j, y, i, N, b), w = o !== void 0 ? o : i.defaultTransParent;
+  return w ? T(w, $, d) : d;
+}
+function lt(t) {
+  let {
+    children: e,
+    count: n,
+    parent: o,
+    i18nKey: c,
+    context: s,
+    tOptions: l = {},
+    values: p,
+    defaults: m,
+    components: f,
+    ns: v,
+    i18n: E,
+    t: k,
+    shouldUnescape: b,
+    ...$
+  } = t;
+  const {
+    i18n: y,
+    defaultNS: u
+  } = U(Z) || {}, i = E || y || I(), a = k || i && i.t.bind(i);
+  return it({
+    children: e,
+    count: n,
+    parent: o,
+    i18nKey: c,
+    context: s,
+    tOptions: l,
+    values: p,
+    defaults: m,
+    components: f,
+    ns: v || a && a.ns || u || i && i.options && i.options.defaultNS,
+    i18n: i,
+    t: k,
+    shouldUnescape: b,
+    ...$
+  });
+}
+function yt({
+  i18n_default_text: t,
+  values: e,
+  components: n,
+  options: o,
+  shouldUnescape: c
+}) {
+  return /* @__PURE__ */ z(
+    lt,
+    {
+      defaults: t,
+      values: e,
+      components: n,
+      tOptions: o,
+      shouldUnescape: c
+    }
+  );
+}
+export {
+  yt as default
+};

package/dist/constants-XUr5oono.js

@@ -0,0 +1,29 @@
+const n = Object.freeze({
+  ACH: "Translations",
+  EN: "English",
+  ES: "Español",
+  DE: "Deutsch",
+  FR: "Français",
+  ID: "Indonesian",
+  IT: "Italiano",
+  KO: "한국어",
+  PL: "Polish",
+  PT: "Português",
+  RU: "Русский",
+  TR: "Türkçe",
+  VI: "Tiếng Việt",
+  ZH_CN: "简体中文",
+  ZH_TW: "繁體中文",
+  TH: "ไทย"
+}), e = "i18n_language", s = "EN", t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ALL_LANGUAGES: n,
+  DEFAULT_LANGUAGE: s,
+  LANGUAGE_KEY: e
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  n as A,
+  s as D,
+  e as L,
+  t as c
+};

package/dist/context-NlNsLXrG.js

@@ -0,0 +1,19 @@
+import { createContext as a } from "react";
+const r = a();
+class o {
+  constructor() {
+    this.usedNamespaces = {};
+  }
+  addUsedNamespaces(s) {
+    s.forEach((e) => {
+      this.usedNamespaces[e] || (this.usedNamespaces[e] = !0);
+    });
+  }
+  getUsedNamespaces() {
+    return Object.keys(this.usedNamespaces);
+  }
+}
+export {
+  r as I,
+  o as R
+};