Import unused component and make imports consistent in demo store

templates/demo-store/src/App.server.tsx

@@ -14,8 +14,9 @@ import {
   useServerAnalytics,
   Seo,
 } from '@shopify/hydrogen';
-import {HeaderFallback, EventsListener} from '~/components';
 import type {CountryCode} from '@shopify/hydrogen/storefront-api-types';
+
+import {HeaderFallback, EventsListener} from '~/components';
 import {NotFound} from '~/components/index.server';
 
 function App({request}: HydrogenRouteProps) {

templates/demo-store/src/components/CountrySelector.client.tsx

@@ -1,14 +1,13 @@
-import {useCallback, useState, Suspense} from 'react';
+import {useCallback, useMemo, useState, Suspense} from 'react';
 import {useLocalization, fetchSync} from '@shopify/hydrogen';
-// @ts-expect-error @headlessui/react incompatibility with node16 resolution
-import {Listbox} from '@headlessui/react';
-
-import {IconCheck, IconCaret} from '~/components';
-import {useMemo} from 'react';
 import type {
   Country,
   CountryCode,
 } from '@shopify/hydrogen/storefront-api-types';
+// @ts-expect-error @headlessui/react incompatibility with node16 resolution
+import {Listbox} from '@headlessui/react';
+
+import {IconCheck, IconCaret} from '~/components';
 
 /**
  * A client component that selects the appropriate country to display for products on a website

templates/demo-store/src/components/CustomFont.client.tsx

@@ -17,6 +17,6 @@
 // In a production environment, you will likely want to include the below
 // markup right in your index.html and index.css files.
 
-import '../styles/custom-font.css';
+import '~/styles/custom-font.css';
 
 export function CustomFont() {}

templates/demo-store/src/components/account/AccountActivateForm.client.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {useNavigate} from '@shopify/hydrogen/client';
-import {getInputStyleClasses} from '../../lib/styleUtils';
+
+import {getInputStyleClasses} from '~/lib/styleUtils';
 
 export function AccountActivateForm({
   id,

templates/demo-store/src/components/account/AccountAddressBook.client.tsx

@@ -1,8 +1,12 @@
 import {useState, useMemo, MouseEventHandler} from 'react';
 
-import {Text, Button} from '~/components/elements';
-import {Modal} from '../index';
-import {AccountAddressEdit, AccountDeleteAddress} from '../index';
+import {
+  AccountAddressEdit,
+  AccountDeleteAddress,
+  Button,
+  Modal,
+  Text,
+} from '~/components';
 
 export function AccountAddressBook({
   addresses,

templates/demo-store/src/components/account/AccountAddressEdit.client.tsx

@@ -1,8 +1,8 @@
 import {useMemo, useState} from 'react';
-import {useRenderServerComponents} from '~/lib/utils';
 
+import {useRenderServerComponents} from '~/lib/utils';
+import {getInputStyleClasses} from '~/lib/styleUtils';
 import {Button, Text} from '~/components';
-import {getInputStyleClasses} from '../../lib/styleUtils';
 
 export function AccountAddressEdit({
   address,

templates/demo-store/src/components/account/AccountCreateForm.client.tsx

@@ -2,9 +2,8 @@ import {useState} from 'react';
 import {useNavigate, Link} from '@shopify/hydrogen/client';
 
 import {emailValidation, passwordValidation} from '~/lib/utils';
-
+import {getInputStyleClasses} from '~/lib/styleUtils';
 import {callLoginApi} from './AccountLoginForm.client';
-import {getInputStyleClasses} from '../../lib/styleUtils';
 
 interface FormElements {
   email: HTMLInputElement;

templates/demo-store/src/components/account/AccountDeleteAddress.client.tsx

@@ -1,4 +1,4 @@
-import {Text, Button} from '~/components/elements';
+import {Text, Button} from '~/components';
 import {useRenderServerComponents} from '~/lib/utils';
 
 export function AccountDeleteAddress({

templates/demo-store/src/components/account/AccountDetails.client.tsx

@@ -1,7 +1,7 @@
 import {Seo} from '@shopify/hydrogen';
 import {useState} from 'react';
-import {Modal} from '../index';
-import {AccountDetailsEdit} from './AccountDetailsEdit.client';
+
+import {AccountDetailsEdit, Modal} from '~/components';
 
 export function AccountDetails({
   firstName,

templates/demo-store/src/components/account/AccountDetailsEdit.client.tsx

@@ -6,7 +6,7 @@ import {
   passwordValidation,
   useRenderServerComponents,
 } from '~/lib/utils';
-import {getInputStyleClasses} from '../../lib/styleUtils';
+import {getInputStyleClasses} from '~/lib/styleUtils';
 
 interface FormElements {
   firstName: HTMLInputElement;

templates/demo-store/src/components/account/AccountLoginForm.client.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {useNavigate, Link} from '@shopify/hydrogen/client';
-import {getInputStyleClasses} from '../../lib/styleUtils';
+
+import {getInputStyleClasses} from '~/lib/styleUtils';
 
 interface FormElements {
   email: HTMLInputElement;

templates/demo-store/src/components/account/AccountOrderHistory.client.tsx

@@ -1,4 +1,5 @@
 import type {Order} from '@shopify/hydrogen/storefront-api-types';
+
 import {Button, Text, OrderCard} from '~/components';
 
 export function AccountOrderHistory({orders}: {orders: Order[]}) {

templates/demo-store/src/components/account/AccountPasswordResetForm.client.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import {useNavigate} from '@shopify/hydrogen/client';
-import {getInputStyleClasses} from '../../lib/styleUtils';
+
+import {getInputStyleClasses} from '~/lib/styleUtils';
 
 interface FormElements {
   password: HTMLInputElement;

templates/demo-store/src/components/account/AccountRecoverForm.client.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 
 import {emailValidation} from '~/lib/utils';
-import {getInputStyleClasses} from '../../lib/styleUtils';
+import {getInputStyleClasses} from '~/lib/styleUtils';
 
 interface FormElements {
   email: HTMLInputElement;

templates/demo-store/src/components/cards/ProductCard.client.tsx

@@ -6,17 +6,17 @@ import {
   Money,
   useMoney,
 } from '@shopify/hydrogen';
-
-import {Text} from '~/components';
-import {isDiscounted, isNewArrival} from '~/lib/utils';
-import {getProductPlaceholder} from '~/lib/placeholders';
 import type {
   MoneyV2,
   Product,
   ProductVariant,
   ProductVariantConnection,
 } from '@shopify/hydrogen/storefront-api-types';
 
+import {Text} from '~/components';
+import {isDiscounted, isNewArrival} from '~/lib/utils';
+import {getProductPlaceholder} from '~/lib/placeholders';
+
 export function ProductCard({
   product,
   label,

templates/demo-store/src/components/cart/CartEmpty.client.tsx

@@ -1,9 +1,9 @@
-import {useRef} from 'react';
+import {Suspense, useRef} from 'react';
 import {useScroll} from 'react-use';
 import {fetchSync} from '@shopify/hydrogen';
-import {Button, Text, ProductCard, Heading, Skeleton} from '~/components';
 import type {Product} from '@shopify/hydrogen/storefront-api-types';
-import {Suspense} from 'react';
+
+import {Button, Text, ProductCard, Heading, Skeleton} from '~/components';
 
 export function CartEmpty({
   onClose,

templates/demo-store/src/components/global/CartDrawer.client.tsx

@@ -1,5 +1,4 @@
-import {CartDetails} from '~/components/cart';
-import {Drawer} from './Drawer.client';
+import {CartDetails, Drawer} from '~/components';
 
 export function CartDrawer({
   isOpen,

templates/demo-store/src/components/global/Header.client.tsx

@@ -2,18 +2,16 @@ import {Link, useUrl, useCart} from '@shopify/hydrogen';
 import {useWindowScroll} from 'react-use';
 
 import {
+  CartDrawer,
   Heading,
   IconAccount,
   IconBag,
   IconMenu,
   IconSearch,
   Input,
+  MenuDrawer,
+  useDrawer,
 } from '~/components';
-
-import {CartDrawer} from './CartDrawer.client';
-import {MenuDrawer} from './MenuDrawer.client';
-import {useDrawer} from './Drawer.client';
-
 import type {EnhancedMenu} from '~/lib/utils';
 
 /**

templates/demo-store/src/components/global/MenuDrawer.client.tsx

@@ -1,9 +1,9 @@
-import {EnhancedMenu} from '~/lib/utils';
-import {Text} from '~/components';
-import {Drawer} from './Drawer.client';
 import {Link} from '@shopify/hydrogen';
 import {startTransition} from 'react';
 
+import {EnhancedMenu} from '~/lib/utils';
+import {Drawer, Text} from '~/components';
+
 export function MenuDrawer({
   isOpen,
   onClose,

templates/demo-store/src/components/global/NotFound.server.tsx

@@ -4,16 +4,16 @@ import {
   useLocalization,
   useShopQuery,
 } from '@shopify/hydrogen';
-
 import {Suspense} from 'react';
-import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
-import {Button, FeaturedCollections, PageHeader, Text} from '~/components';
-import {ProductSwimlane, Layout} from '~/components/index.server';
 import type {
   CollectionConnection,
   ProductConnection,
 } from '@shopify/hydrogen/storefront-api-types';
 
+import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
+import {Button, FeaturedCollections, PageHeader, Text} from '~/components';
+import {ProductSwimlane, Layout} from '~/components/index.server';
+
 export function NotFound({
   response,
   type = 'page',

templates/demo-store/src/components/global/index.ts

@@ -1,5 +1,7 @@
+export {CartDrawer} from './CartDrawer.client';
 export {Drawer, useDrawer} from './Drawer.client';
 export {FooterMenu} from './FooterMenu.client';
 export {Header} from './Header.client';
 export {Modal} from './Modal.client';
+export {MenuDrawer} from './MenuDrawer.client';
 export {PageHeader} from './PageHeader';

templates/demo-store/src/components/product/ProductForm.client.tsx

@@ -1,5 +1,4 @@
 import {useEffect, useCallback, useState} from 'react';
-
 import {
   useProductOptions,
   isBrowser,

templates/demo-store/src/components/product/ProductGallery.client.tsx

@@ -1,5 +1,6 @@
 import {MediaFile} from '@shopify/hydrogen/client';
 import type {MediaEdge} from '@shopify/hydrogen/storefront-api-types';
+
 import {ATTR_LOADING_EAGER} from '~/lib/const';
 
 /**

templates/demo-store/src/components/product/ProductGrid.client.tsx

@@ -1,9 +1,9 @@
 import {useState, useRef, useEffect, useCallback} from 'react';
 import {Link, flattenConnection} from '@shopify/hydrogen';
+import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
 
 import {Button, Grid, ProductCard} from '~/components';
 import {getImageLoadingPriority} from '~/lib/const';
-import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
 
 export function ProductGrid({
   url,

templates/demo-store/src/components/sections/ProductCards.tsx

@@ -1,5 +1,6 @@
 import {Product} from '@shopify/hydrogen/storefront-api-types';
-import {ProductCard} from '../cards/ProductCard.client';
+
+import {ProductCard} from '~/components';
 
 export function ProductCards({products}: {products: Product[]}) {
   return (

templates/demo-store/src/components/sections/ProductSwimlane.server.tsx

@@ -1,12 +1,13 @@
 import {Suspense, useMemo} from 'react';
 import {gql, useShopQuery, useLocalization} from '@shopify/hydrogen';
-import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
-import {ProductCard, Section} from '~/components';
 import type {
   Product,
   ProductConnection,
 } from '@shopify/hydrogen/storefront-api-types';
 
+import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
+import {ProductCards, Section} from '~/components';
+
 const mockProducts = new Array(12).fill('');
 
 export function ProductSwimlane({
@@ -44,20 +45,6 @@ export function ProductSwimlane({
   );
 }
 
-function ProductCards({products}: {products: Product[]}) {
-  return (
-    <>
-      {products.map((product) => (
-        <ProductCard
-          product={product}
-          key={product.id}
-          className={'snap-start w-80'}
-        />
-      ))}
-    </>
-  );
-}
-
 function RecommendedProducts({
   productId,
   count,

templates/demo-store/src/components/sections/index.ts

@@ -1,2 +1,3 @@
 export {FeaturedCollections} from './FeaturedCollections';
 export {Hero} from './Hero';
+export {ProductCards} from './ProductCards';

templates/demo-store/src/routes/account/index.server.tsx

@@ -12,6 +12,15 @@ import {
   type HydrogenApiRouteOptions,
   useServerAnalytics,
 } from '@shopify/hydrogen';
+import type {
+  Collection,
+  CollectionConnection,
+  Customer,
+  MailingAddress,
+  Order,
+  Product,
+  ProductConnection,
+} from '@shopify/hydrogen/storefront-api-types';
 
 import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
 import {getApiErrorMessage} from '~/lib/utils';
@@ -24,15 +33,6 @@ import {
   PageHeader,
 } from '~/components';
 import {Layout, ProductSwimlane} from '~/components/index.server';
-import type {
-  Collection,
-  CollectionConnection,
-  Customer,
-  MailingAddress,
-  Order,
-  Product,
-  ProductConnection,
-} from '@shopify/hydrogen/storefront-api-types';
 
 export default function Account({response}: HydrogenRouteProps) {
   response.cache(CacheNone());

templates/demo-store/src/routes/account/reset/index.server.ts

@@ -4,6 +4,7 @@ import {
   type HydrogenApiRouteOptions,
   type HydrogenRequest,
 } from '@shopify/hydrogen';
+
 import {getApiErrorMessage} from '~/lib/utils';
 
 /**

templates/demo-store/src/routes/api/bestSellers.server.ts

@@ -1,6 +1,7 @@
 import {gql} from '@shopify/hydrogen';
 import type {HydrogenApiRouteOptions, HydrogenRequest} from '@shopify/hydrogen';
 import {ProductConnection} from '@shopify/hydrogen/storefront-api-types';
+
 import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
 
 export async function api(

templates/demo-store/src/routes/cart.server.tsx

@@ -1,4 +1,5 @@
 import {Seo} from '@shopify/hydrogen';
+
 import {PageHeader, Section, CartDetails} from '~/components';
 import {Layout} from '~/components/index.server';
 

templates/demo-store/src/routes/index.server.tsx

@@ -8,15 +8,15 @@ import {
   useLocalization,
   useShopQuery,
 } from '@shopify/hydrogen';
+import {
+  CollectionConnection,
+  ProductConnection,
+} from '@shopify/hydrogen/storefront-api-types';
 
 import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
 import {getHeroPlaceholder} from '~/lib/placeholders';
 import {FeaturedCollections, Hero} from '~/components';
 import {Layout, ProductSwimlane} from '~/components/index.server';
-import {
-  CollectionConnection,
-  ProductConnection,
-} from '@shopify/hydrogen/storefront-api-types';
 
 export default function Homepage() {
   useServerAnalytics({