@descope/web-components-ui 1.0.35

package/README.md

@@ -0,0 +1,191 @@
+# web-components-ui
+
+# Architecture
+
+## `page-editor-components`
+
+## `screen-renderer-service`
+
+## `web-components-ui`
+
+### Components
+
+- DescopeUI
+- Components Library ([Vaadain Components](https://vaadin.com/docs/latest/components))
+
+### Build
+
+_Webpack_
+
+- `UMD` - Hosted, consumed by client in runtime
+
+_Rollup_
+
+- `ESM` - Consumed by `console-app` in build
+- `CJS` - Consumed by `screen-renderer-service` in build
+
+### CreateProxy
+
+Wraps the web component with a ProxyElement.
+
+### Discovery & Lazy Loading
+
+### Hosted Service
+
+### Style API
+
+- Cover gaps between style API of our components and Vaadain’s style API
+
+### Mixins
+
+`DraggableMixin`
+
+### Versioning
+
+TBD
+
+<!-- theme: colors -->
+
+<!-- theme: global props -->
+
+font
+
+<!-- theme: mapped -->
+
+color
+bgColor
+
+<!-- component props -->
+
+size
+
+--
+Theme colors
+Theme fonts
+
+# Button
+
+    - Variant
+    - Text Color
+    - Text Size
+    - Font Family
+    - BgColor
+    - Radius
+
+# Autocomplete
+
+- Variant: V1: Default
+
+  - Button
+  - Input
+    - Variant
+    - Text Color
+    - Border
+    - Radius
+  - List
+    - Variant
+    - Border
+    - BgColor
+    - Radius
+  - Chip
+    - Variant
+    - Text Color
+    - Bg Color
+    - Radius
+
+- Variant: V2: Outline
+- Variant: V3: Contained
+
+<!-- global atomic vars -->
+
+spacing1
+spacing2
+font1
+font2
+color1
+color2
+color3
+color4
+color5
+.
+.
+.
+--
+Primary Color
+Secondary Color
+Info
+Success
+Error
+Warning
+
+prop
+
+<!-- CSSProp bgColor -->
+
+THEME:
+Global Theme Prop: `PrimaryColor`
+Component Variant Prop: `PrimaryColor` / `GlobalThemeProp` / `Custom`
+
+```
+{
+    colors: {
+        PrimaryColor: red;
+        SecondaryColor: blue;
+        Success: green;
+    },
+    components: {
+        Button: {
+            success: {
+                color
+                radius
+                fontFamily
+            }
+            colors: {
+                BgColor: yellow;
+                TextColor
+                Radius
+            },
+            sizes: {
+                small: '',
+            }
+            fonts: {
+                FontSize
+            },
+        }
+        Phone: {
+            colors: {
+                TextColor: red;
+            }
+
+        }
+    }
+}
+```
+
+COMP:
+<descope-web-component variant="contained" overrides=[PrimaryColor: red, Success: blue]></descope-web-component>
+
+PrimaryColor => BgColor
+
+WCProp BgColor
+WCProp -
+
+<button variant="outline" currentDay="success">
+<button variant="outline" color="#123123">
+
+outline: {
+borderColor: theme[color] || color // red
+color: theme[variant] \* 0.2
+}
+
+<date-picker TextColor="">
+contained: {
+    bgColor: theme[variant]
+    color: theme[variant] \* 0.8
+}
+.contained.success {
+    bgColor: theme[PrimayColor]
+    color: theme[variant] \* 0.8
+}
+
+<descope-web-component variant="contained" color, radius, fontFamily></descope-web-component>

package/dist/cjs/index.cjs.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var merge = require('lodash.merge');
+var set = require('lodash.set');
+
+const DESCOPE_PREFIX = 'descope';
+
+const kebabCase = str => str
+.replace(/([a-z])([A-Z])/g, "$1-$2")
+.replace(/[\s_.]+/g, '-')
+.toLowerCase();
+
+const kebabCaseJoin = (...args) => kebabCase(args.join('-'));
+
+const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
+
+const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
+
+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(", ");
+
+const themeToCSSVarsObj = (theme) =>
+	transformTheme(theme, [], (path, val) => ({
+		[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,
+	}));
+
+const getThemeRefs = (theme, prefix) =>
+	transformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));
+
+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
+			}
+		}
+	});
+
+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`),
+		''
+	);
+
+const themeToStyle = ({ globals, components }, themeName) => `
+${globalsThemeToStyle(globals, themeName)}
+${componentsThemeToStyle(components, themeName)}
+`;
+
+exports.componentsThemeToStyle = componentsThemeToStyle;
+exports.getThemeRefs = getThemeRefs;
+exports.globalsThemeToStyle = globalsThemeToStyle;
+exports.themeToCSSVarsObj = themeToCSSVarsObj;
+exports.themeToStyle = themeToStyle;
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../src/constants.js","../../src/helpers.js","../../src/componentsHelpers/index.js","../../src/themeHelpers/index.js"],"sourcesContent":["export const DESCOPE_PREFIX = 'descope'","export const kebabCase = str => str\n.replace(/([a-z])([A-Z])/g, \"$1-$2\")\n.replace(/[\\s_.]+/g, '-')\n.toLowerCase();\n\nexport const kebabCaseJoin = (...args) => kebabCase(args.join('-'))\n\nexport const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`\n","import { DESCOPE_PREFIX } from \"../constants\";\nimport { kebabCaseJoin } from \"../helpers\";\n\nexport const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name)\n\nexport const compose = (...fns) => (val) => fns.reduceRight((res, fn) => fn(res), val);\n\nexport { createStyleMixin } from './createStyleMixin'\nexport { draggableMixin } from './draggableMixin'\nexport { createProxy } from './createProxy'\nexport { inputMixin } from './inputMixin'\n","import merge from \"lodash.merge\";\nimport set from \"lodash.set\";\nimport { DESCOPE_PREFIX } from \"../constants\";\nimport { getCssVarName } from \"../helpers\";\nimport { getComponentName } from \"../componentsHelpers\";\n\nconst getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)\n\nconst transformTheme = (theme, path, getTransformation) => {\n\treturn Object.entries(theme).reduce((acc, [key, val]) => {\n\t\tif (val?.constructor !== Object) {\n\t\t\treturn merge(acc, getTransformation(path.concat(key), val));\n\t\t} else {\n\t\t\treturn merge(acc, transformTheme(val, [...path, key], getTransformation));\n\t\t}\n\t}, {});\n};\n\nconst stringifyArray = (strArr) => strArr.map((str) => (str.includes(\" \") ? `\"${str}\"` : str)).join(\", \")\n\nexport const themeToCSSVarsObj = (theme) =>\n\ttransformTheme(theme, [], (path, val) => ({\n\t\t[getVarName(path)]: Array.isArray(val) ? stringifyArray(val) : val,\n\t}));\n\nexport const getThemeRefs = (theme, prefix) =>\n\ttransformTheme(theme, [], (path) => set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`));\n\nexport const globalsThemeToStyle = (theme, themeName = '') => `\n*[data-theme=\"${themeName}\"] {\n\t${Object.entries(themeToCSSVarsObj(theme)).reduce(\n\t(acc, entry) => (acc += `${entry.join(\":\")};\\n`), ''\n)}\n}\n`\n\nconst componentsThemeToStyleObj = (componentsTheme) =>\n\ttransformTheme(componentsTheme, [], (path, val) => {\n\t\tconst [component, ...restPath] = path\n\t\tconst property = restPath.pop()\n\n\t\t// do not start with underscore -> key:value, must have 2 no underscore attrs in a row\n\t\t// starts with underscore -> attribute selector\n\n\t\tconst attrsSelector = restPath.reduce((acc, section, idx) => {\n\t\t\tif (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;\n\n\t\t\tconst nextSection = restPath[idx + 1];\n\n\t\t\tif (typeof nextSection !== 'string' || nextSection.startsWith('_')) {\n\t\t\t\tconsole.error('theme generator', `your theme structure is invalid, attribute \"${section}\" is followed by \"${nextSection}\" which is not allowed`)\n\t\t\t\treturn acc;\n\t\t\t}\n\n\t\t\treturn acc += `[${section}=\"${restPath.splice(idx + 1, 1).join('')}\"]`;\n\t\t}, '');\n\n\t\tlet selector = `${getComponentName(component)}${attrsSelector}`\n\n\t\treturn {\n\t\t\t[selector]: {\n\t\t\t\t[getVarName([component, property])]: val\n\t\t\t}\n\t\t}\n\t});\n\nexport const componentsThemeToStyle = (componentsTheme, themeName = '') =>\n\tObject.entries(componentsThemeToStyleObj(componentsTheme)).reduce(\n\t\t(acc, [selector, vars]) => (acc += `*[data-theme=\"${themeName}\"] ${selector} { \\n${Object.entries(vars).map(([key, val]) => `${key}: ${val}`).join(';\\n')} \\n}\\n\\n`),\n\t\t''\n\t);\n\nexport const themeToStyle = ({ globals, components }, themeName) => `\n${globalsThemeToStyle(globals, themeName)}\n${componentsThemeToStyle(components, themeName)}\n`"],"names":[],"mappings":"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"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}