Move form out of modal specific code

frontend/src/app/main/ui/workspace/tokens/form.cljs

@@ -4,85 +4,17 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.modal
+(ns app.main.ui.workspace.tokens.form
   (:require-macros [app.main.style :as stl])
   (:require
-   ["lodash.debounce" :as debounce]
-   [app.common.data :as d]
-   [app.main.data.modal :as modal]
-   [app.main.data.tokens :as dt]
-   [app.main.refs :as refs]
-   [app.main.store :as st]
    [app.main.ui.workspace.tokens.common :as tokens.common]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.util.dom :as dom]
-   [clojure.set :as set]
    [cuerdas.core :as str]
    [malli.core :as m]
    [malli.error :as me]
-   [okulary.core :as l]
-   [promesa.core :as p]
    [rumext.v2 :as mf]))
 
-(defn calculate-position
-  "Calculates the style properties for the given coordinates and position"
-  [{vh :height} position x y]
-  (let [;; picker height in pixels
-        h 510
-        ;; Checks for overflow outside the viewport height
-        overflow-fix (max 0 (+ y (- 50) h (- vh)))
-
-        x-pos 325]
-    (cond
-      (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
-      (= position :left) {:left (str (- x x-pos) "px")
-                          :top (str (- y 50 overflow-fix) "px")}
-      :else {:left (str (+ x 80) "px")
-             :top (str (- y 70 overflow-fix) "px")})))
-
-(defn use-viewport-position-style [x y position]
-  (let [vport (-> (l/derived :vport refs/workspace-local)
-                  (mf/deref))]
-    (-> (calculate-position vport position x y)
-        (clj->js))))
-
-(defn fields->map [fields]
-  (->> (map (fn [{:keys [key] :as field}]
-              [key (:value field)]) fields)
-       (into {})))
-
-(defn fields-to-token
-  "Converts field to token value that will be stored and processed.
-  Handles a simple token token type for now."
-  [token-type fields]
-  (case token-type
-    (first fields)))
-
-;; https://dev.to/haseeb1009/the-useevent-hook-1c8l
-(defn use-event-callback
-  [f]
-  (let [ref (mf/use-ref)]
-    (mf/use-layout-effect
-     (fn []
-       (reset! ref f)
-       js/undefined))
-    (mf/use-callback (fn [& args] (some-> @ref (apply args))) [])))
-
-(defn use-promise-debounce [fn+ on-success on-err]
-  (let [debounce-promise (mf/use-ref nil)
-        callback-fn (fn []
-                      (let [id (random-uuid)]
-                        (mf/set-ref-val! debounce-promise id)
-                        (-> (fn+)
-                            (p/then (fn [result]
-                                      (js/console.log "@debounce-promise id" @debounce-promise id)
-                                      (when (= @debounce-promise id)
-                                        (js/console.log "update" result)
-                                        (on-success result))))
-                            (p/catch on-err))))
-        debounced-fn (debounce callback-fn)]
-    debounced-fn))
-
 (defn token-name-schema
   "Generate a dynamic schema validation to check if a token name already exists.
   `existing-token-names` should be a set of strings."
@@ -103,13 +35,10 @@
       (me/humanize))
   nil)
 
