Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

✨ Assert existing icon ID for icon*

Browse source
This commit is contained in:
Belén Albeza 2024-07-26 11:19:48 +02:00
parent 19b2f330dd
commit 138ece085e
4 changed files with 13 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/ds.cljs
View file

@ -26,7 +26,7 @@
:RawSvg raw-svg* :RawSvg raw-svg*
:Text text* :Text text*
;; meta / misc ;; meta / misc
:meta #js {:icons icon-list :meta #js {:icons (clj->js (sort icon-list))
:svgs raw-svg-list :svgs raw-svg-list
:typography (clj->js typography-list)} :typography (clj->js typography-list)}
:storybook #js {:StoryGrid sb/story-grid* :storybook #js {:StoryGrid sb/story-grid*

13
frontend/src/app/main/ui/ds/foundations/assets/icon.clj
View file

@ -10,12 +10,9 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2])) [rumext.v2]))
(defmacro collect-icons (defmacro collect-icons []
[]
(let [ns-info (:ns &env)] (let [ns-info (:ns &env)]
`(cljs.core/js-obj `(set '~(->> (:defs ns-info)
~@(->> (:defs ns-info) (map val)
(map val) (filter (fn [entry] (-> entry :meta :icon-id)))
(filter (fn [entry] (-> entry :meta :icon-id))) (map (fn [{:keys [name]}] (c/name name)))))))
(mapcat (fn [{:keys [name]}]
[(-> name c/name str/camel str/capital) name]))))))

9
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.assets.icon (ns app.main.ui.ds.foundations.assets.icon
(:refer-clojure :exclude [mask]) (:refer-clojure :exclude [mask drop filter remove])
(:require-macros (:require-macros
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.style :as stl] [app.main.style :as stl]
@ -116,7 +116,7 @@
(def ^:icon-id distribute-vertical-spacing "distribute-vertical-spacing") (def ^:icon-id distribute-vertical-spacing "distribute-vertical-spacing")
(def ^:icon-id document "document") (def ^:icon-id document "document")
(def ^:icon-id download "download") (def ^:icon-id download "download")
(def ^:icon-id drop-icon "drop") (def ^:icon-id drop "drop")
(def ^:icon-id easing-ease-in-out "easing-ease-in-out") (def ^:icon-id easing-ease-in-out "easing-ease-in-out")
(def ^:icon-id easing-ease-in "easing-ease-in") (def ^:icon-id easing-ease-in "easing-ease-in")
(def ^:icon-id easing-ease-out "easing-ease-out") (def ^:icon-id easing-ease-out "easing-ease-out")
@ -128,7 +128,7 @@
(def ^:icon-id expand "expand") (def ^:icon-id expand "expand")
(def ^:icon-id feedback "feedback") (def ^:icon-id feedback "feedback")
(def ^:icon-id fill-content "fill-content") (def ^:icon-id fill-content "fill-content")
(def ^:icon-id filter-icon "filter") (def ^:icon-id filter "filter")
(def ^:icon-id fixed-width "fixed-width") (def ^:icon-id fixed-width "fixed-width")
(def ^:icon-id flex-grid "flex-grid") (def ^:icon-id flex-grid "flex-grid")
(def ^:icon-id flex-horizontal "flex-horizontal") (def ^:icon-id flex-horizontal "flex-horizontal")
@ -209,7 +209,7 @@
(def ^:icon-id puzzle "puzzle") (def ^:icon-id puzzle "puzzle")
(def ^:icon-id rectangle "rectangle") (def ^:icon-id rectangle "rectangle")
(def ^:icon-id reload "reload") (def ^:icon-id reload "reload")
(def ^:icon-id remove-icon "remove") (def ^:icon-id remove "remove")
(def ^:icon-id rgba "rgba") (def ^:icon-id rgba "rgba")
(def ^:icon-id rgba-complementary "rgba-complementary") (def ^:icon-id rgba-complementary "rgba-complementary")
(def ^:icon-id rotation "rotation") (def ^:icon-id rotation "rotation")
@ -280,6 +280,7 @@
(mf/defc icon* (mf/defc icon*
{::mf/props :obj} {::mf/props :obj}
[{:keys [id size class] :rest props}] [{:keys [id size class] :rest props}]
(assert (contains? icon-list id) "invalid icon id")
(let [class (dm/str (or class "") " " (stl/css :icon)) (let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m}) props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
size-px (cond (= size "s") icon-size-s :else icon-size-m) size-px (cond (= size "s") icon-size-s :else icon-size-m)

8
frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
View file

@ -5,16 +5,12 @@ const { Icon } = Components;
const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook; const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
const { icons } = Components.meta; const { icons } = Components.meta;
const iconList = Object.entries(icons)
.map(([_, value]) => value)
.sort();
export default { export default {
title: "Foundations/Assets/Icon", title: "Foundations/Assets/Icon",
component: Components.Icon, component: Components.Icon,
argTypes: { argTypes: {
id: { id: {
options: iconList, options: icons,
control: { type: "select" }, control: { type: "select" },
}, },
size: { size: {
@ -33,7 +29,7 @@ export const All = {
<p>Hover on an icon to see its ID.</p> <p>Hover on an icon to see its ID.</p>
</StoryHeader> </StoryHeader>
<StoryGrid> <StoryGrid>
{iconList.map((iconId) => ( {icons.map((iconId) => (
<StoryGridCell <StoryGridCell
title={iconId} title={iconId}
key={iconId} key={iconId}