Skip to content

Commit d72ff44

Browse files
hta218hta218
authoredDec 16, 2024··
Merge branch 'Weaverse:main' into main
2 parents 1a9e792 + dbdb276 commit d72ff44

16 files changed

+312
-537
lines changed
 

‎app/components/layout/predictive-search/index.tsx

+103-27
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1-
import { MagnifyingGlass } from "@phosphor-icons/react";
1+
import { ArrowRight, MagnifyingGlass, X } from "@phosphor-icons/react";
22
import * as Dialog from "@radix-ui/react-dialog";
33
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
4+
import { useLocation } from "@remix-run/react";
5+
import { type MutableRefObject, useEffect, useState } from "react";
6+
import Link from "~/components/link";
7+
import { usePredictiveSearch } from "~/hooks/use-predictive-search";
48
import { cn } from "~/lib/cn";
5-
import { Input } from "~/modules/input";
6-
import { PredictiveSearchResults } from "./predictive-search-results";
9+
import { PredictiveSearchResult } from "./predictive-search-result";
710
import { PredictiveSearchForm } from "./search-form";
811

912
export function PredictiveSearchButton() {
13+
let [open, setOpen] = useState(false);
14+
let location = useLocation();
15+
16+
// biome-ignore lint/correctness/useExhaustiveDependencies: close the dialog when the location changes, aka when the user navigates to a search result page
17+
useEffect(() => {
18+
setOpen(false);
19+
}, [location]);
20+
1021
return (
11-
<Dialog.Root>
22+
<Dialog.Root open={open} onOpenChange={setOpen}>
1223
<Dialog.Trigger
1324
asChild
1425
className="hidden lg:flex h-8 w-8 items-center justify-center focus-visible:outline-none"
@@ -36,37 +47,102 @@ export function PredictiveSearchButton() {
3647
<VisuallyHidden.Root asChild>
3748
<Dialog.Title>Predictive search</Dialog.Title>
3849
</VisuallyHidden.Root>
39-
<PredictiveSearch />
50+
<div className="relative pt-[--topbar-height]">
51+
<PredictiveSearchForm>
52+
{({ fetchResults, inputRef }) => (
53+
<div className="flex items-center gap-3 w-[560px] max-w-[90vw] mx-auto px-3 my-6 border border-line-subtle">
54+
<MagnifyingGlass className="h-5 w-5 shrink-0 text-gray-500" />
55+
<input
56+
name="q"
57+
type="search"
58+
onChange={(e) => fetchResults(e.target.value)}
59+
onFocus={(e) => fetchResults(e.target.value)}
60+
placeholder="Enter a keyword"
61+
ref={inputRef}
62+
autoComplete="off"
63+
className="focus-visible:outline-none w-full h-full py-4"
64+
/>
65+
<button
66+
type="button"
67+
className="shrink-0 text-gray-500 p-1"
68+
onClick={() => {
69+
if (inputRef.current) {
70+
inputRef.current.value = "";
71+
fetchResults("");
72+
}
73+
}}
74+
>
75+
<X className="w-5 h-5" />
76+
</button>
77+
</div>
78+
)}
79+
</PredictiveSearchForm>
80+
<PredictiveSearchResults />
81+
</div>
4082
</Dialog.Content>
4183
</Dialog.Portal>
4284
</Dialog.Root>
4385
);
4486
}
4587

46-
function PredictiveSearch() {
88+
function PredictiveSearchResults() {
89+
let { results, totalResults, searchTerm } = usePredictiveSearch();
90+
let queries = results?.find(({ type }) => type === "queries");
91+
let articles = results?.find(({ type }) => type === "articles");
92+
let products = results?.find(({ type }) => type === "products");
93+
94+
if (!totalResults) {
95+
return (
96+
<div className="absolute top-full z-10 flex w-full items-center justify-center">
97+
<NoResults searchTerm={searchTerm} />
98+
</div>
99+
);
100+
}
47101
return (
48-
<div className="relative pt-[--topbar-height]">
49-
<PredictiveSearchForm>
50-
{({ fetchResults, inputRef }) => (
51-
<div className="mx-auto w-full max-w-[560px] p-6">
52-
<Input
53-
name="q"
54-
type="search"
55-
onChange={fetchResults}
56-
onFocus={fetchResults}
57-
onClear={fetchResults}
58-
placeholder="Enter a keyword"
59-
ref={inputRef}
60-
autoComplete="off"
61-
prefixElement={
62-
<MagnifyingGlass className="h-5 w-5 shrink-0 text-gray-500" />
63-
}
64-
autoFocus={true}
65-
/>
102+
<div className="absolute left-1/2 top-full z-10 flex w-fit -translate-x-1/2 items-center justify-center">
103+
<div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-[--color-header-bg] p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
104+
<div className="space-y-8">
105+
<div className="flex flex-col gap-4 divide-y divide-line">
106+
<PredictiveSearchResult type="queries" items={queries?.items} />
107+
</div>
108+
<div className="flex flex-col gap-4">
109+
<PredictiveSearchResult type="articles" items={articles?.items} />
66110
</div>
67-
)}
68-
</PredictiveSearchForm>
69-
<PredictiveSearchResults />
111+
</div>
112+
<div className="space-y-6">
113+
<PredictiveSearchResult
114+
type="products"
115+
items={products?.items?.slice(0, 5)}
116+
/>
117+
{searchTerm.current && (
118+
<div>
119+
<Link
120+
to={`/search?q=${searchTerm.current}`}
121+
variant="underline"
122+
className="flex items-center gap-2 w-fit"
123+
>
124+
<span>View all results</span>
125+
<ArrowRight className="w-4 h-4" />
126+
</Link>
127+
</div>
128+
)}
129+
</div>
130+
</div>
70131
</div>
71132
);
72133
}
134+
135+
function NoResults({
136+
searchTerm,
137+
}: {
138+
searchTerm: MutableRefObject<string>;
139+
}) {
140+
if (!searchTerm.current) {
141+
return null;
142+
}
143+
return (
144+
<p className="w-[640px] shadow-header bg-background p-6">
145+
No results found for <q>{searchTerm.current}</q>
146+
</p>
147+
);
148+
}

‎app/components/layout/predictive-search/predictive-search-result.tsx

+91-56
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,118 @@
1-
import { Link } from "@remix-run/react";
21
import clsx from "clsx";
32
import type {
43
NormalizedPredictiveSearchResultItem,
54
NormalizedPredictiveSearchResults,
6-
SearchResultTypeProps,
75
} from "~/types/predictive-search";
8-
import { SearchResultItem } from "./result-item";
6+
import { Image, Money } from "@shopify/hydrogen";
7+
import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
8+
import { Link } from "~/components/link";
9+
import { CompareAtPrice } from "~/components/compare-at-price";
10+
import { getImageAspectRatio, isDiscounted } from "~/lib/utils";
911

10-
export function PredictiveSearchResult({
11-
goToSearchResult,
12-
items,
13-
searchTerm,
14-
type,
15-
}: SearchResultTypeProps) {
12+
type SearchResultTypeProps = {
13+
items?: NormalizedPredictiveSearchResultItem[];
14+
type: NormalizedPredictiveSearchResults[number]["type"];
15+
};
16+
17+
export function PredictiveSearchResult({ items, type }: SearchResultTypeProps) {
1618
let isSuggestions = type === "queries";
17-
let categoryUrl = `/search?q=${
18-
searchTerm.current
19-
}&type=${pluralToSingularSearchType(type)}`;
2019

2120
return (
22-
<div
23-
key={type}
24-
className="predictive-search-result flex flex-col gap-4 divide-y divide-line-subtle"
25-
>
26-
<Link
27-
prefetch="intent"
28-
className="uppercase font-bold"
29-
to={categoryUrl}
30-
onClick={goToSearchResult}
31-
>
21+
<div key={type} className="predictive-search-result flex flex-col gap-4">
22+
<div className="uppercase font-bold border-b border-line-subtle pb-3">
3223
{isSuggestions ? "Suggestions" : type}
33-
</Link>
34-
{items?.length && (
24+
</div>
25+
{items?.length ? (
3526
<ul
3627
className={clsx(
37-
"pt-5",
3828
type === "queries" && "space-y-1",
3929
type === "articles" && "space-y-3",
4030
type === "products" && "space-y-4",
4131
)}
4232
>
4333
{items.map((item: NormalizedPredictiveSearchResultItem) => (
44-
<SearchResultItem
45-
goToSearchResult={goToSearchResult}
46-
item={item}
47-
key={item.id}
48-
/>
34+
<SearchResultItem item={item} key={item.id} />
4935
))}
5036
</ul>
37+
) : (
38+
<div className="text-body-subtle">
39+
No {isSuggestions ? "suggestions" : type} available.
40+
</div>
5141
)}
5242
</div>
5343
);
5444
}
5545

56-
/**
57-
* Converts a plural search type to a singular search type
58-
*
59-
* @example
60-
* ```js
61-
* pluralToSingularSearchType('articles'); // => 'ARTICLE'
62-
* pluralToSingularSearchType(['articles', 'products']); // => 'ARTICLE,PRODUCT'
63-
* ```
64-
*/
65-
function pluralToSingularSearchType(
66-
type:
67-
| NormalizedPredictiveSearchResults[number]["type"]
68-
| Array<NormalizedPredictiveSearchResults[number]["type"]>,
69-
) {
70-
let plural = {
71-
articles: "ARTICLE",
72-
collections: "COLLECTION",
73-
pages: "PAGE",
74-
products: "PRODUCT",
75-
queries: "QUERY",
76-
};
77-
78-
if (typeof type === "string") {
79-
return plural[type];
80-
}
46+
type SearchResultItemProps = {
47+
item: NormalizedPredictiveSearchResultItem;
48+
};
8149

82-
return type.map((t) => plural[t]).join(",");
50+
function SearchResultItem({
51+
item: {
52+
id,
53+
__typename,
54+
image,
55+
compareAtPrice,
56+
price,
57+
title,
58+
url,
59+
vendor,
60+
styledTitle,
61+
},
62+
}: SearchResultItemProps) {
63+
return (
64+
<li key={id}>
65+
<Link
66+
className="flex gap-4"
67+
to={
68+
__typename === "SearchQuerySuggestion" || !url
69+
? `/search?q=${id}`
70+
: url
71+
}
72+
data-type={__typename}
73+
>
74+
{__typename === "Product" && (
75+
<div className="h-20 w-20 shrink-0">
76+
{image?.url && (
77+
<Image
78+
alt={image.altText ?? ""}
79+
src={image.url}
80+
width={200}
81+
height={200}
82+
aspectRatio={getImageAspectRatio(image, "adapt")}
83+
className="h-full w-full object-cover object-center animate-fade-in"
84+
/>
85+
)}
86+
</div>
87+
)}
88+
<div className="space-y-1">
89+
{vendor && (
90+
<div className="text-body-subtle text-sm">By {vendor}</div>
91+
)}
92+
{styledTitle ? (
93+
<div
94+
className="reveal-underline"
95+
dangerouslySetInnerHTML={{ __html: styledTitle }}
96+
/>
97+
) : (
98+
<div
99+
className={clsx(
100+
__typename === "Product" ? "line-clamp-1" : "line-clamp-2",
101+
)}
102+
>
103+
<span className="reveal-underline">{title}</span>
104+
</div>
105+
)}
106+
{price && (
107+
<div className="flex gap-2 text-sm">
108+
<Money withoutTrailingZeros data={price as MoneyV2} />
109+
{isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
110+
<CompareAtPrice data={compareAtPrice as MoneyV2} />
111+
)}
112+
</div>
113+
)}
114+
</div>
115+
</Link>
116+
</li>
117+
);
83118
}

0 commit comments

Comments
 (0)
Please sign in to comment.