npm - @searchstax-inc/searchstudio-ux-react - Versions diffs - 0.0.11 → 0.2.0 - Mend

@searchstax-inc/searchstudio-ux-react 0.0.11 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -3,9 +3,8 @@
 Library to build searchstudio search page
 ## Installation
-npm install following packages
+npm install following package
 `npm install --save @searchstax-inc/searchstudio-ux-react`
-`npm install --save @searchstax-inc/searchstudio-ux-js`
 Add following code to `<head>`
@@ -22,90 +21,144 @@ Add following code to `<head>`
       })();
     </script>
 ```
+## Usage
-## imports
-types can be imported from
-`import type { ISearchstaxParsedResult, ISearchstaxSearchProps, ISearchstaxSuggestProps, ISearchstaxSuggestResponse, Searchstax } from '@searchstax-inc/searchstudio-ux-js'`
+After importing SearchstaxWrapper component needs to wrap all other components:
-component import
+```
-`import {SearchstaxWrapper, SearchstaxInputWidget, SearchstaxResultWidget} from "@searchstax-inc/searchstudio-ux-react"`
-## Usage
+<SearchstaxWrapper
+        searchURL={config.searchURL}
+        suggesterURL={config.suggesterURL}
+        trackApiKey={config.trackApiKey}
+        searchAuth={config.searchAuth}
+        initialized={initialized}
+        beforeSearch={beforeSearch}
+        afterSearch={afterSearch}
+        authType="basic"
+        language="en"
+      >
+  // other components will go there
+  </SearchstaxWrapper>
+```
-Following components are experted by this library:
+## Initialization
+Initialization object needs to be of type: [ISearchstaxConfig](https://github.com/searchstax/searchstudio-ux-js/blob/main/src/interfaces/connector.interface.ts#L5)
+Initialization example
 ```
