@86d-app/search 0.0.23 → 0.0.25

package/dist/modules/search/src/service.js

@@ -0,0 +1 @@
+export {};

package/dist/modules/search/src/store/components/_hooks.js

@@ -0,0 +1,10 @@
+"use client";
+import { useModuleClient } from "@86d-app/core/client";
+export function useSearchApi() {
+    const client = useModuleClient();
+    return {
+        search: client.module("search").store["/search"],
+        suggest: client.module("search").store["/search/suggest"],
+        recent: client.module("search").store["/search/recent"],
+    };
+}

package/dist/modules/search/src/store/components/index.jsx

@@ -0,0 +1,9 @@
+"use client";
+import { SearchBar } from "./search-bar";
+import { SearchPage } from "./search-page";
+import { SearchResults } from "./search-results";
+export default {
+    SearchBar,
+    SearchResults,
+    SearchPage,
+};

package/dist/modules/search/src/store/components/search-bar.jsx

@@ -0,0 +1,91 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSearchApi } from "./_hooks";
+export function SearchBar({ placeholder = "Search...", onSearch, }) {
+    const api = useSearchApi();
+    const [query, setQuery] = useState("");
+    const [suggestions, setSuggestions] = useState([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const { data: suggestData } = query.trim().length >= 2
+        ? api.suggest.useQuery({ q: query.trim(), limit: "8" })
+        : { data: undefined };
+    useEffect(() => {
+        if (suggestData?.suggestions) {
+            setSuggestions(suggestData.suggestions);
+        }
+        else {
+            setSuggestions([]);
+        }
+    }, [suggestData]);
+    const handleSubmit = useCallback((term) => {
+        const trimmed = term.trim();
+        if (trimmed.length === 0)
+            return;
+        setShowSuggestions(false);
+        setSelectedIndex(-1);
+        onSearch?.(trimmed);
+    }, [onSearch]);
+    const handleKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setSelectedIndex((i) => Math.min(i + 1, suggestions.length - 1));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setSelectedIndex((i) => Math.max(i - 1, -1));
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (selectedIndex >= 0 && suggestions[selectedIndex]) {
+                setQuery(suggestions[selectedIndex]);
+                handleSubmit(suggestions[selectedIndex]);
+            }
+            else {
+                handleSubmit(query);
+            }
+        }
+        else if (e.key === "Escape") {
+            setShowSuggestions(false);
+            setSelectedIndex(-1);
+        }
+    };
+    // Close suggestions on click outside
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, []);
+    return (<div ref={containerRef} className="relative w-full">
+			<div className="relative">
+				<svg className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" aria-hidden="true">
+					<title>Search</title>
+					<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
+				</svg>
+				<input ref={inputRef} type="search" value={query} onChange={(e) => {
+            setQuery(e.target.value);
+            setShowSuggestions(true);
+            setSelectedIndex(-1);
+        }} onFocus={() => setShowSuggestions(true)} onKeyDown={handleKeyDown} placeholder={placeholder} className="w-full rounded-lg border border-border bg-background py-2.5 pr-4 pl-10 text-foreground text-sm placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" aria-label="Search" aria-autocomplete="list" aria-expanded={showSuggestions && suggestions.length > 0} role="combobox"/>
+			</div>
+
+			{showSuggestions && suggestions.length > 0 && (<div role="listbox" className="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-background shadow-lg">
+					{suggestions.map((suggestion, index) => (<div key={suggestion} role="option" tabIndex={-1} aria-selected={index === selectedIndex} className={`cursor-pointer px-4 py-2 text-sm ${index === selectedIndex
+                    ? "bg-muted text-foreground"
+                    : "text-foreground hover:bg-muted/50"}`} onMouseDown={(e) => {
+                    e.preventDefault();
+                    setQuery(suggestion);
+                    handleSubmit(suggestion);
+                }} onMouseEnter={() => setSelectedIndex(index)}>
+							{suggestion}
+						</div>))}
+				</div>)}
+		</div>);
+}

package/dist/modules/search/src/store/components/search-page.jsx

