♻️ Refactor numeric-input naming

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

@@ -10,7 +10,7 @@
    [app.common.math :as mth]
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
@@ -143,7 +143,7 @@
     [:div.editable-select {:class class
                            :ref on-node-load}
      (if (= type "number")
-       [:> numeric-input {:value (or (some-> @state :current-value value->label) "")
+       [:> numeric-input* {:value (or (some-> @state :current-value value->label) "")
                            :on-change set-value
                            :on-focus handle-focus
                            :on-blur handle-blur

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

@@ -20,7 +20,7 @@
    [goog.events :as events]
    [rumext.v2 :as mf]))
 
-(mf/defc numeric-input
+(mf/defc numeric-input*
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]

frontend/src/app/main/ui/workspace/nudge.cljs

@@ -10,7 +10,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -49,12 +49,12 @@
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.small-nudge")]
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (:small nudge)
                              :on-change update-small}]]]
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.big-nudge")]
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (:big nudge)
                              :on-change update-big}]]]]]]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -11,7 +11,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -138,7 +138,7 @@
 
       (if (= type :square)
         [:div.input-element.pixels {:title (tr "workspace.options.size")}
-         [:> numeric-input {:min 0.01
+         [:> numeric-input* {:min 0.01
                              :value (or (:size params) "")
                              :no-validate true
                              :on-change (handle-change :params :size)}]]
@@ -202,7 +202,7 @@
           :label (if (= :row type)
                    (tr "workspace.options.grid.params.height")
                    (tr "workspace.options.grid.params.width"))}
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "Auto"
            :value (or (:item-length params) "")
            :nillable true

frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs

@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
    [app.util.dom :as dom]
@@ -125,7 +125,7 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :column)
@@ -133,7 +133,7 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :row)
@@ -156,12 +156,12 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :column)
               :value column}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :column)
@@ -169,12 +169,12 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :row)
               :value row}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :row)

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs

@@ -17,7 +17,7 @@
    [app.main.data.workspace.interactions :as dwi]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -332,7 +332,7 @@
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
             [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-             [:> numeric-input {:ref ext-delay-ref
+             [:> numeric-input* {:ref ext-delay-ref
                                  :on-change change-delay
                                  :value (:delay interaction)
                                  :title (tr "workspace.options.interaction-ms")}]
@@ -518,7 +518,7 @@
               [:div.interactions-element
                [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
                [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-                 [:> numeric-input {:ref ext-duration-ref
+                [:> numeric-input* {:ref ext-duration-ref
                                     :on-change change-duration
                                     :value (-> interaction :animation :duration)
                                     :title (tr "workspace.options.interaction-ms")}]

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs

@@ -11,7 +11,7 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.changes :as dch]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
@@ -162,7 +162,7 @@
 
        [:div.input-element {:title (tr "workspace.options.opacity")
                             :class "percentail"}
-        [:> numeric-input
+        [:> numeric-input*
          {:value (opacity->string current-opacity)
           :placeholder (tr "settings.multiple")
           :on-change handle-opacity-change

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -15,7 +15,7 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -278,7 +278,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Vertical padding"}
          [:span.icon.rotated i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p1)
            :on-focus #(do
@@ -289,7 +289,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal padding"}
          [:span.icon i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p2)
            :on-focus #(do (dom/select-target %)
@@ -308,7 +308,7 @@
                    :p3 "Bottom"
                    :p4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-change (partial on-change :multiple num)
               :on-focus #(do (dom/select-target %)
@@ -342,7 +342,7 @@
        {:alt "Column gap"}
        [:span.icon
         i/auto-gap]
-       [:> numeric-input {:no-validate true
+       [:> numeric-input* {:no-validate true
                            :placeholder "--"
                            :on-focus (fn [event]
                                        (select-gap :column-gap)
@@ -359,7 +359,7 @@
        {:alt "Row gap"}
        [:span.icon.rotated
         i/auto-gap]
-       [:> numeric-input {:no-validate true
+       [:> numeric-input* {:no-validate true
                            :placeholder "--"
                            :on-focus (fn [event]
                                        (select-gap :row-gap)
@@ -465,7 +465,7 @@
               i/layout-columns)]
 
            [:div.grid-column-value
-            [:> numeric-input {:no-validate true
+            [:> numeric-input* {:no-validate true
                                 :value (:value column)
                                 :on-change #(set-column-value type index %)
                                 :placeholder "--"

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -13,7 +13,7 @@
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
@@ -68,7 +68,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Vertical margin"}
          [:span.icon i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins true false true false)
@@ -80,7 +80,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal margin"}
          [:span.icon.rotated i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins false true false true)
@@ -100,7 +100,7 @@
                    :m3 "Bottom"
                    :m4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-focus (fn [event]
                           (select-margin num)
@@ -269,7 +269,7 @@
 
           [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"}
            i/layers
-           [:> numeric-input
+           [:> numeric-input*
             {:placeholder "--"
              :on-focus #(dom/select-target %)
              :on-change #(on-change-z-index %)
@@ -317,7 +317,7 @@
                                     "minW" (= item :layout-item-min-w))}
             [:div.input-element
              {:alt   (tr (dm/str "workspace.options.layout-item." (d/name item)))}
-             [:> numeric-input
+             [:> numeric-input*
               {:no-validate true
                :min 0
                :data-wrap true

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -18,7 +18,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -316,7 +316,7 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.size")]
           [:div.input-element.width {:title (tr "workspace.options.width")}
-           [:> numeric-input {:min 0.01
+           [:> numeric-input* {:min 0.01
                                :no-validate true
                                :placeholder "--"
                                :on-change on-width-change
@@ -324,7 +324,7 @@
                                :value (:width values)}]]
 
           [:div.input-element.height {:title (tr "workspace.options.height")}
-           [:> numeric-input {:min 0.01
+           [:> numeric-input* {:min 0.01
                                :no-validate true
                                :placeholder "--"
                                :on-change on-height-change
@@ -344,13 +344,13 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.position")]
           [:div.input-element.Xaxis {:title (tr "workspace.options.x")}
-           [:> numeric-input {:no-validate true
+           [:> numeric-input* {:no-validate true
                                :placeholder "--"
                                :on-change on-pos-x-change
                                :disabled disabled-position-x?
                                :value (:x values)}]]
           [:div.input-element.Yaxis {:title (tr "workspace.options.y")}
-           [:> numeric-input {:no-validate true
+           [:> numeric-input* {:no-validate true
                                :placeholder "--"
                                :disabled disabled-position-y?
                                :on-change on-pos-y-change
@@ -361,7 +361,7 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.rotation")]
           [:div.input-element.degrees {:title (tr "workspace.options.rotation")}
-           [:> numeric-input
+           [:> numeric-input*
             {:no-validate true
              :min 0
              :max 359
@@ -390,7 +390,7 @@
           (cond
             (= radius-mode :radius-1)
             [:div.input-element.mini {:title (tr "workspace.options.radius")}
-             [:> numeric-input
+             [:> numeric-input*
               {:placeholder "--"
                :ref radius-input-ref
                :min 0
@@ -409,28 +409,28 @@
             (= radius-mode :radius-4)
             [:*
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r1-change
                 :value (:r1 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r2-change
                 :value (:r2 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r3-change
                 :value (:r3 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r4-change

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -15,7 +15,7 @@
    [app.main.data.workspace.colors :as dc]
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -178,7 +178,7 @@
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
-         [:> numeric-input {:ref adv-offset-x-ref
+         [:> numeric-input* {:ref adv-offset-x-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :offset-x basic-offset-x-ref)
@@ -187,7 +187,7 @@
          [:span.after (tr "workspace.options.shadow-options.offsetx")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
-         [:> numeric-input {:ref adv-offset-y-ref
+         [:> numeric-input* {:ref adv-offset-y-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :offset-y basic-offset-y-ref)
@@ -197,7 +197,7 @@
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
-         [:> numeric-input {:ref adv-blur-ref
+         [:> numeric-input* {:ref adv-blur-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :blur basic-blur-ref)
@@ -207,7 +207,7 @@
          [:span.after (tr "workspace.options.shadow-options.blur")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
-         [:> numeric-input {:ref adv-spread-ref
+         [:> numeric-input* {:ref adv-spread-ref
                              :no-validate true
                              :placeholder "--"
                              :on-change (update-attr index :spread)

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.select :refer [select]]
@@ -456,7 +456,7 @@
                 :alt (tr "workspace.options.text-options.line-height")}
          i/text-lineheight-refactor]
 
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -473,7 +473,7 @@
          {:class (css :icon)
           :alt (tr "workspace.options.text-options.letter-spacing")}
          i/text-letterspacing-refactor]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -488,7 +488,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.line-height")}
          i/line-height]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -503,7 +503,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.letter-spacing")}
          i/letter-spacing]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -15,7 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
@@ -205,7 +205,7 @@
                    (not (:gradient color)))
           [:div.input-element
            {:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
-           [:> numeric-input {:value (-> color :opacity opacity->string)
+           [:> numeric-input* {:value (-> color :opacity opacity->string)
                                :placeholder (tr "settings.multiple")
                                :select-on-focus select-on-focus
                                :on-focus on-focus

frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs

@@ -7,7 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.rows.input-row
   (:require
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -40,7 +40,7 @@
                :class "input-text"
                :on-change on-change} ]
 
-      [:> numeric-input
+      [:> numeric-input*
        {:placeholder placeholder
         :min min
         :max max

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -9,7 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -97,7 +97,7 @@
        {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple))
         :title (tr "workspace.options.stroke-width")}
 
-       [:> numeric-input
+       [:> numeric-input*
         {:min 0
          :value (-> (:stroke-width stroke) width->string)
          :placeholder (tr "settings.multiple")