@searchstax-inc/searchstudio-ux-js 0.0.1 → 0.0.2

package/README.md

@@ -1,61 +1,140 @@
-# vite-vanilla-ts-lib-starter
+# searchstudio-ux-js
 
-The starter is built on top of Vite 4.x and prepared for writing libraries in TypeScript. It generates a hybrid package - both support for CommonJS and ESM modules.
+Library to build searchstudio search page
 
-## Features
+## Installation
 
-- Hybrid support - CommonJS and ESM modules
-- IIFE bundle for direct browser support without bundler
-- Typings bundle
-- ESLint - scripts linter
-- Stylelint - styles linter
-- Prettier - formatter
-- Vitest - test framework
-- Husky + lint-staged - pre-commit git hook set up for formatting
-
-## GitHub Template
+`npm install --save @searchstax-inc/searchstudio-ux-js`
+## Usage
 
-This is a template repo. Click the green [Use this template](https://github.com/kbysiec/vite-vanilla-ts-lib-starter/generate) button to get started.
+After importing Searchstax class a new instance needs to be created:
 
-## Clone to local
+```const searchstax = new Searchstax();```
 
-If you prefer to do it manually with the cleaner git history
+## Initialization
 
-```bash
-git clone https://github.com/kbysiec/vite-vanilla-ts-lib-starter.git
-cd vite-vanilla-ts-lib-starter
-npm i
+```
+searchstax.initialize({
+    language: "en",
+    searchURL: "",
+    suggesterURL: "",
+    authenticationValue: "",
+    trackApiKey: "",
+    searchApiKey: "",
+    authType: "basic",
+  });
 ```
 
-## Checklist
-
-When you use this template, update the following:
-
-- Remove `.git` directory and run `git init` to clean up the history
-- Change the name in `package.json` - it will be the name of the IIFE bundle global variable and bundle files name (`.cjs`, `.mjs`, `.iife.js`, `d.ts`)
-- Change the author name in `LICENSE`
-- Clean up the `README` and `CHANGELOG` files
-
-And, enjoy :)
-
-## Usage
-
-The starter contains the following scripts:
-
-- `dev` - starts dev server
-- `build` - generates the following bundles: CommonJS (`.cjs`) ESM (`.mjs`) and IIFE (`.iife.js`). The name of bundle is automatically taken from `package.json` name property
-- `test` - starts vitest and runs all tests
-- `test:coverage` - starts vitest and run all tests with code coverage report
-- `lint:scripts` - lint `.ts` files with eslint
-- `lint:styles` - lint `.css` and `.scss` files with stylelint
-- `format:scripts` - format `.ts`, `.html` and `.json` files with prettier
-- `format:styles` - format `.cs` and `.scss` files with stylelint
-- `format` - format all with prettier and stylelint
-- `prepare` - script for setting up husky pre-commit hook
-- `uninstall-husky` - script for removing husky from repository
+## Input widget
+example of input widget initialization with various options
+```
+ searchstax.addSearchInputWidget("searchstax-input-container", {
+    suggestAfterMinChars: 3,
+    hideBranding: true,
+    hooks: {
+      beforeSearch: function (props: ISearchstaxSearchProps) {
+        // gets searchProps, if passed along further search will execute, if null then event gets canceled
+        // props can be modified and passed along
+        const propsCopy = { ...props };
+        // propsCopy.term = propsCopy.term;
+        return propsCopy;
+      },
+      afterSearch: function (results: ISearchstaxParsedResult[]) {
+        const copy = [...results];
+        // copy.splice(0, 1);
+        return copy;
+      },
+      afterAutosuggest: function (result: ISearchstaxSuggestResponse) {
+        const copy = { ...result };
+        console.log("copy", copy);
+        return copy;
+      },
+      beforeAutosuggest: function (props: ISearchstaxSuggestProps) {
+        // gets suggestProps, if passed along further autosuggest will execute, if null then event gets canceled
+        // props can be modified and passed along
+        const propsCopy = { ...props };
+        // propsCopy.term = propsCopy.term + '222';
+        return propsCopy;
+      },
+    },
+    templates: {
+    mainTemplate: `<div class="searchstax-search-input-container">
+    <div class="searchstax-search-input-wrapper">
+      <input type="text" id="searchstax-search-input" class="searchstax-search-input" placeholder="SEARCH FOR..." />
+      <button class="searchstax-spinner-icon" id="searchstax-search-input-action-button"></button>
+    </div>
+    </div>`,
+    searchInputId: "searchstax-input-container",
+    autosuggestItemTemplate: `<div class="searchstax-autosuggest-item-term-container">{{{term}}}</div>`,
+    },
+  });
+```
+## Result widget
 
-## Acknowledgment
 
-If you found it useful somehow, I would be grateful if you could leave a star in the project's GitHub repository.
+example of result widget initialization with various options
+```
+ searchstax.addSearchResultsWidget("searchstax-results-container", {
+    hideUniqueKey: true,
+    // searchResultUniqueIdAttribute: ' data-searchstax-unique-result-id', if custom result template is used
+    // points to an attribute that will be used to identify a result
+    searchResultsContainerId: "searchstax-result-container", // if main template is over ridden this points to an
+    // id in the main element where results need to be rendered
+    templates: {
+      mainTemplate: `
+          <div class="searchstax-search-results-container">
+            <div id="searchstax-result-container"></div>
+          </div>
+               `,
+      searchResultTemplate: `<div class="searchstax-search-result">
+      {{#url}}
+      <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" class="searchstax-result-item-link"></a>
+      {{/url}}
+      {{#ribbon}}
+      <div class="searchstax-search-result-ribbon">
+        {{ribbon}}
+      </div>
+      {{/ribbon}}
+      {{#thumbnail}}
+        <img :src="thumbnail" class="searchstax-thumbnail">
+      {{/thumbnail}}
+      <div class="searchstax-search-result-title-container">
+        <span class="searchstax-search-result-title">{{title}}</span>
+      </div>
+      {{#paths}}
+        <p class="searchstax-search-result-common">
+          {{paths}}
+        </p>
+      {{/paths}}
+      {{#description}}
+      <p class="searchstax-search-result-description searchstax-search-result-common">
+        {{description}}
+      </p>
+      {{/description}}
+      {{#unmappedFields}}
+        {{#isImage}}
+          <div class="searchstax-search-result-image-container">
+            <img :src="result[value]" class="searchstax-result-image">
+          </div>
+        {{/isImage}}
+        {{^isImage}}
+          <p class="searchstax-search-result-common">
+            {{value}}
+          </p>
+        {{/isImage}}
+      {{/unmappedFields}}
+      </div>`,
+    },
+    hooks: {
+      afterLinkClick: function (result: ISearchstaxParsedResult) {
+        // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
+        const propsCopy = { ...result };
+
+        return propsCopy;
+      },
+    },
+  });
+```
 
-Thank you.
+## Template overrides
+Templates use mustache templating. For more info see https://github.com/janl/mustache.js

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@searchstax-inc/searchstudio-ux-js",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "files": [
     "dist"
   ],