@@ -0,0 +1,17 @@
+"use client";
+import { useCallback, useState } from "react";
+import { SearchBar } from "./search-bar";
+import { SearchResults } from "./search-results";
+export function SearchPage({ sessionId }) {
+    const [query, setQuery] = useState("");
+    const handleSearch = useCallback((term) => {
+        setQuery(term);
+    }, []);
+    return (<div className="mx-auto max-w-2xl px-4 py-8">
+			<h1 className="mb-6 font-semibold text-2xl text-foreground">Search</h1>
+			<SearchBar placeholder="Search products, articles..." onSearch={handleSearch}/>
+			<div className="mt-6">
+				<SearchResults query={query} sessionId={sessionId}/>
+			</div>
+		</div>);
+}

package/dist/modules/search/src/store/components/search-results.jsx

@@ -0,0 +1,51 @@
+"use client";
+import { useSearchApi } from "./_hooks";
+export function SearchResults({ query, entityType, sessionId, limit = 20, }) {
+    const api = useSearchApi();
+    const { data, isLoading } = query.trim().length > 0
+        ? api.search.useQuery({
+            q: query.trim(),
+            type: entityType,
+            limit: String(limit),
+            sessionId,
+        })
+        : { data: undefined, isLoading: false };
+    const results = data?.results ?? [];
+    const total = data?.total ?? 0;
+    if (!query.trim())
+        return null;
+    if (isLoading) {
+        return (<div className="py-12 text-center">
+				<div className="mx-auto h-6 w-6 animate-spin rounded-full border-2 border-muted border-t-foreground"/>
+				<p className="mt-3 text-muted-foreground text-sm">Searching...</p>
+			</div>);
+    }
+    if (results.length === 0) {
+        return (<div className="py-12 text-center">
+				<p className="text-foreground">
+					No results found for &ldquo;{query}&rdquo;
+				</p>
+				<p className="mt-1 text-muted-foreground text-sm">
+					Try different keywords or check the spelling.
+				</p>
+			</div>);
+    }
+    return (<div>
+			<p className="mb-4 text-muted-foreground text-sm">
+				{total} result{total !== 1 ? "s" : ""} for &ldquo;{query}&rdquo;
+			</p>
+			<div className="space-y-3">
+				{results.map((result) => (<a key={result.id} href={result.url} className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50">
+						<div className="flex items-start gap-4">
+							{result.image && (<img src={result.image} alt="" className="h-16 w-16 rounded-md object-cover"/>)}
+							<div className="min-w-0 flex-1">
+								<h3 className="font-medium text-foreground">{result.title}</h3>
+								<p className="mt-0.5 text-muted-foreground text-xs capitalize">
+									{result.entityType}
+								</p>
+							</div>
+						</div>
+					</a>))}
+			</div>
+		</div>);
+}

package/dist/modules/search/src/store/endpoints/click.js

@@ -0,0 +1,15 @@
+import { createStoreEndpoint, sanitizeText, z } from "@86d-app/core";
+export const clickEndpoint = createStoreEndpoint("/search/click", {
+    method: "POST",
+    body: z.object({
+        queryId: z.string().min(1).max(200),
+        term: z.string().min(1).max(500).transform(sanitizeText),
+        entityType: z.string().min(1).max(100).transform(sanitizeText),
+        entityId: z.string().min(1).max(200),
+        position: z.number().int().min(0).max(1000),
+    }),
+}, async (ctx) => {
+    const controller = ctx.context.controllers.search;
+    const click = await controller.recordClick(ctx.body);
+    return { id: click.id };
+});

package/dist/modules/search/src/store/endpoints/index.js

@@ -0,0 +1,12 @@
+import { clickEndpoint } from "./click";
+import { recentEndpoint } from "./recent";
+import { searchEndpoint } from "./search";
+import { storeSearch } from "./store-search";
+import { suggestEndpoint } from "./suggest";
+export const storeEndpoints = {
+    "/search/store-search": storeSearch,
+    "/search": searchEndpoint,
+    "/search/suggest": suggestEndpoint,
+    "/search/recent": recentEndpoint,
+    "/search/click": clickEndpoint,
+};

package/dist/modules/search/src/store/endpoints/recent.js

@@ -0,0 +1,18 @@
+import { createStoreEndpoint, z } from "@86d-app/core";
+export const recentEndpoint = createStoreEndpoint("/search/recent", {
+    method: "GET",
+    query: z.object({
+        sessionId: z.string().min(1).max(128),
+        limit: z.coerce.number().int().min(1).max(20).optional(),
+    }),
+}, async (ctx) => {
+    const controller = ctx.context.controllers.search;
+    const queries = await controller.getRecentQueries(ctx.query.sessionId, ctx.query.limit ?? 10);
+    return {
+        recent: queries.map((q) => ({
+            term: q.term,
+            resultCount: q.resultCount,
+            searchedAt: q.searchedAt,
+        })),
+    };
+});

