hydrogen-forge 0.1.0

package/templates/starter/app/components/SearchFormPredictive.tsx

@@ -0,0 +1,76 @@
+import {
+  useFetcher,
+  useNavigate,
+  type FormProps,
+  type Fetcher,
+} from 'react-router';
+import React, {useRef, useEffect} from 'react';
+import type {PredictiveSearchReturn} from '~/lib/search';
+import {useAside} from './Aside';
+
+type SearchFormPredictiveChildren = (args: {
+  fetchResults: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  goToSearch: () => void;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  fetcher: Fetcher<PredictiveSearchReturn>;
+}) => React.ReactNode;
+
+type SearchFormPredictiveProps = Omit<FormProps, 'children'> & {
+  children: SearchFormPredictiveChildren | null;
+};
+
+export const SEARCH_ENDPOINT = '/search';
+
+/**
+ *  Search form component that sends search requests to the `/search` route
+ **/
+export function SearchFormPredictive({
+  children,
+  className = 'predictive-search-form',
+  ...props
+}: SearchFormPredictiveProps) {
+  const fetcher = useFetcher<PredictiveSearchReturn>({key: 'search'});
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
+  const aside = useAside();
+
+  /** Reset the input value and blur the input */
+  function resetInput(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (inputRef?.current?.value) {
+      inputRef.current.blur();
+    }
+  }
+
+  /** Navigate to the search page with the current input value */
+  function goToSearch() {
+    const term = inputRef?.current?.value;
+    void navigate(SEARCH_ENDPOINT + (term ? `?q=${term}` : ''));
+    aside.close();
+  }
+
+  /** Fetch search results based on the input value */
+  function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
+    void fetcher.submit(
+      {q: event.target.value || '', limit: 5, predictive: true},
+      {method: 'GET', action: SEARCH_ENDPOINT},
+    );
+  }
+
+  // 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');
+  }, []);
+
+  if (typeof children !== 'function') {
+    return null;
+  }
+
+  return (
+    <fetcher.Form {...props} className={className} onSubmit={resetInput}>
+      {children({inputRef, fetcher, fetchResults, goToSearch})}
+    </fetcher.Form>
+  );
+}

package/templates/starter/app/components/SearchResults.tsx

