✨ Assert existing icon ID for icon*

frontend/src/app/main/ui/ds.cljs

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

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

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

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

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

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

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