@descope/web-components-ui 0.0.1

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

@@ -0,0 +1,176 @@
+import merge from 'lodash.merge';
+import { BASE_THEME_SECTION, DESCOPE_PREFIX, PORTAL_THEME_PREFIX } from '../constants';
+import { isUrl, kebabCase } from '../utils';
+import { getComponentName, getCssVarName } from '../componentsHelpers';
+
+const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
+
+// lodash.set alternative
+const set = (obj, path, value) => {
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+
+  pathArray.reduce((acc, key, i) => {
+    if (acc[key] === undefined) acc[key] = {};
+    if (i === pathArray.length - 1) acc[key] = value;
+    return acc[key];
+  }, obj);
+
+  return obj;
+};
+
+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));
+    }
+    return merge(acc, transformTheme(val, [...path, key], getTransformation));
+  }, {});
+};
+
+const stringifyArray = (strArr) =>
+  strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
+
+const getCssVarValue = (val) => {
+  switch (true) {
+    case Array.isArray(val):
+      return stringifyArray(val);
+    case isUrl(val):
+      return `url(${val})`;
+    default:
+      return val;
+  }
+};
+
+export const themeToCSSVarsObj = (theme) =>
+  transformTheme(theme, [], (path, val) => ({
+    [getVarName(path)]: getCssVarValue(val),
+  }));
+
+export const getThemeRefs = (theme, prefix) =>
+  transformTheme(theme, [], (path) =>
+    set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`)
+  );
+
+export const getThemeVars = (theme, prefix) =>
+  transformTheme(theme, [], (path) => set({}, path, getVarName(prefix ? [prefix, ...path] : path)));
+
+export const globalsThemeToStyle = (theme, themeName = '') => {
+  const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
+    (acc, entry) => `${acc}${entry.join(':')};\n`,
+    ''
+  );
+
+  if (!themeName) return style;
+
+  return `*[data-theme="${themeName}"] {${style}}`;
+};
+
+const componentsThemeToStyleObj = (componentsTheme) =>
+  transformTheme(componentsTheme, [], (path, val) => {
+    const [component, ...restPath] = path;
+    const property = restPath.pop();
+    const componentName = getComponentName(component);
+
+    if (property === 'undefined') {
+      // eslint-disable-next-line no-console
+      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+    }
+
+    // we need a support for portal components theme (e.g. overlay)
+    // this allows us to generate those themes under different sections
+    // if the theme has root level attribute that starts with #
+    // we are generating a new theme
+    let themeName = BASE_THEME_SECTION;
+
+    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
+      themeName = restPath.shift();
+    }
+
+    // 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}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
+
+      const nextSection = restPath[idx + 1];
+
+      if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'theme generator',
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+        );
+        return acc;
+      }
+
+      return `${acc}[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
+    }, '');
+
+    const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
+
+    return {
+      [componentName]: {
+        [themeName]: {
+          [selector]: {
+            [property]: getCssVarValue(val),
+          },
+        },
+      },
+    };
+  });
+
+const componentsThemeToStyle = (componentsTheme) =>
+  Object.entries(componentsTheme).reduce(
+    (acc, [selector, vars]) =>
+      `${acc}${selector} { \n${Object.entries(vars)
+        .map(([key, val]) => `${key}: ${val}`)
+        .join(';\n')} \n}\n\n`,
+    ''
+  );
+
+export const createComponentsTheme = (componentsTheme) => {
+  const styleObj = componentsThemeToStyleObj(componentsTheme);
+
+  return Object.keys(styleObj).reduce((acc, componentName) => {
+    const componentThemes = styleObj[componentName];
+
+    return Object.assign(acc, {
+      [componentName]: Object.keys(componentThemes).reduce(
+        (res, theme) =>
+          Object.assign(res, { [theme]: componentsThemeToStyle(componentThemes[theme]) }),
+        {}
+      ),
+    });
+  }, {});
+};
+
+export const themeToStyle = ({ globals, components }, themeName) => ({
+  globals: globalsThemeToStyle(globals, themeName),
+  components: createComponentsTheme(components),
+});
+
+// allows to generate css variables with nested fallbacks
+export const useVar = (...varNames) => {
+  return varNames.reduceRight((acc, value) => {
+    if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
+
+    return `${value}${acc ? `, ${acc}` : acc}`;
+  }, '');
+};
+
+export const createHelperVars = (theme, prefix) => {
+  const res = transformTheme(theme, [], (path, value) => {
+    const modifiedPath = [...path];
+    const property = modifiedPath.splice(-1);
+    const varName = getCssVarName(prefix, property);
+
+    const vars = { [property]: varName };
+    const useVars = { [property]: useVar(varName) };
+
+    return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
+  });
+
+  return [res.theme, res.useVars, res.vars];
+};
+
+export { componentsThemeManager } from './componentsThemeManager';
+export * from './colorsHelpers';

