@descope-ui/common 0.0.1

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# common
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test common` to execute the unit tests via [Jest](https://jestjs.io).

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@descope-ui/common",
+  "version": "0.0.1",
+  "dependencies": {
+    "element-internals-polyfill": "^1.3.9",
+    "color": "^4.2.3",
+    "lodash.merge": "4.6.2"
+  },
+  "exports": {
+    "./constants": {
+      "import": "./src/constants.js"
+    },
+    "./utils": {
+      "import": "./src/utils/index.js"
+    },
+    "./theme-helpers": {
+      "import": "./src/themeHelpers/index.js",
+      "require": "./src/themeHelpers/index.js"
+    },
+    "./components-mixins": {
+      "import": "./src/componentsMixins/index.js"
+    },
+    "./base-classes": {
+      "import": "./src/baseClasses/index.js"
+    },
+    "./components-helpers": {
+      "import": "./src/componentsHelpers/index.js"
+    },
+    "./sb-controls": {
+      "import": "./src/sbControls.js"
+    },
+    "./sb-helpers": {
+      "import": "./src/sbHelpers.js"
+    }
+  }
+}

package/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "@descope-ui/common",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/libs/common/src",
+  "projectType": "library",
+  "tags": []
+}

package/src/baseClasses/baseClasses/createBaseClass.js

@@ -0,0 +1,66 @@
+import { compose } from '../../utils';
+import { componentNameValidationMixin } from '../../componentsMixins/mixins/componentNameValidationMixin';
+import { componentsContextMixin } from '../../componentsMixins/mixins/componentsContextMixin';
+import { hoverableMixin } from '../../componentsMixins/mixins/hoverableMixin';
+import { normalizeBooleanAttributesMixin } from '../../componentsMixins/mixins/normalizeBooleanAttributesMixin';
+
+export const createBaseClass = ({ componentName, baseSelector = '' }) => {
+  class DescopeBaseClass extends HTMLElement {
+    static get componentName() {
+      return componentName;
+    }
+
+    #baseElement;
+
+    #isInit = true;
+
+    // base selector is the selector for the component wrapper,
+    // it's the highest element that is relevant for the layout
+    // eslint-disable-next-line class-methods-use-this
+    get baseSelector() {
+      return baseSelector;
+    }
+
+    // this is the base element, which returned by querying the base selector
+    get baseElement() {
+      this.#baseElement ??= this.baseSelector
+        ? this.rootElement.querySelector(this.baseSelector)
+        : this;
+
+      if (!this.#baseElement) {
+        // eslint-disable-next-line no-console
+        console.warn('missing base element for component', this.localName);
+      }
+      return this.#baseElement;
+    }
+
+    // this is the component root level element,
+    // it can be either a shadow root or the component's node from the light DOM
+    get rootElement() {
+      return this.shadowRoot || this;
+    }
+
+    get name() {
+      return this.getAttribute('name');
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+
+      if (this.rootElement.isConnected) {
+        // the init function is running once, on the first time the component is connected
+        if (this.#isInit) {
+          this.#isInit = false;
+          this.init?.();
+        }
+      }
+    }
+  }
+
+  return compose(
+    componentNameValidationMixin,
+    hoverableMixin,
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
+  )(DescopeBaseClass);
+};

package/src/baseClasses/baseClasses/createBaseInputClass.js

@@ -0,0 +1,14 @@
+import { compose } from '../../utils';
+import { changeMixin } from '../../componentsMixins/mixins/changeMixin';
+import { inputEventsDispatchingMixin } from '../../componentsMixins/mixins/inputEventsDispatchingMixin';
+import { inputValidationMixin } from '../../componentsMixins/mixins/inputValidationMixin';
+import { normalizeBooleanAttributesMixin } from '../../componentsMixins/mixins/normalizeBooleanAttributesMixin';
+import { createBaseClass } from './createBaseClass';
+
+export const createBaseInputClass = (...args) =>
+  compose(
+    inputValidationMixin,
+    changeMixin,
+    normalizeBooleanAttributesMixin,
+    inputEventsDispatchingMixin
+  )(createBaseClass(...args));

package/src/baseClasses/baseClasses/createCssVarImageClass.js

@@ -0,0 +1,55 @@
+import { compose } from '../../utils';
+import { componentNameValidationMixin } from '../../componentsMixins/mixins/componentNameValidationMixin';
+import { createStyleMixin } from '../../componentsMixins/mixins/createStyleMixin';
+import { draggableMixin } from '../../componentsMixins/mixins/draggableMixin';
+import { createBaseClass } from './createBaseClass';
+
+export const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) => {
+  let style;
+  const getContent = () => style;
+
+  class RawCssVarImageClass extends createBaseClass({
+    componentName,
+    baseSelector: ':host > div',
+  }) {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+				:host([draggable="true"]) > div {
+					pointer-events: none
+				}
+				:host > div {
+					display: inline-block;
+					max-width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+					margin: auto;
+					${getContent()}
+				}
+			</style>
+			<div></div>
+			`;
+    }
+  }
+
+  const CssVarImageClass = compose(
+    createStyleMixin({
+      mappings: {
+        height: { selector: () => ':host > div' },
+        width: { selector: () => ':host > div' },
+        [varName]: { property: 'content' },
+        [fallbackVarName]: { property: 'content' },
+      },
+    }),
+    draggableMixin,
+    componentNameValidationMixin
+  )(RawCssVarImageClass);
+
+  style = `content: var(${CssVarImageClass.cssVarList[varName]}, var(${CssVarImageClass.cssVarList[fallbackVarName]}));`;
+
+  return CssVarImageClass;
+};

