@usereactify/search 4.4.1 → 5.0.0-beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "4.4.1",
+  "version": "5.0.0-beta.2",
   "license": "MIT",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -12,14 +12,12 @@
   ],
   "scripts": {
     "watch": "tsc --watch",
-    "release": "standard-version",
-    "release:patch": "standard-version --release-as patch",
-    "release:beta": "standard-version --release-as minor --prerelease beta",
-    "release:local": "yalc publish",
-    "build": "rimraf dist && tsc",
+    "release": "standard-version --prerelease rc",
+    "release:beta": "standard-version --prerelease beta",
+    "prebuild": "rimraf dist",
+    "build": "tsc",
     "prettier": "prettier --write .",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006"
   },
   "husky": {
     "hooks": {
@@ -33,7 +31,8 @@
     ]
   },
   "dependencies": {
-    "@sentry/react": "7.1.1",
+    "@sentry/react": "7.7.0",
+    "@sentry/tracing": "7.7.0",
     "ahooks": "2.10.11",
     "axios": "0.26.1",
     "currency.js": "2.0.4",

package/dist/src/filter/Filter.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import type { ConfigFilterOption } from "../types/config";
-import { useFilterListProps, useFilterCollapsedState } from "../hooks";
-declare type Props = {
-    noWrapper?: boolean;
-    filter: ConfigFilterOption;
-    renderFilterList?: (props: Omit<Props, "renderFilterList"> & {
-        filterListProps: ReturnType<typeof useFilterListProps>;
-    }) => JSX.Element;
-} & Partial<ReturnType<typeof useFilterCollapsedState>>;
-export declare const Filter: React.FC<Props>;
-export {};

package/dist/src/filter/Filter.js

@@ -1,71 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filter = void 0;
-const react_1 = __importDefault(require("react"));
-const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/MultiList"));
-const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
-const hooks_1 = require("../hooks");
-const FilterList_1 = require("./FilterList");
-const hooks_2 = require("../hooks");
-const Filter = (props) => {
-    const { filter } = props;
-    const reactiveFilterListProps = (0, hooks_2.useReactiveFilterListProps)(filter);
-    if ("single" === filter.displayType) {
-        return (react_1.default.createElement(SingleList_1.default, Object.assign({}, reactiveFilterListProps, { render: (reactivesearchFilterProps) => (react_1.default.createElement(FilterListInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps }))) })));
-    }
-    if ("multi" === filter.displayType) {
-        return (react_1.default.createElement(MultiList_1.default, Object.assign({ showCheckbox: false }, reactiveFilterListProps, { render: (reactivesearchFilterProps) => (react_1.default.createElement(FilterListInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps }))) })));
-    }
-    console.log(`filter with display type "${filter.displayType}" not yet supported`);
-    return null;
-};
-exports.Filter = Filter;
-// inner component exists only so we can use memos in reactivesearch render functions
-const FilterListInner = (props) => {
-    const { filter, noWrapper, renderFilterList, reactivesearchFilterProps } = props, otherProps = __rest(props, ["filter", "noWrapper", "renderFilterList", "reactivesearchFilterProps"]);
-    const { track } = (0, hooks_1.useAnalytics)();
-    const _a = (0, hooks_2.useFilterListProps)(filter, reactivesearchFilterProps), { handleChange } = _a, filterListProps = __rest(_a, ["handleChange"]);
-    const handleFilterChange = react_1.default.useCallback((value) => {
-        handleChange(value);
-        track({
-            eventName: "filterChange",
-            payload: {
-                name: filter.name,
-                value: value,
-            },
-        });
-    }, [filterListProps]);
-    const updatedFilterListProps = Object.assign(Object.assign({}, filterListProps), { handleChange: handleFilterChange });
-    // hide entire filter when no options available
-    if (0 === filterListProps.options.length)
-        return null;
-    if (renderFilterList) {
-        return renderFilterList(Object.assign({ filterListProps: updatedFilterListProps, filter }, otherProps));
-    }
-    if (noWrapper) {
-        return react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, updatedFilterListProps));
-    }
-    return (react_1.default.createElement(FilterWrapper, Object.assign({}, props),
-        react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, updatedFilterListProps))));
-};
-// wrap the filter with a clickable title
-const FilterWrapper = ({ filter, children, collapsed, shouldRender, collapsedToggle }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h1", { onClick: () => collapsedToggle && collapsedToggle() }, filter.name),
-        ("undefined" === typeof shouldRender || !!shouldRender) && (react_1.default.createElement("div", { style: { display: collapsed ? "none" : "block" } }, children)),
-        "undefined" !== typeof collapsed && !!collapsed && (react_1.default.createElement("div", null, "Filter is collapsed."))));
-};

