@descope/web-components-ui 0.0.1

package/node_modules/common/src/componentsMixins/mixins/proxyInputMixin.js

@@ -0,0 +1,242 @@
+/* eslint-disable no-param-reassign */
+import { compose } from '../../utils';
+import { forwardAttrs, getComponentName } from '../../componentsHelpers';
+import { createDispatchEvent } from '../helpers/mixinsHelpers';
+import { inputValidationMixin } from '../mixins/inputValidationMixin';
+import { createStyleMixin } from '../mixins/createStyleMixin';
+
+const errorAttrs = ['invalid', 'required'];
+
+const forwardProps = (src, targets, property) => {
+  const targetArr = Array.isArray(targets) ? targets : [targets];
+
+  Object.defineProperty(src, property, {
+    set(v) {
+      targetArr.forEach((target) => {
+        target[property] = v;
+      });
+    },
+    get() {
+      return targets[0][property];
+    },
+    configurable: true,
+  });
+};
+
+// recursively take the first slot child until it finds an element which is not a slot
+// stops after "nestingLevel" times
+const getNestedInput = (ele) => {
+  if (!ele) return undefined;
+
+  const nestingLevel = 10;
+
+  let nonSlotEle = ele;
+  for (let i = 0; i < nestingLevel; i++) {
+    [nonSlotEle] = nonSlotEle.assignedElements();
+    if (nonSlotEle?.localName !== 'slot') return nonSlotEle;
+  }
+  return undefined;
+};
+
+const proxyInputMixin =
+  ({
+    proxyProps = [],
+    // useProxyTargets flag allows to forwardProps to other targets, other than
+    // `this.inputElement`. It's to be used within `external-input` components,
+    // if needed
+    useProxyTargets = false,
+    // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
+    inputEvent = 'input',
+    triggerValidationEvents = [],
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
+  }) =>
+  (superclass) =>
+    class ProxyInputMixinClass extends inputValidationMixin(superclass) {
+      static get observedAttributes() {
+        return [...(superclass.observedAttributes || []), ...errorAttrs];
+      }
+
+      #inputElement;
+
+      #dispatchChange = createDispatchEvent.bind(this, 'change');
+
+      constructor() {
+        super();
+
+        this.#inputElement = super.inputElement;
+      }
+
+      // the web-component does not loaded immediately, so we want to defer the warning
+      // and show it only if the input element was not found after the component is loaded
+      warnIfInputElementIsMissing() {
+        clearTimeout(this.inputElementTimerId);
+
+        this.inputElementTimerId = setTimeout(() => {
+          // eslint-disable-next-line no-console
+          !this.#inputElement && console.warn(this.localName, 'no input was found');
+        }, 0);
+      }
+
+      get inputElement() {
+        if (this.#inputElement) return this.#inputElement;
+
+        this.warnIfInputElementIsMissing();
+
+        const inputSlot = this.baseElement.shadowRoot?.querySelector('slot[name="input"]');
+        const textAreaSlot = this.baseElement.shadowRoot?.querySelector('slot[name="textarea"]');
+
+        this.#inputElement = getNestedInput(inputSlot) || getNestedInput(textAreaSlot);
+
+        return this.#inputElement;
+      }
+
+      set inputElement(ele) {
+        this.#inputElement = ele;
+      }
+
+      getValidity() {
+        return this.inputElement?.validity || {};
+      }
+
+      #handleErrorMessage() {
+        this.setAttribute('error-message', this.validationMessage);
+      }
+
+      // We do not want to show the default validity report tooltip
+      // So we are overriding the reportValidity fn to show the input's error message
+      reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
+        if (!this.checkValidity()) {
+          this.setAttribute('invalid', 'true');
+          this.#handleErrorMessage();
+          this.focus();
+        }
+      };
+
+      // we are keeping also the default reportValidity because there are some components that still using it
+      defaultReportValidity() {
+        return super.reportValidity();
+      }
+
+      init() {
+        super.init?.();
+
+        // vaadin sets invalid indication on blur
+        // we want invalid indication to appear only when calling reportValidity
+        // this is why we are overriding vaadin's setInvalid behavior
+        // to update only when the element is valid (so invalid indication will only be removed)
+        // and we are adding it in reportValidity
+        // eslint-disable-next-line func-names
+        this.baseElement._setInvalid = function (invalid) {
+          if (!invalid && this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        };
+
+        // We want to ensure that `input` events properly cross ShadowDOM boundries
+        // e.g. When we autofill a component's input with 1Password, for instance,
+        // the event is fired without `composed: true` and doesn't our component's
+        // ShadowDOM.
+        this.baseElement.addEventListener('input', (e) => {
+          if (!e.composed) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        });
+
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+
+        // on some cases the base element is not ready so the inputElement is empty
+        // we are deferring this section to make sure the base element is ready
+        setTimeout(() => {
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
+          });
+
+          this.baseElement.addEventListener('change', () => {
+            this.#dispatchChange();
+          });
+
+          this.addEventListener('invalid', () => {
+            if (!this.checkValidity()) {
+              this.setAttribute('invalid', 'true');
+            }
+            this.#handleErrorMessage();
+          });
+
+          // sync properties
+          proxyProps.forEach((prop) => {
+            const externalInput = this.querySelector('input[slot="external-input"]') || null;
+            const proxyTargets = useProxyTargets
+              ? [this.baseElement, externalInput].filter(Boolean)
+              : [];
+            forwardProps(this, [this.inputElement, ...proxyTargets], prop);
+          });
+
+          this.setSelectionRange = this.inputElement.setSelectionRange?.bind(this.inputElement);
+
+          forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
+        });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
+      }
+    };
+
+const composedProxyInputMixin = (proxyInputMixinConfig) =>
+  compose(
+    proxyInputMixin(proxyInputMixinConfig),
+    // in order to use input-wrapper across all our input components, we need to inject its theme
+    // to every proxy input mixin, to allow its css vars to be scoped properly and accessible
+    // in the proxy input component
+    createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') })
+  );
+
+export { composedProxyInputMixin as proxyInputMixin };

