@descope/web-components-ui 1.0.35

package/src/componentsHelpers/createStyleMixin/helpers.js

@@ -0,0 +1,66 @@
+import { getCssVarName, kebabCase } from "../../helpers"
+
+const createCssVarFallback = (first, ...rest) => `var(${first}${rest.length ? ` , ${createCssVarFallback(...rest)}` : ''})`;
+
+const createCssSelector = (wrappedComponentName = '', relativeSelectorOrSelectorFn = '') => 
+  typeof relativeSelectorOrSelectorFn === 'function' ? 
+    relativeSelectorOrSelectorFn(wrappedComponentName) : 
+    `${wrappedComponentName}${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((style, [selector, propValArr]) =>
+      style += `${selector} { \n${propValArr.map(({ property, value }) => `${property}: ${value}`).join(';\n')} \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 => Object.assign({}, defaultMapping, entry));
+
+  return [Object.assign({}, defaultMapping, config)];
+}
+
+export const createStyle = (componentName, wrappedComponentName, mappings) => {
+  const style = new StyleBuilder();
+
+  Object.keys(mappings).forEach((attr) => {
+    const attrConfig = normalizeConfig(attr, mappings[attr])
+
+    const cssVarName = getCssVarName(componentName, attr)
+
+    attrConfig.forEach(({ selector: relativeSelectorOrSelectorFn, property }) => {
+      style.add(
+        createCssSelector(wrappedComponentName, relativeSelectorOrSelectorFn),
+        property,
+        createCssVarFallback(cssVarName)
+      )
+    })
+  })
+
+  return style.toString();
+}
+
+export const createCssVarsList = (componentName, mappings) =>
+  Object.keys(mappings).reduce(
+    (acc, attr) => Object.assign(acc, { [attr]: getCssVarName(componentName, attr) }),
+    {}
+  )
+
+export const matchHostStyle = (mappingObj) => [mappingObj, {...mappingObj, selector: () => `:host${mappingObj.selector || ''}`}];

package/src/componentsHelpers/createStyleMixin/index.js

@@ -0,0 +1,22 @@
+import { createStyle, createCssVarsList } from './helpers';
+
+export const createStyleMixin = ({  mappings = {} }) => (superclass) => {
+  return class CustomStyleMixinClass extends superclass {
+    static get cssVarList() {
+      return createCssVarsList(superclass.componentName, mappings)
+    }
+  
+    constructor() {
+      super();
+
+      this.#createComponentStyle()
+    }
+
+    #createComponentStyle() {
+      const themeStyle = document.createElement('style');
+      themeStyle.id = 'style-mixin'
+      themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings)
+      this.shadowRoot.prepend(themeStyle);
+    }
+  }
+}

package/src/componentsHelpers/draggableMixin.js

@@ -0,0 +1,32 @@
+export const draggableMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+
+    #styleEle = null;
+
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || []
+      return [...superAttrs, 'draggable']
+    }
+
+    constructor() {
+      super();
+
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
+    }
+
+    #handleDraggableStyle(isDraggable) {
+      if (isDraggable) {
+        this.shadowRoot.appendChild(this.#styleEle)
+      } else {
+        this.#styleEle.remove();
+      }
+    }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback(attrName, oldValue, newValue);
+      if (attrName === 'draggable') {
+        this.#handleDraggableStyle(newValue === 'true')
+      }
+    }
+  }

package/src/componentsHelpers/index.js

@@ -0,0 +1,11 @@
+import { DESCOPE_PREFIX } from "../constants";
+import { kebabCaseJoin } from "../helpers";
+
+export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name)
+
+export const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);
+
+export { createStyleMixin } from './createStyleMixin'
+export { draggableMixin } from './draggableMixin'
+export { createProxy } from './createProxy'
+export { inputMixin } from './inputMixin'

package/src/componentsHelpers/inputMixin.js

@@ -0,0 +1,46 @@
+export const inputMixin = (superclass) =>
+  class InputMixinClass extends superclass {
+		static get formAssociated() {
+			return true;
+		}
+    
+    #internals
+
+    constructor() {
+      super();
+
+      this.#internals = this.attachInternals();
+
+      // this is needed in order to make sure the form input validation is working
+      if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', 0);
+      }
+    }
+
+    formAssociatedCallback() {
+      this.setValidity?.();
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+
+      // vaadin does not expose all those validation attributes so we need to take it from the input
+      // https://github.com/vaadin/web-components/issues/1177
+      const input = this.proxyElement.querySelector('input')
+      if (!input) throw Error('no input was found')
+
+      this.checkValidity = () => input.checkValidity()
+      this.reportValidity = () => input.reportValidity()
+      this.validity = input.validity
+
+      this.setValidity = () => {
+        this.#internals.setValidity(input.validity, input.validationMessage);
+      }
+
+      input.oninput = () => {
+        this.value = input.value
+        this.setValidity()
+      }
+
+    }
+  }

package/src/constants.js

@@ -0,0 +1 @@
+export const DESCOPE_PREFIX = 'descope'

package/src/dev/index.js

