Merge branch 'Weaverse:main' into main

Author: hta218

.github/workflows/claude.yml

@@ -47,7 +47,7 @@ jobs:
 
             Please review this pull request and provide feedback on:
             - Code quality and adherence to project conventions (check CLAUDE.md for guidelines)
-            - Weaverse section implementation (must use forwardRef and export schema)
+            - Weaverse section implementation (must use ref as a prop and export schema)
             - GraphQL usage and type safety
             - Performance considerations (especially parallel data loading)
             - Biome linting compliance

.gitignore

@@ -17,6 +17,7 @@ pnpm-lock.yaml
 .DS_Store
 .react-router
 .claude/
+.github/copilot-instructions.md
 memory/
 scripts/
 templates/

CHANGELOG.md

@@ -1,5 +1,56 @@
 # @weaverse/pilot
 
+## 6.0.3
+
+### Patch Changes
+
+- **Component refactoring**: Migrated from forwardRef pattern to ref as props for Weaverse sections and components, improving API consistency
+- **UI/UX improvements**:
+  - Enhanced ProductCard and ProductMedia components with view transition effects for smoother user experience
+  - Refactored PredictiveSearchButton layout and repositioned PopularKeywords component
+  - Updated JudgemeStarsRating component with improved loading state styling
+  - Added variant prices display in SingleProduct component
+- **Code cleanup**:
+  - Removed unused NavLink component
+  - Cleaned up SingleProduct component by removing unused children prop and childTypes from schema
+  - Updated default onClickEvent value to "scroll-to-section" in JudgemeStarsRating schema
+  - Removed unused imports across multiple components
+- **Developer experience**:
+  - Updated CLAUDE.md documentation with improved project guidance
+  - Added .github/copilot-instructions.md to .gitignore
+  - Updated GitHub workflow configuration
+
+## 6.0.2
+
+### Patch Changes
+
+- Updated dependencies [3720e74]
+- Updated dependencies [469f291]
+- Updated dependencies [9ee3be2]
+  - @weaverse/hydrogen@5.5.0
+
+## 6.0.2-beta.0
+
+### Patch Changes
+
+- @weaverse/hydrogen@5.5.1-beta.0
+
+## 6.0.1
+
+### Patch Changes
+
+- Updated dependencies [21ba4ed]
+- Updated dependencies [5c6060b]
+- Updated dependencies [2468404]
+  - @weaverse/hydrogen@5.5.0
+
+## 6.0.1-beta.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @weaverse/hydrogen@5.5.0-beta.0
+
 ## 6.0.0
 
 ### Major Changes

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-This is **Pilot**, a Shopify Hydrogen theme powered by Weaverse - a visual page builder for Hydrogen storefronts. The project is built with React, TypeScript, React Router 7, and Tailwind CSS v4. It runs on Node.js 20+ and uses Biome for linting/formatting.
+This is **Pilot**, a Shopify Hydrogen theme powered by Weaverse - a visual page builder for Hydrogen storefronts. The project is built with React, TypeScript, React Router 7, and Tailwind CSS v4. It runs on Node.js 20+ and uses Biome for linting/formatting. Current version: 5.6.0 with upcoming 5.7.0 release.
 
 ## Essential Commands
 
@@ -89,6 +89,7 @@ All routes follow the pattern `($locale).{route}.tsx` to support internationaliz
 
 - **Weaverse**: Visual page builder - sections must be registered in `/app/weaverse/components.ts`
 - **Judge.me**: Product reviews integration via utilities in `/app/utils/judgeme.ts`
+- **Combined Listings**: Intelligent product grouping system via utilities in `/app/utils/combined-listings.ts`
 - **Analytics**: Shopify Analytics integrated throughout components
 - **Customer Accounts**: New Shopify Customer Account API support (OAuth-based)
 - **Radix UI**: For accessible UI primitives (accordion, dialog, dropdown, etc.)
@@ -97,32 +98,33 @@ All routes follow the pattern `($locale).{route}.tsx` to support internationaliz
 ### Weaverse Section Development
 
 1. **Creating a New Section**:
