@tsproxy/react 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,68 @@
+# @tsproxy/react
+
+Headless React components for [tsproxy](https://github.com/akshitkrnagpal/tsproxy) with a BaseUI-style overrides pattern.
+
+> **This project is under heavy development.**
+
+## Install
+
+```bash
+npm install @tsproxy/react @tsproxy/js react-instantsearch
+```
+
+## Usage
+
+```tsx
+import { SearchProvider, SearchBox, Hits, RefinementList, Pagination, Stats } from "@tsproxy/react";
+import { Configure } from "react-instantsearch";
+
+export default function SearchPage() {
+  return (
+    <SearchProvider serverUrl="http://localhost:3000" indexName="products">
+      <Configure hitsPerPage={12} />
+      <SearchBox placeholder="Search..." />
+      <Stats />
+      <RefinementList attribute="category" />
+      <Hits hitComponent={({ hit }) => <div>{hit.name}</div>} />
+      <Pagination />
+    </SearchProvider>
+  );
+}
+```
+
+## Overrides
+
+Every component accepts an `overrides` prop to customize any sub-element:
+
+```tsx
+<SearchBox
+  overrides={{
+    Input: { props: { className: "rounded-full border px-4 py-2" } },
+    SubmitButton: { props: { hidden: true } },
+    ResetButton: { component: MyResetButton },
+  }}
+/>
+```
+
+## Components
+
+| Component | Sub-elements |
+|-----------|-------------|
+| `SearchBox` | Root, Form, Input, SubmitButton, ResetButton |
+| `Hits` | Root, List, Item |
+| `RefinementList` | Root, List, Item, Label, Checkbox, LabelText, Count |
+| `Pagination` | Root, List, Item, Link |
+| `Stats` | Root, Text |
+| `SortBy` | Root, Select, Option |
+| `NoResults` | Root, Title, Message |
+| `HitsSkeleton` | Root, List, Item |
+| `LocaleSelector` | Root, Select, Option |
+| `SearchProvider` | — (wraps InstantSearch) |
+
+## Documentation
+
+[tsproxy.akshit.io](https://tsproxy.akshit.io)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -40,7 +40,7 @@ interface LocaleContextValue {
     locale: string | undefined;
     setLocale: (locale: string) => void;
 }
-declare const LocaleContext: react.Context<LocaleContextValue | null>;
+declare const LocaleContext: react.Context<LocaleContextValue>;
 declare function useLocale(): LocaleContextValue;
 interface LocaleProviderProps {
     initialLocale?: string;
@@ -108,7 +108,7 @@ interface PaginationProps {
     padding?: number;
     overrides?: Overrides<PaginationElements>;
 }
-declare function Pagination({ padding, overrides }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+declare function Pagination({ padding, overrides }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 type StatsElements = {
     Root: "div";
@@ -161,7 +161,7 @@ interface NoResultsProps {
     children?: ReactNode;
     overrides?: Overrides<NoResultsElements>;
 }
-declare function NoResults({ title, message, children, overrides, }: NoResultsProps): react_jsx_runtime.JSX.Element | null;
+declare function NoResults({ title, message, children, overrides, }: NoResultsProps): react_jsx_runtime.JSX.Element;
 
 type HitsSkeletonElements = {
     Root: "div";
@@ -174,4 +174,27 @@ interface HitsSkeletonProps {
 }
 declare function HitsSkeleton({ count, overrides }: HitsSkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Hits, type HitsElements, type HitsProps, HitsSkeleton, type HitsSkeletonElements, type HitsSkeletonProps, LocaleContext, type LocaleOption, LocaleProvider, LocaleSelector, type LocaleSelectorElements, type LocaleSelectorProps, NoResults, type NoResultsElements, type NoResultsProps, type Override, type Overrides, Pagination, type PaginationElements, type PaginationProps, RefinementList, type RefinementListElements, type RefinementListProps, SearchBox, type SearchBoxElements, type SearchBoxProps, SearchProvider, SortBy, type SortByElements, type SortByItem, type SortByProps, Stats, type StatsElements, type StatsProps, getOverride, useLocale };
+type AutocompleteElements = {
+    Root: "div";
+    Input: "input";
+    List: "ul";
+    Item: "li";
+    Highlight: "span";
+};
+interface Suggestion {
+    objectID: string;
+    query: string;
+    highlight: string;
+}
+interface AutocompleteProps {
+    serverUrl: string;
+    collection?: string;
+    limit?: number;
+    placeholder?: string;
+    debounce?: number;
+    onSelect?: (suggestion: Suggestion) => void;
+    overrides?: Overrides<AutocompleteElements>;
+}
+declare function Autocomplete({ serverUrl, collection, limit, placeholder, debounce, onSelect, overrides, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, type AutocompleteElements, type AutocompleteProps, Hits, type HitsElements, type HitsProps, HitsSkeleton, type HitsSkeletonElements, type HitsSkeletonProps, LocaleContext, type LocaleOption, LocaleProvider, LocaleSelector, type LocaleSelectorElements, type LocaleSelectorProps, NoResults, type NoResultsElements, type NoResultsProps, type Override, type Overrides, Pagination, type PaginationElements, type PaginationProps, RefinementList, type RefinementListElements, type RefinementListProps, SearchBox, type SearchBoxElements, type SearchBoxProps, SearchProvider, SortBy, type SortByElements, type SortByItem, type SortByProps, Stats, type StatsElements, type StatsProps, type Suggestion, getOverride, useLocale };

package/dist/index.js

@@ -40,12 +40,12 @@ import { useMemo as useMemo2 } from "react";
 import { InstantSearch } from "react-instantsearch";
 import { createSearchClient } from "@tsproxy/js";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function SearchProviderInner({
+function SearchProvider({
   serverUrl,
   indexName,
+  locale,
   children
 }) {
-  const { locale } = useLocale();
   const searchClient = useMemo2(
     () => createSearchClient({
       url: serverUrl,
@@ -54,22 +54,7 @@ function SearchProviderInner({
     }),
     [serverUrl, locale]
   );
-  return /* @__PURE__ */ jsx2(
-    InstantSearch,
-    {
-      searchClient,
-      indexName,
-      children
-    }
-  );
-}
-function SearchProvider({
-  serverUrl,
-  indexName,
-  locale,
-  children
-}) {
-  return /* @__PURE__ */ jsx2(LocaleProvider, { initialLocale: locale, children: /* @__PURE__ */ jsx2(SearchProviderInner, { serverUrl, indexName, children }) });
+  return /* @__PURE__ */ jsx2(InstantSearch, { searchClient, indexName, children });
 }
 
 // src/components/SearchBox.tsx
@@ -391,7 +376,151 @@ function HitsSkeleton({ count = 8, overrides }) {
     ] })
   ] }) }, i)) }) });
 }
