@tsproxy/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,177 @@
+export { FacetValue, Hit, SearchClient, SearchRequest, SearchResponse, SearchResponseResult, createSearchClient } from '@tsproxy/js';
+import * as react from 'react';
+import { ElementType, ComponentType, ComponentPropsWithRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseRefinementListProps } from 'react-instantsearch';
+
+/**
+ * Override for a single sub-element.
+ * - component: replace the default element entirely
+ * - props: merge additional props (static object or function of computed props)
+ */
+type Override<DefaultComponent extends ElementType> = {
+    component?: ComponentType<ComponentPropsWithRef<DefaultComponent>>;
+    props?: Partial<ComponentPropsWithRef<DefaultComponent>> | ((props: ComponentPropsWithRef<DefaultComponent>) => Partial<ComponentPropsWithRef<DefaultComponent>>);
+};
+/**
+ * Build an overrides map from a record of default element types.
+ *
+ * @example
+ * type SearchBoxOverrides = Overrides<{ Root: "div"; Input: "input" }>;
+ * // { Root?: Override<"div">; Input?: Override<"input"> }
+ */
+type Overrides<T extends Record<string, ElementType>> = {
+    [K in keyof T]?: Override<T[K]>;
+};
+
+/**
+ * Resolve the component and props for a sub-element, applying any overrides.
+ *
+ * @example
+ * const root = getOverride("div", overrides?.Root);
+ * <root.Component {...root.resolveProps({ className: "default" })} />
+ */
+declare function getOverride<D extends ElementType>(defaultComponent: D, override?: Override<D>): {
+    readonly Component: ElementType;
+    readonly resolveProps: (defaultProps: ComponentPropsWithRef<D>) => ComponentPropsWithRef<D>;
+};
+
+interface LocaleContextValue {
+    locale: string | undefined;
+    setLocale: (locale: string) => void;
+}
+declare const LocaleContext: react.Context<LocaleContextValue | null>;
+declare function useLocale(): LocaleContextValue;
+interface LocaleProviderProps {
+    initialLocale?: string;
+    children: ReactNode;
+}
+declare function LocaleProvider({ initialLocale, children }: LocaleProviderProps): react_jsx_runtime.JSX.Element;
+
+interface SearchProviderProps {
+    serverUrl: string;
+    indexName: string;
+    locale?: string;
+    children: ReactNode;
+}
+declare function SearchProvider({ serverUrl, indexName, locale, children, }: SearchProviderProps): react_jsx_runtime.JSX.Element;
+
+type SearchBoxElements = {
+    Root: "div";
+    Form: "form";
+    Input: "input";
+    SubmitButton: "button";
+    ResetButton: "button";
+};
+interface SearchBoxProps {
+    placeholder?: string;
+    autoFocus?: boolean;
+    overrides?: Overrides<SearchBoxElements>;
+    queryHook?: (query: string, search: (value: string) => void) => void;
+}
+declare function SearchBox({ placeholder, autoFocus, overrides, queryHook, }: SearchBoxProps): react_jsx_runtime.JSX.Element;
+
+type HitsElements = {
+    Root: "div";
+    List: "ol";
+    Item: "li";
+};
+interface HitsProps {
+    hitComponent: (props: {
+        hit: Record<string, unknown>;
+    }) => ReactNode;
+    overrides?: Overrides<HitsElements>;
+}
+declare function Hits({ hitComponent: HitComponent, overrides }: HitsProps): react_jsx_runtime.JSX.Element;
+
+type RefinementListElements = {
+    Root: "div";
+    List: "ul";
+    Item: "li";
+    Label: "label";
+    Checkbox: "input";
+    LabelText: "span";
+    Count: "span";
+};
+interface RefinementListProps extends UseRefinementListProps {
+    overrides?: Overrides<RefinementListElements>;
+}
+declare function RefinementList({ overrides, ...hookProps }: RefinementListProps): react_jsx_runtime.JSX.Element;
+
+type PaginationElements = {
+    Root: "nav";
+    List: "ul";
+    Item: "li";
+    Link: "a";
+};
+interface PaginationProps {
+    padding?: number;
+    overrides?: Overrides<PaginationElements>;
+}
+declare function Pagination({ padding, overrides }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+type StatsElements = {
+    Root: "div";
+    Text: "span";
+};
+interface StatsProps {
+    overrides?: Overrides<StatsElements>;
+    formatText?: (nbHits: number, processingTimeMS: number) => string;
+}
+declare function Stats({ overrides, formatText }: StatsProps): react_jsx_runtime.JSX.Element;
+
+type SortByElements = {
+    Root: "div";
+    Select: "select";
+    Option: "option";
+};
+interface SortByItem {
+    value: string;
+    label: string;
+}
+interface SortByProps {
+    items: SortByItem[];
+    overrides?: Overrides<SortByElements>;
+}
+declare function SortBy({ items, overrides }: SortByProps): react_jsx_runtime.JSX.Element;
+
+type LocaleSelectorElements = {
+    Root: "div";
+    Select: "select";
+    Option: "option";
+};
+interface LocaleOption {
+    code: string;
+    label: string;
+}
+interface LocaleSelectorProps {
+    locales: LocaleOption[];
+    overrides?: Overrides<LocaleSelectorElements>;
+}
+declare function LocaleSelector({ locales, overrides }: LocaleSelectorProps): react_jsx_runtime.JSX.Element;
+
+type NoResultsElements = {
+    Root: "div";
+    Title: "p";
+    Message: "p";
+};
+interface NoResultsProps {
+    title?: string;
+    message?: string;
+    children?: ReactNode;
+    overrides?: Overrides<NoResultsElements>;
+}
+declare function NoResults({ title, message, children, overrides, }: NoResultsProps): react_jsx_runtime.JSX.Element | null;
+
+type HitsSkeletonElements = {
+    Root: "div";
+    List: "div";
+    Item: "div";
+};
+interface HitsSkeletonProps {
+    count?: number;
+    overrides?: Overrides<HitsSkeletonElements>;
+}
+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 };

