@itfin/components 1.3.95 → 2.0.1

package/src/helpers/tree/domFinds.js

@@ -0,0 +1,20 @@
+/**
+ * 前端找尋多DOM元素
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domFinds.test.js Github}
+ * @memberOf wsemi
+ * @param {String} query 輸入查詢字串
+ * @returns {Array} 回傳DOM元素陣列
+ * @example
+ * need test in browser
+ *
+ * let eles = domFinds('[name="abc"]')
+ *
+ */
+function domFinds(query) {
+    let r = document.querySelectorAll(query)
+    return r
+}
+
+
+export default domFinds

package/src/helpers/tree/domGetPointFromEvent.js

@@ -0,0 +1,53 @@
+import size from 'lodash/size'
+import get from 'lodash/get'
+
+
+/**
+ * 前端DOM元素事件取得使用者滑鼠或第一觸控點座標
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domGetPointFromEvent.test.js Github}
+ * @memberOf wsemi
+ * @param {HTEMLEvent} e 輸入dom事件物件
+ * @example
+ * need test in browser
+ *
+ * window.addEventListener('mousemove', (e) => {
+ *   console.log(domGetPointFromEvent(e))
+ * })
+ *
+ */
+function domGetPointFromEvent(e) {
+
+    //check
+    let cx = get(e, 'clientX', null)
+    let cy = get(e, 'clientY', null)
+    let px = get(e, 'pageX', null)
+    let py = get(e, 'pageY', null)
+    if (cx !== null && cy !== null && px !== null && py !== null) {
+        return {
+            clientX: cx,
+            clientY: cy,
+            pageX: px,
+            pageY: py,
+        }
+    }
+
+    //check
+    let touches = get(e, 'changedTouches', []) //touchend時touches長度為0, 故需改用changedTouches
+    if (size(touches) !== 1) {
+        return null
+    }
+
+    //p
+    let p = touches[0]
+
+    return {
+        clientX: get(p, 'clientX', null),
+        clientY: get(p, 'clientY', null),
+        pageX: get(p, 'pageX', null),
+        pageY: get(p, 'pageY', null),
+    }
+}
+
+
+export default domGetPointFromEvent

package/src/helpers/tree/domIsClientXYIn.js

@@ -0,0 +1,65 @@
+import isNumber from 'lodash/isNumber'
+import isEle from './isEle.js'
+
+
+/**
+ * 前端計算clientX與clientY是否位於DOM元素內
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domIsClientXYIn.test.js Github}
+ * @memberOf wsemi
+ * @param {Number} clientX 輸入點的clientX座標
+ * @param {Number} clientY 輸入點的clientY座標
+ * @param {HTMLElement} ele 輸入元素
+ * @returns {Boolean} 回傳是否位於DOM元素內布林值
+ * @example
+ * need test in browser
+ *
+ * let p = {
+ *     clientX: 'from event',
+ *     clientY: 'from event',
+ * }
+ * let ele = document.querySelector('#id')
+ * let b = domIsClientXYIn(p.clientX, p.clientY, ele)
+ * // => true or false
+ *
+ */
+function domIsClientXYIn(clientX, clientY, ele) {
+
+    //check
+    if (!isNumber(clientX)) {
+        console.log('clientX is not Number', clientX)
+        return
+    }
+    if (!isNumber(clientY)) {
+        console.log('clientY is not Number', clientY)
+        return
+    }
+    if (!isEle(ele)) {
+        console.log('ele is not HTMLElement', ele)
+        return
+    }
+
+    //calc rt
+    let rt
+    try {
+        rt = ele.getBoundingClientRect()
+    }
+    catch (err) {
+        console.log('invalid ele for getBoundingClientRect', err)
+        return
+    }
+
+    //r
+    let r = false
+    try {
+        r = clientX >= rt.left && clientX <= rt.right && clientY >= rt.top && clientY <= rt.bottom
+    }
+    catch (err) {
+        console.log('catch when calculating page information of element', err)
+    }
+
+    return r
+}
+
+
+export default domIsClientXYIn

package/src/helpers/tree/domRemove.js

