Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/tokens/management/create/modals.cljs (ClojureScript)

Code before:
    (-> (calculate-position vport position x y color?)
        (clj->js))))

(mf/defc token-update-create-modal
  {::mf/wrap-props false}
  [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
        modal-size-large* (mf/use-state (= token-type :typography))
        modal-size-large? (deref modal-size-large*)
        close-modal (mf/use-fn
                     (fn []
                       (modal/hide!)))
        update-modal-size (mf/use-fn
                           (fn [visible]
                             (reset! modal-size-large* visible)))]
    [:div {:class (stl/css-case
                   :token-modal-wrapper true
                   :token-modal-large modal-size-large?)
           :style wrapper-style
           :data-testid "token-update-create-modal"}
     [:> icon-button* {:on-click close-modal
                       :class (stl/css :close-btn)
                       :icon i/close
                       :variant "action"
                       :aria-label (tr "labels.close")}]
     [:> form-wrapper* {:is-create (not (instance? ctob/Token token))
                        :token token
                        :action action
                        :selected-token-set-id selected-token-set-id
                        :token-type token-type
                        :on-display-colorpicker update-modal-size}]]))

;; Modals ----------------------------------------------------------------------

(mf/defc boolean-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/boolean}
  [properties]
  [:& token-update-create-modal properties])

(mf/defc border-radius-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/border-radius}
  [properties]
  [:& token-update-create-modal properties])

(mf/defc color-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/color}
  [properties]
  [:& token-update-create-modal properties])

Review comment (refactor):
We have a helper for this `(ctob/token? token)`. It's better to use it, because in the future we may add further checks.

Code after:
    (-> (calculate-position vport position x y color?)
        (clj->js))))

(mf/defc token-update-create-modal
  {::mf/wrap-props false}
  [{:keys [x y position token token-type action selected-token-set-id] :as _args}]
  (let [wrapper-style (use-viewport-position-style x y position (= token-type :color))
        modal-size-large* (mf/use-state (= token-type :typography))
        modal-size-large? (deref modal-size-large*)
        close-modal (mf/use-fn
                     (fn []
                       (modal/hide!)))
        update-modal-size (mf/use-fn
                           (fn [visible]
                             (reset! modal-size-large* visible)))]
    [:div {:class (stl/css-case
                   :token-modal-wrapper true
                   :token-modal-large modal-size-large?)
           :style wrapper-style
           :data-testid "token-update-create-modal"}
     [:> icon-button* {:on-click close-modal
                       :class (stl/css :close-btn)
                       :icon i/close
                       :variant "action"
                       :aria-label (tr "labels.close")}]
     [:> form-wrapper* {:is-create (not (ctob/token? token))
                        :token token
                        :action action
                        :selected-token-set-id selected-token-set-id
                        :token-type token-type
                        :on-display-colorpicker update-modal-size}]]))

;; Modals ----------------------------------------------------------------------

(mf/defc boolean-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/boolean}
  [properties]
  [:& token-update-create-modal properties])

(mf/defc border-radius-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/border-radius}
  [properties]
  [:& token-update-create-modal properties])

(mf/defc color-modal
  {::mf/register modal/components
   ::mf/register-as :tokens/color}
  [properties]
  [:& token-update-create-modal properties])