refactor: move combobox component to components package

smileidentity · Nov 26, 2023 · 07b5b3a · 07b5b3a
1 parent 2147702
commit 07b5b3a
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/embed/src/js/components/Combobox.js → packages/components/combobox/src/Combobox.js b/packages/embed/src/js/components/Combobox.js → packages/components/combobox/src/Combobox.js
@@ -106,15 +106,15 @@ class ComboboxTrigger extends HTMLElement {
     this.innerHTML = `${
       this.type === "text"
         ? `
-				<div>
-					<input ${this.value ? `value="${this.value}" ` : ""}${
+        <div>
+          <input ${this.value ? `value="${this.value}" ` : ""}${
             this.disabled ? " disabled " : ""
           }type="text" placeholder="${this.label}" />
-					<button ${this.disabled ? "disabled " : ""}tabindex='-1' type='button'>
-						<span class="visually-hidden">Toggle</span>
-					</button>
-				</div>
-			`
+          <button ${this.disabled ? "disabled " : ""}tabindex='-1' type='button'>
+            <span class="visually-hidden">Toggle</span>
+          </button>
+        </div>
+      `
         : `<button ${this.disabled ? "disabled " : ""}type="button">${
             this.value || this.label
           }</button>`
@@ -335,10 +335,10 @@ class ComboboxListbox extends HTMLElement {
 
   get emptyState() {
     return `
-			<p id='empty-state' style="text-align: center;">
-				${this.emptyLabel || "No items"}
-			</p>
-		`;
+      <p id='empty-state' style="text-align: center;">
+        ${this.emptyLabel || "No items"}
+      </p>
+    `;
   }
 
   connectedCallback() {
@@ -571,9 +571,21 @@ class ComboboxOption extends HTMLElement {
   }
 }
 
-export default {
-  Root: ComboboxRoot,
-  Trigger: ComboboxTrigger,
-  List: ComboboxListbox,
-  Option: ComboboxOption,
+const Root = ComboboxRoot;
+const Trigger = ComboboxTrigger;
+const List = ComboboxListbox;
+const Option = ComboboxOption;
+
+if ("customElements" in window) {
+  window.customElements.define('smileid-combobox', Root);
+  window.customElements.define('smileid-combobox-trigger', Trigger);
+  window.customElements.define('smileid-combobox-listbox', List);
+  window.customElements.define('smileid-combobox-option', Option);
+}
+
+export {
+  Root,
+  Trigger,
+  List,
+  Option,
 };
diff --git a/packages/components/combobox/src/index.js b/packages/components/combobox/src/index.js
@@ -0,0 +1,6 @@
+export {
+  Root,
+  Trigger,
+  List,
+  Option,
+} from './Combobox';
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -0,0 +1,12 @@
+{
+	"name": "@smileid/components",
+	"version": "1.0.0",
+	"private": "true",
+	"exports": {
+		".": "./index.js",
+		"./combobox": "./combobox/src/index.js"
+	},
+	"description": "A collection of Web Components used by SmileID",
+	"keywords": [ "Web Components" ],
+	"author": "SmileID <[email protected]> (https://usesmileid.com)"
+}
diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
+import "@smileid/components/combobox";
 import ConsentScreen from "./components/ConsentScreen";
 import TotpBasedConsent from "./components/TotpConsentApp";
-import Combobox from "./components/Combobox";
 import { version as sdkVersion } from "../../package.json";
 
 (function basicKyc() {
@@ -22,11 +22,6 @@ import { version as sdkVersion } from "../../package.json";
   window.customElements.define("end-user-consent", ConsentScreen);
   window.customElements.define("totp-consent-app", TotpBasedConsent);
 
-  window.customElements.define("smileid-combobox", Combobox.Root);
-  window.customElements.define("smileid-combobox-trigger", Combobox.Trigger);
-  window.customElements.define("smileid-combobox-listbox", Combobox.List);
-  window.customElements.define("smileid-combobox-option", Combobox.Option);
-
   const pages = [];
   let activeScreen;
   let config;

diff --git a/packages/embed/src/js/doc-verification.js b/packages/embed/src/js/doc-verification.js
@@ -1,7 +1,7 @@
 import "@smile_identity/smart-camera-web";
+import "@smileid/components/combobox";
 import JSZip from "jszip";
 import { version as sdkVersion } from "../../package.json";
-import Combobox from "./components/Combobox";
 
 (function documentVerification() {
   "use strict";
@@ -17,11 +17,6 @@ import Combobox from "./components/Combobox";
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
 
-  window.customElements.define("smileid-combobox", Combobox.Root);
-  window.customElements.define("smileid-combobox-trigger", Combobox.Trigger);
-  window.customElements.define("smileid-combobox-listbox", Combobox.List);
-  window.customElements.define("smileid-combobox-option", Combobox.Option);
-
   let config;
   let activeScreen;
   let id_info;

diff --git a/packages/embed/src/js/ekyc.js b/packages/embed/src/js/ekyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
+import "@smileid/components/combobox";
 import ConsentScreen from "./components/ConsentScreen";
 import TotpBasedConsent from "./components/TotpConsentApp";
-import Combobox from "./components/Combobox";
 import { version as sdkVersion } from "../../package.json";
 
 (function eKYC() {
@@ -21,11 +21,6 @@ import { version as sdkVersion } from "../../package.json";
   window.customElements.define("end-user-consent", ConsentScreen);
   window.customElements.define("totp-consent-app", TotpBasedConsent);
 
-  window.customElements.define("smileid-combobox", Combobox.Root);
-  window.customElements.define("smileid-combobox-trigger", Combobox.Trigger);
-  window.customElements.define("smileid-combobox-listbox", Combobox.List);
-  window.customElements.define("smileid-combobox-option", Combobox.Option);
-
   const pages = [];
   let activeScreen;
   let config;