@@ -0,0 +1,50 @@
+import each from 'lodash/each'
+import isEle from './isEle.js'
+import isestr from './isestr.js'
+import domFinds from './domFinds.js'
+
+
+/**
+ * 前端找尋DOM元素並刪除
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/domRemove.test.js Github}
+ * @memberOf wsemi
+ * @param {String|HTMLElement} inp 輸入查詢字串或dom函數
+ * @example
+ * need test in browser
+ *
+ * let ele = document.querySelector('#id')
+ * domRemove(ele)
+ *
+ */
+function domRemove(inp) {
+
+    function remove(ele) {
+        ele.parentNode.removeChild(ele)
+    }
+
+    //isEle
+    if (isEle(inp)) {
+        let ele = inp
+        remove(ele)
+        return
+    }
+
+    //query
+    if (!isestr(inp)) {
+        return
+    }
+    let query = inp
+
+    //find
+    let rs = domFinds(query)
+
+    //remove
+    each(rs, function(ele) {
+        remove(ele)
+    })
+
+}
+
+
+export default domRemove

package/src/helpers/tree/evem.js

@@ -0,0 +1,27 @@
+import EventEmitter from 'eventemitter3'
+
+
+/**
+ * EventEmitter from eventemitter3
+ *
+ * See: {@link https://github.com/primus/eventemitter3 eventemitter3}
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/evem.test.js Github}
+ * @memberOf wsemi
+ * @example
+ *
+ * let ev = wsemi.evem()
+ * ev.on('evName',function(msg){
+ *     console.log(msg)
+ *     // => {abc: 12.34}
+ * })
+ * let data = {abc:12.34}
+ * ev.emit('evName',data)
+ *
+ */
+function evem() {
+    return new EventEmitter()
+}
+
+
+export default evem

package/src/helpers/tree/genID.js

@@ -0,0 +1,56 @@
+import ispint from './ispint.js'
+import cint from './cint.js'
+
+
+let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+let radix = chars.length
+
+/**
+ * 產生隨機id
+ *
+ * Depend on: {@link https://gist.github.com/Wind4/3baa40b26b89b686e4f2 Math.uuid.js}
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/genID.test.js Github}
+ * @memberOf wsemi
+ * @param {Integer} [len=32] 輸入uuid長度，為正整數，預設32
+ * @returns {String} 回傳uuid字串
+ * @example
+ *
+ * console.log(genID())
+ * // => Is1NyImU3A9fyqFyYBWuJu4ivXXcGZAb (is random)
+ *
+ */
+function genID(len = 32) {
+    let uuid = []
+
+    //check
+    if (ispint(len)) {
+        len = cint(len)
+    }
+    else {
+        len = 32
+    }
+
+    //uuid
+    for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
+
+    //rfc4122, version 4 form
+    // //requires these characters
+    // uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+    // uuid[14] = '4'
+    // //fill in random data.  At i==19 set the high bits of clock sequence as per rfc4122, sec. 4.1.5
+    // let r
+    // for (i = 0; i < 36; i++) {
+    //     if (!uuid[i]) {
+    //         r = 0 | Math.random() * 16
+    //         uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
+    //     }
+    // }
+
+    let r = uuid.join('')
+
+    return r
+}
+
+
+export default genID

package/src/helpers/tree/isEle.js

@@ -0,0 +1,28 @@
+import isElement from 'lodash/isElement'
+
+
+/**
+ * 前端判斷元素是否存在
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isEle.test.js Github}
+ * @memberOf wsemi
+ * @param {Element} ele 輸入DOM元素
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ * need test in browser
+ *
+ * let ele = document.querySelector('#id')
+ * console.log(isEle(ele))
+ * // => true or false
+ *
+ */
+function isEle(ele) {
+    return isElement(ele)
+    // return (
+    //     typeof HTMLElement === 'object' ? ele instanceof HTMLElement
+    //         : ele && typeof ele === 'object' && ele !== null && ele.nodeType === 1 && typeof ele.nodeName === 'string'
+    // )
+}
+
+
+export default isEle

package/src/helpers/tree/isestr.js

