@searchcraft/javascript-sdk 0.1.0

package/dist/collection/components/sc-auto-search-form/sc-auto-search-form.js

@@ -0,0 +1,275 @@
+import { h, } from "@stencil/core";
+import { CoreSDK as SearchcraftCore, } from "@searchcraft/core";
+import { useSearchcraftStore } from "../../provider/store";
+export class ScAutoSearchForm {
+    constructor() {
+        this.debounceTimeout = null;
+        this.debounceDelay = 300; // 300ms debounce delay
+        this.componentDidLoad = () => {
+            const searchcraft = new SearchcraftCore(this.config);
+            this.searchStore.initialize(searchcraft, true);
+        };
+        // Initialize searchStore as a private field
+        this.searchStore = useSearchcraftStore.getState();
+        /**
+         * Handles the input change event from sc-input
+         */
+        this.handleInputChange = (event) => {
+            console.log(event);
+            this.query = event.detail; // Update the query state with input value
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout); // Clear any existing timeout
+            }
+            // Emit querySubmit immediately for real-time updates
+            this.querySubmit.emit(this.query);
+            // Set a new debounce timeout to execute search after delay
+            this.debounceTimeout = setTimeout(() => {
+                this.runSearch(); // Execute search logic after typing stops
+            }, this.debounceDelay);
+        };
+        /**
+         * Handles the clear input event from sc-input
+         */
+        this.handleClearInput = () => {
+            this.query = '';
+            if (typeof this.clearInput === 'function') {
+                this.clearInput();
+            }
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout); // Clear the debounce timeout
+            }
+            // Reset error and search results
+            this.error = false;
+            this.searchResults = '';
+        };
+        /**
+         * Runs the search logic
+         */
+        this.runSearch = async () => {
+            if (this.query.trim() === '') {
+                this.error = true;
+                this.searchResults = '';
+            }
+            else {
+                this.error = false;
+                this.searchStore.setQuery(this.query); // Set the query in the searchStore
+                await this.searchStore.search(); // Perform the search
+                this.searchResults = JSON.stringify(this.searchStore.searchResults); // Store search results as JSON
+            }
+        };
+        /**
+         * Handles the form submission logic
+         */
+        this.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            await this.runSearch(); // Trigger search logic on form submit
+        };
+        this.autoSearchFormClass = '';
+        this.clearInput = () => { };
+        this.config = {
+            apiKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.inputCaptionValue = '';
+        this.labelForInput = 'Search';
+        this.placeholderValue = 'Search here';
+        this.rightToLeftOrientation = false;
+        this.searchContainerClass = '';
+        this.error = false;
+        this.query = '';
+        this.searchResults = '';
+    }
+    render() {
+        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
+        return (h("form", { key: '9c467f62b6464d5976a6cdbb17071777829fcd65', class: `${formClass}`, onSubmit: this.handleFormSubmit }, h("label", { key: '0740487a130c5427a2e7c7c7bf9b112fdd2038f7' }, this.labelForInput), h("div", { key: '1b1816b4c1fa472f1227110d480fc3014782383b', class: 'searchContainer' }, h("sc-input", { key: '2e8bd731c91b75db17f0c177c4e57e04268cb0dd', "placeholder-value": this.placeholderValue, query: this.query, "input-caption-value": this.inputCaptionValue, "right-to-left-orientation": this.rightToLeftOrientation, onSearchInputChange: this.handleInputChange, onClearInput: this.handleClearInput })), this.error && h("p", { key: '82aa93fa1e009d49adf7ba4e6568298686b9b3ec', class: 'error' }, "Please enter a search query."), this.searchResults && h("pre", { key: '3c7e024e7d961418d2330d1ce9d117e2a7f24051', class: 'results' }, this.searchResults)));
+    }
+    static get is() { return "sc-auto-search-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-auto-search-form.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-auto-search-form.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoSearchFormClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "auto-search-form-class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "clearInput": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CoreConfigSDK",
+                    "resolved": "CoreConfigSDK",
+                    "references": {
+                        "CoreConfigSDK": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::CoreConfigSDK"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  }"
+            },
+            "inputCaptionValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "labelForInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-for-input",
+                "reflect": false,
+                "defaultValue": "'Search'"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "'Search here'"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "searchContainerClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-container-class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {},
+            "query": {},
+            "searchResults": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "querySubmit",
+                "name": "querySubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the search query changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sc-auto-search-form.js.map

package/dist/collection/components/sc-auto-search-form/sc-auto-search-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-auto-search-form.js","sourceRoot":"","sources":["../../../src/components/sc-auto-search-form/sc-auto-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport type { ScInputCustomEvent } from '@components/sc-input/sc-input';\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'sc-auto-search-form',\n  styleUrl: 'sc-auto-search-form.module.scss',\n  shadow: true,\n})\nexport class ScAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {}; // Default assignment ensures no undefined error\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() inputCaptionValue = '';\n  @Prop() labelForInput = 'Search';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  /**\n   * Event emitted when the search query changes\n   */\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults = '';\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 300; // 300ms debounce delay\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  // Initialize searchStore as a private field\n  private searchStore = useSearchcraftStore.getState();\n\n  /**\n   * Handles the input change event from sc-input\n   */\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    console.log(event);\n    this.query = event.detail; // Update the query state with input value\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout); // Clear any existing timeout\n    }\n\n    // Emit querySubmit immediately for real-time updates\n    this.querySubmit.emit(this.query);\n\n    // Set a new debounce timeout to execute search after delay\n    this.debounceTimeout = setTimeout(() => {\n      this.runSearch(); // Execute search logic after typing stops\n    }, this.debounceDelay);\n  };\n\n  /**\n   * Handles the clear input event from sc-input\n   */\n  handleClearInput = () => {\n    this.query = '';\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout); // Clear the debounce timeout\n    }\n\n    // Reset error and search results\n    this.error = false;\n    this.searchResults = '';\n  };\n\n  /**\n   * Runs the search logic\n   */\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.searchResults = '';\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query); // Set the query in the searchStore\n      await this.searchStore.search(); // Perform the search\n      this.searchResults = JSON.stringify(this.searchStore.searchResults); // Store search results as JSON\n    }\n  };\n\n  /**\n   * Handles the form submission logic\n   */\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch(); // Trigger search logic on form submit\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n\n    return (\n      <form class={`${formClass}`} onSubmit={this.handleFormSubmit}>\n        <label>{this.labelForInput}</label>\n        <div class='searchContainer'>\n          <sc-input\n            placeholder-value={this.placeholderValue}\n            query={this.query}\n            input-caption-value={this.inputCaptionValue}\n            right-to-left-orientation={this.rightToLeftOrientation}\n            onSearchInputChange={this.handleInputChange}\n            onClearInput={this.handleClearInput}\n          />\n        </div>\n        {this.error && <p class='error'>Please enter a search query.</p>}\n        {this.searchResults && <pre class='results'>{this.searchResults}</pre>}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-auto-search-form/sc-auto-search-form.module.css

