@momentum-ui/web-components 2.16.3 → 2.16.5

package/src/utils/generateColorTableData.js

@@ -1,41 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-disable no-undef */
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
-const handlebars = require("handlebars");
-const semanticColorData = require("@momentum-ui/tokens/dist/semanticColor.json");
-const fse = require("fs-extra");
-const fsPath = require("fs-path");
-
-const _generateFileFromTemplate = async (dest, fileName, data, template) => {
-  const source = await fse.readFile(template, "utf8");
-
-  var hbs = handlebars.create();
-  hbs.registerHelper("nodash", (value) => {
-    return value.replace(/-/g, "");
-  });
-
-  const compile = hbs.compile(source);
-  const finalFile = path.join(dest, fileName);
-  await fsPath.writeFile(finalFile, compile(data), (err) => {
-    if (err) throw err;
-  });
-};
-
-const generateColorTableData = async () => {
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    "color-table-data-string.ts",
-    semanticColorData,
-    path.resolve(__dirname, "../templates/color-table-data-string.hbs")
-  );
-};
-
-generateColorTableData();

package/src/utils/generateScssFromTokens.js

@@ -1,245 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-disable no-undef */
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
-const handlebars = require("handlebars");
-const colorData = require("@momentum-ui/tokens/dist/colors.json");
-const semanticColorData = require("@momentum-ui/tokens/dist/semanticColor.json");
-const tokenFileData = require("../tokens/vars/tokenFiles.js");
-const tokenImports = require("../tokens/tokenImports.js");
-const fse = require("fs-extra");
-const fsPath = require("fs-path");
-
-const createdStyleSheets = [];
-const componentsWithTokens = [];
-
-const _generateFileFromTemplate = async (dest, fileName, data, template) => {
-  const source = await fse.readFile(template, "utf8");
-  const compile = handlebars.compile(source);
-  const finalFile = path.join(dest, fileName);
-  await fsPath.writeFile(finalFile, compile(data), (err) => {
-    if (err) throw err;
-  });
-};
-
-const generateColorsFromTokens = async () => {
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    "color-settings.scss",
-    colorData,
-    path.resolve(__dirname, "../templates/colors-settings.hbs")
-  );
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    "color-utilities.scss",
-    colorData,
-    path.resolve(__dirname, "../templates/colors.hbs")
-  );
-  // CSS Momentum Color Variables
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    "css-color-variables.scss",
-    colorData,
-    path.resolve(__dirname, "../templates/css-color-variables.hbs")
-  );
-};
-
-const generateSemanticColorsFromTokens = async () => {
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    "semantic-color-settings.scss",
-    semanticColorData,
-    path.resolve(__dirname, "../templates/semantic-color-settings.hbs")
-  );
-
-  // Dark & Light CSS Semantic Color Variables
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    `semantic-colors--light.scss`,
-    semanticColorData,
-    path.resolve(__dirname, "../templates/semantic-color-light.hbs")
-  );
-
-  await _generateFileFromTemplate(
-    path.resolve(__dirname, "../wc_scss/colors/vars/"),
-    `semantic-colors--dark.scss`,
-    semanticColorData,
-    path.resolve(__dirname, "../templates/semantic-color-dark.hbs")
-  );
-};
-
-const _getDeepestKeys = (obj) => {
-  let keys = [];
-  for (const key in obj) {
-    if (typeof obj[key] === "object") {
-      const subkeys = _getDeepestKeys(obj[key]);
-      keys = keys.concat(
-        subkeys.map(function (subkey) {
-          return subkey;
-        })
-      );
-    } else {
-      keys.push(key);
-    }
-  }
-  return keys;
-};
-
-const _checkDataFileFormat = (colorDataFileName, colorDataFile) => {
-  const deepestKeys = _getDeepestKeys(colorDataFile);
-
-  let errorMsg = "";
-
-  if (deepestKeys.shift() !== "prefix") {
-    errorMsg += `\nThe token object in ${colorDataFileName} needs to begin with the property key "prefix".`;
-  }
-
-  if (deepestKeys.shift() !== "component") {
-    errorMsg += `\nThe token object in ${colorDataFileName} needs to have it's second property key to be "component".`;
-  }
-
-  if (!deepestKeys.includes("light") && !deepestKeys.includes("dark") && !deepestKeys.includes("common")) {
-    errorMsg += `The token object in ${colorDataFileName} needs to have all colors defined with key name "light", "dark" or "common".\n`;
-  }
-
-  if (errorMsg.length > 0) {
-    console.error(errorMsg);
-    process.exit(1);
-  }
-};
-
-const _generateComponentColors = async (componentName, colorDataFileName, colorDataFile) => {
-  _checkDataFileFormat(colorDataFileName, colorDataFile);
-
-  if (!componentsWithTokens.includes(componentName)) componentsWithTokens.push(componentName);
-  const destination = path.resolve(__dirname, `../components/${componentName}/scss/vars`);
-  const filePrefix = `${colorDataFile.prefix}-${componentName}`;
-
-  // Color Tokens as SCSS Variables
-  await _generateFileFromTemplate(
-    destination,
-    `${filePrefix}-settings.scss`,
-    colorDataFile,
-    path.resolve(__dirname, "../templates/component-colors.hbs")
-  );
-  createdStyleSheets.push(path.join(`${filePrefix}-settings`));
-
-  // Dark & Light CSS Variables
-  await _generateFileFromTemplate(
-    destination,
-    `${filePrefix}--light.scss`,
-    colorDataFile,
-    path.resolve(__dirname, "../templates/light-colors.hbs")
-  );
-  createdStyleSheets.push(path.join(`${filePrefix}--light`));
-
-  await _generateFileFromTemplate(
-    destination,
-    `${filePrefix}--dark.scss`,
-    colorDataFile,
-    path.resolve(__dirname, "../templates/dark-colors.hbs")
-  );
-  createdStyleSheets.push(path.join(`${filePrefix}--dark`));
-};
-
-const _lowercaseFirstLetter = (word) => {
-  return word.replace(/([A-Z])([a-zA-Z]*)/g, function (group1) {
-    return group1.toLowerCase();
-  });
-};
-
-const generateThemeStylesheets = () => {
-  const lightDarkThemes = ["Light", "Dark"];
-  const designThemes = ["lm", "md", "mdv2"];
-
-  const autoGeneratedMessage = `//----------------------------------------------------------
-// Do not edit this file directly. This is generated from
-// Lumos color tokens & imported Momentum color tokens.
-// src/components/\${componentName}/tokens/*.js
-// @momentum-ui/tokens/src/core/\${componentName}.js
-//----------------------------------------------------------\n
-`;
-
-  const themeStyles = ["lmLight", "mdLight", "lmDark", "mdDark", "mdv2Light", "mdv2Dark"];
-  const themeStyleFiles = {
-    lmLight: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`,
-    mdLight: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`,
-    lmDark: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`,
-    mdDark: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`,
-    mdv2Light: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`,
-    mdv2Dark: `${autoGeneratedMessage}@import "@/wc_scss/colors/settings.scss";\n`
-  };
-
-  for (const lightDarkTheme of lightDarkThemes) {
-    for (const designTheme of designThemes) {
-      const lowercaseLightDarkTheme = _lowercaseFirstLetter(lightDarkTheme);
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-        `@import "@/wc_scss/colors/vars/css-color-variables.scss";\n`;
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-        `@import "@/wc_scss/colors/vars/semantic-color-settings.scss";\n`;
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-        `@import "@/wc_scss/colors/vars/semantic-colors--${lowercaseLightDarkTheme}.scss";\n`;
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-        `@import "@/wc_scss/themes/global--${lowercaseLightDarkTheme}.scss";\n`;
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] += `@import "@/wc_scss/themes/global--${designTheme}.scss";\n`;
-
-      themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-        `@import "@momentum-design/tokens/dist/scss/theme/webex/${lowercaseLightDarkTheme}-stable.scss";\n`;
-
-      for (const componentName of componentsWithTokens) {
-        themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-          `@import "@/components/${componentName}/scss/vars/${designTheme}-${componentName}-settings.scss";\n`;
-
-        themeStyleFiles[`${designTheme}${lightDarkTheme}`] +=
-          `@import "@/components/${componentName}/scss/vars/${designTheme}-${componentName}--${lowercaseLightDarkTheme}.scss";\n`;
-      }
-    }
-  }
-
-  for (const themeStyleName of themeStyles) {
-    themeStyleFiles[themeStyleName] += `\n:root,\n:host {\n`;
-    themeStyleFiles[themeStyleName] += `  @include css-color-variables;\n`;
-    themeStyleFiles[themeStyleName] += `  @include global-vars;\n`;
-    themeStyleFiles[themeStyleName] += `  @include global-theme-specific-vars;\n`;
-    themeStyleFiles[themeStyleName] += `  @include semantic-color-vars;\n`;
-
-    for (const componentName of componentsWithTokens) {
-      themeStyleFiles[themeStyleName] += `  @include ${componentName}-vars;\n`;
-    }
-    themeStyleFiles[themeStyleName] += `}\n`;
-
-    const themeStyleFilePath = path.resolve(__dirname + `/../wc_scss/themes/vars/${themeStyleName}.scss`);
-    fsPath.writeFile(themeStyleFilePath, themeStyleFiles[themeStyleName], (err) => {
-      if (err) throw err;
-    });
-  }
-};
-
-const generateComponentScssFromTokens = async () => {
-  const allTokenFiles = tokenFileData.tokenFiles.concat(tokenImports);
-  let index = 0;
-  for (const tokenObject of allTokenFiles) {
-    const componentName = tokenObject.component;
-    const tokenFileName = tokenFileData.tokenFileNames[index];
-    await _generateComponentColors(componentName, tokenFileName, tokenObject);
-    index++;
-  }
-
-  generateThemeStylesheets();
-};
-
-generateColorsFromTokens();
-generateSemanticColorsFromTokens();
-generateComponentScssFromTokens();

package/src/utils/helpers.ts

@@ -1,150 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export const indicesOf = (text: string, searchString: string) => {
-  const searchStringLen = searchString.length;
-
-  if (searchStringLen === 0) {
-    return [];
-  }
-
-  const indices = [];
-  const strCpy = text.toLowerCase();
-  const searchStringCpy = searchString.toLowerCase();
-
-  let startIndex = 0;
-  let index = strCpy.indexOf(searchStringCpy, startIndex);
-  while (index > -1) {
-    startIndex = index + searchStringLen;
-    indices.push([index, startIndex]);
-
-    index = strCpy.indexOf(searchStringCpy, index + 1);
-  }
-
-  return indices;
-};
-
-export const mergeRange = ([...ranges]) => {
-  if (!ranges.length) return [];
-
-  ranges.sort((fir, sec) => {
-    if (fir[0] !== sec[0]) return fir[0] - sec[0];
-    return fir[1] - sec[1];
-  });
-
-  const merged = [];
-
-  let curStart = ranges[0][0];
-  let curEnd = ranges[0][1];
-
-  ranges.shift();
-
-  ranges.forEach(([start, end]) => {
-    if (start >= curEnd) {
-      merged.push([curStart, curEnd]);
-      curStart = start;
-      curEnd = end;
-    } else if (end > curEnd) curEnd = end;
-  });
-
-  merged.push([curStart, curEnd]);
-
-  return merged;
-};
-
-export const findHighlight = (text: string, query: string) => {
-  const queries = [query];
-  const matches: number[][] = [];
-
-  queries.forEach((query) => {
-    matches.push(...indicesOf(text, query));
-  });
-
-  const highlights = mergeRange(matches);
-
-  const chunks = [];
-  let lastEnd = 0;
-
-  highlights.forEach(([start, end]) => {
-    if (lastEnd !== start) {
-      chunks.push({
-        range: [start, end],
-        matching: false,
-        text: text.slice(lastEnd, start)
-      });
-    }
-    chunks.push({
-      range: [start, end],
-      matching: true,
-      text: text.slice(start, end)
-    });
-
-    lastEnd = end;
-  });
-
-  if (lastEnd !== text.length) {
-    chunks.push({
-      range: [lastEnd],
-      matching: false,
-      text: text.slice(lastEnd)
-    });
-  }
-  return chunks;
-};
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function debounce<T>(func: Function, wait: number, immediate?: boolean) {
-  let timeout: ReturnType<typeof setTimeout> | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (this: T, ...args: any[]) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this;
-    const later = function () {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout!);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-}
-
-export const throttle = (fn: (...args: any[]) => unknown, delay = 1000 / 60) => {
-  let lastTimeoutRef: number | undefined = undefined;
-  let last = Date.now();
-
-  // Throttling
-  const next = (...args: any[]) => {
-    const now = Date.now();
-    window.clearTimeout(lastTimeoutRef);
-
-    if (!last || now - last >= delay) {
-      last = now;
-      fn.call(fn, ...args);
-    } else {
-      lastTimeoutRef = window.setTimeout(() => next(...args), delay - (now - last));
-    }
-  };
-
-  return (...args: any[]) => next(...args);
-};
-
-export function closestElement(selector: string, base: HTMLElement) {
-  function __closestFrom(el: any): HTMLElement | null {
-    if (!el || el === document || el === window) return null;
-
-    const found = el.closest(selector);
-    return found ? found : __closestFrom(el.getRootNode().host);
-  }
-  return __closestFrom(base);
-}

package/src/utils/keyboard.ts

@@ -1,5 +0,0 @@
-import { Key } from "@/constants";
-
-export function isActionKey(keyCode: string): boolean {
-  return keyCode === Key.Enter || keyCode === Key.Space || keyCode === Key.NumpadEnter;
-}

package/src/utils/validateIconMapping.js

@@ -1,55 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-disable no-undef */
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const path = require("path");
-const fs = require("fs-extra");
-
-function validateIconMapping(iconMapFile, iconManifestFile) {
-  let invalidMappingFlag = false;
-  const utf8Format = "utf-8";
-
-  try {
-    const iconMapData = fs.readFileSync(iconMapFile, utf8Format);
-    const iconMap = JSON.parse(iconMapData);
-
-    const iconManifestData = fs.readFileSync(iconManifestFile, utf8Format);
-    const iconManifest = JSON.parse(iconManifestData);
-
-    const iconManifestKeyArray = Object.keys(iconManifest);
-
-    for (const key in iconMap) {
-      const keyValue = iconMap[key];
-
-      if (keyValue.length === 0 || keyValue === "Unknown") {
-        //ignore empty mapping values
-        continue;
-      }
-
-      if (!iconManifestKeyArray.includes(keyValue)) {
-        console.log(`key: ${key}, has invlid mapping value: ${keyValue}`);
-        invalidMappingFlag = true;
-      }
-    }
-  } catch (error) {
-    console.error("Error reading or parsing JSON files:", error);
-  }
-
-  return invalidMappingFlag;
-}
-
-const validateMomentumDesignMapping = async () => {
-  return validateIconMapping(
-    path.resolve(__dirname, "../components/icon/momentum-ui-to-design-icons.json"),
-    path.resolve(__dirname, "../../node_modules/@momentum-design/icons/dist/manifest.json")
-  );
-};
-
-validateMomentumDesignMapping();

package/src/utils/validations.ts

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export const ValidationRegex = {
-  textString: "[sS]*",
-  integerString: "^([+-]?[1-9]\\d*|0)$",
-  decimalString: "^[0-9]+([,.]?)+([0-9]+)?$",
-  dateString: "^(0?[1-9]|1[0-2])[/](0?[1-9]|[12]\\d|3[01])[/](19|20)\\d{2}$",
-  dateRangeString:
-    "^(((19|20)?[0-9]{2}[- /.]0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])) - (((19|20)?[0-9]{2}[- /.]0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01]))",
-  ISODateString: "^\\d{4}-([1][0-2]|[0][1-9])-(0[1-9]|[12][0-9]|3[01])$",
-  ISOTimeString: "^([0][1-9]|[1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$",
-  ISOString:
-    "^\\d{4}-([1][0-2]|[0][1-9])-(0[1-9]|[12][0-9]|3[01])T([01][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])(-|\\+)[01]\\d:[0-5]\\d$",
-  noPrecedingZerosString: "^(0|[1-9][0-9]?)$",
-  allLeadingZeros: "^0+",
-  timeString:
-    "(^(([0-1]?\\d)|(2[0-3]))(:|.|)?[0-5][0-9]$)|(^((0?[1-9])|(1[0-2]))(:|.|)([0-5][0-9])( ||,)([aA]|[pP])[mM]$)|(^([aA]|[pP])[mM]( |,|)((0?[1-9])|(1[0-2]))(|:|.)([0-5][0-9])$)",
-  hourString: "^([1-9]|1[012]|0[1-9])$",
-  twentyFourHourString: "^([0-9]|0[0-9]|1[0-9]|2[0-3])$",
-  minuteSecondString: "^(?:[0-5][0-9]|[0-9])$",
-  amPmString: "([AaPp][Mm])",
-  booleanString: "^(?:tru|fals)e$"
-};