@@ -0,0 +1,35 @@
+import isstr from './isstr.js'
+
+
+/**
+ * 判斷是否為有效字串
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isestr.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(isestr('1.25'))
+ * // => true
+ *
+ * console.log(isestr(125))
+ * // => false
+ *
+ * console.log(isestr(''))
+ * // => false
+ *
+ */
+function isestr(v) {
+
+  //check
+  if (isstr(v)) {
+    if (v !== '') {
+      return true
+    }
+  }
+  return false
+}
+
+
+export default isestr

package/src/helpers/tree/isint.js

@@ -0,0 +1,40 @@
+import isInteger from 'lodash/isInteger'
+import isnum from './isnum.js'
+import cdbl from './cdbl.js'
+
+
+/**
+ * 判斷是否為整數
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isint.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(isint('1.25'))
+ * // => false
+ *
+ * console.log(isint('125'))
+ * // => true
+ *
+ * console.log(isint(1.25))
+ * // => false
+ *
+ * console.log(isint(125))
+ * // => true
+ *
+ */
+function isint(v) {
+
+    if (isnum(v)) {
+        v = cdbl(v)
+        return isInteger(v)
+    }
+    else {
+        return false
+    }
+}
+
+
+export default isint

package/src/helpers/tree/isnbr.js

@@ -0,0 +1,24 @@
+/**
+ * 判斷是否為數字
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isnbr.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(isnbr(1.25))
+ * // => true
+ *
+ * console.log(isnbr('1.25'))
+ * // => false
+ *
+ */
+function isnbr(v) {
+
+  let c = Object.prototype.toString.call(v)
+  return c === '[object Number]'
+}
+
+
+export default isnbr

package/src/helpers/tree/isnum.js

@@ -0,0 +1,38 @@
+import isestr from './isestr.js'
+import isnbr from './isnbr.js'
+
+
+/**
+ * 判斷是否為數字
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isnum.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(isnum(0))
+ * // => true
+ *
+ * console.log(isnum(1.25))
+ * // => true
+ *
+ * console.log(isnum('-125'))
+ * // => true
+ *
+ */
+function isnum(v) {
+
+  let b = false
+  if (isestr(v)) {
+    b = !isNaN(Number(v))
+  }
+  else if (isnbr(v)) {
+    b = true
+  }
+
+  return b
+}
+
+
+export default isnum

package/src/helpers/tree/ispint.js

@@ -0,0 +1,41 @@
+import isint from './isint.js'
+import cint from './cint.js'
+
+
+/**
+ * 判斷是否為正整數
+ * 正整數不包含0，為大於0的整數
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/ispint.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(ispint(0))
+ * // => false
+ *
+ * console.log(ispint(125))
+ * // => true
+ *
+ * console.log(ispint('125'))
+ * // => true
+ *
+ * console.log(ispint(1.25))
+ * // => false
+ *
+ */
+function ispint(v) {
+
+    //check
+    if (!isint(v)) {
+        return false
+    }
+
+    let r = cint(v) > 0
+
+    return r
+}
+
+
+export default ispint

package/src/helpers/tree/isstr.js

@@ -0,0 +1,27 @@
+/**
+ * 判斷是否為字串
+ *
+ * Unit Test: {@link https://github.com/yuda-lyu/wsemi/blob/master/test/isstr.test.js Github}
+ * @memberOf wsemi
+ * @param {*} v 輸入任意資料
+ * @returns {Boolean} 回傳判斷布林值
+ * @example
+ *
+ * console.log(isstr(0))
+ * // => false
+ *
+ * console.log(isstr('0'))
+ * // => true
+ *
+ * console.log(isstr(''))
+ * // => true
+ *
+ */
+function isstr(v) {
+
+  let c = Object.prototype.toString.call(v)
+  return c === '[object String]'
+}
+
+
+export default isstr

package/src/helpers/tree.js

