Merge pull request Weaverse#227 from Weaverse/dev

Dev

app/hooks/use-closest-weaverse-item.ts

@@ -0,0 +1,22 @@
+import { useItemInstance } from "@weaverse/hydrogen";
+import { useEffect, useState } from "react";
+
+export function useClosestWeaverseItem(selector: string) {
+  let [weaverseId, setWeaverseId] = useState<string>("");
+  let weaverseItem = useItemInstance(weaverseId);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (!weaverseItem) {
+      let target = document.querySelector(selector);
+      if (target) {
+        let closest = target.closest("[data-wv-id]");
+        if (closest) {
+          setWeaverseId(closest.getAttribute("data-wv-id"));
+        }
+      }
+    }
+  }, []);
+
+  return weaverseItem;
+}

app/lib/filter.ts

@@ -27,15 +27,6 @@ export function getAppliedFilterLink(
   return `${location.pathname}?${paramsClone.toString()}`;
 }
 
-export function getSortLink(
-  sort: SortParam,
-  params: URLSearchParams,
-  location: Location,
-) {
-  params.set("sort", sort);
-  return `${location.pathname}?${params.toString()}`;
-}
-
 export function getFilterLink(
   rawInput: string | ProductFilter,
   params: URLSearchParams,

app/lib/type.ts

@@ -1,17 +1,14 @@
-import type { Storefront as HydrogenStorefront } from "@shopify/hydrogen";
 import type {
-  CountryCode,
-  CurrencyCode,
-  LanguageCode,
-} from "@shopify/hydrogen/storefront-api-types";
+  Storefront as HydrogenStorefront,
+  I18nBase,
+} from "@shopify/hydrogen";
+import type { CurrencyCode } from "@shopify/hydrogen/storefront-api-types";
 
 export type NonNullableFields<T> = {
   [P in keyof T]: NonNullable<T[P]>;
 };
 
-export type Locale = {
-  language: LanguageCode;
-  country: CountryCode;
+export type Locale = I18nBase & {
   label: string;
   currency: CurrencyCode;
 };

app/modules/product-card/index.tsx

@@ -39,13 +39,16 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <div className={clsx("grid gap-4", className)}>
-        <div className="relative aspect-[4/5] group">
+        <div className="relative group">
           {image && (
-            <Link to={`/products/${product.handle}`} prefetch="intent">
+            <Link
+              to={`/products/${product.handle}`}
+              prefetch="intent"
+              className="block"
+            >
               <Image
-                className="object-cover w-full opacity-0 animate-fade-in"
+                className="w-full h-full opacity-0 animate-fade-in"
                 sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
-                aspectRatio="4/5"
                 data={image}
                 alt={image.altText || `Picture of ${product.title}`}
                 loading={loading}

app/root.tsx

@@ -218,7 +218,7 @@ function App() {
 export default withWeaverse(App);
 
 export function ErrorBoundary({ error }: { error: Error }) {
-  let routeError = useRouteError();
+  let routeError: { status?: number; data?: any } = useRouteError();
   let isRouteError = isRouteErrorResponse(routeError);
 
   let pageType = "page";