Merge branch 'Weaverse:main' into main

app/components/Button.tsx

@@ -8,8 +8,8 @@ import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { cn } from "~/lib/cn";
-import { Link } from "~/modules";
-import { IconCircleNotch } from "./Icons";
+import { IconCircleNotch } from "./icons";
+import { Link } from "./link";
 
 let variants = cva(
   [
@@ -57,7 +57,12 @@ let variants = cva(
           "hover:text-[var(--color-button-text-hover)]",
           "hover:border-[var(--color-button-border-hover)]",
         ],
-        link: ["bg-transparent py-2 border-b", "text-body", "border-b-body"],
+        link: [
+          "bg-transparent pb-1 text-body",
+          "after:bg-body after:absolute after:left-0 after:bottom-0.5 after:w-full after:h-px",
+          "after:scale-x-100 after:transition-transform after:origin-right",
+          "hover:after:origin-left hover:after:animate-underline",
+        ],
       },
     },
     defaultVariants: {

app/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as React from "react";
 import { cn } from "~/lib/cn";
-import { IconCheck } from "./Icons";
+import { IconCheck } from "./icons";
 
 interface CheckboxProps
   extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {

app/components/Icons.tsx

@@ -449,3 +449,18 @@ export function IconCheckCircle(props: IconProps) {
     </svg>
   );
 }
+
+export function IconTrash(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z" />
+    </svg>
+  );
+}

app/modules/Logo.tsx → app/components/Logo.tsx

@@ -1,7 +1,7 @@
 import { Image } from "@shopify/hydrogen";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
-import { Link } from "./Link";
+import { Link } from "~/components/link";
 
 export function Logo({
   isTransparent,

app/components/Section.tsx

@@ -4,15 +4,15 @@ import type {
 } from "@weaverse/hydrogen";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
-import type { HTMLAttributes } from "react";
 import type React from "react";
+import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { cn } from "~/lib/cn";
-import type { BackgroundImageProps } from "./BackgroundImage";
-import { backgroundInputs } from "./BackgroundImage";
-import type { OverlayProps } from "./Overlay";
-import { overlayInputs } from "./Overlay";
-import { OverlayAndBackground } from "./OverlayAndBackground";
+import type { BackgroundImageProps } from "./background-image";
+import { backgroundInputs } from "./background-image";
+import type { OverlayProps } from "./overlay";
+import { overlayInputs } from "./overlay";
+import { OverlayAndBackground } from "./overlay-and-background";
 
 export type BackgroundProps = BackgroundImageProps & {
   backgroundFor: "section" | "content";
@@ -36,7 +36,7 @@ let variants = cva("relative", {
     width: {
       full: "w-full h-full",
       stretch: "w-full h-full",
-      fixed: "w-full h-full max-w-[var(--page-width,1280px)] mx-auto",
+      fixed: "w-full h-full max-w-page mx-auto",
     },
     padding: {
       full: "",

app/components/OverlayAndBackground.tsx → app/components/overlay-and-background.tsx

@@ -1,7 +1,7 @@
-import type { BackgroundImageProps } from "./BackgroundImage";
-import { BackgroundImage } from "./BackgroundImage";
-import type { OverlayProps } from "./Overlay";
-import { Overlay } from "./Overlay";
+import type { BackgroundImageProps } from "./background-image";
+import { BackgroundImage } from "./background-image";
+import type { OverlayProps } from "./overlay";
+import { Overlay } from "./overlay";
 
 export interface OverlayAndBackgroundProps
   extends BackgroundImageProps,

app/hooks/useAnalytics.tsx → app/hooks/use-analytics.tsx

@@ -7,8 +7,7 @@ import {
   useShopifyCookies,
 } from "@shopify/hydrogen";
 import { useEffect, useRef } from "react";
-
-import { usePageAnalytics } from "./usePageAnalytics";
+import { usePageAnalytics } from "./use-page-analytics";
 
 export function useAnalytics(hasUserConsent: boolean) {
   useShopifyCookies({ hasUserConsent });

app/hooks/usePageAnalytics.tsx → app/hooks/use-page-analytics.tsx

@@ -1,34 +1,29 @@
 import { useMatches } from "@remix-run/react";
 import type { ShopifyPageViewPayload } from "@shopify/hydrogen";
 import { useMemo } from "react";
-
 import { DEFAULT_LOCALE } from "~/lib/utils";
 
 export function usePageAnalytics({
   hasUserConsent,
 }: {
   hasUserConsent: boolean;
 }) {
-  const matches = useMatches();
+  let matches = useMatches();
 
   return useMemo(() => {
-    const data: Record<string, unknown> = {};
-
-    matches.forEach((event) => {
-      const eventData = event?.data as Record<string, unknown>;
+    let data: Record<string, unknown> = {};
+    for (let match of matches) {
+      let eventData = match?.data as Record<string, unknown>;
       if (eventData) {
-        eventData["analytics"] && Object.assign(data, eventData["analytics"]);
-
-        const selectedLocale =
-          (eventData["selectedLocale"] as typeof DEFAULT_LOCALE) ||
-          DEFAULT_LOCALE;
-
+        eventData.analytics && Object.assign(data, eventData.analytics);
+        let selectedLocale =
+          (eventData.selectedLocale as typeof DEFAULT_LOCALE) || DEFAULT_LOCALE;
         Object.assign(data, {
           currency: selectedLocale.currency,
           acceptedLanguage: selectedLocale.language,
         });
       }
-    });
+    }
 
     return {
       ...data,

app/components/predictive-search/usePredictiveSearch.ts → app/hooks/use-predictive-search.ts

@@ -4,7 +4,7 @@ import type {
   NormalizedPredictiveSearch,
   NormalizedPredictiveSearchResults,
   UseSearchReturn,
-} from "./types";
+} from "~/types/predictive-search";
 
 export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [
   { type: "queries", items: [] },