Merge pull request Weaverse#190 from Weaverse/dev

Update to latest Hydrogen & Weaverse (August 2024)

.env.example

@@ -18,4 +18,4 @@ WEAVERSE_PROJECT_ID=clptu3l4p001sxfsn1u9jzqnm
 # Additional services
 #PUBLIC_GOOGLE_GTM_ID=G-R1KFYYKE48
 #JUDGEME_PRIVATE_API_TOKEN="your-judgeme-private-api-token"
-
+#ALI_REVIEWS_API_KEY="your-ali-reviews-api-key"

CHANGELOG.md

@@ -1,5 +1,12 @@
 # @weaverse/pilot
 
+## 2.7.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@3.4.0
+
 ## 2.6.8
 
 ### Patch Changes

README.md

@@ -71,21 +71,32 @@ export async function loader(args: RouteLoaderArgs) {
 
 `weaverse` is an `WeaverseClient` instance that has been injected into the app context by Weaverse. It provides a set of methods to interact with the Weaverse API.
 
-```ts:server.ts
-let handleRequest = createRequestHandler({
-  build: remixBuild,
-  mode: process.env.NODE_ENV,
-  getLoadContext: () => ({
-    // App context props
-    weaverse: createWeaverseClient({
-      storefront,
+```ts:app/lib/context.ts
+// app/lib/context.ts
+
+const hydrogenContext = createHydrogenContext({
+    env,
+    request,
+    cache,
+    waitUntil,
+    session,
+    i18n: getLocaleFromRequest(request),
+    cart: {
+      queryFragment: CART_QUERY_FRAGMENT,
+    },
+  });
+
+  return {
+    ...hydrogenContext,
+    // declare additional Remix loader context
+    weaverse: new WeaverseClient({
+      ...hydrogenContext,
       request,
-      env,
       cache,
-      waitUntil,
+      themeSchema,
+      components,
     }),
-  }),
-});
+  };
 ```
 
 ### Rendering page content
@@ -252,11 +263,11 @@ Just export a `loader` function from your component:
 ```tsx:app/weaverse/sections/Video.tsx
 import type {ComponentLoaderArgs} from '@weaverse/hydrogen';
 
-export let loader = async ({context, itemData}: ComponentLoaderArgs) => {
-  let {data} = await context.storefront.query<SeoCollectionContentQuery>(
+export let loader = async ({weaverse, data}: ComponentLoaderArgs) => {
+  let {data} = await weaverse.storefront.query<SeoCollectionContentQuery>(
     HOMEPAGE_SEO_QUERY,
     {
-      variables: {handle: itemData.data.collectionHandle || 'frontpage'},
+      variables: {handle: data.collection.handle || 'frontpage'},
     },
   );
   return data;

app/components/Button.tsx

@@ -23,37 +23,44 @@ let variants = cva(
       variant: {
         primary: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-primary-color))]",
-          "bg-[var(--color-button-bg,var(--button-primary-bg))]",
-          "border-[var(--color-button-border,var(--button-primary-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-primary-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-primary-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-primary-border-hover))]",
+          "text-[var(--color-button-primary-text)]",
+          "bg-[var(--color-button-primary-bg)]",
+          "border-[var(--color-button-primary-bg)]",
+          "hover:bg-[var(--color-button-primary-text)]",
+          "hover:text-[var(--color-button-primary-bg)]",
+          "hover:border-[var(--color-button-primary-text)]",
         ],
         secondary: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-secondary-color))]",
