@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/utils/generateColorTableData.js

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,245 @@
+/**
+ * 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

@@ -0,0 +1,150 @@
+/**
+ * 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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,55 @@
+/**
+ * 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

@@ -0,0 +1,29 @@
+/**
+ * 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$"
+};