From 28307c27b8f23f61f04985e957b23b54408a0a7e Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sat, 30 May 2020 18:59:33 +0100
Subject: [PATCH 01/12] Complete HSVAColor Class and Utils

---
 .../Colorpicker/Colorpicker.svelte            |   0
 .../Colorpicker/utils/HSVAColor.js            |  66 +++++++++++
 .../userInterface/Colorpicker/utils/utils.js  | 108 ++++++++++++++++++
 3 files changed, 174 insertions(+)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
new file mode 100644
index 0000000000..e39e700903
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
@@ -0,0 +1,66 @@
+import {
+  getHexaValues,
+  getRgbaValues,
+  hsvToHSL,
+  isValidRgba,
+  rgbToHSV,
+  hsvToRgb,
+} from "./utils"
+
+export class HSVAColor {
+  h = 0
+  s = 0
+  v = 0
+  a = 1
+
+  constructor(color) {
+    if (color.startsWith("#")) {
+      let [rHex, gHex, bHex, aHex] = getHexaValues(color)
+      this.hexaToHSVA([rHex, gHex, bHex], aHex)
+    } else if (color.startsWith("rgb")) {
+      let rgba = getRgbaValues(color)
+      this.rgbaToHSVA(rgba)
+    }
+  }
+
+  setHSVA([h, s, v, a]) {
+    this.h = h
+    this.s = s
+    this.v = v
+    this.a = a
+  }
+
+  getHSLA() {
+    const [h, s, l] = hsvToHSL([this.h, this.s, this.v])
+    return `hsla(${h}, ${s}, ${l}, ${this.a})`
+  }
+
+  hexaToHSVA(hex, alpha = "FF") {
+    const rgba = hex
+      .map(v => parseInt(v, 16))
+      .concat((parseInt(alpha, 16) / 255).toFixed(1))
+    this.rgbaToHSVA(rgba)
+  }
+
+  rgbaToHSVA(rgba) {
+    if (isValidRgba(rgba)) {
+      const [r, g, b, a = "1"] = rgba
+      let hsv = rgbToHSV([r, g, b])
+      this.setHSVA([...hsv, a])
+    }
+  }
+
+  hsvaToHexa() {
+    const [r, g, b, a] = this.hsvaToRgba()
+    const hexa = [r, g, b]
+      .map(v => v.toString(16))
+      .concat((a * 255).toFixed(1).toString(16))
+    return hexa
+  }
+
+  hsvaToRgba() {
+    const { h, s, v, a } = this
+    let rgb = hsvToRgb([h, s, v])
+    return [...rgb, a]
+  }
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
new file mode 100644
index 0000000000..7412c42e27
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
@@ -0,0 +1,108 @@
+export const getRgbaValues = rgbaString =>
+  rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",")
+
+export const getHexaValues = hexString =>
+  hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi)
+
+export const isValidRgba = rgba => {
+  let [r, g, b, a = 1] = rgba
+
+  let isValidLengthRange = rgba.length === 3 || rgba.length === 4
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
+  let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1)
+
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const rgbToHSV = rgb => {
+  let rdif
+  let gdif
+  let bdif
+  let h
+  let s
+
+  const r = rgb[0] / 255
+  const g = rgb[1] / 255
+  const b = rgb[2] / 255
+  const v = Math.max(r, g, b)
+  const diff = v - Math.min(r, g, b)
+  const diffc = function(c) {
+    return (v - c) / 6 / diff + 1 / 2
+  }
+
+  if (diff === 0) {
+    h = 0
+    s = 0
+  } else {
+    s = diff / v
+    rdif = diffc(r)
+    gdif = diffc(g)
+    bdif = diffc(b)
+
+    if (r === v) {
+      h = bdif - gdif
+    } else if (g === v) {
+      h = 1 / 3 + rdif - bdif
+    } else if (b === v) {
+      h = 2 / 3 + gdif - rdif
+    }
+
+    if (h < 0) {
+      h += 1
+    } else if (h > 1) {
+      h -= 1
+    }
+  }
+
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0))
+  return hsvResult
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const hsvToRgb = hsv => {
+  const h = hsv[0] / 60
+  const s = hsv[1] / 100
+  let v = hsv[2] / 100
+  const hi = Math.floor(h) % 6
+
+  const f = h - Math.floor(h)
+  const p = 255 * v * (1 - s)
+  const q = 255 * v * (1 - s * f)
+  const t = 255 * v * (1 - s * (1 - f))
+  v *= 255
+
+  switch (hi) {
+    case 0:
+      return [v, t, p]
+    case 1:
+      return [q, v, p]
+    case 2:
+      return [p, v, t]
+    case 3:
+      return [p, q, v]
+    case 4:
+      return [t, p, v]
+    case 5:
+      return [v, p, q]
+  }
+}
+
+//Credit : https://github.com/Qix-/color-convert
+export const hsvToHSL = hsv => {
+  const h = hsv[0]
+  const s = hsv[1] / 100
+  const v = hsv[2] / 100
+  const vmin = Math.max(v, 0.01)
+  let sl
+  let l
+
+  l = (2 - s) * v
+  const lmin = (2 - s) * vmin
+  sl = s * vmin
+  sl /= lmin <= 1 ? lmin : 2 - lmin
+  sl = sl || 0
+  l /= 2
+
+  return [h, sl * 100, l * 100]
+}

From 4ef62452ef2337ebbd18950ebd177be206e25388 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Sun, 31 May 2020 20:55:51 +0100
Subject: [PATCH 02/12] Palette, Slider Components and Util Updates

---
 .../Colorpicker/Colorpicker.svelte            |  32 ++++
 .../userInterface/Colorpicker/Palette.svelte  |  49 ++++++
 .../userInterface/Colorpicker/Slider.svelte   |  87 +++++++++++
 .../userInterface/Colorpicker/drag.js         |  23 +++
 .../userInterface/Colorpicker/index.js        |   2 +
 .../userInterface/Colorpicker/utils.js        | 146 ++++++++++++++++++
 .../Colorpicker/utils/HSVAColor.js            |  66 --------
 .../userInterface/Colorpicker/utils/utils.js  | 108 -------------
 8 files changed, 339 insertions(+), 174 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/drag.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/index.js
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.js
 delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
 delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index e69de29bb2..db70f3ad64 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -0,0 +1,32 @@