-   ```typescript
-   // app/sections/my-section/index.tsx
-   import { createSchema, type HydrogenComponentProps } from '@weaverse/hydrogen';
-   import { forwardRef } from 'react';
-   
-   interface MyProps extends HydrogenComponentProps {
-     heading: string;
-   }
-   
-   const MySection = forwardRef<HTMLElement, MyProps>((props, ref) => {
-     // Component implementation
-   });
-   
-   export default MySection;
-   
-   export const schema = createSchema({
-     type: 'my-section',
-     title: 'My Section',
-     settings: [/* ... */]
-   });
-   
-   // Optional loader for server-side data fetching
-   export const loader = async ({ weaverse, data }) => {
-     // Fetch data
-   };
-   ```
+  ```typescript
+  // app/sections/my-section/index.tsx
+  import { createSchema, type HydrogenComponentProps } from '@weaverse/hydrogen';
+  import type { ComponentRef } from 'react';
+
+  interface MyProps extends HydrogenComponentProps {
+    heading: string;
+    ref?: React.Ref<HTMLDivElement>;
+  }
+
+  const MySection = ({ ref, ...props }: MyProps) => {
+    // Component implementation
+  };
+
+  export default MySection;
+
+  export const schema = createSchema({
+    type: 'my-section',
+    title: 'My Section',
+    settings: [/* ... */]
+  });
+
+  // Optional loader for server-side data fetching
+  export const loader = async ({ weaverse, data }) => {
+    // Fetch data
+  };
+  ```
 
 2. **Register in `/app/weaverse/components.ts`**:
    ```typescript
@@ -139,21 +141,21 @@ All routes follow the pattern `($locale).{route}.tsx` to support internationaliz
 export async function loader({ params, request, context }: LoaderFunctionArgs) {
   const { handle } = params;
   invariant(handle, "Missing handle param");
-  
+
   const { storefront, weaverse } = context;
-  
+
   // Parallel data loading
   const [shopifyData, weaverseData, thirdPartyData] = await Promise.all([
     storefront.query(QUERY, { variables }),
     weaverse.loadPage({ type: "PAGE_TYPE", handle }),
     fetchThirdPartyData(),
   ]);
-  
+
   // Handle errors
   if (!shopifyData.resource) {
     throw new Response("Not found", { status: 404 });
   }
-  
+
   return data({
     shopifyData,
     weaverseData,
@@ -162,14 +164,40 @@ export async function loader({ params, request, context }: LoaderFunctionArgs) {
 }
 ```
 
+### Combined Listings Integration
+
+Combined Listings allow intelligent product grouping and filtering:
+
+```typescript
+// Use utility functions from app/utils/combined-listings.ts
+import { isCombinedListing, shouldFilterCombinedListings } from '~/utils/combined-listings';
+
+// In product queries and loaders
+const filteredProducts = products.filter(product => 
+  !shouldFilterCombinedListings(product, settings)
+);
+
+// In components
+if (isCombinedListing(product)) {
+  // Handle combined listing display differently
+}
+```
+
+Key integration points:
+- Product loaders filter combined listings based on settings
+- Cart functionality handles combined products specially
+- Product display components check for combined listing status
+- Featured products support both collection-based and manual selection
+
 ### Environment Configuration
 
 Required environment variables are defined in `env.d.ts`. The project uses `@shopify/hydrogen` and `@shopify/remix-oxygen` for environment handling.
 
 ### Testing Strategy
 
 - E2E tests use Playwright and are located in `/tests/`
-- Tests run against `localhost:3456` (same as dev server)
+- Tests run against `localhost:3000` using production build (`npm run preview`)
+- Playwright automatically starts the preview server before running tests
 - Focus on critical user flows: cart operations, checkout process
 - Run individual tests: `npx playwright test tests/cart.test.ts`
 
@@ -199,3 +227,19 @@ The project extends from `ultracite` and `@weaverse/biome` configurations with t
 4. **Customer Account Queries**: Only use in `*.account*.{ts,tsx}` files
 5. **Parallel Loading**: Always use `Promise.all()` for multiple data fetches in loaders
 6. **Type Safety**: Never use `any` type, properly type all Weaverse section props
