Lint fix

packages/builder/src/components/userInterface/Colorpicker/drag.js

@@ -1,22 +1,22 @@
 export default function(node) {
-	function handleMouseDown() {
+  function handleMouseDown() {
-		window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener("mousemove", handleMouseMove)
-		window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener("mouseup", handleMouseUp)
-	}
+  }
 
-	function handleMouseMove(event) {
+  function handleMouseMove(event) {
-		let mouseX = event.clientX;
+    let mouseX = event.clientX
-		node.dispatchEvent(
+    node.dispatchEvent(
-			new CustomEvent('drag', {
+      new CustomEvent("drag", {
-				detail: mouseX
+        detail: mouseX,
-			})
+      })
-		);
+    )
-	}
+  }
 
-	function handleMouseUp() {
+  function handleMouseUp() {
-		window.removeEventListener('mousedown', handleMouseDown);
+    window.removeEventListener("mousedown", handleMouseDown)
-		window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener("mousemove", handleMouseMove)
-	}
+  }
 
-	node.addEventListener('mousedown', handleMouseDown);
+  node.addEventListener("mousedown", handleMouseDown)
 }

packages/builder/src/components/userInterface/Colorpicker/helpers.js

@@ -1,14 +1,14 @@
 export const buildStyle = styles => {
-    let str = ""
+  let str = ""
-    for (let s in styles) {
+  for (let s in styles) {
-      if (styles[s]) {
+    if (styles[s]) {
-        let key = convertCamel(s)
+      let key = convertCamel(s)
-        str += `${key}: ${styles[s]}; `
+      str += `${key}: ${styles[s]}; `
-      }
     }
-    return str
   }
-  
+  return str
-  export const convertCamel = str => {
+}
-    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+
-  }
+export const convertCamel = str => {
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}

packages/builder/src/components/userInterface/Colorpicker/utils.js

@@ -1,130 +1,139 @@
 export const isValidHex = str =>
-  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str);
+  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
 
 const getHexaValues = hexString => {
   if (hexString.length <= 5) {
-    let hexArr = hexString.match(/[A-F0-9]/gi);
+    let hexArr = hexString.match(/[A-F0-9]/gi)
-    let t = hexArr.map(c => (c += c));
+    let t = hexArr.map(c => (c += c))
-    return t;
+    return t
   } else {
-    return hexString.match(/[A-F0-9]{2}/gi);
+    return hexString.match(/[A-F0-9]{2}/gi)
   }
-};
+}
 
 export const isValidRgb = str => {
-  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str);
+  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(
+    str
+  )
   if (hasValidStructure) {
-    return testRgbaValues(str.toLowerCase());
+    return testRgbaValues(str.toLowerCase())
   }
-};
+}
 
-const findNonNumericChars = /[a-z()\s]/gi;
+const findNonNumericChars = /[a-z()\s]/gi
 
 export const getNumericValues = str =>
   str
     .replace(findNonNumericChars, "")
     .split(",")
-    .map(v => v !== "" ? v : undefined);
+    .map(v => (v !== "" ? v : undefined))
 
 export const testRgbaValues = str => {
-  const rgba = getNumericValues(str);
+  const rgba = getNumericValues(str)
-  const [r, g, b, a] = rgba;
+  const [r, g, b, a] = rgba
-  
+
   let isValidLengthRange =
     (str.startsWith("rgb(") && rgba.length === 3) ||
-    (str.startsWith("rgba(") && rgba.length === 4);
+    (str.startsWith("rgba(") && rgba.length === 4)
-  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255);
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
-  let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+  let isValidAlphaRange = str.startsWith("rgba(")
+    ? `${a}`.length <= 4 && a >= 0 && a <= 1
+    : true
 
-  return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange
-};
+}
 
 export const isValidHsl = str => {
-  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str);
+  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(
+    str
+  )
   if (hasValidStructure) {
-    return testHslaValues(str.toLowerCase());
+    return testHslaValues(str.toLowerCase())
   }