+<script>
+  import Slider from "./Slider.svelte";
+  import Palette from "./Palette.svelte";
+
+  export let value = "#00000000";
+
+  let h = 0;
+  let s = 0;
+  let v = 0;
+  let a = 1;
+</script>
+
+<style>
+  .colorpicker-container {
+    display: flex;
+    flex-direction: column;
+    height: 300px;
+    width: 250px;
+    background: #ffffff;
+    border: 1px solid #e8e8ef;
+    border-radius: 2px;
+  }
+</style>
+
+<div class="colorpicker-container">
+
+  <Palette {h} {a} />
+
+  <Slider type="hue" on:change={hue => (h = hue.detail)} />
+
+  <Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
new file mode 100644
index 0000000000..4a4decfda8
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { onMount } from "svelte";
+  export let h,
+    a = 0;
+
+  let palette;
+  let dimensions;
+
+  onMount(() => {
+    if (palette) {
+      dimensions = palette.getBoundingClientRect();
+    }
+  });
+
+  function handleClick(event) {
+    const { left, top, width, height } = dimensions;
+    let pickerX = (event.clientX - left) / width;
+    let pickerY = (event.clientY - top) / height;
+    //Saturation - adds white: pickerX * 100
+    //value - adds black: 100 - pickerY * 100
+    console.log("X", pickerX, "Y", pickerY);
+  }
+
+  $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
+    linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
+  `;
+  $: style = `background: ${paletteGradient};`;
+</script>
+
+<style>
+  .palette {
+    position: relative;
+    width: 100%;
+    height: 175px;
+  }
+
+  .picker {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: transparent;
+    border: 2px solid white;
+    border-radius: 50%;
+  }
+</style>
+
+<div bind:this={palette} on:click={handleClick} class="palette" {style}>
+  <div class="picker" />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
new file mode 100644
index 0000000000..82e00baa93
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -0,0 +1,87 @@
+<script>
+  import { onMount, createEventDispatcher } from "svelte";
+  import dragable from "./drag.js";
+
+  export let type = "hue";
+
+  const dispatch = createEventDispatcher();
+
+  let slider;
+  let dimensions = {};
+  let thumbPosition = 0;
+
+  onMount(() => {
+    if (slider) {
+      dimensions = slider.getBoundingClientRect();
+    }
+  });
+
+  function handleClick(mouseX) {
+    const { left, width } = dimensions;
+    let clickPosition = mouseX - left;
+    debugger;
+    if (clickPosition >= 0 && clickPosition <= width) {
+      thumbPosition = clickPosition;
+      let percentageClick = thumbPosition / width;
+      let value =
+        type === "hue"
+          ? Math.round(360 * percentageClick).toString()
+          : percentageClick.toFixed(2);
+      dispatch("change", value);
+    }
+  }
+
+  $: style = `transform: translateX(${thumbPosition - 6}px);`;
+</script>
+
+<style>
+  .color-format-slider {
+    position: relative;
+    align-self: center;
+    height: 8px;
+    width: 220px;
+    border-radius: 10px;
+    margin: 10px 0px;
+    border: 1px solid #e8e8ef;
+  }
+
+  .hue {
+    background: linear-gradient(
+      to right,
+      hsl(0, 100%, 50%),
+      hsl(60, 100%, 50%),
+      hsl(120, 100%, 50%),
+      hsl(180, 100%, 50%),
+      hsl(240, 100%, 50%),
+      hsl(300, 100%, 50%),
+      hsl(360, 100%, 50%)
+    );
+  }
+
+  .alpha {
+    background: linear-gradient(to right, transparent, rgb(0 0 0));
+  }
+
+  .slider-thumb {
+    position: absolute;
+    bottom: -3px;
+    height: 12px;
+    width: 12px;
+    border: 1px solid black;
+    border-radius: 50%;
+    background-color: #ffffff;
+  }
+</style>
+
+<div
+  bind:this={slider}
+  on:click={event => handleClick(event.clientX)}
+  class="color-format-slider"
+  class:hue={type === 'hue'}
+  class:alpha={type === 'alpha'}>
+  <div
+    use:dragable
+    on:drag={e => handleClick(e.detail)}
+    class="slider-thumb"
+    {style} />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
new file mode 100644
index 0000000000..eb15c8d4fb
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -0,0 +1,23 @@
+export default function(node) {
+	function handleMouseDown() {
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(event) {
+		let mouseX = event.clientX;
+		console.log(mouseX);
+		node.dispatchEvent(
+			new CustomEvent('drag', {
+				detail: mouseX
+			})
+		);
+	}
+
+	function handleMouseUp() {
+		window.removeEventListener('mousedown', handleMouseDown);
+		window.removeEventListener('mousemove', handleMouseMove);
+	}
+
+	node.addEventListener('mousedown', handleMouseDown);
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
new file mode 100644
index 0000000000..ad8187a09b
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -0,0 +1,2 @@
+import Colorpicker from './Colorpicker.svelte';
+export default Colorpicker;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
new file mode 100644
index 0000000000..98bb96d259
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -0,0 +1,146 @@
+export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(',');
+
+export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi);
+
+export const isValidRgba = (rgba) => {
+	let [ r, g, b, a = 1 ] = rgba;
+
+	let isValidLengthRange = rgba.length === 3 || rgba.length === 4;
+	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
+	let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1);
+
+	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+};
+
+export const determineColorType = (color) => {
+	let hsva = [];
+	if (color.startsWith('#')) {
+		let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
+		hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
+	} else if (color.startsWith('rgb')) {
+		let rgba = getRgbaValues(color);
+		hsva = rgbaToHSVA(rgba);
+	}
+};
+
+export const getHSLA = (hsv, a) => {
+	const [ h, s, l ] = hsvToHSL(hsv);
+	return `hsla(${h}, ${s}, ${l}, ${a})`;
+};
+
+export const hexaToHSVA = (hex, alpha = 'FF') => {
+	const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1));
+	return rgbaToHSVA(rgba);
+};
+
+export const rgbaToHSVA = (rgba) => {
+	if (isValidRgba(rgba)) {
+		const [ r, g, b, a = '1' ] = rgba;
+		let hsv = rgbToHSV([ r, g, b ]);
+		return [ ...hsv, a ];
+	}
+};
+
+export const hsvaToHexa = () => {
+	const [ r, g, b, a ] = hsvaToRgba();
+	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
+	return hexa;
+};
+
+export const hsvaToRgba = (h, s, v, a) => {
+	let rgb = _hsvToRgb([ h, s, v ]);
+	return [ ...rgb, a ];
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _rgbToHSV = (rgb) => {
+	let rdif;
+	let gdif;
+	let bdif;
+	let h;
+	let s;
+
+	const r = rgb[0] / 255;
+	const g = rgb[1] / 255;
+	const b = rgb[2] / 255;
+	const v = Math.max(r, g, b);
+	const diff = v - Math.min(r, g, b);
+	const diffc = function(c) {
+		return (v - c) / 6 / diff + 1 / 2;
+	};
+
+	if (diff === 0) {
+		h = 0;
+		s = 0;
+	} else {
+		s = diff / v;
+		rdif = diffc(r);
+		gdif = diffc(g);
+		bdif = diffc(b);
+
+		if (r === v) {
+			h = bdif - gdif;
+		} else if (g === v) {
+			h = 1 / 3 + rdif - bdif;
+		} else if (b === v) {
+			h = 2 / 3 + gdif - rdif;
+		}
+
+		if (h < 0) {
+			h += 1;
+		} else if (h > 1) {
+			h -= 1;
+		}
+	}
+
+	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0));
+	return hsvResult;
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToRgb = (hsv) => {
+	const h = hsv[0] / 60;
+	const s = hsv[1] / 100;
+	let v = hsv[2] / 100;
+	const hi = Math.floor(h) % 6;
+
+	const f = h - Math.floor(h);
+	const p = 255 * v * (1 - s);
+	const q = 255 * v * (1 - s * f);
+	const t = 255 * v * (1 - s * (1 - f));
+	v *= 255;
+
+	switch (hi) {
+		case 0:
+			return [ v, t, p ];
+		case 1:
+			return [ q, v, p ];
+		case 2:
+			return [ p, v, t ];
+		case 3:
+			return [ p, q, v ];
+		case 4:
+			return [ t, p, v ];
+		case 5:
+			return [ v, p, q ];
+	}
+};
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToHSL = (hsv) => {
+	const h = hsv[0];
+	const s = hsv[1] / 100;
+	const v = hsv[2] / 100;
+	const vmin = Math.max(v, 0.01);
+	let sl;
+	let l;
+
+	l = (2 - s) * v;
+	const lmin = (2 - s) * vmin;
+	sl = s * vmin;
+	sl /= lmin <= 1 ? lmin : 2 - lmin;
+	sl = sl || 0;
+	l /= 2;
+
+	return [ h, sl * 100, l * 100 ];
+};
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
deleted file mode 100644
index e39e700903..0000000000
--- a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  getHexaValues,
-  getRgbaValues,
-  hsvToHSL,
-  isValidRgba,
-  rgbToHSV,
-  hsvToRgb,
-} from "./utils"
-
-export class HSVAColor {
-  h = 0
-  s = 0
-  v = 0
-  a = 1
-
-  constructor(color) {
-    if (color.startsWith("#")) {
-      let [rHex, gHex, bHex, aHex] = getHexaValues(color)
-      this.hexaToHSVA([rHex, gHex, bHex], aHex)
-    } else if (color.startsWith("rgb")) {
-      let rgba = getRgbaValues(color)
-      this.rgbaToHSVA(rgba)
-    }
-  }
-
-  setHSVA([h, s, v, a]) {
-    this.h = h
-    this.s = s
-    this.v = v
-    this.a = a
-  }
-
-  getHSLA() {
-    const [h, s, l] = hsvToHSL([this.h, this.s, this.v])
-    return `hsla(${h}, ${s}, ${l}, ${this.a})`
-  }
-
-  hexaToHSVA(hex, alpha = "FF") {
-    const rgba = hex
-      .map(v => parseInt(v, 16))
-      .concat((parseInt(alpha, 16) / 255).toFixed(1))
-    this.rgbaToHSVA(rgba)
-  }
-
-  rgbaToHSVA(rgba) {
-    if (isValidRgba(rgba)) {
-      const [r, g, b, a = "1"] = rgba
-      let hsv = rgbToHSV([r, g, b])
-      this.setHSVA([...hsv, a])
-    }
-  }
-
-  hsvaToHexa() {
-    const [r, g, b, a] = this.hsvaToRgba()
-    const hexa = [r, g, b]
-      .map(v => v.toString(16))
-      .concat((a * 255).toFixed(1).toString(16))
-    return hexa
-  }
-
-  hsvaToRgba() {
-    const { h, s, v, a } = this
-    let rgb = hsvToRgb([h, s, v])
-    return [...rgb, a]
-  }
-}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
deleted file mode 100644
index 7412c42e27..0000000000
--- a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-export const getRgbaValues = rgbaString =>
-  rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",")
-
-export const getHexaValues = hexString =>
-  hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi)
-
-export const isValidRgba = rgba => {
-  let [r, g, b, a = 1] = rgba
-
-  let isValidLengthRange = rgba.length === 3 || rgba.length === 4
-  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
-  let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1)
-
-  return isValidLengthRange && isValidColorRange && isValidAlphaRange
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const rgbToHSV = rgb => {
-  let rdif
-  let gdif
-  let bdif
-  let h
-  let s
-
-  const r = rgb[0] / 255
-  const g = rgb[1] / 255
-  const b = rgb[2] / 255
-  const v = Math.max(r, g, b)
-  const diff = v - Math.min(r, g, b)
-  const diffc = function(c) {
-    return (v - c) / 6 / diff + 1 / 2
-  }
-
-  if (diff === 0) {
-    h = 0
-    s = 0
-  } else {
-    s = diff / v
-    rdif = diffc(r)
-    gdif = diffc(g)
-    bdif = diffc(b)
-
-    if (r === v) {
-      h = bdif - gdif
-    } else if (g === v) {
-      h = 1 / 3 + rdif - bdif
-    } else if (b === v) {
-      h = 2 / 3 + gdif - rdif
-    }
-
-    if (h < 0) {
-      h += 1
-    } else if (h > 1) {
-      h -= 1
-    }
-  }
-
-  const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0))
-  return hsvResult
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const hsvToRgb = hsv => {
-  const h = hsv[0] / 60
-  const s = hsv[1] / 100
-  let v = hsv[2] / 100
-  const hi = Math.floor(h) % 6
-
-  const f = h - Math.floor(h)
-  const p = 255 * v * (1 - s)
-  const q = 255 * v * (1 - s * f)
-  const t = 255 * v * (1 - s * (1 - f))
-  v *= 255
-
-  switch (hi) {
-    case 0:
-      return [v, t, p]
-    case 1:
-      return [q, v, p]
-    case 2:
-      return [p, v, t]
-    case 3:
-      return [p, q, v]
-    case 4:
-      return [t, p, v]
-    case 5:
-      return [v, p, q]
-  }
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const hsvToHSL = hsv => {
-  const h = hsv[0]
-  const s = hsv[1] / 100
-  const v = hsv[2] / 100
-  const vmin = Math.max(v, 0.01)
-  let sl
-  let l
-
-  l = (2 - s) * v
-  const lmin = (2 - s) * vmin
-  sl = s * vmin
-  sl /= lmin <= 1 ? lmin : 2 - lmin
-  sl = sl || 0
-  l /= 2
-
-  return [h, sl * 100, l * 100]
-}

From 0fafe7565a555c5c9771df6ce8d4711f92869bcb Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 1 Jun 2020 23:01:56 +0100
Subject: [PATCH 03/12] Completed Palette and Slider with integration

---
 .../Colorpicker/Colorpicker.svelte            | 44 +++++++++++++++--
 .../userInterface/Colorpicker/Palette.svelte  | 48 +++++++++++--------
 .../userInterface/Colorpicker/Slider.svelte   | 26 +++++-----
 .../userInterface/Colorpicker/drag.js         |  1 -
 .../userInterface/Colorpicker/utils.js        | 37 +++++++-------
 5 files changed, 99 insertions(+), 57 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index db70f3ad64..4ca425bcb0 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,13 +1,49 @@
 <script>
+  import {onMount} from "svelte"
+  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
 
-  export let value = "#00000000";
+  export let value = "#00bfffff";
+  export let format = "hexa";
 
   let h = 0;
   let s = 0;
   let v = 0;
   let a = 1;
+
+  onMount(() => {
+    let hsva = getFormatAndConvert(value)
+    setHSVA(hsva)
+  })
+
+  function getFormatAndConvert() {
+  if (value.startsWith('#')) {
+    format = "hexa"
+		return getAndConvertHexa(value)
+	} else if (value.startsWith('rgba')) {
+    format = "rgba"
+		return getAndConvertRgba(value)
+	}
+  }
+
+  function setHSVA([hue, sat, val, alpha]) {
+    h = hue;
+    s = sat / 100;
+    v - val / 100;
+    a = alpha;
+  }
+
+  function setSaturationAndValue({detail}) {
+    s = detail.s
+    v = detail.v
+  }
+
+  // $: {
+  //   let hsva = [h, s, v, a]
+  //   value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
+  //   console.log("VAL", value)
+  // }
 </script>
 
 <style>
@@ -24,9 +60,9 @@
 
 <div class="colorpicker-container">
 
-  <Palette {h} {a} />
+  <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" on:change={hue => (h = hue.detail)} />
+  <Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
 
-  <Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
+  <Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 4a4decfda8..5f344e74a7 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -1,30 +1,39 @@
 <script>
-  import { onMount } from "svelte";
-  export let h,
-    a = 0;
+  import { onMount, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher()
+
+  export let h = 0;
+  export let s = 0;
+  export let v = 0;
+  export let a = 1;
 
   let palette;
-  let dimensions;
 
-  onMount(() => {
-    if (palette) {
-      dimensions = palette.getBoundingClientRect();
-    }
-  });
+  let paletteHeight, paletteWidth = 0;
+
 
   function handleClick(event) {
-    const { left, top, width, height } = dimensions;
-    let pickerX = (event.clientX - left) / width;
-    let pickerY = (event.clientY - top) / height;
-    //Saturation - adds white: pickerX * 100
-    //value - adds black: 100 - pickerY * 100
-    console.log("X", pickerX, "Y", pickerY);
+    const { left, top } = palette.getBoundingClientRect();
+    let clickX = (event.clientX - left)
+    let clickY = (event.clientY - top)
+    if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
+      let s = (clickX / paletteWidth) * 100
+      let v = 100 - ((clickY / paletteHeight) * 100)
+      dispatch("change", {s, v})
+    }
+
   }
 
+  $: pickerX = (s * paletteWidth) / 100;
+  $: pickerY =  paletteHeight * ((100 - v) / 100)
+
   $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
     linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
   `;
   $: style = `background: ${paletteGradient};`;
+
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
 <style>
@@ -32,18 +41,19 @@
     position: relative;
     width: 100%;
     height: 175px;
+    cursor: crosshair;
   }
 
   .picker {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     background: transparent;
     border: 2px solid white;
     border-radius: 50%;
   }
 </style>
 
-<div bind:this={palette} on:click={handleClick} class="palette" {style}>
-  <div class="picker" />
+<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
+  <div class="picker" style={pickerStyle} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 82e00baa93..13254c29c8 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -2,35 +2,30 @@
   import { onMount, createEventDispatcher } from "svelte";
   import dragable from "./drag.js";
 
+  export let value = 1
   export let type = "hue";
 
   const dispatch = createEventDispatcher();
 
   let slider;