@@ -0,0 +1,30 @@
+export
+function flattenTree (items, spaces = 4, level = 0, parentNode = null, path = [], childrenKey = 'Children') {
+  return items.reduce((acc, val, index) => acc.concat({
+    ...val,
+    path: [...path, childrenKey, index],
+    parentNode,
+    level,
+    levelPrefix: String.fromCharCode(0xA0).repeat(level * spaces)
+  }, ...flattenTree(val[childrenKey] || [], spaces, level + 1, val, [...path, childrenKey, index])), []);
+}
+
+export
+function buildTree (items, idKey = 'id', parentKey = 'parentId', childrenKey = 'Children') {
+
+  const buildNode = (items, id, parent) => items
+    .filter(item => item[parentKey] === parent)
+    .map(item => ({ ...item, [childrenKey]: buildNode(items, item[idKey], item[idKey]) }));
+
+  return buildNode(items);
+}
+
+export
+function removeNode (tree, compareFn, childrenKey = 'Children') {
+  return tree.reduce((acc, val) => {
+    if (compareFn(val)) {
+      return acc;
+    }
+    return acc.concat({ ...val, [childrenKey]: removeNode(val[childrenKey] || [], compareFn) });
+  }, []);
+}

package/src/helpers/vuetifyColor.js

@@ -0,0 +1,136 @@
+import camelCase from 'lodash/camelCase';
+import get from 'lodash/get';
+
+const colors = {
+  red: { base: '#f44336', lighten5: '#ffebee', lighten4: '#ffcdd2', lighten3: '#ef9a9a', lighten2: '#e57373', lighten1: '#ef5350', darken1: '#e53935', darken2: '#d32f2f', darken3: '#c62828', darken4: '#b71c1c', accent1: '#ff8a80', accent2: '#ff5252', accent3: '#ff1744', accent4: '#d50000' },
+  pink: { base: '#e91e63', lighten5: '#fce4ec', lighten4: '#f8bbd0', lighten3: '#f48fb1', lighten2: '#f06292', lighten1: '#ec407a', darken1: '#d81b60', darken2: '#c2185b', darken3: '#ad1457', darken4: '#880e4f', accent1: '#ff80ab', accent2: '#ff4081', accent3: '#f50057', accent4: '#c51162' },
+  purple: { base: '#9c27b0', lighten5: '#f3e5f5', lighten4: '#e1bee7', lighten3: '#ce93d8', lighten2: '#ba68c8', lighten1: '#ab47bc', darken1: '#8e24aa', darken2: '#7b1fa2', darken3: '#6a1b9a', darken4: '#4a148c', accent1: '#ea80fc', accent2: '#e040fb', accent3: '#d500f9', accent4: '#aa00ff' },
+  deepPurple: { base: '#673ab7', lighten5: '#ede7f6', lighten4: '#d1c4e9', lighten3: '#b39ddb', lighten2: '#9575cd', lighten1: '#7e57c2', darken1: '#5e35b1', darken2: '#512da8', darken3: '#4527a0', darken4: '#311b92', accent1: '#b388ff', accent2: '#7c4dff', accent3: '#651fff', accent4: '#6200ea' },
+  indigo: { base: '#3f51b5', lighten5: '#e8eaf6', lighten4: '#c5cae9', lighten3: '#9fa8da', lighten2: '#7986cb', lighten1: '#5c6bc0', darken1: '#3949ab', darken2: '#303f9f', darken3: '#283593', darken4: '#1a237e', accent1: '#8c9eff', accent2: '#536dfe', accent3: '#3d5afe', accent4: '#304ffe' },
+  blue: { base: '#2196f3', lighten5: '#e3f2fd', lighten4: '#bbdefb', lighten3: '#90caf9', lighten2: '#64b5f6', lighten1: '#42a5f5', darken1: '#1e88e5', darken2: '#1976d2', darken3: '#1565c0', darken4: '#0d47a1', accent1: '#82b1ff', accent2: '#448aff', accent3: '#2979ff', accent4: '#2962ff' },
+  lightBlue: { base: '#03a9f4', lighten5: '#e1f5fe', lighten4: '#b3e5fc', lighten3: '#81d4fa', lighten2: '#4fc3f7', lighten1: '#29b6f6', darken1: '#039be5', darken2: '#0288d1', darken3: '#0277bd', darken4: '#01579b', accent1: '#80d8ff', accent2: '#40c4ff', accent3: '#00b0ff', accent4: '#0091ea' },
+  cyan: { base: '#00bcd4', lighten5: '#e0f7fa', lighten4: '#b2ebf2', lighten3: '#80deea', lighten2: '#4dd0e1', lighten1: '#26c6da', darken1: '#00acc1', darken2: '#0097a7', darken3: '#00838f', darken4: '#006064', accent1: '#84ffff', accent2: '#18ffff', accent3: '#00e5ff', accent4: '#00b8d4' },
+  teal: { base: '#009688', lighten5: '#e0f2f1', lighten4: '#b2dfdb', lighten3: '#80cbc4', lighten2: '#4db6ac', lighten1: '#26a69a', darken1: '#00897b', darken2: '#00796b', darken3: '#00695c', darken4: '#004d40', accent1: '#a7ffeb', accent2: '#64ffda', accent3: '#1de9b6', accent4: '#00bfa5' },
+  green: { base: '#4caf50', lighten5: '#e8f5e9', lighten4: '#c8e6c9', lighten3: '#a5d6a7', lighten2: '#81c784', lighten1: '#66bb6a', darken1: '#43a047', darken2: '#388e3c', darken3: '#2e7d32', darken4: '#1b5e20', accent1: '#b9f6ca', accent2: '#69f0ae', accent3: '#00e676', accent4: '#00c853' },
+  lightGreen: { base: '#8bc34a', lighten5: '#f1f8e9', lighten4: '#dcedc8', lighten3: '#c5e1a5', lighten2: '#aed581', lighten1: '#9ccc65', darken1: '#7cb342', darken2: '#689f38', darken3: '#558b2f', darken4: '#33691e', accent1: '#ccff90', accent2: '#b2ff59', accent3: '#76ff03', accent4: '#64dd17' },
+  lime: { base: '#cddc39', lighten5: '#f9fbe7', lighten4: '#f0f4c3', lighten3: '#e6ee9c', lighten2: '#dce775', lighten1: '#d4e157', darken1: '#c0ca33', darken2: '#afb42b', darken3: '#9e9d24', darken4: '#827717', accent1: '#f4ff81', accent2: '#eeff41', accent3: '#c6ff00', accent4: '#aeea00' },
+  yellow: { base: '#ffeb3b', lighten5: '#fffde7', lighten4: '#fff9c4', lighten3: '#fff59d', lighten2: '#fff176', lighten1: '#ffee58', darken1: '#fdd835', darken2: '#fbc02d', darken3: '#f9a825', darken4: '#f57f17', accent1: '#ffff8d', accent2: '#ffff00', accent3: '#ffea00', accent4: '#ffd600' },
+  amber: { base: '#ffc107', lighten5: '#fff8e1', lighten4: '#ffecb3', lighten3: '#ffe082', lighten2: '#ffd54f', lighten1: '#ffca28', darken1: '#ffb300', darken2: '#ffa000', darken3: '#ff8f00', darken4: '#ff6f00', accent1: '#ffe57f', accent2: '#ffd740', accent3: '#ffc400', accent4: '#ffab00' },
+  orange: { base: '#ff9800', lighten5: '#fff3e0', lighten4: '#ffe0b2', lighten3: '#ffcc80', lighten2: '#ffb74d', lighten1: '#ffa726', darken1: '#fb8c00', darken2: '#f57c00', darken3: '#ef6c00', darken4: '#e65100', accent1: '#ffd180', accent2: '#ffab40', accent3: '#ff9100', accent4: '#ff6d00' },
+  deepOrange: { base: '#ff5722', lighten5: '#fbe9e7', lighten4: '#ffccbc', lighten3: '#ffab91', lighten2: '#ff8a65', lighten1: '#ff7043', darken1: '#f4511e', darken2: '#e64a19', darken3: '#d84315', darken4: '#bf360c', accent1: '#ff9e80', accent2: '#ff6e40', accent3: '#ff3d00', accent4: '#dd2c00' },
+  brown: { base: '#795548', lighten5: '#efebe9', lighten4: '#d7ccc8', lighten3: '#bcaaa4', lighten2: '#a1887f', lighten1: '#8d6e63', darken1: '#6d4c41', darken2: '#5d4037', darken3: '#4e342e', darken4: '#3e2723' },
+  blueGrey: { base: '#607d8b', lighten5: '#eceff1', lighten4: '#cfd8dc', lighten3: '#b0bec5', lighten2: '#90a4ae', lighten1: '#78909c', darken1: '#546e7a', darken2: '#455a64', darken3: '#37474f', darken4: '#263238' },
+  grey: { base: '#9e9e9e', lighten5: '#fafafa', lighten4: '#f5f5f5', lighten3: '#eeeeee', lighten2: '#e0e0e0', lighten1: '#bdbdbd', darken1: '#757575', darken2: '#616161', darken3: '#424242', darken4: '#212121' },
+  shades: { black: '#000000', white: '#ffffff', transparent: 'transparent' }
+};
+
+function getKey0 (c) {
+  // 'blue-grey' => 'blueGrey'
+  let key0 = c.trim();
+  key0 = camelCase(key0);
+  return key0;
+}
+
+function getKey1 (c) {
+  // 'lighten-5' => 'lighten5', null => 'base'
+  if (typeof c !== 'string') {
+    c = 'base';
+  }
+  let key1 = c.trim();
+  key1 = key1.replace('-', '').trim();
+  return key1;
+}
+
+function getHexColor (key0, key1, def) {
+  let hex = get(colors, `${key0}.${key1}`, '');
+  if (hex === null) {
+    hex = def;
+  }
+  return hex;
+}
+
+function color2hex (color) {
+  // speed
+  if (color === 'white') {
+    return '#fff';
+  } else if (color === 'black') {
+    return '#000';
+  } else if (color === 'transparent') {
+    return 'rgba(0,0,0,0)';
+  }
+
+  const cc = color.split(' ');
+
+  // key0, key1
+  const key0 = getKey0(cc[0]);
+  const key1 = getKey1(cc[1]);
+
+  return getHexColor(key0, key1, color);
+}
+
+export default color2hex;
+
+function hexToRGB(hex) {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+  return [r, g, b];
+}
+
+function RGBToHex(rgb) {
+  const r = rgb[0].toString(16).padStart(2, '0');
+  const g = rgb[1].toString(16).padStart(2, '0');
+  const b = rgb[2].toString(16).padStart(2, '0');
+  return '#' + r + g + b;
+}
+
+/**
+ * Calculate new color based on start color and step
+ *
+ * @param startColor - hex color to start with
+ * @param step - step number
+ * @param totalSteps - total number of steps
+ * @param isLighten - if true, will generate lighter color, otherwise darker
+ */
+function calculateNewColor(startColor, step, totalSteps, isLighten) {
+  const startRGB = hexToRGB(startColor);
+  const maxRGB = Math.max(...startRGB);
+
+  const newRGB = [];
+
+  for (let i = 0; i < 3; i++) {
+    let newValue = startRGB[i];
+
+    if (isLighten) {
+      newValue += Math.round((maxRGB - startRGB[i]) * (step / totalSteps));
+    } else {
+      newValue -= Math.round(startRGB[i] * (step / totalSteps));
+    }
+
+    newRGB.push(newValue);
+  }
+
+  return RGBToHex(newRGB);
+}
+
+/**
+ * Generate gradient colors based on start color
+ *
+ * @param startColor - hex color to start with (will be the first color in the array)
+ * @param numColors - number of colors to return
+ * @param isLighten - if true, will generate lighter colors, otherwise darker
+ */
+export function generateGradientColors(startColor, numColors = 5, isLighten = true) {
+  if (!startColor || !numColors) {
+    return [];
+  }
+  const colors = [];
+  colors.push(startColor);
+
+  for (let i = 1; i < numColors; i++) {
+    const newColor = calculateNewColor(startColor, i, numColors, isLighten);
+    colors.push(newColor);
+  }
+
+  return colors;
+}