-(mf/defc tokens-properties-form
+(mf/defc form
   {::mf/wrap-props false}
-  [{:keys [x y position token] :as _args}]
-  (let [wrapper-style (use-viewport-position-style x y position)
-
-        ;; Tokens
-        tokens (sd/use-resolved-workspace-tokens)
+  [{:keys [token] :as _args}]
+  (let [tokens (sd/use-resolved-workspace-tokens)
         existing-token-names (mf/use-memo
                               (mf/deps tokens)
                               (fn []
@@ -168,9 +97,7 @@
         ;;               (st/emit! (dt/add-token token))
         ;;               (modal/hide!)))]
     [:form
-     {:class (stl/css :shadow)
-      :style wrapper-style
-      #_#_:on-submit on-submit}
+     {#_#_:on-submit on-submit}
      [:div {:class (stl/css :token-rows)}
       [:div
        [:& tokens.common/labeled-input {:label "Name"

frontend/src/app/main/ui/workspace/tokens/form.scss

@@ -39,49 +39,3 @@
     margin: 0;
   }
 }
-
-.shadow {
-  @extend .modal-container-base;
-  @include menuShadow;
-  position: absolute;
-  z-index: 11;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &-select-wrapper {
-    display: flex;
-    grid-gap: $s-4;
-  }
-
-  &-properties {
-    display: flex;
-    flex-direction: column;
-    grid-gap: $s-4;
-  }
-
-  .inputs-grid {
-    display: grid;
-    grid-template-areas:
-      "x blur blur spread spread"
-      "y color color color color";
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    grid-gap: $s-4;
-
-    label:nth-child(1) {
-      grid-area: x;
-    }
-    label:nth-child(2) {
-      grid-area: y;
-    }
-    label:nth-child(3) {
-      grid-area: blur;
-    }
-    label:nth-child(4) {
-      grid-area: spread;
-    }
-    label:nth-child(5) {
-      grid-area: color;
-    }
-  }
-}

frontend/src/app/main/ui/workspace/tokens/modals.cljs

@@ -5,85 +5,123 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.tokens.modals
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.data.modal :as modal]
-   [app.main.ui.workspace.tokens.modal :refer [tokens-properties-form]]
+   [app.main.refs :as refs]
+   [app.main.ui.workspace.tokens.form :refer [form]]
+   [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+;; Component -------------------------------------------------------------------
+
+(defn calculate-position
+  "Calculates the style properties for the given coordinates and position"
+  [{vh :height} position x y]
+  (let [;; picker height in pixels
+        h 510
+        ;; Checks for overflow outside the viewport height
+        overflow-fix (max 0 (+ y (- 50) h (- vh)))
+
+        x-pos 325]
+    (cond
+      (or (nil? x) (nil? y)) {:left "auto" :right "16rem" :top "4rem"}
+      (= position :left) {:left (str (- x x-pos) "px")
+                          :top (str (- y 50 overflow-fix) "px")}
+      :else {:left (str (+ x 80) "px")
+             :top (str (- y 70 overflow-fix) "px")})))
+
+(defn use-viewport-position-style [x y position]
+  (let [vport (-> (l/derived :vport refs/workspace-local)
+                  (mf/deref))]
+    (-> (calculate-position vport position x y)
+        (clj->js))))
+
+(mf/defc modal
+  {::mf/wrap-props false}
+  [{:keys [x y position token] :as _args}]
+  (let [wrapper-style (use-viewport-position-style x y position)]
+    [:div
+     {:class (stl/css :shadow)
+      :style wrapper-style}
+     [:& form {:token token}]]))
+
+;; Modals ----------------------------------------------------------------------
+
 (mf/defc boolean-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/boolean}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc border-radius-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/border-radius}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc stroke-width-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/stroke-width}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc box-shadow-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/box-shadow}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc sizing-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/sizing}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc dimensions-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/dimensions}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc numeric-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/numeric}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc opacity-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/opacity}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc other-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/other}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc rotation-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/rotation}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc spacing-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/spacing}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc string-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/string}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])
 
 (mf/defc typography-modal
   {::mf/register modal/components
    ::mf/register-as :tokens/typography}
   [properties]
-  [:& tokens-properties-form properties])
+  [:& modal properties])

frontend/src/app/main/ui/workspace/tokens/modals.scss

@@ -0,0 +1,16 @@
+// 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/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.shadow {
+  @extend .modal-container-base;
+  @include menuShadow;
+  position: absolute;
+  z-index: 11;
+  overflow-y: auto;
+  overflow-x: hidden;
+}