♻️ Make the namespacing independent of the branding.

frontend/src/app/main/ui/components/context_menu.cljs

@@ -0,0 +1,42 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.context-menu
+  (:require
+   [rumext.alpha :as mf]
+   [goog.object :as gobj]
+   [app.main.ui.components.dropdown :refer [dropdown']]
+   [app.common.uuid :as uuid]
+   [app.util.data :refer [classnames]]))
+
+(mf/defc context-menu
+  {::mf/wrap-props false}
+  [props]
+  (assert (fn? (gobj/get props "on-close")) "missing `on-close` prop")
+  (assert (boolean? (gobj/get props "show")) "missing `show` prop")
+  (assert (vector? (gobj/get props "options")) "missing `options` prop")
+
+  (let [open? (gobj/get props "show")
+        options (gobj/get props "options")
+        is-selectable (gobj/get props "selectable")
+        selected (gobj/get props "selected")
+        top (gobj/get props "top")
+        left (gobj/get props "left")]
+    (when open?
+      [:> dropdown' props
+       [:div.context-menu {:class (classnames :is-open open?
+                                              :is-selectable is-selectable)
+                           :style {:top top
+                                   :left left}}
+        [:ul.context-menu-items
+         (for [[action-name action-handler] options]
+           [:li.context-menu-item {:class (classnames :is-selected (and selected (= action-name selected)))
+                                   :key action-name}
+            [:a.context-menu-action {:on-click action-handler}
+             action-name]])]]])))

frontend/src/app/main/ui/components/dropdown.cljs

@@ -0,0 +1,50 @@
+(ns app.main.ui.components.dropdown
+  (:require
+   [rumext.alpha :as mf]
+   [app.common.uuid :as uuid]
+   [app.util.dom :as dom]
+   [goog.events :as events]
+   [goog.object :as gobj])
+  (:import goog.events.EventType
+           goog.events.KeyCodes))
+
+(mf/defc dropdown'
+  {::mf/wrap-props false}
+  [props]
+  (let [children (gobj/get props "children")
+        on-close (gobj/get props "on-close")
+        ref (gobj/get props "container")
+
+        on-click
+        (fn [event]
+          (if ref
+            (let [target (dom/get-target event)
+                  parent (mf/ref-val ref)]
+              (when-not (.contains parent target)
+                (on-close)))
+            (on-close)))
+
+        on-keyup
+        (fn [event]
+          (when (= (.-keyCode event) 27) ; ESC
+            (on-close)))
+
+        on-mount
+        (fn []
+          (let [lkey1 (events/listen js/document EventType.CLICK on-click)
+                lkey2 (events/listen js/document EventType.KEYUP on-keyup)]
+            #(do
+               (events/unlistenByKey lkey1)
+               (events/unlistenByKey lkey2))))]
+
+    (mf/use-effect on-mount)
+    children))
+
+(mf/defc dropdown
+  {::mf/wrap-props false}
+  [props]
+  (assert (fn? (gobj/get props "on-close")) "missing `on-close` prop")
+  (assert (boolean? (gobj/get props "show")) "missing `show` prop")
+
+  (when (gobj/get props "show")
+    (mf/element dropdown' props)))

frontend/src/app/main/ui/components/editable_label.cljs

@@ -0,0 +1,51 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.editable-label
+  (:require
+   [rumext.alpha :as mf]
+   [app.main.ui.icons :as i]
+   [app.main.ui.keyboard :as kbd]
+   [app.util.dom :as dom]
+   [app.util.timers :as timers]
+   [app.util.data :refer [classnames]]))
+
+(mf/defc editable-label
+  [{:keys [ value on-change on-cancel edit readonly class-name]}]
+  (let [input (mf/use-ref nil)
+        state (mf/use-state (:editing false))
+        is-editing (or edit (:editing @state))
+        start-editing (fn []
+                        (swap! state assoc :editing true)
+                        (timers/schedule 100 #(dom/focus! (mf/ref-val input))))
+        stop-editing (fn [] (swap! state assoc :editing false))
+        cancel-editing (fn []
+                         (stop-editing)
+                         (when on-cancel (on-cancel)))
+        on-dbl-click (fn [e] (when (not readonly) (start-editing)))
+        on-key-up (fn [e]
+                    (cond
+                      (kbd/esc? e)
+                      (cancel-editing)
+
+                      (kbd/enter? e)
+                      (let [value (-> e dom/get-target dom/get-value)]
+                        (on-change value)
+                        (stop-editing))))
+        ]
+
+    (if is-editing
+      [:div.editable-label {:class class-name}
+       [:input.editable-label-input {:ref input
+                                     :default-value value
+                                     :on-key-down on-key-up}]
+       [:span.editable-label-close {:on-click cancel-editing} i/close]]
+      [:span.editable-label {:class class-name
+                             :on-double-click on-dbl-click} value]
+      )))

frontend/src/app/main/ui/components/editable_select.cljs

@@ -0,0 +1,71 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.editable-select
+  (:require
+   [rumext.alpha :as mf]
+   [app.common.uuid :as uuid]
+   [app.common.data :as d]
+   [app.util.dom :as dom]
+   [app.main.ui.icons :as i]
+   [app.main.ui.components.dropdown :refer [dropdown]]))
+
+(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
+  (let [state (mf/use-state {:id (uuid/next)
+                             :is-open? false
+                             :current-value value})
+        open-dropdown #(swap! state assoc :is-open? true)
+        close-dropdown #(swap! state assoc :is-open? false)
+
+        select-item (fn [value]
+                      (fn [event]
+                        (swap! state assoc :current-value value)
+                        (when on-change (on-change value))))
+
+        as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item]))
+
+        labels-map (into {} (->> options (map as-key-value)))
+
+        value->label (fn [value] (get labels-map value value))
+
+        handle-change-input (fn [event]
+                              (let [value (-> event dom/get-target dom/get-value)
+                                    value (or (d/parse-integer value) value)]
+                                (swap! state assoc :current-value value)
+                                (when on-change (on-change value))))]
+
+    (mf/use-effect
+     (mf/deps value)
+     #(reset! state {:current-value value}))
+
+    (mf/use-effect
+     (mf/deps options)
+     #(reset! state {:is-open? false
+                     :current-value value}))
+
+    [:div.editable-select {:class class}
+     [:input.input-text {:value (or (-> @state :current-value value->label) "")
+                         :on-change handle-change-input
+                         :placeholder placeholder
+                         :type type}]
+     [:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
+
+     [:& dropdown {:show (get @state :is-open? false)
+                   :on-close close-dropdown}
+      [:ul.custom-select-dropdown
+       (for [[index item] (map-indexed vector options)]
+         (cond
+           (= :separator item) [:hr {:key (str (:id @state) "-" index)}]
+           :else (let [[value label] (as-key-value item)]
+                   [:li.checked-element
+                    {:key (str (:id @state) "-" index)
+                     :class (when (= value (-> @state :current-value)) "is-selected")
+                     :on-click (select-item value)}
+                    [:span.check-icon i/tick]
+                    [:span label]])))]]]))

