sync demo

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.3.1-blue.svg?cacheSeconds=2592000" />
+    <img alt="Version" src="https://img.shields.io/badge/version-2.4.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>
@@ -20,7 +20,9 @@
 _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse, designed to create lightning-fast storefronts with exceptional performance. This theme combines a collection of powerful tools and features to streamline your Shopify development experience._
 
 ## Demo
+
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FWeaverse%2Fpilot&env=SESSION_SECRET,PUBLIC_STORE_DOMAIN,PUBLIC_STOREFRONT_API_TOKEN,WEAVERSE_PROJECT_ID&envDescription=SESSION_SECRET%2C%20PUBLIC_STORE_DOMAIN%2C%20PUBLIC_STOREFRONT_API_TOKEN%2C%20WEAVERSE_PROJECT_ID&envLink=https%3A%2F%2Fweaverse.io%2Fdocs%2Fguides%2F8460014-environment-variables&project-name=my-weaverse-hydrogen-project&repository-name=my-weaverse-hydrogen-project&demo-title=Weaverse%20Hydrogen%20Demo&demo-description=A%20Shopify%20Hydrogen%20storefront%20build%20with%20Weaverse&demo-url=https%3A%2F%2Fpilot.weaverse.dev&demo-image=https%3A%2F%2Fcdn.shopify.com%2Fs%2Ffiles%2F1%2F0728%2F0410%2F6547%2Ffiles%2FHome.png)
+
 - [Live store](https://pilot.weaverse.dev)
 - Try customizing Pilot on [Weaverse Playground](https://playground.weaverse.io)
   ![demo](https://cdn.shopify.com/s/files/1/0693/8201/3220/files/Home.png?v=1695816170)

app/components/Cart.tsx

@@ -1,31 +1,28 @@
-import clsx from 'clsx';
-import {useRef} from 'react';
-import {useScroll} from 'react-use';
 import {
-  flattenConnection,
   CartForm,
   Image,
   Money,
-  useOptimisticData,
   OptimisticInput,
+  flattenConnection,
+  useOptimisticData,
 } from '@shopify/hydrogen';
 import type {
-  Cart as CartType,
   CartCost,
   CartLine,
   CartLineUpdateInput,
+  Cart as CartType,
 } from '@shopify/hydrogen/storefront-api-types';
-
+import clsx from 'clsx';
+import {useRef} from 'react';
+import {useScroll} from 'react-use';
 import {
   Button,
-  Heading,
-  IconRemove,
-  Text,
-  Link,
   FeaturedProducts,
+  IconRemove,
   Input,
+  Link,
+  Text,
 } from '~/components';
-import {getInputStyleClasses} from '~/lib/utils';
 
 type Layouts = 'page' | 'drawer';
 
@@ -224,10 +221,10 @@ function CartSummary({
   cost: CartCost;
   layout: Layouts;
 }) {
-  const summary = {
-    drawer: 'grid gap-4 p-6 border-t md:px-12',
-    page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full',
-  };
+  // const summary = {
+  //   drawer: 'grid gap-4 p-6 border-t md:px-12',
+  //   page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full',
+  // };
 
   return (
     <section

app/components/Checkbox.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import {InputHTMLAttributes} from 'react';
+import type {InputHTMLAttributes} from 'react';
 
 export function Checkbox(props: InputHTMLAttributes<HTMLInputElement>) {
   let {className = '', ...rest} = props;

app/components/CountrySelector.tsx

@@ -1,12 +1,11 @@
-import {useFetcher, useLocation, useMatches} from '@remix-run/react';
+import {useFetcher, useLocation} from '@remix-run/react';
+import {CartForm} from '@shopify/hydrogen';
+import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
+import clsx from 'clsx';
 import {useCallback, useEffect, useRef} from 'react';
 import {useInView} from 'react-intersection-observer';
-import clsx from 'clsx';
-import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
-import {CartForm} from '@shopify/hydrogen';
-
-import {Heading, Button, IconCheck} from '~/components';
-import type {Localizations, Locale} from '~/lib/type';
+import {Button, Heading, IconCheck} from '~/components';
+import type {Locale, Localizations} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
 import {useRootLoaderData} from '~/root';
 

app/components/Layout.tsx

@@ -1,38 +1,36 @@
-import {useParams, Form, Await} from '@remix-run/react';
-import {useWindowScroll} from 'react-use';
 import {Disclosure} from '@headlessui/react';
-import {Suspense, useEffect, useMemo} from 'react';
+import {Await, Form, useParams} from '@remix-run/react';
 import {CartForm} from '@shopify/hydrogen';
-
+import {Suspense, useEffect, useMemo} from 'react';
+import {useWindowScroll} from 'react-use';
+import clsx from 'clsx';
 import type {LayoutQuery} from 'storefrontapi.generated';
 import {
+  Cart,
+  CartLoading,
+  CountrySelector,
   Drawer,
-  useDrawer,
-  Text,
-  Input,
-  IconLogin,
+  Heading,
   IconAccount,
   IconBag,
-  IconSearch,
-  Heading,
-  IconMenu,
   IconCaret,
-  Section,
-  CountrySelector,
-  Cart,
-  CartLoading,
+  IconLogin,
+  IconMenu,
+  IconSearch,
   Link,
+  Section,
+  Text,
+  useDrawer,
 } from '~/components';
+import {useCartFetchers} from '~/hooks/useCartFetchers';
+import {useIsHydrated} from '~/hooks/useIsHydrated';
 import {
-  type EnhancedMenu,
-  type ChildEnhancedMenuItem,
   useIsHomePath,
+  type ChildEnhancedMenuItem,
+  type EnhancedMenu,
 } from '~/lib/utils';
-import {useIsHydrated} from '~/hooks/useIsHydrated';
-import {useCartFetchers} from '~/hooks/useCartFetchers';
-import {Logo} from './Logo';
-import clsx from 'clsx';
 import {useRootLoaderData} from '~/root';
+import {Logo} from './Logo';
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -354,6 +352,7 @@ function Badge({
         </div>
       </>
     ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [count, dark],
   );
 

app/lib/utils.ts

@@ -1,15 +1,13 @@
-import {useLocation, useMatches} from '@remix-run/react';
+import {useLocation} from '@remix-run/react';
 import type {MoneyV2} from '@shopify/hydrogen/storefront-api-types';
 import typographicBase from 'typographic-base';
-
 import type {
   ChildMenuItemFragment,
   MenuFragment,
   ParentMenuItemFragment,
 } from 'storefrontapi.generated';
 import {countries} from '~/data/countries';
 import {useRootLoaderData} from '~/root';
-
 import type {I18nLocale} from './type';
 
 type EnhancedMenuItemProps = {

app/root.tsx

@@ -1,9 +1,9 @@
+import {defer} from '@shopify/remix-oxygen';
 import {
-  defer,
+  type LinksFunction,
   type LoaderFunctionArgs,
   type AppLoadContext,
   type SerializeFrom,
-  LinksFunction,
 } from '@shopify/remix-oxygen';
 import {
   isRouteErrorResponse,
@@ -20,12 +20,9 @@ import {
 } from '@remix-run/react';
 import {ShopifySalesChannel, Seo, useNonce} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
-
 import {Layout} from '~/components';
 import {seoPayload} from '~/lib/seo.server';
-
 import favicon from '../public/favicon.svg';
-
 import {withWeaverse} from '@weaverse/hydrogen';
 import {GenericError} from './components/GenericError';
 import {NotFound} from './components/NotFound';

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

@@ -1,20 +1,18 @@
-import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
+  useNavigation,
   useOutletContext,
   useParams,
-  useNavigation,
 } from '@remix-run/react';
 import {flattenConnection} from '@shopify/hydrogen';
 import type {MailingAddressInput} from '@shopify/hydrogen/storefront-api-types';
+import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
-
-import {Button, Input, Text} from '~/components';
-import {assertApiErrors, getInputStyleClasses} from '~/lib/utils';
-
+import {Button, Input} from '~/components';
+import {assertApiErrors} from '~/lib/utils';
+import {Checkbox} from '~/components/Checkbox';
 import type {AccountOutletContext} from './($locale).account.edit';
-import { Checkbox } from '~/components/Checkbox';
 
 interface ActionData {
   formError?: string;
@@ -295,16 +293,10 @@ export default function EditAddress() {
             </label>
           </div>
           <div className="mt-6 flex gap-4 items-center justify-end">
-            <Button
-              to=".."
-              variant="secondary"
-            >
+            <Button to=".." variant="secondary">
               Cancel
             </Button>
-            <Button
-              type="submit"
-              disabled={state !== 'idle'}
-            >
+            <Button type="submit" disabled={state !== 'idle'}>
               {state !== 'idle' ? 'Saving' : 'Save'}
             </Button>
           </div>

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

@@ -1,20 +1,14 @@
+import {Form, useActionData, type MetaFunction} from '@remix-run/react';
 import {
   json,
   redirect,
   type ActionFunction,
   type AppLoadContext,
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
-import {
-  Form,
-  useActionData,
-  useLoaderData,
-  type MetaFunction,
-} from '@remix-run/react';
-import {MouseEvent, useState} from 'react';
-
-import {getInputStyleClasses} from '~/lib/utils';
-import {Input, Link, Button} from '~/components';
+import type {MouseEvent} from 'react';
+import {useState} from 'react';
+import {Button, Input, Link} from '~/components';
 
 export const handle = {
   isPublic: true,
@@ -94,7 +88,6 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Login() {
-  const {shopName} = useLoaderData<typeof loader>();
   const actionData = useActionData<ActionData>();
   const [nativeEmailError, setNativeEmailError] = useState<null | string>(null);
   const [nativePasswordError, setNativePasswordError] = useState<null | string>(
@@ -203,10 +196,6 @@ export default function Login() {
   );
 }
 
-function FormComp() {
-  return <></>;
-}
-
 const LOGIN_MUTATION = `#graphql
   mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
     customerAccessTokenCreate(input: $input) {

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

@@ -1,13 +1,12 @@
+import {Form, useActionData, type MetaFunction} from '@remix-run/react';
 import {
-  redirect,
   json,
+  redirect,
   type ActionFunction,
   type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
-import {Form, useActionData, type MetaFunction} from '@remix-run/react';
 import {useState, type MouseEvent} from 'react';
 
-import {getInputStyleClasses} from '~/lib/utils';
 import {Button, Input, Link} from '~/components';
 
 import {doLogin} from './($locale).account.login';

app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx

@@ -1,11 +1,12 @@
-import {json, type LinksFunction} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
 import {type RouteLoaderArgs} from '@weaverse/hydrogen';
-import {ArticleDetailsQuery} from 'storefrontapi.generated';
+import type {ArticleDetailsQuery} from 'storefrontapi.generated';
 import invariant from 'tiny-invariant';
 import {routeHeaders} from '~/data/cache';
 import {ARTICLE_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
+
 // import styles from '../styles/custom-font.css';
 
 export const headers = routeHeaders;

app/routes/($locale).discount.$code.tsx

@@ -15,13 +15,13 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 export async function loader({request, context, params}: LoaderFunctionArgs) {
   const {cart} = context;
   // N.B. This route will probably be removed in the future.
-  const session = context.session as any;
+  // const session = context.session as any;
   const {code} = params;
 
   const url = new URL(request.url);
   const searchParams = new URLSearchParams(url.search);
   let redirectParam =
-  searchParams.get('redirect') || searchParams.get('return_to') || '/';
+    searchParams.get('redirect') || searchParams.get('return_to') || '/';
 
   if (redirectParam.includes('//')) {
     // Avoid redirecting to external URLs to prevent phishing attacks

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

@@ -2,7 +2,7 @@ import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {AnalyticsPageType} from '@shopify/hydrogen';
 import {defer, redirect} from '@shopify/remix-oxygen';
 import {type RouteLoaderArgs} from '@weaverse/hydrogen';
-import {
+import type {
   ProductQuery,
   ProductRecommendationsQuery,
 } from 'storefrontapi.generated';

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

@@ -1,12 +1,11 @@
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 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 {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
 import {
   FeaturedCollections,
   Grid,
-  Heading,
   IconSearch,
   Input,
   PageHeader,
@@ -24,7 +23,10 @@ import {
   type FeaturedData,
 } from './($locale).featured-products';
 
-export async function loader({request, context: {storefront}}: LoaderFunctionArgs) {
+export async function loader({
+  request,
+  context: {storefront},
+}: LoaderFunctionArgs) {
   const searchParams = new URL(request.url).searchParams;
   const searchTerm = searchParams.get('q')!;
   const variables = getPaginationVariables(request, {pageBy: 8});
@@ -77,7 +79,10 @@ export default function Search() {
     <>
       <PageHeader className="bg-secondary/5 justify-center items-center !gap-5">
         {searchTerm && (
-          <h3 className="uppercase w-full text-center">{noResults ? "No result" : `${products.nodes.length} results`} for "{searchTerm}"</h3>
+          <h3 className="uppercase w-full text-center">
+            {noResults ? 'No result' : `${products.nodes.length} results`} for "
+            {searchTerm}"
+          </h3>
         )}
         <Form method="get" className="lg:w-[400px]">
           <Input