@searchstax-inc/searchstudio-ux-react 0.0.1 → 0.0.3

package/src/components/SearchstaxResultWidget.tsx

@@ -1,202 +0,0 @@
-import { useEffect, useState } from "react";
-//@ts-expect-error
-
-import { store } from "./../stores/searchstaxStore.js";
-//@ts-expect-error
-import type { ISearchstaxParsedResult, ISearchstaxSearchMetadata } from '@searchstax-inc/searchstudio-ux-js'
-
-function SearchstaxResultWidget(props: {
-  afterLinkClick: (
-    results: ISearchstaxParsedResult[]
-  ) => ISearchstaxParsedResult[];
-  noResultTemplate?: (searchTerm: string, searchSuggestion: string) => React.ReactElement;
-  resultsTemplate?: (results: ISearchstaxParsedResult[], resultClicked: (result: ISearchstaxParsedResult, event: any) => any) => React.ReactElement;
-}) {
-  //state variable
-  const [searchResults, setResults] = useState(
-    null as ISearchstaxParsedResult[] | null
-  );
-  const [searchTerm, setSearchTerm] = useState("");
-  const [searchSuggestion, setSearchSuggestion] = useState("");
-
-  const resultClicked = (result: ISearchstaxParsedResult, event: any) => {
-    event.preventDefault();
-    event.stopPropagation();
-    store.searchstax.executeLinkClick(result.uniqueId);
-  };
-
-  useEffect(() => {
-    const hooks: { [key: string]: (prop: any) => any } = {};
-    if (props.afterLinkClick) {
-      hooks.afterLinkClick = props.afterLinkClick;
-    }
-
-    store.searchstax.dataLayer.searchResultsObservable.subscribe(
-      (results: ISearchstaxParsedResult[] | null) => {
-        setResults(results);
-      }
-    );
-    store.searchstax.dataLayer.searchResultsMetadataObservable.subscribe(
-      (results: ISearchstaxSearchMetadata | null) => {
-        setSearchSuggestion(results?.spellingSuggestion ?? "");
-      }
-    );
-
-    store.searchstax.dataLayer.searchTermChangeObservable.subscribe(
-      (result: string) => {
-        setSearchTerm(result);
-      }
-    );
-
-    store.searchstax.addSearchResultsWidget("searchstax-results-container", {
-      searchResultsContainerId: "searchstax-result-container", // if main template is over ridden this points to an
-      templates: {},
-      hooks: hooks,
-    });
-  }, []);
-
-  return (
-    <>
-      <div id="searchstax-results-container">
-        <div className="searchstax-search-results-container">
-          <div id="searchstax-result-container">
-            {searchResults &&
-              searchResults.length === 0 &&
-              !props.noResultTemplate && (
-                <div>
-                  <div className="searchstax-no-results">
-                    Showing <strong>no results</strong> for
-                    <strong>"{searchTerm}"</strong>
-                    <br />
-                    {searchSuggestion && (
-                      <span>
-                        &nbsp;Did you mean
-                        <a href="#" className="searchstax-suggestion-term">
-                          {searchSuggestion}
-                        </a>
-                        ?
-                      </span>
-                    )}
-                  </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.
-                    </p>
-                    <p>
-                      Lost? Click on the ‘X” in the Search Box to reset your
-                      search.
-                    </p>
-                  </div>
-                </div>
-              )}
-
-            {searchResults &&
-              searchResults.length === 0 &&
-              props.noResultTemplate && (
-                <>{props.noResultTemplate(searchTerm, searchSuggestion)}</>
-              )}
-
-            {searchResults &&
-              searchResults.length &&
-              !props.resultsTemplate && (
-                <div className="searchstax-search-results">
-                  {searchResults !== null &&
-                    searchResults.map(function (searchResult) {
-                      return (
-                        <div
-                          className="searchstax-search-result"
-                          key={searchResult.uniqueId}
-                        >
-                          {searchResult.url && (
-                            <a
-                              href={searchResult.url}
-                              data-searchstax-unique-result-id={
-                                searchResult.uniqueId
-                              }
-                              onClick={(event) => {
-                                resultClicked(searchResult, event);
-                              }}
-                              className="searchstax-result-item-link"
-                            ></a>
-                          )}
-
-                          {searchResult.ribbon && (
-                            <div className="searchstax-search-result-ribbon">
-                              {searchResult.ribbon}
-                            </div>
-                          )}
-
-                          {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>
-                          </div>
-
-                          {searchResult.paths && (
-                            <p className="searchstax-search-result-common">
-                              {searchResult.paths}
-                            </p>
-                          )}
-
-                          {searchResult.description && (
-                            <p className="searchstax-search-result-description searchstax-search-result-common">
-                              {searchResult.description}
-                            </p>
-                          )}
-
-                          {searchResult.unmappedFields.map(function (
-                            unmappedField: any
-                          ) {
-                            return (
-                              <div key={unmappedField.value}>
-                                {unmappedField.isImage && (
-                                  <div className="searchstax-search-result-image-container">
-                                    <img
-                                      src={unmappedField.value}
-                                      className="searchstax-result-image"
-                                    />
-                                  </div>
-                                )}
-
-                                {!unmappedField.isImage && (
-                                  <div>
-                                    <p className="searchstax-search-result-common">
-                                      {unmappedField.value}
-                                    </p>
-                                  </div>
-                                )}
-                              </div>
-                            );
-                          })}
-                        </div>
-                      );
-                    })}
-
-                  {searchResults !== null && searchResults.length && (
-                    <div v-if="searchResults && searchResults.length && hasResultSlot">
-                      {/* <slot name="results" ></slot> */}
-                    </div>
-                  )}
-                </div>
-              )}
-
-            {searchResults && searchResults.length && props.resultsTemplate && (
-              <>{props.resultsTemplate(searchResults, resultClicked)}</>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default SearchstaxResultWidget;

package/src/components/SearchstaxWrapper.tsx

@@ -1,34 +0,0 @@
-import { useEffect } from "react";
-//@ts-expect-error
-import { store } from "./../stores/searchstaxStore.js";
-//@ts-expect-error
-import Searchstax from '@searchstax-inc/searchstudio-ux-js'
-
-
-function SearchstaxWrapper(props: {
-  language?: string;
-  searchURL: string;
-  suggesterURL: string;
-  trackApiKey: string;
-  searchAuth: string;
-  authType?: "basic" | "token";
-  children: any;
-  initialized: (searchstax: Searchstax) => void;
-}) {
-  useEffect(() => {
-    store.searchstax.initialize({
-        language: props.language ?? 'en',
-        searchURL: props.searchURL,
-        suggesterURL: props.suggesterURL,
-        trackApiKey: props.trackApiKey,
-        searchAuth: props.searchAuth,
-        authType: props.authType ?? "basic"
-      })
-
-      props.initialized(store.searchstax);
-  }, [props.initialized]);
-
-  return <>{props.children}</>;
-}
-
-export default SearchstaxWrapper;

package/src/main.js

@@ -1,4 +0,0 @@
-import SearchstaxWrapper from './components/SearchstaxWrapper.vue'
-import SearchstaxResultWidget from './components/SearchstaxResultWidget.vue'
-import SearchstaxInputWidget from './components/SearchstaxInputWidget.vue'
-export { SearchstaxWrapper, SearchstaxResultWidget, SearchstaxInputWidget }

package/src/stores/searchstaxStore.js

@@ -1,5 +0,0 @@
-
-import { Searchstax } from '@searchstax-inc/searchstudio-ux-js'
-export const store = {
-    searchstax: new Searchstax('react')
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,30 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  plugins: [
-      react(),
-      dts({
-          insertTypesEntry: true,
-      }),
-  ],
-  build: {
-      lib: {
-          entry: "src/main.tsx",
-          name: 'searchstudioUxReactTs',
-          formats: ["es", "cjs", "umd"],
-          fileName: (format) => `searchstudio-ux-react-ts.${format}.js`,
-      },
-      rollupOptions: {
-          external: ['react', 'react-dom', 'styled-components'],
-          output: {
-              globals: {
-                  react: 'React',
-                  'react-dom': 'ReactDOM',
-                  'styled-components': 'styled',
-              },
-          },
-      },
-  },
-});