From 8aaa04b1f80e0a53ecef925f555741e7b662183d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 30 Aug 2024 14:34:27 +0200
Subject: [PATCH 1/2] :sparkles: Add English translations to storybook template

---
 .../resources/templates/preview-head.mustache |  5 ++++
 frontend/scripts/_helpers.js                  | 25 +++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/resources/templates/preview-head.mustache b/frontend/resources/templates/preview-head.mustache
index d3cc7b7cd..5ac5451b3 100644
--- a/frontend/resources/templates/preview-head.mustache
+++ b/frontend/resources/templates/preview-head.mustache
@@ -1,4 +1,5 @@
 <link href="./css/ds.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
+
 <style>
   body {
     overflow-y: scroll;
@@ -8,3 +9,7 @@
     height: 100%;
   }
 </style>
+
+<script>
+  window.penpotTranslations = JSON.parse({{& translations}});
+</script>
diff --git a/frontend/scripts/_helpers.js b/frontend/scripts/_helpers.js
index b8fbd0de5..d4bb7182b 100644
--- a/frontend/scripts/_helpers.js
+++ b/frontend/scripts/_helpers.js
@@ -303,7 +303,20 @@ async function readTranslations() {
     }
   }
 
-  return JSON.stringify(result);
+  return result;
+}
+
+function filterTranslations(translations, langs = [], keyFilter) {
+  const filteredEntries = Object.entries(translations)
+    .filter(([translationKey, _]) => keyFilter(translationKey))
+    .map(([translationKey, value]) => {
+      const langEntries = Object.entries(value).filter(([lang, _]) =>
+        langs.includes(lang),
+      );
+      return [translationKey, Object.fromEntries(langEntries)];
+    });
+
+  return Object.fromEntries(filteredEntries);
 }
 
 async function generateSvgSprite(files, prefix) {
@@ -355,7 +368,14 @@ async function generateTemplates() {
   const isDebug = process.env.NODE_ENV !== "production";
   await fs.mkdir("./resources/public/", { recursive: true });
 
-  const translations = await readTranslations();
+  let translations = await readTranslations();
+  const storybookTranslations = JSON.stringify(
+    filterTranslations(translations, ["en"], (key) =>
+      key.startsWith("labels."),
+    ),
+  );
+  translations = JSON.stringify(translations);
+
   const manifest = await readShadowManifest();
   let content;
 
@@ -408,6 +428,7 @@ async function generateTemplates() {
     "resources/templates/preview-head.mustache",
     {
       manifest: manifest,
+      translations: JSON.stringify(storybookTranslations),
     },
     partials,
   );

From 8feb5dabb065bd91f558559cc8cb634b13b1a51e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen@hey.com>
Date: Fri, 30 Aug 2024 15:45:52 +0200
Subject: [PATCH 2/2] :sparkles: Use translations in a DS component story

---
 frontend/shadow-cljs.edn                               | 1 -
 frontend/src/app/main/ui/ds.cljs                       | 7 ++++++-
 frontend/src/app/main/ui/ds/product/loader.cljs        | 5 ++---
 frontend/src/app/main/ui/ds/product/loader.stories.jsx | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn
index 608357a29..0c0b91b57 100644
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@@ -91,7 +91,6 @@
    :modules
    {:base
     {:entries []}
-
     :components
     {:exports {default app.main.ui.ds/default}
      :depends-on #{:base}}}
diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index e0f1c944f..6c4dcd8d1 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.ds
   (:require
+   [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.forms.input :refer [input*]]
@@ -17,7 +18,11 @@
    [app.main.ui.ds.notifications.toast :refer [toast*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.storybook :as sb]
-   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]))
+   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]
+   [app.util.i18n :as i18n]))
+
+
+(i18n/init! cf/translations)
 
 (def default
   "A export used for storybook"
diff --git a/frontend/src/app/main/ui/ds/product/loader.cljs b/frontend/src/app/main/ui/ds/product/loader.cljs
index eca99efee..4249e2e22 100644
--- a/frontend/src/app/main/ui/ds/product/loader.cljs
+++ b/frontend/src/app/main/ui/ds/product/loader.cljs
@@ -10,6 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.math :as mth]
+   [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc loader-icon*
@@ -40,11 +41,9 @@
         h (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
         class (dm/str (or class "") " " (stl/css-case :wrapper true
                                                       :wrapper-overlay overlay))
+        title (or title (tr "labels.loading"))
         props (mf/spread-props props {:class class})]
 
-    (assert title
-            (dm/str "You must provide an accesible name for the component"))
-
     [:> "div" props
      [:> loader-icon* {:title title
                        :width w
diff --git a/frontend/src/app/main/ui/ds/product/loader.stories.jsx b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
index 8616f5c88..7292d701b 100644
--- a/frontend/src/app/main/ui/ds/product/loader.stories.jsx
+++ b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
@@ -7,10 +7,10 @@ export default {
   title: "Product/Loader",
   component: Loader,
   args: {
-    title: "Loading…",
     overlay: false,
   },
   argTypes: {
+    title: { control: "text" },
     width: { control: "number" },
     height: { control: "number" },
     overlay: { control: "boolean" },