@searchcraft/javascript-sdk 0.1.0

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

@@ -0,0 +1,242 @@
+import { h } from "@stencil/core";
+import { ArrowRightIconLight, ArrowRightIconDark, } from "../../assets/ClearInputIcon";
+export class ScBaseSearchResult {
+    constructor() {
+        this.handleButtonClick = () => {
+            this.buttonCallbackFn();
+        };
+        this.handleContainerClick = () => {
+            if (this.interactiveResult) {
+                this.callbackFn();
+            }
+        };
+        this.buttonCallbackFn = () => { };
+        this.buttonLabel = '';
+        this.callbackFn = () => { };
+        this.imageAltText = '';
+        this.imageSrc = '';
+        this.interactiveResult = false;
+        this.keyDownCallbackFn = () => { };
+        this.resultBodyContent = '';
+        this.resultHeading = '';
+        this.resultSubheading = '';
+        this.theme = 'light';
+    }
+    render() {
+        const isLightTheme = this.theme === 'light';
+        return (h("div", { key: 'ee89d0d997c1616d4534cae4ee9685f6ce040099', class: this.interactiveResult
+                ? isLightTheme
+                    ? 'interactiveResultContainerLight'
+                    : 'interactiveResultContainerDark'
+                : 'resultContainer', id: 'searchcraft-item', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallbackFn, tabindex: '0' }, this.interactiveResult && (h("div", { key: 'fe1174e8a72f4b73a076c5be015e44a4b1ef8215', class: 'interactiveIconLarge' }, isLightTheme ? h(ArrowRightIconLight, null) : h(ArrowRightIconDark, null))), h("div", { key: 'c8c68d1beb4b57d9b6a7a860d754f2d8577a73fb', class: 'imageContainer' }, h("img", { key: 'e102470ecc13a71620004ed148a81d9af9984976', alt: this.imageAltText, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSrc })), h("div", { key: '07dbf514b64cb063c690ed42ec6ae04b1afbaf9a', class: 'contentContainer' }, h("h2", { key: 'fb6dfe3c58667cab4319f82e49ab90145904671c', class: isLightTheme ? 'headingLight' : 'headingDark' }, this.resultHeading, this.interactiveResult && (h("div", { key: '378b93a681888fc5709c627631284fd34b375b02', class: 'interactiveIconSmall' }, isLightTheme ? (h(ArrowRightIconLight, null)) : (h(ArrowRightIconDark, null))))), h("h3", { key: '9fc6e4d8d9a55489996492fbbb482eeabb69fde1', class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.resultSubheading), h("p", { key: '66810ac7427abe83a88237471cdc30c9cd2fa84b', class: isLightTheme ? 'bodyContentLight' : 'bodyContentDark' }, this.resultBodyContent), h("button", { key: '1df164311052868adde2dc41b8c769834622a10f', onClick: this.handleButtonClick, type: 'button' }, this.buttonLabel))));
+    }
+    static get is() { return "sc-base-search-result"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-base-search-result.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-base-search-result.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonCallbackFn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "callbackFn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "imageAltText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-alt-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-src",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "interactiveResult": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "interactive-result",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "keyDownCallbackFn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "() => {}"
+            },
+            "resultBodyContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "result-body-content",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "resultHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "result-heading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "resultSubheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "result-subheading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=sc-base-search-result.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sc-base-search-result.js","sourceRoot":"","sources":["../../../src/components/sc-base-search-result/sc-base-search-result.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EACL,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAOhC,MAAM,OAAO,kBAAkB;;QAarB,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3B,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;gCApBqC,GAAG,EAAE,GAAE,CAAC;2BACzB,EAAE;0BACS,GAAG,EAAE,GAAE,CAAC;4BAClB,EAAE;wBACN,EAAE;iCACO,KAAK;iCACO,GAAG,EAAE,GAAE,CAAC;iCACpB,EAAE;6BACN,EAAE;gCACC,EAAE;qBACK,OAAO;;IAYzC,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;QAE5C,OAAO,CACL,4DACE,KAAK,EACH,IAAI,CAAC,iBAAiB;gBACpB,CAAC,CAAC,YAAY;oBACZ,CAAC,CAAC,iCAAiC;oBACnC,CAAC,CAAC,gCAAgC;gBACpC,CAAC,CAAC,iBAAiB,EAEvB,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,QAAQ,EAAC,GAAG;YAEX,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,YAAY,CAAC,CAAC,CAAC,EAAC,mBAAmB,OAAG,CAAC,CAAC,CAAC,EAAC,kBAAkB,OAAG,CAC5D,CACP;YACD,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DACE,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAChD,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB,CACE;YACN,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,2DAAI,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa;oBACrD,IAAI,CAAC,aAAa;oBAClB,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,YAAY,CAAC,CAAC,CAAC,CACd,EAAC,mBAAmB,OAAG,CACxB,CAAC,CAAC,CAAC,CACF,EAAC,kBAAkB,OAAG,CACvB,CACG,CACP,CACE;gBACL,2DAAI,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,IAC3D,IAAI,CAAC,gBAAgB,CACnB;gBACL,0DAAG,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,IAC5D,IAAI,CAAC,iBAAiB,CACrB;gBACJ,+DAAQ,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAC,QAAQ,IACnD,IAAI,CAAC,WAAW,CACV,CACL,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport {\n  ArrowRightIconLight,\n  ArrowRightIconDark,\n} from '@assets/ClearInputIcon';\n\n@Component({\n  tag: 'sc-base-search-result',\n  styleUrl: 'sc-base-search-result.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchResult {\n  @Prop() buttonCallbackFn: () => void = () => {};\n  @Prop() buttonLabel = '';\n  @Prop() callbackFn: () => void = () => {};\n  @Prop() imageAltText = '';\n  @Prop() imageSrc = '';\n  @Prop() interactiveResult = false;\n  @Prop() keyDownCallbackFn: () => void = () => {};\n  @Prop() resultBodyContent = '';\n  @Prop() resultHeading = '';\n  @Prop() resultSubheading = '';\n  @Prop() theme: 'light' | 'dark' = 'light'; // Simulating theme context.\n\n  private handleButtonClick = () => {\n    this.buttonCallbackFn();\n  };\n\n  private handleContainerClick = () => {\n    if (this.interactiveResult) {\n      this.callbackFn();\n    }\n  };\n\n  render() {\n    const isLightTheme = this.theme === 'light';\n\n    return (\n      <div\n        class={\n          this.interactiveResult\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        id='searchcraft-item'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallbackFn}\n        tabindex='0'\n      >\n        {this.interactiveResult && (\n          <div class='interactiveIconLarge'>\n            {isLightTheme ? <ArrowRightIconLight /> : <ArrowRightIconDark />}\n          </div>\n        )}\n        <div class='imageContainer'>\n          <img\n            alt={this.imageAltText}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n            src={this.imageSrc}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2 class={isLightTheme ? 'headingLight' : 'headingDark'}>\n            {this.resultHeading}\n            {this.interactiveResult && (\n              <div class='interactiveIconSmall'>\n                {isLightTheme ? (\n                  <ArrowRightIconLight />\n                ) : (\n                  <ArrowRightIconDark />\n                )}\n              </div>\n            )}\n          </h2>\n          <h3 class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}>\n            {this.resultSubheading}\n          </h3>\n          <p class={isLightTheme ? 'bodyContentLight' : 'bodyContentDark'}>\n            {this.resultBodyContent}\n          </p>\n          <button onClick={this.handleButtonClick} type='button'>\n            {this.buttonLabel}\n          </button>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,170 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.interactiveResultContainerLight {
+  background-color: #FAFAFA;
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerLight {
+    flex-direction: row;
+  }
+}
+
+.interactiveResultContainerDark {
+  background-color: #2E2E2E;
+  align-items: flex-start;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+}
+@media (min-width: 600px) {
+  .interactiveResultContainerDark {
+    flex-direction: row;
+  }
+}
+
+.resultContainer {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+@media (min-width: 600px) {
+  .resultContainer {
+    flex-direction: row;
+  }
+}
+
+.interactiveIconLarge {
+  display: inline-block;
+  position: absolute;
+  right: 5px;
+  top: 8px;
+}
+@media (max-width: 600px) {
+  .interactiveIconLarge {
+    display: none;
+  }
+}
+
+.interactiveIconSmall {
+  position: absolute;
+  right: 5px;
+  top: -2px;
+  display: inline-block;
+}
+@media (min-width: 600px) {
+  .interactiveIconSmall {
+    display: none;
+  }
+}
+
+.imageContainer {
+  max-height: 540px;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .imageContainer {
+    max-height: 100%;
+    max-width: 50%;
+  }
+}
+
+.contentContainer {
+  max-height: 100%;
+  max-width: 100%;
+}
+@media (min-width: 600px) {
+  .contentContainer {
+    max-width: 50%;
+  }
+}
+
+.imageLight {
+  aspect-ratio: 2/1;
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #D9D9D9;
+}
+
+.imageDark {
+  aspect-ratio: 2/1;
+  border-radius: 8px;
+  max-height: 100%;
+  max-width: 100%;
+  border: 1px solid #333;
+}
+
+.headingLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  position: relative;
+  color: #292929;
+}
+
+.headingDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  position: relative;
+  color: #FFF;
+}
+
+.subheadingLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #737373;
+}
+
+.subheadingDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #BFBFBF;
+}
+
+.bodyContentLight {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #404040;
+}
+
+.bodyContentDark {
+  font-family: var(--font-stack);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 4px;
+  margin-top: 0px;
+  color: #E6E6E6;
+}

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

