@nosto/search-js 1.4.0 → 1.5.0

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

@@ -0,0 +1,98 @@
+/**
+ * Get range selector state
+ * @param id - Id of the range Selector
+ * @example
+ * ```jsx
+ * import { useRangeCheckboxes } from "@nosto/search-js/preact"
+ * import { useState } from "preact/hooks"
+ * import RadioButton from "./elements/RadioButton"
+ * import RangeInput from "./elements/RangeInput"
+ *
+ * export default function RangeSelector({ facet }) {
+ *     const {
+ *         min,
+ *         max,
+ *         range,
+ *         ranges,
+ *         updateRange,
+ *         handleMinChange,
+ *         handleMaxChange,
+ *         isSelected,
+ *     } = useRangeSelector(facet.id, 100)
+ *
+ *     return (
+ *         <li>
+ *             <div>
+ *                 <ul>
+ *                     {ranges.map(({ min, max, selected }, index) => {
+ *                         return (
+ *                             <li>
+ *                                 <RadioButton
+ *                                     key={index}
+ *                                     value={`${min} - ${max}`}
+ *                                     selected={selected}
+ *                                     onChange={() => updateRange([min, max])}
+ *                                 />
+ *                             </li>
+ *                         )
+ *                     })}
+ *                     <div>
+ *                         <div>
+ *                             <label htmlFor={`ns-${facet.id}-min`}>
+ *                                 Min.
+ *                             </label>
+ *                             <RangeInput
+ *                                 id={`ns-${facet.id}-min`}
+ *                                 min={min}
+ *                                 max={max}
+ *                                 range={range}
+ *                                 value={range[0] ?? min}
+ *                                 onChange={e => handleMinChange(parseFloat(e.currentTarget.value) || min)}
+ *                             />
+ *                         </div>
+ *                         <div>
+ *                             <label htmlFor={`ns-${facet.id}-max`}>
+ *                                 Max.
+ *                             </label>
+ *                             <RangeInput
+ *                                 id={`ns-${facet.id}-max`}
+ *                                 min={min}
+ *                                 max={max}
+ *                                 range={range}
+ *                                 value={range[1] ?? max}
+ *                                 onChange={e => handleMaxChange(parseFloat(e.currentTarget.value) || max)}
+ *                             />
+ *                         </div>
+ *                     </div>
+ *                 </ul>
+ *             </div>
+ *         </li>
+ *     )
+ * }
+ *
+ *```
+ *
+ * @group Hooks
+ */
+export declare function useRangeSelector(id: string, rangeSize: number): {
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+    /** Range value */
+    range: number[];
+    /** Update range function */
+    updateRange: ([from, to]: [number | undefined, number | undefined]) => void;
+    /** Ranges */
+    ranges: {
+        min: number;
+        max: number;
+        selected: boolean | null;
+    }[];
+    /** Handle min change */
+    handleMinChange: (value: number) => void;
+    /** Handle max change */
+    handleMaxChange: (value: number) => void;
+    /** Is selected */
+    isSelected: boolean;
+};

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

