🔧 Add tokens-lib custom type

This commit is contained in:
Andrés Moya 2024-08-16 12:11:18 +02:00
parent 27409f43d2
commit d147d844fb
20 changed files with 863 additions and 173 deletions

View file

@ -81,6 +81,11 @@
(let [workspace-data (deref refs/workspace-data)]
(get (:tokens workspace-data) id)))
(defn get-token-set-data-from-token-set-id
[id]
(let [workspace-data (deref refs/workspace-data)]
(get (:token-sets-index workspace-data) id)))
(defn set-selected-token-set-id
[id]
(ptk/reify ::set-selected-token-set-id
@ -88,6 +93,10 @@
(update [_ state]
(wtts/assoc-selected-token-set-id state id))))
(defn get-token-set-tokens
[token-set file]
(map #(get-in file [:tokens %]) (:tokens token-set)))
(defn create-token-theme [token-theme]
(let [new-token-theme (merge
{:id (uuid/next)
@ -120,7 +129,7 @@
(not theme-id) (-> changes
(pcb/add-temporary-token-theme
{:id (uuid/next)
:name ""
:name "Test theme"
:sets #{id}}))
new-set? (-> changes
(pcb/update-token-theme
@ -196,14 +205,14 @@
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
(defn delete-token-set [token-set-id]
(defn delete-token-set [token-set-id token-set-name]
(ptk/reify ::delete-token-set
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/delete-token-set token-set-id))]
(pcb/delete-token-set token-set-id token-set-name))]
(rx/of
(dch/commit-changes changes)
(wtu/update-workspace-tokens))))))
@ -214,46 +223,43 @@
(ptk/reify ::update-create-token
ptk/WatchEvent
(watch [it state _]
(let [prev-token (get-token-data-from-token-id (:id token))
(let [token-set (wtts/get-selected-token-set state)
create-set? (not token-set)
token-set (or token-set
{:id (uuid/next)
:name "Global"
:tokens []})
changes (cond-> (pcb/empty-changes it)
create-set?
(pcb/add-token-set token-set))
prev-token (d/seek #(= (:id %) (:id token)) (:tokens token-set)) ; TODO
create-token? (not prev-token)
token-changes (if create-token?
(-> (pcb/empty-changes it)
(pcb/add-token token))
(-> (pcb/empty-changes it)
(pcb/update-token token prev-token)))
token-set (wtts/get-selected-token-set state)
create-set? (not token-set)
new-token-set {:id (uuid/next)
:name "Global"
:tokens [(:id token)]}
selected-token-set-id (if create-set?
(:id new-token-set)
(:id token-set))
set-changes (cond
create-set? (-> token-changes
(pcb/add-token-set new-token-set))
:else (let [updated-token-set (if (contains? token-set (:id token))
token-set
(update token-set :tokens conj (:id token)))]
(-> token-changes
(pcb/update-token-set updated-token-set token-set))))
theme-changes (-> set-changes
changes (if create-token?
(pcb/add-token changes (:id token-set) (:name token-set) token)
(pcb/update-token changes (:id token-set) (:name token-set) token prev-token))
changes (-> changes
(ensure-token-theme-changes state {:new-set? create-set?
:id selected-token-set-id}))]
:id (:id token-set)}))]
(rx/of
(set-selected-token-set-id selected-token-set-id)
(dch/commit-changes theme-changes)))))))
(set-selected-token-set-id (:id token-set))
(dch/commit-changes changes)))))))
(defn delete-token
[id]
[set-name id name]
(dm/assert! (string? set-name))
(dm/assert! (uuid? id))
(dm/assert! (string? name))
(ptk/reify ::delete-token
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
changes (-> (pcb/empty-changes it)
(pcb/with-library-data data)
(pcb/delete-token id))]
(pcb/delete-token set-name id name))]
(rx/of (dch/commit-changes changes))))))
(defn duplicate-token

View file

@ -201,10 +201,11 @@
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/update-shape-position))
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))}))
(defn default-actions [{:keys [token]}]
(let [{:keys [modal]} (wtty/get-token-properties token)]
(defn default-actions [{:keys [token selected-token-set-id]}]
(let [{:keys [modal]} (wtty/get-token-properties token)
selected-token-set (dt/get-token-set-data-from-token-set-id selected-token-set-id)]
[{:title "Delete Token"
:action #(st/emit! (dt/delete-token (:id token)))}
:action #(st/emit! (dt/delete-token (:name selected-token-set) (:id token) (:name token)))}
{:title "Duplicate Token"
:action #(st/emit! (dt/duplicate-token (:id token)))}
{:title "Edit Token"
@ -311,7 +312,8 @@
selected (mf/deref refs/selected-shapes)
selected-shapes (into [] (keep (d/getf objects)) selected)
token-id (:token-id mdata)
token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)]
token (get (mf/deref refs/workspace-selected-token-set-tokens) token-id)
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)]
(mf/use-effect
(mf/deps mdata)
(fn []
@ -327,4 +329,5 @@
[:ul {:class (stl/css :context-list)}
[:& menu-tree {:submenu-offset @width
:token token
:selected-token-set-id selected-token-set-id
:selected-shapes selected-shapes}]])]]))

View file

@ -26,9 +26,9 @@
(defn on-select-token-set-click [id]
(st/emit! (wdt/set-selected-token-set-id id)))
(defn on-delete-token-set-click [id event]
(defn on-delete-token-set-click [id name event]
(dom/stop-propagation event)
(st/emit! (wdt/delete-token-set id)))
(st/emit! (wdt/delete-token-set id name)))
(defn on-update-token-set [token-set]
(st/emit! (wdt/update-token-set token-set)))
@ -104,7 +104,7 @@
[:*
[:div {:class (stl/css :set-name)} name]
[:div {:class (stl/css :delete-set)}
[:button {:on-click #(on-delete-token-set-click id %)
[:button {:on-click #(on-delete-token-set-click id name %)
:type "button"}
i/delete]]
(if set?

View file

@ -13,106 +13,65 @@
(def token-types
(ordered-map
[:border-radius
{:title "Border Radius"
:attributes ctt/border-radius-keys
:on-update-shape wtch/update-shape-radius-all
:modal {:key :tokens/border-radius
:fields [{:label "Border Radius"
:key :border-radius}]}}]
[:stroke-width
{:title "Stroke Width"
:attributes ctt/stroke-width-keys
:on-update-shape wtch/update-stroke-width
:modal {:key :tokens/stroke-width
:fields [{:label "Stroke Width"
:key :stroke-width}]}}]
:border-radius
{:title "Border Radius"
:attributes ctt/border-radius-keys
:on-update-shape wtch/update-shape-radius-all
:modal {:key :tokens/border-radius
:fields [{:label "Border Radius"
:key :border-radius}]}}
:stroke-width
{:title "Stroke Width"
:attributes ctt/stroke-width-keys
:on-update-shape wtch/update-stroke-width
:modal {:key :tokens/stroke-width
:fields [{:label "Stroke Width"
:key :stroke-width}]}}
[:sizing
{:title "Sizing"
:attributes #{:width :height}
:all-attributes ctt/sizing-keys
:on-update-shape wtch/update-shape-dimensions
:modal {:key :tokens/sizing
:fields [{:label "Sizing"
:key :sizing}]}}]
[:dimensions
{:title "Dimensions"
:attributes #{:width :height}
:all-attributes (set/union
ctt/spacing-keys
ctt/sizing-keys
ctt/border-radius-keys
ctt/stroke-width-keys)
:on-update-shape wtch/update-shape-dimensions
:modal {:key :tokens/dimensions
:fields [{:label "Dimensions"
:key :dimensions}]}}]
:sizing
{:title "Sizing"
:attributes #{:width :height}
:all-attributes ctt/sizing-keys
:on-update-shape wtch/update-shape-dimensions
:modal {:key :tokens/sizing
:fields [{:label "Sizing"
:key :sizing}]}}
:dimensions
{:title "Dimensions"
:attributes #{:width :height}
:all-attributes (set/union
ctt/spacing-keys
ctt/sizing-keys
ctt/border-radius-keys
ctt/stroke-width-keys)
:on-update-shape wtch/update-shape-dimensions
:modal {:key :tokens/dimensions
:fields [{:label "Dimensions"
:key :dimensions}]}}
[:opacity
{:title "Opacity"
:attributes ctt/opacity-keys
:on-update-shape wtch/update-opacity
:modal {:key :tokens/opacity
:fields [{:label "Opacity"
:key :opacity}]}}]
:opacity
{:title "Opacity"
:attributes ctt/opacity-keys
:on-update-shape wtch/update-opacity
:modal {:key :tokens/opacity
:fields [{:label "Opacity"
:key :opacity}]}}
[:rotation
{:title "Rotation"
:attributes ctt/rotation-keys
:on-update-shape wtch/update-rotation
:modal {:key :tokens/rotation
:fields [{:label "Rotation"
:key :rotation}]}}]
[:spacing
{:title "Spacing"
:attributes #{:column-gap :row-gap}
:all-attributes ctt/spacing-keys
:on-update-shape wtch/update-layout-spacing
:modal {:key :tokens/spacing
:fields [{:label "Spacing"
:key :spacing}]}}]
(comment
[:boolean
{:title "Boolean"
:modal {:key :tokens/boolean
:fields [{:label "Boolean"}]}}]
[:box-shadow
{:title "Box Shadow"
:modal {:key :tokens/box-shadow
:fields [{:label "Box shadows"
:key :box-shadow
:type :box-shadow}]}}]
[:numeric
{:title "Numeric"
:modal {:key :tokens/numeric
:fields [{:label "Numeric"
:key :numeric}]}}]
[:other
{:title "Other"
:modal {:key :tokens/other
:fields [{:label "Other"
:key :other}]}}]
[:string
{:title "String"
:modal {:key :tokens/string
:fields [{:label "String"
:key :string}]}}]
[:typography
{:title "Typography"
:modal {:key :tokens/typography
:fields [{:label "Font" :key :font-family}
{:label "Weight" :key :weight}
{:label "Font Size" :key :font-size}
{:label "Line Height" :key :line-height}
{:label "Letter Spacing" :key :letter-spacing}
{:label "Paragraph Spacing" :key :paragraph-spacing}
{:label "Paragraph Indent" :key :paragraph-indent}
{:label "Text Decoration" :key :text-decoration}
{:label "Text Case" :key :text-case}]}}])))
:rotation
{:title "Rotation"
:attributes ctt/rotation-keys
:on-update-shape wtch/update-rotation
:modal {:key :tokens/rotation
:fields [{:label "Rotation"
:key :rotation}]}}
:spacing
{:title "Spacing"
:attributes #{:column-gap :row-gap}
:all-attributes ctt/spacing-keys
:on-update-shape wtch/update-layout-spacing
:modal {:key :tokens/spacing
:fields [{:label "Spacing"
:key :spacing}]}}))
(defn get-token-properties [token]
(get token-types (:type token)))