🎉 Migrate from figwheel to shadow-cljs.

2025-03-20 19:51:23 -05:00 · 2020-03-29 14:33:54 +02:00 · 2020-03-29 14:33:54 +02:00 · f7bfc4d135
commit f7bfc4d135
parent 7d0037bfaa
47 changed files with 2021 additions and 41065 deletions
--- a/.gitignore
+++ b/.gitignore
@ -20,6 +20,7 @@ node_modules
 /frontend/target/
 /frontend/dist/
 /frontend/out/
+/frontend/.shadow-cljs
 /frontend/resources/public/*
 /docker/frontend/dist
 /docker/backend/dist
--- a/docker/devenv/Dockerfile
+++ b/docker/devenv/Dockerfile
@ -81,8 +81,12 @@ RUN set -ex; \
    git clone https://github.com/creationix/nvm.git .nvm; \
    bash -c "source .nvm/nvm.sh && nvm install $NODE_VERSION"; \
    bash -c "source .nvm/nvm.sh && nvm alias default $NODE_VERSION"; \
-    bash -c "source .nvm/nvm.sh && nvm use default";
+    bash -c "source .nvm/nvm.sh && nvm use default"; \
+    bash -c "source .nvm/nvm.sh && npm install -g shadow-cljs";

+
+EXPOSE 3447
+EXPOSE 3448
 EXPOSE 3449
 EXPOSE 6060
 EXPOSE 9090
--- a/docker/devenv/docker-compose.yaml
+++ b/docker/devenv/docker-compose.yaml
@ -28,6 +28,8 @@ services:
      - "${PWD}:/home/uxbox/uxbox"

    ports:
+      - 3447:3447
+      - 3448:3448
      - 3449:3449
      - 6060:6060
      - 9090:9090
--- a/docker/devenv/files/start-tmux.sh
+++ b/docker/devenv/files/start-tmux.sh
@ -11,10 +11,10 @@ popd

 tmux -2 new-session -d -s uxbox

-tmux new-window -t uxbox:1 -n 'figwheel'
+tmux new-window -t uxbox:1 -n 'shadow watch'
 tmux select-window -t uxbox:1
 tmux send-keys -t uxbox 'cd uxbox/frontend' enter C-l
-tmux send-keys -t uxbox 'clojure -Adev tools.clj figwheel' enter
+tmux send-keys -t uxbox 'shadow-cljs watch main' enter

 tmux new-window -t uxbox:2 -n 'backend'
 tmux select-window -t uxbox:2
--- a/docker/devenv/files/tmux.conf
+++ b/docker/devenv/files/tmux.conf
@ -2,3 +2,5 @@ set -g mouse off
 set -g history-limit 50000
 setw -g mode-keys emacs

+bind-key -r C-n resize-pane -U
+bind-key -r C-m resize-pane -D
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@ -1,40 +1,38 @@
-{:deps
+{:paths ["src" "vendor" "resources" "../common"]
+ :deps
 {org.clojure/clojurescript {:mvn/version "1.10.597"}
  org.clojure/clojure {:mvn/version "1.10.1"}
  com.cognitect/transit-cljs {:mvn/version "0.8.256"}

-  cljsjs/react {:mvn/version "16.13.0-0"}
-  cljsjs/react-dom {:mvn/version "16.13.0-0"}
-  cljsjs/react-dom-server {:mvn/version "16.13.0-0"}
-
  environ/environ {:mvn/version "1.1.0"}
  metosin/reitit-core {:mvn/version "0.3.10"}
  expound/expound {:mvn/version "0.7.2"}

-  funcool/beicon {:mvn/version "2020.03.23-1"}
+  funcool/beicon {:mvn/version "2020.03.29-1"}
  funcool/cuerdas {:mvn/version "2020.03.26-3"}
  funcool/lentes {:mvn/version "1.4.0-SNAPSHOT"}
  funcool/potok {:mvn/version "2.8.0-SNAPSHOT"}
  funcool/promesa {:mvn/version "5.1.0"}
-  funcool/rumext {:mvn/version "2020.03.24-1"}
+  funcool/rumext {:mvn/version "2020.03.24-1"
+                  :exclusions [cljsjs/react
+                               cljsjs/react-dom]}
  }
- :paths ["src" "vendor" "resources" "../common"]
 :aliases
 {:dev
  {:extra-deps
   {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
    com.bhauman/rebel-readline {:mvn/version "0.1.4"}
-    com.bhauman/figwheel-main {:mvn/version "0.2.3"}
    org.clojure/tools.namespace {:mvn/version "0.3.1"}
+
    metosin/jsonista {:mvn/version "0.2.5"}
    funcool/datoteka {:mvn/version "1.2.0"}
    binaryage/devtools {:mvn/version "RELEASE"}

+    thheller/shadow-cljs {:mvn/version "2.8.93"}
+
    ;; i18n parsing
    carocad/parcera {:mvn/version "0.11.0"}
    org.antlr/antlr4-runtime {:mvn/version "4.7"}}
-
-
   :extra-paths ["test"]}

  :repl
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -12,7 +12,7 @@
    "defaults"
  ],
  "scripts": {},
-  "dependencies": {
+  "devDependencies": {
    "autoprefixer": "^9.7.4",
    "clean-css": "^4.2.3",
    "gulp": "4.0.2",
@ -25,6 +25,17 @@
    "postcss": "^7.0.27",
    "rimraf": "^3.0.0",
    "sass": "^1.26.0",
-    "source-map-support": "^0.5.16"
+    "shadow-cljs": "^2.8.94"
+  },
+  "dependencies": {
+    "date-fns": "^2.11.1",
+    "react": "^16.13.1",
+    "react-color": "^2.18.0",
+    "react-dnd": "^10.0.2",
+    "react-dnd-html5-backend": "^10.0.2",
+    "react-dom": "^16.13.1",
+    "rxjs": "^7.0.0-alpha.1",
+    "source-map-support": "^0.5.16",
+    "xregexp": "^4.3.0"
  }
 }
--- a/frontend/shadow-cljs.edn
+++ b/frontend/shadow-cljs.edn
@ -0,0 +1,15 @@
+{:deps {:aliases [:dev]}
+ :dev-http {3449 "classpath:public"}
+ :http {:port 3448}
+ :nrepl {:port 3447}
+
+ :builds
+ {:main
+  {:target :browser
+   :output-dir "resources/public/js/"
+   :asset-path "/js"
+   :modules {:main {:entries [uxbox.main]}}
+   :compiler-options {:output-feature-set :es8}
+   :release {:compiler-options {:pseudo-names false
+                                :pretty-print false}}
+   }}}
--- a/frontend/src/uxbox/main.cljs
+++ b/frontend/src/uxbox/main.cljs
@ -7,7 +7,7 @@
 ;;
 ;; Copyright (c) 2020 UXBOX Labs SL

-(ns ^:figwheel-hooks uxbox.main
+(ns uxbox.main
  (:require
   [cljs.spec.alpha :as s]
   [beicon.core :as rx]
@ -80,7 +80,7 @@
  (mf/unmount (dom/get-element "loader"))
  (init-ui))

-(defn ^:after-load after-load
+(defn ^:dev/after-load after-load
  []
  (when (= "main" (unchecked-get js/window app-sym))
    (reinit)))
--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@ -39,7 +39,7 @@
   [uxbox.util.transit :as t]
   [uxbox.util.uuid :as uuid]
   [uxbox.util.webapi :as wapi]
-   [vendor.randomcolor])
+   #_[vendor.randomcolor])
  (:import goog.events.EventType
           goog.events.KeyCodes
           goog.ui.KeyboardShortcutHandler))
@ -132,7 +132,7 @@
 (defn- assign-user-color
  [state user-id]
  (let [user (get-in state [:workspace-users :by-id user-id])
-        color (js/randomcolor)
+        color "#000000" #_(js/randomcolor)
        user (if (string? (:color user))
               user
               (assoc user :color color))]
--- a/frontend/src/uxbox/main/ui/colorpicker.cljs
+++ b/frontend/src/uxbox/main/ui/colorpicker.cljs
@ -10,16 +10,16 @@
   [uxbox.main.store :as st]
   [goog.object :as gobj]
   [rumext.alpha :as mf]
-   [vendor.react-color]))
+   ["react-color/lib/components/sketch/Sketch" :as sketch]))

 (mf/defc colorpicker
  [{:keys [on-change value colors] :as props}]
  (let [on-change-complete #(on-change (gobj/get % "hex"))]
-    [:> js/SketchPicker {:color value
-                         :disableAlpha true
-                         :presetColors colors
-                         :onChangeComplete on-change-complete
-                         :style {:box-shadow "none"}}]))
+    [:> sketch/default {:color value
+                        :disableAlpha true
+                        :presetColors colors
+                        :onChangeComplete on-change-complete
+                        :style {:box-shadow "none"}}]))

 (defn- lookup-colors
  [state]
--- a/frontend/src/uxbox/util/rdnd.cljs
+++ b/frontend/src/uxbox/util/rdnd.cljs
@ -5,10 +5,12 @@
 ;; Copyright (c) 2019 Andrey Antukh <niwi@niwi.nz>

 (ns uxbox.util.rdnd
-  (:require [vendor.react-dnd]))
+  (:require
+   ["react-dnd/dist/esm/hooks" :as hooks]
+   ["react-dnd/dist/esm/common" :as common]
+   ["react-dnd-html5-backend" :as backend]))

-(def useDrop js/ReactDnd.useDrop)
-(def useDrag js/ReactDnd.useDrag)
-
-(def provider js/ReactDnd.DndProvider)
-(def html5 js/ReactDnd.HTML5Backend)
+(def useDrop hooks/useDrop)
+(def useDrag hooks/useDrag)
+(def provider common/DndProvider)
+(def html5 backend/default)
--- a/frontend/src/uxbox/util/time.cljs
+++ b/frontend/src/uxbox/util/time.cljs
@ -9,11 +9,18 @@

 (ns uxbox.util.time
  (:require
-   [vendor.datefns]
+   ["date-fns/format" :as df-format]
+   ["date-fns/formatDistanceToNow" :as df-format-distance]
+   ["date-fns/locale/fr" :as df-fr-locale]
+   ["date-fns/locale/en-US" :as df-en-locale]
   [goog.object :as gobj]))

-(def ^:private dateFns js/dateFns)
-(def ^:private locales (gobj/get js/dateFns "locales"))
+(def ^:private locales
+  #js {:default df-en-locale
+       :en df-en-locale
+       :en_US df-en-locale
+       :fr df-fr-locale
+       :fr_FR df-fr-locale})

 (defn now
  "Return the current Instant."
@ -24,14 +31,14 @@
  ([v fmt] (format v fmt nil))
  ([v fmt {:keys [locale]
           :or {locale "default"}}]
-   (.format dateFns v fmt #js {:locale (gobj/get locales locale)})))
+   (df-format v fmt #js {:locale (gobj/get locales locale)})))

 (defn timeago
  ([v] (timeago v nil))
  ([v {:keys [seconds? locale]
       :or {seconds? true
            locale "default"}}]
-   (.formatDistanceToNow dateFns v
-                         #js {:includeSeconds seconds?
-                              :addSuffix true
-                              :locale (gobj/get locales locale)})))
+   (df-format-distance v
+                       #js {:includeSeconds seconds?
+                            :addSuffix true
+                            :locale (gobj/get locales locale)})))
--- a/frontend/vendor/.babelrc
+++ b/frontend/vendor/.babelrc
@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", {"targets": {"browsers": "last 1 Chrome versions"}, "modules": false}],
-    ["@babel/preset-react"]
-  ],
-  "plugins": ["@babel/plugin-proposal-export-default-from",
-              "@babel/plugin-proposal-class-properties"]
-}
--- a/frontend/vendor/beicon/impl/rxjs.cljs
+++ b/frontend/vendor/beicon/impl/rxjs.cljs
@ -0,0 +1,4 @@
+(ns beicon.impl.rxjs
+  (:require ["rxjs" :as rx]))
+
+(goog/exportSymbol "rxjsMain" rx)
--- a/frontend/vendor/beicon/impl/rxjs_operators.cljs
+++ b/frontend/vendor/beicon/impl/rxjs_operators.cljs
@ -0,0 +1,4 @@
+(ns beicon.impl.rxjs-operators
+  (:require ["rxjs/operators" :as rxop]))
+
+(goog/exportSymbol "rxjsOperators" rxop)
--- a/frontend/vendor/cljsjs/react.cljs
+++ b/frontend/vendor/cljsjs/react.cljs
@ -0,0 +1,4 @@
+(ns cljsjs.react
+  (:require ["react" :as react]))
+
+(goog/exportSymbol "React" react)
--- a/frontend/vendor/cljsjs/react_dom.cljs
+++ b/frontend/vendor/cljsjs/react_dom.cljs
@ -0,0 +1,4 @@
+(ns cljsjs.react-dom
+  (:require ["react-dom" :as rdom]))
+
+(goog/exportSymbol "ReactDOM" rdom)
--- a/frontend/vendor/cuerdas/vendor/xregexp.cljs
+++ b/frontend/vendor/cuerdas/vendor/xregexp.cljs
@ -0,0 +1,4 @@
+(ns cuerdas.vendor.xregexp
+  (:require ["xregexp" :as XRegExp]))
+
+(goog/exportSymbol "XRegExp" XRegExp)
--- a/frontend/vendor/datefns/datefns.bundle.js
+++ b/frontend/vendor/datefns/datefns.bundle.js
--- a/frontend/vendor/datefns/datefns.bundle.min.js
+++ b/frontend/vendor/datefns/datefns.bundle.min.js
--- a/frontend/vendor/datefns/datefns.js
+++ b/frontend/vendor/datefns/datefns.js
@ -1,24 +0,0 @@
-import fr_FR from "date-fns/locale/fr";
-import en_US from "date-fns/locale/en-US";
-
-import format from "date-fns/format";
-import formatDistanceToNow from "date-fns/formatDistanceToNow";
-
-if (typeof self !== "undefined") { init(self); }
-else if (typeof global !== "undefined") { init(global); }
-else if (typeof window !== "undefined") { init(window); }
-else { throw new Error("unsupported execution environment"); }
-
-function init(g) {
-  g.dateFns = {
-    locales: {
-      "default": en_US,
-      "en": en_US,
-      "en_US": en_US,
-      "fr": fr_FR,
-      "fr_FR": fr_FR
-    },
-    format,
-    formatDistanceToNow,
-  };
-}
--- a/frontend/vendor/datefns/externs.js
+++ b/frontend/vendor/datefns/externs.js
@ -1,4 +0,0 @@
-var dateFns = {};
-dateFns.format = function() {};
-dateFns.formatDistanceToNow = function() {}
-dateFns.locales = {};
--- a/frontend/vendor/deps.cljs
+++ b/frontend/vendor/deps.cljs
@ -1,28 +0,0 @@
-{:foreign-libs
- [{:file "snapsvg/snap.svg.js"
-   :file-min "snapsvg/snap.svg.min.js"
-   :provides ["vendor.snapsvg"]}
-  {:file "jszip/jszip.js"
-   :file-min "jszip/jszip.min.js"
-   :provides ["vendor.jszip"]}
-  {:file "datefns/datefns.bundle.js"
-   :file-min "datefns/datefns.bundle.min.js"
-   :provides ["vendor.datefns"]}
-  {:file "react-color/react-color.bundle.js"
-   :file-min "react-color/react-color.bundle.min.js"
-   :requires ["cljsjs.react"]
-   :provides ["vendor.react-color"]}
-  {:file "randomcolor/randomcolor.bundle.js"
-   :file-min "randomcolor/randomcolor.bundle.min.js"
-   :provides ["vendor.randomcolor"]}
-  {:file "react-dnd/react-dnd.bundle.js"
-   :file-min "react-dnd/react-dnd.bundle.min.js"
-   :requires ["cljsjs.react"]
-   :provides ["vendor.react-dnd"]}]
- :externs ["main.externs.js"
-           "snapsvg/externs.js"
-           "jszip/externs.js"
-           "randomcolor/externs.js"
-           "react-color/externs.js"
-           "react-dnd/externs.js"
-           "datefns/externs.js"]}
--- a/frontend/vendor/jszip/externs.js
+++ b/frontend/vendor/jszip/externs.js
@ -1,5 +0,0 @@
-var JSZip = function() {};
-
-JSZip.prototype.file = function() {};
-JSZip.prototype.folder = function() {};
-JSZip.prototype.generateAsync = function() {};
--- a/frontend/vendor/jszip/jszip.js
+++ b/frontend/vendor/jszip/jszip.js
--- a/frontend/vendor/jszip/jszip.min.js
+++ b/frontend/vendor/jszip/jszip.min.js
--- a/frontend/vendor/main.externs.js
+++ b/frontend/vendor/main.externs.js
@ -1,59 +0,0 @@
-var XR = function() {};
-
-var TopLevel = {
-  "XR": function() {},
-  "isDragging": function() {},
-  "offsetX": function() {},
-  "offsetY": function() {},
-  "nativeEvent": function() {},
-  "dataTransfer": function() {},
-  "dropEffect": function() {},
-  "offsetHeight": function() {},
-  "offsetWidth": function() {},
-  "scrollTop": function() {},
-  "scrollLeft": function() {},
-  "refs": function() {},
-  "ctrlKey": function() {},
-  "shiftKey": function() {},
-  "keyCode": function() {},
-  "currentTarget": function() {},
-  "createObjectURL": function() {},
-  "URL": function() {},
-  "innerHTML": function() {},
-  "getElementById": function() {},
-  "clientX": function() {},
-  "clientY": function() {},
-  "href": function() {},
-  "identifier": function() {},
-  "getBoundingClientRect": function() {},
-  "getBBox": function() {},
-  "addEventListener": function() {},
-  "postMessage": function() {},
-  "data": function() {},
-  "querySelector": function() {},
-  "outerHTML": function() {},
-  "tagName": function() {},
-  "appendChild": function() {},
-  "createElement": function() {},
-  "createElementNS": function() {},
-  "viewBox": function() {},
-  "baseVal": function() {},
-  "x": function() {},
-  "y": function() {},
-  "width": function() {},
-  "height": function() {},
-  "type": function() {},
-  "stopPropagation": function() {},
-  "preventDefault": function() {},
-  "innerText": function() {},
-  "target": function() {},
-  "value": function() {},
-  "click": function() {},
-  "result": function() {},
-  "readAsText": function() {},
-  "src": function() {},
-  "readAsDataURL": function() {},
-  "crypto": {
-    "getRandomValues": function() {}
-  }
-};
--- a/frontend/vendor/package-lock.json
+++ b/frontend/vendor/package-lock.json
--- a/frontend/vendor/package.json
+++ b/frontend/vendor/package.json
@ -1,40 +0,0 @@
-{
-  "name": "uxbox-vendor",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "NODE_ENV=production rollup -c",
-    "minify:react-color": "terser react-color/react-color.bundle.js -c -m -o react-color/react-color.bundle.min.js",
-    "minify:datefns": "terser datefns/datefns.bundle.js -c -m -o datefns/datefns.bundle.min.js",
-    "minify:react-dnd": "terser react-dnd/react-dnd.bundle.js -c -m -o react-dnd/react-dnd.bundle.min.js",
-    "minify:randomcolor": "terser randomcolor/randomcolor.bundle.js -c -m -o randomcolor/randomcolor.bundle.min.js",
-    "dist": "npm run build && npm run minify:react-color && npm run minify:datefns && npm run minify:react-dnd && npm run minify:randomcolor"
-  },
-  "author": "",
-  "license": "MPL2",
-  "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-export-default-from": "^7.8.3",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.1",
-    "rollup": "^2.1.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^5.0.0",
-    "rollup-plugin-replace": "^2.2.0",
-    "terser": "^4.6.7"
-  },
-  "dependencies": {
-    "date-fns": "^2.11.0",
-    "randomcolor": "^0.5.4",
-    "react-color": "^2.18.0",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "snapsvg": "^0.5.1"
-  }
-}
--- a/frontend/vendor/randomcolor/externs.js
+++ b/frontend/vendor/randomcolor/externs.js
@ -1 +0,0 @@
-var randomcolor = function() {};
--- a/frontend/vendor/randomcolor/randomcolor.bundle.js
+++ b/frontend/vendor/randomcolor/randomcolor.bundle.js
@ -1,531 +0,0 @@
-(function(){'use strict';var global$1 = (typeof global !== "undefined" ? global :
-            typeof self !== "undefined" ? self :
-            typeof window !== "undefined" ? window : {});var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}var randomColor = createCommonjsModule(function (module, exports) {
-(function(root, factory) {
-
-  // Support CommonJS
-  {
-    var randomColor = factory();
-
-    // Support NodeJS & Component, which allow module.exports to be a function
-    if ( module && module.exports) {
-      exports = module.exports = randomColor;
-    }
-
-    // Support CommonJS 1.1.1 spec
-    exports.randomColor = randomColor;
-
-  // Support AMD
-  }
-
-}(commonjsGlobal, function() {
-
-  // Seed to get repeatable colors
-  var seed = null;
-
-  // Shared color dictionary
-  var colorDictionary = {};
-
-  // Populate the color dictionary
-  loadColorBounds();
-
-  // check if a range is taken
-  var colorRanges = [];
-
-  var randomColor = function (options) {
-
-    options = options || {};
-
-    // Check if there is a seed and ensure it's an
-    // integer. Otherwise, reset the seed value.
-    if (options.seed !== undefined && options.seed !== null && options.seed === parseInt(options.seed, 10)) {
-      seed = options.seed;
-
-    // A string was passed as a seed
-    } else if (typeof options.seed === 'string') {
-      seed = stringToInteger(options.seed);
-
-    // Something was passed as a seed but it wasn't an integer or string
-    } else if (options.seed !== undefined && options.seed !== null) {
-      throw new TypeError('The seed value must be an integer or string');
-
-    // No seed, reset the value outside.
-    } else {
-      seed = null;
-    }
-
-    var H,S,B;
-
-    // Check if we need to generate multiple colors
-    if (options.count !== null && options.count !== undefined) {
-
-      var totalColors = options.count,
-          colors = [];
-      // Value false at index i means the range i is not taken yet.
-      for (var i = 0; i < options.count; i++) {
-        colorRanges.push(false);
-        }
-      options.count = null;
-
-      while (totalColors > colors.length) {
-
-        // Since we're generating multiple colors,
-        // incremement the seed. Otherwise we'd just
-        // generate the same color each time...
-        if (seed && options.seed) options.seed += 1;
-
-        colors.push(randomColor(options));
-      }
-
-      options.count = totalColors;
-
-      return colors;
-    }
-
-    // First we pick a hue (H)
-    H = pickHue(options);
-
-    // Then use H to determine saturation (S)
-    S = pickSaturation(H, options);
-
-    // Then use S and H to determine brightness (B).
-    B = pickBrightness(H, S, options);
-
-    // Then we return the HSB color in the desired format
-    return setFormat([H,S,B], options);
-  };
-
-  function pickHue(options) {
-    if (colorRanges.length > 0) {
-      var hueRange = getRealHueRange(options.hue);
-
-      var hue = randomWithin(hueRange);
-
-      //Each of colorRanges.length ranges has a length equal approximatelly one step
-      var step = (hueRange[1] - hueRange[0]) / colorRanges.length;
-
-      var j = parseInt((hue - hueRange[0]) / step);
-
-      //Check if the range j is taken
-      if (colorRanges[j] === true) {
-        j = (j + 2) % colorRanges.length;
-      }
-      else {
-        colorRanges[j] = true;
-           }
-
-      var min = (hueRange[0] + j * step) % 359,
-          max = (hueRange[0] + (j + 1) * step) % 359;
-
-      hueRange = [min, max];
-
-      hue = randomWithin(hueRange);
-
-      if (hue < 0) {hue = 360 + hue;}
-      return hue
-    }
-    else {
-      var hueRange = getHueRange(options.hue);
-
-      hue = randomWithin(hueRange);
-      // Instead of storing red as two seperate ranges,
-      // we group them, using negative numbers
-      if (hue < 0) {
-        hue = 360 + hue;
-      }
-
-      return hue;
-    }
-  }
-
-  function pickSaturation (hue, options) {
-
-    if (options.hue === 'monochrome') {
-      return 0;
-    }
-
-    if (options.luminosity === 'random') {
-      return randomWithin([0,100]);
-    }
-
-    var saturationRange = getSaturationRange(hue);
-
-    var sMin = saturationRange[0],
-        sMax = saturationRange[1];
-
-    switch (options.luminosity) {
-
-      case 'bright':
-        sMin = 55;
-        break;
-
-      case 'dark':
-        sMin = sMax - 10;
-        break;
-
-      case 'light':
-        sMax = 55;
-        break;
-   }
-
-    return randomWithin([sMin, sMax]);
-
-  }
-
-  function pickBrightness (H, S, options) {
-
-    var bMin = getMinimumBrightness(H, S),
-        bMax = 100;
-
-    switch (options.luminosity) {
-
-      case 'dark':
-        bMax = bMin + 20;
-        break;
-
-      case 'light':
-        bMin = (bMax + bMin)/2;
-        break;
-
-      case 'random':
-        bMin = 0;
-        bMax = 100;
-        break;
-    }
-
-    return randomWithin([bMin, bMax]);
-  }
-
-  function setFormat (hsv, options) {
-
-    switch (options.format) {
-
-      case 'hsvArray':
-        return hsv;
-
-      case 'hslArray':
-        return HSVtoHSL(hsv);
-
-      case 'hsl':
-        var hsl = HSVtoHSL(hsv);
-        return 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)';
-
-      case 'hsla':
-        var hslColor = HSVtoHSL(hsv);
-        var alpha = options.alpha || Math.random();
-        return 'hsla('+hslColor[0]+', '+hslColor[1]+'%, '+hslColor[2]+'%, ' + alpha + ')';
-
-      case 'rgbArray':
-        return HSVtoRGB(hsv);
-
-      case 'rgb':
-        var rgb = HSVtoRGB(hsv);
-        return 'rgb(' + rgb.join(', ') + ')';
-
-      case 'rgba':
-        var rgbColor = HSVtoRGB(hsv);
-        var alpha = options.alpha || Math.random();
-        return 'rgba(' + rgbColor.join(', ') + ', ' + alpha + ')';
-
-      default:
-        return HSVtoHex(hsv);
-    }
-
-  }
-
-  function getMinimumBrightness(H, S) {
-
-    var lowerBounds = getColorInfo(H).lowerBounds;
-
-    for (var i = 0; i < lowerBounds.length - 1; i++) {
-
-      var s1 = lowerBounds[i][0],
-          v1 = lowerBounds[i][1];
-
-      var s2 = lowerBounds[i+1][0],
-          v2 = lowerBounds[i+1][1];
-
-      if (S >= s1 && S <= s2) {
-
-         var m = (v2 - v1)/(s2 - s1),
-             b = v1 - m*s1;
-
-         return m*S + b;
-      }
-
-    }
-
-    return 0;
-  }
-
-  function getHueRange (colorInput) {
-
-    if (typeof parseInt(colorInput) === 'number') {
-
-      var number = parseInt(colorInput);
-
-      if (number < 360 && number > 0) {
-        return [number, number];
-      }
-
-    }
-
-    if (typeof colorInput === 'string') {
-
-      if (colorDictionary[colorInput]) {
-        var color = colorDictionary[colorInput];
-        if (color.hueRange) {return color.hueRange;}
-      } else if (colorInput.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
-        var hue = HexToHSB(colorInput)[0];
-        return [ hue, hue ];
-      }
-    }
-
-    return [0,360];
-
-  }
-
-  function getSaturationRange (hue) {
-    return getColorInfo(hue).saturationRange;
-  }
-
-  function getColorInfo (hue) {
-
-    // Maps red colors to make picking hue easier
-    if (hue >= 334 && hue <= 360) {
-      hue-= 360;
-    }
-
-    for (var colorName in colorDictionary) {
-       var color = colorDictionary[colorName];
-       if (color.hueRange &&
-           hue >= color.hueRange[0] &&
-           hue <= color.hueRange[1]) {
-          return colorDictionary[colorName];
-       }
-    } return 'Color not found';
-  }
-
-  function randomWithin (range) {
-    if (seed === null) {
-      //generate random evenly destinct number from : https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
-      var golden_ratio = 0.618033988749895;
-      var r=Math.random();
-      r += golden_ratio;
-      r %= 1;
-      return Math.floor(range[0] + r*(range[1] + 1 - range[0]));
-    } else {
-      //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
-      var max = range[1] || 1;
-      var min = range[0] || 0;
-      seed = (seed * 9301 + 49297) % 233280;
-      var rnd = seed / 233280.0;
-      return Math.floor(min + rnd * (max - min));
-}
-  }
-
-  function HSVtoHex (hsv){
-
-    var rgb = HSVtoRGB(hsv);
-
-    function componentToHex(c) {
-        var hex = c.toString(16);
-        return hex.length == 1 ? '0' + hex : hex;
-    }
-
-    var hex = '#' + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
-
-    return hex;
-
-  }
-
-  function defineColor (name, hueRange, lowerBounds) {
-
-    var sMin = lowerBounds[0][0],
-        sMax = lowerBounds[lowerBounds.length - 1][0],
-
-        bMin = lowerBounds[lowerBounds.length - 1][1],
-        bMax = lowerBounds[0][1];
-
-    colorDictionary[name] = {
-      hueRange: hueRange,
-      lowerBounds: lowerBounds,
-      saturationRange: [sMin, sMax],
-      brightnessRange: [bMin, bMax]
-    };
-
-  }
-
-  function loadColorBounds () {
-
-    defineColor(
-      'monochrome',
-      null,
-      [[0,0],[100,0]]
-    );
-
-    defineColor(
-      'red',
-      [-26,18],
-      [[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]
-    );
-
-    defineColor(
-      'orange',
-      [19,46],
-      [[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]
-    );
-
-    defineColor(
-      'yellow',
-      [47,62],
-      [[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]
-    );
-
-    defineColor(
-      'green',
-      [63,178],
-      [[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]
-    );
-
-    defineColor(
-      'blue',
-      [179, 257],
-      [[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]
-    );
-
-    defineColor(
-      'purple',
-      [258, 282],
-      [[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]
-    );
-
-    defineColor(
-      'pink',
-      [283, 334],
-      [[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]]
-    );
-
-  }
-
-  function HSVtoRGB (hsv) {
-
-    // this doesn't work for the values of 0 and 360
-    // here's the hacky fix
-    var h = hsv[0];
-    if (h === 0) {h = 1;}
-    if (h === 360) {h = 359;}
-
-    // Rebase the h,s,v values
-    h = h/360;
-    var s = hsv[1]/100,
-        v = hsv[2]/100;
-
-    var h_i = Math.floor(h*6),
-      f = h * 6 - h_i,
-      p = v * (1 - s),
-      q = v * (1 - f*s),
-      t = v * (1 - (1 - f)*s),
-      r = 256,
-      g = 256,
-      b = 256;
-
-    switch(h_i) {
-      case 0: r = v; g = t; b = p;  break;
-      case 1: r = q; g = v; b = p;  break;
-      case 2: r = p; g = v; b = t;  break;
-      case 3: r = p; g = q; b = v;  break;
-      case 4: r = t; g = p; b = v;  break;
-      case 5: r = v; g = p; b = q;  break;
-    }
-
-    var result = [Math.floor(r*255), Math.floor(g*255), Math.floor(b*255)];
-    return result;
-  }
-
-  function HexToHSB (hex) {
-    hex = hex.replace(/^#/, '');
-    hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
-
-    var red = parseInt(hex.substr(0, 2), 16) / 255,
-          green = parseInt(hex.substr(2, 2), 16) / 255,
-          blue = parseInt(hex.substr(4, 2), 16) / 255;
-
-    var cMax = Math.max(red, green, blue),
-          delta = cMax - Math.min(red, green, blue),
-          saturation = cMax ? (delta / cMax) : 0;
-
-    switch (cMax) {
-      case red: return [ 60 * (((green - blue) / delta) % 6) || 0, saturation, cMax ];
-      case green: return [ 60 * (((blue - red) / delta) + 2) || 0, saturation, cMax ];
-      case blue: return [ 60 * (((red - green) / delta) + 4) || 0, saturation, cMax ];
-    }
-  }
-
-  function HSVtoHSL (hsv) {
-    var h = hsv[0],
-      s = hsv[1]/100,
-      v = hsv[2]/100,
-      k = (2-s)*v;
-
-    return [
-      h,
-      Math.round(s*v / (k<1 ? k : 2-k) * 10000) / 100,
-      k/2 * 100
-    ];
-  }
-
-  function stringToInteger (string) {
-    var total = 0;
-    for (var i = 0; i !== string.length; i++) {
-      if (total >= Number.MAX_SAFE_INTEGER) break;
-      total += string.charCodeAt(i);
-    }
-    return total
-  }
-
-  // get The range of given hue when options.count!=0
-  function getRealHueRange(colorHue)
-  { if (!isNaN(colorHue)) {
-    var number = parseInt(colorHue);
-
-    if (number < 360 && number > 0) {
-      return getColorInfo(colorHue).hueRange
-    }
-  }
-    else if (typeof colorHue === 'string') {
-
-      if (colorDictionary[colorHue]) {
-        var color = colorDictionary[colorHue];
-
-        if (color.hueRange) {
-          return color.hueRange
-       }
-    } else if (colorHue.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
-        var hue = HexToHSB(colorHue)[0];
-        return getColorInfo(hue).hueRange
-    }
-  }
-
-    return [0,360]
-}
-  return randomColor;
-}));
-});
-var randomColor_1 = randomColor.randomColor;if (typeof self !== "undefined") {
-  init(self);
-} else if (typeof global$1 !== "undefined") {
-  init(global$1);
-} else if (typeof window !== "undefined") {
-  init(window);
-} else {
-  throw new Error("unsupported execution environment");
-}
-
-function init(g) {
-  g.randomcolor = randomColor;
-}}());
--- a/frontend/vendor/randomcolor/randomcolor.bundle.min.js
+++ b/frontend/vendor/randomcolor/randomcolor.bundle.min.js
--- a/frontend/vendor/randomcolor/randomcolor.js
+++ b/frontend/vendor/randomcolor/randomcolor.js
@ -1,11 +0,0 @@
-import randomcolor from "randomcolor";
-
-if (typeof self !== "undefined") { init(self); }
-else if (typeof global !== "undefined") { init(global); }
-else if (typeof window !== "undefined") { init(window); }
-else { throw new Error("unsupported execution environment"); }
-
-function init(g) {
-  g.randomcolor = randomcolor;
-}
-
--- a/frontend/vendor/react-color/externs.js
+++ b/frontend/vendor/react-color/externs.js
@ -1,2 +0,0 @@
-var ChromePicker = {};
-var SketchPicker = {};
--- a/frontend/vendor/react-color/react-color.bundle.js
+++ b/frontend/vendor/react-color/react-color.bundle.js
--- a/frontend/vendor/react-color/react-color.bundle.min.js
+++ b/frontend/vendor/react-color/react-color.bundle.min.js
--- a/frontend/vendor/react-color/react-color.js
+++ b/frontend/vendor/react-color/react-color.js
@ -1,11 +0,0 @@
-import SketchPicker from "react-color/lib/components/sketch/Sketch";
-
-if (typeof self !== "undefined") { init(self); }
-else if (typeof global !== "undefined") { init(global); }
-else if (typeof window !== "undefined") { init(window); }
-else { throw new Error("unsupported execution environment"); }
-
-function init(g) {
-  g.SketchPicker = SketchPicker;
-}
-
--- a/frontend/vendor/react-dnd/externs.js
+++ b/frontend/vendor/react-dnd/externs.js
@ -1,8 +0,0 @@
-var ReactDnd = {};
-ReactDnd.Monitor = function() {}
-ReactDnd.Monitor.prototype.isDragging = function() {}
-
-ReactDnd.useDrag = function() {};
-ReactDnd.useDrop = function() {};
-ReactDnd.DndProvider = function() {};
-ReactDnd.HTML5Backend = function() {};
--- a/frontend/vendor/react-dnd/react-dnd.bundle.js
+++ b/frontend/vendor/react-dnd/react-dnd.bundle.js
--- a/frontend/vendor/react-dnd/react-dnd.bundle.min.js
+++ b/frontend/vendor/react-dnd/react-dnd.bundle.min.js
--- a/frontend/vendor/react-dnd/react-dnd.js
+++ b/frontend/vendor/react-dnd/react-dnd.js
@ -1,18 +0,0 @@
-import { useDrag, useDrop } from "react-dnd/dist/esm/hooks";
-import { DndProvider } from "react-dnd/dist/esm/common";
-import HTML5Backend from "react-dnd-html5-backend";
-
-if (typeof self !== "undefined") { init(self); }
-else if (typeof global !== "undefined") { init(global); }
-else if (typeof window !== "undefined") { init(window); }
-else { throw new Error("unsupported execution environment"); }
-
-function init(g) {
-  g.ReactDnd = {
-    useDrag,
-    useDrop,
-    DndProvider,
-    HTML5Backend
-  };
-}
-
--- a/frontend/vendor/rollup.config.js
+++ b/frontend/vendor/rollup.config.js
@ -1,76 +0,0 @@
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import globals from 'rollup-plugin-node-globals';
-import builtins from 'rollup-plugin-node-builtins';
-import replace from 'rollup-plugin-replace';
-
-const plugins = [
-  replace({
-    'process.env.NODE_ENV': JSON.stringify('production')
-  }),
-
-  babel({
-    exclude: 'node_modules/**',
-    sourceMap: false
-  }),
-
-  resolve({
-    mainFields: ['module', 'main'],
-    preferBuiltins: true,
-    browser: true,
-  }),
-
-  commonjs({
-    include: 'node_modules/**',  // Default: undefined
-    // if true then uses of `global` won't be dealt with by this plugin
-    ignoreGlobal: false,  // Default: false
-    sourceMap: false,  // Default: true
-  }),
-
-  globals(),
-  builtins(),
-];
-
-export default [{
-  input: "./react-color/react-color.js",
-  external: ["react", "react-dom"],
-  output: {
-    globals: {
-      "react": "React",
-      "react-dom": "ReactDOM"
-    },
-    compact: true,
-    file: './react-color/react-color.bundle.js',
-    format: 'iife',
-  },
-  plugins: plugins
-}, {
-  input: "./react-dnd/react-dnd.js",
-  external: ["react"],
-  output: {
-    globals: {
-      "react": "React",
-    },
-    compact: true,
-    file: './react-dnd/react-dnd.bundle.js',
-    format: 'iife',
-  },
-  plugins: plugins
-}, {
-  input: "./datefns/datefns.js",
-  output: {
-    compact: true,
-    file: './datefns/datefns.bundle.js',
-    format: 'iife',
-  },
-  plugins: plugins
-}, {
-  input: "./randomcolor/randomcolor.js",
-  output: {
-    compact: true,
-    file: './randomcolor/randomcolor.bundle.js',
-    format: 'iife',
-  },
-  plugins: plugins
-}];
--- a/frontend/vendor/snapsvg/externs.js
+++ b/frontend/vendor/snapsvg/externs.js
@ -1,8 +0,0 @@
-var Snap = function() {};
-Snap.prototype.animate = function() {};
-
-var mina = {};
-mina.linear = function() {};
-mina.easein = function() {};
-mina.easeout = function() {};
-mina.easeinout = function() {};
--- a/frontend/vendor/snapsvg/snap.svg-min.js
+++ b/frontend/vendor/snapsvg/snap.svg-min.js
--- a/frontend/vendor/snapsvg/snap.svg.js
+++ b/frontend/vendor/snapsvg/snap.svg.js