@shopify/create-hydrogen 4.3.13 → 5.0.0

package/dist/assets/hydrogen/starter/app/components/Search.tsx

@@ -0,0 +1,514 @@
+import {
+  Link,
+  Form,
+  useParams,
+  useFetcher,
+  type FormProps,
+} from '@remix-run/react';
+import {Image, Money, Pagination} from '@shopify/hydrogen';
+import React, {useRef, useEffect} from 'react';
+import {applyTrackingParams} from '~/lib/search';
+
+import type {
+  PredictiveProductFragment,
+  PredictiveCollectionFragment,
+  PredictiveArticleFragment,
+  SearchQuery,
+} from 'storefrontapi.generated';
+
+import type {PredictiveSearchAPILoader} from '../routes/api.predictive-search';
+
+type PredicticeSearchResultItemImage =
+  | PredictiveCollectionFragment['image']
+  | PredictiveArticleFragment['image']
+  | PredictiveProductFragment['variants']['nodes'][0]['image'];
+
+type PredictiveSearchResultItemPrice =
+  | PredictiveProductFragment['variants']['nodes'][0]['price'];
+
+export type NormalizedPredictiveSearchResultItem = {
+  __typename: string | undefined;
+  handle: string;
+  id: string;
+  image?: PredicticeSearchResultItemImage;
+  price?: PredictiveSearchResultItemPrice;
+  styledTitle?: string;
+  title: string;
+  url: string;
+};
+
+export type NormalizedPredictiveSearchResults = Array<
+  | {type: 'queries'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'products'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'collections'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'pages'; items: Array<NormalizedPredictiveSearchResultItem>}
+  | {type: 'articles'; items: Array<NormalizedPredictiveSearchResultItem>}
+>;
+
+export type NormalizedPredictiveSearch = {
+  results: NormalizedPredictiveSearchResults;
+  totalResults: number;
+};
+
+type FetchSearchResultsReturn = {
+  searchResults: {
+    results: SearchQuery | null;
+    totalResults: number;
+  };
+  searchTerm: string;
+};
+
+export const NO_PREDICTIVE_SEARCH_RESULTS: NormalizedPredictiveSearchResults = [
+  {type: 'queries', items: []},
+  {type: 'products', items: []},
+  {type: 'collections', items: []},
+  {type: 'pages', items: []},
+  {type: 'articles', items: []},
+];
+
+export function SearchForm({searchTerm}: {searchTerm: string}) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // focus the input when cmd+k is pressed
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'k' && event.metaKey) {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+
+      if (event.key === 'Escape') {
+        inputRef.current?.blur();
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <Form method="get">
+      <input
+        defaultValue={searchTerm}
+        name="q"
+        placeholder="Search…"
+        ref={inputRef}
+        type="search"
+      />
+      &nbsp;
+      <button type="submit">Search</button>
+    </Form>
+  );
+}
+
+export function SearchResults({
+  results,
+  searchTerm,
+}: Pick<FetchSearchResultsReturn['searchResults'], 'results'> & {
+  searchTerm: string;
+}) {
+  if (!results) {
+    return null;
+  }
+  const keys = Object.keys(results) as Array<keyof typeof results>;
+  return (
+    <div>
+      {results &&
+        keys.map((type) => {
+          const resourceResults = results[type];
+
+          if (resourceResults.nodes[0]?.__typename === 'Page') {
+            const pageResults = resourceResults as SearchQuery['pages'];
+            return resourceResults.nodes.length ? (
+              <SearchResultPageGrid key="pages" pages={pageResults} />
+            ) : null;
+          }
+
+          if (resourceResults.nodes[0]?.__typename === 'Product') {
+            const productResults = resourceResults as SearchQuery['products'];
+            return resourceResults.nodes.length ? (
+              <SearchResultsProductsGrid
+                key="products"
+                products={productResults}
+                searchTerm={searchTerm}
+              />
+            ) : null;
+          }
+
+          if (resourceResults.nodes[0]?.__typename === 'Article') {
+            const articleResults = resourceResults as SearchQuery['articles'];
+            return resourceResults.nodes.length ? (
+              <SearchResultArticleGrid
+                key="articles"
+                articles={articleResults}
+              />
+            ) : null;
+          }
+
+          return null;
+        })}
+    </div>
+  );
+}
+
+function SearchResultsProductsGrid({
+  products,
+  searchTerm,
+}: Pick<SearchQuery, 'products'> & {searchTerm: string}) {
+  return (
+    <div className="search-result">
+      <h2>Products</h2>
+      <Pagination connection={products}>
+        {({nodes, isLoading, NextLink, PreviousLink}) => {
+          const ItemsMarkup = nodes.map((product) => {
+            const trackingParams = applyTrackingParams(
+              product,
+              `q=${encodeURIComponent(searchTerm)}`,
+            );
+
+            return (
+              <div className="search-results-item" key={product.id}>
+                <Link
+                  prefetch="intent"
+                  to={`/products/${product.handle}${trackingParams}`}
+                >
+                  {product.variants.nodes[0].image && (
+                    <Image
+                      data={product.variants.nodes[0].image}
+                      alt={product.title}
+                      width={50}
+                    />
+                  )}
+                  <div>
+                    <p>{product.title}</p>
+                    <small>
+                      <Money data={product.variants.nodes[0].price} />
+                    </small>
+                  </div>
+                </Link>
+              </div>
+            );
+          });
+          return (
+            <div>
+              <div>
+                <PreviousLink>
+                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+                </PreviousLink>
+              </div>
+              <div>
+                {ItemsMarkup}
+                <br />
+              </div>
+              <div>
+                <NextLink>
+                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+                </NextLink>
+              </div>
+            </div>
+          );
+        }}
+      </Pagination>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultPageGrid({pages}: Pick<SearchQuery, 'pages'>) {
+  return (
+    <div className="search-result">
+      <h2>Pages</h2>
+      <div>
+        {pages?.nodes?.map((page) => (
+          <div className="search-results-item" key={page.id}>
+            <Link prefetch="intent" to={`/pages/${page.handle}`}>
+              {page.title}
+            </Link>
+          </div>
+        ))}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultArticleGrid({articles}: Pick<SearchQuery, 'articles'>) {
+  return (
+    <div className="search-result">
+      <h2>Articles</h2>
+      <div>
+        {articles?.nodes?.map((article) => (
+          <div className="search-results-item" key={article.id}>
+            <Link prefetch="intent" to={`/blogs/${article.handle}`}>
+              {article.title}
+            </Link>
+          </div>
+        ))}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+export function NoSearchResults() {
+  return <p>No results, try a different search.</p>;
+}
+
+type ChildrenRenderProps = {
+  fetchResults: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  fetcher: ReturnType<typeof useFetcher<PredictiveSearchAPILoader>>;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+};
+
+type SearchFromProps = {
+  action?: FormProps['action'];
+  className?: string;
+  children: (passedProps: ChildrenRenderProps) => React.ReactNode;
+  [key: string]: unknown;
+};
+
+/**
+ *  Search form component that sends search requests to the `/search` route
+ **/
+export function PredictiveSearchForm({
+  action,
+  children,
+  className = 'predictive-search-form',
+  ...props
+}: SearchFromProps) {
+  const params = useParams();
+  const fetcher = useFetcher<PredictiveSearchAPILoader>({
+    key: 'search',
+  });
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
+    const searchAction = action ?? '/api/predictive-search';
+    const newSearchTerm = event.target.value || '';
+    const localizedAction = params.locale
+      ? `/${params.locale}${searchAction}`
+      : searchAction;
+
+    fetcher.submit(
+      {q: newSearchTerm, limit: '6'},
+      {method: 'GET', action: localizedAction},
+    );
+  }
+
+  // ensure the passed input has a type of search, because SearchResults
+  // will select the element based on the input
+  useEffect(() => {
+    inputRef?.current?.setAttribute('type', 'search');
+  }, []);
+
+  return (
+    <fetcher.Form
+      {...props}
+      className={className}
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!inputRef?.current || inputRef.current.value === '') {
+          return;
+        }
+        inputRef.current.blur();
+      }}
+    >
+      {children({fetchResults, inputRef, fetcher})}
+    </fetcher.Form>
+  );
+}
+
+export function PredictiveSearchResults() {
+  const {results, totalResults, searchInputRef, searchTerm, state} =
+    usePredictiveSearch();
+
+  function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
+    if (!searchInputRef.current) return;
+    searchInputRef.current.blur();
+    searchInputRef.current.value = '';
+    // close the aside
+    window.location.href = event.currentTarget.href;
+  }
+
+  if (state === 'loading') {
+    return <div>Loading...</div>;
+  }
+
+  if (!totalResults) {
+    return <NoPredictiveSearchResults searchTerm={searchTerm} />;
+  }
+
+  return (
+    <div className="predictive-search-results">
+      <div>
+        {results.map(({type, items}) => (
+          <PredictiveSearchResult
+            goToSearchResult={goToSearchResult}
+            items={items}
+            key={type}
+            searchTerm={searchTerm}
+            type={type}
+          />
+        ))}
+      </div>
+      {searchTerm.current && (
+        <Link onClick={goToSearchResult} to={`/search?q=${searchTerm.current}`}>
+          <p>
+            View all results for <q>{searchTerm.current}</q>
+            &nbsp; →
+          </p>
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function NoPredictiveSearchResults({
+  searchTerm,
+}: {
+  searchTerm: React.MutableRefObject<string>;
+}) {
+  if (!searchTerm.current) {
+    return null;
+  }
+  return (
+    <p>
+      No results found for <q>{searchTerm.current}</q>
+    </p>
+  );
+}
+
+type SearchResultTypeProps = {
+  goToSearchResult: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  items: NormalizedPredictiveSearchResultItem[];
+  searchTerm: UseSearchReturn['searchTerm'];
+  type: NormalizedPredictiveSearchResults[number]['type'];
+};
+
+function PredictiveSearchResult({
+  goToSearchResult,
+  items,
+  searchTerm,
+  type,
+}: SearchResultTypeProps) {
+  const isSuggestions = type === 'queries';
+  const categoryUrl = `/search?q=${
+    searchTerm.current
+  }&type=${pluralToSingularSearchType(type)}`;
+
+  return (
+    <div className="predictive-search-result" key={type}>
+      <Link prefetch="intent" to={categoryUrl} onClick={goToSearchResult}>
+        <h5>{isSuggestions ? 'Suggestions' : type}</h5>
+      </Link>
+      <ul>
+        {items.map((item: NormalizedPredictiveSearchResultItem) => (
+          <SearchResultItem
+            goToSearchResult={goToSearchResult}
+            item={item}
+            key={item.id}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+type SearchResultItemProps = Pick<SearchResultTypeProps, 'goToSearchResult'> & {
+  item: NormalizedPredictiveSearchResultItem;
+};
+
+function SearchResultItem({goToSearchResult, item}: SearchResultItemProps) {
+  return (
+    <li className="predictive-search-result-item" key={item.id}>
+      <Link onClick={goToSearchResult} to={item.url}>
+        {item.image?.url && (
+          <Image
+            alt={item.image.altText ?? ''}
+            src={item.image.url}
+            width={50}
+            height={50}
+          />
+        )}
+        <div>
+          {item.styledTitle ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: item.styledTitle,
+              }}
+            />
+          ) : (
+            <span>{item.title}</span>
+          )}
+          {item?.price && (
+            <small>
+              <Money data={item.price} />
+            </small>
+          )}
+        </div>
+      </Link>
+    </li>
+  );
+}
+
+type UseSearchReturn = NormalizedPredictiveSearch & {
+  searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
+  searchTerm: React.MutableRefObject<string>;
+  state: ReturnType<typeof useFetcher<PredictiveSearchAPILoader>>['state'];
+};
+
+function usePredictiveSearch(): UseSearchReturn {
+  const searchFetcher = useFetcher<FetchSearchResultsReturn>({key: 'search'});
+  const searchTerm = useRef<string>('');
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+  if (searchFetcher?.state === 'loading') {
+    searchTerm.current = (searchFetcher.formData?.get('q') || '') as string;
+  }
+
+  const search = (searchFetcher?.data?.searchResults || {
+    results: NO_PREDICTIVE_SEARCH_RESULTS,
+    totalResults: 0,
+  }) as NormalizedPredictiveSearch;
+
+  // capture the search input element as a ref
+  useEffect(() => {
+    if (searchInputRef.current) return;
+    searchInputRef.current = document.querySelector('input[type="search"]');
+  }, []);
+
+  return {...search, searchInputRef, searchTerm, state: searchFetcher.state};
+}
+
+/**
+ * Converts a plural search type to a singular search type
+ *
+ * @example
+ * ```js
+ * pluralToSingularSearchType('articles'); // => 'ARTICLE'
+ * pluralToSingularSearchType(['articles', 'products']); // => 'ARTICLE,PRODUCT'
+ * ```
+ */
+function pluralToSingularSearchType(
+  type:
+    | NormalizedPredictiveSearchResults[number]['type']
+    | Array<NormalizedPredictiveSearchResults[number]['type']>,
+) {
+  const plural = {
+    articles: 'ARTICLE',
+    collections: 'COLLECTION',
+    pages: 'PAGE',
+    products: 'PRODUCT',
+    queries: 'QUERY',
+  };
+
+  if (typeof type === 'string') {
+    return plural[type];
+  }
+
+  return type.map((t) => plural[t]).join(',');
+}

package/dist/assets/hydrogen/starter/app/entry.client.tsx

@@ -0,0 +1,12 @@
+import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
+import {hydrateRoot} from 'react-dom/client';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

package/dist/assets/hydrogen/starter/app/entry.server.tsx

@@ -0,0 +1,47 @@
+import type {EntryContext, AppLoadContext} from '@shopify/remix-oxygen';
+import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  context: AppLoadContext,
+) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+    shop: {
+      checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
+      storeDomain: context.env.PUBLIC_STORE_DOMAIN,
+    }
+  });
+
+  const body = await renderToReadableStream(
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
+    {
+      nonce,
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerAddressMutations.ts

@@ -0,0 +1,61 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressUpdate
+export const UPDATE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressUpdate(
+    $address: CustomerAddressInput!
+    $addressId: ID!
+    $defaultAddress: Boolean
+ ) {
+    customerAddressUpdate(
+      address: $address
+      addressId: $addressId
+      defaultAddress: $defaultAddress
+    ) {
+      customerAddress {
+        id
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressDelete
+export const DELETE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressDelete(
+    $addressId: ID!,
+  ) {
+    customerAddressDelete(addressId: $addressId) {
+      deletedAddressId
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/mutations/customerAddressCreate
+export const CREATE_ADDRESS_MUTATION = `#graphql
+  mutation customerAddressCreate(
+    $address: CustomerAddressInput!
+    $defaultAddress: Boolean
+  ) {
+    customerAddressCreate(
+      address: $address
+      defaultAddress: $defaultAddress
+    ) {
+      customerAddress {
+        id
+      }
+      userErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;

package/dist/assets/hydrogen/starter/app/graphql/customer-account/CustomerDetailsQuery.ts

@@ -0,0 +1,40 @@
+// NOTE: https://shopify.dev/docs/api/customer/latest/objects/Customer
+export const CUSTOMER_FRAGMENT = `#graphql
+  fragment Customer on Customer {
+    id
+    firstName
+    lastName
+    defaultAddress {
+      ...Address
+    }
+    addresses(first: 6) {
+      nodes {
+        ...Address
+      }
+    }
+  }
+  fragment Address on CustomerAddress {
+    id
+    formatted
+    firstName
+    lastName
+    company
+    address1
+    address2
+    territoryCode
+    zoneCode
+    city
+    zip
+    phoneNumber
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/customer/latest/queries/customer
+export const CUSTOMER_DETAILS_QUERY = `#graphql
+  query CustomerDetails {
+    customer {
+      ...Customer
+    }
+  }
+  ${CUSTOMER_FRAGMENT}
+` as const;