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

Code before:
   [app.main.ui.ds.foundations.typography.text :refer [text*]]
   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
   [app.util.dom :as dom]
   [app.util.i18n :refer [tr]]
   [app.util.webapi :as wapi]
   [app.util.zip :as uz]
   [beicon.v2.core :as rx]
   [cuerdas.core :as str]
   [potok.v2.core :as ptk]
   [rumext.v2 :as mf]))

(defn- on-stream-imported
  [type tokens-lib-stream]
  (rx/sub!
   tokens-lib-stream
   (fn [lib]
     (st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens" :type type})
               (dwtl/import-tokens-lib lib))
     (modal/hide!))
   (fn [err]
     (st/emit! (ntf/show {:content (dwte/humanize-errors [(ex-data err)])
                          :detail (dwte/detail-errors [(ex-data err)])
                          :type :toast
                          :level :error})))))

(mf/defc dropdown-button*
  {::mf/private true}
  [{:keys [options on-click text-render default]}]
  (let [initial-option (or (first (filter #(= (:value %) default) options))
                           (first options))
        selected-option* (mf/use-state initial-option)
        selected-option @selected-option*
        show-dropdown? (mf/use-state false)

        js-options (clj->js (mapv (fn [option]
                                    {:id (str (:value option))
                                     :label (:label option)
                                     :aria-label (:label option)})
                                  options))
        button-text (if text-render
                      (text-render selected-option)
                      (:label selected-option))

        toggle-dropdown
        (mf/use-fn
         (fn [event]
           (dom/prevent-default event)
           (dom/stop-propagation event)
           (swap! show-dropdown? not)))

        close-dropdown

Review comment (suggestion):
I'd suggest the name `import-type-dropdown`. This makes explicit that this is not a generic dropdown button but one specific for this form.

Code after:
   [app.main.ui.ds.foundations.typography.text :refer [text*]]
   [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
   [app.util.dom :as dom]
   [app.util.i18n :refer [tr]]
   [app.util.webapi :as wapi]
   [app.util.zip :as uz]
   [beicon.v2.core :as rx]
   [cuerdas.core :as str]
   [potok.v2.core :as ptk]
   [rumext.v2 :as mf]))

(defn- on-stream-imported
  [type tokens-lib-stream]
  (rx/sub!
   tokens-lib-stream
   (fn [lib]
     (st/emit! (ptk/data-event ::ev/event {::ev/name "import-tokens" :type type})
               (dwtl/import-tokens-lib lib))
     (modal/hide!))
   (fn [err]
     (st/emit! (ntf/show {:content (dwte/humanize-errors [(ex-data err)])
                          :detail (dwte/detail-errors [(ex-data err)])
                          :type :toast
                          :level :error})))))

(mf/defc import-type-dropdown*
  {::mf/private true}
  [{:keys [options on-click text-render default]}]
  (let [initial-option (or (first (filter #(= (:value %) default) options))
                           (first options))
        selected-option* (mf/use-state initial-option)
        selected-option @selected-option*
        show-dropdown? (mf/use-state false)

        js-options (mf/use-memo
                    (mf/deps options)
                    #(clj->js
                      (mapv (fn [option]
                              {:id (str (:value option))
                               :label (:label option)
                               :aria-label (:label option)})
                            options)))
        button-text (if text-render
                      (text-render selected-option)
                      (:label selected-option))

        toggle-dropdown
        (mf/use-fn
         (fn [event]
           (dom/prevent-default event)
           (dom/stop-propagation event)