@heartlandone/vega-sandbox-pr-1506-3239befdcdad5bfa650ecfb1249bcd1b261543fe 2.27.0

package/dist/collection/types/test/type-guard.test.js

@@ -0,0 +1,39 @@
+import { isFlexWrapType, isResponsiveType, isSpacingDirection, isStateVariantTokenType } from '../type-guard';
+test('should get expect result when call function isResponsiveType', async () => {
+  const sizeWithDefault = {
+    default: 'default',
+    M: 'small',
+  };
+  const sizeNoDefault = {
+    M: 'small',
+  };
+  const size = 'small';
+  const sizeEmpty = null;
+  expect(isResponsiveType(sizeWithDefault)).toBeTruthy();
+  expect(isResponsiveType(sizeNoDefault)).toBeTruthy();
+  expect(isResponsiveType(size)).toBeFalsy();
+  expect(isResponsiveType(sizeEmpty)).toBeFalsy();
+});
+test('should get expect result when call function isSpacingDirection', async () => {
+  const num = 8;
+  const stringInvalid = 'top1';
+  const stringValid1 = 'top';
+  const stringValid2 = 'x';
+  expect(isSpacingDirection(num)).toBeFalsy();
+  expect(isSpacingDirection(stringInvalid)).toBeFalsy();
+  expect(isSpacingDirection(stringValid1)).toBeTruthy();
+  expect(isSpacingDirection(stringValid2)).toBeTruthy();
+});
+test('should get expect result when call function isStateVariantTokenType', async () => {
+  expect(isStateVariantTokenType(undefined)).toBeFalsy();
+  expect(isStateVariantTokenType(null)).toBeFalsy();
+  expect(isStateVariantTokenType({})).toBeTruthy();
+  expect(isStateVariantTokenType({ default: '' })).toBeTruthy();
+  expect(isStateVariantTokenType({ default: '', valid: '' })).toBeFalsy();
+});
+test('should get expect result when call function isFlexWrapType', async () => {
+  expect(isFlexWrapType(undefined)).toBeFalsy();
+  expect(isFlexWrapType(null)).toBeFalsy();
+  expect(isFlexWrapType('wrap')).toBeTruthy();
+  expect(isFlexWrapType('wrap1')).toBeFalsy();
+});

package/dist/collection/types/type-guard.js