-};
+}
 
 export const testHslaValues = str => {
-  const hsla = getNumericValues(str);
+  const hsla = getNumericValues(str)
-  const [h, s, l, a] = hsla;
+  const [h, s, l, a] = hsla
-  const isUndefined = [h,s,l].some(v => v === undefined)
+  const isUndefined = [h, s, l].some(v => v === undefined)
 
-  if(isUndefined) return false;
+  if (isUndefined) return false
 
   let isValidLengthRange =
     (str.startsWith("hsl(") && hsla.length === 3) ||
-    (str.startsWith("hsla(") && hsla.length === 4);
+    (str.startsWith("hsla(") && hsla.length === 4)
   let isValidHue = h >= 0 && h <= 360
-  let isValidSatLum = [s, l].every(v => v.endsWith('%') && parseInt(v) >= 0 && parseInt(v) <= 100 )
+  let isValidSatLum = [s, l].every(
-  let isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+    v => v.endsWith("%") && parseInt(v) >= 0 && parseInt(v) <= 100
+  )
+  let isValidAlphaRange = str.startsWith("hsla(")
+    ? `${a}`.length <= 4 && a >= 0 && a <= 1
+    : true
 
-  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange;
+  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange
-};
+}
 
 export const getColorFormat = color => {
   if (typeof color === "string") {
     if (isValidHex(color)) {
-      return "hex";
+      return "hex"
     } else if (isValidRgb(color)) {
-      return "rgb";
+      return "rgb"
     } else if (isValidHsl(color)) {
-      return "hsl";
+      return "hsl"
     }
   }
-};
+}
 
 export const convertToHSVA = (value, format) => {
   switch (format) {
     case "hex":
-      return getAndConvertHexa(value);
+      return getAndConvertHexa(value)
     case "rgb":
-      return getAndConvertRgba(value);
+      return getAndConvertRgba(value)
     case "hsl":
-      return getAndConvertHsla(value);
+      return getAndConvertHsla(value)
   }
-};
+}
 
 export const convertHsvaToFormat = (hsva, format) => {
   switch (format) {
     case "hex":
-      return hsvaToHexa(hsva, true);
+      return hsvaToHexa(hsva, true)
     case "rgb":
-      return hsvaToRgba(hsva, true);
+      return hsvaToRgba(hsva, true)
     case "hsl":
-      return hsvaToHsla(hsva);
+      return hsvaToHsla(hsva)
   }
-};
+}
 
 export const getAndConvertHexa = color => {
-  let [rHex, gHex, bHex, aHex] = getHexaValues(color);
+  let [rHex, gHex, bHex, aHex] = getHexaValues(color)
-  return hexaToHSVA([rHex, gHex, bHex], aHex);
+  return hexaToHSVA([rHex, gHex, bHex], aHex)
-};
+}
 
 export const getAndConvertRgba = color => {
-  let rgba = getNumericValues(color);
+  let rgba = getNumericValues(color)
-  return rgbaToHSVA(rgba);
+  return rgbaToHSVA(rgba)
-};
+}
 
 export const getAndConvertHsla = color => {
-  let hsla = getNumericValues(color);
+  let hsla = getNumericValues(color)
-  return hslaToHSVA(hsla);
+  return hslaToHSVA(hsla)
-};
+}
-
 
 export const hexaToHSVA = (hex, alpha = "FF") => {
   const rgba = hex
     .map(v => parseInt(v, 16))
-    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
+    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)))
-  return rgbaToHSVA(rgba);
+  return rgbaToHSVA(rgba)
-};
+}
 
 export const rgbaToHSVA = rgba => {
-  const [r, g, b, a = 1] = rgba;
+  const [r, g, b, a = 1] = rgba
-  let hsv = _rgbToHSV([r, g, b]);
+  let hsv = _rgbToHSV([r, g, b])
-  return [...hsv, a];
+  return [...hsv, a]
-};
+}
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
   let sat = s.replace(/%/, "")
@@ -134,137 +143,137 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => {
 }
 
 export const hsvaToHexa = (hsva, asString = false) => {
-  const [r, g, b, a] = hsvaToRgba(hsva);
+  const [r, g, b, a] = hsvaToRgba(hsva)
 
   const hexa = [r, g, b]
     .map(v => {
-		let hex = Math.round(v).toString(16)
+      let hex = Math.round(v).toString(16)
-		return hex.length === 1 ? `0${hex}` : hex
+      return hex.length === 1 ? `0${hex}` : hex
-	})
+    })
-    .concat(Math.round(a * 255).toString(16));
+    .concat(Math.round(a * 255).toString(16))
-  return asString ? `#${hexa.join("")}` : hexa;
+  return asString ? `#${hexa.join("")}` : hexa
-};
+}
 
 export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => {
-  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x));
+  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x))
-  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a];
+  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a]
-  return asString ? `rgba(${rgba.join(",")})` : rgba;
+  return asString ? `rgba(${rgba.join(",")})` : rgba
-};
+}
 
 export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
