Merge branch 'Weaverse:main' into main

Weaverse · Aug 30, 2024 · 5a7346e · 5a7346e
2 parents e6cdc65 + c27d600
commit 5a7346e
Show file tree

Hide file tree

Showing 18 changed files with 263 additions and 331 deletions.
diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
@@ -83,7 +83,7 @@ export function Drawer({
                   <header
                     className={cn(
                       'sticky top-0 flex h-nav items-center px-6 py-5',
-                      heading ? 'justify-between' : 'justify-end',
+                      heading ? 'justify-between' : 'justify-items-end',
                       openFrom === 'left' || openFrom === 'top' && !isBackMenu
                         ? 'flex-row-reverse'
                         : '',
@@ -115,9 +115,7 @@ export function Drawer({
                     )}
                     {heading !== null && (
                       <Dialog.Title>
-                        <Heading as="span" size="heading" id="cart-contents">
-                          {heading}
-                        </Heading>
+                        <span className='font-heading text-xl font-medium' id='cart-contents'>{heading}</span>
                       </Dialog.Title>
                     )}
                     <div className="p-0" />

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -103,7 +103,7 @@ function MenuLink(props: SingleMenuItem) {
     <>
       <div className="hidden flex-col gap-6 md:flex">
         <h4 className="font-medium uppercase">
-          <span className="font-heading">{title}</span>
+          {title}
         </h4>
         <ul className="space-y-1.5">
           {items.map((subItem, ind) => (
@@ -160,101 +160,5 @@ function MenuLink(props: SingleMenuItem) {
 }
 
 function HeaderText({title, to}: {title: string; to: string}) {
-  return <h4 className="font-heading font-medium uppercase">{title}</h4>;
-}
-
-// function FooterMenu({
-//   menu,
-//   primaryDomainUrl,
-// }: {
-//   menu: FooterQuery['menu'];
-//   primaryDomainUrl: FooterQuery['shop']['primaryDomain']['url'];
-// }) {
-//   const {publicStoreDomain} = useRootLoaderData();
-
-//   return (
-//     <nav className="flex flex-col gap-4" role="navigation">
-//       {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
-//         if (!item.url) return null;
-//         // if the url is internal, we strip the domain
-//         const url =
-//           item.url.includes('myshopify.com') ||
-//           item.url.includes(publicStoreDomain) ||
-//           item.url.includes(primaryDomainUrl)
-//             ? new URL(item.url).pathname
-//             : item.url;
-//         const isExternal = !url.startsWith('/');
-//         return isExternal ? (
-//           <a href={url} key={item.id} rel="noopener noreferrer" target="_blank">
-//             {item.title}
-//           </a>
-//         ) : (
-//           <NavLink
-//             end
-//             key={item.id}
-//             prefetch="intent"
-//             // style={activeLinkStyle}
-//             to={url}
-//           >
-//             {item.title}
-//           </NavLink>
-//         );
-//       })}
-//     </nav>
-//   );
-// }
-
-const FALLBACK_FOOTER_MENU = {
-  id: 'gid://shopify/Menu/199655620664',
-  items: [
-    {
-      id: 'gid://shopify/MenuItem/461633060920',
-      resourceId: 'gid://shopify/ShopPolicy/23358046264',
-      tags: [],
-      title: 'Privacy Policy',
-      type: 'SHOP_POLICY',
-      url: '/policies/privacy-policy',
-      items: [],
-    },
-    {
-      id: 'gid://shopify/MenuItem/461633093688',
-      resourceId: 'gid://shopify/ShopPolicy/23358013496',
-      tags: [],
-      title: 'Refund Policy',
-      type: 'SHOP_POLICY',
-      url: '/policies/refund-policy',
-      items: [],
-    },
-    {
-      id: 'gid://shopify/MenuItem/461633126456',
-      resourceId: 'gid://shopify/ShopPolicy/23358111800',
-      tags: [],
-      title: 'Shipping Policy',
-      type: 'SHOP_POLICY',
-      url: '/policies/shipping-policy',
-      items: [],
-    },
-    {
-      id: 'gid://shopify/MenuItem/461633159224',
-      resourceId: 'gid://shopify/ShopPolicy/23358079032',
-      tags: [],
-      title: 'Terms of Service',
-      type: 'SHOP_POLICY',
-      url: '/policies/terms-of-service',
-      items: [],
-    },
-  ],
-};
-
-function activeLinkStyle({
-  isActive,
-  isPending,
-}: {
-  isActive: boolean;
-  isPending: boolean;
-}) {
-  return {
-    fontWeight: isActive ? 'bold' : undefined,
-    color: isPending ? 'grey' : 'white',
-  };
+  return <h4 className="font-medium uppercase">{title}</h4>;
 }
diff --git a/app/components/Header/MenuDrawerHeader.tsx b/app/components/Header/MenuDrawerHeader.tsx
@@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin} from '../Icon';
+import {IconAccount, IconListMenu, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
 import {CartCount} from './CartCount';
@@ -115,23 +115,15 @@ function HeaderMenuDrawer({menu}: {menu?: EnhancedMenu | null | undefined}) {
       role="navigation"
     >
       <button className="text-left" onClick={openDrawer}>
-        <span>☰</span>
+        <IconListMenu />
       </button>
       <SearchToggle isOpenDrawerHearder={true} />
       <Drawer
         open={showMenu}
         onClose={closeDrawer}
         openFrom="left"
-        // className="fixed top-0 flex h-fit w-full flex-col bg-white"
         heading="MENU"
       >
-        {/* <HeaderMenu
-              menu={menu}
-              viewport="desktop"
-              primaryDomainUrl={header.shop.primaryDomain.url}
-              showMenu={showMenu}
-              onCloseMenu={closeDrawer}
-            /> */}
         <DrawerMenu menu={menu} />
       </Drawer>
     </nav>

diff --git a/app/components/Header/SearchToggle.tsx b/app/components/Header/SearchToggle.tsx
@@ -47,7 +47,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         open={isOpen}
         onClose={closeDrawer}
         openFrom={openFrom}
-        heading="Search"
+        heading={settings?.searchType === 'drawerSearch' ? 'Search' : ''}
         isForm="search"
       >
         {searchType === 'popupSearch' && <SearchTypeHeader isOpen={isOpen} />}

diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
@@ -606,7 +606,7 @@ export function IconTag(props: IconProps) {
 export function IconListMenu(props: IconProps){
   return(
     <Icon {...props} fill="currentColor" stroke={props.stroke || 'currentColor'} viewBox="0 0 24 24" width="24" height="24">
-      <path d="M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z" fill="#3D490B"/>
+      <path d="M21 12C21 12.1989 20.921 12.3897 20.7803 12.5303C20.6397 12.671 20.4489 12.75 20.25 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H20.25C20.4489 11.25 20.6397 11.329 20.7803 11.4697C20.921 11.6103 21 11.8011 21 12ZM3.75 6.75H20.25C20.4489 6.75 20.6397 6.67098 20.7803 6.53033C20.921 6.38968 21 6.19891 21 6C21 5.80109 20.921 5.61032 20.7803 5.46967C20.6397 5.32902 20.4489 5.25 20.25 5.25H3.75C3.55109 5.25 3.36032 5.32902 3.21967 5.46967C3.07902 5.61032 3 5.80109 3 6C3 6.19891 3.07902 6.38968 3.21967 6.53033C3.36032 6.67098 3.55109 6.75 3.75 6.75ZM20.25 17.25H3.75C3.55109 17.25 3.36032 17.329 3.21967 17.4697C3.07902 17.6103 3 17.8011 3 18C3 18.1989 3.07902 18.3897 3.21967 18.5303C3.36032 18.671 3.55109 18.75 3.75 18.75H20.25C20.4489 18.75 20.6397 18.671 20.7803 18.5303C20.921 18.3897 21 18.1989 21 18C21 17.8011 20.921 17.6103 20.7803 17.4697C20.6397 17.329 20.4489 17.25 20.25 17.25Z" fill="currentColor"/>
     </Icon>
   );
 }

diff --git a/app/components/global-loading.tsx b/app/components/global-loading.tsx
@@ -0,0 +1,47 @@
+import { useNavigation } from "@remix-run/react";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+export function GlobalLoading() {
+  let transition = useNavigation();
+  let active = transition.state !== "idle";
+
+  let ref = useRef<HTMLDivElement>(null);
+  let [animating, setAnimating] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    Promise.allSettled(
+      ref.current.getAnimations().map(({ finished }) => finished),
+    ).then(() => {
+      if (!active) setAnimating(false);
+    });
+
+    if (active) {
+      let id = setTimeout(() => setAnimating(true), 100);
+      return () => clearTimeout(id);
+    }
+  }, [active]);
+
+  return (
+    <div
+      // biome-ignore lint/a11y/useAriaPropsForRole: <explanation>
+      role="progressbar"
+      aria-hidden={!active}
+      aria-valuetext={active ? "Loading" : undefined}
+      className="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse"
+    >
+      <div
+        ref={ref}
+        className={clsx(
+          "h-full bg-gradient-to-r from-background to-body transition-all duration-500 ease-in-out",
+          transition.state === "idle" &&
+            (animating ? "w-full" : "w-0 opacity-0 transition-none"),
+          transition.state === "submitting" && "w-4/12",
+          transition.state === "loading" && "w-10/12",
+        )}
+      />
+    </div>
+  );
+}
diff --git a/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx b/app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx
@@ -83,12 +83,13 @@ export function SearchTypeDrawerResults() {
             />
           </div>
         )}
-        <div className='h-[50px]'/>
+        <div className='h-[50px] mt-2'/>
         {searchTerm.current && (
           <Link
             onClick={goToSearchResult}
             to={`/search?q=${searchTerm.current}`}
             className="flex justify-center absolute bottom-0 p-6 bg-background-subtle-1 left-0 right-0"
+            style={{ boxShadow: '0 -4px 6px -1px rgba(0, 0, 0, 0.1)' }}
           >
             <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
               Show All Results ({totalResultsCount})

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -1,12 +1,9 @@
 import { Image } from "@shopify/hydrogen";
 import clsx from "clsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { MediaFragment } from "storefrontapi.generated";
 import { FreeMode, Pagination, Thumbs } from "swiper/modules";
 import { Swiper, type SwiperClass, SwiperSlide } from "swiper/react";
-import 'swiper/css/free-mode';
-import 'swiper/css/navigation';
-import 'swiper/css/thumbs';
 
 interface ProductMediaProps {
   selectedVariant: any;
@@ -21,43 +18,23 @@ export function ProductMedia(props: ProductMediaProps) {
   let media = _media.filter((med) => med.__typename === "MediaImage");
   let [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
   let [activeIndex, setActiveIndex] = useState(0);
+  console.log("🚀 ~ thumbsSwiper:", thumbsSwiper)
+
+  useEffect(() => {
+    if (thumbsSwiper) {
+      thumbsSwiper.slideTo(activeIndex);
+    }
+  }, [thumbsSwiper]);
 
   return (
-    <div className="flex flex-col-reverse md:flex-col-reverse gap-4 w-full overflow-hidden">
-      <Swiper
-        onSwiper={setThumbsSwiper}
-        direction="horizontal"
-        spaceBetween={spacing}
-        freeMode
-        slidesPerView={"auto"}
-        threshold={2}
-        modules={[FreeMode, Thumbs]}
-        className="w-full overflow-visible hidden md:block"
-      >
-        {media.map((med, i) => {
-          let image = { ...med.image, altText: med.alt || "Product image" };
-          return (
-            <SwiperSlide
-              key={med.id}
-              className={clsx(
-                "!h-fit !w-fit p-1 border transition-colors !aspect-[3/4] cursor-pointer",
-                activeIndex === i ? "border-black" : "border-transparent",
-              )}
-            >
-              <Image
-                data={image}
-                loading={i === 0 ? "eager" : "lazy"}
-                className="object-contain fadeIn h-[100px] w-full"
-                sizes="auto"
-              />
-            </SwiperSlide>
-          );
-        })}
-      </Swiper>
+    <div className="flex flex-col gap-4 w-full overflow-hidden">
       <Swiper
         modules={[FreeMode, Thumbs, Pagination]}
         pagination={{ type: "fraction" }}
         spaceBetween={10}
+        onSlideChange={(swiper) => {
+          setActiveIndex(swiper.activeIndex);
+        }}
         thumbs={
           thumbsSwiper
             ? {
@@ -66,9 +43,6 @@ export function ProductMedia(props: ProductMediaProps) {
               }
             : undefined
         }
-        onSlideChange={(swiper) => {
-          setActiveIndex(swiper.activeIndex);
-        }}
         className="vt-product-image max-w-full pb-14 md:pb-0 md:[&_.swiper-pagination-fraction]:hidden"
         style={
           {
@@ -91,6 +65,36 @@ export function ProductMedia(props: ProductMediaProps) {
           );
         })}
       </Swiper>
+      <Swiper
+        onSwiper={setThumbsSwiper}
+        direction="horizontal"
+        spaceBetween={spacing}
+        freeMode
+        slidesPerView={"auto"}
+        threshold={2}
+        modules={[FreeMode, Thumbs]}
+        className="w-full overflow-visible hidden md:block"
+      >
+        {media.map((med, i) => {
+          let image = { ...med.image, altText: med.alt || "Product image" };
+          return (
+            <SwiperSlide
+              key={med.id}
+              className={clsx(
+                "!h-fit !w-fit p-1 border transition-colors !aspect-[3/4] cursor-pointer",
+                activeIndex === i ? "border-black" : "border-transparent",
+              )}
+            >
+              <Image
+                data={image}
+                loading={i === 0 ? "eager" : "lazy"}
+                className="object-contain fadeIn h-[100px] w-full"
+                sizes="auto"
+              />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
     </div>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -34,6 +34,7 @@ import {CustomAnalytics} from '~/components/Analytics';
 import {seoPayload} from '~/lib/seo.server';
 import {getErrorMessage} from './lib/defineMessageError';
 import {parseMenu} from './lib/utils';
+import { GlobalLoading } from './components/global-loading';
 
 /**
  * This is important to avoid re-fetching root queries on sub-navigations
@@ -171,6 +172,7 @@ function IndexLayout({children}: {children?: React.ReactNode}) {
         ) : (
           children
         )}
+        <GlobalLoading />
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
       </body>