package/src/baseClasses/index.js

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

package/src/componentsHelpers/index.js

@@ -0,0 +1,95 @@
+import { kebabCaseJoin } from '../utils';
+import { DESCOPE_PREFIX } from '../constants';
+
+export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+  // sync all attrs on init
+  const filteredAttrs = Array.from(ele.attributes)
+    .filter(
+      (attr) =>
+        !excludeAttrs.includes(attr.name) &&
+        (!includeAttrs.length || includeAttrs.includes(attr.name))
+    )
+    .map((attr) => attr.name);
+
+  callback(filteredAttrs);
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (
+        mutation.type === 'attributes' &&
+        !excludeAttrs.includes(mutation.attributeName) &&
+        (!includeAttrs.length || includeAttrs.includes(mutation.attributeName))
+      ) {
+        callback([mutation.attributeName]);
+      }
+    });
+  });
+
+  observer.observe(ele, { attributes: true });
+};
+
+// calling the callback with this object: { addedNodes, removedNodes }
+export const observeChildren = (ele, callback) => {
+  callback({ addedNodes: Array.from(ele.children), removedNodes: [] });
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'childList' || mutation.type === 'characterData') {
+        callback(mutation);
+      }
+    });
+  });
+
+  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+};
+
+const createSyncAttrsCb =
+  (srcEle, targetEle, mapAttrs = {}) =>
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
+        }
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
+
+export const syncAttrs = (ele1, ele2, options) => {
+  observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
+  observeAttributes(ele2, createSyncAttrsCb(ele2, ele1), options);
+};
+
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+export const forwardAttrs = (source, dest, options = {}) => {
+  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+};
+
+export const forwardProps = (src, target, props = []) => {
+  if (!props.length) return;
+
+  const config = props.reduce(
+    (acc, prop) =>
+      Object.assign(acc, {
+        [prop]: {
+          get() {
+            return src[prop];
+          },
+          set(v) {
+            // eslint-disable-next-line no-param-reassign
+            src[prop] = v;
+          },
+        },
+      }),
+    {}
+  );
+
+  Object.defineProperties(target, config);
+};

package/src/componentsMixins/helpers/mixinsHelpers.js

@@ -0,0 +1,10 @@
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+export function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}

package/src/componentsMixins/index.js

@@ -0,0 +1 @@
+export * from './mixins'

package/src/componentsMixins/mixins/activableMixin.js

@@ -0,0 +1,14 @@
+export const activeableMixin = (superclass) =>
+  class ActiveableMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        this.setAttribute('active', 'true');
+        window.addEventListener('mouseup', () => this.removeAttribute('active'), {
+          once: true,
+        });
+      });
+    }
+  };

package/src/componentsMixins/mixins/changeMixin.js

@@ -0,0 +1,22 @@
+import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
+
+export const changeMixin = (superclass) =>
+  class ChangeMixinClass extends superclass {
+    #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    init() {
+      super.init?.();
+      this.prevValue = this.value;
+
+      this.addEventListener('change', (e) => {
+        e.stopPropagation();
+      });
+
+      this.addEventListener('blur', () => {
+        if (this.value !== this.prevValue) {
+          this.#dispatchChange();
+          this.prevValue = this.value;
+        }
+      });
+    }
+  };

package/src/componentsMixins/mixins/componentNameValidationMixin.js

@@ -0,0 +1,23 @@
+export const componentNameValidationMixin = (superclass) =>
+  class ComponentNameValidationMixinClass extends superclass {
+    #checkComponentName() {
+      const currentComponentName = this.localName;
+
+      if (!superclass.componentName) {
+        throw Error(
+          `component name is not defined on super class, make sure you have a static get for "componentName"`
+        );
+      }
+
+      if (currentComponentName !== superclass.componentName) {
+        throw Error(
+          `component name mismatch, expected "${superclass.componentName}", current "${currentComponentName}"`
+        );
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.#checkComponentName();
+    }
+  };