-  let [hue, sat, lum] = _hsvToHSL([h, s, v]);
+  let [hue, sat, lum] = _hsvToHSL([h, s, v])
-  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a];
+  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]
-  return `hsla(${hsla.join(",")})`;
+  return `hsla(${hsla.join(",")})`
-};
+}
 
 export const _hslToHSV = hsl => {
-  const h = hsl[0];
+  const h = hsl[0]
-  let s = hsl[1] / 100;
+  let s = hsl[1] / 100
-  let l = hsl[2] / 100;
+  let l = hsl[2] / 100
-  let smin = s;
+  let smin = s
-  const lmin = Math.max(l, 0.01);
+  const lmin = Math.max(l, 0.01)
 
-  l *= 2;
+  l *= 2
-  s *= l <= 1 ? l : 2 - l;
+  s *= l <= 1 ? l : 2 - l
-  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  smin *= lmin <= 1 ? lmin : 2 - lmin
-  const v = (l + s) / 2;
+  const v = (l + s) / 2
-  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s)
 
-  return [h, sv * 100, v * 100];
+  return [h, sv * 100, v * 100]
-};
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _rgbToHSV = rgb => {
-  let rdif;
+  let rdif
-  let gdif;
+  let gdif
-  let bdif;
+  let bdif
-  let h;
+  let h
-  let s;
+  let s
 
-  const r = rgb[0] / 255;
+  const r = rgb[0] / 255
-  const g = rgb[1] / 255;
+  const g = rgb[1] / 255
-  const b = rgb[2] / 255;
+  const b = rgb[2] / 255
-  const v = Math.max(r, g, b);
+  const v = Math.max(r, g, b)
-  const diff = v - Math.min(r, g, b);
+  const diff = v - Math.min(r, g, b)
   const diffc = function(c) {
-    return (v - c) / 6 / diff + 1 / 2;
+    return (v - c) / 6 / diff + 1 / 2
-  };
+  }
 
   if (diff === 0) {
-    h = 0;
+    h = 0
-    s = 0;
+    s = 0
   } else {
-    s = diff / v;
+    s = diff / v
-    rdif = diffc(r);
+    rdif = diffc(r)
-    gdif = diffc(g);
+    gdif = diffc(g)
-    bdif = diffc(b);
+    bdif = diffc(b)
 
     if (r === v) {
-      h = bdif - gdif;
+      h = bdif - gdif
     } else if (g === v) {
-      h = 1 / 3 + rdif - bdif;
+      h = 1 / 3 + rdif - bdif
     } else if (b === v) {
-      h = 2 / 3 + gdif - rdif;
+      h = 2 / 3 + gdif - rdif
     }
 
     if (h < 0) {
-      h += 1;
+      h += 1
     } else if (h > 1) {
-      h -= 1;
+      h -= 1
     }
   }
 
-  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v));
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v))
-  return hsvResult;
+  return hsvResult
-};
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToRgb = hsv => {
-  const h = hsv[0] / 60;
+  const h = hsv[0] / 60
-  const s = hsv[1] / 100;
+  const s = hsv[1] / 100
-  let v = hsv[2] / 100;
+  let v = hsv[2] / 100
-  const hi = Math.floor(h) % 6;
+  const hi = Math.floor(h) % 6
 
-  const f = h - Math.floor(h);
+  const f = h - Math.floor(h)
-  const p = 255 * v * (1 - s);
+  const p = 255 * v * (1 - s)
-  const q = 255 * v * (1 - s * f);
+  const q = 255 * v * (1 - s * f)
-  const t = 255 * v * (1 - s * (1 - f));
+  const t = 255 * v * (1 - s * (1 - f))
-  v *= 255;
+  v *= 255
 
   switch (hi) {
     case 0:
-      return [v, t, p];
+      return [v, t, p]
     case 1:
-      return [q, v, p];
+      return [q, v, p]
     case 2:
-      return [p, v, t];
+      return [p, v, t]
     case 3:
-      return [p, q, v];
+      return [p, q, v]
     case 4:
-      return [t, p, v];
+      return [t, p, v]
     case 5:
-      return [v, p, q];
+      return [v, p, q]
   }
-};
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToHSL = hsv => {
-  const h = hsv[0];
+  const h = hsv[0]
-  const s = hsv[1] / 100;
+  const s = hsv[1] / 100
-  const v = hsv[2] / 100;
+  const v = hsv[2] / 100
-  const vmin = Math.max(v, 0.01);
+  const vmin = Math.max(v, 0.01)
-  let sl;
+  let sl
-  let l;
+  let l
 
-  l = (2 - s) * v;
+  l = (2 - s) * v
-  const lmin = (2 - s) * vmin;
+  const lmin = (2 - s) * vmin
-  sl = s * vmin;
+  sl = s * vmin
-  sl /= lmin <= 1 ? lmin : 2 - lmin;
+  sl /= lmin <= 1 ? lmin : 2 - lmin
-  sl = sl || 0;
+  sl = sl || 0
-  l /= 2;
+  l /= 2
 
-  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)];
+  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)]
-};
+}
 
 export const _fixNum = (value, decimalPlaces) =>
