fix: formatting + fix legacyBehaviour

fPolic · fPolic · commit 2607271fd64c · 2023-06-19T09:14:30.000+02:00
diff --git a/src/modules/account/components/account-nav/index.tsx b/src/modules/account/components/account-nav/index.tsx
@@ -15,7 +15,6 @@ const AccountNav = () => {
           <Link
             href="/account"
             className="flex items-center gap-x-2 text-small-regular py-2"
-            legacyBehavior
           >
             <>
               <ChevronDown className="transform rotate-90" />
@@ -78,7 +77,6 @@ const AccountNavLink = ({ href, route, children }: AccountNavLinkProps) => {
       className={clsx("text-gray-700", {
         "text-gray-900 font-semibold": active,
       })}
-      legacyBehavior
     >
       <>{children}</>
     </Link>
diff --git a/src/modules/account/components/order-card/index.tsx b/src/modules/account/components/order-card/index.tsx
@@ -65,12 +65,12 @@ const OrderCard = ({ order }: OrderCardProps) => {
         )}
       </div>
       <div className="flex justify-end">
-        <Link href={`/order/details/${order.id}`} legacyBehavior>
+        <Link href={`/order/details/${order.id}`}>
           <Button variant="secondary">See details</Button>
         </Link>
       </div>
     </div>
-  );
+  )
 }
 
 export default OrderCard
diff --git a/src/modules/account/components/order-overview/index.tsx b/src/modules/account/components/order-overview/index.tsx
@@ -37,12 +37,12 @@ const OrderOverview = () => {
         You don&apos;t have any orders yet, let us change that {":)"}
       </p>
       <div className="mt-4">
-        <Link href="/" passHref legacyBehavior>
+        <Link href="/" passHref>
           <Button>Continue shopping</Button>
         </Link>
       </div>
     </div>
-  );
+  )
 }
 
 export default OrderOverview
