@envive-ai/react-widgets 0.1.0 → 0.1.2-arthur-1

package/dist/SearchResults/index-D52sX_I2.d.cts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/SearchResults/SearchResultsWidget.d.ts
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SearchResultsWidget };

package/dist/SearchResults/index-D8nrHueo.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/SearchResults/SearchResultsWidget.d.ts
+declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+//#endregion
+export { SearchResultsWidget };

package/dist/SearchResults/index.cjs

@@ -0,0 +1,123 @@
+const require_chunk = require('../chunk-DWy1uDak.cjs');
+let react = require("react");
+let jotai = require("jotai");
+let __envive_ai_react_hooks_atoms_globalSearch = require("@envive-ai/react-hooks/atoms/globalSearch");
+let __envive_ai_react_hooks_atoms_search = require("@envive-ai/react-hooks/atoms/search");
+let __envive_ai_react_hooks_hooks_NewOrgConfig = require("@envive-ai/react-hooks/hooks/NewOrgConfig");
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let __envive_ai_react_toolkit_SearchResultsContent = require("@envive-ai/react-toolkit/SearchResultsContent");
+let __envive_ai_react_toolkit_SearchResultsFilterModal = require("@envive-ai/react-toolkit/SearchResultsFilterModal");
+let __envive_ai_react_toolkit_SearchResultsToolbar = require("@envive-ai/react-toolkit/SearchResultsToolbar");
+let __envive_ai_react_toolkit_util = require("@envive-ai/react-toolkit/util");
+let __envive_ai_react_hooks_hooks_Search = require("@envive-ai/react-hooks/hooks/Search");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/SearchResults/withSearchResults.tsx
+function withSearchResults(Component) {
+	return function SearchResultsHoc(props) {
+		const searchHookResult = (0, __envive_ai_react_hooks_hooks_Search.useSearch)();
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			...props,
+			...searchHookResult,
+			productList: searchHookResult.searchData?.products || []
+		});
+	};
+}
+
+//#endregion
+//#region src/SearchResults/SearchResults.tsx
+const SearchResultsComponent = ({ widgetConfig, productCardConfig, merchantShortName, productList, autocompleteResults, searchFilters, availableDynamicFilters, selectedFilterOptions, searchText, query, searchResultsState, isFilterOpen, shouldShowAutocomplete, focusedIndex, focusedOptionId, recommendedProducts, filterButtonText, onSearchInputChange, onSubmitSearch, onAutocompleteSelect, onKeyDown, onSearchInputFocus, onSearchInputBlur, onToggleDynamicFilter, onSelectFilterItem, onRemoveFilter, onClearAllFilters, setIsFilterOpen, searchResultsRef }) => {
+	const { searchInputVariant, searchFilterSidebarVariant, productGridVariant, searchBoxPlaceholder, noResultsFoundText, isSearchInputSticky = false } = widgetConfig;
+	const { toolbarRef: ref, isVisible, toolbarHeight: height } = (0, __envive_ai_react_toolkit_util.useStickyVisibility)();
+	const toolbarRef = isSearchInputSticky ? ref : null;
+	const finalIsVisible = isSearchInputSticky ? isVisible : true;
+	const toolbarHeight = isSearchInputSticky ? height : 0;
+	const stickyToolbarClasses = (0, classnames.default)("spiffy-tw-fixed", "spiffy-tw-top-0", "spiffy-tw-left-0", "spiffy-tw-right-0", "spiffy-tw-transition-transform", "spiffy-tw-duration-300", "spiffy-tw-py-[8px]");
+	const containerXPaddingClasses = (0, classnames.default)("spiffy-tw-px-[16px]", "sm:spiffy-tw-px-[46px]");
+	(0, react.useEffect)(() => {
+		window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+	}, [productList]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SearchResultsFilterModal.SearchResultsFilterModal, {
+			isOpen: isFilterOpen,
+			setIsOpen: setIsFilterOpen,
+			searchFilters,
+			productCount: productList.length,
+			onSelectFilterItem,
+			onClearAllFilters,
+			searchFilterSidebarVariant,
+			filterButtonText
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SearchResultsToolbar.SearchResultsToolbar, {
+			className: isSearchInputSticky ? stickyToolbarClasses : "spiffy-tw-py-[8px]",
+			toolbarRef,
+			searchInputVariant,
+			searchBoxPlaceholder,
+			searchText,
+			focusedIndex,
+			focusedOptionId,
+			autocompleteResults,
+			filterButtonText,
+			onKeyDown,
+			onSearchInputChange,
+			onSubmitSearch,
+			onAutocompleteSelect,
+			onSearchInputFocus,
+			onSearchInputBlur,
+			shouldShowAutocomplete,
+			setIsFilterOpen,
+			containerXPaddingClasses,
+			isVisible: finalIsVisible
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_SearchResultsContent.SearchResultsContent, {
+			searchResultsState,
+			productList,
+			recommendedProducts,
+			productCardConfig,
+			merchantShortName,
+			searchFilterSidebarVariant,
+			noResultsFoundText,
+			productGridVariant,
+			containerXPaddingClasses,
+			selectedFilterOptions,
+			availableDynamicFilters,
+			onRemoveFilter,
+			onToggleDynamicFilter,
+			searchResultsRef,
+			toolbarHeight,
+			query
+		})
+	] });
+};
+const SearchResults = withSearchResults(SearchResultsComponent);
+
+//#endregion
+//#region src/SearchResults/SearchResultsWidget.tsx
+const SearchResultsWidget = () => {
+	const setIsSearchResultsOpen = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_globalSearch.isSearchResultsOpenAtom);
+	const setSearchSystem = (0, jotai.useSetAtom)(__envive_ai_react_hooks_atoms_search.searchSystemAtom);
+	const newConfig = (0, __envive_ai_react_hooks_hooks_NewOrgConfig.useNewOrgConfig)();
+	(0, react.useEffect)(() => {
+		setSearchSystem(true);
+		return () => setSearchSystem(false);
+	}, [setSearchSystem]);
+	(0, react.useEffect)(() => {
+		setIsSearchResultsOpen(true);
+		return () => {
+			setIsSearchResultsOpen(false);
+		};
+	}, [setIsSearchResultsOpen]);
+	const widgetConfig = (0, react.useMemo)(() => {
+		if (newConfig && newConfig.frontendConfig?.widgetConfigs) return { ...(newConfig.frontendConfig?.widgetConfigs).find((widget) => widget.key === "searchResultsEntryPoint").config };
+		return null;
+	}, [newConfig]);
+	if (!widgetConfig) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchResults, { widgetConfig });
+};
+
+//#endregion
+exports.SearchResultsWidget = SearchResultsWidget;

