@designcrowd/fe-shared-lib 1.2.0-tr-2 → 1.2.0-tr-4

package/Dockerfile

@@ -26,6 +26,8 @@ COPY . .
 
 COPY .npmignore ./
 
+RUN npm run bundle-translation
+
 RUN mkdir artifacts
 RUN npm publish || touch artifacts/npm_publish_failed
 RUN cp package.json artifacts/

package/nodemon.translation.json

@@ -0,0 +1,7 @@
+{
+    "exec": "npm run bundle-translation",
+    "ext": ".json",
+    "watch": [
+        "./src"
+    ]
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0-tr-2",
+  "version": "1.2.0-tr-4",
   "scripts": {
-    "start": "npm run storybook",
+    "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
     "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
     "build:css": "node ./tailwind.build.js",
     "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
+    "bundle-translation": "node ./src/bundleTranslation.js",
+    "watch:translation": "nodemon --config nodemon.translation.json",
     "storybook:themes": "node ./tailwind.themes.js",
     "storybook:css": "node ./tailwind.build.js --storybook",
     "lint": "NODE_ENV=production eslint ./src/ --ext .ts,.js,.vue",
@@ -63,6 +65,8 @@
     "eslint-plugin-vue": "9.21.1",
     "husky": "9.0.10",
     "lint-staged": "15.2.1",
+    "nodemon": "3.0.3",
+    "npm-run-all": "4.1.5",
     "postcss": "8.4.33",
     "postcss-cli": "11.0.0",
     "postcss-import": "16.0.0",

package/public/css/tailwind-brandCrowd.css

@@ -719,9 +719,6 @@ video {
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
-.theme-brandCrowd .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-brandCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandCrowd .tw-h-auto {
   height: auto;
 }
-.theme-brandCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandCrowd .tw-h-full {
   height: 100%;
 }
@@ -1453,17 +1446,6 @@ video {
 .theme-brandCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-brandCrowd .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-brandCrowd .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-brandCrowd .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-brandCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2041,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));
@@ -2109,10 +2087,6 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-brandCrowd .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .theme-brandCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));

package/public/css/tailwind-brandPage.css

@@ -719,9 +719,6 @@ video {
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
-.theme-brandPage .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-brandPage .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandPage .tw-h-auto {
   height: auto;
 }
-.theme-brandPage .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandPage .tw-h-full {
   height: 100%;
 }
@@ -1301,17 +1294,6 @@ video {
 .theme-brandPage .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-brandPage .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-brandPage .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-brandPage .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-brandPage .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1809,10 +1791,6 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.theme-brandPage .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .theme-brandPage .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -719,9 +719,6 @@ video {
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
-.theme-crazyDomains .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-crazyDomains .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-crazyDomains .tw-h-auto {
   height: auto;
 }
-.theme-crazyDomains .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-crazyDomains .tw-h-full {
   height: 100%;
 }
@@ -1453,17 +1446,6 @@ video {
 .theme-crazyDomains .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-crazyDomains .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-crazyDomains .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-crazyDomains .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-crazyDomains .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2041,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));
@@ -2109,10 +2087,6 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-crazyDomains .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .theme-crazyDomains .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));

package/public/css/tailwind-designCom.css

@@ -719,9 +719,6 @@ video {
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
-.theme-designCom .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-designCom .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCom .tw-h-auto {
   height: auto;
 }
-.theme-designCom .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCom .tw-h-full {
   height: 100%;
 }
@@ -1453,17 +1446,6 @@ video {
 .theme-designCom .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-designCom .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-designCom .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-designCom .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-designCom .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2041,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2109,10 +2087,6 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-designCom .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .theme-designCom .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));

package/public/css/tailwind-designCrowd.css

@@ -719,9 +719,6 @@ video {
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
-.theme-designCrowd .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-designCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCrowd .tw-h-auto {
   height: auto;
 }
-.theme-designCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCrowd .tw-h-full {
   height: 100%;
 }
@@ -1453,17 +1446,6 @@ video {
 .theme-designCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-designCrowd .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-designCrowd .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-designCrowd .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-designCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2041,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2109,10 +2087,6 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-designCrowd .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .theme-designCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));