package/node_modules/common/src/utils/index.js

@@ -0,0 +1,68 @@
+export const kebabCase = (str) =>
+  str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_.]+/g, '-')
+    .toLowerCase();
+
+export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
+
+export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+export const camelCaseJoin = (...args) =>
+  args
+    .filter(Boolean)
+    .map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
+    .join('');
+
+export const compose =
+  (...fns) =>
+  (val) =>
+    fns.reduceRight((res, fn) => fn(res), val);
+
+export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
+
+export const isUrl = (maybeUrl) => {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(maybeUrl);
+
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+/**
+ * Compares two arrays unorderedly.
+ * @param {Array} arr1 - The first array to compare.
+ * @param {Array} arr2 - The second array to compare.
+ * @returns {boolean} - Returns true if the arrays are equal unorderedly, false otherwise.
+ */
+export const compareArraysUnordered = (arr1, arr2) => {
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+    return false;
+  }
+
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+
+  const sortedArr1 = arr1.slice().sort();
+  const sortedArr2 = arr2.slice().sort();
+
+  for (let i = 0; i < sortedArr1.length; i++) {
+    if (sortedArr1[i] !== sortedArr2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const toTitle = (str) =>
+  str
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');

package/node_modules/descope-avatar/e2e/descope-avatar.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const img =
+  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzmudcbKkbOue75DaM9HDDrt0W39SJLBH-3HPK3s-K1w&s';
+
+const componentAttributes = {
+  size: ['xs', 'sm', 'md', 'lg'],
+  editable: ['true', 'false'],
+  img: [img],
+};
+
+const presets = {
+  'direction rtl': {
+    direction: 'rtl',
+    editable: 'true',
+  },
+  'no image': {
+    img: '',
+    'display-name': 'John Doe',
+  },
+  'no image and name': {
+    img: '',
+    'display-name': '',
+  },
+};
+
+const storyName = 'descope-avatar';
+const componentName = 'descope-avatar';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { text: 'Text 123', [attr]: value }), { waitUntil: 'load' });
+      });
+      test('style', async ({ page }) => {
+        const componentParent = page.locator(componentName);
+
+        expect(await componentParent.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = page.locator(componentName);
+      expect(
+        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+      ).toMatchSnapshot();
+    });
+  });});

package/node_modules/descope-avatar/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "descope-avatar",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AvatarClass.js"
+    }
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  },
+  "devDependencies": {
+    "e2e-utils": "workspace:*",
+    "@playwright/test": "1.38.1"
+  },
+  "dependencies": {
+    "common": "0.0.1",
+    "theme-globals": "0.0.1",
+    "@vaadin/avatar": "24.3.4",
+    "@vaadin/icon": "24.3.4",
+    "@vaadin/icons": "24.3.4"
+  },
+  "private": true,
+  "publishConfig": {
+    "link-workspace-packages": false
+  }
+}

package/node_modules/descope-avatar/project.json

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

package/node_modules/descope-avatar/src/component/AvatarClass.js