@@ -0,0 +1,82 @@
+import { SearchKeywords, SearchProducts } from '@nosto/nosto-js/client';
+/**
+ * Preact hook that imports response data to the component.
+ * @example
+ * ```jsx
+ * import { useResponse } from '@nosto/search-js/preact'
+ * import { defaultConfig } from "../config"
+ *
+ * export default () => {
+ *   const { products, keywords } = useResponse()
+ *   return (
+ *     <div>
+ *       <div>
+ *         {keywords.hits.length > 0 && (
+ *           <div>
+ *             <div>
+ *               Keywords
+ *             </div>
+ *             <div>
+ *               <Keywords
+ *                 hits={keywords.hits}
+ *                 keywordComponent={Keyword}
+ *                 elementComponent={Element}
+ *                 keywordInCategoryComponent={KeywordInCategory}
+ *               />
+ *             </div>
+ *             {!products.hits.length && <SubmitButton />}
+ *           </div>
+ *         )}
+ *         {products.hits.length > 0 && (
+ *           <div>
+ *             <div>
+ *               Products
+ *             </div>
+ *             <div>
+ *               {products.hits.map(hit => {
+ *                 return (
+ *                   <AutocompleteElement hit={hit}>
+ *                     <div
+ *                       data-url={hit.url}
+ *                       data-nosto-element="product"
+ *                     >
+ *                       <img
+ *                         src={hit.imageUrl ?? productImagePlaceholder}
+ *                         alt={hit.name}
+ *                       />
+ *                       <div>
+ *                         {hit.brand && (
+ *                           <div>{hit.brand}</div>
+ *                         )}
+ *                         <div>
+ *                           {hit.name}
+ *                         </div>
+ *                         <div>
+ *                           <span>{formatCurrency(hit.price)}</span>
+ *                           {hit.listPrice && hit.listPrice > hit.price && (
+ *                             <span>
+ *                               {formatCurrency(hit.listPrice)}
+ *                             </span>
+ *                           )}
+ *                         </div>
+ *                       </div>
+ *                     </div>
+ *                   </AutocompleteElement>
+ *                 )
+ *               })}
+ *             </div>
+ *             <SubmitButton />
+ *           </div>
+ *         )}
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @group Hooks
+ *
+ */
+export declare function useResponse(): {
+    products: SearchProducts;
+    keywords: SearchKeywords;
+};

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

@@ -0,0 +1,17 @@
+/**
+ * @group Hooks
+ * @returns The number of selected filters.
+ * @example
+ * ```jsx
+ * import { useSelectedFiltersCount } from '@nosto/search-js/preact'
+ * export default () => {
+ *    const selectedFiltersCount = useSelectedFiltersCount()
+ *    return (
+ *        <div>
+ *            {selectedFiltersCount} filters selected
+ *        </div>
+ *    )
+ * }
+ * ```
+ */
+export declare function useSelectedFiltersCount(): number;

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

@@ -0,0 +1,50 @@
+/**
+ * Preact hook that provides size options to the component.
+ * @param sizes
+ * @param serpSize
+ * @example
+ * ```jsx
+ * import { useSizeOptions } from "@nosto/search-js/preact"
+ * import { defaultConfig, sizes } from "../config"
+ *
+ * export default () => {
+ *   const options = useSizeOptions(sizes, defaultConfig.serpSize)
+ *   const { from, to, total, size, sizeOptions, handleSizeChange } = options
+ *
+ *   return (
+ *    <div>
+ *      <div>
+ *        {from} - {total < to ? total : to} of {total} items
+ *      </div>
+ *       {sizeOptions.length > 0 && (
+ *        <div>
+ *          <select
+ *            value={size}
+ *            onChange={e => handleSizeChange(e.target.value)}
+ *          >
+ *            {sizeOptions.map(v => (
+ *              <option value={v}>{v} items per page</option>
+ *            ))}
+ *          </select>
+ *        </div>
+ *      )}
+ *    </div>
+ *    )
+ * }
+ * ```
+ * @group Hooks
+ */
+export declare function useSizeOptions(sizes: number[], serpSize: number): {
+    /** from value */
+    from: number;
+    /** to value */
+    to: number;
+    /** total value */
+    total: number;
+    /** size value */
+    size: number;
+    /** Array of size options */
+    sizeOptions: number[];
+    /** Should be called when size is changed */
+    handleSizeChange: (size: number) => void;
+};

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

