Merge pull request #5037 from penpot/ladybenko-8615-ds-translations

Enable translations for the DS / Storybook

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>

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,
   );

frontend/shadow-cljs.edn

@@ -91,7 +91,6 @@
    :modules
    {:base
     {:entries []}
-
     :components
     {:exports {default app.main.ui.ds/default}
      :depends-on #{:base}}}

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"

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

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" },