-          "bg-[var(--color-button-bg,var(--button-secondary-bg))]",
-          "border-[var(--color-button-border,var(--button-secondary-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-secondary-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-secondary-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-secondary-border-hover))]",
+          "text-[var(--color-button-secondary-text)]",
+          "bg-[var(--color-button-secondary-bg)]",
+          "border-[var(--color-button-secondary-bg)]",
+          "hover:bg-[var(--color-button-secondary-text)]",
+          "hover:text-[var(--color-button-secondary-bg)]",
+          "hover:border-[var(--color-button-secondary-text)]",
         ],
         outline: [
           "border px-4 py-3",
-          "text-[var(--color-button-text,var(--button-outline-color))]",
-          "bg-[var(--color-button-bg,var(--button-outline-bg))]",
-          "border-[var(--color-button-border,var(--button-outline-border))]",
-          "hover:bg-[var(--color-button-bg-hover,var(--button-outline-bg-hover))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-outline-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-outline-border-hover))]",
+          "text-[var(--color-button-outline-text-and-border)]",
+          "bg-transparent",
+          "border-[var(--color-button-outline-text-and-border)]",
+          "hover:bg-[var(--color-button-outline-text-and-border)]",
+          "hover:text-[var(--color-text)]",
+          "hover:border-[var(--color-button-outline-text-and-border)]",
+        ],
+        custom: [
+          "border px-4 py-3",
+          "text-[var(--color-button-text)]",
+          "bg-[var(--color-button-bg)]",
+          "border-[var(--color-button-border)]",
+          "hover:bg-[var(--color-button-bg-hover)]",
+          "hover:text-[var(--color-button-text-hover)]",
+          "hover:border-[var(--color-button-border-hover)]",
         ],
         link: [
           "bg-transparent py-2 border-b",
-          "text-[var(--color-button-text,var(--button-link-color))]",
-          "border-b-[var(--color-button-border,var(--button-link-color))]",
-          "hover:text-[var(--color-button-text-hover,var(--button-link-color-hover))]",
-          "hover:border-[var(--color-button-border-hover,var(--button-link-color-hover))]",
+          "text-[var(--color-text)]",
+          "border-b-[var(--color-text)]",
         ],
       },
     },
@@ -64,7 +71,6 @@ let variants = cva(
 );
 
 export interface ButtonStyleProps {
-  buttonStyle: "inherit" | "custom";
   backgroundColor: string;
   textColor: string;
   borderColor: string;
@@ -97,7 +103,6 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     loading,
     openInNewTab,
     className,
-    buttonStyle,
     backgroundColor,
     textColor,
     borderColor,
@@ -108,7 +113,7 @@ let Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     children,
     ...rest
   } = props;
-  if (buttonStyle === "custom") {
+  if (variant === "custom") {
     style = {
       ...style,
       "--color-button-bg": backgroundColor,
@@ -209,75 +214,62 @@ export let buttonContentInputs: InspectorGroup["inputs"] = [
         { label: "Secondary", value: "secondary" },
         { label: "Outline", value: "outline" },
         { label: "Link", value: "link" },
+        { label: "Custom styles", value: "custom" },
       ],
     },
     defaultValue: "primary",
   },
 ];
 export let buttonStylesInputs: InspectorGroup["inputs"] = [
-  {
-    type: "select",
-    name: "buttonStyle",
-    label: "Button style",
-    configs: {
-      options: [
-        { label: "Inherit", value: "inherit" },
-        { label: "Custom", value: "custom" },
-      ],
-    },
-    defaultValue: "inherit",
-    helpText:
-      "Use 'Inherit' for theme-based styles, or 'Custom' to modify button appearance.",
-  },
   {
     type: "color",
     label: "Background color",
     name: "backgroundColor",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Text color",
     name: "textColor",
     defaultValue: "#fff",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Border color",
     name: "borderColor",
     defaultValue: "#00000000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Background color (hover)",
     name: "backgroundColorHover",
     defaultValue: "#00000000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Text color (hover)",
     name: "textColorHover",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
   {
     type: "color",
     label: "Border color (hover)",
     name: "borderColorHover",
     defaultValue: "#000",
-    condition: "buttonStyle.eq.custom",
+    condition: "variant.eq.custom",
   },
 ];
 
 export let buttonInputs: InspectorGroup["inputs"] = [
   ...buttonContentInputs,
   {
     type: "heading",
-    label: "Button styles",
+    label: "Button custom styles",
   },
   ...buttonStylesInputs,
 ];

app/components/Checkbox.tsx

@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        "peer w-5 h-5 shrink-0 border ring-offset-background focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer w-5 h-5 shrink-0 border ring-offset-background focus-visible:outline-none focus-visible:ring focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-background data-[state=checked]:text-body",
       )}
       {...props}
     >