package/src/bundleTranslation.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const fs = require('fs');
+
+const localeSuffixes = ['_de-DE', '_fr-FR', '_es-ES', '_pt-PT', ''];
+
+const findTranslationFiles = (dir, localeString) => {
+  const files = [];
+  const entries = fs.readdirSync(dir);
+
+  entries.forEach((entry) => {
+    const fullPath = path.join(dir, entry);
+
+    if (fs.statSync(fullPath).isDirectory()) {
+      if (entry === 'i18n') {
+        files.push(
+          ...fs
+            .readdirSync(fullPath)
+            .filter((file) => file.endsWith(`translation${localeString}.json`))
+            .map((file) => path.join(fullPath, file)),
+        );
+      } else {
+        // Recursively find translation files in nested folders
+        files.push(...findTranslationFiles(fullPath, localeString));
+      }
+    }
+  });
+
+  return files;
+};
+
+const bundle = () => {
+  console.log('Bundling translations...', __dirname);
+
+  const bundlesDir = path.resolve(__dirname, './bundles');
+
+  console.log('bundlesDir', bundlesDir);
+
+  if (!fs.existsSync(bundlesDir)) {
+    console.log('Creating bundles dir');
+    fs.mkdirSync(bundlesDir);
+  }
+
+  const rootDir = path.resolve(__dirname, '../src');
+
+  localeSuffixes.forEach((locale) => {
+    const outputFile = path.resolve(bundlesDir, `bundled-translations${locale}.json`);
+
+    const translationFiles = findTranslationFiles(rootDir, locale);
+
+    console.log(
+      `Found ${translationFiles.length} translation files in BrandPage for file prefix: ${`bundled-translations${locale}.json`}`,
+    );
+
+    const translations = {};
+
+    translationFiles.forEach((file) => {
+      const fileContent = fs.readFileSync(file, 'utf-8');
+
+      Object.assign(translations, JSON.parse(fileContent));
+    });
+
+    console.log(`Writing bundled translations to: ${outputFile}`);
+
+    try {
+      const potentiallyExistingFile = fs.readFileSync(outputFile, 'utf-8');
+
+      if (potentiallyExistingFile === JSON.stringify(translations, null, 2)) {
+        console.log('Current translations are the same as the existing file - skipping write');
+      } else {
+        fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+      }
+    } catch (e) {
+      console.log("Translation file doesn't exist, creating new one");
+      fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+    }
+  });
+};
+
+bundle();

package/src/bundles/bundled-translations.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "EN-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations_de-DE.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "DE-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations_es-ES.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "ES-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations_fr-FR.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "FR-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations_pt-PT.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "PT-Publish Brand Page"
+  }
+}

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -10,7 +10,6 @@
       @close-modal="onCloseModal"
     >
       <template #header>
-        Here: {{ tr('testmessage') }}
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
           <span>Set the URL for your {{ brandPageDisplayName }}</span>
         </div>
@@ -51,7 +50,7 @@
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
-              :imgUrl="iconUrl"
+              :img-url="iconUrl"
               title="Free Address"
               description="Choose a free address to publish now. You can always edit the URL later"
               :is-design-com="isDesignCom"
@@ -85,11 +84,11 @@
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
-                    @on-click="onPublish"
                     :full-width="isMobile"
                     :class="{
                       'tw-uppercase': !isDesignCom,
                     }"
+                    @on-click="onPublish"
                   />
                 </div>
               </template>
@@ -246,13 +245,14 @@
   </div>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import { computed } from 'vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextCopyField from '../../../../src/atoms/components/TextCopyField/TextCopyField.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextCopyField from '../../../atoms/components/TextCopyField/TextCopyField.vue';
 
 import SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
@@ -415,9 +415,9 @@ export default {
     'on-slug-changed',
   ],
   setup() {
-    console.log('tttr', tr, tr('testmessage'));
     return {
       tr,
+      testMessage: computed(() => tr('publishModal.testMessage')),
     };
   },
   data() {
@@ -493,6 +493,7 @@ export default {
       this.$emit('radio-button-changed', domain);
     },
     onCloseModal() {
+      console.log(this.testMessage);
       this.$emit('close-modal');
       this.$emit('on-hide-domain-modal');
     },

package/src/experiences/components/PublishBrandPageModal/i18n/publish-translation.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "EN-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-translation_de-DE.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "DE-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-translation_es-ES.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "ES-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-translation_fr-FR.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "FR-Publish Brand Page"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-translation_pt-PT.json

@@ -0,0 +1,5 @@
+{
+    "publishModal": {
+        "test": "PT-Publish Brand Page"
+    }
+}

package/src/useSharedLibTranslate.js

@@ -3,7 +3,15 @@ import i18next from 'i18next';
 
 const fallbackLocale = 'en-US';
 
-const setLocaleAsync = async (locale) => {
+const relativePathsToTranslationFiles = {
+  'en-US': () => import('./bundles/bundled-translations.json'),
+  'de-DE': () => import('./bundles/bundled-translations_de-DE.json'),
+  'fr-FR': () => import('./bundles/bundled-translations_fr-FR.json'),
+  'es-ES': () => import('./bundles/bundled-translations_es-ES.json'),
+  'pt-PT': () => import('./bundles/bundled-translations_pt-PT.json'),
+};
+
+const setLocaleAsync = async (locale = 'en-US') => {
   const localeToUse = locale;
 
   if (!i18next.isInitialized) {
@@ -14,10 +22,10 @@ const setLocaleAsync = async (locale) => {
     });
   }
 
+  const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
+
   await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
-    ...{
-      testmessage: 'This is a test message from i18',
-    },
+    ...languageFile,
   });
 };