package/dist/SearchResults/index.js

@@ -0,0 +1,121 @@
+import { useEffect, useMemo } from "react";
+import { useSetAtom } from "jotai";
+import { isSearchResultsOpenAtom } from "@envive-ai/react-hooks/atoms/globalSearch";
+import { searchSystemAtom } from "@envive-ai/react-hooks/atoms/search";
+import { useNewOrgConfig } from "@envive-ai/react-hooks/hooks/NewOrgConfig";
+import classNames from "classnames";
+import { SearchResultsContent } from "@envive-ai/react-toolkit/SearchResultsContent";
+import { SearchResultsFilterModal } from "@envive-ai/react-toolkit/SearchResultsFilterModal";
+import { SearchResultsToolbar } from "@envive-ai/react-toolkit/SearchResultsToolbar";
+import { useStickyVisibility } from "@envive-ai/react-toolkit/util";
+import { useSearch } from "@envive-ai/react-hooks/hooks/Search";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/SearchResults/withSearchResults.tsx
+function withSearchResults(Component) {
+	return function SearchResultsHoc(props) {
+		const searchHookResult = useSearch();
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			...searchHookResult,
+			productList: searchHookResult.searchData?.products || []
+		});
+	};
+}
+
+//#endregion
+//#region src/SearchResults/SearchResults.tsx
+const SearchResultsComponent = ({ widgetConfig, productCardConfig, merchantShortName, productList, autocompleteResults, searchFilters, availableDynamicFilters, selectedFilterOptions, searchText, query, searchResultsState, isFilterOpen, shouldShowAutocomplete, focusedIndex, focusedOptionId, recommendedProducts, filterButtonText, onSearchInputChange, onSubmitSearch, onAutocompleteSelect, onKeyDown, onSearchInputFocus, onSearchInputBlur, onToggleDynamicFilter, onSelectFilterItem, onRemoveFilter, onClearAllFilters, setIsFilterOpen, searchResultsRef }) => {
+	const { searchInputVariant, searchFilterSidebarVariant, productGridVariant, searchBoxPlaceholder, noResultsFoundText, isSearchInputSticky = false } = widgetConfig;
+	const { toolbarRef: ref, isVisible, toolbarHeight: height } = useStickyVisibility();
+	const toolbarRef = isSearchInputSticky ? ref : null;
+	const finalIsVisible = isSearchInputSticky ? isVisible : true;
+	const toolbarHeight = isSearchInputSticky ? height : 0;
+	const stickyToolbarClasses = classNames("spiffy-tw-fixed", "spiffy-tw-top-0", "spiffy-tw-left-0", "spiffy-tw-right-0", "spiffy-tw-transition-transform", "spiffy-tw-duration-300", "spiffy-tw-py-[8px]");
+	const containerXPaddingClasses = classNames("spiffy-tw-px-[16px]", "sm:spiffy-tw-px-[46px]");
+	useEffect(() => {
+		window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+	}, [productList]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(SearchResultsFilterModal, {
+			isOpen: isFilterOpen,
+			setIsOpen: setIsFilterOpen,
+			searchFilters,
+			productCount: productList.length,
+			onSelectFilterItem,
+			onClearAllFilters,
+			searchFilterSidebarVariant,
+			filterButtonText
+		}),
+		/* @__PURE__ */ jsx(SearchResultsToolbar, {
+			className: isSearchInputSticky ? stickyToolbarClasses : "spiffy-tw-py-[8px]",
+			toolbarRef,
+			searchInputVariant,
+			searchBoxPlaceholder,
+			searchText,
+			focusedIndex,
+			focusedOptionId,
+			autocompleteResults,
+			filterButtonText,
+			onKeyDown,
+			onSearchInputChange,
+			onSubmitSearch,
+			onAutocompleteSelect,
+			onSearchInputFocus,
+			onSearchInputBlur,
+			shouldShowAutocomplete,
+			setIsFilterOpen,
+			containerXPaddingClasses,
+			isVisible: finalIsVisible
+		}),
+		/* @__PURE__ */ jsx(SearchResultsContent, {
+			searchResultsState,
+			productList,
+			recommendedProducts,
+			productCardConfig,
+			merchantShortName,
+			searchFilterSidebarVariant,
+			noResultsFoundText,
+			productGridVariant,
+			containerXPaddingClasses,
+			selectedFilterOptions,
+			availableDynamicFilters,
+			onRemoveFilter,
+			onToggleDynamicFilter,
+			searchResultsRef,
+			toolbarHeight,
+			query
+		})
+	] });
+};
+const SearchResults = withSearchResults(SearchResultsComponent);
+
+//#endregion
+//#region src/SearchResults/SearchResultsWidget.tsx
+const SearchResultsWidget = () => {
+	const setIsSearchResultsOpen = useSetAtom(isSearchResultsOpenAtom);
+	const setSearchSystem = useSetAtom(searchSystemAtom);
+	const newConfig = useNewOrgConfig();
+	useEffect(() => {
+		setSearchSystem(true);
+		return () => setSearchSystem(false);
+	}, [setSearchSystem]);
+	useEffect(() => {
+		setIsSearchResultsOpen(true);
+		return () => {
+			setIsSearchResultsOpen(false);
+		};
+	}, [setIsSearchResultsOpen]);
+	const widgetConfig = useMemo(() => {
+		if (newConfig && newConfig.frontendConfig?.widgetConfigs) return { ...(newConfig.frontendConfig?.widgetConfigs).find((widget) => widget.key === "searchResultsEntryPoint").config };
+		return null;
+	}, [newConfig]);
+	if (!widgetConfig) return null;
+	return /* @__PURE__ */ jsx(SearchResults, { widgetConfig });
+};
+
+//#endregion
+export { SearchResultsWidget };

