@descope/web-components-ui 1.0.419 → 1.0.420

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/{src/components/descope-avatar → node_modules/descope-avatar/src/component}/AvatarClass.js

@@ -1,7 +1,7 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
-import { compose } from '../../helpers';
-import { forwardAttrs, getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+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' }) {

package/{src/theme/components/avatar.js → node_modules/descope-avatar/src/theme.js}

@@ -1,6 +1,6 @@
-import globals from '../globals';
-import { AvatarClass } from '../../components/descope-avatar/AvatarClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
+import globals from 'theme-globals';
+import { AvatarClass } from './component/AvatarClass';
+import { getThemeRefs } from 'common/theme-helpers';
 
 const globalRefs = getThemeRefs(globals);
 const compVars = AvatarClass.cssVarList;

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/{src/components/descope-text → node_modules/descope-text/src/component}/TextClass.js

@@ -1,7 +1,7 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
-import { compose } from '../../helpers';
-import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
-import { createBaseClass } from '../../baseClasses/createBaseClass';
+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');
 

package/{src/theme/components/text.js → node_modules/descope-text/src/theme.js}

@@ -1,6 +1,6 @@
-import globals from '../globals';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import { TextClass } from '../../components/descope-text/TextClass';
+import globals from 'theme-globals';
+import { getThemeRefs } from 'common/theme-helpers';
+import { TextClass } from './component/TextClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = TextClass.cssVarList;

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
+};