@descope-ui/common 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.5](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.4...@descope-ui/common-0.0.5) (2025-02-26)
+
+## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.3...@descope-ui/common-0.0.4) (2025-02-17)
+
 ## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.2...@descope-ui/common-0.0.3) (2025-02-04)
 
 ## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.1...@descope-ui/common-0.0.2) (2025-01-28)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/baseClasses/baseClasses/createBaseConnectorClass.js

@@ -0,0 +1,62 @@
+export const CONNECTOR_ERRORS = {
+  CONNECTOR_INVALID: 'CONNECTOR_INVALID',
+  FETCH_RESULTS_ERROR: 'FETCH_RESULTS_ERROR',
+};
+
+export const createBaseConnectorClass = () =>
+  class BaseConnectorClass {
+    constructor(getAttribute) {
+      this.getAttribute = getAttribute;
+      this.isValid = this.#validateConfig();
+    }
+
+    checkConnectorValidity() {
+      this.isValid = this.#validateConfig();
+    }
+
+    #validateConfig() {
+      const missingOrInvalidParams = this.getRequiredParams().filter(
+        (param) => {
+          const value = this.getAttribute(param);
+          return !value || !this.validateParam(param, value);
+        },
+      );
+
+      if (missingOrInvalidParams.length) {
+        return false;
+      }
+      return true;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    validateParam(param, value) {
+      // Base validation - can be overridden by specific connectors
+      return value.trim().length > 0;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getRequiredParams() {
+      // eslint-disable-next-line no-console
+      console.error('Connector must implement getRequiredParams');
+      return [];
+    }
+
+    async fetch(query) {
+      if (!this.isValid) {
+        // eslint-disable-next-line no-console
+        console.error(
+          `[${this.constructor.name}] Cannot fetch results: connector is not properly configured`,
+        );
+        return { results: [], error: CONNECTOR_ERRORS.CONNECTOR_INVALID };
+      }
+
+      return this._fetchResults(query);
+    }
+
+    // eslint-disable-next-line class-methods-use-this, no-unused-vars
+    _fetchResults(query) {
+      // eslint-disable-next-line no-console
+      console.error('Connector must implement fetchResults');
+      return { results: [], error: undefined };
+    }
+  };

package/src/baseClasses/index.js

@@ -1,3 +1,4 @@
 export * from './baseClasses/createBaseClass';
 export * from './baseClasses/createCssVarImageClass';
 export * from './baseClasses/createBaseInputClass';
+export * from './baseClasses/createBaseConnectorClass';

package/src/componentsMixins/mixins/connectorMixin.js

@@ -0,0 +1,68 @@
+export const connectorMixin =
+  ({ connectorClasses }) =>
+  (superclass) =>
+    class ConnectorMixinClass extends superclass {
+      #connectorClasses = connectorClasses;
+
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), 'connector-template'];
+      }
+
+      get connectorClasses() {
+        return this.#connectorClasses;
+      }
+
+      set connectorClasses(value) {
+        this.#connectorClasses = value;
+      }
+
+      get connectorTemplate() {
+        return this.getAttribute('connector-template');
+      }
+
+      initializeConnector() {
+        const template = this.connectorTemplate;
+
+        if (!this.connectorClasses[template]) {
+          return;
+        }
+        const ConnectorClass = this.connectorClasses[template];
+        this.connector = new ConnectorClass(this.getAttribute.bind(this));
+      }
+
+      async fetchConnectorResults(query) {
+        if (!this.connector) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `No connector initialized for the field with template: ${this.connectorTemplate}`,
+          );
+          return { results: [] };
+        }
+
+        const { results, error } = await this.connector.fetch(query);
+        if (error) {
+          return { results: [], error };
+        }
+        return {
+          results: results.map(({ label, value }) => ({
+            label,
+            value,
+          })),
+        };
+      }
+
+      init() {
+        super.init?.();
+        this.initializeConnector();
+      }
+
+      attributeChangedCallback(attrName, oldValue, newValue) {
+        super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+        if (oldValue !== newValue) {
+          if (attrName === 'connector-template') {
+            this.initializeConnector();
+          }
+        }
+      }
+    };

package/src/componentsMixins/mixins/index.js

@@ -11,4 +11,5 @@ export { normalizeBooleanAttributesMixin } from './normalizeBooleanAttributesMix
 export { lifecycleEventsMixin } from './lifecycleEventsMixin';
 export { inputEventsDispatchingMixin } from './inputEventsDispatchingMixin';
 export { externalInputMixin } from './externalInputMixin';
-export {componentsContextMixin} from './componentsContextMixin'
+export { componentsContextMixin } from './componentsContextMixin';
+export { connectorMixin } from './connectorMixin';