package/dist/SearchZeroState/index-19CiYvee.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+import React$1 from "react";
+
+//#region src/SearchZeroState/types.d.ts
+interface SearchZeroStateProps {
+  widgetConfig: SearchEntryPointWidgetConfig;
+  initialIsOpen?: boolean;
+  entryPointRef?: React.Ref<HTMLButtonElement>;
+}
+//#endregion
+//#region src/SearchZeroState/SearchZeroState.d.ts
+declare const SearchZeroState: React$1.FC<SearchZeroStateProps>;
+//#endregion
+//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
+type SearchZeroStateWidgetProps = {
+  initialIsOpen: boolean;
+  widgetConfigId?: string;
+  entryPointRef: React.Ref<HTMLButtonElement>;
+};
+declare const SearchZeroStateWidget: ({
+  initialIsOpen,
+  widgetConfigId,
+  entryPointRef
+}: SearchZeroStateWidgetProps) => react_jsx_runtime1.JSX.Element;
+//#endregion
+export { type SearchEntryPointWidgetConfig, type SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/SearchZeroState/index-6EaGWYP4.d.ts

@@ -0,0 +1,27 @@
+import React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/SearchZeroState/types.d.ts
+interface SearchZeroStateProps {
+  widgetConfig: SearchEntryPointWidgetConfig;
+  initialIsOpen?: boolean;
+  entryPointRef?: React.Ref<HTMLButtonElement>;
+}
+//#endregion
+//#region src/SearchZeroState/SearchZeroState.d.ts
+declare const SearchZeroState: React$1.FC<SearchZeroStateProps>;
+//#endregion
+//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
+type SearchZeroStateWidgetProps = {
+  initialIsOpen: boolean;
+  widgetConfigId?: string;
+  entryPointRef: React.Ref<HTMLButtonElement>;
+};
+declare const SearchZeroStateWidget: ({
+  initialIsOpen,
+  widgetConfigId,
+  entryPointRef
+}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type SearchEntryPointWidgetConfig, type SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };