@descope/web-components-ui 0.0.1

package/node_modules/descope-text/src/theme.js

@@ -0,0 +1,91 @@
+import globals from 'theme-globals';
+import { getThemeRefs } from 'common/theme-helpers';
+import { TextClass } from './component/TextClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = TextClass.cssVarList;
+
+const text = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.textLineHeight]: '1.35em',
+  [vars.textAlign]: 'left',
+  [vars.textColor]: globalRefs.colors.surface.dark,
+
+  variant: {
+    h1: {
+      [vars.fontSize]: globalRefs.typography.h1.size,
+      [vars.fontWeight]: globalRefs.typography.h1.weight,
+      [vars.fontFamily]: globalRefs.typography.h1.font,
+    },
+    h2: {
+      [vars.fontSize]: globalRefs.typography.h2.size,
+      [vars.fontWeight]: globalRefs.typography.h2.weight,
+      [vars.fontFamily]: globalRefs.typography.h2.font,
+    },
+    h3: {
+      [vars.fontSize]: globalRefs.typography.h3.size,
+      [vars.fontWeight]: globalRefs.typography.h3.weight,
+      [vars.fontFamily]: globalRefs.typography.h3.font,
+    },
+    subtitle1: {
+      [vars.fontSize]: globalRefs.typography.subtitle1.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
+    },
+    subtitle2: {
+      [vars.fontSize]: globalRefs.typography.subtitle2.size,
+      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
+      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
+    },
+    body1: {
+      [vars.fontSize]: globalRefs.typography.body1.size,
+      [vars.fontWeight]: globalRefs.typography.body1.weight,
+      [vars.fontFamily]: globalRefs.typography.body1.font,
+    },
+    body2: {
+      [vars.fontSize]: globalRefs.typography.body2.size,
+      [vars.fontWeight]: globalRefs.typography.body2.weight,
+      [vars.fontFamily]: globalRefs.typography.body2.font,
+    },
+  },
+
+  mode: {
+    primary: {
+      [vars.textColor]: globalRefs.colors.surface.contrast,
+    },
+    secondary: {
+      [vars.textColor]: globalRefs.colors.surface.dark,
+    },
+    error: {
+      [vars.textColor]: globalRefs.colors.error.main,
+    },
+    success: {
+      [vars.textColor]: globalRefs.colors.success.main,
+    },
+  },
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  _italic: {
+    [vars.fontStyle]: 'italic',
+  },
+
+  _uppercase: {
+    [vars.textTransform]: 'uppercase',
+  },
+
+  _lowercase: {
+    [vars.textTransform]: 'lowercase',
+  },
+};
+
+export default text;
+export { vars };

package/node_modules/descope-text/stories/descope-text.stories.js

@@ -0,0 +1,55 @@
+import { componentName } from '../src/component/TextClass';
+import {
+  textContentControl,
+  textAlignControl,
+  modeControl,
+  fullWidthControl,
+  typographyVariantControl,
+  directionControl,
+} from 'common/sb-controls';
+
+const Template = ({
+  variant,
+  mode,
+  'text-align': textAlign,
+  'full-width': fullWidth,
+  text,
+  'hide-when-empty': hideWhenEmpty,
+  direction,
+}) => `
+    <descope-text
+      mode="${mode || ''}"
+      variant="${variant || ''}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      hide-when-empty="${hideWhenEmpty}"
+      st-host-direction="${direction ?? ''}"
+    >${text}</descope-text>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-text',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...textContentControl,
+    ...modeControl,
+    ...textAlignControl,
+    ...fullWidthControl,
+    ...typographyVariantControl,
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Lorem Ipsum',
+  variant: 'h1',
+  mode: 'primary',
+  'hide-when-empty': false,
+  fullWidth: true, // full-width is true by default for test purposes, which expect this as default and test the FALSE override only
+};

package/package.json

@@ -0,0 +1,151 @@
+{
+  "name": "@descope/web-components-ui",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/cjs/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.cjs.js",
+      "import": "./dist/index.esm.js"
+    },
+    "./package.json": {
+      "require": "./package.json"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
+    "@babel/preset-env": "^7.22.2",
+    "@jest/globals": "^29.7.0",
+    "@playwright/test": "1.38.1",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/html": "^8.4.7",
+    "@storybook/html-webpack5": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^20.8.0",
+    "eslint": "^8.48.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^9.0.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^15.0.0",
+    "patch-package": "^8.0.0",
+    "prettier": "^3.0.2",
+    "rollup": "^3.21.4",
+    "rollup-plugin-img": "^1.1.0",
+    "rollup-plugin-import-css": "^3.2.1",
+    "svg-url-loader": "^8.0.0",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^6.0.0",
+    "webpack-dev-server": "^5.0.0",
+    "@rollup/plugin-virtual": "3.0.2",
+    "rollup-replace-plugin": "0.0.1",
+    "webpack-replace-plugin": "0.0.1"
+  },
+  "bundledDependencies": [
+    "descope-text",
+    "descope-avatar",
+    "common"
+  ],
+  "dependencies": {
+    "@vaadin/button": "24.3.4",
+    "@vaadin/checkbox": "24.3.4",
+    "@vaadin/combo-box": "24.3.4",
+    "@vaadin/custom-field": "24.3.4",
+    "@vaadin/dialog": "24.3.4",
+    "@vaadin/email-field": "24.3.4",
+    "@vaadin/grid": "24.3.4",
+    "@vaadin/icon": "24.3.4",
+    "@vaadin/icons": "24.3.4",
+    "@vaadin/multi-select-combo-box": "24.3.4",
+    "@vaadin/notification": "24.3.4",
+    "@vaadin/number-field": "24.3.4",
+    "@vaadin/password-field": "24.3.4",
+    "@vaadin/popover": "24.5.3",
+    "@vaadin/radio-group": "24.3.4",
+    "@vaadin/text-area": "24.3.4",
+    "@vaadin/text-field": "24.3.4",
+    "color": "^4.2.3",
+    "dompurify": "^3.1.6",
+    "element-internals-polyfill": "^1.3.9",
+    "highlight.js": "^11.9.0",
+    "libphonenumber-js": "^1.11.12",
+    "lodash.debounce": "4.0.8",
+    "lodash.merge": "4.6.2",
+    "markdown-it": "14.1.0",
+    "descope-avatar": "0.0.1",
+    "descope-text": "0.0.1",
+    "common": "0.0.1"
+  },
+  "overrides": {
+    "@vaadin/avatar": "24.3.4",
+    "@vaadin/button": "24.3.4",
+    "@vaadin/checkbox": "24.3.4",
+    "@vaadin/combo-box": "24.3.4",
+    "@vaadin/custom-field": "24.3.4",
+    "@vaadin/dialog": "24.3.4",
+    "@vaadin/email-field": "24.3.4",
+    "@vaadin/grid": "24.3.4",
+    "@vaadin/icon": "24.3.4",
+    "@vaadin/icons": "24.3.4",
+    "@vaadin/multi-select-combo-box": "24.3.4",
+    "@vaadin/notification": "24.3.4",
+    "@vaadin/number-field": "24.3.4",
+    "@vaadin/component-base": "24.3.4",
+    "@vaadin/password-field": "24.3.4",
+    "@vaadin/text-area": "24.3.4",
+    "@vaadin/text-field": "24.3.4",
+    "@vaadin/overlay": "24.3.4",
+    "@vaadin/vaadin-lumo-styles": "24.3.4",
+    "@vaadin/vaadin-material-styles": "24.3.4",
+    "@vaadin/vaadin-themable-mixin": "24.3.4",
+    "@vaadin/a11y-base": "24.3.4",
+    "@vaadin/tooltip": "24.3.4"
+  },
+  "vaadin": {
+    "disableUsageStatistics": true
+  },
+  "scripts": {
+    "e2e": "npm run e2e:container -- \"$(node ./scripts/printAffectedComponents)\"",
+    "e2e:local": "playwright test",
+    "e2e:local:ui": "playwright test --ui",
+    "e2e:local:ui:debug": "PWDEBUG=1 npm run e2e:local:ui",
+    "pree2e:container": "docker build -t descope-wcui-playwright-image .",
+    "e2e:container": "MONOREPO_ROOT=$(git rev-parse --show-toplevel) && PROJECT_DIR=$(pwd) && PROJECT_RELATIVE_PATH=${PROJECT_DIR#$MONOREPO_ROOT/} && docker run --rm --network host -v $MONOREPO_ROOT:/work/ -w /work/$PROJECT_RELATIVE_PATH descope-wcui-playwright-image",
+    "e2e:container:updateSnapshots": "npm run e2e:container -- --update-snapshots",
+    "container:build": "docker build -t descope-wcui-playwright-image .",
+    "container:debug": "MONOREPO_ROOT=$(git rev-parse --show-toplevel) && PROJECT_DIR=$(pwd) && PROJECT_RELATIVE_PATH=${PROJECT_DIR#$MONOREPO_ROOT/} && docker run --rm --network host -v $MONOREPO_ROOT:/work/ -w /work/$PROJECT_RELATIVE_PATH -it mcr.microsoft.com/playwright:v1.38.0-jammy /bin/bash",
+    "print-components": "nx show projects --projects 'packages/web-components/components/*'",
+    "print-components:affected": "nx show projects --projects 'packages/web-components/components/*' --affected",
+    "print-components:affected:ci": "nx show projects --projects 'packages/web-components/components/*' --affected --base=$(sh $(git rev-parse --show-toplevel)/tools/scripts/latestTag.sh)",
+    "test": "jest",
+    "lint": "eslint --fix --max-warnings 0",
+    "lint:all": "npm run lint .",
+    "build:umd": "webpack -c webpack.prod.js",
+    "build:lib": "rollup -c",
+    "build": "npm run build:umd && npm run build:lib && cp src/index.d.ts dist",
+    "start": "webpack serve -c webpack.dev.js --port=8888",
+    "format": "prettier --ignore-path .gitignore --write .",
+    "format:all": "npm run format .",
+    "storybook": "storybook dev -p 6006 --quiet",
+    "build-storybook": "storybook build",
+    "lint-staged": "lint-staged"
+  }
+}

package/src/baseClasses/createBaseClass.js

@@ -0,0 +1,66 @@
+import { compose } from '../helpers';
+import { componentNameValidationMixin } from '../mixins/componentNameValidationMixin';
+import { componentsContextMixin } from '../mixins/componentsContextMixin';
+import { hoverableMixin } from '../mixins/hoverableMixin';
+import { normalizeBooleanAttributesMixin } from '../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/createBaseInputClass.js

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

package/src/baseClasses/createCssVarImageClass.js

@@ -0,0 +1,53 @@
+import { compose } from '../helpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../mixins';
+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/components/boolean-fields/booleanFieldMixin.js

@@ -0,0 +1,36 @@
+import { forwardAttrs, forwardProps, syncAttrs } from '../../helpers/componentHelpers';
+import { componentName as descopeInternalComponentName } from './descope-boolean-field-internal/BooleanFieldInternal';
+
+export const booleanFieldMixin = (superclass) =>
+  class BooleanFieldMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+      template.innerHTML = `
+				<${descopeInternalComponentName}
+					tabindex="-1"
+					slot="input"
+				></${descopeInternalComponentName}>
+			`;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'required',
+          'full-width',
+          'size',
+          'label',
+          'invalid',
+          'disabled',
+          'readonly',
+        ],
+      });
+
+      forwardProps(this.inputElement, this, ['checked']);
+      syncAttrs(this, this.inputElement, { includeAttrs: ['checked'] });
+    }
+  };

package/src/components/boolean-fields/commonStyles.js

@@ -0,0 +1,50 @@
+import { resetInputFieldDefaultWidth } from '../../helpers/themeHelpers/resetHelpers';
+
+export default `
+:host {
+	display: inline-flex;
+}
+
+${resetInputFieldDefaultWidth()}
+
+.wrapper {
+	display: flex;
+	box-sizing: border-box;
+}
+vaadin-text-field {
+	position: relative;
+	padding: 0;
+	display: inline-flex;
+	align-items: flex-start;
+}
+vaadin-text-field::before {
+  content: unset;
+}
+vaadin-text-field::part(label) {
+  position: absolute;
+  top: 0;
+}
+vaadin-text-field::part(input-field) {
+	padding: 0;
+	background: none;
+	min-height: 0;
+}
+vaadin-text-field::part(input-field)::after {
+  background: none;
+}
+vaadin-text-field[focus-ring]::part(input-field) {
+	box-shadow: none;
+}
+
+vaadin-checkbox [slot="label"] {
+  align-self: flex-start;
+  padding: 0;
+}
+[required] vaadin-checkbox [slot="label"]:not(:empty) {
+	padding-inline-end: 1em;
+}
+descope-boolean-field-internal {
+  -webkit-mask-image: none;
+  min-height: initial;
+}
+`;

package/src/components/boolean-fields/descope-boolean-field-internal/BooleanFieldInternal.js

@@ -0,0 +1,77 @@
+import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('boolean-field-internal');
+
+const forwardAttributes = ['disabled', 'label', 'invalid', 'readonly'];
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
+
+class BooleanInputInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
+  constructor() {
+    super();
+    this.innerHTML = `
+			<div class="wrapper">
+				<vaadin-checkbox></vaadin-checkbox>
+			</div>
+		`;
+    this.wrapperEle = this.querySelector('div');
+    this.checkbox = this.querySelector('vaadin-checkbox');
+  }
+
+  get value() {
+    return this.checkbox?.checked;
+  }
+
+  set value(val) {
+    this.checkbox.checked = val;
+  }
+
+  get checked() {
+    return this.value;
+  }
+
+  set checked(val) {
+    this.value = val;
+  }
+
+  init() {
+    this.addEventListener('focus', (e) => {
+      if (e.isTrusted) {
+        this.checkbox.focus();
+      }
+    });
+    super.init?.();
+
+    forwardAttrs(this, this.checkbox, { includeAttrs: forwardAttributes });
+    syncAttrs(this, this.checkbox, { includeAttrs: ['checked'] });
+
+    // we need it in order to set the focus ring and trigger validation on descope-checkbox
+    this.handleFocusEventsDispatching([this.checkbox]);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (attrName === 'readonly') {
+      this.onReadOnlyChange(newValue !== null);
+    }
+  }
+
+  onReadOnlyChange(val) {
+    this.baseElement.setAttribute('inert', val);
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+    return {};
+  }
+}
+
+export default BooleanInputInternal;

package/src/components/boolean-fields/descope-boolean-field-internal/index.js

@@ -0,0 +1,3 @@
+import BooleanFieldInternal, { componentName } from './BooleanFieldInternal';
+
+customElements.define(componentName, BooleanFieldInternal);