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

Code before:
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.workspace.tokens.modals.export
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.json :as json]
   [app.common.types.tokens-lib :as ctob]
   [app.main.data.modal :as modal]
   [app.main.refs :as refs]
   [app.main.ui.components.code-block :refer [code-block]]
   [app.main.ui.ds.buttons.button :refer [button*]]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
   [app.main.ui.ds.foundations.typography.text :refer [text*]]
   [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
   [app.util.dom :as dom]
   [app.util.i18n :refer [tr]]
   [app.util.webapi :as wapi]
   [app.util.zip :as zip]
   [rumext.v2 :as mf]))

(mf/defc export-tab*
  {::mf/props :obj
   ::mf/private true}
  [{:keys [on-export is-disabled children]}]
  [:div {:class (stl/css :export-preview)}
   (when-not is-disabled
     [:> text* {:as "span" :typography "body-medium" :class (stl/css :preview-label)}
      (tr "workspace.tokens.export.preview")])
   (if is-disabled
     [:div {:class (stl/css :disabled-message)}
      (tr "workspace.tokens.export.no-tokens-themes-sets")]
     children)
   [:div {:class (stl/css :export-actions)}
    [:> button* {:variant "secondary"
                 :type "button"
                 :on-click modal/hide!}
     (tr "labels.cancel")]
    [:> button* {:variant "primary"
                 :type "button"
                 :disabled is-disabled
                 :on-click on-export}
     (tr "workspace.tokens.export")]]])

(mf/defc single-file-tab*
  {::mf/props :obj
   ::mf/private true}
  []

Review comment (suggestion):


::mf/props is deprecated and should not be used in any new code, and removed in modified code when possible. This is now the default behavior of any component with a * suffix.

https://github.com/funcool/rumext?tab=readme-ov-file#what-is-the-legacy-mode


Code after:
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.workspace.tokens.modals.export
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.json :as json]
   [app.common.types.tokens-lib :as ctob]
   [app.main.data.modal :as modal]
   [app.main.refs :as refs]
   [app.main.ui.components.code-block :refer [code-block]]
   [app.main.ui.ds.buttons.button :refer [button*]]
   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
   [app.main.ui.ds.foundations.typography.text :refer [text*]]
   [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
   [app.util.dom :as dom]
   [app.util.i18n :refer [tr]]
   [app.util.webapi :as wapi]
   [app.util.zip :as zip]
   [rumext.v2 :as mf]))

(mf/defc export-tab*
  {::mf/private true}
  [{:keys [on-export is-disabled children]}]
  [:div {:class (stl/css :export-preview)}
   (when-not is-disabled
     [:> text* {:as "span" :typography "body-medium" :class (stl/css :preview-label)}
      (tr "workspace.tokens.export.preview")])
   (if is-disabled
     [:div {:class (stl/css :disabled-message)}
      (tr "workspace.tokens.export.no-tokens-themes-sets")]
     children)
   [:div {:class (stl/css :export-actions)}
    [:> button* {:variant "secondary"
                 :type "button"
                 :on-click modal/hide!}
     (tr "labels.cancel")]
    [:> button* {:variant "primary"
                 :type "button"
                 :disabled is-disabled
                 :on-click on-export}
     (tr "workspace.tokens.export")]]])

(mf/defc single-file-tab*
  {::mf/private true}
  []
  (let [tokens-data (some-> (deref refs/tokens-lib)
                            (ctob/export-dtcg-json))