Merge branch 'Weaverse:main' into main

.gitignore

@@ -7,6 +7,7 @@ node_modules
 /.mf
 .env
 .vscode
+.idea
 .shopify
 .turbo
 /test-results/

app/components/Heading.tsx

@@ -1,7 +1,7 @@
 import type {
-  InspectorGroup,
   HydrogenComponentProps,
   HydrogenComponentSchema,
+  InspectorGroup,
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";

app/components/Marquee.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface MarqueeProps {
+  children: React.ReactNode;
+  gap?: number;
+  speed?: number;
+}
+const ANIMATION_SPEED = 100;
+export function Marquee({
+  children,
+  gap = 0,
+  speed = ANIMATION_SPEED,
+}: MarqueeProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentWidth, setContentWidth] = useState(0);
+  const animationTime = Math.floor(contentWidth / speed);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (contentRef.current && !contentWidth) {
+      const { width } = contentRef.current.getBoundingClientRect();
+      setContentWidth(width);
+    }
+  }, []);
+  return (
+    <div
+      className="flex items-center"
+      style={{ ["--animation-speed" as string]: `${animationTime}s` }}
+    >
+      {contentWidth === 0 ? (
+        <div ref={contentRef}>{children}</div>
+      ) : (
+        <OneView contentWidth={contentWidth} gap={gap}>
+          {children}
+        </OneView>
+      )}
+    </div>
+  );
+}
+
+function OneView({
+  children,
+  contentWidth,
+  gap,
+}: {
+  children: React.ReactNode;
+  contentWidth: number;
+  gap: number;
+}) {
+  const [contentRepeat, setContentRepeat] = useState(0);
+
+  const calculateRepeat = useCallback(() => {
+    if (contentWidth < window.innerWidth) {
+      // if it is, set the contentRepeat to the number of times the text can fit on the screen
+      const repeat = Math.ceil(window.innerWidth / (contentWidth + gap));
+      setContentRepeat(repeat);
+    }
+  }, [contentWidth, gap]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    calculateRepeat();
+    window.addEventListener("resize", calculateRepeat);
+    return () => {
+      window.removeEventListener("resize", calculateRepeat);
+    };
+  }, []);
+  let oneView = (
+    <div className="flex" style={{ paddingRight: gap, gap }}>
+      {Array.from({ length: contentRepeat || 1 }).map((_, index) => (
+        <div key={index} className="shrink-0">
+          {children}
+        </div>
+      ))}
+    </div>
+  );
+  return (
+    <div className="flex items-center">
+      <div className="shrink-0 animate-marquee">{oneView}</div>
+      <div className="shrink-0 animate-marquee">{oneView}</div>
+    </div>
+  );
+}

app/components/SubHeading.tsx

