johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

♻️ Rename files and components

Browse Source
This commit is contained in:
Eva Marco
2025-12-02 16:25:08 +01:00
parent 1dc274e6e2
commit 81c6cb52ca
9 changed files with 110 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/main/ui/workspace/tokens/management/create/border_radius.cljs
View File

@@ -23,7 +23,7 @@
[app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as fc] [app.main.ui.forms :as fc]
[app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]] [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -187,7 +187,7 @@
{:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])] {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token* [:> input-token*
{:placeholder (tr "workspace.tokens.token-value-enter") {:placeholder (tr "workspace.tokens.token-value-enter")
:label (tr "workspace.tokens.token-value") :label (tr "workspace.tokens.token-value")
:name :value :name :value

4
frontend/src/app/main/ui/workspace/tokens/management/create/color.cljs
View File

@@ -23,7 +23,7 @@
[app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as fc] [app.main.ui.forms :as fc]
[app.main.ui.workspace.tokens.management.create.form-color-input-token :refer [form-color-input-token*]] [app.main.ui.workspace.tokens.management.create.color-input-token :refer [color-input-token*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -188,7 +188,7 @@
{:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])] {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-color-input-token* [:> color-input-token*
{:placeholder (tr "workspace.tokens.token-value-enter") {:placeholder (tr "workspace.tokens.token-value-enter")
:label (tr "workspace.tokens.token-value") :label (tr "workspace.tokens.token-value")
:name :value :name :value

44
frontend/src/app/main/ui/workspace/tokens/management/create/form_color_input_token.cljs → frontend/src/app/main/ui/workspace/tokens/management/create/color_input_token.cljs
View File

@@ -4,7 +4,7 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.management.create.form-color-input-token (ns app.main.ui.workspace.tokens.management.create.color-input-token
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.colors :as color] [app.common.colors :as color]
@@ -102,7 +102,7 @@
:on-finish-drag on-finish-drag :on-finish-drag on-finish-drag
:on-change on-change'}]])) :on-change on-change'}]]))
(mf/defc form-color-input-token* (mf/defc color-input-token*
[{:keys [name tokens token] :rest props}] [{:keys [name tokens token] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
@@ -259,33 +259,33 @@
[:> ramp* {:color value :on-change on-change-value}])])) [:> ramp* {:color value :on-change on-change-value}])]))
(defn- on-composite-indexed-input-token-change (defn- on-composite-indexed-input-token-change
([form field index value] ([form field index value composite-type]
(on-composite-indexed-input-token-change form field index value false)) (on-composite-indexed-input-token-change form field index value composite-type false))
([form field index value trim?] ([form field index value composite-type trim?]
(letfn [(clean-errors [errors] (letfn [(clean-errors [errors]
(-> errors (-> errors
(dissoc field) (dissoc field)
(not-empty)))] (not-empty)))]
(swap! form (fn [state] (swap! form (fn [state]
(-> state (-> state
(assoc-in [:data :value :shadows index field] (if trim? (str/trim value) value)) (assoc-in [:data :value composite-type index field] (if trim? (str/trim value) value))
(update :errors clean-errors) (update :errors clean-errors)
(update :extra-errors clean-errors))))))) (update :extra-errors clean-errors)))))))
(mf/defc color-input-indexed* (mf/defc color-input-token-indexed*
[{:keys [name tokens token index] :rest props}] [{:keys [name tokens token index composite-type] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
input-name name input-name name
error error
(get-in @form [:errors :value :shadows index input-name]) (get-in @form [:errors :value composite-type index input-name])
value value
(get-in @form [:data :value :shadows index input-name] "") (get-in @form [:data :value composite-type index input-name] "")
color-resolved color-resolved
(get-in @form [:data :value :shadows index :color-result] "") (get-in @form [:data :value composite-type index :color-result] "")
valid-color (or (tinycolor/valid-color value) valid-color (or (tinycolor/valid-color value)
(tinycolor/valid-color color-resolved)) (tinycolor/valid-color color-resolved))
@@ -309,7 +309,7 @@
resolve-stream resolve-stream
(mf/with-memo [token] (mf/with-memo [token]
(if-let [value (get-in token [:value :shadows index input-name])] (if-let [value (get-in token [:value composite-type index input-name])]
(rx/behavior-subject value) (rx/behavior-subject value)
(rx/subject))) (rx/subject)))
@@ -363,7 +363,7 @@
(tinycolor/set-alpha (or alpha 1)) (tinycolor/set-alpha (or alpha 1))
(tinycolor/->string format))] (tinycolor/->string format))]
(when (not= value color-value) (when (not= value color-value)
(on-composite-indexed-input-token-change form input-name index color-value true) (on-composite-indexed-input-token-change form input-name index color-value composite-type true)
(rx/push! resolve-stream color-value))))) (rx/push! resolve-stream color-value)))))
on-change on-change
@@ -374,7 +374,7 @@
value (if (tinycolor/hex-without-hash-prefix? raw-value) value (if (tinycolor/hex-without-hash-prefix? raw-value)
(dm/str "#" raw-value) (dm/str "#" raw-value)
raw-value)] raw-value)]
(on-composite-indexed-input-token-change form input-name index value true) (on-composite-indexed-input-token-change form input-name index value composite-type true)
(rx/push! resolve-stream value)))) (rx/push! resolve-stream value))))
props props
@@ -390,7 +390,7 @@
:hint-message (:message error)}) :hint-message (:message error)})
props)] props)]
(mf/with-effect [resolve-stream tokens token input-name index] (mf/with-effect [resolve-stream tokens token input-name index composite-type]
(let [subs (->> resolve-stream (let [subs (->> resolve-stream
(rx/debounce 300) (rx/debounce 300)
(rx/mapcat (partial resolve-value tokens token)) (rx/mapcat (partial resolve-value tokens token))
@@ -404,24 +404,24 @@
(cond (cond
(and error (str/empty? (:error/value error))) (and error (str/empty? (:error/value error)))
(do (do
(swap! form update-in [:errors :value :shadows index] dissoc input-name) (swap! form update-in [:errors :value composite-type index] dissoc input-name)
(swap! form update-in [:data :value :shadows index] dissoc input-name) (swap! form update-in [:data :value composite-type index] dissoc input-name)
(swap! form assoc-in [:data :value :shadows index :color-result] "") (swap! form assoc-in [:data :value composite-type index :color-result] "")
(swap! form update :extra-errors dissoc :value) (swap! form update :extra-errors dissoc :value)
(reset! hint* {})) (reset! hint* {}))
(some? error) (some? error)
(let [error' (:message error)] (let [error' (:message error)]
(swap! form assoc-in [:extra-errors :value :shadows index input-name] {:message error'}) (swap! form assoc-in [:extra-errors :value composite-type index input-name] {:message error'})
(swap! form assoc-in [:data :value :shadows index :color-result] "") (swap! form assoc-in [:data :value composite-type index :color-result] "")
(reset! hint* {:message error' :type "error"})) (reset! hint* {:message error' :type "error"}))
:else :else
(let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value)) (let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value))
input-value (get-in @form [:data :value :shadows index input-name] "")] input-value (get-in @form [:data :value composite-type index input-name] "")]
(swap! form update :errors dissoc :value) (swap! form update :errors dissoc :value)
(swap! form update :extra-errors dissoc :value) (swap! form update :extra-errors dissoc :value)
(swap! form assoc-in [:data :value :shadows index :color-result] (dwtf/format-token-value value)) (swap! form assoc-in [:data :value composite-type index :color-result] (dwtf/format-token-value value))
(if (= input-value (str value)) (if (= input-value (str value))
(reset! hint* {}) (reset! hint* {})
(reset! hint* {:message message :type "hint"})))))))] (reset! hint* {:message message :type "hint"})))))))]

