@usereactify/search 2.1.0-beta.4 → 3.0.0-beta.0

package/README.md

@@ -38,9 +38,4 @@ npm run storybook
 
 # release a version
 npm run release
-
-# release a beta version
-change the version in package.json or npm version prerelease --preid beta or npm version prerelease
-
-publish-beta
 ```

package/dist/filter/Filter.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ConfigFilterOption } from "../types";
+import type { ConfigFilterOption } from "../types/config";
 import { useFilterListProps, useFilterCollapsedState } from "../hooks";
 declare type Props = {
     noWrapper?: boolean;

package/dist/filter/FilterStack.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ConfigFilterOption } from "../types";
+import type { ConfigFilterOption } from "../types/config";
 import { useFilterCollapsedState } from "../hooks";
 declare type Props = {
     render?: (filters: ConfigFilterOption[]) => JSX.Element;

package/dist/hooks/index.d.ts

@@ -5,10 +5,8 @@ export * from "./useConfig";
 export * from "./useSearch";
 export * from "./useFilters";
 export * from "./useCuration";
-export * from "./useAnalytics";
 export * from "./useCollection";
 export * from "./useFilterStack";
 export * from "./useProductPrice";
 export * from "./useFilterListProps";
-export * from "./useCombinedResults";
 export * from "./useFilterCollapsedState";

package/dist/hooks/index.js

@@ -17,10 +17,8 @@ __exportStar(require("./useConfig"), exports);
 __exportStar(require("./useSearch"), exports);
 __exportStar(require("./useFilters"), exports);
 __exportStar(require("./useCuration"), exports);
-__exportStar(require("./useAnalytics"), exports);
 __exportStar(require("./useCollection"), exports);
 __exportStar(require("./useFilterStack"), exports);
 __exportStar(require("./useProductPrice"), exports);
 __exportStar(require("./useFilterListProps"), exports);
-__exportStar(require("./useCombinedResults"), exports);
 __exportStar(require("./useFilterCollapsedState"), exports);

package/dist/hooks/reactivesearch/useReactiveBaseProps.d.ts

@@ -2,6 +2,6 @@ export declare const useReactiveBaseProps: () => {
     app: string;
     url: string;
     credentials: string;
-    theme: import("../..").ConfigTheme | undefined;
+    theme: import("../../provider").Theme | undefined;
     transformResponse: (response: any) => Promise<any>;
 };

package/dist/hooks/reactivesearch/useReactiveDataSearchProps.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReactiveDataSearchProps = void 0;
 const react_1 = __importDefault(require("react"));
 const ahooks_1 = require("ahooks");
-const useAnalytics_1 = require("../useAnalytics");
 const debug = require("debug")("reactify-search:useReactiveDataSearchProps");
 const __1 = require("../");
 // default field for when zero search fields have been configured in Reactify
@@ -34,15 +33,8 @@ const useReactiveDataSearchProps = (props = {}) => {
             return;
         submitSearch();
     }, [submitSearch]);
-    const { track } = (0, useAnalytics_1.useAnalytics)();
-    const trackQuery = react_1.default.useCallback(() => {
-        if (!searchQuery)
-            return;
-        track({ eventName: "search", searchTerm: searchQuery });
-    }, [searchQuery, track]);
     const { run: runDebouncedTriggerQuery, cancel: cancelDebouncedTriggerQuery } = (0, ahooks_1.useDebounceFn)((triggerQuery) => {
         triggerQuery();
-        trackQuery();
     }, {
         wait: debounce !== null && debounce !== void 0 ? debounce : 300,
     });

package/dist/hooks/reactivesearch/useReactiveFilterListProps.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigFilterOption } from "../../types";
+import type { ConfigFilterOption } from "../../types/config";
 export declare const useReactiveFilterListProps: (filter: ConfigFilterOption) => {
     nestedField: string | undefined;
     customQuery: ((value?: string | string[] | undefined) => {

package/dist/hooks/reactivesearch/useReactiveResultListProps.d.ts

@@ -1,6 +1,5 @@
 declare type Props = {
     pageSize?: number;
-    pageSizeAdjust?: number;
 };
 export declare const useReactiveResultListProps: (props?: Props) => {
     size: number;

package/dist/hooks/reactivesearch/useReactiveResultListProps.js

@@ -8,13 +8,13 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
 const useReactiveReactProp_1 = require("./useReactiveReactProp");
 const useReactiveResultListProps = (props = {}) => {
-    const { pageSize, pageSizeAdjust } = props;
+    const { pageSize } = props;
     const filterStack = (0, hooks_1.useFilterStack)();
     const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)();
     const size = react_1.default.useMemo(() => {
         var _a;
-        return ((_a = pageSize !== null && pageSize !== void 0 ? pageSize : filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) !== null && _a !== void 0 ? _a : 20) - (pageSizeAdjust !== null && pageSizeAdjust !== void 0 ? pageSizeAdjust : 0);
-    }, [pageSize, pageSizeAdjust, filterStack]);
+        return (_a = pageSize !== null && pageSize !== void 0 ? pageSize : filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) !== null && _a !== void 0 ? _a : 20;
+    }, [pageSize, filterStack]);
     return react_1.default.useMemo(() => ({
         size,
         URLParams: true,

package/dist/hooks/useCollection.d.ts

@@ -1 +1 @@
-export declare const useCollection: () => import("..").Collection | undefined;
+export declare const useCollection: () => import("../provider").Collection | undefined;

package/dist/hooks/useFilterCollapsedState.d.ts

@@ -1,4 +1,4 @@
-import { ConfigFilterOption } from "../types";
+import { ConfigFilterOption } from "../types/config";
 export declare const useFilterCollapsedState: (filter: ConfigFilterOption) => {
     collapsed: boolean;
     shouldRender: boolean;

package/dist/hooks/useFilterListProps.d.ts

@@ -1,4 +1,5 @@
-import { ConfigFilterOption, ReactivesearchFilterProps } from "../types";
+import { ConfigFilterOption } from "../types/config";
+import { ReactivesearchFilterProps } from "../types/reactivesearch";
 export declare const useFilterListProps: (filter: ConfigFilterOption, reactivesearchFilterProps: ReactivesearchFilterProps) => {
     filter: ConfigFilterOption;
     options: {

package/dist/hooks/useFilters.d.ts

@@ -1 +1 @@
-export declare const useFilters: () => import("..").ConfigFilterOption[];
+export declare const useFilters: () => Omit<import("../types/firestore").FilterOption, "enabled">[];

package/dist/hooks/usePages.d.ts

@@ -1,4 +1,4 @@
-import { ReactivesearchPaginationProps } from "../types";
+import { ReactivesearchPaginationProps } from "../types/reactivesearch";
 export declare const usePages: (props: ReactivesearchPaginationProps) => {
     pagesToShow: number[];
     hasNextPage: boolean;

package/dist/hooks/usePages.js

@@ -16,19 +16,14 @@ const usePages = (props) => {
     const pagesToShow = react_1.default.useMemo(() => getPages(pages, totalPages, currentPage), [pages, totalPages, currentPage]);
     // default currentPage is zero-indexed, actualCurrentPage is one-indexed
     const actualCurrentPage = react_1.default.useMemo(() => currentPage + 1, [currentPage]);
-    const hasNextPage = react_1.default.useMemo(() => actualCurrentPage < totalPages, [
-        actualCurrentPage,
-        totalPages,
-    ]);
+    const hasNextPage = react_1.default.useMemo(() => actualCurrentPage < totalPages, [actualCurrentPage, totalPages]);
     const handleNextPage = react_1.default.useCallback((event) => {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         if (!hasNextPage)
             return;
         setPage(currentPage + 1);
     }, [hasNextPage, currentPage, setPage]);
-    const hasPreviousPage = react_1.default.useMemo(() => actualCurrentPage > 1, [
-        actualCurrentPage,
-    ]);
+    const hasPreviousPage = react_1.default.useMemo(() => actualCurrentPage > 1, [actualCurrentPage]);
     const handlePreviousPage = react_1.default.useCallback((event) => {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         if (!hasPreviousPage)

package/dist/hooks/useProductPrice.d.ts

@@ -1,5 +1,5 @@
 import currency from "currency.js";
-import { Product } from "../types";
+import { ElasticProduct } from "../types/elastic";
 declare type PriceResponse = {
     onSale: boolean;
     price?: currency;
@@ -8,5 +8,5 @@ declare type PriceResponse = {
     compareAtPrice?: currency;
     formattedCompareAtPrice?: string;
 };
-export declare const useProductPrice: (product: Product) => PriceResponse;
+export declare const useProductPrice: (product: ElasticProduct) => PriceResponse;
 export {};

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export * from "./types";
 export * from "./hooks";
 export * from "./filter";
 export * from "./sensor";
 export * from "./result";
 export * from "./search";
 export * from "./provider";
+export * from "./types/config";
+export * from "./types/elastic";
+export * from "./types/reactivesearch";

package/dist/index.js

@@ -10,10 +10,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./types"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./filter"), exports);
 __exportStar(require("./sensor"), exports);
 __exportStar(require("./result"), exports);
 __exportStar(require("./search"), exports);
 __exportStar(require("./provider"), exports);
+__exportStar(require("./types/config"), exports);
+__exportStar(require("./types/elastic"), exports);
+__exportStar(require("./types/reactivesearch"), exports);

package/dist/provider.d.ts

@@ -1,22 +1,21 @@
 import React from "react";
-import type { Collection, Config, ConfigSort, ConfigFilter, ConfigCuration, ConfigCredentials, ConfigTheme } from "./types";
+import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/config";
 declare type Context = {
     index: string;
     config: Config;
-    shopName: string;
     sortOption: ConfigSort;
     sortOptions: ConfigSort[];
     searchQuery?: string;
     filterStack?: ConfigFilter;
     collection?: Collection;
     instantSearch: boolean;
-    credentials: ConfigCredentials;
+    credentials: Credentials;
     submitSearch: (localSearchQuery?: string) => void;
     setSearchQuery: (searchQuery: string) => void;
     setSortOption: (sortOptionId: string) => void;
     showInstantSearchResults: boolean;
     setShowInstantSearchResults: (showInstantSearchResults: boolean) => void;
-    theme?: ConfigTheme;
+    theme?: Theme;
     curation?: ConfigCuration;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
@@ -27,13 +26,12 @@ declare const Context: React.Context<Context | undefined>;
 declare type Props = {
     index: string;
     config: Config;
-    shopName: string;
     filterStackId?: string;
     collection?: Collection;
     noReactiveBase?: boolean;
     instantSearch?: boolean;
-    credentials?: ConfigCredentials;
-    theme?: ConfigTheme;
+    credentials?: Credentials;
+    theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
     /** Enable the new callouts feature */
@@ -41,4 +39,33 @@ declare type Props = {
 };
 export declare const Provider: React.FC<Props>;
 export declare const useContext: () => Context;
+export interface Collection {
+    id: number;
+    handle: string;
+    title: string;
+}
+export interface Credentials {
+    username: string;
+    password: string;
+    endpoint: string;
+}
+export interface Theme {
+    component?: any;
+    colors?: ThemeColors;
+    typography?: ThemeTypography;
+}
+export interface ThemeTypography {
+    fontFamily?: string;
+    fontSize?: string;
+}
+export interface ThemeColors {
+    alertColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    extColor?: string;
+    primaryTextColor?: string;
+    primaryColor?: string;
+    textColor?: string;
+    titleColor?: string;
+}
 export {};

package/dist/provider.js

@@ -15,7 +15,7 @@ const defaultCredentials = {
 };
 const Provider = (props) => {
     var _a;
-    const { index, config, shopName, children, collection, instantSearch, filterStackId, noReactiveBase, enableCallouts, additionalComponentIds, } = props;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, enableCallouts, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = props.theme || {
         typography: {
@@ -64,7 +64,6 @@ const Provider = (props) => {
     const contextValue = react_1.default.useMemo(() => ({
         index,
         config,
-        shopName,
         collection,
         credentials,
         searchQuery,
@@ -85,7 +84,6 @@ const Provider = (props) => {
         index,
         config,
         curation,
-        shopName,
         collection,
         credentials,
         searchQuery,

package/dist/result/ResultCard.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { Product } from "../types";
+import type { ElasticProduct } from "../types/elastic";
 import { useProductPrice } from "../hooks";
 declare type Props = {
-    product: Product;
+    product: ElasticProduct;
     pagePosition: number;
     render?: (props: Omit<Props, "render"> & ReturnType<typeof useProductPrice>) => JSX.Element;
 };

package/dist/result/ResultCard.js

@@ -24,21 +24,10 @@ const ResultCard = (_a) => {
     if (render)
         return render(Object.assign(Object.assign({}, props), productPrice));
     const { formattedPrice, formattedCompareAtPrice, onSale } = productPrice;
-    const { track } = (0, hooks_1.useAnalytics)();
-    const handleClick = react_1.default.useCallback((e) => {
-        e.preventDefault();
-        const { id } = product;
-        console.log("tracking click product event");
-        track({
-            eventName: "select_item",
-            id,
-        }).then(() => {
-            console.log("tracking click product event finished");
-            window.location.href = `/products/${product.handle}`;
-        });
-    }, [track, product]);
     return (react_1.default.createElement("article", null,
-        react_1.default.createElement("a", { onClick: handleClick }, product.title),
+        react_1.default.createElement("a", { href: `/products/${product.handle}` },
+            product.image && react_1.default.createElement("img", { src: product.image, width: "100%" }),
+            product.title),
         react_1.default.createElement("span", null, formattedPrice),
         onSale && (react_1.default.createElement("span", { style: { textDecoration: "line-through" } }, formattedCompareAtPrice))));
 };

package/dist/result/ResultCardCallout.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ConfigCallout } from "../types";
+import { ElasticCallout } from "../types/elastic";
 declare type Props = {
-    callout: ConfigCallout;
+    callout: ElasticCallout;
     pagePosition: number;
     render?: (props: Omit<Props, "render">) => JSX.Element;
 };

package/dist/result/ResultCardCallout.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultCardCallout = void 0;
 const react_1 = __importDefault(require("react"));
 const ResultCardCallout = (props) => {
-    const { callout } = props;
+    const { callout: { callout }, } = props;
     const styleProp = react_1.default.useMemo(() => {
         var _a, _b;
         return ({
@@ -31,7 +31,7 @@ const ResultCardCallout = (props) => {
 exports.ResultCardCallout = ResultCardCallout;
 const ResultCardCalloutInner = (_a) => {
     var { render } = _a, props = __rest(_a, ["render"]);
-    const { callout } = props;
+    const { callout: { callout }, } = props;
     if (render)
         return render(props);
     return react_1.default.createElement("p", null, callout.title);

package/dist/result/ResultList.d.ts

@@ -4,10 +4,7 @@ import { ResultPagination } from "./ResultPagination";
 import { ResultCardCallout } from "./ResultCardCallout";
 import { ResultLoadMoreButton } from "./ResultLoadMoreButton";
 import { ResultPaginationNextPrev } from "./ResultPaginationNextPrev";
-import { ResultCombined, ReactivesearchError, ReactivesearchResultProps } from "../types";
-declare type ResultProps = ReactivesearchResultProps & {
-    results: ResultCombined[];
-};
+import { ReactivesearchError, ReactivesearchResultProps } from "../types/reactivesearch";
 declare type Props = {
     pageSize?: number;
     gridColumns?: number;
@@ -17,9 +14,9 @@ declare type Props = {
     renderResultCard?: Parameters<typeof ResultCard>[0]["render"];
     renderPagination?: Parameters<typeof ResultPagination>[0]["render"];
     renderResultCardCallout?: Parameters<typeof ResultCardCallout>[0]["render"];
-    renderAfter?: (props: ResultProps) => JSX.Element | null;
-    renderBefore?: (props: ResultProps) => JSX.Element | null;
-    renderResults?: (props: ResultProps) => JSX.Element | null;
+    renderAfter?: (props: ReactivesearchResultProps) => JSX.Element | null;
+    renderBefore?: (props: ReactivesearchResultProps) => JSX.Element | null;
+    renderResults?: (props: ReactivesearchResultProps) => JSX.Element | null;
     renderError?: (props: {
         error: ReactivesearchError;
     }) => JSX.Element | null;

package/dist/result/ResultList.js

@@ -13,20 +13,16 @@ const ResultLoadMoreButton_1 = require("./ResultLoadMoreButton");
 const ResultPaginationNextPrev_1 = require("./ResultPaginationNextPrev");
 const provider_1 = require("../provider");
 const hooks_1 = require("../hooks");
+const elastic_1 = require("../types/elastic");
 const ResultList = (props) => {
-    var _a, _b;
     const { pageSize } = props;
-    const curation = (0, hooks_1.useCuration)();
-    const { enableCallouts } = (0, provider_1.useContext)();
     const reactiveResultListProps = (0, hooks_1.useReactiveResultListProps)({
         pageSize,
-        pageSizeAdjust: enableCallouts ? (_b = (_a = curation === null || curation === void 0 ? void 0 : curation.callouts) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 : 0,
     });
     return (react_1.default.createElement(ReactiveList_1.default, Object.assign({}, reactiveResultListProps, { renderPagination: (reactivesearchPaginationProps) => (react_1.default.createElement(ResultPaginationInner, Object.assign({}, props, reactivesearchPaginationProps))), render: (reactivesearchResultProps) => (react_1.default.createElement(ResultListInner, Object.assign({}, props, { reactivesearchResultProps: reactivesearchResultProps }))) })));
 };
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
-    var _a;
     const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
     const curation = (0, hooks_1.useCuration)();
     const filterStack = (0, hooks_1.useFilterStack)();
@@ -34,13 +30,6 @@ const ResultListInner = (props) => {
     const { enableCallouts } = (0, provider_1.useContext)();
     const initialSearchHasRun = react_1.default.useMemo(() => "undefined" !==
         typeof reactivesearchResultProps.resultStats.numberOfResults, [reactivesearchResultProps]);
-    const combinedResults = (0, hooks_1.useCombinedResults)({
-        callouts: (_a = curation === null || curation === void 0 ? void 0 : curation.callouts) !== null && _a !== void 0 ? _a : [],
-        products: reactivesearchResultProps.data,
-    });
-    const resultProps = react_1.default.useMemo(() => {
-        return Object.assign(Object.assign({}, reactivesearchResultProps), { results: combinedResults });
-    }, [combinedResults, reactivesearchResultProps]);
     const styleProp = react_1.default.useMemo(() => !!enableCallouts
         ? {
             display: "grid",
@@ -65,21 +54,21 @@ const ResultListInner = (props) => {
         return react_1.default.createElement("div", null, "No results");
     }
     if (renderResults) {
-        return renderResults(resultProps);
+        return renderResults(reactivesearchResultProps);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        renderBefore && renderBefore(resultProps),
-        react_1.default.createElement("section", { className: listClassName, style: styleProp }, combinedResults.map((result, key) => {
-            if ("product" === result.type) {
-                return (react_1.default.createElement(ResultCard_1.ResultCard, { product: result.data, pagePosition: key + 1, render: renderResultCard, key: `product-${result.data._id}` }));
+        renderBefore && renderBefore(reactivesearchResultProps),
+        react_1.default.createElement("section", { className: listClassName, style: styleProp }, reactivesearchResultProps.data.map((result, key) => {
+            if (elastic_1.ElasticDocumentType.Product === result.type) {
+                return (react_1.default.createElement(ResultCard_1.ResultCard, { key: result._id, product: result, pagePosition: key + 1, render: renderResultCard }));
             }
-            if (!!enableCallouts && "callout" === result.type) {
-                return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { callout: result.data, pagePosition: key + 1, render: renderResultCardCallout, key: `callout-${result.data.id}` }));
+            if (!!enableCallouts && elastic_1.ElasticDocumentType.Callout === result.type) {
+                return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { key: result._id, callout: result, pagePosition: key + 1, render: renderResultCardCallout }));
             }
             return null;
         })),
         !instantSearch && "load_more" === (filterStack === null || filterStack === void 0 ? void 0 : filterStack.paginationType) && (react_1.default.createElement(ResultLoadMoreButton_1.ResultLoadMoreButton, Object.assign({}, reactivesearchResultProps, { render: renderLoadMoreButton }))),
-        renderAfter && renderAfter(resultProps)));
+        renderAfter && renderAfter(reactivesearchResultProps)));
 };
 const ResultPaginationInner = (props) => {
     const { renderPagination, renderPaginationNextPrev } = props;

package/dist/result/ResultLoadMoreButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactivesearchResultProps } from "../types";
+import { ReactivesearchResultProps } from "../types/reactivesearch";
 declare type Props = ReactivesearchResultProps & {
     render?: (props: Omit<Props, "render"> & {
         hasMore: boolean;

package/dist/result/ResultPagination.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { usePages } from "../hooks";
-import { ReactivesearchPaginationProps } from "../types";
+import { ReactivesearchPaginationProps } from "../types/reactivesearch";
 declare type Props = ReactivesearchPaginationProps & {
     render?: (props: Omit<Props, "render"> & ReturnType<typeof usePages>) => JSX.Element;
 };

package/dist/result/ResultPaginationNextPrev.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { usePages } from "../hooks";
-import { ReactivesearchPaginationProps } from "../types";
+import { ReactivesearchPaginationProps } from "../types/reactivesearch";
 declare type Props = ReactivesearchPaginationProps & {
     render?: (props: Omit<Props, "render"> & ReturnType<typeof usePages>) => JSX.Element;
 };

package/dist/result/ResultStateProvider.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactivesearchSearchStatePage } from "../types";
+import { ReactivesearchSearchStatePage } from "../types/reactivesearch";
 declare type Props = {
     render: (props: ReactivesearchSearchStatePage) => JSX.Element | null;
 };