@@ -0,0 +1,47 @@
+import { InputSearchSort } from '@nosto/nosto-js/client';
+export interface SortOption {
+    id: string;
+    value: {
+        name: string;
+        sort: InputSearchSort[];
+    };
+}
+/**
+ * Preact hook that import sort state to the component.
+ * @param sortOptions
+ * @example
+ * ```jsx
+ * import { useSort } from '@nosto/search-js/preact'
+ * import { sortOptions } from '../config'
+ *
+ * export default () => {
+ *    const { activeSort, setSort } = useSort(sortOptions)
+ *
+ *    const handleSortChange = (event) => {
+ *        setSort(event.target.value)
+ *    }
+ *
+ *    return (
+ *        <div>
+ *            <select
+ *                value={activeSort}
+ *                onChange={e => setSort(e.target.value)}
+ *            >
+ *                {sortOptions.map(option => (
+ *                    <option key={option.id} value={option.id}>
+ *                        {option.value.name}
+ *                    </option>
+ *                ))}
+ *            </select>
+ *        </div>
+ *    )
+ * }
+ * ```
+ * @group Hooks
+ */
+export declare function useSort(sortOptions: SortOption[]): {
+    /** Active sort */
+    activeSort: string;
+    /** Set sort function */
+    setSort: (sortId: string) => void;
+};

package/dist/preact/src/hooks/useSort/utils.d.ts

@@ -0,0 +1,9 @@
+import { InputSearchSort } from '@nosto/nosto-js/client';
+export declare function createSortOption(id: string, name: string, ...sort: InputSearchSort[]): {
+    id: string;
+    value: {
+        name: string;
+        sort: InputSearchSort[];
+    };
+};
+export declare function isMatchingSort(optionSort: InputSearchSort[], querySort: InputSearchSort[]): boolean;

package/dist/preact/src/search/defaults.d.ts

@@ -0,0 +1,45 @@
+import { SearchQuery } from '@nosto/nosto-js/client';
+import { PageType } from '../api/types';
+export declare function applyQueryDefaults(pageType: PageType, query: SearchQuery): {
+    keywords?: import('@nosto/nosto-js/client').InputSearchQuery["keywords"] & {
+        fields: string[];
+        facets: string[];
+    };
+    products: {
+        boost?: import('@nosto/nosto-js/client').InputSearchBoost[];
+        categoryId?: string;
+        categoryPath?: string;
+        collapse?: string;
+        customFacets?: import('@nosto/nosto-js/client').InputSearchFacetConfig[];
+        emptyQueryMatchesAll?: boolean;
+        exclusionBehaviour?: import('@nosto/nosto-js/client').SearchExclusionBehaviour;
+        facets: string[];
+        filter?: import('@nosto/nosto-js/client').InputSearchTopLevelFilter[];
+        from?: number;
+        outOfStockBehaviour?: import('@nosto/nosto-js/client').SearchOutOfStockBehaviour;
+        personalizationBoost?: import('@nosto/nosto-js/client').InputSearchBoost[];
+        personalizationWeight?: number;
+        pin?: import('@nosto/nosto-js/client').InputSearchPin[];
+        preFilter?: import('@nosto/nosto-js/client').InputSearchFilter[];
+        queryFields?: import('@nosto/nosto-js/client').SearchQueryField[];
+        relevanceWeight?: number;
+        showPrivateFields?: boolean;
+        size?: number;
+        sort?: import('@nosto/nosto-js/client').InputSearchSort[];
+        variationId?: string;
+        fields: string[];
+    };
+    explain?: boolean | undefined;
+    query?: string | undefined;
+    redirect?: string | undefined;
+    abTests?: import('@nosto/nosto-js/client').InputSearchABTest[] | undefined;
+    accountId?: string | undefined;
+    customRules?: import('@nosto/nosto-js/client').InputSearchRule[] | undefined;
+    rules?: string[] | undefined;
+    segments?: string[] | undefined;
+    sessionParams?: import('@nosto/nosto-js/client').InputSearchQuery | undefined;
+    time?: number | undefined;
+    name?: string;
+};
+export declare const defaultProductFields: string[];
+export declare const defaultKeywordFields: string[];

package/dist/preact/src/search/resultCaching.d.ts

@@ -0,0 +1,4 @@
+import { SearchQuery, SearchResult } from '@nosto/nosto-js/client';
+export declare const STORAGE_ENTRY_NAME = "nosto:search:searchResult";
+export declare function cacheSearchResult(usePersistentCache: boolean, query: SearchQuery, result: SearchResult): void;
+export declare function loadCachedResultIfApplicable(usePersistentCache: boolean, query: SearchQuery): SearchResult | null;