diff --git a/src/modules/account/components/overview/index.tsx b/src/modules/account/components/overview/index.tsx
@@ -24,7 +24,6 @@ const Overview = ({ orders, customer }: OverviewProps) => {
               <Link
                 href="/account/profile"
                 className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                legacyBehavior
               >
                 <>
                   <div className="flex items-center gap-x-2">
@@ -39,7 +38,6 @@ const Overview = ({ orders, customer }: OverviewProps) => {
               <Link
                 href="/account/addresses"
                 className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                legacyBehavior
               >
                 <>
                   <div className="flex items-center gap-x-2">
@@ -54,7 +52,6 @@ const Overview = ({ orders, customer }: OverviewProps) => {
               <Link
                 href="/account/orders"
                 className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                legacyBehavior
               >
                 <>
                   <div className="flex items-center gap-x-2">
@@ -114,10 +111,7 @@ const Overview = ({ orders, customer }: OverviewProps) => {
                   orders.slice(0, 5).map((order) => {
                     return (
                       <li key={order.id}>
-                        <Link
-                          href={`/order/details/${order.id}`}
-                          legacyBehavior
-                        >
+                        <Link href={`/order/details/${order.id}`}>
                           <div className="bg-gray-50 flex justify-between items-center p-4">
                             <div className="grid grid-cols-3 grid-rows-2 text-small-regular gap-x-4 flex-1">
                               <span className="font-semibold">Date placed</span>
diff --git a/src/modules/cart/components/sign-in-prompt/index.tsx b/src/modules/cart/components/sign-in-prompt/index.tsx
@@ -11,12 +11,12 @@ const SignInPrompt = () => {
         </p>
       </div>
       <div>
-        <Link href="/account/login" legacyBehavior>
+        <Link href="/account/login">
           <Button variant="secondary">Sign in</Button>
         </Link>
       </div>
     </div>
-  );
+  )
 }
 
 export default SignInPrompt
diff --git a/src/modules/cart/templates/summary.tsx b/src/modules/cart/templates/summary.tsx
@@ -11,11 +11,11 @@ const Summary = ({ cart }: SummaryProps) => {
   return (
     <div className="grid grid-cols-1 gap-y-6">
       <CartTotals cart={cart} />
-      <Link href="/checkout" legacyBehavior>
+      <Link href="/checkout">
         <Button>Go to checkout</Button>
       </Link>
     </div>
-  );
+  )
 }
 
 export default Summary
diff --git a/src/modules/checkout/templates/index.tsx b/src/modules/checkout/templates/index.tsx
@@ -15,7 +15,6 @@ const CheckoutTemplate = () => {
             <Link
               href="/cart"
               className="text-small-semi text-gray-700 flex items-center gap-x-2 uppercase flex-1 basis-0"
-              legacyBehavior
             >
               <>
                 <ChevronDown className="rotate-90" size={16} />
diff --git a/src/modules/common/components/underline-link/index.tsx b/src/modules/common/components/underline-link/index.tsx
@@ -12,7 +12,7 @@ const UnderlineLink = ({ href, children }: UnderlineLinkProps) => {
       <Link
         href={href}
         className="flex items-center text-large-regular border-b border-current gap-x-4 py-2 transition-all duration-300 group hover:pl-4 hover:pr-1"
-        legacyBehavior>
+      >
         <>
           <span>{children}</span>
           <ArrowRight
diff --git a/src/modules/home/components/hero/index.tsx b/src/modules/home/components/hero/index.tsx
@@ -25,10 +25,11 @@ const Hero = () => {
         fill
         sizes="100vw"
         style={{
-          objectFit: "cover"
-        }} />
+          objectFit: "cover",
+        }}
+      />
     </div>
-  );
+  )
 }
 
 export default Hero
diff --git a/src/modules/layout/components/cart-dropdown/index.tsx b/src/modules/layout/components/cart-dropdown/index.tsx
@@ -20,7 +20,7 @@ const CartDropdown = () => {
   return (
     <div className="h-full z-50" onMouseEnter={open} onMouseLeave={close}>
       <Popover className="relative h-full">
-        <Link href="/cart" passHref legacyBehavior>
+        <Link href="/cart" passHref>
           <Popover.Button className="h-full">{`My Bag (${totalItems})`}</Popover.Button>
         </Link>
         <Transition
@@ -59,9 +59,11 @@ const CartDropdown = () => {
                           <div className="flex flex-col flex-1">
                             <div className="flex items-start justify-between">
                               <div>
-                                <h3
-                                  className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4 w-[130px]">
-                                  <Link href={`/products/${item.variant.product.handle}`} legacyBehavior>
+                                <h3 className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4 w-[130px]">
+                                  <Link
+                                    href={`/products/${item.variant.product.handle}`}
+                                    legacyBehavior
+                                  >
                                     {item.title}
                                   </Link>
                                 </h3>
@@ -106,21 +108,20 @@ const CartDropdown = () => {
                       })}
                     </span>
                   </div>
-                  <Link href="/cart" passHref legacyBehavior>
+                  <Link href="/cart" passHref>
                     <Button>Go to bag</Button>
                   </Link>
                 </div>
               </>
             ) : (
               <div>
                 <div className="flex py-16 flex-col gap-y-4 items-center justify-center">
-                  <div
-                    className="bg-gray-900 text-small-regular flex items-center justify-center w-6 h-6 rounded-full text-white">
+                  <div className="bg-gray-900 text-small-regular flex items-center justify-center w-6 h-6 rounded-full text-white">
                     <span>0</span>
                   </div>
                   <span>Your shopping bag is empty.</span>
                   <div>
-                    <Link href="/store" legacyBehavior>
+                    <Link href="/store">
                       <>
                         <span className="sr-only">Go to all products page</span>
                         <Button onClick={close}>Explore products</Button>
diff --git a/src/modules/layout/components/dropdown-menu/index.tsx b/src/modules/layout/components/dropdown-menu/index.tsx
@@ -29,10 +29,10 @@ const DropdownMenu = () => {
       <div className="flex items-center h-full">
         <Popover className="h-full flex">
           <>
-            <Link href="/shop" className="relative flex h-full" passHref legacyBehavior>
+            <Link href="/shop" className="relative flex h-full" passHref>
               <Popover.Button
                 className={clsx(
-                  "relative h-full flex items-center transition-all ease-out duration-200",
+                  "relative h-full flex items-center transition-all ease-out duration-200"
                 )}
                 onClick={() => push("/store")}
               >
@@ -74,14 +74,14 @@ const DropdownMenu = () => {
                                       <Link
                                         href={`/collections/${collection.id}`}
                                         onClick={() => setOpen(false)}
-                                        legacyBehavior>
+                                      >
                                         {collection.title}
                                       </Link>
                                     </div>
-                                  );
+                                  )
                                 })}
                               </ul>
