Merge pull request #97 from Weaverse/dev

v2.5.0

.gitignore

@@ -9,3 +9,6 @@ node_modules
 .vscode
 .shopify
 .turbo
+/test-results/
+/playwright-report/
+/playwright/.cache/

.graphqlrc.yml

@@ -1 +1,12 @@
-schema: node_modules/@shopify/hydrogen-react/storefront.schema.json
+projects:
+  default:
+    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+    documents:
+      - '!*.d.ts'
+      - '*.{ts,tsx,js,jsx}'
+      - 'app/**/*.{ts,tsx,js,jsx}'
+      - '!app/graphql/**/*.{ts,tsx,js,jsx}'
+  customer-account:
+    schema: 'node_modules/@shopify/hydrogen/customer-account.schema.json'
+    documents:
+      - 'app/graphql/customer-account/**/*.{ts,tsx,js,jsx}'

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
   <p style="text-align: center;">
-    <img alt="Version" src="https://img.shields.io/badge/version-2.4.1-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.5.0-blue.svg?cacheSeconds=2592000" />
     <a href="#" target="_blank">
       <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg?label=license" />
     </a>
@@ -43,13 +43,15 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 
 ## Deployment
 - [Deploy to Shopify Oxygen](https://weaverse.io/docs/deployment/oxygen)
-- Deploy to Vercel:
-  [![Deploy with Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
-
+- Deploy to Vercel: [![Deploy to Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
 
 ## Getting started
 
-Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:
+**Requirements:**
+
+- Node.js version 18.0.0 or higher
+
+**Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:**
 
 1. Install [Weaverse Hydrogen Customizer](https://apps.shopify.com/weaverse) from Shopify App Store.
 2. Create new Hydrogen storefront inside Weaverse.

app/components/Cart.tsx

@@ -286,7 +286,7 @@ function CartLineItem({line}: {line: CartLine}) {
           </Heading>
 
           <div className="grid pb-2">
-            {(merchandise?.selectedOptions || []).map((option) => (
+            {(merchandise?.selectedOptions || []).filter(option => option.value !== 'Default Title').map((option) => (
               <Text color="subtle" key={option.name}>
                 {option.name}: {option.value}
               </Text>

app/data/queries.ts

@@ -98,7 +98,7 @@ export let PRODUCT_QUERY = `#graphql
         name
         values
       }
-      selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions) {
+      selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
         ...ProductVariantFragment
       }
       media(first: 7) {

app/lib/session.server.ts

@@ -1,3 +1,4 @@
+import {type HydrogenSession} from '@shopify/hydrogen';
 import {
   createCookieSessionStorage,
   type SessionStorage,

app/routes/($locale).account.tsx

@@ -6,35 +6,32 @@ import {
   useMatches,
   useOutlet,
 } from '@remix-run/react';
-import {Suspense} from 'react';
+import { flattenConnection } from '@shopify/hydrogen';
 import {
   defer,
-  redirect,
-  type LoaderFunctionArgs,
-  type AppLoadContext,
+  type LoaderFunctionArgs
 } from '@shopify/remix-oxygen';
-import {flattenConnection} from '@shopify/hydrogen';
+import { Suspense } from 'react';
 
 import type {
   CustomerDetailsFragment,
   OrderCardFragment,
 } from 'customer-accountapi.generated';
 import {
+  AccountAddressBook,
+  AccountDetails,
   Button,
+  Modal,
   OrderCard,
   PageHeader,
-  Text,
-  AccountDetails,
-  AccountAddressBook,
-  Modal,
   ProductSwimlane,
+  Text,
 } from '~/components';
-import {FeaturedCollections} from '~/components/FeaturedCollections';
-import {usePrefixPathWithLocale} from '~/lib/utils';
-import {CACHE_NONE, routeHeaders} from '~/data/cache';
-import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
-
-import {doLogout} from './($locale).account_.logout';
+import { FeaturedCollections } from '~/components/FeaturedCollections';
+import { CACHE_NONE, routeHeaders } from '~/data/cache';
+import { CUSTOMER_DETAILS_QUERY } from '~/graphql/customer-account/CustomerDetailsQuery';
+import { usePrefixPathWithLocale } from '~/lib/utils';
+import { doLogout } from './($locale).account_.logout';
 import {
   getFeaturedData,
   type FeaturedData,

app/routes/($locale).collections.$collectionHandle.tsx

@@ -7,17 +7,16 @@ import type {
   ProductCollectionSortKeys,
   ProductFilter,
 } from '@shopify/hydrogen/storefront-api-types';
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-
+import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
-import type {SortParam} from '~/components/SortFilter';
-import {FILTER_URL_PREFIX} from '~/components/SortFilter';
-import {routeHeaders} from '~/data/cache';
-import {COLLECTION_QUERY} from '~/data/queries';
-import {seoPayload} from '~/lib/seo.server';
-import {parseAsCurrency} from '~/lib/utils';
-import {WeaverseContent} from '~/weaverse';
-import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';
+import type { SortParam } from '~/components/SortFilter';
+import { FILTER_URL_PREFIX } from '~/components/SortFilter';
+import { routeHeaders } from '~/data/cache';
+import { COLLECTION_QUERY } from '~/data/queries';
+import { PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
+import { parseAsCurrency } from '~/lib/utils';
+import { WeaverseContent } from '~/weaverse';
 
 export const headers = routeHeaders;
 

app/routes/($locale).products._index.tsx

@@ -1,21 +1,20 @@
-import {getPaginationVariables} from '@shopify/hydrogen';
-import {json} from '@shopify/remix-oxygen';
+import { getPaginationVariables } from '@shopify/hydrogen';
+import type { LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import { json } from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
-import {routeHeaders} from '~/data/cache';
-import {ALL_PRODUCTS_QUERY} from '~/data/queries';
-import {seoPayload} from '~/lib/seo.server';
-import {WeaverseContent} from '~/weaverse';
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
-
-const PAGE_BY = 8;
+import { routeHeaders } from '~/data/cache';
+import { ALL_PRODUCTS_QUERY } from '~/data/queries';
+import { PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
+import { WeaverseContent } from '~/weaverse';
 
 export const headers = routeHeaders;
 
 export async function loader({
   request,
   context: {storefront, weaverse},
 }: LoaderFunctionArgs) {
-  const variables = getPaginationVariables(request, {pageBy: PAGE_BY});
+  const variables = getPaginationVariables(request, {pageBy: PAGINATION_SIZE});
 
   const data = await storefront.query(ALL_PRODUCTS_QUERY, {
     variables: {

app/routes/($locale).search.tsx

@@ -1,8 +1,7 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {Await, Form, useLoaderData} from '@remix-run/react';
-import {Suspense} from 'react';
-import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
-
+import { Await, Form, useLoaderData } from '@remix-run/react';
+import { getPaginationVariables, Pagination } from '@shopify/hydrogen';
+import { defer, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import { Suspense } from 'react';
 import {
   FeaturedCollections,
   Grid,
@@ -14,10 +13,9 @@ import {
   Section,
   Text,
 } from '~/components';
-import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments';
-import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const';
-import {seoPayload} from '~/lib/seo.server';
-
+import { PRODUCT_CARD_FRAGMENT } from '~/data/fragments';
+import { getImageLoadingPriority, PAGINATION_SIZE } from '~/lib/const';
+import { seoPayload } from '~/lib/seo.server';
 import {
   getFeaturedData,
   type FeaturedData,
@@ -29,7 +27,7 @@ export async function loader({
 }: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams;
   const searchTerm = searchParams.get('q')!;
-  const variables = getPaginationVariables(request, {pageBy: 8});
+  const variables = getPaginationVariables(request, {pageBy: PAGINATION_SIZE});
 
   const {products} = await storefront.query(SEARCH_QUERY, {
     variables: {

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "sideEffects": false,
   "author": "Weaverse",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "scripts": {
     "dev": "shopify hydrogen dev --codegen --port 3456",
     "build": "shopify hydrogen build",
@@ -14,7 +14,8 @@
     "lint:fix": "eslint --fix --ext .js,.ts,.jsx,.tsx .",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check --ignore-unknown .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "hydrogen": "shopify hydrogen"
   },
   "browserslist": [
     "defaults"
@@ -23,48 +24,48 @@
   "dependencies": {
     "@fontsource/roboto": "^5.0.8",
     "@headlessui/react": "1.7.18",
-    "@remix-run/react": "2.7.1",
-    "@remix-run/server-runtime": "2.7.1",
+    "@remix-run/react": "2.7.2",
+    "@remix-run/server-runtime": "2.7.2",
     "@shopify/cli": "3.53.0",
-    "@shopify/cli-hydrogen": "^7.0.1",
-    "@shopify/hydrogen": "~2024.1.1",
+    "@shopify/cli-hydrogen": "^7.1.0",
+    "@shopify/hydrogen": "~2024.1.2",
     "@shopify/remix-oxygen": "^2.0.3",
     "@weaverse/hydrogen": "^2.10.3",
     "clsx": "2.1.0",
     "cross-env": "7.0.3",
     "graphql": "16.8.1",
     "graphql-tag": "2.12.6",
-    "isbot": "4.3.0",
+    "isbot": "5.1.1",
     "keen-slider": "^6.8.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-intersection-observer": "9.5.3",
+    "react-intersection-observer": "9.8.1",
     "react-player": "^2.14.1",
-    "react-use": "17.4.2",
+    "react-use": "17.5.0",
     "schema-dts": "1.1.2",
-    "tiny-invariant": "1.3.1",
+    "tiny-invariant": "1.3.3",
     "typographic-base": "1.0.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
-    "@remix-run/dev": "2.7.1",
-    "@remix-run/eslint-config": "2.7.1",
+    "@remix-run/dev": "2.7.2",
+    "@remix-run/eslint-config": "2.7.2",
     "@shopify/eslint-plugin": "44.0.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "1.1.2",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.10",
     "@total-typescript/ts-reset": "0.5.1",
-    "@types/eslint": "8.56.2",
-    "@types/react": "18.2.47",
-    "@types/react-dom": "18.2.18",
+    "@types/eslint": "8.56.4",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
     "cross-env": "7.0.3",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-plugin-hydrogen": "0.12.3",
-    "postcss": "8.4.33",
-    "postcss-import": "16.0.0",
-    "postcss-preset-env": "9.3.0",
-    "prettier": "3.1.1",
+    "postcss": "8.4.35",
+    "postcss-import": "16.0.1",
+    "postcss-preset-env": "9.4.0",
+    "prettier": "3.2.5",
     "rimraf": "5.0.5",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3"
@@ -75,4 +76,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}