@@ -0,0 +1,16 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.formLTR {
+  text-align: left;
+}
+
+.formRTL {
+  text-align: right;
+}
+
+.searchContainer {
+  align-items: center;
+  display: flex;
+}

package/dist/collection/components/sc-base-search-form/sc-base-search-form.js

@@ -0,0 +1,168 @@
+import { h } from "@stencil/core";
+import { CoreSDK as SearchcraftCore, } from "@searchcraft/core";
+import { useSearchcraftStore, useThemeStore } from "../../provider/store";
+export class ScBaseSearchForm {
+    constructor() {
+        this.clearInput = () => { };
+        this.searchStore = useSearchcraftStore.getState();
+        this.themeStore = useThemeStore.getState();
+        this.componentDidLoad = () => {
+            const searchcraft = new SearchcraftCore(this.config);
+            this.searchStore.initialize(searchcraft, true);
+        };
+        this.handleFormSubmit = async (event) => {
+            event.preventDefault();
+            if (this.query.trim() === '') {
+                this.error = true;
+            }
+            else {
+                this.error = false;
+                this.searchStore.setQuery(this.query);
+                await this.searchStore.search();
+                this.searchResults = JSON.stringify(this.searchStore.searchResults);
+            }
+        };
+        this.handleSearchInputChange = (event) => {
+            this.query = event.detail;
+        };
+        this.handleClearInput = () => {
+            this.query = '';
+            this === null || this === void 0 ? void 0 : this.clearInput();
+        };
+        this.toggleTheme = () => {
+            this.themeStore.toggleTheme();
+        };
+        this.config = {
+            apiKey: '',
+            endpointURL: '',
+            index: [],
+        };
+        this.errorMessage = 'Search was unsuccessful';
+        this.labelForInput = 'Search';
+        this.rightToLeftOrientation = false;
+        this.error = false;
+        this.query = '';
+        this.searchResults = null;
+    }
+    render() {
+        return (h("form", { key: '2f128025b9caa2ab8a888d461da9b162bbc30d2f', class: this.rightToLeftOrientation ? 'formRTL' : 'formLTR', onSubmit: this.handleFormSubmit }, h("sc-input-label", { key: '110f30f0bbd27a0a512d9461a141198b738cc945', label: this.labelForInput }), h("div", { key: '5ec54632aeb5595f76a769d99801c8b92745bb05', class: 'searchContainer' }, this.rightToLeftOrientation && h("sc-button", { key: '753746e7c6bab72006e5a866609934e4738cb096' }), h("sc-input", { key: '823cda15577d253db0f1c30e3c8aa64fc19520ff', onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation, onSearchInputChange: this.handleSearchInputChange, query: this.query }), !this.rightToLeftOrientation && (h("sc-button", { key: '99474f1a9fe35c18de0d6cc8ba9e70a4f1471c55', onButtonClick: this.handleFormSubmit }))), this.error && h("sc-error-message", { key: '03da10c2d3c51da69db971a0bfdbc7edbe218e1c', errorMessage: this.errorMessage })));
+    }
+    static get is() { return "sc-base-search-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-base-search-form.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-base-search-form.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CoreConfigSDK",
+                    "resolved": "CoreConfigSDK",
+                    "references": {
+                        "CoreConfigSDK": {
+                            "location": "import",
+                            "path": "@searchcraft/core",
+                            "id": "../core-sdk/dist/index.d.ts::CoreConfigSDK"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  }"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error-message",
+                "reflect": false,
+                "defaultValue": "'Search was unsuccessful'"
+            },
+            "labelForInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-for-input",
+                "reflect": false,
+                "defaultValue": "'Search'"
+            },
+            "rightToLeftOrientation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "right-to-left-orientation",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {},
+            "query": {},
+            "searchResults": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clearInput",
+                "name": "clearInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sc-base-search-form.js.map

package/dist/collection/components/sc-base-search-form/sc-base-search-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-base-search-form.js","sourceRoot":"","sources":["../../../src/components/sc-base-search-form/sc-base-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Prop, State } from '@stencil/core';\nimport {\n  type CoreConfigSDK,\n  CoreSDK as SearchcraftCore,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/sc-input/sc-input';\n\n@Component({\n  tag: 'sc-base-search-form',\n  styleUrl: 'sc-base-search-form.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchForm {\n  @Prop() config: CoreConfigSDK = {\n    apiKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() labelForInput = 'Search';\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput = () => {};\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults: string | null = null;\n\n  private searchStore = useSearchcraftStore.getState();\n  private themeStore = useThemeStore.getState();\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config);\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  handleFormSubmit = async (event) => {\n    event.preventDefault();\n    if (this.query.trim() === '') {\n      this.error = true;\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      await this.searchStore.search();\n      this.searchResults = JSON.stringify(this.searchStore.searchResults);\n    }\n  };\n\n  handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this?.clearInput();\n  };\n\n  toggleTheme = () => {\n    this.themeStore.toggleTheme();\n  };\n\n  render() {\n    return (\n      <form\n        class={this.rightToLeftOrientation ? 'formRTL' : 'formLTR'}\n        onSubmit={this.handleFormSubmit}\n      >\n        <sc-input-label label={this.labelForInput} />\n        <div class='searchContainer'>\n          {this.rightToLeftOrientation && <sc-button />}\n          <sc-input\n            onClearInput={this.handleClearInput}\n            rightToLeftOrientation={this.rightToLeftOrientation}\n            onSearchInputChange={this.handleSearchInputChange}\n            query={this.query}\n          />\n          {!this.rightToLeftOrientation && (\n            <sc-button onButtonClick={this.handleFormSubmit} />\n          )}\n        </div>\n        {this.error && <sc-error-message errorMessage={this.errorMessage} />}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-base-search-form/sc-base-search-form.module.css

@@ -0,0 +1,14 @@
+.formLTR {
+  font-family: Helvetica, Arial, sans-serif;
+  text-align: left;
+}
+
+.formRTL {
+  font-family: Helvetica, Arial, sans-serif;
+  text-align: right;
+}
+
+.searchContainer {
+  align-items: center;
+  display: flex;
+}