package/dist/src/filter/FilterList.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { useFilterListProps } from "../hooks";
-export declare type Props = ReturnType<typeof useFilterListProps>;
-export declare const FilterList: React.FC<Props>;

package/dist/src/filter/FilterList.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterList = void 0;
-const react_1 = __importDefault(require("react"));
-const FilterList = ({ options, handleChange }) => (react_1.default.createElement("ul", null, options.map(({ key, doc_count, checked }) => (react_1.default.createElement("li", { key: key },
-    react_1.default.createElement("label", null,
-        react_1.default.createElement("input", { value: key, type: "checkbox", checked: checked, onChange: ({ target: { value } }) => handleChange(value) }),
-        key,
-        " (",
-        doc_count,
-        ")"))))));
-exports.FilterList = FilterList;

package/dist/src/filter/FilterStack.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import type { ConfigFilterOption } from "../types/config";
-import { useFilterCollapsedState } from "../hooks";
-declare type Props = {
-    render?: (filters: ConfigFilterOption[]) => JSX.Element;
-    renderFilter?: (props: {
-        filter: ConfigFilterOption;
-    } & ReturnType<typeof useFilterCollapsedState>) => JSX.Element;
-};
-export declare const FilterStack: React.FC<Props>;
-export {};

package/dist/src/filter/FilterStack.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterStack = void 0;
-const react_1 = __importDefault(require("react"));
-const Filter_1 = require("./Filter");
-const hooks_1 = require("../hooks");
-const FilterStack = (props) => {
-    const { render } = props;
-    const filters = (0, hooks_1.useFilters)();
-    if (0 === filters.length)
-        return null;
-    if (render)
-        return render(filters);
-    return (react_1.default.createElement(react_1.default.Fragment, null, filters.map((filter) => (react_1.default.createElement(FilterWithState, Object.assign({ key: filter.id, filter: filter }, props))))));
-};
-exports.FilterStack = FilterStack;
-const FilterWithState = ({ filter, renderFilter, }) => {
-    const collapsedProps = (0, hooks_1.useFilterCollapsedState)(filter);
-    if (renderFilter)
-        return renderFilter(Object.assign({ filter }, collapsedProps));
-    return react_1.default.createElement(Filter_1.Filter, Object.assign({ filter: filter }, collapsedProps));
-};

package/dist/src/hooks/useCollection.d.ts

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

package/dist/src/hooks/useCollection.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCollection = void 0;
-const provider_1 = require("../provider");
-const useCollection = () => (0, provider_1.useContext)().collection;
-exports.useCollection = useCollection;

package/dist/src/hooks/useLiveConfig.d.ts

@@ -1,4 +0,0 @@
-import { Config } from "../types/config";
-export declare const useLiveConfig: (shopifyPermanentDomain: string, configId?: string | undefined) => {
-    config: Config | undefined;
-};

package/dist/src/hooks/useLiveConfig.js

@@ -1,74 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLiveConfig = void 0;
-const react_1 = __importDefault(require("react"));
-const debug = require("debug")("reactify-search:useLiveConfig");
-// 5 minute cache expiry
-const CACHE_EXPIRY = 5 * 60 * 1000;
-// synchronously returns cached and non-expired config from session storage
-function getCachedConfig() {
-    var _a;
-    if (typeof window === "undefined") {
-        return;
-    }
-    // skip checking cache if url search param "nocache" is set
-    const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !==
-        null;
-    if (skipCache) {
-        debug("skipping cache");
-        return;
-    }
-    const sessionConfig = JSON.parse((_a = window.sessionStorage.getItem("reactify-search:config")) !== null && _a !== void 0 ? _a : "null");
-    if (sessionConfig) {
-        const sessionConfigTtl = sessionConfig.expiresAt - Date.now();
-        debug(`found ${sessionConfigTtl > 0 ? "cached" : "expired"} config`);
-        if (sessionConfigTtl > 0) {
-            debug(`config expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
-            return sessionConfig.config;
-        }
-    }
-    return;
-}
-const useLiveConfig = (shopifyPermanentDomain, configId) => {
-    const [config, setConfig] = react_1.default.useState(getCachedConfig());
-    react_1.default.useEffect(() => {
-        const cachedConfig = getCachedConfig();
-        if (cachedConfig)
-            return;
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            debug("fetching fresh config");
-            const searchParams = new URLSearchParams();
-            searchParams.set("shop", shopifyPermanentDomain);
-            if (configId) {
-                searchParams.set("id", configId);
-            }
-            const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !== null;
-            if (skipCache) {
-                searchParams.set("nocache", "true");
-            }
-            const json = yield fetch(`https://config.search.reactify.app/?${searchParams.toString()}`).then((response) => response.json());
-            setConfig(json.body);
-            window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
-                expiresAt: new Date().getTime() + CACHE_EXPIRY,
-                noCache: skipCache,
-                config: json.body,
-            }));
-        }))();
-    }, [shopifyPermanentDomain, configId]);
-    return {
-        config,
-    };
-};
-exports.useLiveConfig = useLiveConfig;

