chore: fix biome issues

Author: marcomontalbano

biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.0/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

packages/docs/.storybook/preview-head.html

@@ -4,6 +4,7 @@
   }
 
   .sbdocs-h3:first-of-type {
+    /* biome-ignore lint/complexity/noImportantStyles : we need to override the default styles */
     margin: 20px 0 8px !important;
     padding: 0;
   }
@@ -24,6 +25,7 @@
     }
   }
 
+  /* biome-ignore lint/correctness/noUnknownMediaFeatureName : we need to override the default styles */
   @media all and (-ms-high-contrast:none) {
   .link-list {
       display: -ms-grid;
@@ -38,7 +40,6 @@
 
   .link-list > button {
     cursor: pointer;
-    display: block;
     text-align: left;
     padding: 20px 30px 20px 15px;
     border: 1px solid #00000010;
@@ -136,11 +137,7 @@
   .drop-in-js--organization-settings button,
   .drop-in-js--organization-settings input[type="submit"] {
     border: 0;
-    border-radius: 3em;
     cursor: pointer;
-    display: inline-block;
-    overflow: hidden;
-    padding: 8px 16px;
     position: relative;
     text-align: center;
     -webkit-text-decoration: none;
@@ -153,13 +150,8 @@
     transform: translate3d(0,0,0);
     vertical-align: top;
     white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
     opacity: 1;
     margin: 0;
-    background: transparent;
     font-size: 12px;
     font-weight: 700;
     line-height: 1;
@@ -202,42 +194,42 @@
 
   /* Weird Storybook issue on firefox */
   [scale="1"] {
-    transform: none !important;
-    transform-origin: initial !important;
-    height: auto !important;
+    transform: none;
+    transform-origin: initial;
+    height: auto;
   }
 </style>
 
 <style>
   ol {
-    list-style: decimal !important;
+    list-style: decimal;
   }
   h2 {
-    margin: 40px 0 8px !important;
+    margin: 40px 0 8px;
   }
   h3 {
-    margin: 20px 0 8px !important;
+    margin: 20px 0 8px;
   }
   a:link, a:link:hover, a:link:active, a:visited {
-    color: #029CFD !important;
+    color: #029CFD;
     text-decoration: underline;
   }
 </style>
 
 <style>
   .language-diff .token.deleted {
-    color: #E57373 !important;
+    color: #E57373;
   }
   .language-diff .token.inserted {
-    color: #AED581 !important;
+    color: #AED581;
   }
 </style>
 
 <!-- used for the demo story -->
 <script src="https://cdn.tailwindcss.com"></script>
 
 <script>
-  (function() {
+          (() => {
     // This hack is to remove the access token from the URL after the user has been redirected back to the docs (only for storybook use-case).
     setTimeout(() => {
       const url = new URL(window.parent.location.href)

packages/drop-in/src/cart.html

@@ -132,7 +132,7 @@
             const addToCart = document.getElementById('vs--add-to-cart')
             const availability = document.getElementById('vs--availability')
 
-            select.addEventListener('change', function (event) {
+            select.addEventListener('change', (event) => {
               const sku = event.currentTarget.value
               title.innerText = sku
               price.code = sku

packages/drop-in/src/index.html

@@ -205,7 +205,7 @@
                 option.innerText,
                 {
                   code: option.value,
-                  quantity: parseInt(option.dataset.quantity),
+                  quantity: parseInt(option.dataset.quantity, 10),
                   name: option.dataset.name,
                   imageUrl: option.dataset.imageUrl,
                   frequency: option.dataset.frequency,
@@ -230,8 +230,8 @@
               productCard.querySelector('cl-price').code = code;
               productCard.querySelector('cl-add-to-cart').kind = kind ?? null;
               productCard.querySelector('cl-add-to-cart').code = code;
-              productCard.querySelector('cl-add-to-cart').quantity = isNaN(quantity) || quantity == null ? 1 : quantity;
-              productCard.querySelector('[data-id="pc--quantity"]').value = isNaN(quantity) || quantity == null ? 1 : quantity;
+              productCard.querySelector('cl-add-to-cart').quantity = Number.isNaN(quantity) || quantity == null ? 1 : quantity
+              productCard.querySelector('[data-id="pc--quantity"]').value = Number.isNaN(quantity) || quantity == null ? 1 : quantity;
               productCard.querySelector('cl-add-to-cart').name = name;
               productCard.querySelector('cl-add-to-cart').imageUrl = imageUrl;
               productCard.querySelector('cl-add-to-cart').frequency = frequency;
@@ -241,8 +241,8 @@
                 productCard.querySelector('[data-id="pc--selector"]').innerHTML = `<code>${description.toUpperCase()}</code>`
               }
 
-              productCard.querySelector('[data-id="pc--quantity"]').addEventListener('keyup', function (event) {
-                const qnt = parseInt(event.currentTarget.value)
+              productCard.querySelector('[data-id="pc--quantity"]').addEventListener('keyup', (event) => {
+                const qnt = parseInt(event.currentTarget.value, 10)
                 productCard.querySelector('cl-add-to-cart').quantity = qnt > 101 ? 101 : qnt < -101 ? -101 : qnt
                 if (qnt > 101) {
                   event.currentTarget.value = 101
@@ -253,8 +253,8 @@
               })
             }
 
-            productCard.querySelector('[data-id="pc--quantity"]').addEventListener('input', function (event) {
-              const qnt = parseInt(event.currentTarget.value)
+              productCard.querySelector('[data-id="pc--quantity"]').addEventListener('input', (event) => {
+                const qnt = parseInt(event.currentTarget.value, 10)
               productCard.querySelector('cl-add-to-cart').quantity = qnt > 101 ? 101 : qnt < -101 ? -101 : qnt
               if (qnt > 101) {
                 event.currentTarget.value = 101
@@ -264,9 +264,9 @@
               }
             })
 
-            select.addEventListener('change', function (event) {
+              select.addEventListener('change', (event) => {
               const code = event.currentTarget.value;
-              const quantity = parseInt(event.currentTarget.selectedOptions[0].dataset.quantity)
+              const quantity = parseInt(event.currentTarget.selectedOptions[0].dataset.quantity, 10)
               const name = event.currentTarget.selectedOptions[0].dataset.name
               const imageUrl = event.currentTarget.selectedOptions[0].dataset.imageUrl
               const frequency = event.currentTarget.selectedOptions[0].dataset.frequency