Repository: penpot/penpot
File: frontend/src/app/main/ui/inspect/attributes/variant.cljs (ClojureScript)

Code before:
;;
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.inspect.attributes.variant
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.data.macros :as dm]
   [app.common.logic.variants :as clv]
   [app.main.ui.components.copy-button :refer [copy-button]]
   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
   [app.util.i18n :refer [tr]]
   [cuerdas.core :as str]
   [rumext.v2 :as mf]))

(mf/defc variant-block*
  [{:keys [name value]}]
  [:div {:title value
         :class (stl/css :variant-row)}
   [:div {:class (stl/css :global/attr-label)} name]
   [:div {:class (stl/css :global/attr-value)}
    [:& copy-button {:data value}
     [:div {:class (stl/css :button-children)} value]]]])


(mf/defc variant-panel
  [{:keys [objects shapes libraries fid]}]
  (let [data            (dm/get-in libraries [fid :data])
        variant-id      (->> shapes first :id)
        properties      (mf/with-memo [data objects variant-id]
                          (clv/extract-properties-values data objects variant-id))]
    [:div {:class (stl/css :attributes-block)}
     [:& inspect-title-bar
      {:title (tr "inspect.attributes.variant")
       :class (stl/css :title-spacing-variant)}]

     (for [[pos property] (map vector (range) properties)]
       (let [val (str/join ", " (:values property))]
         [:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value val}]))]))


Review comment (suggestion):
Plz don't use random abbreviations... :stuck_out_tongue: 

Name this `file-id`. Memory and disk are cheap, and you'l spare the future reader some time trying to figure out what a `fid` is...

Code after:
;;
;; Copyright (c) KALEIDOS INC

(ns app.main.ui.inspect.attributes.variant
  (:require-macros [app.main.style :as stl])
  (:require
   [app.common.data.macros :as dm]
   [app.common.logic.variants :as clv]
   [app.common.types.component :as ctc]
   [app.common.types.components-list :as ctkl]
   [app.main.ui.components.copy-button :refer [copy-button*]]
   [app.main.ui.components.title-bar :refer [inspect-title-bar*]]
   [app.util.i18n :refer [tr]]
   [cuerdas.core :as str]
   [rumext.v2 :as mf]))

(mf/defc variant-block*
  [{:keys [name value]}]
  [:div {:title value
         :class (stl/css :variant-row)}
   [:div {:class (stl/css :global/attr-label)} name]
   [:div {:class (stl/css :global/attr-value)}
    [:> copy-button* {:data value}
     [:div {:class (stl/css :button-children)} value]]]])


(mf/defc variant-panel*
  [{:keys [objects shapes libraries file-id] :as kk}]
  (let [shape           (->> shapes first)
        title           (cond
                          (ctc/is-variant-container? shape)
                          "inspect.attributes.variant.component"
                          (ctc/main-instance? shape)
                          "inspect.attributes.variant.variant"
                          :else
                          "inspect.attributes.variant.copy")

        properties      (mf/with-memo [objects shape]
                          (let [data          (dm/get-in libraries [file-id :data])
                                is-container? (ctc/is-variant-container? shape)
                                component     (when-not is-container? (ctkl/get-component data (:component-id shape)))]
                            (if is-container?
                              (->> (clv/extract-properties-values data objects (:id shape))
                                   (map #(update % :value (partial str/join ", "))))
                              (->> (:variant-properties component)
                                   (map #(update % :value (fn [v] (if (str/blank? v) "--" v))))))))]
    [:div {:class (stl/css :attributes-block)}
     [:> inspect-title-bar*
      {:title (tr title)
       :class (stl/css :title-spacing-variant)}]