@@ -0,0 +1,372 @@
+import { Colors } from '../constants/tokens/colors';
+import { Spacing } from '../constants/tokens/spacing';
+import { Shadows } from '../constants/tokens/shadows';
+import { Breakpoints } from '../constants/tokens/breakpoints';
+import { BorderRadius } from '../constants/tokens/border-radius';
+import { BorderStyle, BoxDisplay, CssStates, FlexAlignItem, FlexDirections, FlexJustifyContent, FlexWrap, TextAlign, } from '../constants/ui';
+import { GridColumnsRegex, GridRowsRegex } from '../constants/regex';
+import { TypographyKeys } from '../constants/public-api';
+import { Borders } from '../constants/tokens/borders';
+/**
+ * Returns true if the input is a string that is one of the four directions.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link SpacingDirection}
+ */
+export const isSpacingDirection = (input) => {
+  return typeof input === 'string' && ['top', 'bottom', 'left', 'right', 'x', 'y'].includes(input);
+};
+/**
+ * If the input is a string and the string is a key in the Spacing enum, then the input is a SpacingTokenType.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link SpacingTokenType}
+ */
+export const isSpacingTokenType = (input) => {
+  return typeof input === 'string' && typeof Spacing[input] === 'number';
+};
+/**
+ * If every key in the input is a valid spacing direction and every value in the input is a valid spacing value, then the
+ * input is a valid directional spacing type.
+ *
+ * @param {unknown} input - unknown - This is the input value that we want to check.
+ * @returns {boolean} indicating if the input is type of {@link DirectionalSpacingType}
+ */
+export const isDirectionalSpacingType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isSpacingDirection) &&
+    Object.values(input).every((paddingValue) => paddingValue in Spacing));
+};
+/**
+ * `isResponsiveType` returns true if the input is an object with a `default` property and all other properties are valid
+ * breakpoints
+ *
+ * @param {unknown} input - unknown - this is the input that we want to check if it's a ResponsiveType
+ * @returns {boolean} indicating if the input is type of {@link ResponsiveType<ResponsiveScope>}
+ */
+export const isResponsiveType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isBreakpointsTokenType);
+};
+/**
+ * If the input is a string and it's either in the Breakpoints enum or it's the string 'default', then it's a
+ * BreakpointsTokenType.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link BreakpointsTokenType}
+ */
+export const isBreakpointsTokenType = (input) => {
+  return typeof input === 'string' && (input in Breakpoints || input === 'default');
+};
+/**
+ * This function returns true if the input is a string that is a key in the BorderRadius object.
+ *
+ * @param {unknown} input - unknown - This is the input that will be checked.
+ * @returns {boolean} indicating if the input is type of {@link BorderRadiusTokenType}
+ */
+export const isBorderRadiusTokenType = (input) => {
+  return typeof input === 'string' && input in BorderRadius;
+};
+/**
+ * If the input is a string and it's in the Colors array, then it's a ColorsTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link ColorsTokenType}
+ */
+export const isColorTokenType = (input) => {
+  return typeof input === 'string' && Colors.includes(input);
+};
+/**
+ * It returns true if the input is a string that starts with 'border-color-' and is a valid color token type.
+ *
+ * @param {unknown} input - The value to be tested.
+ * @returns {boolean} indicating if the input is {@link BorderColorsTokenType}
+ */
+export const isBorderColorTokenType = (input) => {
+  return isColorTokenType(input) && /^border-color-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Borders array, then it's a BordersTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link BordersTokenType}
+ */
+export const isBorderTokenType = (input) => {
+  return typeof input === 'string' && Borders.includes(input);
+};
+/**
+ * It returns true if the input is a string that starts with `bg-` and is a valid color token type.
+ *
+ * @param {unknown} input - The value to be tested.
+ * @returns {boolean} indicating if the input is {@link BackgroundColorsTokenType}
+ */
+export const isBackgroundColorTokenType = (input) => {
+  return isColorTokenType(input) && /^bg-.+$/.test(input);
+};
+/**
+ * This function returns true if the input is a string that starts with 'text-' and is a valid color token type.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is {@link TextColorsTokenType}
+ */
+export const isTextColorTokenType = (input) => {
+  return isColorTokenType(input) && /^text-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Shadows array, then it's a ShadowsTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that will be checked.
+ * @returns {boolean} indicating if the input is {@link ShadowsTokenType}
+ */
+export const isShadowsTokenType = (input) => {
+  return typeof input === 'string' && Shadows.includes(input);
+};
+/**
+ * If the input is a number, it must be between 1 and 12. If the input is a string, it must be in the
+ * format of '1-auto' to '12-auto'.
+ *
+ * @param {unknown} input - The input to be tested.
+ * @returns {boolean} indicating if the input is {@link GridColumnsType}
+ */
+export const isGridColumnsType = (input) => {
+  return ((typeof input === 'string' || typeof input === 'number') && GridColumnsRegex.test(input.toString()));
+};
+/**
+ * If the input is a number, it must be between 1 and 12. If the input is a string, it must be in the
+ * format of '1-auto' to '12-auto'.
+ *
+ * @param {unknown} input - The input to be tested.
+ * @returns {boolean} indicating if the input is {@link GridRowsType}
+ */
+export const isGridRowsType = (input) => {
+  return (typeof input === 'string' || typeof input === 'number') && GridRowsRegex.test(input.toString());
+};
+/**
+ * If the input is a string, and that string is a key in the Breakpoints object, then the input is a GridRowType.
+ *
+ * @param {unknown} input - The value that is being checked.
+ * @returns {boolean} indicating if the input is {@link BreakpointsTokenType}
+ */
+export const isBreakpointsForPrefixType = (input) => {
+  return Object.keys(Breakpoints).includes(input);
+};
+/**
+ * If the input is an object with a number property named X and a number property named Y, then it's a TranslocationType.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} indicating if the input is {@link TranslocationType}
+ */
+export const isTranslocationType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    (typeof input['X'] === 'number' ||
+      ['start', 'center', 'end'].includes(input['X'])) &&
+    (typeof input['Y'] === 'number' ||
+      ['start', 'center', 'end'].includes(input['Y'])));
+};
+/**
+ * "If the input is an object with a `groupId` property that is a string, and an `element` property that is an object with
+ * a `tagName` property that is `'VEGA-ACCORDION'`, then return true, otherwise return false."
+ *
+ * The above function is a type guard. It's a function that takes an input of type `unknown` and returns a boolean. If the
+ * input is of the type we're looking for, then the function returns `true`, otherwise it returns `false`
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} indicating if the input is {@link AccordionObserverPayload}
+ */
+export const isAccordionObserverPayload = (input) => {
+  return (typeof input['groupId'] === 'string' &&
+    input['element'] &&
+    input['element']['tagName'] === 'VEGA-ACCORDION');
+};
+/**
+ * If the input is a string and it's in the list of FlexDirections, then it's a FlexDirectionType.
+ *
+ * @param {unknown} input - unknown - This is the input that we want to check.
+ * @returns {boolean} A function that takes an unknown input and returns a boolean.
+ */
+export const isFlexDirectionType = (input) => {
+  return typeof input === 'string' && FlexDirections.includes(input);
+};
+/**
+ * This TypeScript function checks if an input is a valid FlexAlignItemType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+ * value. The function is checking if the input is a string and if it is included in the FlexAlignItem
+ * array. If both conditions are true, it returns true, indicating that the input is of type
+ * FlexAlignItemType
+ * @returns {boolean} The function `isFlexAlignItemType` is returning a boolean value. It checks if the `input`
+ * parameter is a string and if it is included in the `FlexAlignItem` array. If both conditions are
+ * true, it returns `true`, indicating that the `input` is of type `FlexAlignItemType`. Otherwise, it
+ * returns `false`.
+ */
+export const isFlexAlignItemType = (input) => {
+  return typeof input === 'string' && FlexAlignItem.includes(input);
+};
+/**
+ * This TypeScript function checks if an input is a valid FlexJustifyContentType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+ * value. The function is checking if the input is a string and if it is one of the values in the
+ * FlexJustifyContent array.
+ * @returns {boolean} A boolean value. The function checks if the input is a string and if it is included in the
+ * `FlexJustifyContent` array, and returns `true` if both conditions are met, indicating that the input
+ * is of type `FlexJustifyContentType`. If either condition is not met, the function returns `false`.
+ */
+export const isFlexJustifyContentType = (input) => {
+  return typeof input === 'string' && FlexJustifyContent.includes(input);
+};
+/**
+ * The function `isFlexWrapType` checks if the input is a valid `FlexWrapType` string.
+ *
+ * @param {unknown} input - The `input` parameter in the `isFlexWrapType` function is of type
+ * `unknown`, which means it can be any type of value. The function checks if the input is a string and
+ * if it is included in the `FlexWrap` array.
+ * @returns {boolean} The `isFlexWrapType` function is returning a boolean value. It checks if the `input` is a
+ * string and if it is included in the `FlexWrap` array, which contains valid `FlexWrapType` values. If
+ * both conditions are met, the function returns `true`, indicating that the `input` is of type
+ * `FlexWrapType`. Otherwise, it returns `false`.
+ */
+export const isFlexWrapType = (input) => {
+  return typeof input === 'string' && FlexWrap.includes(input);
+};
+/**
+ * The function `isTextAlignType` checks if the input is a valid `TextAlignType` string.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type
+ * of value.
+ * @returns {boolean} The `isTextAlignType` function is returning a boolean value. It checks if the `input` is a
+ * string and if it is included in the `TextAlign` array, which presumably contains valid
+ * `TextAlignType` values. If both conditions are met, the function returns `true`, indicating that the
+ * `input` is of type `TextAlignType`. Otherwise, it returns `false
+ */
+export const isTextAlignType = (input) => {
+  return typeof input === 'string' && TextAlign.includes(input);
+};
+/**
+ * It takes an array of unknowns and a type guard function, and returns a type guard function that
+ * returns true if the input is an array of the type that the type guard function guards
+ *
+ * @param {unknown} input - unknown - the input to check
+ * @param {Function} itemTypeGuard - (item: unknown) => item is T
+ * @returns {boolean} A function that takes two arguments, input and itemTypeGuard.
+ */
+export const isArrayOfType = (input, itemTypeGuard) => {
+  return Array.isArray(input) && input.every(itemTypeGuard);
+};
+/**
+ * If the input is an object with a label and key property, then it's a DropdownSourceItem.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} A function that takes in an unknown input and returns a boolean.
+ */
+export const isDropdownSourceItemType = (input) => {
+  return (typeof input === 'object' &&
+    Object.prototype.hasOwnProperty.call(input, 'label') &&
+    Object.prototype.hasOwnProperty.call(input, 'key'));
+};
+/**
+ * If the input is an object with an id and displayName property, then it's a SelectSourceItem.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} A function that takes an input and returns a boolean.
+ */
+export const isSelectSourceItemType = (input) => {
+  return (typeof input === 'object' &&
+    Object.prototype.hasOwnProperty.call(input, 'id') &&
+    Object.prototype.hasOwnProperty.call(input, 'displayName'));
+};
+/**
+ * The function `isBoxDisplayType` checks if the input is a valid BoxDisplayType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+ * @returns {boolean} a boolean value.
+ */
+export const isBoxDisplayType = (input) => {
+  return typeof input === 'string' && BoxDisplay.includes(input);
+};
+/**
+ * Check if the input is not null and undefined
+ *
+ * @param {Nullable} input - the value
+ * @returns {boolean} return true if the input is not null and undefined
+ */
+export const isNonNullable = (input) => {
+  return input !== null && input !== undefined;
+};
+/**
+ * The function `isTypographyTokenType` checks if the input is a string and if it is one of the predefined TypographyTokenType values.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+ * @returns {boolean} a boolean value.
+ */
+export const isTypographyTokenType = (input) => {
+  return typeof input === 'string' && TypographyKeys.includes(input);
+};
+/**
+ * The function `isBorderStyleType` checks if the input is a valid BorderStyleType string.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type
+ * of value. The `isBorderStyleType` function is a type guard function that checks if the `input` is of
+ * type `BorderStyleType`.
+ * @returns {boolean} The `isBorderStyleType` function is returning a boolean value. It checks if the `input` is
+ * of type `BorderStyleType` by verifying if it is a string and if it is included in the `BorderStyle`
+ * array. If the condition is met, it returns `true`, indicating that the `input` is of type
+ * `BorderStyleType`. Otherwise, it returns `false`.
+ */
+export const isBorderStyleType = (input) => {
+  return typeof input === 'string' && BorderStyle.includes(input);
+};
+/**
+ * The function `isBorderRadiusDirectionType` checks if the input is a valid `BorderRadiusDirection` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isBorderRadiusDirectionType` function is of
+ * type `unknown`, which means it can be any type of value. The function checks if the input is a
+ * string and if it matches one of the specified values in the array ['top', 'left', 'right
+ * @returns {boolean} The function `isBorderRadiusDirectionType` is returning a boolean value indicating whether
+ * the `input` is of type `BorderRadiusDirection` or not.
+ */
+export const isBorderRadiusDirectionType = (input) => {
+  return (typeof input === 'string' &&
+    ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(input));
+};
+/**
+ * The function `isDirectionalBorderRadiusType` checks if the input object conforms to the
+ * `DirectionalBorderRadiusType` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isDirectionalBorderRadiusType` function is of
+ * type `unknown`, which means it can be any type of value. The function is checking if the input is a
+ * valid `DirectionalBorderRadiusType` by verifying that it is an object, not null,
+ * @returns {boolean} The function `isDirectionalBorderRadiusType` is returning a boolean value.
+ */
+export const isDirectionalBorderRadiusType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isBorderRadiusDirectionType) &&
+    Object.values(input).every((value) => value in BorderRadius));
+};
+/**
+ * The function `isStateVariantTokenType` checks if the input is an object with keys that are all of
+ * type `CssStatesType`.
+ *
+ * @param {unknown} input - The `input` parameter is a value of type `unknown`, which means it can be
+ * any type of value in TypeScript.
+ * @returns {boolean} The `isStateVariantTokenType` function is returning a boolean value. It checks if the
+ * `input` is an object that is not null and if all the keys of the object pass the `isCssStateType`
+ * check. If these conditions are met, it returns `true`, indicating that the `input` is of type
+ * `StateVariantType<T, CssStatesType>`. Otherwise, it
+ */
+export const isStateVariantTokenType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isCssStateType);
+};
+/**
+ * The function `isCssStateType` checks if the input is a valid CSS state type by verifying if it is a
+ * string and included in a predefined list of CSS states.
+ *
+ * @param {CssStatesType} input - The `input` parameter in the `isCssStateType` function is of type
+ * `CssStatesType`.
+ * @returns {boolean} The function `isCssStateType` is returning a boolean value.
+ */
+export const isCssStateType = (input) => {
+  return typeof input === 'string' && CssStates.includes(input);
+};