-  Number(parseFloat(value).toFixed(decimalPlaces));
+  Number(parseFloat(value).toFixed(decimalPlaces))

packages/builder/src/components/userInterface/Colorpicker/utils.test.js

@@ -1,90 +1,106 @@
-import {getColorFormat, convertToHSVA, convertHsvaToFormat} from "./utils"
+import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils"
 
-describe('convertToHSVA - convert to hsva from format', () => {
+describe("convertToHSVA - convert to hsva from format", () => {
-    test("convert from hexa", () => {
+  test("convert from hexa", () => {
-      expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) 
+    expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51])
-    })
+  })
 
-    test("convert from hex", () => {
+  test("convert from hex", () => {
-        expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) 
+    expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1])
-    })
+  })
 
-    test("convert from rgba", () => {
+  test("convert from rgba", () => {
-        expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1])
+    expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([
-    })
+      309,
+      86,
+      95,
+      1,
+    ])
+  })
 
-    test("convert from rgb", () => {
+  test("convert from rgb", () => {
-        expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
+    expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
-    })
+  })
 
-    test("convert from from hsl", () => {
+  test("convert from from hsl", () => {
-        expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 1])
+    expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([
-    })
+      264,
-
+      68.6,
-    test("convert from from hsla", () => {
+      100,
-        expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([264, 68.6, 100, 0.51])
+      1,
-    })
+    ])
+  })
 
+  test("convert from from hsla", () => {
+    expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([
+      264,
+      68.6,
+      100,
+      0.51,
+    ])
+  })
 })
 
-describe('convertHsvaToFormat - convert from hsva to format', () => {
+describe("convertHsvaToFormat - convert from hsva to format", () => {
-    test('Convert to hexa', () => {
+  test("Convert to hexa", () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
-    })
+  })
 
-    test('Convert to rgba', () => {
+  test("Convert to rgba", () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)")
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe(
-    })
+      "rgba(150,80,255,0.75)"
+    )
+  })
 
-    test('Convert to hsla', () => {
+  test("Convert to hsla", () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe("hsla(264,100,65.7,1)")
+    expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe(
-    })
+      "hsla(264,100,65.7,1)"
+    )
+  })
 })
 
+describe("Get Color Format", () => {
+  test("Testing valid hex string", () => {
+    expect(getColorFormat("#FFF")).toBe("hex")
+  })
 
-describe('Get Color Format', () => {
+  test("Testing invalid hex string", () => {
-     test("Testing valid hex string", () => {
+    expect(getColorFormat("#FFZ")).toBeUndefined()
-         expect(getColorFormat("#FFF")).toBe("hex")
+  })
-     })
 
-     test("Testing invalid hex string", () => {
+  test("Testing valid hex with alpha", () => {
-        expect(getColorFormat("#FFZ")).toBeUndefined()
+    expect(getColorFormat("#FF00BB80")).toBe("hex")
-    })
+  })
 
-    test("Testing valid hex with alpha", () => {
+  test("Test valid rgb value", () => {
-        expect(getColorFormat("#FF00BB80")).toBe("hex")
+    expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
-    })
+  })
 
-    test("Test valid rgb value", () => {
+  test("Testing invalid rgb value", () => {
-        expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
+    expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
-    })
+  })
 
-    test("Testing invalid rgb value", () => {
+  test("Testing rgb value with alpha", () => {
-        expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
+    expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
-    })
+  })
 
-    test("Testing rgb value with alpha", () => {
+  test("Testing rgb value with incorrectly provided alpha", () => {
-        expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
+    expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
-    })
+  })
 
-    test("Testing rgb value with incorrectly provided alpha", () => {
+  test("Testing invalid hsl value", () => {
-        expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
+    expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
-    })
+  })
 
-    test("Testing invalid hsl value", () => {
+  test("Testing hsla value with alpha", () => {
-        expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
+    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
-    })
+  })
 
-    test("Testing hsla value with alpha", () => {
+  test("Testing hsl value with incorrectly provided alpha", () => {
-        expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
-    })
+  })
 
-    test("Testing hsl value with incorrectly provided alpha", () => {
+  test("Testing out of bounds hsl", () => {
-        expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
+    expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
-    })
+  })
-
-    test("Testing out of bounds hsl", () => {
-        expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
-    })
 })
-