@@ -0,0 +1,6 @@
+import theme from '../theme'
+import { themeToStyle } from "../themeHelpers";
+
+// this file is used for exposing stuff to the dev env only
+
+export const getDefaultThemeStyles = (themeName) => themeToStyle(theme, themeName)

package/src/helpers.js

@@ -0,0 +1,8 @@
+export const kebabCase = str => str
+.replace(/([a-z])([A-Z])/g, "$1-$2")
+.replace(/[\s_.]+/g, '-')
+.toLowerCase();
+
+export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
+
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`

package/src/index.cjs.js

@@ -0,0 +1,3 @@
+// CJS is used by screen-renderer-service, we cannot load vaadin there,
+// so we are exporting only the css generation stuff
+export * from './themeHelpers'

package/src/index.js

@@ -0,0 +1,8 @@
+import "./components/descope-button";
+import "./components/descope-combo";
+import "./components/descope-text-field";
+import "./components/descope-date-picker";
+
+export { globalsThemeToStyle, componentsThemeToStyle, themeToStyle } from './themeHelpers'
+export { genColor } from './themeHelpers/processColors'
+export { default as defaultTheme } from './theme'

package/src/index.umd.js

@@ -0,0 +1,7 @@
+const components = import.meta.webpackContext('./components', { recursive: true, regExp: /.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
+module.exports = components.keys().reduce((acc, key) => {
+  const componentName = key.replace(/.*?([^\/]+)\.js$/, '$1')
+  acc[componentName] = () => components(key)
+
+  return acc;
+}, {})

package/src/theme/components/button.js

@@ -0,0 +1,86 @@
+import globals from "../globals";
+import { getThemeRefs } from "../../themeHelpers";
+
+const globalRefs = getThemeRefs(globals);
+
+const mode = {
+	primary: {
+		main: globalRefs.colors.primary.main,
+		dark: 'darkblue',
+		light: 'lightblue',
+		contrast: 'white'
+	},
+	secondary: globalRefs.colors.secondary,
+	success: globalRefs.colors.success,
+	error: globalRefs.colors.error,
+	surface: globalRefs.colors.surface,
+}
+
+const colorRef = getThemeRefs(mode.primary, 'button')
+
+const button = {
+	borderRadius: globalRefs.radius.lg,
+	cursor: 'pointer',
+	
+	size: {
+		xs: {
+			height: '10px',
+			fontSize: '10px',
+			padding: `0 ${globalRefs.spacing.xs}`
+		},
+		sm: {
+			height: '20px',
+			fontSize: '10px',
+			padding: `0 ${globalRefs.spacing.sm}`
+		},
+		md: {
+			height: '30px',
+			fontSize: '14px',
+			padding: `0 ${globalRefs.spacing.md}`
+		},
+		lg: {
+			height: '40px',
+			fontSize: '20px',
+			padding: `0 ${globalRefs.spacing.lg}`
+		},
+		xl: {
+			height: '50px',
+			fontSize: '25px',
+			padding: `0 ${globalRefs.spacing.xl}`
+		},
+	},
+
+	_fullwidth: {
+		width: '100%'
+	},
+
+	mode,
+
+	variant: {
+		contained: {
+			color: colorRef.contrast,
+			backgroundColor: colorRef.main,
+			_hover: {
+				backgroundColor: colorRef.dark,
+			},
+		},
+		outline: {
+			color: colorRef.main,
+			borderColor: colorRef.main,
+			borderWidth: '2px',
+			borderStyle: 'solid',
+			_hover: {
+				color: colorRef.dark,
+				borderColor: colorRef.dark,
+				_error: {
+					color: 'red',
+				}
+			}
+		},
+		link: {
+			color: colorRef.main,
+		},
+	}
+};
+
+export default button;

package/src/theme/components/index.js

@@ -0,0 +1,7 @@
+import button  from './button';
+import textField  from './textField';
+
+export default {
+    button,
+    textField
+}

package/src/theme/components/textField.js

@@ -0,0 +1,50 @@
+import globals from "../globals";
+import { getThemeRefs } from "../../themeHelpers";
+
+const globalRefs = getThemeRefs(globals);
+
+const textField = {
+  borderRadius: globalRefs.radius.lg,
+  color: globalRefs.colors.surface.contrast,
+  backgroundColor: globalRefs.colors.surface.light,
+  borderWidth: globalRefs.border.small,
+  borderStyle: 'solid',
+  borderColor: globalRefs.colors.surface.dark,
+  labelColor: globalRefs.colors.surface.contrast,
+  placeholderColor: globalRefs.colors.surface.dark,
+  _invalid: {
+    backgroundColor: globalRefs.colors.error.light,
+    borderColor: globalRefs.colors.error.dark,
+  },
+
+  size: {
+    sm: {
+      height: '20px',
+      fontSize: '10px',
+      padding: `0 ${globalRefs.spacing.xs}`
+    },
+    md: {
+      height: '30px',
+      fontSize: '14px',
+      padding: `0 ${globalRefs.spacing.sm}`
+    },
+    lg: {
+      height: '40px',
+      fontSize: '20px',
+      padding: `0 ${globalRefs.spacing.sm}`
+    },
+    xl: {
+      height: '50px',
+      fontSize: '25px',
+      padding: `0 ${globalRefs.spacing.md}`
+    },
+  },
+
+  _fullwidth: {
+    width: '100%'
+  },
+};
+
+export default textField
+
+

package/src/theme/globals.js

@@ -0,0 +1,66 @@
+import { genColors } from "../themeHelpers/processColors";
+
+export const colors = genColors({
+	surface: {
+		main: 'lightgray',
+		light: '#e1e1e1'
+	},
+	primary: "#0082B5",
+	secondary: "#7D14EB",
+	success: "green",
+	error: "red",
+});
+
+const typography = {
+	h1: {
+		font: ["Courier New", "Arial", "sans-serif"],
+		weight: "700",
+		size: "48px",
+	},
+	h2: {
+		font: ["Courier New", "sans-serif"],
+		weight: "500",
+		size: "38px",
+	},
+	h3: {
+		font: ["Courier New", "sans-serif"],
+		weight: "300",
+		size: "28px",
+	},
+};
+
+const spacing = {
+	xs: '2px',
+	sm: '4px',
+	md: '8px',
+	lg: '16px',
+	xl: '32px',
+};
+
+const border = {
+	sm: "1px",
+	md: "2px",
+	lg: "3px",
+};
+
+const radius = {
+	sm: "5px",
+	md: "25px",
+	lg: "50px",
+};
+
+const shadow = {
+	color: colors.primary.main,
+	size: {
+		sm: `0 0 10px`,
+	},
+};
+
+export default {
+	colors,
+	typography,
+	spacing,
+	border,
+	radius,
+	shadow,
+};

package/src/theme/index.js

@@ -0,0 +1,4 @@
+import globals from "./globals"
+import components from './components';
+
+export default { globals, components }

package/src/themeHelpers/index.js

@@ -0,0 +1,76 @@
+import merge from "lodash.merge";
+import set from "lodash.set";
+import { DESCOPE_PREFIX } from "../constants";
+import { getCssVarName } from "../helpers";
+import { getComponentName } from "../componentsHelpers";
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
+
+const transformTheme = (theme, path, getTransformation) => {
+	return Object.entries(theme).reduce((acc, [key, val]) => {
+		if (val?.constructor !== Object) {
+			return merge(acc, getTransformation(path.concat(key), val));
+		} else {
+			return merge(acc, transformTheme(val, [...path, key], getTransformation));
+		}
+	}, {});
+};
+
+const stringifyArray = (strArr) => strArr.map((str) => (str.includes(" ") ? `"${str}"` : str)).join(", ")
+
+export const themeToCSSVarsObj = (theme) =>
+	transformTheme(theme, [], (path, val) => ({
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+	}));
+
+export const getThemeRefs = (theme, prefix) =>
+	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+
+export const globalsThemeToStyle = (theme, themeName = '') => `
+*[data-theme="${themeName}"] {
+	${Object.entries(themeToCSSVarsObj(theme)).reduce(
+	(acc, entry) => (acc += `${entry.join(":")};\n`), ''
+)}
+}
+`
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+	transformTheme(componentsTheme, [], (path, val) => {
+		const [component, ...restPath] = path
+		const property = restPath.pop()
+
+		// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
+		// starts with underscore -> attribute selector
+
+		const attrsSelector = restPath.reduce((acc, section, idx) => {
+			if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
+
+			const nextSection = restPath[idx + 1];
+
+			if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+				console.error('theme generator', `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`)
+				return acc;
+			}
+
+			return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
+		}, '');
+
+		let selector = `${getComponentName(component)}${attrsSelector}`
+
+		return {
+			[selector]: {
+				[getVarName([component, property])]: val
+			}
+		}
+	});
+
+export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
+	Object.entries(componentsThemeToStyleObj(componentsTheme)).reduce(
+		(acc, [selector, vars]) => (acc += `*[data-theme="${themeName}"] ${selector} { \n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\n')} \n}\n\n`),
+		''
+	);
+
+export const themeToStyle = ({ globals, components }, themeName) => `
+${globalsThemeToStyle(globals, themeName)}
+${componentsThemeToStyle(components, themeName)}
+`

package/src/themeHelpers/processColors.js

@@ -0,0 +1,29 @@
+import Color from "color";
+
+const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
+const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
+const genContrast = (c, percentage = 0.9) => {
+	const isDark = c.isDark();
+	return c.mix(Color(isDark ? 'white' : 'black'), percentage).saturate(1).hex();
+};
+
+export const genColor = (color) => {
+	const mainColor = new Color(color.main || color);
+
+	return {
+		main: mainColor.hex(),
+		dark: color.dark || genDark(mainColor),
+		light: color.light || genLight(mainColor),
+		contrast: color.contrast || genContrast(mainColor),
+	}
+}
+
+export const genColors = (colors) => {
+	return Object.keys(colors).reduce((acc, colorName) => {
+		const currentColor = colors[colorName];
+
+		return Object.assign(acc, {
+			[colorName]: genColor(currentColor),
+		})
+	}, {});
+};