@@ -0,0 +1,109 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from 'common/components-mixins';
+import { createBaseClass } from 'common/base-classes';
+import { compose } from 'common/utils';
+import { forwardAttrs, getComponentName, observeAttributes } from 'common/components-helpers';
+
+export const componentName = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host > .wrapper' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        .editableBadge {
+          border: 1px solid;
+          border-radius: 100%;
+          height: fit-content;
+          width: 25%;
+          height: 25%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 5%;
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 0;
+          inset-inline-end: 0;
+        }
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        vaadin-avatar {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          border: none
+        }
+
+        .wrapper {
+          display: inline-flex;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+
+
+      <div class="wrapper">
+        <vaadin-avatar></vaadin-avatar>
+        <div class="editableBadge">
+          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
+        </div>
+      </div>
+		`;
+
+    this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
+
+    forwardAttrs(this, this.avatarComponent, {
+      includeAttrs: ['display-name', 'img', 'abbr'],
+      mapAttrs: { 'display-name': 'name' },
+    });
+
+    const editableIcon = this.shadowRoot.querySelector('.editableBadge');
+
+    observeAttributes(
+      this,
+      () => {
+        editableIcon.style.display = this.isEditable ? '' : 'none';
+      },
+      { includeAttrs: ['editable'] }
+    );
+  }
+
+  get isEditable() {
+    return this.getAttribute('editable') === 'true';
+  }
+}
+
+const { host, editableBadge, avatar } = {
+  host: { selector: () => ':host' },
+  editableBadge: { selector: '> .editableBadge' },
+  avatar: { selector: 'vaadin-avatar' },
+};
+
+export const AvatarClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [
+        { ...host, property: 'width' },
+        { ...host, property: 'min-width' },
+      ],
+      hostHeight: { ...host, property: 'height' },
+      cursor: [avatar, host],
+      hostDirection: { ...host, property: 'direction' },
+      avatarTextColor: { ...avatar, property: 'color' },
+      avatarBackgroundColor: { ...avatar, property: 'background-color' },
+      editableIconColor: { ...editableBadge, property: 'color' },
+      editableBorderColor: { ...editableBadge, property: 'border-color' },
+      editableBackgroundColor: { ...editableBadge, property: 'background-color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawAvatar);

package/node_modules/descope-avatar/src/component/index.js

@@ -0,0 +1,8 @@
+import { componentName, AvatarClass } from './AvatarClass';
+import '@vaadin/avatar';
+import '@vaadin/icon';
+import '@vaadin/icons';
+
+customElements.define(componentName, AvatarClass);
+
+export { AvatarClass };

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

@@ -0,0 +1,44 @@
+import globals from 'theme-globals';
+import { AvatarClass } from './component/AvatarClass';
+import { getThemeRefs } from 'common/theme-helpers';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = AvatarClass.cssVarList;
+
+const avatar = {
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.editableIconColor]: globalRefs.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,
+
+  _editable: {
+    [compVars.cursor]: 'pointer',
+  },
+
+  size: {
+    xs: {
+      [compVars.hostWidth]: '30px',
+      [compVars.hostHeight]: '30px',
+    },
+    sm: {
+      [compVars.hostWidth]: '40px',
+      [compVars.hostHeight]: '40px',
+    },
+    md: {
+      [compVars.hostWidth]: '60px',
+      [compVars.hostHeight]: '60px',
+    },
+    lg: {
+      [compVars.hostWidth]: '98px',
+      [compVars.hostHeight]: '98px',
+    },
+  },
+};
+
+export default avatar;
+
+export const vars = {
+  ...compVars,
+};

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

@@ -0,0 +1,32 @@
+import { componentName } from '../src/component/AvatarClass';
+import { directionControl, sizeControl } from 'common/sb-controls';
+import img from './avatar.jpeg'
+
+const Template = ({ 'display-name': displayName, img, size, editable, direction }) => `
+  <descope-avatar
+    display-name="${displayName || ''}"
+    img="${img}"
+    size="${size}"
+    editable="${editable || ''}"
+    st-host-direction="${direction ?? ''}">
+  ></descope-avatar
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-avatar',
+  argTypes: {
+    ...sizeControl,
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  img: img,
+  'display-name': 'John Doe',
+  size: 'sm',
+  editable: false,
+  direction: ''
+};

package/node_modules/descope-text/e2e/descope-text.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  text: 'Test Text',
+  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  mode: ['primary', 'secondary', 'success', 'error'],
+  'text-align': ['left', 'center', 'right'],
+  'hide-when-empty': ['true'],
+};
+
+const storyName = 'descope-text';
+const componentName = 'descope-text';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { [attr]: value }));
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test(`full-width: false`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { 'full-width': false }));
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test(`direction: rtl`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World' }));
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/node_modules/descope-text/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "descope-text",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/TextClass.js"
+    }
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  },
+  "devDependencies": {
+    "e2e-utils": "workspace:*",
+    "@playwright/test": "1.38.1"
+  },
+  "dependencies": {
+    "common": "0.0.1",
+    "theme-globals": "0.0.1"
+  },
+  "private": true,
+  "publishConfig": {
+    "link-workspace-packages": false
+  }
+}

package/node_modules/descope-text/project.json

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

package/node_modules/descope-text/src/component/TextClass.js

@@ -0,0 +1,63 @@
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from 'common/components-mixins';
+import { compose } from 'common/utils';
+import { getComponentName, observeChildren } from 'common/components-helpers';
+import { createBaseClass } from 'common/base-classes';
+
+export const componentName = getComponentName('text');
+
+class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        line-height: 1em;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+    </style>
+    <slot part="text-wrapper"></slot>
+    `;
+  }
+
+  get hideWhenEmpty() {
+    return this.getAttribute('hide-when-empty') === 'true';
+  }
+
+  init() {
+    super.init();
+
+    observeChildren(this, () => {
+      const hasChildren = !!this.childNodes.length;
+      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+    });
+  }
+}
+
+export const TextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textLetterSpacing: { property: 'letter-spacing' },
+      textShadow: {},
+      textAlign: {},
+      textTransform: {},
+      fontFamily: {},
+      fontStyle: {},
+      fontWeight: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderColor: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawText);

package/node_modules/descope-text/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, TextClass } from './TextClass';
+
+customElements.define(componentName, TextClass);
+
+export { TextClass };