@searchstax-inc/searchstudio-ux-react 0.1.0 → 0.2.1

package/README.md

@@ -325,33 +325,469 @@ example of pagination widget initialization with minimum options
 
 example of pagination widget initialization with various options
 ```
+function paginationTemplate(
+    paginationData: IPaginationData | null,
+    nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void,
+    previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+  ) {
+    return (
+      <>
+        {paginationData && paginationData?.totalResults !== 0 && (
+          <div className="searchstax-pagination-container">
+            <div className="searchstax-pagination-content">
+              <a
+                className="searchstax-pagination-previous"
+                style={paginationData?.isFirstPage ? { pointerEvents: "none" } : {}}
+                onClick={(e) => {
+                  previousPage(e);
+                }}
+                id="searchstax-pagination-previous"
+              >
+                {" "}
+                &lt; Previous{" "}
+              </a>
+              <div className="searchstax-pagination-details">
+                {" "}
+                {paginationData?.startResultIndex} - {paginationData?.endResultIndex} of {paginationData?.totalResults}
+              </div>
+              <a
+                className="searchstax-pagination-next"
+                style={paginationData?.isLastPage ? { pointerEvents: "none" } : {}}
+                onClick={(e) => {
+                  nextPage(e);
+                }}
+                id="searchstax-pagination-next"
+              >
+                Next &gt;
+              </a>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
 
+  <SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
 ```
 
 ### Facets Widget ###
 
 example of facets widget initialization with minimum options
 ```
-
+<SearchstaxFacetsWidget
+                facetingType="and"
+                itemsPerPageDesktop={2}
+                itemsPerPageMobile={3}
+                specificFacets={undefined}
+              ></SearchstaxFacetsWidget>
 ```
 
 
 example of facets widget initialization with template overrides
 ```
+function facetsTemplateDesktop(
+    facetsTemplateDataDesktop: IFacetsTemplateData | null,
+    facetContainers: {
+      [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+    },
+    isNotDeactivated: (name: string) => boolean,
+    toggleFacetGroup: (name: string) => void,
+    selectFacet: (
+      index: string,
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      data: IFacetValueData,
+      isInput: boolean
+    ) => void,
+    isChecked: (facetValue: IFacetValueData) => boolean | undefined,
+    showMoreLessDesktop: (
+      e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      data: IFacetData
+    ) => void
+  ) {
+    return (
+      <div className="searchstax-facets-container-desktop">
+        {facetsTemplateDataDesktop?.facets.map((facet) => {
+          return (
+            <div
+              className={`searchstax-facet-container ${
+                isNotDeactivated(facet.name) ? "active" : ""
+              }`}
+              key={facet.name + "desktop"}
+            >
+              <div>
+                <div
+                  className="searchstax-facet-title-container"
+                  onClick={() => {
+                    toggleFacetGroup(facet.name);
+                  }}
+                >
+                  <div className="searchstax-facet-title"> {facet.label} kjhjk</div>
+                  <div className="searchstax-facet-title-arrow active"></div>
+                </div>
+                <div className="searchstax-facet-values-container">
+                  {facet.values.map(
+                    //@ts-ignore
+                    (facetValue: IFacetValueData, key) => {
+                      facetContainers[key + facet.name] = createRef();
+                      return (
+                        <div
+                          key={facetValue.value + facetValue.parentName}
+                          className={`searchstax-facet-value-container ${
+                            facetValue.disabled
+                              ? "searchstax-facet-value-disabled"
+                              : ""
+                          }`}
+                          ref={facetContainers[key + facet.name]}
+                        >
+                          <div className="searchstax-facet-input">
+                            <input
+                              type="checkbox"
+                              className="searchstax-facet-input-checkbox"
+                              checked={isChecked(facetValue)}
+                              readOnly={true}
+                              disabled={facetValue.disabled}
+                              onClick={(e) => {
+                                selectFacet(
+                                  key + facet.name,
+                                  e,
+                                  facetValue,
+                                  true
+                                );
+                              }}
+                            />
+                          </div>
+                          <div
+                            className="searchstax-facet-value-label"
+                            onClick={(e) => {
+                              selectFacet(
+                                key + facet.name,
+                                e,
+                                facetValue,
+                                false
+                              );
+                            }}
+                          >
+                            {facetValue.value}
+                          </div>
+                          <div
+                            className="searchstax-facet-value-count"
+                            onClick={(e) => {
+                              selectFacet(
+                                key + facet.name,
+                                e,
+                                facetValue,
+                                false
+                              );
+                            }}
+                          >
+                            ({facetValue.count})
+                          </div>
+                        </div>
+                      );
+                    }
+                  )}
+
+                  {facet.hasMoreFacets && (
+                    <div className="searchstax-facet-show-more-container">
+                      <div
+                        className="searchstax-facet-show-more-container"
+                        onClick={(e) => {
+                          showMoreLessDesktop(e, facet);
+                        }}
+                      >
+                        {facet.showingAllFacets && (
+                          <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
+                            less
+                          </div>
+                        )}
+                        {!facet.showingAllFacets && (
+                          <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
+                            more
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
 
+  function facetsTemplateMobile(
+    facetsTemplateDataMobile: IFacetsTemplateData | null,
+    selectedFacetsCheckboxes: IFacetValue[],
+    facetContainers: {
+      [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+    },
+    isNotDeactivated: (name: string) => boolean,
+    toggleFacetGroup: (name: string) => void,
+    selectFacet: (
+      index: string,
+      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      data: IFacetValueData,
+      isInput: boolean
+    ) => void,
+    isChecked: (facetValue: IFacetValueData) => boolean | undefined,
+    unselectFacet: (facet: IFacetValue) => void,
+    showMoreLessMobile: (
+      e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      data: IFacetData
+    ) => void,
+    openOverlay: () => void,
+    closeOverlay: () => void,
+    unselectAll: () => void
+  ) {
+    return facetsTemplateDataMobile ? (
+      <div className="searchstax-facets-container-mobile">
+        <div className="searchstax-facets-pills-container">
+          <div
+            className="searchstax-facets-pill searchstax-facets-pill-filter-by"
+            onClick={() => {
+              openOverlay();
+            }}
+          >
+            <div className="searchstax-facets-pill-label">Filter By</div>
+          </div>
+          <div className="searchstax-facets-pills-selected">
+            {selectedFacetsCheckboxes.map((facet) => {
+              return (
+                <div
+                  className="searchstax-facets-pill searchstax-facets-pill-facets"
+                  key={facet.value}
+                  onClick={() => {
+                    unselectFacet(facet);
+                  }}
+                >
+                  <div className="searchstax-facets-pill-label">
+                    {facet.value} ({facet.count})
+                  </div>
+                  <div className="searchstax-facets-pill-icon-close"></div>
+                </div>
+              );
+            })}
+            {selectedFacetsCheckboxes.length !== 0 && (
+              <div
+                className="searchstax-facets-pill searchstax-clear-filters searchstax-facets-pill-clear-all"
+                onClick={() => {
+                  unselectAll();
+                }}
+              >
+                <div className="searchstax-facets-pill-label">
+                  Clear Filters
+                </div>
+              </div>
+            )}
+          </div>
+          <div
+            className={`searchstax-facets-mobile-overlay ${
+              //@ts-ignore
+              facetsTemplateDataMobile.overlayOpened ? "searchstax-show" : ""
+            }`}
+          >
+            <div className="searchstax-facets-mobile-overlay-header">
+              <div className="searchstax-facets-mobile-overlay-header-title">
+                Filter By
+              </div>
+              <div
+                className="searchstax-search-close"
+                onClick={() => {
+                  closeOverlay();
+                }}
+              ></div>
+            </div>
+            <div className="searchstax-facets-container-mobile">
+              {facetsTemplateDataMobile?.facets.map((facet) => {
+                return (
+                  <div
+                    key={facet.name + "mobile"}
+                    className={`searchstax-facet-container ${
+                      isNotDeactivated(facet.name) ? `active` : ``
+                    }`}
+                  >
+                    <div>
+                      <div
+                        className="searchstax-facet-title-container"
+                        onClick={() => {
+                          toggleFacetGroup(facet.name);
+                        }}
+                      >
+                        <div className="searchstax-facet-title">
+                          {" "}
+                          {facet.label}{" "}
+                        </div>
+                        <div className="searchstax-facet-title-arrow active"></div>
+                      </div>
+                      <div className="searchstax-facet-values-container">
+                        {facet.values.map(
+                          //@ts-ignore
+                          (facetValue: IFacetValueData, key) => {
+                            facetContainers[key + facet.name] = createRef();
+
+                            return (
+                              <div
+                                key={facetValue.value + facetValue.parentName}
+                                className={`searchstax-facet-value-container ${
+                                  facetValue.disabled
+                                    ? `searchstax-facet-value-disabled`
+                                    : ``
+                                }`}
+                                ref={facetContainers[key + facet.name]}
+                              >
+                                <div className="searchstax-facet-input">
+                                  <input
+                                    type="checkbox"
+                                    className="searchstax-facet-input-checkbox"
+                                    checked={isChecked(facetValue)}
+                                    readOnly={true}
+                                    disabled={facetValue.disabled}
+                                    onClick={(e) => {
+                                      selectFacet(
+                                        key + facet.name,
+                                        e,
+                                        facetValue,
+                                        true
+                                      );
+                                    }}
+                                  />
+                                </div>
+                                <div
+                                  className="searchstax-facet-value-label"
+                                  onClick={(e) => {
+                                    selectFacet(
+                                      key + facet.name,
+                                      e,
+                                      facetValue,
+                                      false
+                                    );
+                                  }}
+                                >
+                                  {facetValue.value}
+                                </div>
+                                <div
+                                  className="searchstax-facet-value-count"
+                                  onClick={(e) => {
+                                    selectFacet(
+                                      key + facet.name,
+                                      e,
+                                      facetValue,
+                                      false
+                                    );
+                                  }}
+                                >
+                                  ({facetValue.count})
+                                </div>
+                              </div>
+                            );
+                          }
+                        )}
+
+                        <div
+                          className="searchstax-facet-show-more-container"
+                          v-if="facet.hasMoreFacets"
+                        >
+                          <div
+                            className="searchstax-facet-show-more-container"
+                            onClick={(e) => {
+                              showMoreLessMobile(e, facet);
+                            }}
+                          >
+                            {facet.showingAllFacets && (
+                              <div className="searchstax-facet-show-less-button searchstax-facet-show-button">
+                                less
+                              </div>
+                            )}
+                            {!facet.showingAllFacets && (
+                              <div className="searchstax-facet-show-more-button  searchstax-facet-show-button">
+                                more
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <button
+              className="searchstax-facets-mobile-overlay-done"
+              onClick={() => {
+                closeOverlay();
+              }}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    ) : (<></>);
+  }
+<SearchstaxFacetsWidget
+                facetingType="and"
+                itemsPerPageDesktop={2}
+                itemsPerPageMobile={3}
+                specificFacets={undefined}
+                facetsTemplateDesktop={facetsTemplateDesktop}
+                facetsTemplateMobile={facetsTemplateMobile}
+              ></SearchstaxFacetsWidget>
 ```
 
 ### SearchFeedback Widget ###
 
 example of search feedback widget initialization with minimum options
 ```
-
+<SearchstaxOverviewWidget></SearchstaxOverviewWidget>
 ```
 
 
 example of search feedback widget initialization  with template overrides
 ```
-
+function searchOverviewTemplate(
+    searchFeedbackData: null | ISearchstaxSearchFeedbackData,
+    onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+  ) {
+    return (
+      <>
+        {searchFeedbackData && searchFeedbackData?.searchExecuted && searchFeedbackData?.totalResults && (
+          <>
+            Showing{" "}
+            <b>
+              {searchFeedbackData.startResultIndex} - {searchFeedbackData.endResultIndex}
+            </b>{" "}
+            of
+            <b> {searchFeedbackData.totalResults}</b> results
+            {searchFeedbackData.searchTerm && (
+              <span>
+                &nbsp;for "<b>{searchFeedbackData.searchTerm}</b>"{" "}
+              </span>
+            )}
+            <div className="searchstax-feedback-container-suggested">
+              {searchFeedbackData.autoCorrectedQuery && (
+                <div>
+                  {" "}
+                  Search instead for{" "}
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      onOriginalQueryClick(e);
+                    }}
+                    className="searchstax-feedback-original-query"
+                  >
+                    {searchFeedbackData.originalQuery}
+                  </a>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </>
+    );
+  }
+  <SearchstaxOverviewWidget searchOverviewTemplate={searchOverviewTemplate}></SearchstaxOverviewWidget>
 ```
 
 ## RelatedSearches widget
