@designcrowd/fe-shared-lib 1.1.12 → 1.2.0-kp-1

package/.storybook/main.ts

@@ -4,9 +4,6 @@ module.exports = {
   stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-controls',
-    '@storybook/addon-essentials',
     '@storybook/addon-links',
     {
       name: '@storybook/addon-themes',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.1.12",
+  "version": "1.2.0-kp-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -17,7 +17,8 @@
     "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
   },
   "dependencies": {
-    "@nuxtjs/i18n": "^9.2.1",
+    "@nuxtjs/i18n": "9.5.4",
+    "@storybook/react": "^9.0.4",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "click-outside-vue3": "4.0.1",
@@ -29,26 +30,23 @@
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "5.1.4",
+    "vite": "6.3.5",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.13",
-    "vue-color": "2.8.1",
+    "vue": "3.5.15",
+    "vue-color": "3.0.2",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
     "vue-router": "4.5.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.6.11",
-    "@storybook/addon-actions": "8.6.11",
-    "@storybook/addon-controls": "8.6.11",
-    "@storybook/addon-essentials": "8.6.11",
-    "@storybook/addon-links": "8.6.11",
-    "@storybook/addon-themes": "8.6.11",
-    "@storybook/vue3": "8.6.11",
-    "@storybook/vue3-vite": "8.6.11",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@storybook/addon-a11y": "9.0.4",
+    "@storybook/addon-links": "9.0.4",
+    "@storybook/addon-themes": "9.0.4",
+    "@storybook/vue3": "9.0.4",
+    "@storybook/vue3-vite": "9.0.4",
+    "@vitejs/plugin-vue": "5.2.4",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-airbnb": "8.0.0",
@@ -69,7 +67,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "8.6.11",
+    "storybook": "9.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",
@@ -106,5 +104,8 @@
     "./src/*.js": {
       "import": "./src/*.js"
     }
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }

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;
 }
@@ -1020,9 +1017,6 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1450,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;
 }
@@ -2108,10 +2091,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;
 }
@@ -1020,9 +1017,6 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1304,17 +1298,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;
 }
@@ -1812,10 +1795,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;
 }
@@ -1020,9 +1017,6 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1450,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;
 }
@@ -2108,10 +2091,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;
 }
@@ -1020,9 +1017,6 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1450,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;
 }
@@ -2108,10 +2091,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;
 }
@@ -1020,9 +1017,6 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1450,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;
 }
@@ -2108,10 +2091,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/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -196,6 +196,7 @@
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
                 @on-change-search="onSearchTextChanged"
+                @on-buy-now-click="onBuyNowClick"
               />
             </div>
             <Button
@@ -489,7 +490,7 @@ export default {
       this.$emit('on-hide-domain-modal');
     },
     onCopyUrlClick() {
-      this.$emit('copy-url-click');
+      this.$emit('copy-url-clicked');
     },
     onSlugChanged(e) {
       this.searchText = e;
@@ -509,6 +510,7 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
+      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -524,6 +526,9 @@ 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,6 +114,7 @@ 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,6 +25,7 @@
       :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 }}".
@@ -145,6 +146,9 @@ 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,6 +20,7 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
+      @on-buy-now-click="onBuyNowClick"
     />
   </div>
 </template>
@@ -170,6 +171,9 @@ 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, '');