-  let dimensions = {};
-  let thumbPosition = 0;
-
-  onMount(() => {
-    if (slider) {
-      dimensions = slider.getBoundingClientRect();
-    }
-  });
+  let sliderWidth = 0;
 
   function handleClick(mouseX) {
-    const { left, width } = dimensions;
+    const { left } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
-    debugger;
-    if (clickPosition >= 0 && clickPosition <= width) {
-      thumbPosition = clickPosition;
-      let percentageClick = thumbPosition / width;
+    
+    if (clickPosition >= 0 && clickPosition <= sliderWidth) {
+      let percentageClick = clickPosition / sliderWidth;
       let value =
         type === "hue"
-          ? Math.round(360 * percentageClick).toString()
-          : percentageClick.toFixed(2);
+          ? 360 * percentageClick.toString()
+          : percentageClick.toString();
       dispatch("change", value);
     }
   }
 
+  $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
+
   $: style = `transform: translateX(${thumbPosition - 6}px);`;
 </script>
 
@@ -75,6 +70,7 @@
 
 <div
   bind:this={slider}
+  bind:clientWidth={sliderWidth}
   on:click={event => handleClick(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
index eb15c8d4fb..842d157ad2 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/drag.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -6,7 +6,6 @@ export default function(node) {
 
 	function handleMouseMove(event) {
 		let mouseX = event.clientX;
-		console.log(mouseX);
 		node.dispatchEvent(
 			new CustomEvent('drag', {
 				detail: mouseX
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 98bb96d259..6c8c8d48ed 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -12,19 +12,19 @@ export const isValidRgba = (rgba) => {
 	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
 };
 
-export const determineColorType = (color) => {
-	let hsva = [];
-	if (color.startsWith('#')) {
-		let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
-		hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
-	} else if (color.startsWith('rgb')) {
-		let rgba = getRgbaValues(color);
-		hsva = rgbaToHSVA(rgba);
-	}
-};
 
-export const getHSLA = (hsv, a) => {
-	const [ h, s, l ] = hsvToHSL(hsv);
+export const getAndConvertHexa = (color) => { 
+	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
+	return hexaToHSVA([ rHex, gHex, bHex ], aHex);
+}
+
+export const getAndConvertRgba = color => {
+	let rgba = getRgbaValues(color);
+	return rgbaToHSVA(rgba);
+}
+
+export const getHSLA = ([hue, sat, val, a]) => {
+	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
 	return `hsla(${h}, ${s}, ${l}, ${a})`;
 };
 
@@ -36,20 +36,21 @@ export const hexaToHSVA = (hex, alpha = 'FF') => {
 export const rgbaToHSVA = (rgba) => {
 	if (isValidRgba(rgba)) {
 		const [ r, g, b, a = '1' ] = rgba;
-		let hsv = rgbToHSV([ r, g, b ]);
+		let hsv = _rgbToHSV([ r, g, b ]);
 		return [ ...hsv, a ];
 	}
 };
 
-export const hsvaToHexa = () => {
-	const [ r, g, b, a ] = hsvaToRgba();
+export const hsvaToHexa = (hsva) => {
+	const [ r, g, b, a ] = hsvaToRgba(hsva);
 	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
-	return hexa;
+	return `#${hexa.join()}`
 };
 
-export const hsvaToRgba = (h, s, v, a) => {
+export const hsvaToRgba = ([h, s, v, a]) => {
 	let rgb = _hsvToRgb([ h, s, v ]);
-	return [ ...rgb, a ];
+	let rgba = [ ...rgb, a ];
+	return `rgba(${rgba.join(",")})`
 };
 
 //Credit : https://github.com/Qix-/color-convert

From 98710bffbe7df42cc70eebf179717884cd810838 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 8 Jun 2020 21:41:10 +0100
Subject: [PATCH 04/12] Utils update and Jest Tests

---
 .../Colorpicker/Colorpicker.svelte            |  80 +++++++---
 .../userInterface/Colorpicker/utils.js        | 139 +++++++++++++++---
 .../userInterface/Colorpicker/utils.test.js   |  90 ++++++++++++
 3 files changed, 264 insertions(+), 45 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.test.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 4ca425bcb0..015114ded8 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,48 +1,80 @@
 <script>
   import {onMount} from "svelte"
-  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
+  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba, getColorFormat, convertToHSVA } from "./utils.js"
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
 
-  export let value = "#00bfffff";
+  export let value = "rgba(255,255,255,1)";
   export let format = "hexa";
 
-  let h = 0;
-  let s = 0;
-  let v = 0;
-  let a = 1;
+  let h = null;
+  let s = null;
+  let v = null;
+  let a = null;
 
   onMount(() => {
-    let hsva = getFormatAndConvert(value)
-    setHSVA(hsva)
-  })
+    format = getColorFormat(value)
+    if(format) {
+      let hsva = convertToHSVA(value, format)
+      setHSVA(hsva)
+    }
+})
 
-  function getFormatAndConvert() {
-  if (value.startsWith('#')) {
-    format = "hexa"
-		return getAndConvertHexa(value)
-	} else if (value.startsWith('rgba')) {
-    format = "rgba"
-		return getAndConvertRgba(value)
-	}
+  const hsvaIsNull = () => [h,s,v,a].every(c => c === null)
+
+  function setFormatAndConvert() {
+    if (value.startsWith('#')) {
+      format = "hexa"
+      return getAndConvertHexa(value)
+    } else if (value.startsWith('rgba')) {
+      format = "rgba"
+      return getAndConvertRgba(value)
+    }
   }
 
   function setHSVA([hue, sat, val, alpha]) {
     h = hue;
-    s = sat / 100;
-    v - val / 100;
+    s = sat;
+    v = val;
     a = alpha;
   }
 
+  //fired by choosing a color from the palette
   function setSaturationAndValue({detail}) {
     s = detail.s
     v = detail.v
+    let res = convertHSVA()
+    console.log("SAT-VAL", res)
+  }
+    
+  function setHue(hue) {
+    h = hue
+    let res = convertHSVA()
+    console.log("HUE",res)
+  }
+
+  function setAlpha(alpha) {
+    a = alpha
+    let res = convertHSVA()
+    console.log("ALPHA",res)
+
+  }
+
+  function convertHSVA() {
+    let hsva = [h, s, v, a]
+    let _value = format === "hexa" ? hsvaToHexa(hsva, true) : hsvaToRgba(hsva, true)
+    return _value;
+    // onchange(_value)
   }
 
   // $: {
-  //   let hsva = [h, s, v, a]
-  //   value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
-  //   console.log("VAL", value)
+  //   if(!hsvaIsNull()) {
+  //     let hsva = [h, s, v, a]
+  //     // let t = value + "abs"
+  //     value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
+  //     debugger
+  //     // console.log("VAL", value)
+  //   }
   // }
 </script>
 
@@ -62,7 +94,7 @@
 
   <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
+  <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
 
-  <Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
+  <Slider type="alpha" value={a} on:change={alpha => setAlpha(alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 6c8c8d48ed..b46ad6d202 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -1,17 +1,82 @@
-export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(',');
+export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
 
-export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi);
+const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi);
 
-export const isValidRgba = (rgba) => {
-	let [ r, g, b, a = 1 ] = rgba;
+export const isValidRgb = (str) => {
+	const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str);
+	if(hasValidStructure) {
+		return testRgbaValues(str.toLowerCase());
+	}
+}
 
-	let isValidLengthRange = rgba.length === 3 || rgba.length === 4;
+const findNonNumericChars = /[a-z()%\s]/gi
+
+export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c));
+
+export const testRgbaValues = (str) => {
+	const rgba = getNumericValues(str)
+	let [ r, g, b, a ] = rgba;
+
+	let isValidLengthRange = (str.startsWith("rgb(") && rgba.length === 3) || (str.startsWith("rgba(") && rgba.length === 4);
 	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
-	let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1);
+	let isValidAlphaRange =  str.startsWith("rgba(") ? a >= 0 && a <= 1 : true;
 
 	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
 };
 
+export const isValidHsl = (str) => {
+	const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str)
+	if(hasValidStructure) {
+		return testHslaValues(str.toLowerCase())
+	}
+}
+
+export const testHslaValues = (str) => {
+
+	const hsla = getNumericValues(str)
+	const [h, s, l, a] = hsla
+
+	let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4);
+	let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100)
+	let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true
+
+	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+}
+
+export const getColorFormat = (color) => {
+	if(typeof color === "string") {
+		if(isValidHex(color)) {
+			return 'hex'
+		}else if(isValidRgb(color)) {
+			return 'rgb'
+		}else if(isValidHsl(color)) {
+			return 'hsl'
+		}
+	}
+}
+
+export const convertToHSVA = (value, format) => {
+	switch(format) {
+		case "hex":
+			return getAndConvertHexa(value)
+		case "rgb": 
+			return getAndConvertRgba(value)
+		case "hsl":
+			return getAndConvertHsla(value)
+	}
+}
+
+export const convertHsvaToFormat = (hsva, format) => {
+	switch(format) {
+		case "hex":
+			return hsvaToHexa(hsva, true)
+		case "rgb":
+			return hsvaToRgba(hsva, true)
+		case "hsl":
+			return hsvaToHsla(hsva, true)
+	}
+}
+
 
 export const getAndConvertHexa = (color) => { 
 	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
@@ -19,40 +84,71 @@ export const getAndConvertHexa = (color) => {
 }
 
 export const getAndConvertRgba = color => {
-	let rgba = getRgbaValues(color);
+	let rgba = getNumericValues(color);
 	return rgbaToHSVA(rgba);
 }
 
+export const getAndConvertHsla = color => {
+	let hsla = getNumericValues(color);
+	return hslaToHSVA(hsla)
+}
+
 export const getHSLA = ([hue, sat, val, a]) => {
 	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
 	return `hsla(${h}, ${s}, ${l}, ${a})`;
 };
 
 export const hexaToHSVA = (hex, alpha = 'FF') => {
-	const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1));
+	const rgba = hex.map((v) => parseInt(v, 16)).concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
 	return rgbaToHSVA(rgba);
 };
 
 export const rgbaToHSVA = (rgba) => {
-	if (isValidRgba(rgba)) {
-		const [ r, g, b, a = '1' ] = rgba;
-		let hsv = _rgbToHSV([ r, g, b ]);
-		return [ ...hsv, a ];
-	}
+	const [ r, g, b, a = 1 ] = rgba;
+	let hsv = _rgbToHSV([ r, g, b ]);
+	return [ ...hsv, a ];
 };
 
-export const hsvaToHexa = (hsva) => {
+export const hslaToHSVA = ([h, s, l, a = 1]) => {
+	let hsv = _hslToHSV([h, s, l])
+	return [...hsv, a]
+}
+
+export const hsvaToHexa = (hsva, asString = false) => {
 	const [ r, g, b, a ] = hsvaToRgba(hsva);
-	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
-	return `#${hexa.join()}`
+
+	const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16));
+	return asString ? `#${hexa.join('')}` : hexa
 };
 
-export const hsvaToRgba = ([h, s, v, a]) => {
-	let rgb = _hsvToRgb([ h, s, v ]);
+export const hsvaToRgba = ([h, s, v, a], asString = false) => {
+	let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x));
 	let rgba = [ ...rgb, a ];
-	return `rgba(${rgba.join(",")})`
+	return asString ? `rgba(${rgba.join(",")})` : rgba
 };
 
+export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
+	let hsl = _hsvToHSL([h, s, v])
+	let hsla = [...hsl, a]
+	return asString ? `hsla(${hsla.join(",")})` : hsla
+}
+
+export const _hslToHSV = (hsl) => {
+	const h = hsl[0];
+	let s = hsl[1] / 100;
+	let l = hsl[2] / 100;
+	let smin = s;
+	const lmin = Math.max(l, 0.01);
+
+	l *= 2;
+	s *= (l <= 1) ? l : 2 - l;
+	smin *= lmin <= 1 ? lmin : 2 - lmin;
+	const v = (l + s) / 2;
+	const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+
+	return [h, sv * 100, v * 100];
+}
+
 //Credit : https://github.com/Qix-/color-convert
 export const _rgbToHSV = (rgb) => {
 	let rdif;
@@ -94,7 +190,7 @@ export const _rgbToHSV = (rgb) => {
 		}
 	}
 
-	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0));
+	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v));
 	return hsvResult;
 };
 
@@ -129,6 +225,7 @@ export const _hsvToRgb = (hsv) => {
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToHSL = (hsv) => {
+	
 	const h = hsv[0];
 	const s = hsv[1] / 100;
 	const v = hsv[2] / 100;
@@ -143,5 +240,5 @@ export const _hsvToHSL = (hsv) => {
 	sl = sl || 0;
 	l /= 2;
 
-	return [ h, sl * 100, l * 100 ];
+	return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ];
 };
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
new file mode 100644
index 0000000000..0354468b75
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -0,0 +1,90 @@
+import {getColorFormat, convertToHSVA, convertHsvaToFormat} from "./utils"
+
+describe('convertToHSVA - convert to hsva from format', () => {
+    test("convert from hexa", () => {
+      expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) 
+    })
+
+    test("convert from hex", () => {
+        expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) 
+    })
+
+    test("convert from rgba", () => {
+        expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1])
+    })
+
+    test("convert from rgb", () => {
+        expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
+    })
+
+    test("convert from from hsl", () => {
+        expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 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', () => {
+    test('Convert to hexa', () => {
+        expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
+    })
+
+    test('Convert to rgba', () => {
+        expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)")
+    })
+
+    test('Convert to hsla', () => {
+        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")
+     })
+
+     test("Testing invalid hex string", () => {
+        expect(getColorFormat("#FFZ")).toBeUndefined()
+    })
+
+    test("Testing valid hex with alpha", () => {
+        expect(getColorFormat("#FF00BB80")).toBe("hex")
+    })
+
+    test("Test valid rgb value", () => {
+        expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
+    })
+
+    test("Testing invalid rgb value", () => {
+        expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
+    })
+
+    test("Testing rgb value with alpha", () => {
+        expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
+    })
+
+    test("Testing rgb value with incorrectly provided alpha", () => {
+        expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
+    })
+
+    test("Testing invalid hsl value", () => {
+        expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
+    })
+
+    test("Testing hsla value with alpha", () => {
+        expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    })
+
+    test("Testing hsl value with incorrectly provided alpha", () => {
+        expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
+    })
+
+    test("Testing out of bounds hsl", () => {
+        expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
+    })
+})
+