@@ -0,0 +1,161 @@
+import {Link} from 'react-router';
+import {Image, Money, Pagination} from '@shopify/hydrogen';
+import {urlWithTrackingParams, type RegularSearchReturn} from '~/lib/search';
+
+type SearchItems = RegularSearchReturn['result']['items'];
+type PartialSearchResult<ItemType extends keyof SearchItems> = Pick<
+  SearchItems,
+  ItemType
+> &
+  Pick<RegularSearchReturn, 'term'>;
+
+type SearchResultsProps = RegularSearchReturn & {
+  children: (args: SearchItems & {term: string}) => React.ReactNode;
+};
+
+export function SearchResults({
+  term,
+  result,
+  children,
+}: Omit<SearchResultsProps, 'error' | 'type'>) {
+  if (!result?.total) {
+    return null;
+  }
+
+  return children({...result.items, term});
+}
+
+SearchResults.Articles = SearchResultsArticles;
+SearchResults.Pages = SearchResultsPages;
+SearchResults.Products = SearchResultsProducts;
+SearchResults.Empty = SearchResultsEmpty;
+
+function SearchResultsArticles({
+  term,
+  articles,
+}: PartialSearchResult<'articles'>) {
+  if (!articles?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Articles</h2>
+      <div>
+        {articles?.nodes?.map((article) => {
+          const articleUrl = urlWithTrackingParams({
+            baseUrl: `/blogs/${article.handle}`,
+            trackingParams: article.trackingParameters,
+            term,
+          });
+
+          return (
+            <div className="search-results-item" key={article.id}>
+              <Link prefetch="intent" to={articleUrl}>
+                {article.title}
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultsPages({term, pages}: PartialSearchResult<'pages'>) {
+  if (!pages?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Pages</h2>
+      <div>
+        {pages?.nodes?.map((page) => {
+          const pageUrl = urlWithTrackingParams({
+            baseUrl: `/pages/${page.handle}`,
+            trackingParams: page.trackingParameters,
+            term,
+          });
+
+          return (
+            <div className="search-results-item" key={page.id}>
+              <Link prefetch="intent" to={pageUrl}>
+                {page.title}
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+      <br />
+    </div>
+  );
+}
+
+function SearchResultsProducts({
+  term,
+  products,
+}: PartialSearchResult<'products'>) {
+  if (!products?.nodes.length) {
+    return null;
+  }
+
+  return (
+    <div className="search-result">
+      <h2>Products</h2>
+      <Pagination connection={products}>
+        {({nodes, isLoading, NextLink, PreviousLink}) => {
+          const ItemsMarkup = nodes.map((product) => {
+            const productUrl = urlWithTrackingParams({
+              baseUrl: `/products/${product.handle}`,
+              trackingParams: product.trackingParameters,
+              term,
+            });
+
+            const price = product?.selectedOrFirstAvailableVariant?.price;
+            const image = product?.selectedOrFirstAvailableVariant?.image;
+
+            return (
+              <div className="search-results-item" key={product.id}>
+                <Link prefetch="intent" to={productUrl}>
+                  {image && (
+                    <Image data={image} alt={product.title} width={50} />
+                  )}
+                  <div>
+                    <p>{product.title}</p>
+                    <small>{price && <Money data={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 SearchResultsEmpty() {
+  return <p>No results, try a different search.</p>;
+}

package/templates/starter/app/components/SearchResultsPredictive.tsx

@@ -0,0 +1,461 @@
+import {Link, useFetcher, type Fetcher} from 'react-router';
+import {Image, Money} from '@shopify/hydrogen';
+import React, {useRef, useEffect} from 'react';
+import {
+  getEmptyPredictiveSearchResult,
+  urlWithTrackingParams,
+  type PredictiveSearchReturn,
+} from '~/lib/search';
+import {useAside} from './Aside';
+
+type PredictiveSearchItems = PredictiveSearchReturn['result']['items'];
+
+type UsePredictiveSearchReturn = {
+  term: React.MutableRefObject<string>;
+  total: number;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  items: PredictiveSearchItems;
+  fetcher: Fetcher<PredictiveSearchReturn>;
+};
+
+type SearchResultsPredictiveArgs = Pick<
+  UsePredictiveSearchReturn,
+  'term' | 'total' | 'inputRef' | 'items'
+> & {
+  state: Fetcher['state'];
+  closeSearch: () => void;
+};
+
+type PartialPredictiveSearchResult<
+  ItemType extends keyof PredictiveSearchItems,
+  ExtraProps extends keyof SearchResultsPredictiveArgs = 'term' | 'closeSearch',
+> = Pick<PredictiveSearchItems, ItemType> &
+  Pick<SearchResultsPredictiveArgs, ExtraProps>;
+
+type SearchResultsPredictiveProps = {
+  children: (args: SearchResultsPredictiveArgs) => React.ReactNode;
+};
+
+/**
+ * Component that renders predictive search results
+ */
+export function SearchResultsPredictive({
+  children,
+}: SearchResultsPredictiveProps) {
+  const aside = useAside();
+  const {term, inputRef, fetcher, total, items} = usePredictiveSearch();
+
+  /*
+   * Utility that resets the search input
+   */
+  function resetInput() {
+    if (inputRef.current) {
+      inputRef.current.blur();
+      inputRef.current.value = '';
+    }
+  }
+
+  /**
+   * Utility that resets the search input and closes the search aside
+   */
+  function closeSearch() {
+    resetInput();
+    aside.close();
+  }
+
+  return children({
+    items,
+    closeSearch,
+    inputRef,
+    state: fetcher.state,
+    term,
+    total,
+  });
+}
+
+SearchResultsPredictive.Articles = SearchResultsPredictiveArticles;
+SearchResultsPredictive.Collections = SearchResultsPredictiveCollections;
+SearchResultsPredictive.Pages = SearchResultsPredictivePages;
+SearchResultsPredictive.Products = SearchResultsPredictiveProducts;
+SearchResultsPredictive.Queries = SearchResultsPredictiveQueries;
+SearchResultsPredictive.Empty = SearchResultsPredictiveEmpty;
+
+function SearchResultsPredictiveArticles({
+  term,
+  articles,
+  closeSearch,
+}: PartialPredictiveSearchResult<'articles'>) {
+  if (!articles.length) return null;
+
+  return (
+    <div className="py-3" key="articles">
+      <h5 className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wide text-secondary-500">
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+          />
+        </svg>
+        Articles
+      </h5>
+      <ul className="space-y-1">
+        {articles.map((article) => {
+          const articleUrl = urlWithTrackingParams({
+            baseUrl: `/blogs/${article.blog.handle}/${article.handle}`,
+            trackingParams: article.trackingParameters,
+            term: term.current ?? '',
+          });
+
+          return (
+            <li key={article.id}>
+              <Link
+                onClick={closeSearch}
+                to={articleUrl}
+                className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary-100"
+              >
+                {article.image?.url && (
+                  <div className="h-10 w-10 flex-shrink-0 overflow-hidden rounded-md bg-secondary-100">
+                    <Image
+                      alt={article.image.altText ?? ''}
+                      src={article.image.url}
+                      width={40}
+                      height={40}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                )}
+                <span className="truncate text-sm font-medium text-secondary-900">
+                  {article.title}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveCollections({
+  term,
+  collections,
+  closeSearch,
+}: PartialPredictiveSearchResult<'collections'>) {
+  if (!collections.length) return null;
+
+  return (
+    <div className="py-3" key="collections">
+      <h5 className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wide text-secondary-500">
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+          />
+        </svg>
+        Collections
+      </h5>
+      <ul className="space-y-1">
+        {collections.map((collection) => {
+          const collectionUrl = urlWithTrackingParams({
+            baseUrl: `/collections/${collection.handle}`,
+            trackingParams: collection.trackingParameters,
+            term: term.current,
+          });
+
+          return (
+            <li key={collection.id}>
+              <Link
+                onClick={closeSearch}
+                to={collectionUrl}
+                className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary-100"
+              >
+                {collection.image?.url ? (
+                  <div className="h-10 w-10 flex-shrink-0 overflow-hidden rounded-md bg-secondary-100">
+                    <Image
+                      alt={collection.image.altText ?? ''}
+                      src={collection.image.url}
+                      width={40}
+                      height={40}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-secondary-100">
+                    <svg
+                      className="h-5 w-5 text-secondary-400"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={1.5}
+                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                      />
+                    </svg>
+                  </div>
+                )}
+                <span className="truncate text-sm font-medium text-secondary-900">
+                  {collection.title}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictivePages({
+  term,
+  pages,
+  closeSearch,
+}: PartialPredictiveSearchResult<'pages'>) {
+  if (!pages.length) return null;
+
+  return (
+    <div className="py-3" key="pages">
+      <h5 className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wide text-secondary-500">
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+        Pages
+      </h5>
+      <ul className="space-y-1">
+        {pages.map((page) => {
+          const pageUrl = urlWithTrackingParams({
+            baseUrl: `/pages/${page.handle}`,
+            trackingParams: page.trackingParameters,
+            term: term.current,
+          });
+
+          return (
+            <li key={page.id}>
+              <Link
+                onClick={closeSearch}
+                to={pageUrl}
+                className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary-100"
+              >
+                <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-secondary-100">
+                  <svg
+                    className="h-5 w-5 text-secondary-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1.5}
+                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    />
+                  </svg>
+                </div>
+                <span className="truncate text-sm font-medium text-secondary-900">
+                  {page.title}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveProducts({
+  term,
+  products,
+  closeSearch,
+}: PartialPredictiveSearchResult<'products'>) {
+  if (!products.length) return null;
+
+  return (
+    <div className="py-3" key="products">
+      <h5 className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold uppercase tracking-wide text-secondary-500">
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+          />
+        </svg>
+        Products
+      </h5>
+      <ul className="space-y-1">
+        {products.map((product) => {
+          const productUrl = urlWithTrackingParams({
+            baseUrl: `/products/${product.handle}`,
+            trackingParams: product.trackingParameters,
+            term: term.current,
+          });
+
+          const price = product?.selectedOrFirstAvailableVariant?.price;
+          const image = product?.selectedOrFirstAvailableVariant?.image;
+
+          return (
+            <li key={product.id}>
+              <Link
+                to={productUrl}
+                onClick={closeSearch}
+                className="flex items-center gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-secondary-100"
+              >
+                {image ? (
+                  <div className="h-10 w-10 flex-shrink-0 overflow-hidden rounded-md bg-secondary-100">
+                    <Image
+                      alt={image.altText ?? ''}
+                      src={image.url}
+                      width={40}
+                      height={40}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-secondary-100">
+                    <svg
+                      className="h-5 w-5 text-secondary-400"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={1.5}
+                        d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
+                      />
+                    </svg>
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-secondary-900">
+                    {product.title}
+                  </p>
+                  {price && (
+                    <p className="text-sm text-secondary-500">
+                      <Money data={price} />
+                    </p>
+                  )}
+                </div>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function SearchResultsPredictiveQueries({
+  queries,
+  queriesDatalistId,
+}: PartialPredictiveSearchResult<'queries', never> & {
+  queriesDatalistId: string;
+}) {
+  if (!queries.length) return null;
+
+  return (
+    <datalist id={queriesDatalistId}>
+      {queries.map((suggestion) => {
+        if (!suggestion) return null;
+
+        return <option key={suggestion.text} value={suggestion.text} />;
+      })}
+    </datalist>
+  );
+}
+
+function SearchResultsPredictiveEmpty({
+  term,
+}: {
+  term: React.MutableRefObject<string>;
+}) {
+  if (!term.current) {
+    return null;
+  }
+
+  return (
+    <div className="px-4 py-8 text-center">
+      <svg
+        className="mx-auto h-10 w-10 text-secondary-300"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+      <p className="mt-3 text-sm text-secondary-500">
+        No results found for{' '}
+        <span className="font-medium text-secondary-700">
+          &ldquo;{term.current}&rdquo;
+        </span>
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Hook that returns the predictive search results and fetcher and input ref.
+ * @example
+ * '''ts
+ * const { items, total, inputRef, term, fetcher } = usePredictiveSearch();
+ * '''
+ **/
+function usePredictiveSearch(): UsePredictiveSearchReturn {
+  const fetcher = useFetcher<PredictiveSearchReturn>({key: 'search'});
+  const term = useRef<string>('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  if (fetcher?.state === 'loading') {
+    term.current = String(fetcher.formData?.get('q') || '');
+  }
+
+  // capture the search input element as a ref
+  useEffect(() => {
+    if (!inputRef.current) {
+      inputRef.current = document.querySelector('input[type="search"]');
+    }
+  }, []);
+
+  const {items, total} =
+    fetcher?.data?.result ?? getEmptyPredictiveSearchResult();
+
+  return {items, total, inputRef, term, fetcher};
+}