package/node_modules/common/src/constants.js

@@ -0,0 +1,4 @@
+export const DESCOPE_PREFIX = 'descope';
+export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
+export const BASE_THEME_SECTION = 'host';
+export const PORTAL_THEME_PREFIX = '@';

package/node_modules/common/src/icons/errorMessageIconBase64.js

@@ -0,0 +1 @@
+export default `data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZTIxZDEyIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzMC4zMzQgMzAuMzM0Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0xNS4xNjcsMEM2LjgwNSwwLDAuMDAxLDYuODA0LDAuMDAxLDE1LjE2N2MwLDguMzYyLDYuODA0LDE1LjE2NywxNS4xNjYsMTUuMTY3YzguMzYxLDAsMTUuMTY2LTYuODA1LDE1LjE2Ni0xNS4xNjcNCgkJQzMwLjMzMyw2LjgwNCwyMy41MjgsMCwxNS4xNjcsMHogTTE3LjE2NywyNS42NjdoLTR2LTQuNWg0VjI1LjY2N3ogTTE3LjE2NywxOS41NDJoLTRWNS4xNjdoNFYxOS41NDJ6Ii8+DQo8L2c+DQo8L3N2Zz4=`;

package/node_modules/common/src/sbControls.js

@@ -0,0 +1,302 @@
+import errorMessageIconBase64 from './icons/errorMessageIconBase64';
+
+export const labelControl = {
+  label: {
+    name: 'Label',
+    control: { type: 'text' },
+  },
+};
+
+export const helperTextControl = {
+  'helper-text': {
+    name: 'Helper Text',
+    control: { type: 'text' },
+  },
+};
+
+export const placeholderControl = {
+  placeholder: {
+    name: 'Placeholder',
+    control: { type: 'text' },
+  },
+};
+
+export const sizeControl = {
+  size: {
+    name: 'Size',
+    options: ['xs', 'sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+};
+
+export const loadingControl = {
+  loading: {
+    name: 'Loading',
+    control: { type: 'boolean' },
+  },
+};
+
+export const fullWidthControl = {
+  'full-width': {
+    name: 'Full Width',
+    control: { type: 'boolean' },
+  },
+};
+
+export const disabledControl = {
+  disabled: {
+    name: 'Disabled',
+    control: { type: 'boolean' },
+  },
+};
+
+export const readOnlyControl = {
+  readonly: {
+    name: 'Read Only',
+    control: { type: 'boolean' },
+  },
+};
+
+export const requiredControl = {
+  required: {
+    name: 'Required',
+    control: { type: 'boolean' },
+  },
+};
+
+export const directionControl = {
+  direction: {
+    name: 'Direction',
+    options: ['ltr', 'rtl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderedControl = {
+  bordered: {
+    name: 'Bordered',
+    control: { type: 'boolean' },
+  },
+};
+
+export const minLengthControl = {
+  minlength: {
+    name: 'Min. Length',
+    control: { type: 'text' },
+  },
+};
+
+export const maxLengthControl = {
+  maxlength: {
+    name: 'Max. Length',
+    control: { type: 'text' },
+  },
+};
+
+export const textContentControl = {
+  text: {
+    name: 'Content',
+    control: { type: 'text' },
+  },
+};
+
+export const modeControl = {
+  mode: {
+    name: 'Mode',
+    options: ['none', 'primary', 'secondary', 'success', 'error'],
+    control: { type: 'select' },
+  },
+};
+
+export const textAlignControl = {
+  'text-align': {
+    name: 'Text Align',
+    options: ['left', 'center', 'right'],
+    control: { type: 'select' },
+  },
+};
+
+export const errorMissingValueControl = {
+  'data-errormessage-value-missing': {
+    name: 'Custom Error: Mandatory',
+    control: { type: 'text' },
+  },
+};
+
+export const errorPatternMismatchControl = {
+  'data-errormessage-pattern-mismatch': {
+    name: 'Custom Error: Pattern Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorTypeMismatchControl = {
+  'data-errormessage-type-mismatch': {
+    name: 'Custom Error: Type Mismatch',
+    control: { type: 'text' },
+  },
+};
+
+export const errorBadInputControl = {
+  'data-errormessage-bad-input': {
+    name: 'Custom Error: Bad Input',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeUnderflowControl = {
+  'data-errormessage-range-underflow': {
+    name: 'Custom Error: Below minimum value',
+    control: { type: 'text' },
+  },
+};
+
+export const errorRangeOverflowControl = {
+  'data-errormessage-range-overflow': {
+    name: 'Custom Error: Exceeds maximum value',
+    control: { type: 'text' },
+  },
+};
+
+export const fillControl = {
+  'st-fill': {
+    name: 'Fill',
+    control: { type: 'color' },
+  },
+};
+
+export const customHeightControl = {
+  'st-host-height': {
+    name: 'Custom Height',
+    control: { type: 'text' },
+  },
+};
+
+export const customWidthControl = {
+  'st-host-width': {
+    name: 'Custom Width',
+    control: { type: 'text' },
+  },
+};
+
+export const checkboxValueControl = {
+  checked: {
+    name: 'Checked',
+    control: { type: 'boolean' },
+  },
+};
+
+export const buttonVariantControl = {
+  variant: {
+    name: 'Button Variant',
+    options: ['contained', 'outline', 'link'],
+    control: { type: 'select' },
+  },
+};
+
+export const boxShadowControl = {
+  shadow: {
+    name: 'Shadow',
+    options: ['sm', 'md', 'lg', 'xl', '2xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const borderRadiusControl = {
+  'border-radius': {
+    name: 'Radius',
+    options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'],
+    control: { type: 'select' },
+  },
+};
+
+export const imgSrcControl = {
+  src: {
+    name: 'Image Source',
+    control: { type: 'text' },
+  },
+};
+
+export const typographyVariantControl = {
+  variant: {
+    name: 'Variant',
+    options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+    control: { type: 'select' },
+  },
+};
+
+export const overrideRenderItemControl = {
+  overrideRenderItem: {
+    name: 'Override the default item renderer function',
+    control: { type: 'boolean' },
+  },
+};
+
+export const itemsSourceControl = {
+  itemsSource: {
+    name: 'Where to take the items from',
+    control: {
+      type: 'select',
+      options: {
+        Children: 'children',
+        '"data" attribute': 'attr',
+        '"data" property': 'prop',
+      },
+    },
+  },
+};
+
+export const minItemsSelectionControl = {
+  minItemsSelection: {
+    name: 'Min Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const maxItemsSelectionControl = {
+  maxItemsSelection: {
+    name: 'Max Items Selection',
+    control: { type: 'number' },
+  },
+};
+
+export const labelSpacingControl = {
+  'label-spacing': {
+    name: 'Label Spacing',
+    control: { type: 'range', min: 0, max: 200, step: 1 },
+  },
+};
+
+export const inputLabelTypeControl = {
+  'label-type': {
+    name: 'Label Type',
+    control: {
+      type: 'select',
+      options: ['static', 'floating'],
+    },
+  },
+};
+
+export const inputCopyToClipboardControl = {
+  'copy-to-clipboard': {
+    name: 'Copy to clipboard',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconControl = {
+  errorMsgIcon: {
+    name: 'Error Message Icon',
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const errorMessageIconAttrs = `
+    st-error-message-icon="url(${errorMessageIconBase64})"
+    st-error-message-icon-size="14px"
+    st-error-message-icon-padding="1.5em"
+  `;

package/node_modules/common/src/themeHelpers/colorsHelpers.js

@@ -0,0 +1,94 @@
+import Color from 'color';
+
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
+  const isDark = c.isDark();
+  return c
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
+    .saturate(1)
+    .hex();
+};
+
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+export const genColor = (color, theme) => {
+  const mainColor = new Color(color.main || color);
+
+  const res = {
+    main: mainColor.hex(),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
+  };
+
+  return res;
+};
+
+export const genColors = (colors) => {
+  return Object.keys(colors).reduce((acc, colorName) => {
+    const currentColor = colors[colorName];
+
+    return Object.assign(acc, {
+      [colorName]: genColor(currentColor),
+    });
+  }, {});
+};

package/node_modules/common/src/themeHelpers/componentsThemeManager.js

@@ -0,0 +1,45 @@
+class ComponentsThemeManager {
+  static mountOnPropName = 'DescopeThemeManager';
+
+  #themes = {};
+
+  #currentThemeName = 'light';
+
+  #callbacks = new Set();
+
+  #notify() {
+    this.#callbacks.forEach((cb) => cb?.());
+  }
+
+  get currentThemeName() {
+    return this.#currentThemeName;
+  }
+
+  set currentThemeName(themeName) {
+    this.#currentThemeName = themeName;
+    this.#notify();
+  }
+
+  get currentTheme() {
+    return this.#themes[this.currentThemeName];
+  }
+
+  onCurrentThemeChange(cb) {
+    this.#callbacks.add(cb);
+
+    return () => {
+      this.#callbacks.delete(cb);
+    };
+  }
+
+  set themes(themes) {
+    this.#themes = themes;
+    this.#notify();
+  }
+
+  get hasThemes() {
+    return !!Object.keys(this.#themes).length;
+  }
+}
+
+export const componentsThemeManager = new ComponentsThemeManager();