Merge branch 'Weaverse:main' into main

Weaverse · Dec 13, 2024 · 6d943ba · 6d943ba
2 parents 1a569b2 + c790ddc
commit 6d943ba
Show file tree

Hide file tree

Showing 29 changed files with 821 additions and 548 deletions.
diff --git a/app/components/checkbox.tsx b/app/components/checkbox.tsx
@@ -1,4 +1,3 @@
-import { Check } from "@phosphor-icons/react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
 import { cn } from "~/lib/cn";
@@ -15,11 +14,15 @@ export let Checkbox = React.forwardRef<
   <div className={cn("flex items-center gap-2.5", className)}>
     <CheckboxPrimitive.Root
       ref={ref}
-      className="w-5 h-5 shrink-0 border border-line focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      className={cn(
+        "w-5 h-5 shrink-0",
+        "border border-line focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+      )}
       {...props}
     >
       <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-        <Check weight="bold" className="h-3 w-3" />
+        <span className="inline-block w-3 h-3 bg-body" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
     {label ? typeof label === "string" ? <span>{label}</span> : label : null}

diff --git a/app/components/drawer.tsx b/app/components/drawer.tsx
diff --git a/app/components/header/cart-count.tsx b/app/components/header/cart-count.tsx
@@ -7,30 +7,22 @@ import { useIsHydrated } from "~/hooks/use-is-hydrated";
 import type { RootLoader } from "~/root";
 
 export function CartCount({
-  isHome,
   openCart,
   isTransparent,
 }: {
-  isHome: boolean;
   openCart: () => void;
   isTransparent: boolean;
 }) {
   let rootData = useRouteLoaderData<RootLoader>("root");
   return (
     <Suspense
       fallback={
-        <Badge
-          count={0}
-          dark={isHome}
-          openCart={openCart}
-          isTransparent={isTransparent}
-        />
+        <Badge count={0} openCart={openCart} isTransparent={isTransparent} />
       }
     >
       <Await resolve={rootData?.cart}>
         {(cart) => (
           <Badge
-            dark={isHome}
             openCart={openCart}
             count={cart?.totalQuantity || 0}
             cart={cart}
@@ -44,13 +36,11 @@ export function CartCount({
 
 function Badge({
   openCart,
-  dark,
   count,
   cart,
   isTransparent,
 }: {
   count: number;
-  dark: boolean;
   openCart: () => void;
   cart?: any;
   isTransparent: boolean;
@@ -63,11 +53,11 @@ function Badge({
         {count > 0 && (
           <div
             className={clsx(
-              "text-[12px] leading-none text-center font-medium subpixel-antialiased",
+              "text-sm leading-none text-center font-medium subpixel-antialiased",
               "flex items-center justify-center min-w-4 rounded-full p-0.5",
               "absolute top-0 -right-1",
               "transition-colors duration-300",
-              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[--color-header-bg]",
+              "group-hover/header:bg-[--color-header-text] group-hover/header:text-[--color-header-bg]",
               isTransparent
                 ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
                 : "bg-[--color-header-text] text-[--color-header-bg]",

diff --git a/app/components/header/cart-drawer.tsx b/app/components/header/cart-drawer.tsx
@@ -0,0 +1,89 @@
+import { Handbag, X } from "@phosphor-icons/react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { Await, useRouteLoaderData } from "@remix-run/react";
+import { type CartReturn, useAnalytics } from "@shopify/hydrogen";
+import clsx from "clsx";
+import { Suspense } from "react";
+import Link from "~/components/link";
+import { ScrollArea } from "~/components/scroll-area";
+import { Cart } from "~/modules/cart";
+import type { RootLoader } from "~/root";
+
+export function CartDrawer({ isTransparent }: { isTransparent: boolean }) {
+  let rootData = useRouteLoaderData<RootLoader>("root");
+  let { publish } = useAnalytics();
+
+  return (
+    <Suspense
+      fallback={
+        <Link
+          to="/cart"
+          className="relative flex items-center justify-center w-8 h-8 focus:ring-border"
+        >
+          <Handbag className="w-5 h-5" />
+        </Link>
+      }
+    >
+      <Await resolve={rootData?.cart}>
+        {(cart) => (
+          <Dialog.Root>
+            <Dialog.Trigger
+              onClick={() => publish("custom_sidecart_viewed", { cart })}
+              className="relative flex items-center justify-center w-8 h-8 focus:ring-border"
+            >
+              <Handbag className="w-5 h-5" />
+              {cart?.totalQuantity > 0 && (
+                <div
+                  className={clsx(
+                    "text-sm leading-none text-center font-medium subpixel-antialiased",
+                    "flex items-center justify-center min-w-4 rounded-full p-0.5",
+                    "absolute top-0 -right-1",
+                    "transition-colors duration-300",
+                    "group-hover/header:bg-[--color-header-text] group-hover/header:text-[--color-header-bg]",
+                    isTransparent
+                      ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
+                      : "bg-[--color-header-text] text-[--color-header-bg]",
+                  )}
+                >
+                  <span>{cart?.totalQuantity}</span>
+                </div>
+              )}
+            </Dialog.Trigger>
+            <Dialog.Portal>
+              <Dialog.Overlay
+                className="fixed inset-0 bg-black/50 data-[state=open]:animate-fade-in z-10"
+                style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+              />
+              <Dialog.Content
+                className={clsx([
+                  "fixed inset-y-0 w-screen max-w-[400px] bg-[--color-background] py-4 z-10",
+                  "right-0 translate-x-full data-[state=open]:animate-enter-from-right",
+                ])}
+                aria-describedby={undefined}
+              >
+                <div className="space-y-6">
+                  <div className="flex gap-2 items-center justify-between px-4">
+                    <Dialog.Title asChild className="py-2.5 font-bold">
+                      <span>Cart</span>
+                    </Dialog.Title>
+                    <Dialog.Close asChild>
+                      <button
+                        className="p-2 translate-x-2"
+                        aria-label="Close cart drawer"
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </Dialog.Close>
+                  </div>
+                  <ScrollArea className="max-h-[calc(100vh-4.5rem)]" size="sm">
+                    <Cart layout="drawer" cart={cart as CartReturn} />
+                  </ScrollArea>
+                </div>
+              </Dialog.Content>
+            </Dialog.Portal>
+          </Dialog.Root>
+        )}
+      </Await>
+    </Suspense>
+  );
+}
diff --git a/app/components/header/desktop-header.tsx b/app/components/header/desktop-header.tsx
@@ -13,9 +13,9 @@ import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
 import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
+import { CartDrawer } from "./cart-drawer";
 import { DesktopMenu } from "./menu/desktop-menu";
 import { PredictiveSearchButton } from "./predictive-search";
-import { CartCount } from "./cart-count";
 
 let variants = cva("", {
   variants: {
@@ -72,11 +72,7 @@ export function DesktopHeader() {
         <div className="flex items-center gap-1 z-1">
           <PredictiveSearchButton />
           <AccountLink className="relative flex items-center justify-center w-8 h-8" />
-          <CartCount
-            isHome={isHome}
-            openCart={() => {}}
-            isTransparent={isTransparent}
-          />
+          <CartDrawer isTransparent={isTransparent} />
         </div>
       </div>
     </header>

diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx
@@ -1,21 +1,13 @@
-import { Await, useRouteLoaderData } from "@remix-run/react";
-import { CartForm, type CartReturn } from "@shopify/hydrogen";
-import { Suspense, useEffect } from "react";
+import { CartForm } from "@shopify/hydrogen";
+import { useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
-import { Cart } from "~/modules/cart";
-import type { RootLoader } from "~/root";
-import { CartLoading } from "../../modules/cart-loading";
-import { Drawer, useDrawer } from "../../modules/drawer";
+import { useDrawer } from "../../modules/drawer";
 import { DesktopHeader } from "./desktop-header";
 import { MobileHeader } from "./mobile-header";
 import { ScrollingAnnouncement } from "./scrolling-announcement";
 
 export function Header() {
-  let {
-    isOpen: isCartOpen,
-    openDrawer: openCart,
-    closeDrawer: closeCart,
-  } = useDrawer();
+  let { isOpen: isCartOpen, openDrawer: openCart } = useDrawer();
 
   let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd);
   // toggle cart drawer when adding to cart
@@ -26,38 +18,9 @@ export function Header() {
 
   return (
     <>
-      {/* <CartDrawer isOpen={isCartOpen} onClose={closeCart} /> */}
       <ScrollingAnnouncement />
       <DesktopHeader />
-      <MobileHeader openCart={openCart} />
+      <MobileHeader />
     </>
   );
 }
-
-function CartDrawer({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}) {
-  const rootData = useRouteLoaderData<RootLoader>("root");
-
-  return (
-    <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
-      <div className="grid">
-        <Suspense fallback={<CartLoading />}>
-          <Await resolve={rootData?.cart}>
-            {(cart) => (
-              <Cart
-                layout="drawer"
-                onClose={onClose}
-                cart={cart as CartReturn}
-              />
-            )}
-          </Await>
-        </Suspense>
-      </div>
-    </Drawer>
-  );
-}
diff --git a/app/components/header/menu/mobile-menu.tsx b/app/components/header/menu/mobile-menu.tsx
@@ -1,7 +1,6 @@
 import { CaretRight, List, X } from "@phosphor-icons/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import * as Dialog from "@radix-ui/react-dialog";
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { forwardRef } from "react";
 import Link from "~/components/link";
 import { ScrollArea } from "~/components/scroll-area";
@@ -39,13 +38,12 @@ export function MobileMenu() {
           }
           aria-describedby={undefined}
         >
-          <VisuallyHidden.Root asChild>
-            <Dialog.Title>Mobile menu</Dialog.Title>
-          </VisuallyHidden.Root>
+          <Dialog.Title asChild>
+            <div className="px-4">Menu</div>
+          </Dialog.Title>
           <Dialog.Close asChild>
             <X className="w-5 h-5 fixed top-4 right-4" />
           </Dialog.Close>
-          <div className="px-4">Menu</div>
           <div className="mt-4 border-t border-line-subtle" />
           <div className="py-2">
             <ScrollArea className="h-[calc(100vh-5rem)]">

diff --git a/app/components/header/mobile-header.tsx b/app/components/header/mobile-header.tsx
@@ -13,14 +13,10 @@ import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
 import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
-import { CartCount } from "./cart-count";
+import { CartDrawer } from "./cart-drawer";
 import { MobileMenu } from "./menu/mobile-menu";
 
-export function MobileHeader({
-  openCart,
-}: {
-  openCart: () => void;
-}) {
+export function MobileHeader() {
   let isHome = useIsHomePath();
   let { enableTransparentHeader } = useThemeSettings();
   let { y } = useWindowScroll();
@@ -65,11 +61,7 @@ export function MobileHeader({
       <Logo isTransparent={isTransparent} />
       <div className="flex items-center justify-end w-full">
         <AccountLink className="relative flex items-center justify-center w-8 h-8" />
-        <CartCount
-          isHome={isHome}
-          openCart={openCart}
-          isTransparent={isTransparent}
-        />
+        <CartDrawer isTransparent={isTransparent} />
       </div>
     </header>
   );

diff --git a/app/data/cache.ts b/app/data/cache.ts
@@ -7,7 +7,7 @@ import {
 
 export function routeHeaders({ loaderHeaders }: { loaderHeaders: Headers }) {
   // Keep the same cache-control headers when loading the page directly
-  // versus when transititioning to the page from other areas in the app
+  // versus when transitioning to the page from other areas in the app
   return {
     "Cache-Control": loaderHeaders.get("Cache-Control"),
   };

diff --git a/app/data/fragments.ts b/app/data/fragments.ts
@@ -44,6 +44,16 @@ export const PRODUCT_CARD_FRAGMENT = `#graphql
     publishedAt
     handle
     vendor
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
     variants(first: 10) {
       nodes {
         id