-SearchstaxWrapper
-SearchstaxInputWidget
-SearchstaxResultWidget
+sampleConfig = {
+    language: "en",
+    searchURL: "",
+    suggesterURL: "",
+    trackApiKey: "",
+    searchAuth: "",
+    authType: "basic",
+    router: {
+      enabled: true,
+      routeName: "searchstax",
+      title: (result: ISearchObject) => {
+        return "Search results for: " + result.query;
+      },
+      ignoredKeys: [],
+    },
+    hooks: {
+      beforeSearch: function (props: ISearchObject) {
+        const propsCopy = { ...props };
+        return propsCopy;
+      },
+      afterSearch: function (results: ISearchstaxParsedResult[]) {
+        const copy = [...results];
+        return copy;
+      },
+    }
+  };
 ```
-## Initialization
-JS
+## Initial layout
+Our base theme is designed with this layout in mind but it is optional as all widgets have id parameters and can be attached to any element.
+```
+<SearchstaxWrapper
+        searchURL={sampleConfig.searchURL}
+        suggesterURL={sampleConfig.suggesterURL}
+        trackApiKey={sampleConfig.trackApiKey}
+        searchAuth={sampleConfig.searchAuth}
+        beforeSearch={sampleConfig.hooks.beforeSearch}
+        afterSearch={sampleConfig.hooks.afterSearch}
+        authType="basic"
+        language="en"
+      >
+        <div className="searchstax-page-layout-container">
+          <SearchstaxInputWidget
+            afterAutosuggest={afterAutosuggest}
+            beforeAutosuggest={beforeAutosuggest}
+            inputTemplate={InputTemplate}
+          ></SearchstaxInputWidget>
+          <div className="search-details-container">
+            <div id="search-feedback-container"></div>
+            <div id="search-sorting-container"></div>
+          </div>
+          <div className="searchstax-page-layout-facet-result-container">
+            <div className="searchstax-page-layout-facet-container">
+              <div id="searchstax-facets-container"></div>
+            </div>
+            <div className="searchstax-page-layout-result-container">
+              <div id="searchstax-external-promotions-layout-container"></div>
+              <SearchstaxResultWidget
+                afterLinkClick={afterLinkClick}
+                noResultTemplate={noResultTemplate}
+                resultsTemplate={resultsTemplate}
+              ></SearchstaxResultWidget>
+              <div id="searchstax-related-searches-container"></div>
+              <div id="searchstax-pagination-container"></div>
+            </div>
+          </div>
+        </div>
+      </SearchstaxWrapper>
 ```
-const config = {
-  searchURL: '', // - SeachStudio select endpoint
-  suggesterURL: '', // - SeachStudio suggest endpoint
-  trackApiKey: '', // - Api key used for tracking events
-  searchAuth: '', // - Authentication value. based on authType it's either a token value or basic auth value
-  authType: '', // - Type of authentication
-}
+### widgets
+Following widgets are available:
-function initialized(searchstax: Searchstax){ // - optional function that returns an instance of Searchstax class. can be used for advanced workflows
+[Input Widget](#input-widget)
-}
-```
+[Result Widget](#result-widget)
+[Facets Widget](#facets-widget)
-HTML
+[Pagination Widget](#pagination-widget)
+[SearchFeedback Widget](#searchfeedback-widget)
+[RelatedSearches Widget](#relatedsearches-widget)
+[ExternalPromotions Widget](#externalpromotions-widget)
+[sorting Widget](#sorting-widget)
+### Input Widget ###
+example of input widget initialization with minimum options
+```
+<SearchstaxInputWidget
+            afterAutosuggest={afterAutosuggest}
+            beforeAutosuggest={beforeAutosuggest}
+          ></SearchstaxInputWidget>
 ```
-<SearchstaxWrapper
-      searchURL={config.searchURL}
-      suggesterURL={config.suggesterURL}
-      trackApiKey={config.trackApiKey}
-      searchAuth={config.searchAuth}
-      initialized={initialized}
-      authType="basic"
-      language="en"
-    >
-    // other widgets go here
-</SearchstaxWrapper>
-```
-## Input widget
-JS
-```
- function beforeSearch(props: ISearchstaxSearchProps) {
-  // - this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
-  const propsCopy = { ...props }
-  return propsCopy
-}
-function afterSearch(results: ISearchstaxParsedResult[]) {
-  //- this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
-  const copy = [...results]
-  return copy
-}
-function afterAutosuggest(result: ISearchstaxSuggestResponse) {
-  // - this function gets called before firing autosuggest. autosuggestProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
-  const copy = { ...result }
-  return copy
-}
-function beforeAutosuggest(props: ISearchstaxSuggestProps) {
-  // - this function gets called after autosuggest has values but before rendering. It needs to return same type of data but it can be modified.
-  const propsCopy = { ...props }
-  return propsCopy
-}
-const suggestAfterMinChars = 3; //  - controls how many characters the UI should accept at the minimum before showing suggestions
-```
-JSX Input template sample
-```
-function InputTemplate(): React.ReactElement {
+example of input widget initialization with template override
+```
+ function InputTemplate(
+    suggestions: ISearchstaxSuggestion[],
+    onMouseLeave: () => void,
+    onMouseOver: (suggestion: ISearchstaxSuggestion) => void,
+    onMouseClick: () => void
+  ): React.ReactElement {
     return (
       <div className="searchstax-search-input-wrapper">
         <input
@@ -114,55 +167,63 @@ function InputTemplate(): React.ReactElement {
           className="searchstax-search-input"
           placeholder="SEARCH FOR..."
         />
-        <button
-          className="searchstax-spinner-icon"
-          id="searchstax-search-input-action-button"
-        ></button>
+        <div
+          className={`searchstax-autosuggest-container ${suggestions.length === 0 ? "hidden" : ""}`}
+          onMouseLeave={onMouseLeave}
+        >
+          {suggestions.map(function (suggestion) {
+            return (
+              <div className="searchstax-autosuggest-item" key={suggestion.term}>
+                <div
+                  className="searchstax-autosuggest-item-term-container"
+                  dangerouslySetInnerHTML={{ __html: suggestion.term }}
+                  onMouseOver={() => {
+                    onMouseOver(suggestion);
+                  }}
+                  onClick={() => {
+                    onMouseClick();
+                  }}
+                ></div>
+              </div>
+            );
+          })}
+        </div>
+        <button className="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
       </div>
     );
   }
- ```
-HTML example with input override
-```
 <SearchstaxInputWidget
-          beforeSearch={beforeSearch}
-          afterSearch={afterSearch}
-          afterAutosuggest={afterAutosuggest}
-          beforeAutosuggest={beforeAutosuggest}
-          inputTemplate={InputTemplate}
-        ></SearchstaxInputWidget>
+            afterAutosuggest={afterAutosuggest}
+            beforeAutosuggest={beforeAutosuggest}
+            inputTemplate={InputTemplate}
+          ></SearchstaxInputWidget>
 ```
-## Result widget
+### Result Widget ###
-JS
+example of results widget initialization with minimum options
 ```
-function afterLinkClick(result: ISearchstaxParsedResult) {
-  // - function is called after user clicks result and passes that result as a property. when result is passed along tracking will execute and user will be navigated if null is returned events are canceled and nothing happens.
-  const propsCopy = { ...result }
-  return propsCopy
-}
+<SearchstaxResultWidget
+                afterLinkClick={afterLinkClick}
+              ></SearchstaxResultWidget>
 ```
-JSX no results emplate sample
-```function noResultTemplate(
-    searchTerm: string,
-    searchSuggestion: string
-  ): React.ReactElement {
+example of result widget initialization with template override
+```
+function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadata | null): React.ReactElement {
     return (
       <div>
         <div className="searchstax-no-results">
-          Showing <strong>no results</strong> forRRRRR
-          <strong>"{searchTerm}"</strong>
+          {" "}
+          Showing <strong>no results</strong> for <strong>"{searchTerm}"</strong>
           <br />
-          {searchSuggestion && (
+          {metaData?.spellingSuggestion && (
             <span>
-              &nbsp;Did you mean
+              &nbsp;Did you mean{" "}
               <a href="#" className="searchstax-suggestion-term">
-                {searchSuggestion}
+                {metaData?.spellingSuggestion}
               </a>
               ?
             </span>
@@ -170,71 +231,51 @@ JSX no results emplate sample
         </div>
         <div>
           <p>
-            Try searching for search related terms or topics. We offer a wide
-            variety of content to help you get the information you need.
+            {" "}
+            Try searching for search related terms or topics. We offer a wide variety of content to help you get the
+            information you need.{" "}
           </p>
           <p>Lost? Click on the ‘X” in the Search Box to reset your search.</p>
         </div>
       </div>
     );
   }
-```
-JSX results template sample
-```
-function resultsTemplate(
+  function resultsTemplate(
     searchResults: ISearchstaxParsedResult[],
-    linkClick: (
-      results: ISearchstaxParsedResult[],
-      event: any
-    ) => ISearchstaxParsedResult[]
+    resultClicked: (results: ISearchstaxParsedResult, event: any) => ISearchstaxParsedResult[]
   ): React.ReactElement {
     return (
       <div className="searchstax-search-results">
         {searchResults !== null &&
-          searchResults.map(function (searchResult, i) {
+          searchResults.map(function (searchResult) {
             return (
               <div
-                className="searchstax-search-result"
+                className={`searchstax-search-result ${searchResult.thumbnail ? "has-thumbnail" : ""}`}
                 key={searchResult.uniqueId}
               >
+                {searchResult.promoted && <div className="searchstax-search-result-promoted"></div>}
                 {searchResult.url && (
                   <a
                     href={searchResult.url}
                     data-searchstax-unique-result-id={searchResult.uniqueId}
                     onClick={(event) => {
-                      linkClick(searchResult, event);
+                      resultClicked(searchResult, event);
                     }}
                     className="searchstax-result-item-link"
                   ></a>
                 )}
-                {searchResult.ribbon && (
-                  <div className="searchstax-search-result-ribbon">
-                    {searchResult.ribbon}
-                  </div>
-                )}
+                {searchResult.ribbon && <div className="searchstax-search-result-ribbon">{searchResult.ribbon}</div>}
-                {searchResult.thumbnail && (
-                  <img
-                    src={searchResult.thumbnail}
-                    className="searchstax-thumbnail"
-                  />
-                )}
+                {searchResult.thumbnail && <img src={searchResult.thumbnail} className="searchstax-thumbnail" />}
                 <div className="searchstax-search-result-title-container">
-                  <span className="searchstax-search-result-title">
-                    {searchResult.title}
-                  </span>
+                  <span className="searchstax-search-result-title">{searchResult.title}</span>
                 </div>
-                {searchResult.paths && (
-                  <p className="searchstax-search-result-common">
-                    {searchResult.paths}
-                  </p>
-                )}
+                {searchResult.paths && <p className="searchstax-search-result-common">{searchResult.paths}</p>}
                 {searchResult.description && (
                   <p className="searchstax-search-result-description searchstax-search-result-common">
@@ -244,21 +285,16 @@ function resultsTemplate(
                 {searchResult.unmappedFields.map(function (unmappedField: any) {
                   return (
-                    <div key={unmappedField.value}>
-                      {unmappedField.isImage && (
+                    <div key={unmappedField.key}>
+                      {unmappedField.isImage && typeof unmappedField.value === "string" && (
                         <div className="searchstax-search-result-image-container">
-                          <img
-                            src={unmappedField.value}
-                            className="searchstax-result-image"
-                          />
+                          <img src={unmappedField.value} className="searchstax-result-image" />
                         </div>
                       )}
                       {!unmappedField.isImage && (
                         <div>
-                          <p className="searchstax-search-result-common">
-                            {unmappedField.value}
-                          </p>
+                          <p className="searchstax-search-result-common">{unmappedField.value}</p>
                         </div>
                       )}
                     </div>
@@ -267,29 +303,215 @@ function resultsTemplate(
               </div>
             );
           })}
+      </div>
+    );
+  }
+<SearchstaxResultWidget
+                afterLinkClick={afterLinkClick}
+                noResultTemplate={noResultTemplate}
+                resultsTemplate={resultsTemplate}
+              ></SearchstaxResultWidget>
+```
-        {searchResults !== null && searchResults.length && (
-          <div v-if="searchResults && searchResults.length && hasResultSlot">
-            {/* <slot name="results" ></slot> */}
+### Pagination Widget ###
+example of pagination widget initialization with minimum options
+```
+<SearchstaxPaginationWidget></SearchstaxPaginationWidget>
+```
+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>
         )}
-      </div>
+      </>
     );
   }
+  <SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
 ```
+### Facets Widget ###
-HTML
+example of facets widget initialization with minimum options
+```
 ```
-<SearchstaxResultWidget
-          afterLinkClick={afterLinkClick}
-          noResultTemplate={noResultTemplate}
-          resultsTemplate={resultsTemplate}
-        ></SearchstaxResultWidget>
+example of facets widget initialization with template overrides
+```
+```
+### 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
+example of search feedback widget initialization with minimum options
+```
+```
+example of search feedback widget initialization with template overrides
+```
+```
+### ExternalPromotions widget ###
+example of search feedback widget initialization with minimum options
+```
+```
+example of search feedback widget initialization  with template overrides
+```
 ```
+### Sorting Widget ###
+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>
+```
+## Template overrides
+Templates use vue slots.
 ## STYLING
 scss styles can be imported from searchstudio-ux-js

package/dist/@searchstax-inc/components/SearchstaxInputWidget.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
-import type { ISearchstaxSearchProps, ISearchstaxSuggestProps, ISearchstaxParsedResult, ISearchstaxSuggestResponse } from "@searchstax-inc/searchstudio-ux-js";
+import type { ISearchstaxSuggestProps, ISearchstaxSuggestResponse, ISearchstaxSuggestion } from "@searchstax-inc/searchstudio-ux-js";
 declare function SearchstaxInputWidget(props: {
-    beforeSearch: (props: ISearchstaxSearchProps) => ISearchstaxSearchProps | null;
-    afterSearch: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[];
-    afterAutosuggest: (result: ISearchstaxSuggestResponse) => ISearchstaxSuggestResponse;
-    beforeAutosuggest: (props: ISearchstaxSuggestProps) => ISearchstaxSuggestProps | null;
+    afterAutosuggest?: (result: ISearchstaxSuggestResponse) => ISearchstaxSuggestResponse;
+    beforeAutosuggest?: (props: ISearchstaxSuggestProps) => ISearchstaxSuggestProps | null;
     searchInputId?: string;
     suggestAfterMinChars?: number;
-    inputTemplate?: () => React.ReactElement;
-}): JSX.Element;
+    inputTemplate?: (suggestions: ISearchstaxSuggestion[], onMouseLeave: () => void, onMouseOver: (suggestion: ISearchstaxSuggestion) => void, onMouseClick: () => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
 export default SearchstaxInputWidget;

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

@@ -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 ADDED Viewed

@@ -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;