@@ -387,13 +823,42 @@ example of search feedback widget initialization  with template overrides
 
 example of sorting widget initialization with minimum options
 ```
-
+<SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
 
 
 example of sorting widget initialization with template override
 ```
-
+ function searchSortingTemplate(
+    sortingData: null | ISearchstaxSearchSortingData,
+    orderChange: (value: string) => void,
+    selectedSorting: string
+  ) {
+    return (
+      <>
+        {sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && (
+          <div className="searchstax-sorting-container">
+            <label className="searchstax-sorting-label" htmlFor="sort-by">
+              Sort By
+            </label>
+            <select
+              id="searchstax-search-order-select"
+              className="searchstax-search-order-select"
+              value={selectedSorting}
+              onChange={(e) => {
+                orderChange(e.target.value);
+              }}
+            >
+              <option value=""> Relevance </option>
+              <option value="date desc"> Newest Content </option>
+              <option value="date asc"> Oldest Content </option>
+            </select>
+          </div>
+        )}
+      </>
+    );
+  }
+  <SearchstaxSortingWidget searchSortingTemplate={searchSortingTemplate}></SearchstaxSortingWidget>
 ```
 
 

package/dist/@searchstax-inc/components/SearchstaxFacetsWidget.d.ts

@@ -0,0 +1,14 @@
+import type { IFacetsTemplateData, IFacetValue, IFacetData, IFacetValueData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxFacetsWidget(props: {
+    facetingType: "and" | "or" | "showUnavailable" | "tabs";
+    itemsPerPageDesktop: number;
+    itemsPerPageMobile: number;
+    specificFacets: string[] | undefined;
+    facetsTemplateDesktop?: (facetsTemplateDataDesktop: IFacetsTemplateData | null, facetContainers: {
+        [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+    }, isNotDeactivated: (name: string) => boolean, toggleFacetGroup: (name: string) => void, selectFacet: (index: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetValueData, isInput: boolean) => void, isChecked: (facetValue: IFacetValueData) => boolean | undefined, showMoreLessDesktop: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetData) => void) => React.ReactElement;
+    facetsTemplateMobile?: (facetsTemplateDataMobile: IFacetsTemplateData | null, selectedFacetsCheckboxes: IFacetValue[], facetContainers: {
+        [key: string]: React.LegacyRef<HTMLDivElement> | undefined;
+    }, isNotDeactivated: (name: string) => boolean, toggleFacetGroup: (name: string) => void, selectFacet: (index: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetValueData, isInput: boolean) => void, isChecked: (facetValue: IFacetValueData) => boolean | undefined, unselectFacet: (facet: IFacetValue) => void, showMoreLessMobile: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, data: IFacetData) => void, openOverlay: () => void, closeOverlay: () => void, unselectAll: () => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxFacetsWidget;

package/dist/@searchstax-inc/components/SearchstaxOverviewWidget.d.ts

@@ -0,0 +1,5 @@
+import type { ISearchstaxSearchFeedbackData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxOverviewWidget(props: {
+    searchOverviewTemplate?: (searchFeedbackData: null | ISearchstaxSearchFeedbackData, onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxOverviewWidget;

package/dist/@searchstax-inc/components/SearchstaxPaginationWidget.d.ts

@@ -0,0 +1,5 @@
+import type { IPaginationData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxPaginationWidget(props: {
+    paginationTemplate?: (paginationData: IPaginationData | null, nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void, previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxPaginationWidget;

package/dist/@searchstax-inc/components/SearchstaxSortingWidget.d.ts

@@ -0,0 +1,5 @@
+import type { ISearchstaxSearchSortingData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxSortingWidget(props: {
+    searchSortingTemplate?: (sortingData: null | ISearchstaxSearchSortingData, orderChange: (value: string) => void, selectedSorting: string) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxSortingWidget;

package/dist/@searchstax-inc/main.d.ts

@@ -1 +1,8 @@
-export * from '../main'
+import SearchstaxInputWidget from "./components/SearchstaxInputWidget";
+import SearchstaxWrapper from "./components/SearchstaxWrapper";
+import SearchstaxResultWidget from "./components/SearchstaxResultWidget";
+import SearchstaxPaginationWidget from "./components/SearchstaxPaginationWidget";
+import SearchstaxSortingWidget from "./components/SearchstaxSortingWidget";
+import SearchstaxOverviewWidget from "./components/SearchstaxOverviewWidget";
+import SearchstaxFacetsWidget from "./components/SearchstaxFacetsWidget";
+export { SearchstaxWrapper, SearchstaxResultWidget, SearchstaxInputWidget, SearchstaxPaginationWidget, SearchstaxSortingWidget, SearchstaxOverviewWidget, SearchstaxFacetsWidget, };