mirror of
https://github.com/penpot/penpot.git
synced 2025-07-22 20:57:14 +02:00
✨ Assert valid svg id in raw-svg*
This commit is contained in:
parent
138ece085e
commit
10ef9d696c
4 changed files with 11 additions and 19 deletions
|
@ -27,7 +27,7 @@
|
||||||
:Text text*
|
:Text text*
|
||||||
;; meta / misc
|
;; meta / misc
|
||||||
:meta #js {:icons (clj->js (sort icon-list))
|
:meta #js {:icons (clj->js (sort icon-list))
|
||||||
:svgs raw-svg-list
|
:svgs (clj->js (sort 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*
|
||||||
:StoryGridCell sb/story-grid-cell*
|
:StoryGridCell sb/story-grid-cell*
|
||||||
|
|
|
@ -10,12 +10,9 @@
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[rumext.v2]))
|
[rumext.v2]))
|
||||||
|
|
||||||
(defmacro collect-raw-svgs
|
(defmacro collect-raw-svgs []
|
||||||
[]
|
|
||||||
(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 :svg-id)))
|
||||||
(filter (fn [entry] (-> entry :meta :svg-id)))
|
(map (fn [{:keys [name]}] (c/name name)))))))
|
||||||
(mapcat (fn [{:keys [name]}]
|
|
||||||
[(-> name c/name str/camel str/capital) name]))))))
|
|
|
@ -16,22 +16,21 @@
|
||||||
(def ^:svg-id brand-github "brand-github")
|
(def ^:svg-id brand-github "brand-github")
|
||||||
(def ^:svg-id brand-gitlab "brand-gitlab")
|
(def ^:svg-id brand-gitlab "brand-gitlab")
|
||||||
(def ^:svg-id brand-google "brand-google")
|
(def ^:svg-id brand-google "brand-google")
|
||||||
|
|
||||||
(def ^:svg-id loader "loader")
|
(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 logo-error-screen "logo-error-screen")
|
||||||
(def ^:svg-id login-illustration "login-illustration")
|
(def ^:svg-id login-illustration "login-illustration")
|
||||||
|
|
||||||
(def ^:svg-id marketing-arrows "marketing-arrows")
|
(def ^:svg-id marketing-arrows "marketing-arrows")
|
||||||
(def ^:svg-id marketing-exchange "marketing-exchange")
|
(def ^:svg-id marketing-exchange "marketing-exchange")
|
||||||
(def ^:svg-id marketing-file "marketing-file")
|
(def ^:svg-id marketing-file "marketing-file")
|
||||||
(def ^:svg-id marketing-layers "marketing-layers")
|
(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))
|
(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
|
||||||
|
|
||||||
(mf/defc raw-svg*
|
(mf/defc raw-svg*
|
||||||
{::mf/props :obj}
|
{::mf/props :obj}
|
||||||
[{:keys [id] :rest props}]
|
[{:keys [id] :rest props}]
|
||||||
|
(assert (contains? raw-svg-list id) "invalid raw svg id")
|
||||||
[:> "svg" props
|
[:> "svg" props
|
||||||
[:use {:href (dm/str "#asset-" id)}]])
|
[:use {:href (dm/str "#asset-" id)}]])
|
||||||
|
|
|
@ -5,16 +5,12 @@ const { RawSvg } = Components;
|
||||||
const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
|
const { StoryGrid, StoryGridCell, StoryHeader } = Components.storybook;
|
||||||
const { svgs } = Components.meta;
|
const { svgs } = Components.meta;
|
||||||
|
|
||||||
const assetList = Object.entries(svgs)
|
|
||||||
.map(([_, value]) => value)
|
|
||||||
.sort();
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Foundations/Assets/RawSvg",
|
title: "Foundations/Assets/RawSvg",
|
||||||
component: Components.RawSvg,
|
component: Components.RawSvg,
|
||||||
argTypes: {
|
argTypes: {
|
||||||
id: {
|
id: {
|
||||||
options: assetList,
|
options: svgs,
|
||||||
control: { type: "select" },
|
control: { type: "select" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -30,7 +26,7 @@ export const All = {
|
||||||
</StoryHeader>
|
</StoryHeader>
|
||||||
|
|
||||||
<StoryGrid size="200">
|
<StoryGrid size="200">
|
||||||
{assetList.map((x) => (
|
{svgs.map((x) => (
|
||||||
<StoryGridCell key={x} title={x}>
|
<StoryGridCell key={x} title={x}>
|
||||||
<RawSvg id={x} style={{ maxWidth: "100%" }} />
|
<RawSvg id={x} style={{ maxWidth: "100%" }} />
|
||||||
</StoryGridCell>
|
</StoryGridCell>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue