@nosto/search-js 1.4.0 → 1.5.0

package/dist/preact/src/actions/newSearch.d.ts

@@ -0,0 +1,4 @@
+import { Options as SearchConfig } from '../../../core/src/types';
+import { SearchQuery } from '@nosto/nosto-js/client';
+import { ActionContext } from './types';
+export declare function newSearch(context: ActionContext, query: SearchQuery, options?: SearchConfig): Promise<void>;

package/dist/preact/src/actions/replaceFilter.d.ts

@@ -0,0 +1,3 @@
+import { InputSearchRangeFilter } from '@nosto/nosto-js/client';
+import { ActionContext } from './types';
+export declare function replaceFilter(context: ActionContext, field: string, value: InputSearchRangeFilter | string | undefined): Promise<void>;

package/dist/preact/src/actions/toggleProductFilter.d.ts

@@ -0,0 +1,2 @@
+import { ActionContext } from './types';
+export declare function toggleProductFilter(context: ActionContext, field: string, value: string, active: boolean): Promise<void>;

package/dist/preact/src/actions/types.d.ts

@@ -0,0 +1,6 @@
+import { Config } from '../config/config';
+import { Store } from '../store';
+export type ActionContext = {
+    store: Store;
+    config: Config;
+};

package/dist/preact/src/actions/updateSearch.d.ts

@@ -0,0 +1,4 @@
+import { Options as SearchConfig } from '../../../core/src/types';
+import { SearchQuery } from '@nosto/nosto-js/client';
+import { ActionContext } from './types';
+export declare function updateSearch(context: ActionContext, query: SearchQuery, options?: SearchConfig): Promise<void>;

package/dist/preact/src/api/types.d.ts

@@ -0,0 +1,4 @@
+import { SearchQuery } from '@nosto/nosto-js/client';
+export type PageType = "serp" | "category" | "autocomplete";
+export type MaybeProvider<T> = T | (() => T);
+export type QueryProvider = MaybeProvider<Partial<SearchQuery>>;

package/dist/preact/src/components/SearchInput.d.ts

@@ -0,0 +1,7 @@
+import { ComponentChildren } from 'preact';
+type Props = {
+    children: ComponentChildren;
+    onSearchInput: (target: HTMLInputElement) => void;
+};
+export declare function SearchInput({ children, onSearchInput }: Props): ComponentChildren;
+export {};

package/dist/preact/src/components/SerpElement.d.ts

@@ -0,0 +1,18 @@
+import { ComponentChildren } from 'preact';
+/**
+ * @group Components
+ */
+export type SerpElementProps = {
+    children: ComponentChildren;
+    hit: {
+        productId: string;
+        url?: string;
+    };
+    onClick?: (event: Event) => void;
+};
+/**
+ * Wrapper component that can be used to wrap any element in the search result list.
+ *
+ * @group Components
+ */
+export declare function SerpElement({ children, hit, onClick }: SerpElementProps): ComponentChildren;

package/dist/preact/src/config/base/baseConfig.d.ts

@@ -0,0 +1,41 @@
+import { Options as SearchConfig } from '../../../../core/src/types';
+import { SearchQuery } from '@nosto/nosto-js/client';
+import { PageType } from '../../api/types';
+export declare const defaultBaseConfig: {
+    defaultCurrency: string;
+    queryModifications: (query: SearchQuery) => SearchQuery;
+};
+export interface BaseConfig {
+    /**
+     * Merchant's default Currency.
+     */
+    defaultCurrency: string;
+    /**
+     * Configuration for the search queries
+     */
+    search?: SearchConfig;
+    /**
+     * Custom function, when provided, can be used to modify search query before sending it to the server.
+     * A default implementation is provided in the config that returns the query without any modification.
+     * Note: The query parameter itself should not be touched, but instead a new object should be returned in case modifications are needed.
+     * @param query SearchQuery
+     * @param pageType PageType | undefined
+     * @default queryModifications: query => query
+     * @example
+     * ```
+     * (query, pageType) => {
+     *   return {
+     *     ...query,
+     *     products: {
+     *       ...query.products,
+     *       filter: [
+     *         ...(query.products?.filter ?? []),
+     *         { field: "availability", value: ["InStock"] }
+     *       ]
+     *     }
+     *   }
+     * }
+     * ```
+     */
+    queryModifications: (query: SearchQuery, pageType: PageType | undefined) => SearchQuery;
+}

package/dist/preact/src/config/config.d.ts

@@ -0,0 +1,4 @@
+import { AutocompleteConfig } from './pages/autocomplete/config';
+import { CategoryConfig } from './pages/category/config';
+import { SerpConfig } from './pages/serp/config';
+export type Config = SerpConfig | CategoryConfig | AutocompleteConfig;

package/dist/preact/src/config/configContext.d.ts

@@ -0,0 +1,6 @@
+import { Config } from './config';
+export declare const ConfigContext: import('preact').Context<Config | null>;
+export declare const useConfig: () => Config;
+export declare const useSerpConfig: () => import('./pages/serp/config').SerpConfig;
+export declare const useCategoryConfig: () => import('./pages/category/config').CategoryConfig;
+export declare const useAutocompleteConfig: () => import('./pages/autocomplete/config').AutocompleteConfig;

package/dist/preact/src/config/pages/autocomplete/config.d.ts

@@ -0,0 +1,15 @@
+import { BaseConfig } from '../../base/baseConfig';
+export declare const defaultAutocompleteConfig: {
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery) => import('@nosto/nosto-js/client').SearchQuery;
+};
+export interface AutocompleteConfig extends BaseConfig {
+    pageType: "autocomplete";
+}
+export type PublicAutocompleteConfig = Omit<AutocompleteConfig, keyof typeof defaultAutocompleteConfig | "pageType"> & Partial<Pick<AutocompleteConfig, keyof typeof defaultAutocompleteConfig>>;
+export declare function makeAutocompleteConfig(config: PublicAutocompleteConfig): {
+    search?: import('../../../../../core/src/types').Options | undefined;
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery, pageType: import('../../../api/types').PageType | undefined) => import('@nosto/nosto-js/client').SearchQuery;
+    pageType: "autocomplete";
+};

package/dist/preact/src/config/pages/autocomplete/provider.d.ts

@@ -0,0 +1,10 @@
+import { Store } from '../../../store';
+import { ComponentChildren } from 'preact';
+import { PublicAutocompleteConfig } from './config';
+type AutocompleteProps = {
+    config: PublicAutocompleteConfig;
+    store?: Store;
+    children: ComponentChildren;
+};
+export declare function AutocompletePageProvider({ config, store, children }: AutocompleteProps): import("preact").JSX.Element;
+export {};

package/dist/preact/src/config/pages/category/config.d.ts

@@ -0,0 +1,44 @@
+import { BaseConfig } from '../../base/baseConfig';
+export declare const defaultCategoryConfig: {
+    persistentSearchCache: false;
+    preservePageScroll: false;
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery) => import('@nosto/nosto-js/client').SearchQuery;
+};
+export interface CategoryConfig extends BaseConfig {
+    pageType: "category";
+    /**
+     * returns current category id
+     */
+    categoryId: () => string;
+    /**
+     * returns current category path
+     */
+    categoryPath: () => string;
+    /**
+     * Enable persistent caching for search results.
+     *
+     * If enabled, the search results will be restored from cache when returning to the search page,
+     * for example, from a product page.
+     *
+     * The cache is stored in the browser's session storage.
+     */
+    persistentSearchCache: boolean;
+    /**
+     * Preserve page scroll position when navigating back to search page.
+     *
+     * If enabled, it's highly recommended to also enabled `persistentSearchCache` for best user experience.
+     */
+    preservePageScroll: boolean;
+}
+export type PublicCategoryConfig = Omit<CategoryConfig, keyof typeof defaultCategoryConfig | "pageType"> & Partial<Pick<CategoryConfig, keyof typeof defaultCategoryConfig>>;
+export declare function makeCategoryConfig(config: PublicCategoryConfig): {
+    search?: import('../../../../../core/src/types').Options | undefined;
+    categoryId: () => string;
+    categoryPath: () => string;
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery, pageType: import('../../../api/types').PageType | undefined) => import('@nosto/nosto-js/client').SearchQuery;
+    persistentSearchCache: boolean;
+    preservePageScroll: boolean;
+    pageType: "category";
+};

package/dist/preact/src/config/pages/category/provider.d.ts

@@ -0,0 +1,10 @@
+import { Store } from '../../../store';
+import { ComponentChildren } from 'preact';
+import { PublicCategoryConfig } from './config';
+type CategoryProps = {
+    config: PublicCategoryConfig;
+    store?: Store;
+    children: ComponentChildren;
+};
+export declare function CategoryPageProvider({ config, store, children }: CategoryProps): import("preact").JSX.Element;
+export {};

package/dist/preact/src/config/pages/serp/config.d.ts

@@ -0,0 +1,34 @@
+import { BaseConfig } from '../../base/baseConfig';
+export declare const defaultSerpConfig: {
+    persistentSearchCache: false;
+    preservePageScroll: false;
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery) => import('@nosto/nosto-js/client').SearchQuery;
+};
+export interface SerpConfig extends BaseConfig {
+    pageType: "serp";
+    /**
+     * Enable persistent caching for search results.
+     *
+     * If enabled, the search results will be restored from cache when returning to the search page,
+     * for example, from a product page.
+     *
+     * The cache is stored in the browser's session storage.
+     */
+    persistentSearchCache: boolean;
+    /**
+     * Preserve page scroll position when navigating back to search page.
+     *
+     * If enabled, it's highly recommended to also enabled `persistentSearchCache` for best user experience.
+     */
+    preservePageScroll: boolean;
+}
+export type PublicSerpConfig = Omit<SerpConfig, keyof typeof defaultSerpConfig | "pageType"> & Partial<Pick<SerpConfig, keyof typeof defaultSerpConfig>>;
+export declare function makeSerpConfig(config?: PublicSerpConfig): {
+    search?: import('../../../../../core/src/types').Options | undefined;
+    defaultCurrency: string;
+    queryModifications: (query: import('@nosto/nosto-js/client').SearchQuery, pageType: import('../../../api/types').PageType | undefined) => import('@nosto/nosto-js/client').SearchQuery;
+    persistentSearchCache: boolean;
+    preservePageScroll: boolean;
+    pageType: "serp";
+};

package/dist/preact/src/config/pages/serp/provider.d.ts

@@ -0,0 +1,10 @@
+import { Store } from '../../../store';
+import { ComponentChildren } from 'preact';
+import { PublicSerpConfig } from './config';
+type SearchProps = {
+    config: PublicSerpConfig;
+    store?: Store;
+    children: ComponentChildren;
+};
+export declare function SearchPageProvider({ config, store, children }: SearchProps): import("preact").JSX.Element;
+export {};

package/dist/preact/src/dom/renderHeadless.d.ts

@@ -0,0 +1,18 @@
+import { ComponentChildren, VNode } from 'preact';
+type Props = {
+    children: ComponentChildren;
+    /**
+     * Update the element with custom logic. Each vnode (valid JSX element) will be passed to this function recursively.
+     * You may either mutate the existing node, or create a new one.
+     *
+     * @param vnode Current target node
+     * @returns {VNode} if the vnode should be updated
+     * @returns {null} if the vnode should be removed
+     */
+    updateElement: <P extends object>(vnode: VNode<P>, context: Context) => VNode<P> | null;
+};
+type Context = {
+    depth: number;
+};
+export declare function renderHeadless(props: Props, ctx?: Context): ComponentChildren;
+export {};

package/dist/preact/src/dom/utils.d.ts

@@ -0,0 +1,5 @@
+import { VNode } from 'preact';
+import { JSX } from 'preact/jsx-runtime';
+export type UnknownVnode = VNode<any>;
+export declare function isHTMLInput(vnode: UnknownVnode): vnode is VNode<JSX.IntrinsicElements["input"]>;
+export declare function isVNode(child: unknown): child is VNode;

package/dist/preact/src/hooks/useActions.d.ts

@@ -0,0 +1,32 @@
+import { InputSearchRangeFilter, SearchOptions, SearchQuery } from '@nosto/nosto-js/client';
+/**
+ * Preact hook that import current actions to the component.
+ * Actions should be used to modify state, making new searches, etc.
+ *
+ * @example
+ * ```jsx
+ * import { useActions } from '@nosto/search-js/preact'
+ *
+ * export default () => {
+ *     const { newSearch } = useActions()
+ *
+ *     return <button onClick={() => {
+ *         newSearch({
+ *             query: {
+ *                 query: "shoes"
+ *             }
+ *         })
+ *     }}>
+ *         Search for "shoes"
+ *     </button>
+ * }
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function useActions(): {
+    newSearch: (query: SearchQuery, options?: SearchOptions) => Promise<void>;
+    updateSearch: (query: SearchQuery, options?: SearchOptions) => Promise<void>;
+    toggleProductFilter: (field: string, value: string, active: boolean) => Promise<void>;
+    replaceFilter: (field: string, value: InputSearchRangeFilter | string | undefined) => Promise<void>;
+};

package/dist/preact/src/hooks/useCheckClientScript.d.ts

@@ -0,0 +1 @@
+export declare function useCheckClientScript(): void;

package/dist/preact/src/hooks/useDecoratedSearchResults.d.ts

@@ -0,0 +1,27 @@
+import { DecoratedProduct, DecoratedResult, HitDecorator } from '../../../core/src/types';
+import { SearchProduct, SearchResult } from '@nosto/nosto-js/client';
+/**
+ * Applies decorator types to provided products.
+ * If value is not provided, returns the latest search results from the store instead.
+ *
+ * @example
+ * ```jsx
+ * import { useDecoratedSearchResults } from '@nosto/search-js/preact'
+ * import { priceDecorator } from '@nosto/search-js/currencies'
+ *
+ * export default () => {
+ *     const results = useDecoratedSearchResults<[typeof priceDecorator]>()
+ *
+ *     return (
+ *       <div>
+ *         List price is {results[0].listPriceText}
+ *       </div>
+ *     )
+ * }
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function useDecoratedSearchResults<T extends readonly HitDecorator[]>(): DecoratedResult<T>;
+export declare function useDecoratedSearchResults<T extends readonly HitDecorator[]>(products: SearchProduct): DecoratedProduct<T>;
+export declare function useDecoratedSearchResults<T extends readonly HitDecorator[]>(products: SearchResult): DecoratedResult<T>;

package/dist/preact/src/hooks/useFacet.d.ts

@@ -0,0 +1,60 @@
+import { SearchTermsFacet } from '@nosto/nosto-js/client';
+/**
+ * Preact hook that provides facet state to the component.
+ * @param facet
+ * @example
+ * ```jsx
+ * import { useFacet } from '@nosto/search-js/preact'
+ *
+ * export default () => {
+ *     const { active, selectedFiltersCount, toggleActive, toggleProductFilter } = useFacet(facet)
+ *     return (
+ *         <li class={`ns-sidebar-dropdown ${active ? "ns-active" : ""}`}>
+ *             <span
+ *                 onClick={toggleActive}
+ *             >
+ *                 <span>{facet.name}</span>
+ *                 {selectedFiltersCount > 0 && (
+ *                     <span>{selectedFiltersCount}</span>
+ *                 )}
+ *             </span>
+ *             <div>
+ *                 <ul>
+ *                     {facet.data?.map(value => (
+ *                         <li key={value.value}>
+ *                             <label>
+ *                                 {value.value}
+ *                                 <input
+ *                                     type="checkbox"
+ *                                     checked={value.selected}
+ *                                     onChange={e => {
+ *                                         e.preventDefault()
+ *                                         toggleProductFilter(
+ *                                             facet.field,
+ *                                             value.value,
+ *                                             !value.selected
+ *                                         )
+ *                                     }}
+ *                                 />
+ *                             </label>
+ *                             <span>{value.count}</span>
+ *                         </li>
+ *                     ))}
+ *                 </ul>
+ *             </div>
+ *         </li>
+ *     );
+ * }
+ * ```
+ * @group Hooks
+ */
+export declare function useFacet(facet: SearchTermsFacet): {
+    /** Active value */
+    active: boolean;
+    /** Selected filters count */
+    selectedFiltersCount: number;
+    /** Toggle active function */
+    toggleActive: () => void;
+    /** Toggle product filter function */
+    toggleProductFilter: (field: string, value: string, active: boolean) => Promise<void>;
+};

package/dist/preact/src/hooks/useFacets.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Preact hook that imports the facets to the component.
+ * @example
+ * ```jsx
+ * import { useFacets } from '@nosto/search-js/preact'
+ * import { defaultConfig } from "../config"
+ *
+ * export default () => {
+ *   const { loading, facets } = useFacets()
+ *
+ *   return (
+ *     <div style={loading ? "opacity: 0.3;" : ""}>
+ *       <div>
+ *         <ul>
+ *           {facets.map(facet => {
+ *             switch (facet.type) {
+ *               case "terms":
+ *                 return <Facet facet={facet} />
+ *               case "stats":
+ *                 return <RangeFacet facet={facet} />
+ *               default:
+ *                 return null
+ *             }
+ *           })}
+ *         </ul>
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @group Hooks
+ *
+ */
+export declare function useFacets(): {
+    /** Loading state */
+    loading: boolean;
+    /** Array of facets*/
+    facets: import('@nosto/nosto-js/client').SearchFacet[];
+};

package/dist/preact/src/hooks/useNostoAppState.d.ts

@@ -1,4 +1,4 @@
-import { State } from "@preact/store";
+import { State } from '../store';
 /**
  * Imports a part of the Nosto state to the component.
  *
@@ -37,4 +37,5 @@ import { State } from "@preact/store";
  *
  * @group Hooks
  */
-export declare function useNostoAppState<Selected>(selector?: (state: State) => Selected): Selected;
+export declare function useNostoAppState(): State;
+export declare function useNostoAppState<Selected>(selector: (state: State) => Selected): Selected;

package/dist/preact/src/hooks/usePersonalization.d.ts

@@ -1,4 +1,4 @@
-import type { PersonalizationBoost } from "@nosto/nosto-js/client";
+import { PersonalizationBoost } from '@nosto/nosto-js/client';
 /**
  * Custom hook to fetch personalization data such as segments and boost.
  *

package/dist/preact/src/hooks/useProductFilters/useProductFilters.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Preact hook that imports the product filters to the component.
+ *
+ * @example
+ * ```jsx
+ * import { useProductFilters, useActions } from '@nosto/search-js/preact'
+ *
+ * export default () => {
+ *     const { filters } = useProductFilters()
+ *     const { toggleProductFilter } = useActions()
+ *
+ *     return filters.map((filter) => <li>
+ *         <button
+ *              title="Remove Filter"
+ *              onClick={(e) => {
+ *                  e.preventDefault()
+ *                  toggleProductFilter(
+ *                      filter.field,
+ *                      filter.value,
+ *                      false
+ *                  )
+ *              }}
+ *          >
+ *             {filter.filter}: {filter.value}{' '}
+ *             <span>&#10005;</span>
+ *          </button>
+ *     </li>)
+ * }
+ * ```
+ *
+ * @group Hooks
+ */
+export declare function useProductFilters(): {
+    /** Selected filters array. */
+    filters: ({
+        value: string;
+        field: string;
+        name: string;
+        filter: {
+            range: {
+                gt: string | number | undefined;
+                gte: string | number | undefined;
+                lt: string | number | undefined;
+                lte: string | number | undefined;
+            }[] | undefined;
+            all?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            any?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            excludeFacets?: string[];
+            field?: string;
+            hasValue?: boolean;
+            not?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            prefix?: string[];
+            value?: string[];
+        };
+        remove: () => void;
+    } | undefined)[];
+    /** Should remove all selected filters. */
+    removeAll: () => void;
+};

package/dist/preact/src/hooks/useProductFilters/useProductFiltersUtils.d.ts

@@ -0,0 +1,48 @@
+import { InputSearchTopLevelFilter } from '@nosto/nosto-js/client';
+export declare function useProductFiltersUtils(): {
+    selectFilters: (filter: InputSearchTopLevelFilter) => boolean;
+    toValueFilter: (filter: InputSearchTopLevelFilter) => {
+        value: string;
+        field: string;
+        name: string;
+        filter: {
+            range: {
+                gt: string | number | undefined;
+                gte: string | number | undefined;
+                lt: string | number | undefined;
+                lte: string | number | undefined;
+            }[] | undefined;
+            all?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            any?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            excludeFacets?: string[];
+            field?: string;
+            hasValue?: boolean;
+            not?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            prefix?: string[];
+            value?: string[];
+        };
+        remove: () => void;
+    }[];
+    toRangeFilter: (filter: InputSearchTopLevelFilter) => ({
+        value: string;
+        field: string;
+        name: string;
+        filter: {
+            range: {
+                gt: string | number | undefined;
+                gte: string | number | undefined;
+                lt: string | number | undefined;
+                lte: string | number | undefined;
+            }[] | undefined;
+            all?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            any?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            excludeFacets?: string[];
+            field?: string;
+            hasValue?: boolean;
+            not?: import('@nosto/nosto-js/client').InputSearchFilter[];
+            prefix?: string[];
+            value?: string[];
+        };
+        remove: () => void;
+    } | undefined)[];
+};

package/dist/preact/src/hooks/useRange.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A hook that returns range information and functions to update the range.
+ *
+ * @param id - The identifier for the specific range facet.
+ * @returns An object containing range information and functions to update the range.
+ *
+ * @example
+ * General usage with `useRange`:
+ * ```jsx
+ * import { useRange } from "@nosto/search-js/preact";
+ * import { useState } from "react";
+ *
+ * const Component = ({ facetId }) => {
+ *   const { min, max, range, updateRange } = useRange(facetId);
+ *
+ *   return (
+ *     <div>
+ *       Current Range: {range[0]} to {range[1]}
+ *       <button onClick={() => updateRange([min, max])}>Reset Range</button>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare function useRange(id: string): {
+    /** Min value */
+    min: number;
+    /** Max value */
+    max: number;
+    /** Range value */
+    range: number[];
+    /** Update range function */
+    updateRange: ([from, to]: [number | undefined, number | undefined]) => void;
+};