From 8fd475dec2914e723e64e815d2a94b6104b911db Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 12 Jun 2020 10:48:20 +0100
Subject: [PATCH 05/12] Fully functional Colorpicker with Preview

---
 .../Colorpicker/ButtonGroup.svelte            |  27 ++
 .../Colorpicker/Colorpicker.svelte            | 142 ++++--
 .../Colorpicker/Colorpreview.svelte           |  78 ++++
 .../Colorpicker/FlatButton.svelte             |  26 ++
 .../userInterface/Colorpicker/Input.svelte    |  28 ++
 .../userInterface/Colorpicker/Palette.svelte  |   1 +
 .../userInterface/Colorpicker/Slider.svelte   |  22 +-
 .../userInterface/Colorpicker/helpers.js      |  14 +
 .../userInterface/Colorpicker/index.js        |   5 +-
 .../userInterface/Colorpicker/utils.js        | 426 +++++++++---------
 10 files changed, 510 insertions(+), 259 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Input.svelte
 create mode 100644 packages/builder/src/components/userInterface/Colorpicker/helpers.js

diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
new file mode 100644
index 0000000000..f9c402ac81
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte
@@ -0,0 +1,27 @@
+<script>
+  import FlatButton from "./FlatButton.svelte";
+
+  export let format = "hex";
+  export let onclick = format => {};
+
+  let colorFormats = ["hex", "rgb", "hsl"];
+</script>
+
+<style>
+  .flatbutton-group {
+    font-weight: 500;
+    display: flex;
+    flex-flow: row nowrap;
+    width: 100%;
+    justify-content: center;
+  }
+</style>
+
+<div class="flatbutton-group">
+  {#each colorFormats as text}
+    <FlatButton
+      selected={format === text}
+      {text}
+      on:click={() => onclick(text)} />
+  {/each}
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 015114ded8..8ec53d9b86 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -1,10 +1,17 @@
 <script>
-  import {onMount} from "svelte"
-  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba, getColorFormat, convertToHSVA } from "./utils.js"
+  import { onMount, createEventDispatcher } from "svelte";
+
+  import {
+    getColorFormat,
+    convertToHSVA,
+    convertHsvaToFormat
+  } from "./utils.js";
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
+  import ButtonGroup from "./ButtonGroup.svelte";
+  import Input from "./Input.svelte";
 
-  export let value = "rgba(255,255,255,1)";
+  export let value = "#3ec1d3ff";
   export let format = "hexa";
 
   let h = null;
@@ -12,24 +19,20 @@
   let v = null;
   let a = null;
 
+  const dispatch = createEventDispatcher();
+
   onMount(() => {
-    format = getColorFormat(value)
-    if(format) {
-      let hsva = convertToHSVA(value, format)
-      setHSVA(hsva)
+    format = getColorFormat(value);
+    if (format) {
+      convertAndSetHSVA()
     }
-})
+  });
 
-  const hsvaIsNull = () => [h,s,v,a].every(c => c === null)
+  const hsvaIsNull = () => [h, s, v, a].every(c => c === null);
 
-  function setFormatAndConvert() {
-    if (value.startsWith('#')) {
-      format = "hexa"
-      return getAndConvertHexa(value)
-    } else if (value.startsWith('rgba')) {
-      format = "rgba"
-      return getAndConvertRgba(value)
-    }
+  function convertAndSetHSVA() {
+    let hsva = convertToHSVA(value, format);
+    setHSVA(hsva);
   }
 
   function setHSVA([hue, sat, val, alpha]) {
@@ -40,53 +43,81 @@
   }
 
   //fired by choosing a color from the palette
-  function setSaturationAndValue({detail}) {
-    s = detail.s
-    v = detail.v
-    let res = convertHSVA()
-    console.log("SAT-VAL", res)
+  function setSaturationAndValue({ detail }) {
+    s = detail.s;
+    v = detail.v;
+    value = convertHsvaToFormat([h, s, v, a], format);
+    dispatch("change", value)
   }
-    
+
   function setHue(hue) {
-    h = hue
-    let res = convertHSVA()
-    console.log("HUE",res)
+    h = hue;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    dispatch("change", value)
   }
 
   function setAlpha(alpha) {
-    a = alpha
-    let res = convertHSVA()
-    console.log("ALPHA",res)
-
+    a = alpha === "1.00" ? "1" :alpha;
+    value = convertHsvaToFormat([h, s, v, a], format);    
+    dispatch("change", value)
   }
 
-  function convertHSVA() {
-    let hsva = [h, s, v, a]
-    let _value = format === "hexa" ? hsvaToHexa(hsva, true) : hsvaToRgba(hsva, true)
-    return _value;
-    // onchange(_value)
+  function changeFormatAndConvert(f) {
+    format = f;
+    value = convertHsvaToFormat([h, s, v, a], format);
   }
 
-  // $: {
-  //   if(!hsvaIsNull()) {
-  //     let hsva = [h, s, v, a]
-  //     // let t = value + "abs"
-  //     value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
-  //     debugger
-  //     // console.log("VAL", value)
-  //   }
-  // }
+  function handleColorInput(text) {
+    let f = getColorFormat(text)
+    if(f) {
+      format = f;
+      value = text
+      convertAndSetHSVA()
+    }
+  }
 </script>
 
 <style>
   .colorpicker-container {
     display: flex;
+    font-size: 12px;
+    font-weight: 400;
     flex-direction: column;
     height: 300px;
     width: 250px;
     background: #ffffff;
-    border: 1px solid #e8e8ef;
     border-radius: 2px;
+    box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
+  }
+
+  .control-panel {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    background: white;
+    border: 1px solid #d2d2d2
+  }
+
+  .alpha-hue-panel {
+    display: grid;
+    grid-template-columns: 25px 1fr;
+    grid-gap: 15px;
+    justify-content: center;
+    align-items: center;
+    /* padding: 8px; */
+  }
+
+  .selected-color {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: 1px solid #dedada;
+  }
+
+  .format-input-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   }
 </style>
 
@@ -94,7 +125,24 @@
 
   <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+  <div class="control-panel">
+    <div class="alpha-hue-panel">
+      <div>
+        <div class="selected-color" style={`background: ${value}`} />
+      </div>
+      <div>
+        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
+        <Slider
+          type="alpha"
+          value={a}
+          on:change={alpha => setAlpha(alpha.detail)} />
+      </div>
+    </div>
+
+    <div class="format-input-panel">
+      <ButtonGroup {format} onclick={changeFormatAndConvert} />
+      <Input {value} on:input={event => handleColorInput(event.target.value)} />
+    </div>
+  </div>
 
-  <Slider type="alpha" value={a} on:change={alpha => setAlpha(alpha.detail)} />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
new file mode 100644
index 0000000000..329d4e4adc
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -0,0 +1,78 @@
+<script>
+    import Colorpicker from "./Colorpicker.svelte"
+    import {createEventDispatcher} from "svelte"
+    import {buildStyle} from "./helpers.js"
+    import { fade } from 'svelte/transition';
+
+    export let value = "#3ec1d3ff"
+    export let format = "hexa";
+    export let width = "25px"
+    export let open = true;
+    export let fullwidth = false;
+
+    let colorPreview = null
+    let positionSide = "top"
+
+    $: width = fullwidth ? "100%" : width
+    $: style = buildStyle({width, background: value})
+    $: colorStyle = buildStyle({[positionSide]: `28px`})
+
+    const dispatch = createEventDispatcher()
+
+    function openColorpicker(event) {
+        if(colorPreview) {
+            const {top: spaceAbove, width, bottom} = colorPreview.getBoundingClientRect()            
+            const spaceBelow = window.innerHeight - bottom;
+
+            if (spaceAbove > spaceBelow) {
+                positionSide = "bottom"
+            } else {
+                positionSide = "top"
+            }
+        }
+        open = true;
+    }
+
+    function onColorChange(color) {
+        value = color.detail;
+        dispatch("change", color.detail)
+    }
+</script>
+
+<div class="color-preview-container">
+    <div bind:this={colorPreview} class="color-preview" {style} on:click={openColorpicker}></div>
+    {#if open}
+        <div class="color-preview" style={colorStyle}>
+            <Colorpicker on:change={onColorChange} {format} {value} />
+        </div>
+    {/if}
+</div>
+{#if open}
+    <div on:click|self={() => open = false} class="overlay"></div>
+{/if}
+
+<style>
+    .color-preview-container{
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        height: fit-content;
+    }
+
+    .color-preview {
+        position: absolute;
+        flex: 1;
+        height: 25px;
+        z-index: 2;
+        border-radius: 3px;
+    }
+
+    .overlay{
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 1;        
+    }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
new file mode 100644
index 0000000000..af1ea5e945
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let text = "";
+  export let selected = false;
+</script>
+
+<style>
+  .flatbutton {
+    padding: 3px 15px;
+    cursor: pointer;
+    color: black;
+    background-color: #dadada;
+    border: 1px solid #d4d4d4;
+    border-radius: 8px;
+    text-transform: uppercase;
+    margin: 5px;
+    transition: all 0.3s;
+  }
+
+  .selected {
+    color: #ffffff;
+    background-color: #003cb0;
+    border: none;
+  }
+</style>
+
+<div class="flatbutton" class:selected on:click>{text}</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
new file mode 100644
index 0000000000..04966c1f30
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -0,0 +1,28 @@
+<script>
+  export let value = "";
+</script>
+
+<style>
+  div {
+    display: flex;
+    justify-content: center;
+    margin: 5px 0px;
+  }
+
+  input {
+    width: 185px;
+    font-size: 14px;
+    background: #f1f3f4;
+    border-radius: 8px;
+    height: 27px;
+    outline-color: #003cb0;
+    color: #565252;
+    text-align: center;
+    /* border: none; */
+    border: 1px solid #dadada;
+  }
+</style>
+
+<div>
+  <input on:input type="text" {value} maxlength="25" />
+</div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
index 5f344e74a7..01a614124c 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
@@ -42,6 +42,7 @@
     width: 100%;
     height: 175px;
     cursor: crosshair;
+    overflow: hidden;
   }
 
   .picker {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 13254c29c8..ec8d99248d 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -2,7 +2,7 @@
   import { onMount, createEventDispatcher } from "svelte";
   import dragable from "./drag.js";
 
-  export let value = 1
+  export let value = 1;
   export let type = "hue";
 
   const dispatch = createEventDispatcher();
@@ -11,20 +11,22 @@
   let sliderWidth = 0;
 
   function handleClick(mouseX) {
-    const { left } = slider.getBoundingClientRect();
+    const { left, width } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
+
+    let percentageClick = (clickPosition / sliderWidth).toFixed(2)
     
-    if (clickPosition >= 0 && clickPosition <= sliderWidth) {
-      let percentageClick = clickPosition / sliderWidth;
+    if (percentageClick >= 0 && percentageClick <= 1) {
       let value =
         type === "hue"
-          ? 360 * percentageClick.toString()
-          : percentageClick.toString();
+          ? 360 * percentageClick
+          : percentageClick;
       dispatch("change", value);
     }
   }
 
-  $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
+  $: thumbPosition =
+    type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
 
   $: style = `transform: translateX(${thumbPosition - 6}px);`;
 </script>
@@ -34,10 +36,11 @@
     position: relative;
     align-self: center;
     height: 8px;
-    width: 220px;
+    width: 185px;
     border-radius: 10px;
     margin: 10px 0px;
     border: 1px solid #e8e8ef;
+    cursor: pointer;
   }
 
   .hue {
@@ -62,9 +65,10 @@
     bottom: -3px;
     height: 12px;
     width: 12px;
-    border: 1px solid black;
+    border: 1px solid #777676;
     border-radius: 50%;
     background-color: #ffffff;
+    cursor:grab;
   }
 </style>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
new file mode 100644
index 0000000000..69f94bf208
--- /dev/null
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -0,0 +1,14 @@
+export const buildStyle = styles => {
+    let str = ""
+    for (let s in styles) {
+      if (styles[s]) {
+        let key = convertCamel(s)
+        str += `${key}: ${styles[s]}; `
+      }
+    }
+    return str
+  }
+  
+  export const convertCamel = str => {
+    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+  }
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
index ad8187a09b..b497601edf 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/index.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -1,2 +1,3 @@
-import Colorpicker from './Colorpicker.svelte';
-export default Colorpicker;
+import Colorpreview from './Colorpreview.svelte';
+
+export default Colorpreview;
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index b46ad6d202..518e94ec9f 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -1,244 +1,268 @@
-export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str)
+export const isValidHex = str =>
+  /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str);
 
-const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi);
-
-export const isValidRgb = (str) => {
-	const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str);
-	if(hasValidStructure) {
-		return testRgbaValues(str.toLowerCase());
-	}
-}
-
-const findNonNumericChars = /[a-z()%\s]/gi
-
-export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c));
-
-export const testRgbaValues = (str) => {
-	const rgba = getNumericValues(str)
-	let [ r, g, b, a ] = rgba;
-
-	let isValidLengthRange = (str.startsWith("rgb(") && rgba.length === 3) || (str.startsWith("rgba(") && rgba.length === 4);
-	let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255);
-	let isValidAlphaRange =  str.startsWith("rgba(") ? a >= 0 && a <= 1 : true;
-
-	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+const getHexaValues = hexString => {
+  if (hexString.length <= 5) {
+    let hexArr = hexString.match(/[A-F0-9]/gi);
+    let t = hexArr.map(c => (c += c));
+    return t;
+  } else {
+    return hexString.match(/[A-F0-9]{2}/gi);
+  }
 };
 