package/dist/collection/types/ui.type.js

@@ -0,0 +1,6 @@
+export var DeviceType;
+(function (DeviceType) {
+  DeviceType["TABLET"] = "tablet";
+  DeviceType["MOBILE"] = "mobile";
+  DeviceType["DESKTOP"] = "desktop";
+})(DeviceType || (DeviceType = {}));

package/dist/collection/utils/accessibility.js

@@ -0,0 +1,13 @@
+/**
+ * It returns a function that takes a KeyboardEvent and dispatches a click event on the currentTarget if the key is Enter.
+ *
+ * @returns {(e: KeyboardEvent) => void } A function that takes a KeyboardEvent and dispatches a click event on the currentTarget.
+ */
+export function createEnterKeyHandlerToTriggerClick() {
+  return function (e) {
+    var _a;
+    if (e.key === 'Enter') {
+      (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+    }
+  };
+}

package/dist/collection/utils/api.js

@@ -0,0 +1,60 @@
+/**
+ *  It takes a URL, a method, and a body, and returns a promise that resolves to a JSON object
+ */
+export class ApiUtil {
+  /**
+   * It returns a promise that resolves to a JSON object of type T
+   *
+   * @param {string} url - The url to make the request to.
+   * @param {HeadersInit} headers - HeadersInit
+   * @returns {Promise}A promise of type T
+   */
+  static async get(url, headers) {
+    return await ApiUtil.getResponseInJSON(url, 'GET', headers, undefined);
+  }
+  /**
+   * It takes a URL, a method, some headers, and some data, and returns a promise that resolves to the
+   * response in JSON format
+   *
+   * @param {string} url - The URL to make the request to.
+   * @param {unknown} data - The data to send to the server.
+   * @param {HeadersInit} headers - HeadersInit
+   * @returns {Promise} A promise that resolves to the response in JSON format.
+   */
+  static async post(url, data, headers) {
+    return await ApiUtil.getResponseInJSON(url, 'POST', headers, JSON.stringify(data));
+  }
+  /**
+   * It takes a URL, a method, a set of headers, and an optional body, and returns a promise that
+   * resolves to a JSON object
+   *
+   * @param {string} url - The URL to send the request to.
+   * @param {string} method - The HTTP method to use.
+   * @param {HeadersInit} headers - HeadersInit - This is the headers that will be sent with the
+   * request.
+   * @param {string} [body] - The body of the request.
+   * @returns {Promise} A promise that resolves to a JSON object.
+   */
+  static async getResponseInJSON(url, method, headers, body) {
+    if (headers) {
+      headers['Content-Type'] = 'application/json';
+    }
+    else {
+      headers = {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+      };
+    }
+    try {
+      const response = await fetch(url, {
+        method,
+        body,
+        headers,
+      });
+      return response.json();
+    }
+    catch (e) {
+      throw new Error(JSON.stringify({}));
+    }
+  }
+}

package/dist/collection/utils/array.js

@@ -0,0 +1,177 @@
+import { convertToNumber } from './number';
+/**
+ * It flattens an array of objects
+ *
+ * @typedef T generic type  parameter
+ * @param {T[]} arr - The array to be flattened.
+ * @param {string} [children=children] - The name of the key that contains the children.
+ * @returns {T[]}An array of all the children of the array of items.
+ */
+export const flattenChildren = (arr, children = 'children') => {
+  return arr.reduce((result, item) => result.concat(item[children] ? flattenChildren(item[children], children) : item), []);
+};
+/**
+ * The function checks if two arrays are equal, either in order or ignoring order.
+ *
+ * @param {T[]} first - An array of type T, which is the first array to compare.
+ * @param {T[]} second - `second` is the second array that is being compared for equality with the
+ * first array (`first`).
+ * @param {boolean} [ignoreOrder=false] - The `ignoreOrder` parameter is a boolean flag that determines
+ * whether the order of elements in the arrays should be taken into account when comparing them. If
+ * `ignoreOrder` is set to `true`, the function will return `true` if the two arrays contain the same
+ * elements, regardless of their order
+ * @returns {boolean} The function `isArrayEqual` returns a boolean value indicating whether the two input arrays
+ * are equal or not. If the arrays are equal, it returns `true`, otherwise it returns `false`. The
+ * equality of the arrays can be determined either by comparing the elements in the same order or by
+ * ignoring the order of the elements.
+ */
+export const isArrayEqual = (first, second, ignoreOrder = false) => {
+  if (!Array.isArray(first) || !Array.isArray(second) || first.length != second.length)
+    return false;
+  if (ignoreOrder) {
+    const firstSet = new Set(first);
+    const secondSet = new Set(second);
+    return first.every((item) => secondSet.has(item)) && second.every((item) => firstSet.has(item));
+  }
+  else {
+    for (let i = 0; i < first.length; i++) {
+      if (first[i] !== second[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+};
+/**
+ * Return true if all the keys of the object are numbers since it's an array-like object, false otherwise.
+ *
+ * @param {Record<string, unknown>} obj - The object to check.
+ * @returns {boolean} boolean indicating if the object is array-like
+ */
+export const isObjectArrayLike = (obj) => {
+  return Object.keys(obj).every((key) => !isNaN(convertToNumber(key)));
+};
+/**
+ * Return the longest text length In a string array
+ *
+ * @param {string[]} textArray string array
+ * @returns {number} text length
+ */
+export function getLongestTextLengthFromArray(textArray) {
+  let length = 0;
+  textArray.forEach((text) => {
+    length = text && text.length > length ? text.length : length;
+  });
+  return length;
+}
+/**
+ * Convert the single array to nested array base on the lengths of sub-arrays provided, will return the self array if length array not provided
+ *
+ * @example
+ * // return [[1,2],[3,4,5,6]]
+ * revertArrayFromFlatArray([1,2,3,4,5,6],[2,4])
+ * @example
+ * // return [1,2,3,4,5,6]
+ * revertArrayFromFlatArray([1,2,3,4,5,6],[])
+ * @param {T[]} flatArr - an array of elements that have been flattened into a single array.
+ * @param {T[]} lengthArr - `lengthArr` is an array of numbers that specifies the length of each sub-array that the `flatArr`
+ * @returns {T[]|T[][]} The function `revertArrayFromFlatArray` returns either a single-dimensional array of type `T[]` or a two-dimensional array of type `T[][]`
+ */
+export function convertArrayToNestedArray(flatArr, lengthArr) {
+  if (lengthArr.length) {
+    const result = [];
+    lengthArr.reduce((startIndex, length) => {
+      result.push(flatArr.slice(startIndex, startIndex + length));
+      return startIndex + length;
+    }, 0);
+    return result;
+  }
+  return flatArr;
+}
+/**
+ * Convert nested array to simple array. the array only handle the directly children array
+ *
+ * @param {T[] | T[][]} arr the array data source
+ * @returns {T[]} result simple array
+ */
+export function flatNestedArray(arr) {
+  if (arr && Array.isArray(arr[0])) {
+    return arr.reduce((result, item) => {
+      return result.concat(item);
+    }, []);
+  }
+  return arr;
+}
+/**
+ * sort number object array by given property, and the given property must be a number
+ *
+ * @param {T[] | T[][]} data data source
+ * @param {(data: T) => number} sortBy the object item used to sort by
+ * @returns {T[] | T[][]} result array
+ */
+export function sortArrayOrNestedArray(data, sortBy) {
+  let result = data;
+  if (Array.isArray(data[0])) {
+    result = data.map((item) => {
+      item.sort((d1, d2) => sortBy(d1) - sortBy(d2));
+      return item;
+    });
+  }
+  else {
+    result.sort((d1, d2) => sortBy(d1) - sortBy(d2));
+  }
+  return result;
+}
+/**
+ * This function sorts an array or nested array based on a provided accessor function and an existing array of strings.
+ *
+ * @param {unknown[] | unknown[][]} needSortArray - The array or nested array that needs to be sorted.
+ * @param {(item: T) => string} [accessor] - The accessor parameter is an optional function that takes an item from the
+ * needSortArray and returns a string value that will be used for sorting. If not provided, the
+ * function assumes that the items in the array are already strings.
+ * @param {(item:string,nextItem:string)=>number} [existArraySorter] - the sort function for the exist array
+ * @param {string[]} [existArray] - The `existArray` parameter is an optional array of strings that
+ * represents the desired order of the elements in the `needSortArray`. If provided, the function will
+ * sort the elements in `needSortArray` based on their position in `existArray`. If not provided, the default exist array will use the default order of the array
+ * @returns {unknown[] | unknown[][]} The function `sortAsExistArray` returns a sorted array or nested array of type `T[] |
+ * T[][]`. The sorting is based on the order of elements in the `existArray` parameter, or if
+ * `existArray` is not provided, it is based on the order of appearance of elements in the input array
+ * or nested array. The sorting is done using the `sortArrayOrNested
+ */
+export function sortAsExistArray(needSortArray, accessor, existArraySorter, existArray) {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const newAccessor = (item) => typeof accessor === 'function' ? accessor(item) : item;
+  existArray = existArray
+    ? existArray
+    : Array.from(new Set(flatNestedArray(needSortArray).map(newAccessor)));
+  const sorterArray = typeof existArraySorter === 'function' ? existArray.sort(existArraySorter) : existArray;
+  const orderMap = sorterArray.reduce((result, text, index) => {
+    result[text] = index;
+    return result;
+  }, {});
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const orderBy = (item) => orderMap[newAccessor(item)];
+  return sortArrayOrNestedArray(needSortArray, orderBy);
+}
+/**
+ * The function `findNodeList` iterates through a NodeList and returns the first node that satisfies a
+ * given callback function.
+ *
+ * @param {NodeList} nodeList - NodeList is an array-like object that represents a collection of nodes.
+ * It is typically returned by methods like `querySelectorAll` or `childNodes` in the DOM API. Each
+ * element in the NodeList is a Node object.
+ * @param {(node: Node) => boolean }callBack - The `callBack` parameter is a function that takes a `Node` as an argument and
+ * returns a boolean value. It is used to filter and find a specific node within the `NodeList` based
+ * on certain criteria defined in the callback function.
+ * @returns {Node | undefined} The `findNodeList` function returns a `Node` object if the `callBack` function returns
+ * `true` for any node in the `nodeList`. If none of the nodes satisfy the condition, it returns
+ * `undefined`.
+ */
+export function findNodeList(nodeList, callBack) {
+  for (let index = 0; index < nodeList.length; index++) {
+    const node = nodeList[index];
+    if (callBack(node))
+      return node;
+  }
+  return undefined;
+}