frontend/src/app/main/ui/components/file_uploader.cljs

@@ -0,0 +1,41 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.file-uploader
+  (:require
+   [rumext.alpha :as mf]
+   [app.main.data.workspace :as dw]
+   [app.main.store :as st]
+   [app.util.dom :as dom]))
+
+(mf/defc file-uploader
+  [{:keys [accept multi label-text label-class input-id input-ref on-selected] :as props}]
+  (let [opt-pick-one #(if multi % (first %))
+
+        on-files-selected (fn [event]
+                            (let [target (dom/get-target event)]
+                              (st/emit!
+                                (some-> target
+                                        (dom/get-files)
+                                        (opt-pick-one)
+                                        (on-selected)))
+                              (dom/clean-value! target)))]
+    [:*
+     (when label-text
+       [:label {:for input-id :class-name label-class} label-text])
+
+     [:input
+      {:style {:display "none"}
+       :id input-id
+       :multiple multi
+       :accept accept
+       :type "file"
+       :ref input-ref
+       :on-change on-files-selected}]]))
+

frontend/src/app/main/ui/components/forms.cljs

@@ -0,0 +1,155 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.forms
+  (:require
+   [rumext.alpha :as mf]
+   [cuerdas.core :as str]
+   [app.common.data :as d]
+   [app.main.ui.icons :as i]
+   [app.util.object :as obj]
+   [app.util.forms :as fm]
+   [app.util.i18n :as i18n :refer [t]]
+   ["react" :as react]
+   [app.util.dom :as dom]))
+
+(def form-ctx (mf/create-context nil))
+
+(mf/defc input
+  [{:keys [type label help-icon disabled name form hint trim] :as props}]
+  (let [form       (mf/use-ctx form-ctx)
+
+        type'      (mf/use-state type)
+        focus?     (mf/use-state false)
+        locale     (mf/deref i18n/locale)
+
+        touched?   (get-in form [:touched name])
+        error      (get-in form [:errors name])
+
+        value      (get-in form [:data name] "")
+
+        help-icon' (cond 
+                     (and (= type "password")
+                          (= @type' "password"))
+                     i/eye
+
+                     (and (= type "password")
+                          (= @type' "text"))
+                     i/eye-closed
+
+                     :else
+                     help-icon)
+
+        klass (dom/classnames
+               :focus     @focus?
+               :valid     (and touched? (not error))
+               :invalid   (and touched? error)
+               :disabled  disabled
+               :empty     (str/empty? value)
+               :with-icon (not (nil? help-icon')))
+
+        swap-text-password
+        (fn []
+          (swap! type' (fn [type]
+                         (if (= "password" type)
+                           "text"
+                           "password"))))
+
+        on-focus  #(reset! focus? true)
+        on-change (fm/on-input-change form name trim)
+
+        on-blur
+        (fn [event]
+          (reset! focus? false)
+          (when-not (get-in form [:touched name])
+            (swap! form assoc-in [:touched name] true)))
+
+        props (-> props
+                  (dissoc :help-icon :form :trim)
+                  (assoc :value value
+                         :on-focus on-focus
+                         :on-blur on-blur
+                         :placeholder label
+                         :on-change on-change
+                         :type @type')
+                  (obj/clj->props))]
+
+    [:div.field.custom-input
+      {:class klass}
+      [:*
+        [:label label]
+        [:> :input props]
+        (when help-icon'
+          [:div.help-icon
+           {:style {:cursor "pointer"}
+            :on-click (when (= "password" type)
+                        swap-text-password)}
+           help-icon'])
+       (cond
+         (and touched? (:message error))
+         [:span.error (t locale (:message error))]
+
+         (string? hint)
+         [:span.hint hint])]]))
+
+(mf/defc select
+  [{:keys [options label name form default]
+    :or {default ""}}]
+  (let [form (mf/use-ctx form-ctx)
+        value     (get-in form [:data name] default)
+        cvalue    (d/seek #(= value (:value %)) options)
+        on-change (fm/on-input-change form name)]
+
+    [:div.field.custom-select
+     [:select {:value value
+               :on-change on-change}
+      (for [item options]
+        [:option {:key (:value item) :value (:value item)} (:label item)])]
+
+     [:div.input-container
+      [:div.main-content
+       [:label label]
+       [:span.value (:label cvalue "")]]
+
+      [:div.icon
+       i/arrow-slide]]]))
+
+(mf/defc submit-button
+  [{:keys [label form on-click] :as props}]
+  (let [form (mf/use-ctx form-ctx)]
+    [:input.btn-primary.btn-large
+     {:name "submit"
+      :class (when-not (:valid form) "btn-disabled")
+      :disabled (not (:valid form))
+      :on-click on-click
+      :value label
+      :type "submit"}]))
+
+(mf/defc form
+  [{:keys [on-submit spec validators initial children class] :as props}]
+  (let [frm (fm/use-form :spec spec
+                         :validators validators
+                         :initial initial)]
+
+    (mf/use-effect
+     (mf/deps initial)
+     (fn []
+       (if (fn? initial)
+         (swap! frm update :data merge (initial))
+         (swap! frm update :data merge initial))))
+
+    [:& (mf/provider form-ctx) {:value frm}
+     [:form {:class class
+             :on-submit (fn [event]
+                          (dom/prevent-default event)
+                          (on-submit frm event))}
+      children]]))
+
+
+

frontend/src/app/main/ui/components/select.cljs

@@ -0,0 +1,51 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.select
+  (:require
+   [rumext.alpha :as mf]
+   [app.common.uuid :as uuid]
+   [app.main.ui.icons :as i]
+   [app.main.ui.components.dropdown :refer [dropdown]]))
+
+(mf/defc select [{:keys [default-value options class on-change]}]
+  (let [state (mf/use-state {:id (uuid/next)
+                             :is-open? false
+                             :current-value default-value})
+        open-dropdown #(swap! state assoc :is-open? true)
+        close-dropdown #(swap! state assoc :is-open? false)
+        select-item (fn [value] (fn [event]
+                                  (swap! state assoc :current-value value)
+                                  (when on-change (on-change value))))
+        as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item]))
+        value->label (into {} (->> options
+                                   (map as-key-value))) ]
+
+    (mf/use-effect
+     (mf/deps options)
+     #(reset! state {:is-open? false
+                     :current-value default-value}))
+
+    [:div.custom-select {:on-click open-dropdown
+                         :class class}
+     [:span (-> @state :current-value value->label)]
+     [:span.dropdown-button i/arrow-down]
+     [:& dropdown {:show (:is-open? @state)
+                   :on-close close-dropdown}
+      [:ul.custom-select-dropdown
+       (for [[index item] (map-indexed vector options)]
+         (cond
+           (= :separator item) [:hr {:key (str (:id @state) "-" index)}]
+           :else (let [[value label] (as-key-value item)]
+                   [:li.checked-element
+                    {:key (str (:id @state) "-" index)
+                     :class (when (= value (-> @state :current-value)) "is-selected")
+                     :on-click (select-item value)}
+                    [:span.check-icon i/tick]
+                    [:span label]])))]]]))

frontend/src/app/main/ui/components/tab_container.cljs

@@ -0,0 +1,36 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.components.tab-container
+  (:require [rumext.alpha :as mf]))
+
+(mf/defc tab-element
+  [{:keys [children id title]}]
+  [:div.tab-element
+   [:div.tab-element-content children]])
+
+(mf/defc tab-container
+  [{:keys [children selected on-change-tab]}]
+  (let [first-id (-> children first .-props .-id)
+        state (mf/use-state {:selected first-id})
+        selected (or selected (:selected @state))
+        handle-select (fn [tab]
+                        (let [id (-> tab .-props .-id)]
+                          (swap! state assoc :selected id)
+                          (when on-change-tab (on-change-tab id))))]
+    [:div.tab-container
+     [:div.tab-container-tabs
+      (for [tab children]
+        [:div.tab-container-tab-title
+         {:key (str "tab-" (-> tab .-props .-id))
+          :on-click (partial handle-select tab)
+          :class (when (= selected (-> tab .-props .-id)) "current")}
+         (-> tab .-props .-title)])]
+     [:div.tab-container-content
+      (filter #(= selected (-> % .-props .-id)) children)]]))