app/components/Marquee.tsx

@@ -1,4 +1,10 @@
-import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 interface MarqueeProps {
   children: React.ReactNode;
@@ -27,7 +33,7 @@ export function Marquee({
       style={
         {
           "--animation-speed": `${animationTime}s`,
-          "--gap": `${gap}s`,
+          "--gap": `${gap}px`,
         } as CSSProperties
       }
     >

app/components/predictive-search/PredictiveSearch.tsx

@@ -6,7 +6,7 @@ import { PredictiveSearchForm } from "./SearchForm";
 export function PredictiveSearch(props: { isOpen?: boolean }) {
   let { isOpen } = props;
   return (
-    <div className="relative border-t border-bar-subtle">
+    <div className="relative border-t border-line">
       <PredictiveSearchForm>
         {({ fetchResults, inputRef }) => (
           <div className="mx-auto w-full max-w-[560px] p-6">

app/components/predictive-search/PredictiveSearchResult.tsx

@@ -20,7 +20,7 @@ export function PredictiveSearchResult({
 
   return (
     <div
-      className="predictive-search-result flex flex-col gap-4 divide-y divide-bar-subtle"
+      className="predictive-search-result flex flex-col gap-4 divide-y divide-line"
       key={type}
     >
       <Link

app/components/predictive-search/PredictiveSearchResults.tsx

@@ -35,7 +35,7 @@ export function PredictiveSearchResults() {
     <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center">
       <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 border bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
         <div className="space-y-8">
-          <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
+          <div className="flex flex-col gap-4 divide-y divide-line">
             <PredictiveSearchResult
               goToSearchResult={goToSearchResult}
               items={queries?.items}
@@ -82,7 +82,7 @@ function NoPredictiveSearchResults({
     return null;
   }
   return (
-    <p className="w-[640px] border bg-primary p-6">
+    <p className="w-[640px] border bg-background p-6">
       No results found for <q>{searchTerm.current}</q>
     </p>
   );

app/components/predictive-search/types.ts

@@ -10,7 +10,7 @@ export type UseSearchReturn = NormalizedPredictiveSearch & {
   searchTerm: React.MutableRefObject<string>;
 };
 
-type PredicticeSearchResultItemImage =
+type PredictiveSearchResultItemImage =
   | PredictiveCollectionFragment["image"]
   | PredictiveArticleFragment["image"]
   | PredictiveProductFragment["featuredImage"];
@@ -35,7 +35,7 @@ export type NormalizedPredictiveSearchResultItem = {
   __typename: string | undefined;
   handle: string;
   id: string;
-  image?: PredicticeSearchResultItemImage;
+  image?: PredictiveSearchResultItemImage;
   price?: PredictiveSearchResultItemPrice;
   compareAtPrice?: PredictiveSearchResultItemPrice;
   styledTitle?: string;

app/entry.client.tsx

@@ -2,11 +2,13 @@ import { RemixBrowser } from "@remix-run/react";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
-});
+if (!window.location.origin.includes("webcache.googleusercontent.com")) {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
+}

app/entry.server.tsx

@@ -4,7 +4,7 @@ import type { AppLoadContext, EntryContext } from "@shopify/remix-oxygen";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
-import { getWeaverseCsp } from "~/weaverse/create-weaverse.server";
+import { getWeaverseCsp } from "~/weaverse/csp";
 
 export default async function handleRequest(
   request: Request,