-export const isValidHsl = (str) => {
-	const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str)
-	if(hasValidStructure) {
-		return testHslaValues(str.toLowerCase())
-	}
-}
+export const isValidRgb = str => {
+  const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str);
+  if (hasValidStructure) {
+    return testRgbaValues(str.toLowerCase());
+  }
+};
 
-export const testHslaValues = (str) => {
+const findNonNumericChars = /[a-z()\s]/gi;
 
-	const hsla = getNumericValues(str)
-	const [h, s, l, a] = hsla
+export const getNumericValues = str =>
+  str
+    .replace(findNonNumericChars, "")
+    .split(",")
+    .map(v => v !== "" ? v : undefined);
 
-	let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4);
-	let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100)
-	let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true
+export const testRgbaValues = str => {
+  const rgba = getNumericValues(str);
+  const [r, g, b, a] = rgba;
+  
+  let isValidLengthRange =
+    (str.startsWith("rgb(") && rgba.length === 3) ||
+    (str.startsWith("rgba(") && rgba.length === 4);
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255);
+  let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
 
-	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
-}
+  return isValidLengthRange && isValidColorRange && isValidAlphaRange;
+};
 
-export const getColorFormat = (color) => {
-	if(typeof color === "string") {
-		if(isValidHex(color)) {
-			return 'hex'
-		}else if(isValidRgb(color)) {
-			return 'rgb'
-		}else if(isValidHsl(color)) {
-			return 'hsl'
-		}
-	}
-}
+export const isValidHsl = str => {
+  const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str);
+  if (hasValidStructure) {
+    return testHslaValues(str.toLowerCase());
+  }
+};
+
+export const testHslaValues = str => {
+  const hsla = getNumericValues(str);
+  const [h, s, l, a] = hsla;
+  const isUndefined = [h,s,l].some(v => v === undefined)
+
+  if(isUndefined) return false;
+
+  let isValidLengthRange =
+    (str.startsWith("hsl(") && hsla.length === 3) ||
+    (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 isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+
+  return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange;
+};
+
+export const getColorFormat = color => {
+  if (typeof color === "string") {
+    if (isValidHex(color)) {
+      return "hex";
+    } else if (isValidRgb(color)) {
+      return "rgb";
+    } else if (isValidHsl(color)) {
+      return "hsl";
+    }
+  }
+};
 
 export const convertToHSVA = (value, format) => {
-	switch(format) {
-		case "hex":
-			return getAndConvertHexa(value)
-		case "rgb": 
-			return getAndConvertRgba(value)
-		case "hsl":
-			return getAndConvertHsla(value)
-	}
-}
+  switch (format) {
+    case "hex":
+      return getAndConvertHexa(value);
+    case "rgb":
+      return getAndConvertRgba(value);
+    case "hsl":
+      return getAndConvertHsla(value);
+  }
+};
 
 export const convertHsvaToFormat = (hsva, format) => {
-	switch(format) {
-		case "hex":
-			return hsvaToHexa(hsva, true)
-		case "rgb":
-			return hsvaToRgba(hsva, true)
-		case "hsl":
-			return hsvaToHsla(hsva, true)
-	}
-}
+  switch (format) {
+    case "hex":
+      return hsvaToHexa(hsva, true);
+    case "rgb":
+      return hsvaToRgba(hsva, true);
+    case "hsl":
+      return hsvaToHsla(hsva);
+  }
+};
 
-
-export const getAndConvertHexa = (color) => { 
-	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
-	return hexaToHSVA([ rHex, gHex, bHex ], aHex);
-}
+export const getAndConvertHexa = color => {
+  let [rHex, gHex, bHex, aHex] = getHexaValues(color);
+  return hexaToHSVA([rHex, gHex, bHex], aHex);
+};
 
 export const getAndConvertRgba = color => {
-	let rgba = getNumericValues(color);
-	return rgbaToHSVA(rgba);
-}
+  let rgba = getNumericValues(color);
+  return rgbaToHSVA(rgba);
+};
 
 export const getAndConvertHsla = color => {
-	let hsla = getNumericValues(color);
-	return hslaToHSVA(hsla)
-}
-
-export const getHSLA = ([hue, sat, val, a]) => {
-	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
-	return `hsla(${h}, ${s}, ${l}, ${a})`;
+  let hsla = getNumericValues(color);
+  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)));
-	return rgbaToHSVA(rgba);
+
+export const hexaToHSVA = (hex, alpha = "FF") => {
+  const rgba = hex
+    .map(v => parseInt(v, 16))
+    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)));
+  return rgbaToHSVA(rgba);
 };
 
-export const rgbaToHSVA = (rgba) => {
-	const [ r, g, b, a = 1 ] = rgba;
-	let hsv = _rgbToHSV([ r, g, b ]);
-	return [ ...hsv, a ];
+export const rgbaToHSVA = rgba => {
+  const [r, g, b, a = 1] = rgba;
+  let hsv = _rgbToHSV([r, g, b]);
+  return [...hsv, a];
 };
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
-	let hsv = _hslToHSV([h, s, l])
-	return [...hsv, a]
-}
-
-export const hsvaToHexa = (hsva, asString = false) => {
-	const [ r, g, b, a ] = hsvaToRgba(hsva);
-
-	const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16));
-	return asString ? `#${hexa.join('')}` : hexa
+  let hsv = _hslToHSV([h, s, l]);
+  return [...hsv, a];
 };
 
-export const hsvaToRgba = ([h, s, v, a], asString = false) => {
-	let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x));
-	let rgba = [ ...rgb, a ];
-	return asString ? `rgba(${rgba.join(",")})` : rgba
+export const hsvaToHexa = (hsva, asString = false) => {
+  const [r, g, b, a] = hsvaToRgba(hsva);
+
+  const hexa = [r, g, b]
+    .map(v => {
+		let hex = Math.round(v).toString(16)
+		return hex.length === 1 ? `0${hex}` : hex
+	})
+    .concat(Math.round(a * 255).toString(16));
+  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 rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a];
+  return asString ? `rgba(${rgba.join(",")})` : rgba;
 };
 
 export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
-	let hsl = _hsvToHSL([h, s, v])
-	let hsla = [...hsl, a]
-	return asString ? `hsla(${hsla.join(",")})` : hsla
-}
+  let [hue, sat, lum] = _hsvToHSL([h, s, v]);
+  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a];
+  return `hsla(${hsla.join(",")})`;
+};
 
-export const _hslToHSV = (hsl) => {
-	const h = hsl[0];
-	let s = hsl[1] / 100;
-	let l = hsl[2] / 100;
-	let smin = s;
-	const lmin = Math.max(l, 0.01);
+export const _hslToHSV = hsl => {
+  const h = hsl[0];
+  let s = hsl[1] / 100;
+  let l = hsl[2] / 100;
+  let smin = s;
+  const lmin = Math.max(l, 0.01);
 
-	l *= 2;
-	s *= (l <= 1) ? l : 2 - l;
-	smin *= lmin <= 1 ? lmin : 2 - lmin;
-	const v = (l + s) / 2;
-	const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+  l *= 2;
+  s *= l <= 1 ? l : 2 - l;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  const v = (l + s) / 2;
+  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
 
-	return [h, sv * 100, v * 100];
-}
-
-//Credit : https://github.com/Qix-/color-convert
-export const _rgbToHSV = (rgb) => {
-	let rdif;
-	let gdif;
-	let bdif;
-	let h;
-	let s;
-
-	const r = rgb[0] / 255;
-	const g = rgb[1] / 255;
-	const b = rgb[2] / 255;
-	const v = Math.max(r, g, b);
-	const diff = v - Math.min(r, g, b);
-	const diffc = function(c) {
-		return (v - c) / 6 / diff + 1 / 2;
-	};
-
-	if (diff === 0) {
-		h = 0;
-		s = 0;
-	} else {
-		s = diff / v;
-		rdif = diffc(r);
-		gdif = diffc(g);
-		bdif = diffc(b);
-
-		if (r === v) {
-			h = bdif - gdif;
-		} else if (g === v) {
-			h = 1 / 3 + rdif - bdif;
-		} else if (b === v) {
-			h = 2 / 3 + gdif - rdif;
-		}
-
-		if (h < 0) {
-			h += 1;
-		} else if (h > 1) {
-			h -= 1;
-		}
-	}
-
-	const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v));
-	return hsvResult;
+  return [h, sv * 100, v * 100];
 };
 
 //Credit : https://github.com/Qix-/color-convert
-export const _hsvToRgb = (hsv) => {
-	const h = hsv[0] / 60;
-	const s = hsv[1] / 100;
-	let v = hsv[2] / 100;
-	const hi = Math.floor(h) % 6;
+export const _rgbToHSV = rgb => {
+  let rdif;
+  let gdif;
+  let bdif;
+  let h;
+  let s;
 
-	const f = h - Math.floor(h);
-	const p = 255 * v * (1 - s);
-	const q = 255 * v * (1 - s * f);
-	const t = 255 * v * (1 - s * (1 - f));
-	v *= 255;
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const v = Math.max(r, g, b);
+  const diff = v - Math.min(r, g, b);
+  const diffc = function(c) {
+    return (v - c) / 6 / diff + 1 / 2;
+  };
 
-	switch (hi) {
-		case 0:
-			return [ v, t, p ];
-		case 1:
-			return [ q, v, p ];
-		case 2:
-			return [ p, v, t ];
-		case 3:
-			return [ p, q, v ];
-		case 4:
-			return [ t, p, v ];
-		case 5:
-			return [ v, p, q ];
-	}
+  if (diff === 0) {
+    h = 0;
+    s = 0;
+  } else {
+    s = diff / v;
+    rdif = diffc(r);
+    gdif = diffc(g);
+    bdif = diffc(b);
+
+    if (r === v) {
+      h = bdif - gdif;
+    } else if (g === v) {
+      h = 1 / 3 + rdif - bdif;
+    } else if (b === v) {
+      h = 2 / 3 + gdif - rdif;
+    }
+
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+  }
+
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v));
+  return hsvResult;
 };
 
 //Credit : https://github.com/Qix-/color-convert