package/src/componentsMixins/mixins/componentsContextMixin.js

@@ -0,0 +1,12 @@
+export const componentsContextMixin = (superclass) =>
+  class ComponentsContextMixinClass extends superclass {
+    updateComponentsContext(componentsContext) {
+      this.dispatchEvent(
+        new CustomEvent('components-context', {
+          bubbles: true,
+          composed: true,
+          detail: componentsContext,
+        })
+      );
+    }
+  };

package/src/componentsMixins/mixins/createDynamicDataMixin.js

@@ -0,0 +1,100 @@
+import { observeAttributes } from '../helpers/componentHelpers';
+
+const defaultValidateSchema = () => true;
+const defaultItemRenderer = (item) => `<pre>${JSON.stringify(item, null, 4)}</pre>`;
+
+const createTemplate = (templateString) => {
+  const template = document.createElement('template');
+  template.innerHTML = templateString;
+
+  return template;
+};
+
+const getTemplateContent = (templateOrString) => {
+  if (typeof templateOrString === 'string') {
+    return createTemplate(templateOrString).content;
+  }
+
+  if (templateOrString instanceof HTMLTemplateElement) {
+    return templateOrString.content;
+  }
+
+  // eslint-disable-next-line no-console
+  console.error('Invalid template', templateOrString);
+  return null;
+};
+
+export const createDynamicDataMixin =
+  ({
+    itemRenderer = defaultItemRenderer,
+    validateSchema = defaultValidateSchema,
+    slotName,
+    rerenderAttrsList = [],
+  }) =>
+  (superclass) =>
+    class DynamicDataMixinClass extends superclass {
+      #data = [];
+
+      // eslint-disable-next-line class-methods-use-this
+      #validateSchema(data) {
+        if (!validateSchema) return true;
+
+        const validation = validateSchema(data);
+        if (validation === true) return true;
+
+        // eslint-disable-next-line no-console
+        console.error('Data schema validation failed', validation || '');
+
+        return false;
+      }
+
+      #removeOldItems() {
+        const selector = slotName ? `*[slot="${slotName}"]` : ':not([slot])';
+        this.baseElement.querySelectorAll(selector).forEach((item) => item.remove());
+      }
+
+      #renderItems() {
+        this.#removeOldItems();
+        this.data.forEach((item, index) => {
+          const content = getTemplateContent(itemRenderer(item, index, this));
+          this.baseElement.appendChild(content?.cloneNode(true));
+        });
+      }
+
+      set data(value) {
+        if (this.#validateSchema(value)) {
+          this.#data = value;
+          this.#renderItems();
+        }
+      }
+
+      get data() {
+        return this.#data;
+      }
+
+      init() {
+        super.init?.();
+
+        observeAttributes(
+          this,
+          (attrs) => {
+            if (attrs.includes('data')) this.#handleDataAttr();
+            else this.#renderItems();
+          },
+          { includeAttrs: [...rerenderAttrsList, 'data'] }
+        );
+      }
+
+      #handleDataAttr() {
+        const dataAttr = this.getAttribute('data');
+
+        if (!dataAttr) return;
+
+        try {
+          this.data = JSON.parse(dataAttr);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn('Invalid JSON data', dataAttr);
+        }
+      }
+    };

package/src/componentsMixins/mixins/createProxy.js

@@ -0,0 +1,58 @@
+import { createBaseClass } from '../../baseClasses';
+import { isFunction } from '../../utils';
+import { forwardProps, syncAttrs } from '../../componentsHelpers';
+import { createDispatchEvent } from '../../componentsMixins/helpers/mixinsHelpers';
+
+export const createProxy = ({
+  componentName,
+  wrappedEleName,
+  slots = [],
+  style,
+  excludeAttrsSync = [],
+  includeAttrsSync = [],
+  includeForwardProps = [],
+  delegatesFocus = true,
+}) => {
+  class ProxyClass extends createBaseClass({ componentName, baseSelector: wrappedEleName }) {
+    #dispatchBlur = createDispatchEvent.bind(this, 'blur');
+
+    #dispatchFocus = createDispatchEvent.bind(this, 'focus');
+
+    constructor() {
+      super().attachShadow({ mode: 'open', delegatesFocus }).innerHTML = `
+			<style id="create-proxy">${(isFunction(style) ? style() : style) || ''}</style>
+			<${wrappedEleName}>
+			${slots
+        .map(
+          (
+            slot // when slot is an empty string, we will create the default slot (without a name)
+          ) => `<slot ${slot ? `name="${slot}" slot="${slot}"` : ''}></slot>`
+        )
+        .join('')}
+			</${wrappedEleName}>
+		`;
+    }
+
+    init() {
+      super.init?.();
+
+      this.baseElement.addEventListener('blur', (_) => {
+        this.#dispatchBlur();
+      });
+
+      this.baseElement.addEventListener('focus', (_) => {
+        this.#dispatchFocus();
+      });
+
+      // this is needed for components that uses props, such as combo box
+      forwardProps(this.baseElement, this, includeForwardProps);
+
+      syncAttrs(this.baseElement, this, {
+        excludeAttrs: excludeAttrsSync,
+        includeAttrs: includeAttrsSync,
+      });
+    }
+  }
+
+  return ProxyClass;
+};