package/dist/src/hooks/usePages.d.ts

@@ -1,10 +0,0 @@
-import { ReactivesearchPaginationProps } from "../types/reactivesearch";
-export declare const usePages: (props: ReactivesearchPaginationProps) => {
-    pagesToShow: number[];
-    hasNextPage: boolean;
-    buildPagePath: (page: number) => string;
-    handleNextPage: (event?: any) => void;
-    hasPreviousPage: boolean;
-    actualCurrentPage: number;
-    handlePreviousPage: (event?: any) => void;
-};

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

@@ -1,5 +0,0 @@
-export declare const useSort: () => {
-    sortOption: import("..").ConfigSort | undefined;
-    sortOptions: import("..").ConfigSort[];
-    setSortOption: (sortOptionHandle: string) => void;
-};

package/dist/src/hooks/useSort.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSort = void 0;
-const react_1 = __importDefault(require("react"));
-const provider_1 = require("../provider");
-const hooks_1 = require("../hooks");
-const useSort = () => {
-    const { track } = (0, hooks_1.useAnalytics)();
-    const { sortOption, sortOptions, setSortOption } = (0, provider_1.useContext)();
-    const handleSortChange = react_1.default.useCallback((sortOptionHandle) => {
-        setSortOption(sortOptionHandle);
-        track({
-            eventName: "sortChange",
-            payload: {
-                type: sortOptionHandle,
-            },
-        });
-    }, [track, setSortOption]);
-    return { sortOption, sortOptions, setSortOption: handleSortChange };
-};
-exports.useSort = useSort;

package/dist/src/provider.d.ts

@@ -1,78 +0,0 @@
-import React from "react";
-import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/config";
-declare type Context = {
-    index: string;
-    config: Config;
-    shopifyPermanentDomain: string;
-    sortOption: ConfigSort | undefined;
-    sortOptions: ConfigSort[];
-    searchQuery?: string;
-    filterStack?: ConfigFilter;
-    collection?: Collection;
-    instantSearch: boolean;
-    credentials: Credentials;
-    onRedirect?: (type: "redirect" | "search", url: string) => void;
-    submitSearch: (localSearchQuery?: string) => void;
-    setSearchQuery: (searchQuery: string) => void;
-    setSortOption: (sortOptionHandle: string) => void;
-    showInstantSearchResults: boolean;
-    setShowInstantSearchResults: (showInstantSearchResults: boolean) => void;
-    theme?: Theme;
-    curation?: ConfigCuration;
-    /** Array of additional component IDs managed outside of Reactify Search */
-    additionalComponentHandles?: string[];
-};
-declare const Context: React.Context<Context | undefined>;
-declare type Props = {
-    index: string;
-    shopifyPermanentDomain: string;
-    configId?: string;
-    filterStackHandle?: string;
-    collection?: Collection;
-    noReactiveBase?: boolean;
-    instantSearch?: boolean;
-    onRedirect?: (type: "redirect" | "search", url: string) => void;
-    credentials?: Credentials;
-    theme?: Theme;
-    /** Array of additional component IDs managed outside of Reactify Search */
-    additionalComponentHandles?: string[];
-    /**
-     * Optional render function to display a component when the config is loading.
-     */
-    renderBooting?: () => JSX.Element | null;
-};
-export declare const Provider: React.FC<Props>;
-export declare const ConfiguredProvider: React.FC<Omit<Props, "renderBooting"> & {
-    config: Config;
-}>;
-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 {};