Merge branch 'Weaverse:main' into main

Weaverse · Sep 6, 2024 · e0f7dc8 · e0f7dc8
2 parents 1c01933 + 4bfbed7
commit e0f7dc8
Show file tree

Hide file tree

Showing 10 changed files with 1,395 additions and 593 deletions.
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -9,15 +9,15 @@ import type { CartApiQueryFragment } from "storefrontapi.generated";
 import { useVariantUrl } from "~/lib/variants";
 import { IconRemove } from "./Icon";
 
-type CartLine = CartApiQueryFragment["lines"]["edges"][0]["node"];
+type CartLine = CartApiQueryFragment["lines"]["nodes"][0];
 
 type CartMainProps = {
   cart: CartApiQueryFragment | null;
   layout: "page" | "aside";
 };
 
 export function CartMain({ layout, cart }: CartMainProps) {
-  const linesCount = Boolean(cart?.lines?.edges?.length || 0);
+  const linesCount = Boolean(cart?.lines?.nodes?.length || 0);
   const withDiscount =
     cart &&
     Boolean(cart.discountCodes.filter((code) => code.applicable).length);
@@ -85,7 +85,7 @@ function CartLines({
           </thead>
         )}
         <tbody>
-          {lines?.edges?.map(({ node: line }) => (
+          {lines?.nodes?.map((line) => (
             <CartLineItem key={line.id} line={line} layout={layout} />
           ))}
         </tbody>

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
@@ -53,7 +53,7 @@ export function DrawerFilter({
           <div className="flex gap-2">
             <SortMenu showSearchSort={showSearchSort} />
             <Button onClick={openDrawer} shape="default" variant="outline">
-              <span>Filter</span>
+              <span className='font-heading text-xl font-normal'>Filter</span>
             </Button>
             <Drawer
               open={isOpen}

diff --git a/app/components/Header/menu/MegaMenu.tsx b/app/components/Header/menu/MegaMenu.tsx
@@ -103,7 +103,7 @@ function MultiMenu(props: SingleMenuItem & {isShowIconCaret?: boolean}) {
   );
   return (
     <GroupWrapper title={title} to={to} isShowIconCaret={isShowIconCaret}>
-      <div className={clsx('left-0 top-full w-screen', dropdownContentClass)}>
+      <div className={clsx('left-0 top-full w-full', dropdownContentClass)}>
         <div className="container mx-auto py-6">
           <div className="flex w-full justify-center gap-6">
             {items.map((item, id) =>
@@ -165,7 +165,7 @@ function ImageMenu({
 }: SingleMenuItem & {isShowIconCaret?: boolean}) {
   return (
     <GroupWrapper title={title} to={to} isShowIconCaret={isShowIconCaret}>
-      <div className={clsx('left-0 top-full w-screen', dropdownContentClass)}>
+      <div className={clsx('left-0 top-full w-full', dropdownContentClass)}>
         <div className="py-8">
           <div className="container mx-auto flex w-fit gap-6">
             {items.map((item, id) => (

diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
@@ -605,7 +605,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">
+    <Icon {...props} fill="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="currentColor"/>
     </Icon>
   );

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -20,12 +20,6 @@ export function ProductMedia(props: ProductMediaProps) {
   let [activeIndex, setActiveIndex] = useState(0);
   console.log("🚀 ~ thumbsSwiper:", thumbsSwiper)
 
-  useEffect(() => {
-    if (thumbsSwiper) {
-      thumbsSwiper.slideTo(activeIndex);
-    }
-  }, [thumbsSwiper]);
-
   return (
     <div className="flex flex-col gap-4 w-full overflow-hidden">
       <Swiper
@@ -66,7 +60,10 @@ export function ProductMedia(props: ProductMediaProps) {
         })}
       </Swiper>
       <Swiper
-        onSwiper={setThumbsSwiper}
+        onSwiper={(swiper) => {
+          setThumbsSwiper(swiper);
+          swiper.update();
+        }}
         direction="horizontal"
         spaceBetween={spacing}
         freeMode
@@ -80,15 +77,20 @@ export function ProductMedia(props: ProductMediaProps) {
           return (
             <SwiperSlide
               key={med.id}
+              onClick={() => {
+                if (thumbsSwiper) {
+                  thumbsSwiper.slideTo(i);
+                }
+              }}
               className={clsx(
-                "!h-fit !w-fit p-1 border transition-colors !aspect-[3/4] cursor-pointer",
+                "!h-fit !w-fit p-1 border transition-colors cursor-pointer",
                 activeIndex === i ? "border-black" : "border-transparent",
               )}
             >
               <Image
                 data={image}
                 loading={i === 0 ? "eager" : "lazy"}
-                className="object-contain fadeIn h-[100px] w-full"
+                className="fadeIn object-cover !h-[100px] !aspect-[3/4]"
                 sizes="auto"
               />
             </SwiperSlide>

diff --git a/app/sections/collection-filters/index.tsx b/app/sections/collection-filters/index.tsx
@@ -63,13 +63,14 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
 
     if (collection?.products && collections) {
       return (
-        <section ref={sectionRef} {...rest} className={cn(variants({ gap, width, padding: width }),)}>
+        <section ref={sectionRef} {...rest} >
           <DrawerFilter
             productNumber={productNumber}
             filters={collection.products.filters as Filter[]}
             appliedFilters={appliedFilters}
             collections={collections}
           />
+          <div className={cn(variants({ gap, width, padding: width }),)}>
           <Pagination connection={collection.products}>
             {({
               nodes,
@@ -101,6 +102,7 @@ let CollectionFilters = forwardRef<HTMLElement, CollectionFiltersProps>(
               </>
             )}
           </Pagination>
+          </div>
         </section>
       );
     }

diff --git a/app/sections/image-with-text/content.tsx b/app/sections/image-with-text/content.tsx
@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import {forwardRef} from 'react';
 
 let variants = cva(
-  'grow flex flex-col justify-center gap-5 py-6 px-4 md:px-8 md:py-8 [&_.paragraph]:mx-[unset] [&_.paragraph]:w-auto',
+  'grow flex flex-col justify-center gap-5 py-6 md:py-8 [&_.paragraph]:mx-[unset] [&_.paragraph]:w-auto',
   {
     variants: {
       alignment: {