-export const _hsvToHSL = (hsv) => {
-	
-	const h = hsv[0];
-	const s = hsv[1] / 100;
-	const v = hsv[2] / 100;
-	const vmin = Math.max(v, 0.01);
-	let sl;
-	let l;
+export const _hsvToRgb = hsv => {
+  const h = hsv[0] / 60;
+  const s = hsv[1] / 100;
+  let v = hsv[2] / 100;
+  const hi = Math.floor(h) % 6;
 
-	l = (2 - s) * v;
-	const lmin = (2 - s) * vmin;
-	sl = s * vmin;
-	sl /= lmin <= 1 ? lmin : 2 - lmin;
-	sl = sl || 0;
-	l /= 2;
+  const f = h - Math.floor(h);
+  const p = 255 * v * (1 - s);
+  const q = 255 * v * (1 - s * f);
+  const t = 255 * v * (1 - s * (1 - f));
+  v *= 255;
 
-	return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ];
+  switch (hi) {
+    case 0:
+      return [v, t, p];
+    case 1:
+      return [q, v, p];
+    case 2:
+      return [p, v, t];
+    case 3:
+      return [p, q, v];
+    case 4:
+      return [t, p, v];
+    case 5:
+      return [v, p, q];
+  }
 };
+
+//Credit : https://github.com/Qix-/color-convert
+export const _hsvToHSL = hsv => {
+  const h = hsv[0];
+  const s = hsv[1] / 100;
+  const v = hsv[2] / 100;
+  const vmin = Math.max(v, 0.01);
+  let sl;
+  let l;
+
+  l = (2 - s) * v;
+  const lmin = (2 - s) * vmin;
+  sl = s * vmin;
+  sl /= lmin <= 1 ? lmin : 2 - lmin;
+  sl = sl || 0;
+  l /= 2;
+
+  return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)];
+};
+
+export const _fixNum = (value, decimalPlaces) =>
+  Number(parseFloat(value).toFixed(decimalPlaces));

From c5c8309b09d7d5d6a1314e8e08e8c72558b7aa80 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 12 Jun 2020 12:15:17 +0100
Subject: [PATCH 06/12] bugfix - screen/page > settings throwing error

---
 .../builder/src/builderStore/store/index.js   | 56 +++++--------------
 .../builder/src/builderStore/storeUtils.js    | 13 +++++
 .../ComponentPropertiesPanel.svelte           | 29 ++--------
 .../userInterface/SettingsView.svelte         | 40 +++++++++++++
 4 files changed, 72 insertions(+), 66 deletions(-)

diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 9f91550bca..1f3ea9c0ef 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -5,7 +5,6 @@ import { writable, get } from "svelte/store"
 import api from "../api"
 import { DEFAULT_PAGES_OBJECT } from "../../constants"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { rename } from "components/userInterface/pagesParsing/renameScreen"
 import {
   createProps,
   makePropsSafe,
@@ -24,6 +23,7 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  renameCurrentScreen,
 } from "../storeUtils"
 
 export const getStore = () => {
@@ -52,7 +52,6 @@ export const getStore = () => {
   store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store)
 
   store.saveScreen = saveScreen(store)
-  store.renameScreen = renameScreen(store)
   store.deleteScreen = deleteScreen(store)
   store.setCurrentScreen = setCurrentScreen(store)
   store.setCurrentPage = setCurrentPage(store)
@@ -63,6 +62,7 @@ export const getStore = () => {
   store.addChildComponent = addChildComponent(store)
   store.selectComponent = selectComponent(store)
   store.setComponentProp = setComponentProp(store)
+  store.setPageOrScreenProp = setPageOrScreenProp(store)
   store.setComponentStyle = setComponentStyle(store)
   store.setComponentCode = setComponentCode(store)
   store.setScreenType = setScreenType(store)
@@ -207,46 +207,6 @@ const deleteScreen = store => name => {
   })
 }
 
