feat: add localization (#787)

* Uses `@lit/localize-tools` and `@lit/localize` * This adds localization support for Lit components. * Added storybook document. * Listens for `html` element's `lang` attribute with mutation observer. * Not initialized by default, instructions added to storybook. * Output mode is set to **runtime**, meaning that it has to be capable of changing runtime by rerendering components. * Added localization support for: * Select * Pagination Closes #398 --------- Co-authored-by: Aykut Saraç <aykut.sarac@trendyol.com>
Trendyol · Feb 5, 2024 · 7a6cea3 · 7a6cea3
1 parent 75104c0
commit 7a6cea3
Show file tree

Hide file tree

Showing 14 changed files with 420 additions and 14 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -11,3 +11,4 @@ storybook-static/
 .octane-ci/
 .bin/
 .docksal/
+src/generated/
diff --git a/.prettierignore b/.prettierignore
@@ -6,6 +6,7 @@ storybook-static/
 custom-elements.json
 component-list.json
 src/components.d.ts
+src/generated/
 src/baklava-react.ts
 *.md
 .history/

diff --git a/docs/localization.stories.mdx b/docs/localization.stories.mdx
@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Localization" />
+
+# Localization
+
+Baklava comes equipped with built-in support for localization in both English (`en`) and Turkish (`tr`). It essentially examines the `lang` attribute of the `html` element and configures the locale accordingly. In the absence of a specified `lang` attribute, it defaults to English.
+To initialize localization, insert the following script at the head of your HTML file:
+
+```html
+<html lang="tr">
+  <head>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.0.0/dist/localization.js"></script>
+  </head>
+
+  <body>
+    ...
+  </body>
+</html>
+```
+
+Utilizing a mutation observer, modifications to the lang attribute will automatically trigger updates across all localized components, seamlessly adapting them to the new language setting.
+
+## Submitting New Translations or Improvements
+
+If you wish to contribute new translations or enhancements to existing ones, kindly submit a pull request on GitHub. The translations can be found in the [translations](https://github.com/Trendyol/baklava/tree/next/translations) folder.
+
+To add a new translation, follow these steps:
+
+<ol>
+  <li>Add the language short code to `lit-localize.json`.</li>
+  <li>Execute `npm run localize:extract` to extract the new language file.</li>
+  <li>Update the newly created file in the translations folder.</li>
+  <li>Execute `npm run localize:build` to generate the new language file.</li>
+</ol>
+
+Submit a new pull request with the aforementioned changes.
+
+## Adding New Localized Texts
+
+To include localized texts, adhere to the following guidelines:
+
+* A component should have `@localized()` added to its decorator.
+* The `msg` function should possess a description in the format: *"bl-component: description of the message"*.
+* The `msg` function should feature a default value in English.
+* No property should have a default value in English; instead, it should be defined elsewhere in the code, preferably in the render section.
+
diff --git a/lit-localize.json b/lit-localize.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "en",
+  "targetLocales": ["tr"],
+  "tsConfig": "./tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./src/generated/locales",
+    "localeCodesModule": "./src/generated/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./translations/"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,7 +55,9 @@
     "test:debug": "web-test-runner --coverage --watch --debug",
     "test:headless": "web-test-runner --coverage --watch --debug --headless",
     "generate-react-exports": "node scripts/generate-react-exports.js",
-    "generate-vue-types": "node scripts/generate-vue-types.js"
+    "generate-vue-types": "node scripts/generate-vue-types.js",
+    "localize:extract": "lit-localize extract",
+    "localize:build": "lit-localize build"
   },
   "keywords": [
     "web-components",
@@ -66,6 +68,7 @@
     "@floating-ui/dom": "^1.2.3",
     "@fontsource-variable/rubik": "^5.0.2",
     "@lit-labs/react": "^2.0.3",
+    "@lit/localize": "^0.12.1",
     "@open-wc/form-control": "^0.7.0",
     "@open-wc/form-helpers": "^0.2.2",
     "element-internals-polyfill": "^1.2.3",
@@ -79,6 +82,7 @@
     "@commitlint/config-conventional": "^16.2.4",
     "@commitlint/prompt-cli": "^16.2.4",
     "@custom-elements-manifest/analyzer": "^0.6.3",
+    "@lit/localize-tools": "^0.7.1",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-replace": "^4.0.0",
     "@storybook/addon-a11y": "7.4.3",

diff --git a/scripts/build.js b/scripts/build.js
@@ -51,7 +51,9 @@ const args = parseArgs(process.argv.slice(2), {
       entryPoints: [
         'src/baklava.ts',
         'src/baklava-react.ts',
+        'src/localization.ts',
         ...(await globby([
+          'src/generated/**/*.ts',
           'src/components/**/!(*.(test|d)).ts',
           'src/themes/*.css',
           'src/components/**/*.svg',

diff --git a/src/components/pagination/bl-pagination.test.ts b/src/components/pagination/bl-pagination.test.ts
@@ -39,8 +39,6 @@ describe("bl-pagination", () => {
     expect(el.itemsPerPage).to.equal(10);
     expect(el.hasJumper).to.equal(false);
     expect(el.hasSelect).to.equal(false);
-    expect(el.jumperLabel).to.equal("Go To");
-    expect(el.selectLabel).to.equal("Show");
   });
 
   it("should correctly set the attributes", async () => {