4
frontend/src/app/main/ui/workspace/tokens/management/create/dimensions.cljs
View File

@@ -23,7 +23,7 @@
[app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as fc] [app.main.ui.forms :as fc]
[app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]] [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -186,7 +186,7 @@
{:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])] {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token* [:> input-token*
{:placeholder (tr "workspace.tokens.token-value-enter") {:placeholder (tr "workspace.tokens.token-value-enter")
:label (tr "workspace.tokens.token-value") :label (tr "workspace.tokens.token-value")
:name :value :name :value

36
frontend/src/app/main/ui/workspace/tokens/management/create/form_input_token.cljs → frontend/src/app/main/ui/workspace/tokens/management/create/input_token.cljs
View File

@@ -4,7 +4,7 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.management.create.form-input-token (ns app.main.ui.workspace.tokens.management.create.input-token
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
@@ -39,7 +39,7 @@
(rx/of {:value resolved-value}) (rx/of {:value resolved-value})
(rx/of {:error (first errors)})))))))) (rx/of {:error (first errors)}))))))))
(mf/defc form-input-token* (mf/defc input-token*
[{:keys [name tokens token] :rest props}] [{:keys [name tokens token] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
@@ -126,7 +126,7 @@
(update :errors clean-errors) (update :errors clean-errors)
(update :extra-errors clean-errors))))))) (update :extra-errors clean-errors)))))))
(mf/defc form-input-token-composite* (mf/defc input-token-composite*
[{:keys [name tokens token] :rest props}] [{:keys [name tokens token] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
@@ -214,34 +214,34 @@
[:> input* props])) [:> input* props]))
(defn- on-composite-indexed-input-token-change (defn- on-composite-indexed-input-token-change
([form field index value] ([form field index value composite-type]
(on-composite-indexed-input-token-change form field index value false)) (on-composite-indexed-input-token-change form field index value composite-type false))
([form field index value trim?] ([form field index value composite-type trim?]
(letfn [(clean-errors [errors] (letfn [(clean-errors [errors]
(-> errors (-> errors
(dissoc field) (dissoc field)
(not-empty)))] (not-empty)))]
(swap! form (fn [state] (swap! form (fn [state]
(-> state (-> state
(assoc-in [:data :value :shadows index field] (if trim? (str/trim value) value)) (assoc-in [:data :value composite-type index field] (if trim? (str/trim value) value))
(update :errors clean-errors) (update :errors clean-errors)
(update :extra-errors clean-errors))))))) (update :extra-errors clean-errors)))))))
(mf/defc form-input-token-indexed* (mf/defc input-token-indexed*
[{:keys [name tokens token index] :rest props}] [{:keys [name tokens token index composite-type] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
input-name name input-name name
error error
(get-in @form [:errors :value :shadows index input-name]) (get-in @form [:errors :value composite-type index input-name])
value-from-form value-from-form
(get-in @form [:data :value :shadows index input-name] "") (get-in @form [:data :value composite-type index input-name] "")
resolve-stream resolve-stream
(mf/with-memo [token index input-name] (mf/with-memo [token index input-name]
(if-let [value (get-in token [:value :shadows index input-name])] (if-let [value (get-in token [:value composite-type index input-name])]
(rx/behavior-subject value) (rx/behavior-subject value)
(rx/subject))) (rx/subject)))
@@ -256,7 +256,7 @@
(mf/deps resolve-stream input-name index) (mf/deps resolve-stream input-name index)
(fn [event] (fn [event]
(let [value (-> event dom/get-target dom/get-input-value)] (let [value (-> event dom/get-target dom/get-input-value)]
(on-composite-indexed-input-token-change form input-name index value true) (on-composite-indexed-input-token-change form input-name index value composite-type true)
(rx/push! resolve-stream value)))) (rx/push! resolve-stream value))))
props props
@@ -276,7 +276,7 @@
(mf/spread-props props {:hint-formated true}) (mf/spread-props props {:hint-formated true})
props)] props)]
(mf/with-effect [resolve-stream tokens token input-name index] (mf/with-effect [resolve-stream tokens token input-name index composite-type]
(let [subs (->> resolve-stream (let [subs (->> resolve-stream
(rx/debounce 300) (rx/debounce 300)
(rx/mapcat (partial resolve-value tokens token)) (rx/mapcat (partial resolve-value tokens token))
@@ -290,19 +290,19 @@
(cond (cond
(and error (str/empty? (:error/value error))) (and error (str/empty? (:error/value error)))
(do (do
(swap! form update-in [:errors :value :shadows index] dissoc input-name) (swap! form update-in [:errors :value composite-type index] dissoc input-name)
(swap! form update-in [:data :value :shadows index] dissoc input-name) (swap! form update-in [:data :value composite-type index] dissoc input-name)
(swap! form update :extra-errors dissoc :value) (swap! form update :extra-errors dissoc :value)
(reset! hint* {})) (reset! hint* {}))
(some? error) (some? error)
(let [error' (:message error)] (let [error' (:message error)]
(swap! form assoc-in [:extra-errors :value :shadows index input-name] {:message error'}) (swap! form assoc-in [:extra-errors :value composite-type index input-name] {:message error'})
(reset! hint* {:message error' :type "error"})) (reset! hint* {:message error' :type "error"}))
:else :else
(let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value)) (let [message (tr "workspace.tokens.resolved-value" (dwtf/format-token-value value))
input-value (get-in @form [:data :value :shadows index input-name] "")] input-value (get-in @form [:data :value composite-type index input-name] "")]
(swap! form update :errors dissoc :value) (swap! form update :errors dissoc :value)
(swap! form update :extra-errors dissoc :value) (swap! form update :extra-errors dissoc :value)
(if (= input-value (str value)) (if (= input-value (str value))

8
frontend/src/app/main/ui/workspace/tokens/management/create/form_select_token.cljs → frontend/src/app/main/ui/workspace/tokens/management/create/select_token.cljs
View File

@@ -4,26 +4,26 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.management.create.form-select-token (ns app.main.ui.workspace.tokens.management.create.select-token
(:require (:require
[app.main.ui.ds.controls.select :refer [select*]] [app.main.ui.ds.controls.select :refer [select*]]
[app.main.ui.forms :as fc] [app.main.ui.forms :as fc]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc select-composite* (mf/defc select-composite*
[{:keys [name index] :rest props}] [{:keys [name index composite-type] :rest props}]
(let [form (mf/use-ctx fc/context) (let [form (mf/use-ctx fc/context)
input-name name input-name name
value value
(get-in @form [:data :value :shadows index input-name] false) (get-in @form [:data :value composite-type index input-name] false)
on-change on-change
(mf/use-fn (mf/use-fn
(mf/deps input-name) (mf/deps input-name)
(fn [type] (fn [type]
(let [is-inner? (= type "inner")] (let [is-inner? (= type "inner")]
(swap! form assoc-in [:data :value :shadows index input-name] is-inner?)))) (swap! form assoc-in [:data :value composite-type index input-name] is-inner?))))
props (mf/spread-props props {:default-selected (if value "inner" "drop") props (mf/spread-props props {:default-selected (if value "inner" "drop")
:variant "ghost" :variant "ghost"

97
frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs
View File

@@ -27,9 +27,9 @@
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as forms] [app.main.ui.forms :as forms]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.workspace.tokens.management.create.form-color-input-token :refer [color-input-indexed*]] [app.main.ui.workspace.tokens.management.create.color-input-token :refer [color-input-token-indexed*]]
[app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token-composite* form-input-token-indexed*]] [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token-composite* input-token-indexed*]]
[app.main.ui.workspace.tokens.management.create.form-select-token :refer [select-composite*]] [app.main.ui.workspace.tokens.management.create.select-token :refer [select-composite*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -38,13 +38,6 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
;; TODO: Review if code has this implementation
(defn vec-remove
"remove elem in coll"
[pos coll]
(into (subvec coll 0 pos) (subvec coll (inc pos))))
;; TODO: Put this in a common file, and use ir for shadow option menu as well
(def ^:private default-token-shadow (def ^:private default-token-shadow
{:offsetX "4" {:offsetX "4"
:offsetY "4" :offsetY "4"
@@ -52,30 +45,30 @@
:spread "0"}) :spread "0"})
(defn get-subtoken (defn get-subtoken
[token index prop] [token index prop composite-type]
(let [value (get-in token [:value :shadows index prop])] (let [value (get-in token [:value composite-type index prop])]
(d/without-nils (d/without-nils
{:type (if (= prop :color) :color :number) {:type (if (= prop :color) :color :number)
:value value}))) :value value})))
(mf/defc shadow-formset* (mf/defc shadow-formset*
[{:keys [index token tokens remove-shadow-block show-button] :as props}] [{:keys [index token tokens remove-shadow-block show-button composite-type] :as props}]
(let [inset-token (get-subtoken token index :inset) (let [inset-token (get-subtoken token index :inset composite-type)
inset-token (hooks/use-equal-memo inset-token) inset-token (hooks/use-equal-memo inset-token)
color-token (get-subtoken token index :color) color-token (get-subtoken token index :color composite-type)
color-token (hooks/use-equal-memo color-token) color-token (hooks/use-equal-memo color-token)
offset-x-token (get-subtoken token index :offsetX) offset-x-token (get-subtoken token index :offsetX composite-type)
offset-x-token (hooks/use-equal-memo offset-x-token) offset-x-token (hooks/use-equal-memo offset-x-token)
offset-y-token (get-subtoken token index :offsetY) offset-y-token (get-subtoken token index :offsetY composite-type)
offset-y-token (hooks/use-equal-memo offset-y-token) offset-y-token (hooks/use-equal-memo offset-y-token)
blur-token (get-subtoken token index :blur) blur-token (get-subtoken token index :blur composite-type)
blur-token (hooks/use-equal-memo blur-token) blur-token (hooks/use-equal-memo blur-token)
spread-token (get-subtoken token index :spreadX) spread-token (get-subtoken token index :spreadX composite-type)
spread-token (hooks/use-equal-memo spread-token) spread-token (hooks/use-equal-memo spread-token)
on-button-click on-button-click
@@ -93,6 +86,7 @@
:token inset-token :token inset-token
:tokens tokens :tokens tokens
:index index :index index
:composite-type composite-type
:name :inset}] :name :inset}]
(when show-button (when show-button
[:> icon-button* {:variant "ghost" [:> icon-button* {:variant "ghost"
@@ -102,74 +96,82 @@
:icon i/remove}])] :icon i/remove}])]
[:div {:class (stl/css :inputs-wrapper)} [:div {:class (stl/css :inputs-wrapper)}
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> color-input-indexed* [:> color-input-token-indexed*
{:placeholder (tr "workspace.tokens.token-value-enter") {:placeholder (tr "workspace.tokens.token-value-enter")
:aria-label (tr "workspace.tokens.color") :aria-label (tr "workspace.tokens.color")
:name :color :name :color
:token color-token :token color-token
:composite-type composite-type
:index index :index index
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-indexed* [:> input-token-indexed*
{:aria-label (tr "workspace.tokens.shadow-x") {:aria-label (tr "workspace.tokens.shadow-x")
:icon i/character-x :icon i/character-x
:placeholder (tr "workspace.tokens.shadow-x") :placeholder (tr "workspace.tokens.shadow-x")
:name :offsetX :name :offsetX
:token offset-x-token :token offset-x-token
:index index :index index
:composite-type composite-type
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-indexed* [:> input-token-indexed*
{:aria-label (tr "workspace.tokens.shadow-y") {:aria-label (tr "workspace.tokens.shadow-y")
:icon i/character-y :icon i/character-y
:placeholder (tr "workspace.tokens.shadow-y") :placeholder (tr "workspace.tokens.shadow-y")
:name :offsetY :name :offsetY
:token offset-y-token :token offset-y-token
:index index :index index
:composite-type composite-type
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-indexed* [:> input-token-indexed*
{:aria-label (tr "workspace.tokens.shadow-blur") {:aria-label (tr "workspace.tokens.shadow-blur")
:placeholder (tr "workspace.tokens.shadow-blur") :placeholder (tr "workspace.tokens.shadow-blur")
:name :blur :name :blur
:slot-start (mf/html [:span {:class (stl/css :visible-label)} "Blur:"]) :slot-start (mf/html [:span {:class (stl/css :visible-label)}
(str (tr "workspace.tokens.shadow-blur") ":")])
:token blur-token :token blur-token
:index index :index index
:composite-type composite-type
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-indexed* [:> input-token-indexed*
{:aria-label (tr "workspace.tokens.shadow-spread") {:aria-label (tr "workspace.tokens.shadow-spread")
:placeholder (tr "workspace.tokens.shadow-spread") :placeholder (tr "workspace.tokens.shadow-spread")
:name :spread :name :spread
:slot-start (mf/html [:span {:class (stl/css :visible-label)} "Spread:"]) :slot-start (mf/html [:span {:class (stl/css :visible-label)}
(str (tr "workspace.tokens.shadow-spread") ":")])
:token spread-token :token spread-token
:composite-type composite-type
:index index :index index
:tokens tokens}]]]])) :tokens tokens}]]]]))
(mf/defc composite-form* (mf/defc composite-form*
[{:keys [token tokens remove-shadow-block] :as props}] [{:keys [token tokens remove-shadow-block composite-type] :as props}]
(let [form (let [form
(mf/use-ctx forms/context) (mf/use-ctx forms/context)
length length
(-> form deref :data :value :shadows count)] (-> form deref :data :value composite-type count)]
(for [index (range length)] (for [index (range length)]
[:> shadow-formset* {:key index [:> shadow-formset* {:key index
:index index :index index
:token token :token token
:tokens tokens :tokens tokens
:composite-type composite-type
:remove-shadow-block remove-shadow-block :remove-shadow-block remove-shadow-block
:show-button (> length 1)}]))) :show-button (> length 1)}])))
(mf/defc reference-form* (mf/defc reference-form*
[{:keys [token tokens] :as props}] [{:keys [token tokens] :as props}]
[:div {:class (stl/css :input-row-reference)} [:div {:class (stl/css :input-row-reference)}
[:> form-input-token-composite* [:> input-token-composite*
{:placeholder (tr "workspace.tokens.reference-composite-shadow") {:placeholder (tr "workspace.tokens.reference-composite-shadow")
:aria-label (tr "labels.reference") :aria-label (tr "labels.reference")
:icon i/drop-shadow :icon i/drop-shadow
@@ -193,10 +195,9 @@
[:value [:value
[:map [:map
[:shadows {:optinal true} [:shadow {:optinal true}
[:vector [:vector
[:map [:map
;; TODO: cambiar offsetX por offset-x
[:offsetX {:optional true} [:maybe :string]] [:offsetX {:optional true} [:maybe :string]]
[:offsetY {:optional true} [:maybe :string]] [:offsetY {:optional true} [:maybe :string]]
[:blur {:optional true} [:maybe :string]] [:blur {:optional true} [:maybe :string]]
@@ -225,7 +226,7 @@
(let [reference (get value :reference) (let [reference (get value :reference)
ref-valid? (and reference (not (str/blank? reference))) ref-valid? (and reference (not (str/blank? reference)))
shadows (get value :shadows) shadows (get value :shadow)
;; To be a valid shadow it must contain one on each valid values ;; To be a valid shadow it must contain one on each valid values
valid-composite-shadow? valid-composite-shadow?
(and (seq shadows) (and (seq shadows)
@@ -245,6 +246,9 @@
(let [active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite)) (let [active-tab* (mf/use-state #(if (cft/is-reference? token) :reference :composite))
active-tab (deref active-tab*) active-tab (deref active-tab*)
composite-type :shadow
token token
(mf/with-memo [token] (mf/with-memo [token]
(or token (or token
@@ -252,16 +256,17 @@
(cond (cond
(string? value) (string? value)
{:value {:reference value {:value {:reference value
:shadows []} :shadow []}
:type :shadow} :type :shadow}
(vector? value) (vector? value)
{:value {:reference nil {:value {:reference nil
:shadows value} :shadow value}
:type :shadow}) :type :shadow})
{:type :shadow {:type :shadow
:value {:reference nil :value {:reference nil
:shadows [default-token-shadow]}}))) :shadow [default-token-shadow]}})))
token-type token-type
(get token :type) (get token :type)
@@ -271,10 +276,6 @@
token-title (str/lower (:title token-properties)) token-title (str/lower (:title token-properties))
;; TODO: review
show-button* (mf/use-state false)
show-button (deref show-button*)
tokens tokens
(mf/deref refs/workspace-active-theme-sets-tokens) (mf/deref refs/workspace-active-theme-sets-tokens)
@@ -299,15 +300,15 @@
(cond (cond
(string? raw-value) (string? raw-value)
{:reference raw-value {:reference raw-value
:shadows []} :shadow []}
(vector? raw-value) (vector? raw-value)
{:reference nil {:reference nil
:shadows raw-value} :shadow raw-value}
:else :else
{:reference nil {:reference nil
:shadows [default-token-shadow]})] :shadow [default-token-shadow]})]
{:name (:name token "") {:name (:name token "")
:description (:description token "") :description (:description token "")
@@ -358,18 +359,20 @@
on-add-shadow-block on-add-shadow-block
(mf/use-fn (mf/use-fn
(mf/deps composite-type)
(fn [] (fn []
(swap! form update-in [:data :value :shadows] conj default-token-shadow))) (swap! form update-in [:data :value composite-type] conj default-token-shadow)))
remove-shadow-block remove-shadow-block
(mf/use-fn (mf/use-fn
(mf/deps composite-type)
(fn [index event] (fn [index event]
(dom/prevent-default event) (dom/prevent-default event)
(swap! form update-in [:data :value :shadows] #(vec-remove index %)))) (swap! form update-in [:data :value composite-type] #(d/remove-at-index % index))))
on-submit on-submit
(mf/use-fn (mf/use-fn
(mf/deps validate-token token tokens token-type active-tab) (mf/deps validate-token token tokens token-type active-tab composite-type)
(fn [form _event] (fn [form _event]
(let [name (get-in @form [:clean-data :name]) (let [name (get-in @form [:clean-data :name])
description (get-in @form [:clean-data :description]) description (get-in @form [:clean-data :description])
@@ -377,7 +380,7 @@
(->> (validate-token {:token-value (if (= active-tab :reference) (->> (validate-token {:token-value (if (= active-tab :reference)
(:reference value) (:reference value)
(:shadows value)) (composite-type value))
:token-name name :token-name name
:token-description description :token-description description
:prev-token token :prev-token token
@@ -446,7 +449,7 @@
[:> composite-form* {:token token [:> composite-form* {:token token
:tokens tokens :tokens tokens
:remove-shadow-block remove-shadow-block :remove-shadow-block remove-shadow-block
:show-button show-button}] :composite-type composite-type}]
[:> reference-form* {:token token [:> reference-form* {:token token
:tokens tokens}]) :tokens tokens}])

4
frontend/src/app/main/ui/workspace/tokens/management/create/text_case.cljs
View File

@@ -23,7 +23,7 @@
[app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as fc] [app.main.ui.forms :as fc]
[app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token*]] [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -187,7 +187,7 @@
{:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])] {:level :warning :appearance :ghost} (tr "workspace.tokens.warning-name-change")]])]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token* [:> input-token*
{:placeholder (tr "workspace.tokens.text-case-value-enter") {:placeholder (tr "workspace.tokens.text-case-value-enter")
:label (tr "workspace.tokens.token-value") :label (tr "workspace.tokens.token-value")
:name :value :name :value

16
frontend/src/app/main/ui/workspace/tokens/management/create/typography.cljs
View File

@@ -26,7 +26,7 @@
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.forms :as forms] [app.main.ui.forms :as forms]
[app.main.ui.workspace.tokens.management.create.combobox-token-fonts :refer [font-picker-composite-combobox*]] [app.main.ui.workspace.tokens.management.create.combobox-token-fonts :refer [font-picker-composite-combobox*]]
[app.main.ui.workspace.tokens.management.create.form-input-token :refer [form-input-token-composite*]] [app.main.ui.workspace.tokens.management.create.input-token :refer [input-token-composite*]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.forms :as fm] [app.util.forms :as fm]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -97,7 +97,7 @@
:token font-family-sub-token :token font-family-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Font Size" {:aria-label "Font Size"
:icon i/text-font-size :icon i/text-font-size
:placeholder (tr "workspace.tokens.font-size-value-enter") :placeholder (tr "workspace.tokens.font-size-value-enter")
@@ -105,7 +105,7 @@
:token font-size-sub-token :token font-size-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Font Weight" {:aria-label "Font Weight"
:icon i/text-font-weight :icon i/text-font-weight
:placeholder (tr "workspace.tokens.font-weight-value-enter") :placeholder (tr "workspace.tokens.font-weight-value-enter")
@@ -113,7 +113,7 @@
:token font-weight-sub-token :token font-weight-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Line Height" {:aria-label "Line Height"
:icon i/text-lineheight :icon i/text-lineheight
:placeholder (tr "workspace.tokens.line-height-value-enter") :placeholder (tr "workspace.tokens.line-height-value-enter")
@@ -121,7 +121,7 @@
:token line-height-sub-token :token line-height-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Letter Spacing" {:aria-label "Letter Spacing"
:icon i/text-letterspacing :icon i/text-letterspacing
:placeholder (tr "workspace.tokens.letter-spacing-value-enter-composite") :placeholder (tr "workspace.tokens.letter-spacing-value-enter-composite")
@@ -129,7 +129,7 @@
:token letter-spacing-sub-token :token letter-spacing-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Text Case" {:aria-label "Text Case"
:icon i/text-mixed :icon i/text-mixed
:placeholder (tr "workspace.tokens.text-case-value-enter") :placeholder (tr "workspace.tokens.text-case-value-enter")
@@ -137,7 +137,7 @@
:token text-case-sub-token :token text-case-sub-token
:tokens tokens}]] :tokens tokens}]]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:aria-label "Text Decoration" {:aria-label "Text Decoration"
:icon i/text-underlined :icon i/text-underlined
:placeholder (tr "workspace.tokens.text-decoration-value-enter") :placeholder (tr "workspace.tokens.text-decoration-value-enter")
@@ -148,7 +148,7 @@
(mf/defc reference-form* (mf/defc reference-form*
[{:keys [token tokens] :as props}] [{:keys [token tokens] :as props}]
[:div {:class (stl/css :input-row)} [:div {:class (stl/css :input-row)}
[:> form-input-token-composite* [:> input-token-composite*
{:placeholder (tr "workspace.tokens.reference-composite") {:placeholder (tr "workspace.tokens.reference-composite")
:aria-label (tr "labels.reference") :aria-label (tr "labels.reference")
:icon i/text-typography :icon i/text-typography