-const renameScreen = store => (oldname, newname) => {
-  store.update(s => {
-    const { screens, pages, error, changedScreens } = rename(
-      s.pages,
-      s.screens,
-      oldname,
-      newname
-    )
-
-    if (error) {
-      // should really do something with this
-      return s
-    }
-
-    s.screens = screens
-    s.pages = pages
-    if (s.currentPreviewItem.name === oldname)
-      s.currentPreviewItem.name = newname
-
-    const saveAllChanged = async () => {
-      for (let screenName of changedScreens) {
-        const changedScreen = getExactComponent(screens, screenName)
-        await api.post(`/_builder/api/${s.appId}/screen`, changedScreen)
-      }
-    }
-
-    api
-      .patch(`/_builder/api/${s.appId}/screen`, {
-        oldname,
-        newname,
-      })
-      .then(() => saveAllChanged())
-      .then(() => {
-        _savePage(s)
-      })
-
-    return s
-  })
-}
-
 const savePage = store => async page => {
   store.update(state => {
     if (state.currentFrontEndType !== "page" || !state.currentPageName) {
@@ -400,6 +360,18 @@ const setComponentProp = store => (name, value) => {
   })
 }
 
+const setPageOrScreenProp = store => (name, value) => {
+  store.update(state => {
+    if (name === "name" && state.currentFrontEndType === "screen") {
+      state = renameCurrentScreen(value, state)
+    } else {
+      state.currentPreviewItem[name] = value
+      _saveCurrentPreviewItem(state)
+    }
+    return state
+  })
+}
+
 const setComponentStyle = store => (type, name, value) => {
   store.update(state => {
     if (!state.currentComponentInfo._styles) {
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index d6aa4d0308..ff951e6b6f 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -45,6 +45,19 @@ export const saveScreenApi = (screen, s) => {
     .then(() => savePage(s))
 }
 
+export const renameCurrentScreen = (newname, state) => {
+  const oldname = state.currentPreviewItem.name
+  state.currentPreviewItem.name = newname
+  api.patch(
+    `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`,
+    {
+      oldname,
+      newname,
+    }
+  )
+  return state
+}
+
 export const walkProps = (props, action, cancelToken = null) => {
   cancelToken = cancelToken || { cancelled: false }
   action(props, () => {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 7d33b9c963..bcebb4d2d4 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -13,7 +13,6 @@
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
-
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -40,28 +39,8 @@
 
   let panelDefinition = {}
 
-  $: {
-    if (componentPropDefinition.properties) {
-      if (selectedCategory.value === "design") {
-        panelDefinition = componentPropDefinition.properties["design"]
-      } else {
-        let panelDef = componentPropDefinition.properties["settings"]
-        if (
-          $store.currentFrontEndType === "page" &&
-          $store.currentView !== "component"
-        ) {
-          panelDefinition = [...page, ...panelDef]
-        } else if (
-          $store.currentFrontEndType === "screen" &&
-          $store.currentView !== "component"
-        ) {
-          panelDefinition = [...screen, ...panelDef]
-        } else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
+  $: panelDefinition = componentPropDefinition.properties && 
+      componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
@@ -107,7 +86,9 @@
         {componentInstance}
         {componentDefinition}
         {panelDefinition}
-        onChange={onPropChanged} />
+        onChange={onPropChanged}
+        onScreenPropChange={store.setPageOrScreenProp}
+        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
     {/if}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 99e704d1d9..17e4fe5e71 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -2,20 +2,60 @@
   import PropertyControl from "./PropertyControl.svelte"
   import InputGroup from "../common/Inputs/InputGroup.svelte"
   import Colorpicker from "../common/Colorpicker.svelte"
+  import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
+  import Input from "../common/Input.svelte"
 
   export let panelDefinition = []
   export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
+  export let onScreenPropChange = () => {}
+  export let screenOrPageInstance
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
+
+  function handleScreenPropChange (name, value) {
+    onScreenPropChange(name,value)
+    if(!isPage && name === "name") {
+      // screen name is changed... change URL
+      $goto(`./:page/${value}`)
+    }
+  }
+
+  const screenDefinition = [
+    { key: "name", label: "Name", control: Input },
+    { key: "description", label: "Description", control: Input },
+    { key: "route", label: "Route", control: Input },
+  ]
+
+  const pageDefinition = [
+    { key: "title", label: "Title", control: Input },
+    { key: "favicon", label: "Favicon", control: Input },
+  ]
+
+  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
+  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
+
 </script>
 
+{#if screenOrPageInstance}
+  {#each screenOrPageDefinition as def}
+    <PropertyControl
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={handleScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+  {/each}
+  <hr/>
+{/if}
+
 {#if panelDefinition && panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}

From f70407b6ebac881c3ddc74f54b81c07d8c7dcbea Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 15 Jun 2020 17:06:54 +0100
Subject: [PATCH 07/12] budibase dockerfile

---
 packages/server/Dockerfile   | 11 +++++++++++
 packages/server/package.json |  1 +
 packages/server/src/index.js | 13 +++++++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 packages/server/Dockerfile
 create mode 100644 packages/server/src/index.js

diff --git a/packages/server/Dockerfile b/packages/server/Dockerfile
new file mode 100644
index 0000000000..7ae24dfd62
--- /dev/null
+++ b/packages/server/Dockerfile
@@ -0,0 +1,11 @@
+FROM node:12-alpine
+
+WORKDIR /app
+
+# copy files and install dependencies
+COPY . ./
+RUN yarn 
+
+EXPOSE 4001
+
+CMD ["yarn", "run:docker"]
diff --git a/packages/server/package.json b/packages/server/package.json
index 49a5626f6f..ad89654b0e 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -27,6 +27,7 @@
     "test:integration": "jest workflow --runInBand",
     "test:watch": "jest --watch",
     "initialise": "node ../cli/bin/budi init -b local -q",
+    "run:docker": "node src/index",
     "budi": "node ../cli/bin/budi",
     "dev:builder": "nodemon ../cli/bin/budi run",
     "electron": "electron src/electron.js",
diff --git a/packages/server/src/index.js b/packages/server/src/index.js
new file mode 100644
index 0000000000..89f61d2f22
--- /dev/null
+++ b/packages/server/src/index.js
@@ -0,0 +1,13 @@
+const { resolve } = require("path")
+
+async function runServer() {
+  const budibaseDir = "~/.budibase";
+
+  process.env.BUDIBASE_DIR = resolve(budibaseDir)
+
+  const server = await require("./app")();
+  server.on("close", () => console.log("Server Closed"))
+  console.log(`Budibase running on ${JSON.stringify(server.address())}`)
+}
+
+runServer();
\ No newline at end of file

From 5d46c572b82ea6c389909ca71b77a61f0c6bc8b7 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 15 Jun 2020 17:08:59 +0100
Subject: [PATCH 08/12] lint :sparkles:

---
 .../ComponentPropertiesPanel.svelte           |  7 ++++---
 .../userInterface/SettingsView.svelte         | 21 +++++++++----------
 packages/server/src/index.js                  |  6 +++---
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index bcebb4d2d4..e0a5de3fdb 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -39,8 +39,9 @@
 
   let panelDefinition = {}
 
-  $: panelDefinition = componentPropDefinition.properties && 
-      componentPropDefinition.properties[selectedCategory.value]
+  $: panelDefinition =
+    componentPropDefinition.properties &&
+    componentPropDefinition.properties[selectedCategory.value]
 
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
@@ -88,7 +89,7 @@
         {panelDefinition}
         onChange={onPropChanged}
         onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== "component" && $store.currentPreviewItem} />
+        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
     {/if}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 17e4fe5e71..fdcb286434 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -19,9 +19,9 @@
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
 
-  function handleScreenPropChange (name, value) {
-    onScreenPropChange(name,value)
-    if(!isPage && name === "name") {
+  function handleScreenPropChange(name, value) {
+    onScreenPropChange(name, value)
+    if (!isPage && name === "name") {
       // screen name is changed... change URL
       $goto(`./:page/${value}`)
     }
@@ -40,20 +40,19 @@
 
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
-
 </script>
 
 {#if screenOrPageInstance}
   {#each screenOrPageDefinition as def}
     <PropertyControl
-        control={def.control}
-        label={def.label}
-        key={def.key}
-        value={screenOrPageInstance[def.key]}
-        onChange={handleScreenPropChange}
-        props={{ ...excludeProps(def, ['control', 'label']) }} />
+      control={def.control}
+      label={def.label}
+      key={def.key}
+      value={screenOrPageInstance[def.key]}
+      onChange={handleScreenPropChange}
+      props={{ ...excludeProps(def, ['control', 'label']) }} />
   {/each}
-  <hr/>
+  <hr />
 {/if}
 
 {#if panelDefinition && panelDefinition.length > 0}
diff --git a/packages/server/src/index.js b/packages/server/src/index.js
index 89f61d2f22..9b4c323104 100644
--- a/packages/server/src/index.js
+++ b/packages/server/src/index.js
@@ -1,13 +1,13 @@
 const { resolve } = require("path")
 
 async function runServer() {
-  const budibaseDir = "~/.budibase";
+  const budibaseDir = "~/.budibase"
 
   process.env.BUDIBASE_DIR = resolve(budibaseDir)
 
-  const server = await require("./app")();
+  const server = await require("./app")()
   server.on("close", () => console.log("Server Closed"))
   console.log(`Budibase running on ${JSON.stringify(server.address())}`)
 }
 
-runServer();
\ No newline at end of file
+runServer()

From ab5b7ccb39993e20c54ad266a34dcaddf73d8f99 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 16:46:03 +0100
Subject: [PATCH 09/12] Integrating Colorpicker with Builder

---
 .../Colorpicker/Colorpicker.svelte            |  11 +-
 .../Colorpicker/Colorpreview.svelte           | 121 ++++++++++++++----
 .../userInterface/Colorpicker/index.js        |   5 +-
 .../userInterface/Colorpicker/utils.js        |   8 +-
 .../ComponentPropertiesPanel.svelte           |   3 -
 .../userInterface/DesignView.svelte           |   9 +-
 .../userInterface/PropertyControl.svelte      |   2 +
 .../userInterface/propertyCategories.js       |  12 +-
 .../[application]/frontend/_layout.svelte     |   1 -
 9 files changed, 121 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index 8ec53d9b86..936756f403 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -22,14 +22,11 @@
   const dispatch = createEventDispatcher();
 
   onMount(() => {
-    format = getColorFormat(value);
     if (format) {
       convertAndSetHSVA()
     }
   });
 
-  const hsvaIsNull = () => [h, s, v, a].every(c => c === null);
-
   function convertAndSetHSVA() {
     let hsva = convertToHSVA(value, format);
     setHSVA(hsva);
@@ -53,17 +50,16 @@
   function setHue(hue) {
     h = hue;
     value = convertHsvaToFormat([h, s, v, a], format);    
-    dispatch("change", value)
   }
 
   function setAlpha(alpha) {
     a = alpha === "1.00" ? "1" :alpha;
     value = convertHsvaToFormat([h, s, v, a], format);    
-    dispatch("change", value)
   }
 
   function changeFormatAndConvert(f) {
     format = f;
+    console.log(f)
     value = convertHsvaToFormat([h, s, v, a], format);
   }
 
@@ -73,14 +69,16 @@
       format = f;
       value = text
       convertAndSetHSVA()
+      dispatch("change", value)
     }
   }
+
 </script>
 
 <style>
   .colorpicker-container {
     display: flex;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 400;
     flex-direction: column;
     height: 300px;
@@ -104,7 +102,6 @@
     grid-gap: 15px;
     justify-content: center;
     align-items: center;
-    /* padding: 8px; */
   }
 
   .selected-color {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
index 329d4e4adc..fa880b6292 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte
@@ -1,36 +1,83 @@
 <script>
     import Colorpicker from "./Colorpicker.svelte"
-    import {createEventDispatcher} from "svelte"
+    import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
     import {buildStyle} from "./helpers.js"
     import { fade } from 'svelte/transition';
+    import {getColorFormat} from "./utils.js"
 
     export let value = "#3ec1d3ff"
-    export let format = "hexa";
+    export let open = false;
     export let width = "25px"
-    export let open = true;
-    export let fullwidth = false;
+    export let height = "25px"
 
+    let format = "hexa";
+    let dimensions = {top: 0, left: 0}
     let colorPreview = null
-    let positionSide = "top"
 
-    $: width = fullwidth ? "100%" : width
-    $: style = buildStyle({width, background: value})
-    $: colorStyle = buildStyle({[positionSide]: `28px`})
+    let previewHeight = null    
+    let previewWidth = null
+    let pickerWidth = 250
+    let pickerHeight = 300
+
+    let anchorEl = null
+    let parentNodes = [];
+    let errorMsg = null
+
+    $: previewStyle = buildStyle({width, height, background: value})
+    $: errorPreviewStyle = buildStyle({width, height})
+    $: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})    
 
     const dispatch = createEventDispatcher()
 
+    beforeUpdate(() => {
+       format = getColorFormat(value)
+       if(!format) {
+           errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
+           console.error(errorMsg)
+       }else{
+           errorMsg = null
+       }
+    })
+
+    afterUpdate(() => {
+        if(colorPreview && colorPreview.offsetParent && !anchorEl) {
+            //Anchor relative to closest positioned ancestor element. If none, then anchor to body
+            anchorEl = colorPreview.offsetParent 
+                let curEl = colorPreview
+                let els = []
+                //Travel up dom tree from preview element to find parent elements that scroll
+                while(!anchorEl.isSameNode(curEl)) {
+                    curEl = curEl.parentNode
+                    let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")                    
+                    if(/scroll|auto/.test(elOverflow)) {
+                        els.push(curEl)
+                    }
+                } 
+                parentNodes = els
+        }
+    })
+
+
     function openColorpicker(event) {
         if(colorPreview) {
-            const {top: spaceAbove, width, bottom} = colorPreview.getBoundingClientRect()            
-            const spaceBelow = window.innerHeight - bottom;
+            const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()   
+            const {innerHeight, innerWidth} = window
 
-            if (spaceAbove > spaceBelow) {
-                positionSide = "bottom"
-            } else {
-                positionSide = "top"
-            }
+            const {offsetLeft, offsetTop} = colorPreview
+            //get the scrollTop value for all scrollable parent elements 
+            let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
+
+            const spaceBelow = (innerHeight - spaceAbove) - previewHeight
+            const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop      
+            
+            //TOO: Testing and Scroll Awareness for x Scroll
+            const spaceRight = (innerWidth - spaceLeft) + previewWidth
+            const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) + pickerWidth : offsetLeft - pickerWidth
+
+            dimensions = {top, left}
+
+            open = true;        
         }
-        open = true;
     }
 
     function onColorChange(color) {
@@ -40,31 +87,48 @@
 </script>
 
 <div class="color-preview-container">
-    <div bind:this={colorPreview} class="color-preview" {style} on:click={openColorpicker}></div>
-    {#if open}
-        <div class="color-preview" style={colorStyle}>
+    {#if !errorMsg}
+        <div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker}></div>
+        {#if open}
+        <div class="picker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth} style={pickerStyle}>
             <Colorpicker on:change={onColorChange} {format} {value} />
         </div>
+        <div on:click|self={() => open = false} class="overlay"></div>
+        {/if}
+    {:else}
+        <div class="color-preview preview-error" style={errorPreviewStyle}>
+            <span>&times;</span>
+        </div>
     {/if}
 </div>
-{#if open}
-    <div on:click|self={() => open = false} class="overlay"></div>
-{/if}
+
 
 <style>
     .color-preview-container{
-        position: relative;
         display: flex;
         flex-flow: row nowrap;
         height: fit-content;
     }
 
     .color-preview {
-        position: absolute;
         flex: 1;
-        height: 25px;
-        z-index: 2;
         border-radius: 3px;
+        border: 1px solid #dedada;
+    }
+
+    .preview-error {
+        background: #cccccc;
+        color: #808080;
+        text-align: center;
+        font-size: 18px;
+        cursor: not-allowed;
+    }
+
+    .picker-container {
+        position: absolute;
+        z-index: 3;
+        width: fit-content;
+        height: fit-content;
     }
 
     .overlay{
@@ -73,6 +137,7 @@
         bottom: 0;
         left: 0;
         right: 0;
-        z-index: 1;        
+        z-index: 2;        
     }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js
index b497601edf..21e19acc9b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/index.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/index.js
@@ -1,3 +1,2 @@
-import Colorpreview from './Colorpreview.svelte';
-
-export default Colorpreview;
+import Colorpreview from "./Colorpreview.svelte"
+export default Colorpreview
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 518e94ec9f..5e3791ae42 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -127,9 +127,11 @@ export const rgbaToHSVA = rgba => {
 };
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
-  let hsv = _hslToHSV([h, s, l]);
-  return [...hsv, a];
-};
+  let sat = s.replace(/%/, "")
+  let lum = l.replace(/%/, "")
+  let hsv = _hslToHSV([h, sat, lum])
+  return [...hsv, a]
+}
 
 export const hsvaToHexa = (hsva, asString = false) => {
   const [r, g, b, a] = hsvaToRgba(hsva);
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index bcebb4d2d4..927f6ff13f 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -102,8 +102,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow-x: hidden;
-    overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
   }
@@ -121,6 +119,5 @@
     margin-top: 20px;
     flex: 1 1 auto;
     min-height: 0;
-    overflow-y: auto;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 070ba502e3..6826bddc5c 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -31,6 +31,7 @@
     <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
   </div>
 
+<div class="positioned-wrapper">
   <div class="design-view-property-groups">
     {#if propertyGroupNames.length > 0}
       {#each propertyGroupNames as groupName}
@@ -49,6 +50,7 @@
     {/if}
   </div>
 </div>
+</div>
 
 <style>
   .design-view-container {
@@ -62,10 +64,15 @@
     flex: 0 0 50px;
   }
 
+  .positioned-wrapper{
+    position: relative;
+    display: flex;
+    min-height: 0;
+  }
+
   .design-view-property-groups {
     flex: 1;
     overflow-y: auto;
-    overflow-x: hidden;
     min-height: 0;
   }
 
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index a7ea35c014..159efdd08e 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -12,6 +12,8 @@
     if (v.target) {
       let val = props.valueKey ? v.target[props.valueKey] : v.target.value
       onChange(key, val)
+    }else if(v.detail) {
+      onChange(key, v.detail)
     } else {
       onChange(key, v)
     }
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index c0485304ce..d2043289c8 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -2,7 +2,7 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
-// import Colorpicker from "../common/Colorpicker.svelte"
+import Colorpicker from "./Colorpicker"
 /*
   TODO: Allow for default values for all properties
 */
@@ -256,8 +256,8 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: Input,
-    placeholder: "hex",
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "align",
@@ -305,7 +305,8 @@ export const background = [
   {
     label: "Color",
     key: "background",
-    control: Input,
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "Image",
@@ -347,7 +348,8 @@ export const border = [
   {
     label: "Color",
     key: "border-color",
-    control: Input,
+    control: Colorpicker,
+    defaultValue: "#000",
   },
   {
     label: "Style",
diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte
index 78ade02904..8bdb95becf 100644
--- a/packages/builder/src/pages/[application]/frontend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte
@@ -103,7 +103,6 @@
     background-color: var(--white);
     min-height: 0px;
     height: calc(100vh - 69px);
-    overflow-y: hidden;
   }
 
   .nav-group-header > div:nth-child(1) {

From 2db5dcfae236ce00a7a1dbbd1de74422c6c58708 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 16:57:38 +0100
Subject: [PATCH 10/12] Lint fix

---
 .../userInterface/Colorpicker/drag.js         |  34 +-
 .../userInterface/Colorpicker/helpers.js      |  22 +-
 .../userInterface/Colorpicker/utils.js        | 297 +++++++++---------
 .../userInterface/Colorpicker/utils.test.js   | 150 +++++----
 4 files changed, 264 insertions(+), 239 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js
index 842d157ad2..0d7a9c2481 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/drag.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js
@@ -1,22 +1,22 @@
 export default function(node) {
-	function handleMouseDown() {
-		window.addEventListener('mousemove', handleMouseMove);
-		window.addEventListener('mouseup', handleMouseUp);
-	}
+  function handleMouseDown() {
+    window.addEventListener("mousemove", handleMouseMove)
+    window.addEventListener("mouseup", handleMouseUp)
+  }
 
-	function handleMouseMove(event) {
-		let mouseX = event.clientX;
-		node.dispatchEvent(
-			new CustomEvent('drag', {
-				detail: mouseX
-			})
-		);
-	}
+  function handleMouseMove(event) {
+    let mouseX = event.clientX
+    node.dispatchEvent(
+      new CustomEvent("drag", {
+        detail: mouseX,
+      })
+    )
+  }
 
-	function handleMouseUp() {
-		window.removeEventListener('mousedown', handleMouseDown);
-		window.removeEventListener('mousemove', handleMouseMove);
-	}
+  function handleMouseUp() {
+    window.removeEventListener("mousedown", handleMouseDown)
+    window.removeEventListener("mousemove", handleMouseMove)
+  }
 
-	node.addEventListener('mousedown', handleMouseDown);
+  node.addEventListener("mousedown", handleMouseDown)
 }
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
index 69f94bf208..5d9ff750af 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -1,14 +1,14 @@
 export const buildStyle = styles => {
-    let str = ""
-    for (let s in styles) {
-      if (styles[s]) {
-        let key = convertCamel(s)
-        str += `${key}: ${styles[s]}; `
-      }
+  let str = ""
+  for (let s in styles) {
+    if (styles[s]) {
+      let key = convertCamel(s)
+      str += `${key}: ${styles[s]}; `
     }
-    return str
   }
-  
-  export const convertCamel = str => {
-    return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
-  }
\ No newline at end of file
+  return str
+}
+
+export const convertCamel = str => {
+  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 5e3791ae42..d49efc876e 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/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 t = hexArr.map(c => (c += c));
-    return t;
+    let hexArr = hexString.match(/[A-F0-9]/gi)
+    let t = hexArr.map(c => (c += c))
+    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 [r, g, b, a] = rgba;
-  
+  const rgba = getNumericValues(str)
+  const [r, g, b, a] = rgba
+
   let isValidLengthRange =
     (str.startsWith("rgb(") && rgba.length === 3) ||
-    (str.startsWith("rgba(") && rgba.length === 4);
-  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255);
-  let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+    (str.startsWith("rgba(") && rgba.length === 4)
+  let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255)
+  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 [h, s, l, a] = hsla;
-  const isUndefined = [h,s,l].some(v => v === undefined)
+  const hsla = getNumericValues(str)
+  const [h, s, l, a] = hsla
+  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 isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true;
+  let isValidSatLum = [s, l].every(
+    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);
-  return hexaToHSVA([rHex, gHex, bHex], aHex);
-};
+  let [rHex, gHex, bHex, aHex] = getHexaValues(color)
+  return hexaToHSVA([rHex, gHex, bHex], aHex)
+}
 
 export const getAndConvertRgba = color => {
-  let rgba = getNumericValues(color);
-  return rgbaToHSVA(rgba);
-};
+  let rgba = getNumericValues(color)
+  return rgbaToHSVA(rgba)
+}
 
 export const getAndConvertHsla = color => {
-  let hsla = getNumericValues(color);
-  return hslaToHSVA(hsla);
-};
-
+  let hsla = getNumericValues(color)
+  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)));
-  return rgbaToHSVA(rgba);
-};
+    .concat(Number((parseInt(alpha, 16) / 255).toFixed(2)))
+  return rgbaToHSVA(rgba)
+}
 
 export const rgbaToHSVA = rgba => {
-  const [r, g, b, a = 1] = rgba;
-  let hsv = _rgbToHSV([r, g, b]);
-  return [...hsv, a];
-};
+  const [r, g, b, a = 1] = rgba
+  let hsv = _rgbToHSV([r, g, b])
+  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)
-		return hex.length === 1 ? `0${hex}` : hex
-	})
-    .concat(Math.round(a * 255).toString(16));
-  return asString ? `#${hexa.join("")}` : hexa;
-};
+      let hex = Math.round(v).toString(16)
+      return hex.length === 1 ? `0${hex}` : hex
+    })
+    .concat(Math.round(a * 255).toString(16))
+  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 rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a];
-  return asString ? `rgba(${rgba.join(",")})` : rgba;
-};
+  let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x))
+  let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a]
+  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 hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a];
-  return `hsla(${hsla.join(",")})`;
-};
+  let [hue, sat, lum] = _hsvToHSL([h, s, v])
+  let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]
+  return `hsla(${hsla.join(",")})`
+}
 
 export const _hslToHSV = hsl => {
-  const h = hsl[0];
-  let s = hsl[1] / 100;
-  let l = hsl[2] / 100;
-  let smin = s;
-  const lmin = Math.max(l, 0.01);
+  const h = hsl[0]
+  let s = hsl[1] / 100
+  let l = hsl[2] / 100
+  let smin = s
+  const lmin = Math.max(l, 0.01)
 
-  l *= 2;
-  s *= l <= 1 ? l : 2 - l;
-  smin *= lmin <= 1 ? lmin : 2 - lmin;
-  const v = (l + s) / 2;
-  const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
+  l *= 2
+  s *= l <= 1 ? l : 2 - l
+  smin *= lmin <= 1 ? lmin : 2 - lmin
+  const v = (l + s) / 2
+  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 gdif;
-  let bdif;
-  let h;
-  let s;
+  let rdif
+  let gdif
+  let bdif
+  let h
+  let s
 
-  const r = rgb[0] / 255;
-  const g = rgb[1] / 255;
-  const b = rgb[2] / 255;
-  const v = Math.max(r, g, b);
-  const diff = v - Math.min(r, g, b);
+  const r = rgb[0] / 255
+  const g = rgb[1] / 255
+  const b = rgb[2] / 255
+  const v = Math.max(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;
-    s = 0;
+    h = 0
+    s = 0
   } else {
-    s = diff / v;
-    rdif = diffc(r);
-    gdif = diffc(g);
-    bdif = diffc(b);
+    s = diff / v
+    rdif = diffc(r)
+    gdif = diffc(g)
+    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));
-  return hsvResult;
-};
+  const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v))
+  return hsvResult
+}
 
 //Credit : https://github.com/Qix-/color-convert
 export const _hsvToRgb = hsv => {
-  const h = hsv[0] / 60;
-  const s = hsv[1] / 100;
-  let v = hsv[2] / 100;
-  const hi = Math.floor(h) % 6;
+  const h = hsv[0] / 60
+  const s = hsv[1] / 100
+  let v = hsv[2] / 100
+  const hi = Math.floor(h) % 6
 
-  const f = h - Math.floor(h);
-  const p = 255 * v * (1 - s);
-  const q = 255 * v * (1 - s * f);
-  const t = 255 * v * (1 - s * (1 - f));
-  v *= 255;
+  const f = h - Math.floor(h)
+  const p = 255 * v * (1 - s)
+  const q = 255 * v * (1 - s * f)
+  const t = 255 * v * (1 - s * (1 - f))
+  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 s = hsv[1] / 100;
-  const v = hsv[2] / 100;
-  const vmin = Math.max(v, 0.01);
-  let sl;
-  let l;
+  const h = hsv[0]
+  const s = hsv[1] / 100
+  const v = hsv[2] / 100
+  const vmin = Math.max(v, 0.01)
+  let sl
+  let l
 
-  l = (2 - s) * v;
-  const lmin = (2 - s) * vmin;
-  sl = s * vmin;
-  sl /= lmin <= 1 ? lmin : 2 - lmin;
-  sl = sl || 0;
-  l /= 2;
+  l = (2 - s) * v
+  const lmin = (2 - s) * vmin
+  sl = s * vmin
+  sl /= lmin <= 1 ? lmin : 2 - lmin
+  sl = sl || 0
+  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))
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index 0354468b75..56ea17419a 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/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', () => {
-    test("convert from hexa", () => {
-      expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) 
-    })
+describe("convertToHSVA - convert to hsva from format", () => {
+  test("convert from hexa", () => {
+    expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51])
+  })
 