+
+// src/components/Autocomplete.tsx
+import { useState as useState3, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function Autocomplete({
+  serverUrl,
+  collection = "products",
+  limit = 5,
+  placeholder = "Search...",
+  debounce = 200,
+  onSelect,
+  overrides
+}) {
+  const [query, setQuery] = useState3("");
+  const [suggestions, setSuggestions] = useState3([]);
+  const [open, setOpen] = useState3(false);
+  const [activeIndex, setActiveIndex] = useState3(-1);
+  const timerRef = useRef2(void 0);
+  const inputRef = useRef2(null);
+  const root = getOverride("div", overrides?.Root);
+  const input = getOverride("input", overrides?.Input);
+  const list = getOverride("ul", overrides?.List);
+  const item = getOverride("li", overrides?.Item);
+  const highlight = getOverride("span", overrides?.Highlight);
+  const fetchSuggestions = useCallback2(
+    async (q) => {
+      if (!q.trim()) {
+        setSuggestions([]);
+        setOpen(false);
+        return;
+      }
+      try {
+        const res = await fetch(
+          `${serverUrl}/api/suggestions?q=${encodeURIComponent(q)}&collection=${collection}&limit=${limit}`
+        );
+        const data = await res.json();
+        setSuggestions(data.suggestions || []);
+        setOpen((data.suggestions || []).length > 0);
+        setActiveIndex(-1);
+      } catch {
+        setSuggestions([]);
+      }
+    },
+    [serverUrl, collection, limit]
+  );
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setQuery(value);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => fetchSuggestions(value), debounce);
+  };
+  const handleSelect = (suggestion) => {
+    setQuery(suggestion.query);
+    setOpen(false);
+    onSelect?.(suggestion);
+  };
+  const handleKeyDown = (e) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      e.preventDefault();
+      const s = suggestions[activeIndex];
+      if (s) handleSelect(s);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  useEffect2(() => {
+    const handleClickOutside = () => setOpen(false);
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs6(
+    root.Component,
+    {
+      ...root.resolveProps({
+        style: { position: "relative" },
+        onClick: (e) => e.stopPropagation()
+      }),
+      children: [
+        /* @__PURE__ */ jsx12(
+          input.Component,
+          {
+            ...input.resolveProps({
+              ref: inputRef,
+              type: "search",
+              value: query,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onFocus: () => suggestions.length > 0 && setOpen(true),
+              placeholder,
+              autoComplete: "off",
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list"
+            })
+          }
+        ),
+        open && suggestions.length > 0 && /* @__PURE__ */ jsx12(
+          list.Component,
+          {
+            ...list.resolveProps({
+              role: "listbox",
+              style: {
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                right: 0,
+                zIndex: 50
+              }
+            }),
+            children: suggestions.map((s, i) => /* @__PURE__ */ jsx12(
+              item.Component,
+              {
+                ...item.resolveProps({
+                  role: "option",
+                  "aria-selected": i === activeIndex,
+                  "data-active": i === activeIndex || void 0,
+                  onClick: () => handleSelect(s),
+                  onMouseEnter: () => setActiveIndex(i)
+                }),
+                children: /* @__PURE__ */ jsx12(
+                  highlight.Component,
+                  {
+                    ...highlight.resolveProps({
+                      dangerouslySetInnerHTML: { __html: s.highlight }
+                    })
+                  }
+                )
+              },
+              s.objectID
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
 export {
+  Autocomplete,
   Hits,
   HitsSkeleton,
   LocaleContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsproxy/react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Headless React components for tsproxy with BaseUI-style overrides",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -30,8 +31,12 @@
     "headless",
     "search"
   ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
   "dependencies": {
-    "@tsproxy/js": "0.0.1"
+    "@tsproxy/js": "^0.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -39,16 +44,9 @@
     "react-instantsearch": "^7.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "react-instantsearch": "^7.29.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "tsup": "^8.4.0",
     "typescript": "^5.5.3"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --external react --external react-dom --external react-instantsearch --external @tsproxy/js --tsconfig tsconfig.build.json",
-    "typecheck": "tsc --noEmit"
   }
-}
+}