Merge branch 'next' into fix/793-select

Trendyol · Feb 15, 2024 · 5cf4a4c · 5cf4a4c
2 parents 662df8a + c3e664c
commit 5cf4a4c
Show file tree

Hide file tree

Showing 15 changed files with 437 additions and 34 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/docs/using-baklava-in-vue.stories.mdx b/docs/using-baklava-in-vue.stories.mdx
@@ -51,19 +51,16 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
   For Vite:
 
   ```js
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => tag.startsWith('bl-')
+  {
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement: tag => tag.startsWith('bl-')
+          }
         }
-      }
-    })
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+      })
+    ]
   }
 
   ```
@@ -72,18 +69,18 @@ Also, you can add ignore rule as compiler options to your webpack or vite.
 
   ```js
   {
-  test: /\.vue$/,
-  use: {
-    loader: "vue-loader",
-    options: {
-      compilerOptions: {
-        isCustomElement: tag => {
-          return tag === "custom";
+    test: /\.vue$/,
+    use: {
+      loader: "vue-loader",
+      options: {
+        compilerOptions: {
+          isCustomElement: tag => {
+            return tag === "custom";
+          }
         }
       }
     }
   }
-}
 ```
 
 ### TypeScript

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/"
+  }
+}