+7. **Combined Listings**: Use utility functions from `/app/utils/combined-listings.ts` for product filtering and grouping logic
+8. **Package Manager**: Use npm (not pnpm) - the project is configured for npm package management
+
+## Development Setup Requirements
+
+### Node.js and Dependencies
+- **Node.js**: Version 20.0.0 or higher required
+- **Package Manager**: npm (configured in package.json, don't use pnpm)
+- **Environment**: Copy `.env.example` to `.env` and configure Shopify store credentials
+
+### Key Configuration Files
+- **react-router.config.ts**: React Router v7 configuration (SSR enabled, app directory structure)
+- **vite.config.ts**: Includes Hydrogen, Oxygen, Tailwind CSS v4, and development server warmup
+- **biome.json**: Code quality configuration extending from `ultracite` and `@weaverse/biome`
+- **codegen.ts**: GraphQL code generation for Shopify Storefront and Customer Account APIs
+- **tsconfig.json**: TypeScript config with `~/` path alias, strict mode disabled for compatibility

app/components/button.tsx

@@ -2,7 +2,6 @@ import { CircleNotchIcon } from "@phosphor-icons/react";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
-import { forwardRef } from "react";
 import { cn } from "~/utils/cn";
 
 export const variants = cva(
@@ -78,6 +77,7 @@ export interface ButtonProps
   extends VariantProps<typeof variants>,
     Omit<HTMLAttributes<HTMLButtonElement>, "type">,
     Partial<ButtonStyleProps> {
+  ref?: React.Ref<HTMLButtonElement>;
   type?: "button" | "reset" | "submit";
   className?: string;
   disabled?: boolean;
@@ -86,65 +86,64 @@ export interface ButtonProps
   animate?: boolean;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    let {
-      type = "button",
-      variant,
-      loading,
-      className,
-      textColor,
-      backgroundColor,
-      borderColor,
-      textColorHover,
-      backgroundColorHover,
-      borderColorHover,
-      style = {},
-      animate = true,
-      children,
-      ...rest
-    } = props;
-    if (variant === "custom") {
-      style = {
-        ...style,
-        "--btn-text": textColor,
-        "--btn-bg": backgroundColor,
-        "--btn-border": borderColor,
-        "--btn-text-hover": textColorHover,
-        "--btn-bg-hover": backgroundColorHover,
-        "--btn-border-hover": borderColorHover,
-      } as React.CSSProperties;
-    }
+export function Button(props: ButtonProps) {
+  let {
+    ref,
+    type = "button",
+    variant,
+    loading,
+    className,
+    textColor,
+    backgroundColor,
+    borderColor,
+    textColorHover,
+    backgroundColorHover,
+    borderColorHover,
+    style = {},
+    animate = true,
+    children,
+    ...rest
+  } = props;
+  if (variant === "custom") {
+    style = {
+      ...style,
+      "--btn-text": textColor,
+      "--btn-bg": backgroundColor,
+      "--btn-border": borderColor,
+      "--btn-text-hover": textColorHover,
+      "--btn-bg-hover": backgroundColorHover,
+      "--btn-border-hover": borderColorHover,
+    } as React.CSSProperties;
+  }
 
-    if (!children) {
-      return null;
-    }
+  if (!children) {
+    return null;
+  }
 
-    let content: React.ReactNode;
-    if (typeof children === "string") {
-      content = <span>{children}</span>;
-    } else {
-      content = children;
-    }
+  let content: React.ReactNode;
+  if (typeof children === "string") {
+    content = <span>{children}</span>;
+  } else {
+    content = children;
+  }
 
-    if (animate) {
-      rest["data-motion"] = "fade-up";
-    }
+  if (animate) {
+    rest["data-motion"] = "fade-up";
+  }
 
-    return (
-      <button
-        ref={ref}
-        style={style}
-        type={type}
-        {...rest}
-        className={cn(variants({ variant, className }))}
-      >
-        {loading && <Spinner />}
-        {content}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      ref={ref}
+      style={style}
+      type={type}
+      {...rest}
+      className={cn(variants({ variant, className }))}
+    >
+      {loading && <Spinner />}
+      {content}
+    </button>
+  );
+}
 
 function Spinner() {
   const style = { "--duration": "500ms" } as React.CSSProperties;