package/dist/index.js

@@ -0,0 +1,410 @@
+// src/index.ts
+import { createSearchClient as createSearchClient2 } from "@tsproxy/js";
+
+// src/overrides/getOverride.ts
+function getOverride(defaultComponent, override) {
+  const Component = override?.component ?? defaultComponent;
+  function resolveProps(defaultProps) {
+    if (!override?.props) return defaultProps;
+    const extra = typeof override.props === "function" ? override.props(defaultProps) : override.props;
+    return { ...defaultProps, ...extra };
+  }
+  return { Component, resolveProps };
+}
+
+// src/context/LocaleContext.tsx
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var LocaleContext = createContext(null);
+function useLocale() {
+  const context = useContext(LocaleContext);
+  if (!context) {
+    throw new Error("useLocale must be used within a LocaleProvider or SearchProvider");
+  }
+  return context;
+}
+function LocaleProvider({ initialLocale, children }) {
+  const [locale, setLocaleState] = useState(initialLocale);
+  const setLocale = useCallback((newLocale) => {
+    setLocaleState(newLocale);
+  }, []);
+  const value = useMemo(
+    () => ({ locale, setLocale }),
+    [locale, setLocale]
+  );
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
+}
+
+// src/components/SearchProvider.tsx
+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({
+  serverUrl,
+  indexName,
+  children
+}) {
+  const { locale } = useLocale();
+  const searchClient = useMemo2(
+    () => createSearchClient({
+      url: serverUrl,
+      ...locale ? { locale } : {},
+      cache: true
+    }),
+    [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 }) });
+}
+
+// src/components/SearchBox.tsx
+import { useSearchBox } from "react-instantsearch";
+import { useRef, useState as useState2, useEffect } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SearchBox({
+  placeholder = "Search...",
+  autoFocus = false,
+  overrides,
+  queryHook
+}) {
+  const { query, refine, clear } = useSearchBox({ queryHook });
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState2(query);
+  const isTypingRef = useRef(false);
+  useEffect(() => {
+    if (!isTypingRef.current) {
+      setInputValue(query);
+    }
+  }, [query]);
+  const root = getOverride("div", overrides?.Root);
+  const form = getOverride("form", overrides?.Form);
+  const input = getOverride("input", overrides?.Input);
+  const submit = getOverride("button", overrides?.SubmitButton);
+  const reset = getOverride("button", overrides?.ResetButton);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+  const handleReset = () => {
+    setInputValue("");
+    clear();
+    inputRef.current?.focus();
+  };
+  const handleChange = (e) => {
+    const value = e.currentTarget.value;
+    setInputValue(value);
+    isTypingRef.current = true;
+    refine(value);
+    setTimeout(() => {
+      isTypingRef.current = false;
+    }, 500);
+  };
+  return /* @__PURE__ */ jsx3(root.Component, { ...root.resolveProps({}), children: /* @__PURE__ */ jsxs(
+    form.Component,
+    {
+      ...form.resolveProps({
+        onSubmit: handleSubmit,
+        role: "search",
+        noValidate: true
+      }),
+      children: [
+        /* @__PURE__ */ jsx3(
+          input.Component,
+          {
+            ...input.resolveProps({
+              ref: inputRef,
+              type: "search",
+              placeholder,
+              autoFocus,
+              value: inputValue,
+              onChange: handleChange,
+              autoComplete: "off",
+              autoCorrect: "off",
+              spellCheck: false
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          submit.Component,
+          {
+            ...submit.resolveProps({ type: "submit", children: "Search" })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          reset.Component,
+          {
+            ...reset.resolveProps({
+              type: "reset",
+              onClick: handleReset,
+              hidden: !inputValue,
+              children: "Reset"
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/components/Hits.tsx
+import { useHits } from "react-instantsearch";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Hits({ hitComponent: HitComponent, overrides }) {
+  const { items } = useHits();
+  const root = getOverride("div", overrides?.Root);
+  const list = getOverride("ol", overrides?.List);
+  const item = getOverride("li", overrides?.Item);
+  return /* @__PURE__ */ jsx4(root.Component, { ...root.resolveProps({}), children: /* @__PURE__ */ jsx4(list.Component, { ...list.resolveProps({}), children: items.map((hit) => /* @__PURE__ */ jsx4(item.Component, { ...item.resolveProps({}), children: /* @__PURE__ */ jsx4(HitComponent, { hit }) }, hit.objectID)) }) });
+}
+
+// src/components/RefinementList.tsx
+import { useRefinementList } from "react-instantsearch";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function RefinementList({ overrides, ...hookProps }) {
+  const { items, refine, canToggleShowMore, isShowingMore, toggleShowMore } = useRefinementList(hookProps);
+  const root = getOverride("div", overrides?.Root);
+  const list = getOverride("ul", overrides?.List);
+  const item = getOverride("li", overrides?.Item);
+  const label = getOverride("label", overrides?.Label);
+  const checkbox = getOverride("input", overrides?.Checkbox);
+  const labelText = getOverride("span", overrides?.LabelText);
+  const count = getOverride("span", overrides?.Count);
+  return /* @__PURE__ */ jsxs2(root.Component, { ...root.resolveProps({}), children: [
+    /* @__PURE__ */ jsx5(list.Component, { ...list.resolveProps({}), children: items.map((facetItem) => /* @__PURE__ */ jsx5(
+      item.Component,
+      {
+        ...item.resolveProps({
+          "data-refined": facetItem.isRefined || void 0
+        }),
+        children: /* @__PURE__ */ jsxs2(label.Component, { ...label.resolveProps({}), children: [
+          /* @__PURE__ */ jsx5(
+            checkbox.Component,
+            {
+              ...checkbox.resolveProps({
+                type: "checkbox",
+                checked: facetItem.isRefined,
+                onChange: () => refine(facetItem.value)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            labelText.Component,
+            {
+              ...labelText.resolveProps({ children: facetItem.label })
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            count.Component,
+            {
+              ...count.resolveProps({ children: facetItem.count })
+            }
+          )
+        ] })
+      },
+      facetItem.value
+    )) }),
+    canToggleShowMore && /* @__PURE__ */ jsx5("button", { type: "button", onClick: toggleShowMore, children: isShowingMore ? "Show less" : "Show more" })
+  ] });
+}
+
+// src/components/Pagination.tsx
+import { usePagination } from "react-instantsearch";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function Pagination({ padding = 3, overrides }) {
+  const {
+    pages,
+    currentRefinement,
+    nbPages,
+    refine,
+    isFirstPage,
+    isLastPage
+  } = usePagination({ padding });
+  const root = getOverride("nav", overrides?.Root);
+  const list = getOverride("ul", overrides?.List);
+  const item = getOverride("li", overrides?.Item);
+  const link = getOverride("a", overrides?.Link);
+  if (nbPages <= 1) return null;
+  function renderItem(label, page, disabled, isCurrent = false) {
+    return /* @__PURE__ */ jsx6(
+      item.Component,
+      {
+        ...item.resolveProps({
+          "data-current": isCurrent || void 0,
+          "data-disabled": disabled || void 0
+        }),
+        children: /* @__PURE__ */ jsx6(
+          link.Component,
+          {
+            ...link.resolveProps({
+              href: "#",
+              "aria-label": label,
+              "aria-current": isCurrent ? "page" : void 0,
+              onClick: (e) => {
+                e.preventDefault();
+                if (!disabled) refine(page);
+              },
+              children: label
+            })
+          }
+        )
+      },
+      label
+    );
+  }
+  return /* @__PURE__ */ jsx6(root.Component, { ...root.resolveProps({ "aria-label": "Pagination" }), children: /* @__PURE__ */ jsxs3(list.Component, { ...list.resolveProps({}), children: [
+    renderItem("\xAB", 0, isFirstPage),
+    renderItem("\u2039", currentRefinement - 1, isFirstPage),
+    pages.map(
+      (page) => renderItem(
+        String(page + 1),
+        page,
+        false,
+        page === currentRefinement
+      )
+    ),
+    renderItem("\u203A", currentRefinement + 1, isLastPage),
+    renderItem("\xBB", nbPages - 1, isLastPage)
+  ] }) });
+}
+
+// src/components/Stats.tsx
+import { useStats } from "react-instantsearch";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Stats({ overrides, formatText }) {
+  const { nbHits, processingTimeMS } = useStats();
+  const root = getOverride("div", overrides?.Root);
+  const text = getOverride("span", overrides?.Text);
+  const content = formatText ? formatText(nbHits ?? 0, processingTimeMS ?? 0) : `${(nbHits ?? 0).toLocaleString()} results found in ${processingTimeMS ?? 0}ms`;
+  return /* @__PURE__ */ jsx7(root.Component, { ...root.resolveProps({}), children: /* @__PURE__ */ jsx7(text.Component, { ...text.resolveProps({ children: content }) }) });
+}
+
+// src/components/SortBy.tsx
+import { useSortBy } from "react-instantsearch";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function SortBy({ items, overrides }) {
+  const { currentRefinement, refine } = useSortBy({ items });
+  const root = getOverride("div", overrides?.Root);
+  const select = getOverride("select", overrides?.Select);
+  const option = getOverride("option", overrides?.Option);
+  return /* @__PURE__ */ jsx8(root.Component, { ...root.resolveProps({}), children: /* @__PURE__ */ jsx8(
+    select.Component,
+    {
+      ...select.resolveProps({
+        value: currentRefinement,
+        onChange: (e) => refine(e.target.value),
+        "aria-label": "Sort by"
+      }),
+      children: items.map((sortItem) => /* @__PURE__ */ jsx8(
+        option.Component,
+        {
+          ...option.resolveProps({
+            value: sortItem.value,
+            children: sortItem.label
+          })
+        },
+        sortItem.value
+      ))
+    }
+  ) });
+}
+
+// src/components/LocaleSelector.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function LocaleSelector({ locales, overrides }) {
+  const { locale, setLocale } = useLocale();
+  const root = getOverride("div", overrides?.Root);
+  const select = getOverride("select", overrides?.Select);
+  const option = getOverride("option", overrides?.Option);
+  return /* @__PURE__ */ jsx9(root.Component, { ...root.resolveProps({}), children: /* @__PURE__ */ jsx9(
+    select.Component,
+    {
+      ...select.resolveProps({
+        value: locale ?? "",
+        onChange: (e) => setLocale(e.target.value),
+        "aria-label": "Select locale"
+      }),
+      children: locales.map((loc) => /* @__PURE__ */ jsx9(
+        option.Component,
+        {
+          ...option.resolveProps({
+            value: loc.code,
+            children: loc.label
+          })
+        },
+        loc.code
+      ))
+    }
+  ) });
+}
+
+// src/components/NoResults.tsx
+import { useInstantSearch } from "react-instantsearch";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function NoResults({
+  title = "No results found",
+  message = "Try adjusting your search or filters.",
+  children,
+  overrides
+}) {
+  const { results } = useInstantSearch();
+  if (results.__isArtificial || results.nbHits > 0) {
+    return null;
+  }
+  const root = getOverride("div", overrides?.Root);
+  const titleEl = getOverride("p", overrides?.Title);
+  const messageEl = getOverride("p", overrides?.Message);
+  if (children) {
+    return /* @__PURE__ */ jsx10(root.Component, { ...root.resolveProps({}), children });
+  }
+  return /* @__PURE__ */ jsxs4(root.Component, { ...root.resolveProps({}), children: [
+    /* @__PURE__ */ jsx10(titleEl.Component, { ...titleEl.resolveProps({ children: title }) }),
+    /* @__PURE__ */ jsx10(messageEl.Component, { ...messageEl.resolveProps({ children: message }) })
+  ] });
+}
+
+// src/components/HitsSkeleton.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function HitsSkeleton({ count = 8, overrides }) {
+  const root = getOverride("div", overrides?.Root);
+  const list = getOverride("div", overrides?.List);
+  const item = getOverride("div", overrides?.Item);
+  return /* @__PURE__ */ jsx11(root.Component, { ...root.resolveProps({ role: "status", "aria-label": "Loading" }), children: /* @__PURE__ */ jsx11(list.Component, { ...list.resolveProps({}), children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx11(item.Component, { ...item.resolveProps({}), children: /* @__PURE__ */ jsxs5("div", { className: "animate-pulse", children: [
+    /* @__PURE__ */ jsx11("div", { className: "aspect-square rounded-lg bg-gray-200" }),
+    /* @__PURE__ */ jsxs5("div", { className: "mt-2 space-y-2", children: [
+      /* @__PURE__ */ jsx11("div", { className: "h-4 w-3/4 rounded bg-gray-200" }),
+      /* @__PURE__ */ jsx11("div", { className: "h-3 w-1/2 rounded bg-gray-200" }),
+      /* @__PURE__ */ jsx11("div", { className: "h-5 w-1/3 rounded bg-gray-200" })
+    ] })
+  ] }) }, i)) }) });
+}
+export {
+  Hits,
+  HitsSkeleton,
+  LocaleContext,
+  LocaleProvider,
+  LocaleSelector,
+  NoResults,
+  Pagination,
+  RefinementList,
+  SearchBox,
+  SearchProvider,
+  SortBy,
+  Stats,
+  createSearchClient2 as createSearchClient,
+  getOverride,
+  useLocale
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@tsproxy/react",
+  "version": "0.0.1",
+  "description": "Headless React components for tsproxy with BaseUI-style overrides",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/akshitkrnagpal/tsproxy.git",
+    "directory": "packages/web"
+  },
+  "license": "MIT",
+  "keywords": [
+    "typesense",
+    "react",
+    "instantsearch",
+    "headless",
+    "search"
+  ],
+  "dependencies": {
+    "@tsproxy/js": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "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",
+    "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"
+  }
+}