@@ -1,6 +1,6 @@
-import {
-  type HydrogenComponentProps,
-  type HydrogenComponentSchema,
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";

app/components/index.ts

@@ -1,9 +1,9 @@
 import type { HydrogenComponent } from "@weaverse/hydrogen";
 
+import * as Button from "./Button";
 import * as Heading from "./Heading";
-import * as SubHeading from "./SubHeading";
 import * as Paragraph from "./Paragraph";
-import * as Button from "./Button";
+import * as SubHeading from "./SubHeading";
 
 export let sharedComponents: HydrogenComponent[] = [
   SubHeading,

app/components/predictive-search/PredictiveSearch.tsx

@@ -1,5 +1,5 @@
-import { Input } from "~/modules";
 import { IconMagnifyingGlass } from "~/components/Icons";
+import { Input } from "~/modules";
 import { PredictiveSearchResults } from "./PredictiveSearchResults";
 import { PredictiveSearchForm } from "./SearchForm";
 

app/components/predictive-search/PredictiveSearchResult.tsx

@@ -1,11 +1,11 @@
 import { Link } from "@remix-run/react";
+import clsx from "clsx";
 import { SearchResultItem } from "./ResultItem";
 import type {
   NormalizedPredictiveSearchResultItem,
   NormalizedPredictiveSearchResults,
   SearchResultTypeProps,
 } from "./types";
-import clsx from "clsx";
 
 export function PredictiveSearchResult({
   goToSearchResult,

app/components/predictive-search/SearchForm.tsx

@@ -1,6 +1,9 @@
 import { useFetcher, useParams } from "@remix-run/react";
-import { NormalizedPredictiveSearchResults, SearchFromProps } from "./types";
 import { useEffect, useRef } from "react";
+import type {
+  NormalizedPredictiveSearchResults,
+  SearchFromProps,
+} from "./types";
 
 /**
  *  Search form component that posts search requests to the `/search` route

app/components/predictive-search/types.ts

@@ -1,4 +1,4 @@
-import { FormProps, useFetcher } from "@remix-run/react";
+import type { FormProps, useFetcher } from "@remix-run/react";
 import type {
   PredictiveArticleFragment,
   PredictiveCollectionFragment,

app/entry.client.tsx

@@ -1,5 +1,5 @@
 import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
+import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {

app/entry.server.tsx

@@ -1,8 +1,8 @@
 import { RemixServer } from "@remix-run/react";
+import { createContentSecurityPolicy } from "@shopify/hydrogen";
 import type { AppLoadContext, EntryContext } from "@shopify/remix-oxygen";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
-import { createContentSecurityPolicy } from "@shopify/hydrogen";
 
 import { getWeaverseCsp } from "~/weaverse/create-weaverse.server";
 

app/hooks/useIsHydrated.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 // @feedback - This hook could be replaced by remix-utils's ow hook should we want to go down this route.
 export function useIsHydrated() {

app/lib/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge as merge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

app/lib/filter.ts

@@ -1,5 +1,5 @@
-import type { ProductFilter } from "@shopify/hydrogen/storefront-api-types";
 import type { Location, useLocation } from "@remix-run/react";
+import type { ProductFilter } from "@shopify/hydrogen/storefront-api-types";
 import { FILTER_URL_PREFIX } from "./const";
 
 export type AppliedFilter = {

app/lib/locale.ts

@@ -1,20 +1,19 @@
 import type { Locale } from "./type";
 
 export function getCountryUrlPath({
-    countryLocale,
-    defaultLocalePrefix,
-    pathWithoutLocale,
-  }: {
-    countryLocale: Locale;
-    pathWithoutLocale: string;
-    defaultLocalePrefix: string;
-  }) {
-    let countryPrefixPath = "";
-    const countryLocalePrefix = `${countryLocale.language}-${countryLocale.country}`;
-
-    if (countryLocalePrefix !== defaultLocalePrefix) {
-      countryPrefixPath = `/${countryLocalePrefix.toLowerCase()}`;
-    }
-    return `${countryPrefixPath}${pathWithoutLocale}`;
+  countryLocale,
+  defaultLocalePrefix,
+  pathWithoutLocale,
+}: {
+  countryLocale: Locale;
+  pathWithoutLocale: string;
+  defaultLocalePrefix: string;
+}) {
+  let countryPrefixPath = "";
+  const countryLocalePrefix = `${countryLocale.language}-${countryLocale.country}`;
+
+  if (countryLocalePrefix !== defaultLocalePrefix) {
+    countryPrefixPath = `/${countryLocalePrefix.toLowerCase()}`;
   }
-
+  return `${countryPrefixPath}${pathWithoutLocale}`;
+}

app/modules/AccountAddressBook.tsx

@@ -72,8 +72,9 @@ function Address({
               address?.lastName}
           </li>
         )}
-        {address.formatted &&
-          address.formatted.map((line: string) => <li key={line}>{line}</li>)}
+        {address.formatted?.map((line: string) => (
+          <li key={line}>{line}</li>
+        ))}
       </ul>
 
       <div className="flex flex-row font-medium mt-6 items-baseline">

app/modules/Cart.tsx

@@ -1,6 +1,5 @@
 import {
   CartForm,
-  type CartReturn,
   Image,
   Money,
   type OptimisticCart,
@@ -38,9 +37,9 @@ export function Cart({
 }: {
   layout: Layouts;
   onClose?: () => void;
-  cart: CartReturn | null;
+  cart: CartApiQueryFragment;
 }) {
-  let optimisticCart = useOptimisticCart(cart);
+  let optimisticCart = useOptimisticCart<CartApiQueryFragment>(cart);
 
   const linesCount = Boolean(optimisticCart?.lines?.nodes?.length || 0);
 
@@ -101,7 +100,7 @@ function CartDiscounts({
           <Text as="dt">Discount(s)</Text>
           <div className="flex items-center justify-between">
             <UpdateDiscountForm>
-              <button>
+              <button type="button">
                 <IconRemove
                   aria-hidden="true"
                   style={{ height: 18, marginRight: 4 }}
@@ -127,7 +126,10 @@ function CartDiscounts({
             name="discountCode"
             placeholder="Discount code"
           />
-          <button className="flex justify-end font-medium whitespace-nowrap">
+          <button
+            type="button"
+            className="flex justify-end font-medium whitespace-nowrap"
+          >
             Apply Discount
           </button>
         </div>
@@ -353,6 +355,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
       <div className="flex items-center border rounded">
         <UpdateCartButton lines={[{ id: lineId, quantity: prevQuantity }]}>
           <button
+            type="button"
             name="decrease-quantity"
             aria-label="Decrease quantity"
             className="w-10 h-10 transition text-secondary/50 hover:text-secondary disabled:text-secondary/10"
@@ -373,6 +376,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
 
         <UpdateCartButton lines={[{ id: lineId, quantity: nextQuantity }]}>
           <button
+            type="button"
             className="w-10 h-10 transition text-secondary/50 hover:text-secondary disabled:text-secondary/10"
             name="increase-quantity"
             value={nextQuantity}

app/modules/CountrySelector.tsx

@@ -31,7 +31,7 @@ export function CountrySelector() {
   const { pathname, search } = useLocation();
   const pathWithoutLocale = `${pathname.replace(
     selectedLocale.pathPrefix,
-    ""
+    "",
   )}${search}`;
 
   const countries = (fetcher.data ?? {}) as Localizations;
@@ -65,7 +65,6 @@ export function CountrySelector() {
     redirectTo: string;
     buyerIdentity: CartBuyerIdentityInput;
   }) => {
-    console.log("🚀 ~ CountrySelector:", buyerIdentity, redirectTo);
     const cartFormInput = {
       action: CartForm.ACTIONS.BuyerIdentityUpdate,
       inputs: { buyerIdentity },
@@ -83,7 +82,7 @@ export function CountrySelector() {
   return (
     <div ref={observerRef} className="grid gap-4 w-80">
       <Popover>
-        <PopoverButton className="w-full border rounded border-contrast/30 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
+        <PopoverButton className="w-full border border-contrast/30 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
           {selectedLocale.label}
           <IconCaretDown className="w-5 h-5" />
         </PopoverButton>

app/modules/FeaturedProducts.tsx

@@ -1,13 +1,13 @@
-import clsx from "clsx";
-import { useEffect, useId, useMemo } from "react";
 import { useFetcher } from "@remix-run/react";
 import type {
   Product,
   ProductSortKeys,
 } from "@shopify/hydrogen/storefront-api-types";
+import clsx from "clsx";
+import { useEffect, useId, useMemo } from "react";
 
-import { Heading, ProductCard, Skeleton, Text } from "~/modules";
 import { usePrefixPathWithLocale } from "~/lib/utils";
+import { Heading, ProductCard, Skeleton, Text } from "~/modules";
 
 interface FeaturedProductsProps {
   count: number;

app/modules/FeaturedSection.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
 import { useFetcher } from "@remix-run/react";
+import { useEffect } from "react";
 import { usePrefixPathWithLocale } from "~/lib/utils";
 import type { FeaturedData } from "~/routes/($locale).featured-products";
 import { ProductSwimlane } from "./ProductSwimlane";