-    test("convert from hex", () => {
-        expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) 
-    })
+  test("convert from hex", () => {
+    expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1])
+  })
 
-    test("convert from rgba", () => {
-        expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1])
-    })
+  test("convert from rgba", () => {
+    expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([
+      309,
+      86,
+      95,
+      1,
+    ])
+  })
 
-    test("convert from rgb", () => {
-        expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
-    })
+  test("convert from rgb", () => {
+    expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1])
+  })
 
-    test("convert from from hsl", () => {
-        expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 1])
-    })
-
-    test("convert from from hsla", () => {
-        expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([264, 68.6, 100, 0.51])
-    })
+  test("convert from from hsl", () => {
+    expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([
+      264,
+      68.6,
+      100,
+      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', () => {
-    test('Convert to hexa', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
-    })
+describe("convertHsvaToFormat - convert from hsva to format", () => {
+  test("Convert to hexa", () => {
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80")
+  })
 
-    test('Convert to rgba', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)")
-    })
+  test("Convert to rgba", () => {
+    expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe(
+      "rgba(150,80,255,0.75)"
+    )
+  })
 
-    test('Convert to hsla', () => {
-        expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe("hsla(264,100,65.7,1)")
-    })
+  test("Convert to hsla", () => {
+    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 valid hex string", () => {
-         expect(getColorFormat("#FFF")).toBe("hex")
-     })
+  test("Testing invalid hex string", () => {
+    expect(getColorFormat("#FFZ")).toBeUndefined()
+  })
 
-     test("Testing invalid hex string", () => {
-        expect(getColorFormat("#FFZ")).toBeUndefined()
-    })
+  test("Testing valid hex with alpha", () => {
+    expect(getColorFormat("#FF00BB80")).toBe("hex")
+  })
 
-    test("Testing valid hex with alpha", () => {
-        expect(getColorFormat("#FF00BB80")).toBe("hex")
-    })
+  test("Test valid rgb value", () => {
+    expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
+  })
 
-    test("Test valid rgb value", () => {
-        expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb")
-    })
+  test("Testing invalid rgb value", () => {
+    expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
+  })
 
-    test("Testing invalid rgb value", () => {
-        expect(getColorFormat("rgb(255, 0)")).toBeUndefined()
-    })
+  test("Testing rgb value with alpha", () => {
+    expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
+  })
 
-    test("Testing rgb value with alpha", () => {
-        expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb")
-    })
+  test("Testing rgb value with incorrectly provided alpha", () => {
+    expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
+  })
 
-    test("Testing rgb value with incorrectly provided alpha", () => {
-        expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined()
-    })
+  test("Testing invalid hsl value", () => {
+    expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
+  })
 
-    test("Testing invalid hsl value", () => {
-        expect(getColorFormat("hsla(255, 0)")).toBeUndefined()
-    })
+  test("Testing hsla value with alpha", () => {
+    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+  })
 
-    test("Testing hsla value with alpha", () => {
-        expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
-    })
+  test("Testing hsl value with incorrectly provided alpha", () => {
+    expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
+  })
 
-    test("Testing hsl value with incorrectly provided alpha", () => {
-        expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined()
-    })
-
-    test("Testing out of bounds hsl", () => {
-        expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
-    })
+  test("Testing out of bounds hsl", () => {
+    expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined()
+  })
 })
-

From a7f7d32c0645421ab8a07799eb001980956962ce Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 17:44:47 +0100
Subject: [PATCH 11/12] Lint and test fixes

---
 .../builder/src/components/userInterface/Colorpicker/utils.js | 4 ++--
 .../src/components/userInterface/Colorpicker/utils.test.js    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index d49efc876e..98f3f53f9b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -132,14 +132,14 @@ export const hexaToHSVA = (hex, alpha = "FF") => {
 export const rgbaToHSVA = rgba => {
   const [r, g, b, a = 1] = rgba
   let hsv = _rgbToHSV([r, g, b])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hslaToHSVA = ([h, s, l, a = 1]) => {
   let sat = s.replace(/%/, "")
   let lum = l.replace(/%/, "")
   let hsv = _hslToHSV([h, sat, lum])
-  return [...hsv, a]
+  return [...hsv, a].map(x => parseFloat(x))
 }
 
 export const hsvaToHexa = (hsva, asString = false) => {
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
index 56ea17419a..c47d54ed1b 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js
@@ -54,7 +54,7 @@ describe("convertHsvaToFormat - convert from hsva to format", () => {
 
   test("Convert to hsla", () => {
     expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe(
-      "hsla(264,100,65.7,1)"
+      "hsla(264,100%,66%,1)"
     )
   })
 })
@@ -93,7 +93,7 @@ describe("Get Color Format", () => {
   })
 
   test("Testing hsla value with alpha", () => {
-    expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl")
+    expect(getColorFormat("hsla(150, 60%, 50%, 0.5)")).toBe("hsl")
   })
 
   test("Testing hsl value with incorrectly provided alpha", () => {

From 869c8de816cfe3e3dd73c0ba6aef242d804035c2 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 17 Jun 2020 17:50:23 +0100
Subject: [PATCH 12/12] Removing unused asString

---
 .../builder/src/components/userInterface/Colorpicker/utils.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js
index 98f3f53f9b..e14c8711ab 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/utils.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js
@@ -160,7 +160,7 @@ export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => {
   return asString ? `rgba(${rgba.join(",")})` : rgba
 }
 
-export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => {
+export const hsvaToHsla = ([h, s, v, a = 1]) => {
   let [hue, sat, lum] = _hsvToHSL([h, s, v])
   let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]
   return `hsla(${hsla.join(",")})`