@@ -0,0 +1,58 @@
+import { h } from "@stencil/core";
+import { useSearchcraftStore } from "../../provider/store";
+export class ScBaseSearchResults {
+    constructor() {
+        this.query = '';
+        this.searchResults = null;
+    }
+    componentDidLoad() {
+        // Subscribe to state changes
+        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+            console.log('Store updated:', state);
+            this.searchResults = Object.assign({}, state.searchResults);
+            this.query = state.query;
+        });
+        // Fetch initial state
+        const { searchResults, query } = useSearchcraftStore.getState();
+        console.log('Initial state:', searchResults, query);
+        this.searchResults = searchResults;
+        this.query = query;
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
+            console.warn('No search results data available');
+            return h("div", null, "No results to display.");
+        }
+        return (h("div", { class: 'resultsContainer' }, (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 :
+            _d.map((document, index) => {
+                const { doc: result } = document;
+                return (h("sc-base-search-result", { key: `${result === null || result === void 0 ? void 0 : result.id}-${index}`, "button-label": 'View More', "callback-fn": () => console.log('interactive element'), "button-callback-fn": () => console.log('button callback'), "interactive-result": true, "image-src": result === null || result === void 0 ? void 0 : result.poster, "result-body-content": result === null || result === void 0 ? void 0 : result.overview, "result-heading": result === null || result === void 0 ? void 0 : result.title, "result-subheading": result === null || result === void 0 ? void 0 : result.release_date }));
+            }), this.query.length > 0 &&
+            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (h("sc-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
+    }
+    static get is() { return "sc-base-search-results"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-base-search-results.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-base-search-results.module.css"]
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "searchResults": {}
+        };
+    }
+}
+//# sourceMappingURL=sc-base-search-results.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sc-base-search-results.js","sourceRoot":"","sources":["../../../src/components/sc-base-search-results/sc-base-search-results.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOtD,MAAM,OAAO,mBAAmB;;qBACb,EAAE;6BAC2B,IAAI;;IAGlD,gBAAgB;QACd,6BAA6B;QAC7B,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;YACzD,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,aAAa,qBAAQ,KAAK,CAAC,aAAa,CAAE,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,sBAAsB;QACtB,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAChE,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAA,EAAE,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;YACjD,OAAO,wCAAiC,CAAC;QAC3C,CAAC;QACD,OAAO,CACL,WAAK,KAAK,EAAC,kBAAkB,IAC1B,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI;eAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;gBACvD,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC;gBACjC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,IAAI,KAAK,EAAE,kBAChB,WAAW,iBACX,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,wBACjC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,wBACpC,IAAI,eACb,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,yBACJ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,oBACrB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,uBACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,GACvC,CACH,CAAC;YACJ,CAAC,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;gBACpB,CAAA,MAAA,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,0CAAE,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAC9C,yCACiB,gCAAgC,IAAI,CAAC,KAAK,SAAS,GAClE,CACH,CACC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\nimport type { SearchResult } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\n@Component({\n  tag: 'sc-base-search-results',\n  styleUrl: 'sc-base-search-results.module.scss',\n  shadow: true,\n})\nexport class ScBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchResult | null = null;\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    // Subscribe to state changes\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      console.log('Store updated:', state);\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    // Fetch initial state\n    const { searchResults, query } = useSearchcraftStore.getState();\n    console.log('Initial state:', searchResults, query);\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          return (\n            <sc-base-search-result\n              key={`${result?.id}-${index}`}\n              button-label='View More'\n              callback-fn={() => console.log('interactive element')}\n              button-callback-fn={() => console.log('button callback')}\n              interactive-result={true}\n              image-src={result?.poster}\n              result-body-content={result?.overview}\n              result-heading={result?.title}\n              result-subheading={result?.release_date}\n            />\n          );\n        })}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <sc-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.resultsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 100px 20px;
+}
+.resultsContainer > p {
+  align-self: center;
+}
+.resultsContainer > div {
+  margin-bottom: 20px;
+}
+.resultsContainer > div img {
+  height: 300px;
+  width: 200px;
+}

package/dist/collection/components/sc-button/sc-button.js

@@ -0,0 +1,137 @@
+import { h, Fragment, } from "@stencil/core";
+import classNames from "classnames";
+export class ScButton {
+    constructor() {
+        this.handleClick = () => {
+            this.buttonClick.emit(); // Emit the event instead of calling a function
+        };
+        this.iconElement = undefined;
+        this.iconOnly = false;
+        this.iconPosition = 'left';
+        this.label = 'Search';
+        this.isRequesting = false;
+        this.theme = 'light';
+    }
+    getButtonStyle() {
+        return this.theme === 'light' ? 'buttonLight' : 'buttonDark';
+    }
+    render() {
+        const buttonStyle = this.getButtonStyle();
+        return (h(Fragment, { key: '1786fa90c9eff082b58b6b45dda5d64cc1da9c8a' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? h("sc-spinner-dark", null) : this.iconElement)) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("sc-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
+    }
+    static get is() { return "sc-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-button.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-button.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "iconElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "global",
+                            "id": "global::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Search'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isRequesting": {},
+            "theme": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sc-button.js.map

package/dist/collection/components/sc-button/sc-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-button.js","sourceRoot":"","sources":["../../../src/components/sc-button/sc-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,QAAQ;;QAeX,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,+CAA+C;QAC1E,CAAC,CAAC;;wBAfiB,KAAK;4BACD,MAAM;qBACb,QAAQ;4BAIA,KAAK;qBACZ,OAAO;;IAEhB,cAAc;QACpB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACL,EAAC,QAAQ,uDACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,0BAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CACpD,CACV,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,oBAAoB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;YAEZ,IAAI,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnD,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,0BAAmB,CACf,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,WAAW,CACjB;YACD,YACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,YAAY,IAAI,cAAc,EACnC,0BAA0B,CAC3B,IAEA,IAAI,CAAC,KAAK,CACN,CACA,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n  Fragment,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-button',\n  styleUrl: 'sc-button.module.scss',\n  shadow: true,\n})\nexport class ScButton {\n  @Prop() iconElement?: Element;\n  @Prop() iconOnly = false;\n  @Prop() iconPosition = 'left';\n  @Prop() label = 'Search';\n\n  @Event() buttonClick!: EventEmitter<void>;\n\n  @State() isRequesting = false;\n  @State() theme = 'light';\n\n  private getButtonStyle() {\n    return this.theme === 'light' ? 'buttonLight' : 'buttonDark';\n  }\n\n  private handleClick = () => {\n    this.buttonClick.emit(); // Emit the event instead of calling a function\n  };\n\n  render() {\n    const buttonStyle = this.getButtonStyle();\n\n    return (\n      <Fragment>\n        {this.iconOnly ? (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.isRequesting ? <sc-spinner-dark /> : this.iconElement}\n          </button>\n        ) : (\n          <button\n            class={classNames(buttonStyle, 'searchcraft-button')}\n            onClick={this.handleClick}\n            type='submit'\n          >\n            {this.iconPosition === 'left' && this.isRequesting ? (\n              <div class='spinner-margin-right'>\n                <sc-spinner-dark />\n              </div>\n            ) : (\n              this.iconElement\n            )}\n            <span\n              class={classNames(\n                this.isRequesting && 'button-label',\n                'searchcraft-button-label',\n              )}\n            >\n              {this.label}\n            </span>\n          </button>\n        )}\n      </Fragment>\n    );\n  }\n}\n"]}