package/src/componentsMixins/mixins/createStyleMixin/helpers.js

@@ -0,0 +1,106 @@
+import { camelCaseJoin, isFunction, kebabCase, kebabCaseJoin } from '../../../utils';
+import { getCssVarName } from '../../../componentsHelpers';
+
+const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
+  isFunction(relativeSelectorOrSelectorFn)
+    ? relativeSelectorOrSelectorFn(baseSelector)
+    : `${baseSelector}${
+        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+          ? ` ${relativeSelectorOrSelectorFn}`
+          : relativeSelectorOrSelectorFn
+      }`;
+
+class StyleBuilder {
+  constructor() {
+    this.styleMap = new Map();
+  }
+
+  add(selector, property, value) {
+    if (!this.styleMap.has(selector)) {
+      this.styleMap.set(selector, []);
+    }
+
+    this.styleMap.set(selector, [...this.styleMap.get(selector), { property, value }]);
+  }
+
+  toString() {
+    return Array.from(this.styleMap.entries()).reduce((acc, [selector, propValArr]) => {
+      const properties = propValArr
+        .map(({ property, value }) => `${property}: ${value}`)
+        .join(';\n');
+
+      return `${acc}${selector} { \n${properties} \n}\n\n`;
+    }, '');
+  }
+}
+
+const normalizeConfig = (attr, config) => {
+  const defaultMapping = { selector: '', property: kebabCase(attr) };
+
+  if (!config || !Object.keys(config).length) return [defaultMapping];
+
+  if (Array.isArray(config)) return config.map((entry) => ({ ...defaultMapping, ...entry }));
+
+  return [{ ...defaultMapping, ...config }];
+};
+
+const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin(origVarName, suffix);
+
+export const createStyle = (componentName, baseSelector, mappings) => {
+  const style = new StyleBuilder();
+  const createFallbackVar = (fallback, origVarName) => {
+    if (!fallback) return '';
+    if (typeof fallback === 'string') return fallback;
+
+    const fallbackVarName = getFallbackVarName(origVarName, fallback?.suffix);
+    return createCssVar(fallbackVarName, createFallbackVar(fallback.fallback, fallbackVarName));
+  };
+
+  Object.keys(mappings).forEach((attr) => {
+    const attrConfig = normalizeConfig(attr, mappings[attr]);
+
+    const cssVarName = getCssVarName(componentName, attr);
+
+    attrConfig.forEach(
+      ({ selector: relativeSelectorOrSelectorFn, property, important, fallback }) => {
+        const fallbackValue = createFallbackVar(fallback, cssVarName);
+        style.add(
+          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
+          isFunction(property) ? property() : property,
+          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+        );
+      }
+    );
+  });
+
+  return style.toString();
+};
+
+const getFallbackVarsNames = (attr, origVarName, { fallback }) => {
+  if (!fallback) return {};
+
+  const fallbackVarName = getFallbackVarName(origVarName, fallback.suffix);
+  const fallbackAttrName = camelCaseJoin(attr, fallback.suffix || 'fallback');
+  return {
+    [fallbackAttrName]: fallbackVarName,
+    ...getFallbackVarsNames(fallbackAttrName, fallbackVarName, fallback),
+  };
+};
+
+export const createCssVarsList = (componentName, mappings) =>
+  Object.keys(mappings).reduce((acc, attr) => {
+    const varName = getCssVarName(componentName, attr);
+
+    return Object.assign(
+      acc,
+      { [attr]: varName },
+      getFallbackVarsNames(attr, varName, mappings[attr])
+    );
+  }, {});
+
+// on some cases we need a selector to be more specific than another
+// for this we have this fn that generate a class selector multiple times
+export const createClassSelectorSpecifier = (className, numOfRepeats) =>
+  Array(numOfRepeats).fill(`.${className}`).join('');