@designcrowd/fe-shared-lib 1.2.0-tr-10 → 1.2.0

package/Dockerfile

@@ -26,8 +26,6 @@ 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/index.js

@@ -19,8 +19,6 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
-export { setLocaleAsync, tr } from './src/useSharedLibTranslate';
-
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
 export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0-tr-10",
+  "version": "1.2.0",
   "scripts": {
-    "start": "run-p storybook watch:translation",
+    "start": "npm run storybook",
     "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",
@@ -28,7 +26,6 @@
     "cropperjs": "1.6.1",
     "dropzone-vue3": "1.0.2",
     "fs-extra": "11.2.0",
-    "i18next": "25.2.1",
     "lodash.throttle": "4.1.1",
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
@@ -65,8 +62,6 @@
     "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/src/atoms/components/Button/Button.vue

@@ -84,7 +84,6 @@
 <script>
 import ButtonOutline from './variants/ButtonOutline.vue';
 import ButtonPrimary from './variants/ButtonPrimary.vue';
-import ButtonOutlinePrimary from './variants/ButtonOutlinePrimary.vue';
 import ButtonWarning from './variants/ButtonWarning.vue';
 import ButtonSecondary from './variants/ButtonSecondary.vue';
 import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
@@ -108,7 +107,6 @@ export default {
   name: 'Button',
   components: {
     'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
-    'button-crazyDomains-outline-primary': ButtonOutlinePrimary,
     'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
     'button-crazyDomains-secondary': ButtonSecondary,
     'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
@@ -120,7 +118,6 @@ export default {
     'button-crazyDomains-pill': ButtonPill,
 
     'button-brandCrowd-primary': ButtonPrimary,
-    'button-brandCrowd-outline-primary': ButtonOutlinePrimary,
     'button-brandCrowd-warning': ButtonWarning,
     'button-brandCrowd-info-filled': ButtonInfoFilled,
     'button-brandCrowd-outline': ButtonOutline,

package/src/atoms/components/Button/Buttons.stories.js

@@ -278,30 +278,6 @@ export const PrimarySamples = (args, { argTypes }) => {
 PrimarySamples.args = controlArgs;
 PrimarySamples.argTypes = controlArgTypes;
 
-export const OutlinePrimarySamples = (args, { argTypes }) => {
-  return {
-    components: {
-      StorybookButtonComponent,
-    },
-    props: Object.keys(argTypes),
-    data() {
-      return {
-        variants: generateSampleButtonVariants('outline-primary'),
-      };
-    },
-    template: `
-      <StorybookButtonComponent
-          :disabled="disabled"
-          :full-width="fullWidth"
-          :grey-out-left="greyOutLeft"
-          :justify="justify"
-          :variants="variants"/>
-    `,
-  };
-};
-OutlinePrimarySamples.args = controlArgs;
-OutlinePrimarySamples.argTypes = controlArgTypes;
-
 export const SecondarySamples = (args, { argTypes }) => {
   return {
     components: {

package/src/atoms/components/Button/variants/ButtonAi.vue

@@ -2,7 +2,7 @@
   <button
     v-if="!url"
     style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
-    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
+    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-rounded-xl tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
     :class="[
       classes,
       {
@@ -25,7 +25,7 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
+    class="tw-font-sans tw-inline-flex tw-justify-center tw-rounded-xl tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
     :class="[
       commonUrlButtonClasses,
       classes,

package/src/atoms/components/Dropdown/Dropdown.stories.js

@@ -18,11 +18,11 @@ export const Sample = () => {
     data() {
       return {
         show: true,
-      };
+      }
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible">
           <DropdownItem @click="() => show = false">
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
@@ -45,7 +45,7 @@ export const Disabled = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
+        <Dropdown menu-align="right" disabled>
           <DropdownItem>
             <span>Menu item 1</span>
           </DropdownItem>
@@ -67,7 +67,7 @@ export const LongListFixedHeight = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
           <DropdownItem v-for="(item, i) in items" :key="i">
             <span class="tw-grow">{{ item.display }}</span>
           </DropdownItem>
@@ -123,7 +123,7 @@ export const SampleElementClasses = () => {
     },
     template: `
       <div class="tw-flex tw-gap-2 tw-m-4">
-        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
+        <Dropdown menu-align="right" element-classes="tw-h-12">
           <DropdownItem>
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>

package/src/atoms/components/Icon/Icon.vue

@@ -20,8 +20,8 @@
       aria-labelledby="title"
       aria-describedby="desc"
     >
-      <title v-if="title" :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc v-if="description" :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -799,7 +799,7 @@ export default {
       return css || null;
     },
     title() {
-      return this.altText;
+      return this.altText || `${this.titleCase(this.name)}`;
     },
     description() {
       return `${this.title} Icon`;

package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js

@@ -1,5 +1,5 @@
-import vClickOutside from 'click-outside-vue3';
 import brandPageApiClient from '../../clients/brand-page-api.client';
+import vClickOutside from 'click-outside-vue3';
 
 export const paymentConfigStatuses = Object.freeze({
   active: 'Active',

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

@@ -50,7 +50,7 @@
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
-              :img-url="iconUrl"
+              :imgUrl="iconUrl"
               title="Free Address"
               description="Choose a free address to publish now. You can always edit the URL later"
               :is-design-com="isDesignCom"
@@ -84,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>
@@ -138,7 +138,6 @@
                   :element-classes="{
                     'tw-h-12': true,
                   }"
-                  menu-element-classes="tw-w-full"
                   :disabled="domainTypeValue === DOMAIN_TYPES.slug"
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
@@ -196,7 +195,6 @@
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
                 @on-change-search="onSearchTextChanged"
-                @on-buy-now-click="onBuyNowClick"
               />
             </div>
             <Button
@@ -246,21 +244,19 @@
   </div>
 </template>
 <script>
-import { computed } from 'vue';
-import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.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 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 SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
-import { tr } from '../../../useSharedLibTranslate';
 
 const headerSubtitle = 'Buy matching domain name for your brand';
 
@@ -415,12 +411,6 @@ export default {
     'on-view-more-domains',
     'on-slug-changed',
   ],
-  setup() {
-    return {
-      tr,
-      testMessage: computed(() => tr('publishModal.test')),
-    };
-  },
   data() {
     return {
       DOMAIN_TYPES,
@@ -494,13 +484,11 @@ export default {
       this.$emit('radio-button-changed', domain);
     },
     onCloseModal() {
-      console.log('closing the modal with', this.tr('publishModal.test'));
-
       this.$emit('close-modal');
       this.$emit('on-hide-domain-modal');
     },
     onCopyUrlClick() {
-      this.$emit('copy-url-clicked');
+      this.$emit('copy-url-click');
     },
     onSlugChanged(e) {
       this.searchText = e;
@@ -520,7 +508,6 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
-      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -536,9 +523,6 @@ export default {
     onSellDomainNameListCloseModal() {
       this.$emit('on-hide-domain-modal');
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-clicked');
-    },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;
       let searchSlug = '';

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -114,7 +114,6 @@ export default {
       if (typeof this.domainSearchLocation !== 'undefined') {
         request.domainSearchLocation = this.domainSearchLocation;
       }
-      this.$emit('on-buy-now-click');
       window.dispatchEvent(
         new CustomEvent(Events.DomainSelectedEvent, {
           detail: request,

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -25,7 +25,6 @@
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
       @load-more-domains="onLoadMoreDomains"
-      @on-buy-now-click="onBuyNowClick"
     />
     <div v-else-if="shouldShowDomainNameNotFound" class="tw-flex tw-justify-center tw-text-center">
       Sorry, we couldn't find any domain for "{{ previousSearchText }}".
@@ -146,9 +145,6 @@ export default {
       window.dispatchEvent(new CustomEvent(Events.DomainLoadMoreEvent));
       this.domainNameItemsInView += this.domainNameItemsPerPage;
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     resetDomainNameItemsInView() {
       this.domainNameItemsInView = this.domainNameItemsPerPage;
     },

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -20,7 +20,6 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
-      @on-buy-now-click="onBuyNowClick"
     />
   </div>
 </template>
@@ -171,9 +170,6 @@ export default {
         this.isBusy = false;
       }
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     cleanText(inputText) {
       // In this function, we use the Unicode property escapes \p{L} and \p{N} to match any Unicode letters (characters from various scripts) and Unicode numbers, respectively.
       const cleanedText = inputText.replace(/[^\p{L}\p{N}\-.]+/gu, '');

package/nodemon.translation.json

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

package/src/atoms/components/Button/variants/ButtonOutlinePrimary.vue

@@ -1,53 +0,0 @@
-<template>
-  <button
-    v-if="!url"
-    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-primary-500 tw-uppercase tw-transition-colors tw-duration-300"
-    :class="[
-      classes,
-      computedClasses,
-      {
-        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy && !disabled,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-    ]"
-    :disabled="disabled"
-    :type="type"
-    v-bind="attrs"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-  <a
-    v-else
-    :href="computedUrl"
-    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-transition-colors tw-duration-300"
-    :class="[
-      commonUrlButtonClasses,
-      classes,
-      computedClasses,
-      {
-        'tw-cursor-wait': disabled,
-        'tw-cursor-pointer': !disabled,
-        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy,
-        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
-          isBusy,
-      },
-    ]"
-    :download="download"
-    v-bind="attrs"
-    :target="target"
-    @click="onClick"
-  >
-    <slot />
-  </a>
-</template>
-<script>
-import ButtonVariant from '../ButtonVariant.mixin.vue';
-
-export default {
-  mixins: [ButtonVariant],
-};
-</script>

package/src/bundleTranslation.js

@@ -1,79 +0,0 @@
-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(`${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.de-DE.json

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

package/src/bundles/bundled-translations.es-ES.json

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

package/src/bundles/bundled-translations.fr-FR.json

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

package/src/bundles/bundled-translations.json

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

package/src/bundles/bundled-translations.pt-PT.json

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

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

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

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

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

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

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

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

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

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

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

package/src/useSharedLibTranslate.js

@@ -1,38 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import i18next from 'i18next';
-
-const fallbackLocale = 'en-US';
-
-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) {
-    await i18next.init({
-      debug: false,
-      fallbackLng: fallbackLocale,
-      lng: localeToUse,
-    });
-  }
-
-  const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
-
-  await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
-    ...languageFile,
-  });
-};
-
-const tr = (key, valuesToInterpolate = {}) => {
-  const translated = i18next.t(key, { ns: 'fe-shared-lib', ...valuesToInterpolate });
-
-  return translated;
-};
-
-export { setLocaleAsync, tr };