chore: add more languages to widget

lingui.config.ts

@@ -1,14 +1,50 @@
 /** @type {import('@lingui/conf').LinguiConfig} */
 module.exports = {
-  locales: ['en', 'es', 'ja', 'fr', 'pt', 'zh', 'ru', 'de', 'uk', 'sv', 'fi', 'nl', 'el', 'it', 'pl'],
+  locales: [
+    'af',
+    'ar',
+    'bn',
+    'ca',
+    'da',
+    'de',
+    'el',
+    'en',
+    'es',
+    'fi',
+    'fil',
+    'fr',
+    'hi',
+    'hu',
+    'id',
+    'it',
+    'ja',
+    'ko',
+    'lt',
+    'ms',
+    'nl',
+    'pl',
+    'pt',
+    'ru',
+    'sk',
+    'sr',
+    'sv',
+    'sw',
+    'th',
+    'tr',
+    'uk',
+    'ur',
+    'vi',
+    'zh-CN',
+    'zh-TW',
+  ],
   sourceLocale: 'en',
   format: 'po',
   catalogs: [
     {
       path: '<rootDir>/translations/{locale}',
       include: ['<rootDir>/widget/embedded/src', '<rootDir>/widget/ui/src'],
       exclude: ['**/node_modules/**'],
-    }
+    },
   ],
   rootDir: '.',
 };

scripts/crowdin/command.mjs

@@ -1,4 +1,5 @@
 import { PROJECT_ID, TOKEN } from "./constants.mjs";
