✨ Assert valid svg id in raw-svg*

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

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

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

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

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

@@ -16,22 +16,21 @@
 (def ^:svg-id brand-github "brand-github")
 (def ^:svg-id brand-gitlab "brand-gitlab")
 (def ^:svg-id brand-google "brand-google")
-
 (def ^:svg-id loader "loader")
-(def ^:svg-id logo "penpot-logo")
-(def ^:svg-id logo-icon "penpot-logo-icon")
 (def ^:svg-id logo-error-screen "logo-error-screen")
 (def ^:svg-id login-illustration "login-illustration")
-
 (def ^:svg-id marketing-arrows "marketing-arrows")
 (def ^:svg-id marketing-exchange "marketing-exchange")
 (def ^:svg-id marketing-file "marketing-file")
 (def ^:svg-id marketing-layers "marketing-layers")
+(def ^:svg-id penpot-logo "penpot-logo")
+(def ^:svg-id penpot-logo-icon "penpot-logo-icon")
 
 (def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
 
 (mf/defc raw-svg*
   {::mf/props :obj}
   [{:keys [id] :rest props}]
+  (assert (contains? raw-svg-list id) "invalid raw svg id")
   [:> "svg" props
    [:use {:href (dm/str "#asset-" id)}]])

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

@@ -5,16 +5,12 @@ const { RawSvg } = Components;
 const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
 const { svgs } = Components.meta;
 
-const assetList = Object.entries(svgs)
-  .map(([_, value]) => value)
-  .sort();
-
 export default {
   title: "Foundations/Assets/RawSvg",
   component: Components.RawSvg,
   argTypes: {
     id: {
-      options: assetList,
+      options: svgs,
       control: { type: "select" },
     },
   },
@@ -30,7 +26,7 @@ export const All = {
       </StoryHeader>
 
       <StoryGrid size="200">
-        {assetList.map((x) => (
+        {svgs.map((x) => (
           <StoryGridCell key={x} title={x}>
             <RawSvg id={x} style={{ maxWidth: "100%" }} />
           </StoryGridCell>