Temporarily relax biome setup for v4

biome.json

@@ -28,7 +28,26 @@
         "noUnusedTemplateLiteral": "error",
         "useNumberNamespace": "error",
         "noInferrableTypes": "error",
-        "noUselessElse": "error"
+        "noUselessElse": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off",
+        "noUnusedVariables": "off",
+        "useParseIntRadix": "off",
+        "useUniqueElementIds": "off",
+        "noNestedComponentDefinitions": "off"
+      },
+      "complexity": {
+        "useLiteralKeys": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      },
+      "a11y": {
+        "noStaticElementInteractions": "off",
+        "useKeyWithClickEvents": "off",
+        "noSvgWithoutTitle": "off"
       }
     }
   },

packages/react-components/src/components/addresses/AddressField.tsx

@@ -73,7 +73,7 @@ export function AddressField(props: Props): JSX.Element {
   const { address } = useContext(AddressChildrenContext)
   const text = name && address ? address?.[name] : ""
   const { deleteCustomerAddress } = useContext(CustomerContext)
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>): void => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
     e.stopPropagation()
     e.preventDefault()
     if (type === "delete" && deleteCustomerAddress && address?.reference) {
@@ -92,9 +92,9 @@ export function AddressField(props: Props): JSX.Element {
       {text}
     </p>
   ) : (
-    <a data-testid={`address-field-${name ?? ""}`} {...p} onClick={handleClick}>
+    <button data-testid={`address-field-${name ?? ""}`} {...p} onClick={handleClick}>
       {label}
-    </a>
+    </button>
   )
 }
 

packages/react-components/src/components/line_items/LineItemRemoveLink.tsx

@@ -13,7 +13,7 @@ interface ChildrenProps extends Omit<Props, 'children'> {
 }
 
 interface Props
-  extends PropsWithoutRef<Omit<JSX.IntrinsicElements['a'], 'children'>> {
+  extends PropsWithoutRef<Omit<JSX.IntrinsicElements['button'], 'children'>> {
   children?: ChildrenFunction<ChildrenProps>
   label?: string
 }
@@ -27,7 +27,7 @@ export function LineItemRemoveLink(props: Props): JSX.Element {
     key: 'lineItem'
   })
   const { deleteLineItem } = useContext(LineItemContext)
