refactor: added FlexLayout for flex layouts

src/utils.js

@@ -56,6 +56,27 @@ function request(data, headers) {
   });
 }
 
+/**
+ *
+ * @param {String[]} items
+ * @param {Number} gap
+ * @param {string} direction
+ *
+ * @description
+ * Auto layout utility, allows us to layout things
+ * vertically or horizontally with proper gaping
+ */
+function FlexLayout({ items, gap, direction }) {
+  // filter() for filtering out empty strings
+  return items.filter(Boolean).map((item, i) => {
+    let transform = `translate(${gap * i}, 0)`;
+    if (direction === "column") {
+      transform = `translate(0, ${gap * i})`;
+    }
+    return `<g transform="${transform}">${item}</g>`;
+  });
+}
+
 module.exports = {
   renderError,
   kFormatter,
@@ -64,4 +85,5 @@ module.exports = {
   request,
   parseBoolean,
   fallbackColor,
+  FlexLayout,
 };