From 138ece085e951d0bc2f12ba8b7d6437dc9f083b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 26 Jul 2024 11:19:48 +0200 Subject: [PATCH 1/3] :sparkles: Assert existing icon ID for icon* --- frontend/src/app/main/ui/ds.cljs | 2 +- .../src/app/main/ui/ds/foundations/assets/icon.clj | 13 +++++-------- .../src/app/main/ui/ds/foundations/assets/icon.cljs | 9 +++++---- .../main/ui/ds/foundations/assets/icon.stories.jsx | 8 ++------ 4 files changed, 13 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index 59895744ad..bbd3a2e234 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/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* diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.clj b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj index e51c10d357..cccdf243be 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.clj +++ b/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))))))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index d1578d4016..ee80566f62 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx index 7125a9b180..49219f46bc 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx +++ b/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 = {

Hover on an icon to see its ID.

- {iconList.map((iconId) => ( + {icons.map((iconId) => ( Date: Fri, 26 Jul 2024 11:39:34 +0200 Subject: [PATCH 2/3] :sparkles: Assert valid svg id in raw-svg* --- frontend/src/app/main/ui/ds.cljs | 2 +- .../app/main/ui/ds/foundations/assets/raw_svg.clj | 13 +++++-------- .../app/main/ui/ds/foundations/assets/raw_svg.cljs | 7 +++---- .../ui/ds/foundations/assets/raw_svg.stories.jsx | 8 ++------ 4 files changed, 11 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index bbd3a2e234..9ac05d4f88 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/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* diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj index 814702ef41..e238d6d6b7 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj +++ b/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))))))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs index afc691f1fd..2011cf4fa7 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs +++ b/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)}]]) diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx index a3c4080861..ab1d7741aa 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx +++ b/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 = { - {assetList.map((x) => ( + {svgs.map((x) => ( From cfc01e03f691c681c89c290cf8c6e1ed2ec0b6c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 26 Jul 2024 11:55:43 +0200 Subject: [PATCH 3/3] :sparkles: Assert existing icon ID for button* and icon-button* --- frontend/src/app/main/ui/ds/buttons/button.cljs | 3 ++- frontend/src/app/main/ui/ds/buttons/button.stories.jsx | 8 +------- frontend/src/app/main/ui/ds/buttons/icon_button.cljs | 6 +++--- frontend/src/app/main/ui/ds/foundations/assets/icon.clj | 7 +++---- .../src/app/main/ui/ds/foundations/assets/raw_svg.clj | 7 +++---- 5 files changed, 12 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/main/ui/ds/buttons/button.cljs b/frontend/src/app/main/ui/ds/buttons/button.cljs index 8086758bbd..9dfb2c9b42 100644 --- a/frontend/src/app/main/ui/ds/buttons/button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/button.cljs @@ -9,7 +9,7 @@ [app.common.data.macros :as dm] [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]] [rumext.v2 :as mf])) (def button-variants (set '("primary" "secondary" "ghost" "destructive"))) @@ -18,6 +18,7 @@ {::mf/props :obj} [{:keys [variant icon children class] :rest props}] (assert (or (nil? variant) (contains? button-variants variant) "expected valid variant")) + (assert (or (nil? icon) (contains? icon-list icon) "expected valid icon id")) (let [variant (or variant "primary") class (dm/str class " " (stl/css-case :button true :button-primary (= variant "primary") diff --git a/frontend/src/app/main/ui/ds/buttons/button.stories.jsx b/frontend/src/app/main/ui/ds/buttons/button.stories.jsx index 8a2c78a159..d41e12c2de 100644 --- a/frontend/src/app/main/ui/ds/buttons/button.stories.jsx +++ b/frontend/src/app/main/ui/ds/buttons/button.stories.jsx @@ -10,18 +10,12 @@ import Components from "@target/components"; const { Button } = Components; const { icons } = Components.meta; -const iconList = [ - ...Object.entries(icons) - .map(([_, value]) => value) - .sort(), -]; - export default { title: "Buttons/Button", component: Components.Button, argTypes: { icon: { - options: iconList, + options: icons, control: { type: "select" }, }, disabled: { control: "boolean" }, diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs index addfc63725..1a80f9b190 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs @@ -9,7 +9,7 @@ [app.common.data.macros :as dm] [app.main.style :as stl]) (:require - [app.main.ui.ds.foundations.assets.icon :refer [icon*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]] [rumext.v2 :as mf])) (def button-variants (set '("primary" "secondary" "ghost" "destructive"))) @@ -17,9 +17,9 @@ (mf/defc icon-button* {::mf/props :obj} [{:keys [class icon variant aria-label] :rest props}] - (assert (or (not variant) (contains? button-variants variant)) "invalid variant") + (assert (contains? icon-list icon) "expected valid icon id") + (assert (or (not variant) (contains? button-variants variant)) "expected valid variant") (assert (some? aria-label) "aria-label must be provided") - (assert (some? icon) "an icon id must be provided") (let [variant (or variant "primary") class (dm/str class " " (stl/css-case :icon-button true :icon-button-primary (= variant "primary") diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.clj b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj index cccdf243be..54f8dec2a2 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.clj +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj @@ -7,12 +7,11 @@ (ns app.main.ui.ds.foundations.assets.icon (:require [clojure.core :as c] - [cuerdas.core :as str] [rumext.v2])) (defmacro collect-icons [] (let [ns-info (:ns &env)] `(set '~(->> (:defs ns-info) - (map val) - (filter (fn [entry] (-> entry :meta :icon-id))) - (map (fn [{:keys [name]}] (c/name name))))))) \ No newline at end of file + (map val) + (filter (fn [entry] (-> entry :meta :icon-id))) + (map (fn [{:keys [name]}] (c/name name))))))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj index e238d6d6b7..51149285bd 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj +++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj @@ -7,12 +7,11 @@ (ns app.main.ui.ds.foundations.assets.raw-svg (:require [clojure.core :as c] - [cuerdas.core :as str] [rumext.v2])) (defmacro collect-raw-svgs [] (let [ns-info (:ns &env)] `(set '~(->> (:defs ns-info) - (map val) - (filter (fn [entry] (-> entry :meta :svg-id))) - (map (fn [{:keys [name]}] (c/name name))))))) \ No newline at end of file + (map val) + (filter (fn [entry] (-> entry :meta :svg-id))) + (map (fn [{:keys [name]}] (c/name name))))))) \ No newline at end of file