-  const handleRemove = (e: React.MouseEvent<HTMLAnchorElement>): void => {
+  const handleRemove = (e: React.MouseEvent<HTMLButtonElement>): void => {
     e.preventDefault()
     if (deleteLineItem != null && lineItem != null)
       deleteLineItem(lineItem.id)
@@ -41,14 +41,14 @@ export function LineItemRemoveLink(props: Props): JSX.Element {
   return props.children ? (
     <Parent {...parentProps}>{props.children}</Parent>
   ) : (
-    <a
+    <button
       data-testid={`line-item-remove-link-${lineItem?.sku_code ?? ''}`}
       {...props}
-      href='#'
+      type='button'
       onClick={handleRemove}
     >
       {label}
-    </a>
+    </button>
   )
 }
 

packages/react-components/src/components/line_items/LineItemsContainer.tsx

@@ -65,10 +65,11 @@ export function LineItemsContainer(props: Props): JSX.Element {
   const lineItemValue: LineItemContextValue = {
     ...state,
     loader,
-    updateLineItem: async (lineItemId, quantity = 1, hasExternalPrice) => {
+    updateLineItem: async (lineItemId, quantity, hasExternalPrice) => {
+      const qty = quantity ?? 1
       await updateLineItem({
         lineItemId,
-        quantity,
+        quantity: qty,
         hasExternalPrice,
         dispatch,
         config,

packages/react-components/src/components/orders/AddToCartButton.tsx

@@ -234,7 +234,8 @@ export function AddToCartButton(props: Props): JSX.Element {
         }
       }
       return res
-    } else if (url) {
+    }
+    if (url) {
       return await callExternalFunction({
         url,
         data: {

packages/react-components/src/components/orders/HostedCart.tsx

@@ -155,10 +155,8 @@ export function HostedCart({
     key: 'accessToken'
   })
   const [src, setSrc] = useState<string | undefined>()
-  if (accessToken == null || endpoint == null) return null
   const { order, createOrder, getOrder } = useContext(OrderContext)
   const { persistKey } = useContext(OrderStorageContext)
-  const { domain, slug } = getDomain(endpoint)
   async function setOrder(openCart?: boolean): Promise<void> {
     const orderId = localStorage.getItem(persistKey) ?? (await createOrder({}))
     if (orderId != null && accessToken && endpoint) {
@@ -245,7 +243,8 @@ export function HostedCart({
     } else if (
       src == null &&
       (order?.id != null || orderId != null) &&
-      accessToken
+      accessToken &&
+      endpoint != null
     ) {
       getOrganizationConfig({
         accessToken,
@@ -274,7 +273,6 @@ export function HostedCart({
     return (): void => {
       ignore = true
       if (openAdd && type === 'mini') {
-        // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
         unsubscribe('open-cart', () => {})
       }
     }
@@ -290,6 +288,8 @@ export function HostedCart({
       ref.current
     )
   }, [ref.current != null])
+  if (accessToken == null || endpoint == null) return null
+  const { domain, slug } = getDomain(endpoint)
   /**
    * Close the cart.
    */
@@ -324,21 +324,22 @@ export function HostedCart({
         {...props}
       >
         <div style={{ ...defaultStyle.iconContainer, ...style?.iconContainer }}>
-          <svg
-            xmlns='http://www.w3.org/2000/svg'
-            fill='none'
-            viewBox='0 0 24 24'
-            strokeWidth={1.5}
-            stroke='currentColor'
-            style={{ ...defaultStyle.icon, ...style?.icon }}
-            onClick={onCloseCart}
-          >
-            <path
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              d='M6 18L18 6M6 6l12 12'
-            />
-          </svg>
+          <button type="button" aria-label="Close cart" onClick={onCloseCart}>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              fill='none'
+              viewBox='0 0 24 24'
+              strokeWidth={1.5}
+              stroke='currentColor'
+              style={{ ...defaultStyle.icon, ...style?.icon }}
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                d='M6 18L18 6M6 6l12 12'
+              />
+            </svg>
+          </button>
         </div>
         <iframe
           title='Cart'

packages/react-components/src/components/payment_source/AdyenPayment.tsx

@@ -283,7 +283,6 @@ export function AdyenPayment({
         resultCode: controlCode,
       }
     }
-    // biome-ignore lint/suspicious/noExplicitAny: No types
     const attributes: any = {
       payment_request_data: {
         ...state.data,

packages/react-components/src/components/payment_source/PaymentSourceBrandIcon.tsx

@@ -49,7 +49,7 @@ export function PaymentSourceBrandIcon({
   return children ? (
     <Parent {...parentProps}>{children}</Parent>
   ) : (
-    <img ref={ref} src={url} onError={handleError} width={width} {...p} />
+    <img alt={cardBrand ?? "credit card"} ref={ref} src={url} onError={handleError} width={width} {...p} />
   )
 }
 

packages/react-components/src/components/payment_source/StripePayment.tsx

@@ -25,7 +25,6 @@ export interface StripeConfig {
   name?: string
   options?: StripePaymentElementOptions
   appearance?: StripeElementsOptions["appearance"]
-  // biome-ignore lint/suspicious/noExplicitAny: No type available
   [key: string]: any
 }
 

packages/react-components/src/components/shipping_methods/ShippingMethod.tsx

@@ -12,7 +12,7 @@ export function ShippingMethod(props: Props): JSX.Element {
   const {
     children,
     readonly,
-    emptyText = `There are not any shipping method available`
+    emptyText = 'There are not any shipping method available'
   } = props
   const {
     shippingMethods,

packages/react-components/src/utils/isDate.ts

@@ -1,3 +1,3 @@
 export default function isDate(value: string): boolean {
-  return !isNaN(Date.parse(value))
+  return !Number.isNaN(Date.parse(value))
 }