+import { CrowdinError } from "../common/errors.mjs";
 import { 
   checkPreTranslateStatus, 
   getLanguageIds, 
@@ -7,6 +8,7 @@ import {
   sendPreTranslateRequest 
 } from "./pretranslate.mjs";
 
+
 const preTranslationOption = {
   method: 'mt',
   autoApproveOption: 'all',

scripts/crowdin/utils.mjs

@@ -1,4 +1,5 @@
 import {TOKEN } from "./constants.mjs";
+import { CrowdinError } from "../common/errors.mjs";
 
 // Reusable function to handle fetch requests with authorization headers
 export const fetchDataWithAuthorization = async (url, method = 'GET', body = null) => {

widget/embedded/src/constants/languages.ts

@@ -1,21 +1,40 @@
 import type { FlagPropTypes, Language } from '@rango-dev/ui';
 
 import {
+  Bengali,
+  Catalonia,
   Chinese,
+  Denmark,
   English,
   Finland,
   French,
   German,
   Greece,
+  Hungary,
+  India,
+  Indonesian,
   Italian,
   Japanese,
+  Korea,
+  Lithuania,
+  Malay,
   Netherlands,
+  Pakistan,
+  Philippines,
   Poland,
   Portuguese,
   Russian,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
   Spanish,
+  Swahili,
   Swedish,
+  Thai,
+  Turkish,
   Ukrainian,
+  Vietnamese,
 } from '@rango-dev/ui';
 
 export type LanguageItem = {
@@ -26,21 +45,56 @@ export type LanguageItem = {
 };
 
 export const LANGUAGES: LanguageItem[] = [
+  { title: 'Afrikaans', label: 'Afrikaans', local: 'af', SVGFlag: SouthAfrica },
+  { title: 'Arabic', label: 'عربي', local: 'ar', SVGFlag: SaudiArabia },
+  { title: 'Bengali', label: 'বাংলা', local: 'bn', SVGFlag: Bengali },
+  { title: 'Catalan', label: 'Català', local: 'ca', SVGFlag: Catalonia },
+  {
+    title: 'Chinese (Simplified)',
+    label: '简体中文',
+    local: 'zh-CN',
+    SVGFlag: Chinese,
+  },
+  {
+    title: 'Chinese (Traditional)',
+    label: '中文（繁體)',
+    local: 'zh-TW',
+    SVGFlag: Chinese,
+  },
+  { title: 'Danish', label: 'Dansk', local: 'da', SVGFlag: Denmark },
+  { title: 'Dutch', label: 'Nederlands', local: 'nl', SVGFlag: Netherlands },
   { title: 'English', label: 'English', local: 'en', SVGFlag: English },
-  { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
+  { title: 'Filipino', label: 'Filipino', local: 'fil', SVGFlag: Philippines },
+  { title: 'Finnish', label: 'Suomalainen', local: 'fi', SVGFlag: Finland },
   { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
-  { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
-  { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
-  { title: 'Chinese', label: '中国人', local: 'zh', SVGFlag: Chinese },
-  { title: 'Russian', label: 'Русский', local: 'ru', SVGFlag: Russian },
   { title: 'German', label: 'Deutsch', local: 'de', SVGFlag: German },
-  { title: 'Ukrainian', label: 'Україні', local: 'uk', SVGFlag: Ukrainian },
-  { title: 'Swedish', label: 'svenska', local: 'sv', SVGFlag: Swedish },
-  { title: 'Finnish', label: 'Suomalainen', local: 'fi', SVGFlag: Finland },
-  { title: 'Dutch', label: 'Nederlands', local: 'nl', SVGFlag: Netherlands },
-  { title: 'Greek', label: 'Grieks', local: 'el', SVGFlag: Greece },
+  { title: 'Greek', label: 'ελληνικά', local: 'el', SVGFlag: Greece },
+  { title: 'Hindi', label: 'हिंदी', local: 'hi', SVGFlag: India },
+  { title: 'Hungarian', label: 'Magyar', local: 'hu', SVGFlag: Hungary },
+  { title: 'Indonesian', label: 'Indonesia', local: 'id', SVGFlag: Indonesian },
   { title: 'Italian', label: 'Italiana', local: 'it', SVGFlag: Italian },
+  { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
+  { title: 'Korean', label: '한국인', local: 'ko', SVGFlag: Korea },
+  { title: 'Lithuanian', label: 'Lietuvių', local: 'lt', SVGFlag: Lithuania },
+  { title: 'Malay', label: 'Melayu', local: 'ms', SVGFlag: Malay },
   { title: 'Polish', label: 'Polski', local: 'pl', SVGFlag: Poland },
+  { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
+  { title: 'Russian', label: 'Русский', local: 'ru', SVGFlag: Russian },
+  { title: 'Serbian', label: 'Cрпски', local: 'sr', SVGFlag: Serbia },
+  { title: 'Slovak', label: 'Slovenský', local: 'sk', SVGFlag: Slovakia },
+  { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
+  { title: 'Swahili', label: 'Kiswahili', local: 'sw', SVGFlag: Swahili },
+  { title: 'Swedish', label: 'Svenska', local: 'sv', SVGFlag: Swedish },
+  { title: 'Thai', label: 'แบบไทย', local: 'th', SVGFlag: Thai },
+  { title: 'Turkish', label: 'Türkçe', local: 'tr', SVGFlag: Turkish },
+  { title: 'Ukrainian', label: 'Yкраїні', local: 'uk', SVGFlag: Ukrainian },
+  { title: 'Urdu', label: 'اردو', local: 'ur', SVGFlag: Pakistan },
+  {
+    title: 'Vietnamese',
+    label: 'Tiếng Việt',
+    local: 'vi',
+    SVGFlag: Vietnamese,
+  },
 ];
 
 export const DEFAULT_LANGUAGE = 'en';

widget/playground/src/constants/languages.ts

@@ -1,35 +1,74 @@
 import {
+  Bengali,
+  Catalonia,
   Chinese,
+  Denmark,
   English,
   Finland,
   French,
   German,
   Greece,
+  Hungary,
+  India,
+  Indonesian,
   Italian,
   Japanese,
+  Korea,
+  Lithuania,
+  Malay,
   Netherlands,
+  Pakistan,
+  Philippines,
   Poland,
   Portuguese,
   Russian,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
   Spanish,
+  Swahili,
   Swedish,
+  Thai,
+  Turkish,
   Ukrainian,
+  Vietnamese,
 } from '@rango-dev/ui';
 
 export const LANGUAGES = [
+  { name: 'Afrikaans', value: 'af', Icon: SouthAfrica },
+  { name: 'Arabic', value: 'ar', Icon: SaudiArabia },
+  { name: 'Bengali', value: 'bn', Icon: Bengali },
+  { name: 'Catalan', value: 'ca', Icon: Catalonia },
+  { name: 'Chinese (Simplified)', value: 'zh-CN', Icon: Chinese },
+  { name: 'Chinese (Traditional)', value: 'zh-TW', Icon: Chinese },
+  { name: 'Danish', value: 'da', Icon: Denmark },
+  { name: 'Dutch', value: 'nl', Icon: Netherlands },
   { name: 'English', value: 'en', Icon: English },
-  { name: 'Spanish', value: 'es', Icon: Spanish },
+  { name: 'Filipino', value: 'fil', Icon: Philippines },
+  { name: 'Finnish', value: 'fi', Icon: Finland },
   { name: 'French', value: 'fr', Icon: French },
-  { name: 'Japanese', value: 'ja', Icon: Japanese },
-  { name: 'Portuguese', value: 'pt', Icon: Portuguese },
-  { name: 'Chinese', value: 'zh', Icon: Chinese },
-  { name: 'Russian', value: 'ru', Icon: Russian },
   { name: 'German', value: 'de', Icon: German },
-  { name: 'Ukrainian', value: 'uk', Icon: Ukrainian },
-  { name: 'Swedish', value: 'sv', Icon: Swedish },
-  { name: 'Finnish', value: 'fi', Icon: Finland },
-  { name: 'Dutch', value: 'nl', Icon: Netherlands },
   { name: 'Greek', value: 'el', Icon: Greece },
+  { name: 'Hindi', value: 'hi', Icon: India },
+  { name: 'Hungarian', value: 'hu', Icon: Hungary },
+  { name: 'Indonesian', value: 'id', Icon: Indonesian },
   { name: 'Italian', value: 'it', Icon: Italian },
+  { name: 'Japanese', value: 'ja', Icon: Japanese },
+  { name: 'Korean', value: 'ko', Icon: Korea },
+  { name: 'Lithuanian', value: 'lt', Icon: Lithuania },
+  { name: 'Malay', value: 'ms', Icon: Malay },
   { name: 'Polish', value: 'pl', Icon: Poland },
+  { name: 'Portuguese', value: 'pt', Icon: Portuguese },
+  { name: 'Russian', value: 'ru', Icon: Russian },
+  { name: 'Serbian', value: 'sr', Icon: Serbia },
+  { name: 'Slovak', value: 'sk', Icon: Slovakia },
+  { name: 'Spanish', value: 'es', Icon: Spanish },
+  { name: 'Swahili', value: 'sw', Icon: Swahili },
+  { name: 'Swedish', value: 'sv', Icon: Swedish },
+  { name: 'Thai', value: 'th', Icon: Thai },
+  { name: 'Turkish', value: 'tr', Icon: Turkish },
+  { name: 'Ukrainian', value: 'uk', Icon: Ukrainian },
+  { name: 'Urdu', value: 'ur', Icon: Pakistan },
+  { name: 'Vietnamese', value: 'vi', Icon: Vietnamese },
 ];

widget/storybook/src/components/Flags/index.ts

@@ -1,21 +1,35 @@
 import {
   Bengali,
+  Catalonia,
   Chinese,
+  Cyprus,
+  Denmark,
   English,
   Finland,
   French,
   German,
   Greece,
   Hindi,
+  Hungary,
+  India,
   Indonesian,
   Italian,
   Japanese,
+  Korea,
+  Lithuania,
   Malay,
   Netherlands,
+  Pakistan,
+  Philippines,
   Poland,
   Portuguese,
   Russian,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
   Spanish,
+  Swahili,
   Swedish,
   Thai,
   Turkish,
@@ -46,4 +60,18 @@ export const Flags = {
   Greece,
   Italian,
   Poland,
+  Catalonia,
+  Cyprus,
+  Denmark,
+  Hungary,
+  India,
+  Korea,
+  Lithuania,
+  Pakistan,
+  Philippines,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
+  Swahili,
 };

widget/ui/src/components/Flags/Catalonia.tsx

@@ -0,0 +1,31 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Catalonia(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#ffda44"
+          d="M0 0v57l32 29-32 28v57l32 29-32 28v57l32 28-32 28v57l32 29-32 28v57h512v-57l-32-28 32-29v-57l-32-28 32-28v-57l-32-28 32-29v-57l-32-28 32-29V0H0z"
+        />
+        <path
+          fill="#d80027"
+          d="M0 57h512v57H0Zm0 114h512v57H0Zm0 114h512v56H0Zm0 113h512v57H0Z"
+        />
+      </g>
+    </svg>
+  );
+}

widget/ui/src/components/Flags/Cyprus.tsx

@@ -0,0 +1,32 @@
+import type { FlagPropTypes } from './Flags.types.js';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants.js';
+
+export default function Cyprus(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M0 0h512v512H0z" />
+        <path
+          fill="#6da544"
+          d="M400.7 222.6h-33.4a111.3 111.3 0 0 1-222.6 0h-33.4c0 66.2 44.5 122 105.2 139.2a37 37 0 0 0 3.9 40.5l36.3-29.2 36.4 29.2a37 37 0 0 0 3.7-40.8 144.8 144.8 0 0 0 103.9-138.9z"
+        />
+        <path
+          fill="#ffda44"
+          d="M167 211.5s0 55.6 55.6 55.6l11.1 11.2H256s11.1-33.4 33.4-33.4c0 0 0-22.3 22.3-22.3H345s-11-44.5 44.6-77.9l-22.3-11.1s-78 55.6-133.6 44.5v22.2h-22.2l-11.2-11-33.3 22.2z"
+        />
+      </g>
+    </svg>
+  );
+}