package/dist/modules/search/src/store/endpoints/search.js

@@ -0,0 +1,57 @@
+import { createStoreEndpoint, sanitizeText, z } from "@86d-app/core";
+const sortFields = [
+    "relevance",
+    "newest",
+    "oldest",
+    "title_asc",
+    "title_desc",
+];
+export const searchEndpoint = createStoreEndpoint("/search", {
+    method: "GET",
+    query: z.object({
+        q: z.string().min(1).max(500).transform(sanitizeText),
+        type: z.string().max(100).transform(sanitizeText).optional(),
+        tags: z.string().max(2000).transform(sanitizeText).optional(),
+        sort: z.enum(sortFields).optional(),
+        fuzzy: z.coerce.boolean().optional(),
+        limit: z.coerce.number().int().min(1).max(100).optional(),
+        skip: z.coerce.number().int().min(0).optional(),
+        sessionId: z.string().max(200).optional(),
+    }),
+}, async (ctx) => {
+    const controller = ctx.context.controllers.search;
+    const parsedTags = ctx.query.tags
+        ? ctx.query.tags
+            .split(",")
+            .map((t) => t.trim())
+            .filter(Boolean)
+        : undefined;
+    const { results, total, facets, didYouMean } = await controller.search(ctx.query.q, {
+        entityType: ctx.query.type,
+        tags: parsedTags,
+        sort: ctx.query.sort,
+        fuzzy: ctx.query.fuzzy,
+        limit: ctx.query.limit ?? 20,
+        skip: ctx.query.skip ?? 0,
+    });
+    // Record query for analytics (fire-and-forget)
+    controller
+        .recordQuery(ctx.query.q, total, ctx.query.sessionId)
+        .catch(() => { });
+    return {
+        results: results.map((r) => ({
+            id: r.item.id,
+            entityType: r.item.entityType,
+            entityId: r.item.entityId,
+            title: r.item.title,
+            url: r.item.url,
+            image: r.item.image,
+            tags: r.item.tags,
+            score: r.score,
+            highlights: r.highlights,
+        })),
+        total,
+        facets,
+        didYouMean,
+    };
+});

package/dist/modules/search/src/store/endpoints/store-search.js

@@ -0,0 +1,33 @@
+import { createStoreEndpoint, sanitizeText, z } from "@86d-app/core";
+export const storeSearch = createStoreEndpoint("/search/store-search", {
+    method: "GET",
+    query: z.object({
+        q: z.string().min(0).max(500).transform(sanitizeText),
+        limit: z.string().max(10).optional(),
+    }),
+}, async (ctx) => {
+    const controller = ctx.context.controllers.search;
+    const limit = ctx.query.limit ? parseInt(ctx.query.limit, 10) : 5;
+    const q = ctx.query.q.trim();
+    if (q.length === 0) {
+        return {
+            results: [
+                {
+                    id: "search",
+                    label: "Search",
+                    href: "/search",
+                    group: "Pages",
+                },
+            ],
+        };
+    }
+    const { results } = await controller.search(q, { limit });
+    return {
+        results: results.map((r) => ({
+            id: r.item.id,
+            label: r.item.title,
+            href: r.item.url,
+            group: r.item.entityType,
+        })),
+    };
+});

package/dist/modules/search/src/store/endpoints/suggest.js

@@ -0,0 +1,12 @@
+import { createStoreEndpoint, sanitizeText, z } from "@86d-app/core";
+export const suggestEndpoint = createStoreEndpoint("/search/suggest", {
+    method: "GET",
+    query: z.object({
+        q: z.string().min(1).max(200).transform(sanitizeText),
+        limit: z.coerce.number().int().min(1).max(20).optional(),
+    }),
+}, async (ctx) => {
+    const controller = ctx.context.controllers.search;
+    const suggestions = await controller.suggest(ctx.query.q, ctx.query.limit ?? 8);
+    return { suggestions };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@86d-app/search",
-	"version": "0.0.23",
+	"version": "0.0.25",
 	"description": "Unified search, autocomplete, and search analytics module for 86d commerce platform",
 	"keywords": [
 		"commerce",