-                            );
+                            )
                           })}
                         {loadingCollections &&
                           repeat(6).map((index) => (
@@ -111,7 +111,7 @@ const DropdownMenu = () => {
         </Popover>
       </div>
     </div>
-  );
+  )
 }
 
 export default DropdownMenu
diff --git a/src/modules/layout/components/footer-cta/index.tsx b/src/modules/layout/components/footer-cta/index.tsx
@@ -20,12 +20,13 @@ const FooterCTA = () => {
             fill
             sizes="100vw"
             style={{
-              objectFit: "cover"
-            }} />
+              objectFit: "cover",
+            }}
+          />
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default FooterCTA
diff --git a/src/modules/layout/components/footer-nav/index.tsx b/src/modules/layout/components/footer-nav/index.tsx
@@ -24,9 +24,7 @@ const FooterNav = () => {
             >
               {collections?.map((c) => (
                 <li key={c.id}>
-                  <Link href={`/collections/${c.id}`} legacyBehavior>
-                    {c.title}
-                  </Link>
+                  <Link href={`/collections/${c.id}`}>{c.title}</Link>
                 </li>
               ))}
             </ul>
@@ -65,8 +63,7 @@ const FooterNav = () => {
           </div>
         </div>
       </div>
-      <div
-        className="flex flex-col-reverse gap-y-4 justify-center xsmall:items-center xsmall:flex-row xsmall:items-end xsmall:justify-between">
+      <div className="flex flex-col-reverse gap-y-4 justify-center xsmall:items-center xsmall:flex-row xsmall:items-end xsmall:justify-between">
         <span className="text-xsmall-regular text-gray-500">
           © Copyright 2022 ACME
         </span>
@@ -75,7 +72,7 @@ const FooterNav = () => {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default FooterNav
diff --git a/src/modules/mobile-menu/components/main-menu/index.tsx b/src/modules/mobile-menu/components/main-menu/index.tsx
@@ -61,7 +61,7 @@ const MainMenu = () => {
         <div className="flex flex-col flex-1 text-large-regular text-gray-900">
           <ul className="flex flex-col gap-y-2">
             <li className="bg-gray-50 p-4">
-              <Link href="/store" legacyBehavior>
+              <Link href="/store">
                 <button
                   className="flex items-center justify-between w-full"
                   onClick={close}
@@ -76,14 +76,14 @@ const MainMenu = () => {
               <>
                 {collections.map((collection) => (
                   <li key={collection.id} className="bg-gray-50 p-4">
-                    <Link href={`/collections/${collection.id}`} legacyBehavior>
+                    <Link href={`/collections/${collection.id}`}>
                       <button
                         className="flex items-center justify-between w-full"
                         onClick={close}
                       >
-                          <span className="sr-only">
-                            Go to {collection.title} collection
-                          </span>
+                        <span className="sr-only">
+                          Go to {collection.title} collection
+                        </span>
                         <span>{collection.title}</span>
                         <ChevronDown className="-rotate-90" />
                       </button>
@@ -100,7 +100,7 @@ const MainMenu = () => {
             {!customer ? (
               <div className="flex flex-col gap-y-4">
                 <span className="text-gray-700 uppercase">Account</span>
-                <Link href={`/account/login`} passHref legacyBehavior>
+                <Link href={`/account/login`} passHref>
                   <button
                     className="flex items-center justify-between border-b border-gray-200 py-2 w-full"
                     onClick={close}
@@ -114,7 +114,7 @@ const MainMenu = () => {
             ) : (
               <div className="flex flex-col gap-y-4">
                 <span className="text-gray-700 uppercase">Signed in as</span>
-                <Link href={`/account`} passHref legacyBehavior>
+                <Link href={`/account`} passHref>
                   <button
                     className="flex items-center justify-between border-b border-gray-200 py-2 w-full"
                     onClick={close}
@@ -149,7 +149,7 @@ const MainMenu = () => {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default MainMenu
diff --git a/src/modules/order/components/items/index.tsx b/src/modules/order/components/items/index.tsx
@@ -19,37 +19,39 @@ const Items = ({ items, region, cartId }: ItemsProps) => {
     <div className="p-10 border-b border-gray-200 gap-y-4 flex flex-col">
       {enrichedItems?.length
         ? enrichedItems.map((item) => {
-          return (
-            <div className="grid grid-cols-[122px_1fr] gap-x-4" key={item.id}>
-              <div className="w-[122px]">
-                <Thumbnail thumbnail={item.thumbnail} size="full" />
-              </div>
-              <div className="flex flex-col justify-between flex-1">
-                <div className="flex flex-col flex-1 text-small-regular">
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <h3 className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4">
-                        <Link href={`/products/${item.variant.product.handle}`} legacyBehavior>
-                          {item.title}
-                        </Link>
-                      </h3>
-                      <LineItemOptions variant={item.variant} />
-                      <span>Quantity: {item.quantity}</span>
-                    </div>
-                    <div className="flex justify-end">
-                      <LineItemPrice region={region} item={item} />
+            return (
+              <div className="grid grid-cols-[122px_1fr] gap-x-4" key={item.id}>
+                <div className="w-[122px]">
+                  <Thumbnail thumbnail={item.thumbnail} size="full" />
+                </div>
+                <div className="flex flex-col justify-between flex-1">
+                  <div className="flex flex-col flex-1 text-small-regular">
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <h3 className="text-base-regular overflow-ellipsis overflow-hidden whitespace-nowrap mr-4">
+                          <Link
+                            href={`/products/${item.variant.product.handle}`}
+                          >
+                            {item.title}
+                          </Link>
+                        </h3>
+                        <LineItemOptions variant={item.variant} />
+                        <span>Quantity: {item.quantity}</span>
+                      </div>
+                      <div className="flex justify-end">
+                        <LineItemPrice region={region} item={item} />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-          );
-        })
+            )
+          })
         : Array.from(Array(items.length).keys()).map((i) => {
-          return <SkeletonLineItem key={i} />
-        })}
+            return <SkeletonLineItem key={i} />
+          })}
     </div>
-  );
+  )
 }
 
 export default Items
diff --git a/src/modules/products/components/image-gallary/index.tsx b/src/modules/products/components/image-gallary/index.tsx
diff --git a/src/modules/products/components/product-actions/index.tsx b/src/modules/products/components/product-actions/index.tsx
diff --git a/src/modules/products/components/product-preview/index.tsx b/src/modules/products/components/product-preview/index.tsx
diff --git a/src/modules/products/components/thumbnail/index.tsx b/src/modules/products/components/thumbnail/index.tsx
diff --git a/src/modules/search/components/hit/index.tsx b/src/modules/search/components/hit/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@ const CheckoutTemplate = () => {`
`15`	`15`	`<Link`
`16`	`16`	`href="/cart"`
`17`	`17`	`className="text-small-semi text-gray-700 flex items-center gap-x-2 uppercase flex-1 basis-0"`
`18`		`- legacyBehavior`
`19`	`18`	`>`
`20`	`19`	`<>`
`21`	`20`	`<ChevronDown className="rotate-90" size={16} />`