✨ Add RawSvg component to the design system

frontend/.storybook/preview.js

@@ -19,6 +19,10 @@ const preview = {
           name: "light",
           value: "#fff",
         },
+        {
+          name: "debug",
+          value: "#ccc",
+        },
       ],
     },
   },

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

@@ -7,11 +7,13 @@
 (ns app.main.ui.ds
   (:require
    [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
+   [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default
   "A export used for storybook"
   #js {:Icon icon*
+       :RawSvg raw-svg*
        ;; meta / misc
-       :meta #js {:icons icon-list}
+       :meta #js {:icons icon-list :svgs raw-svg-list}
        :storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}})

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

@@ -0,0 +1,21 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.foundations.raw-svg
+  (:require
+   [clojure.core :as c]
+   [cuerdas.core :as str]
+   [rumext.v2]))
+
+(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]))))))

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

@@ -0,0 +1,37 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.foundations.raw-svg
+  (:refer-clojure :exclude [mask])
+  (:require-macros
+   [app.common.data.macros :as dm]
+   [app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
+  (:require
+   [rumext.v2 :as mf]))
+
+(def ^:svg-id brand-openid "brand-openid")
+(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 v2-icon-1 "v2-icon-1")
+(def ^:svg-id v2-icon-2 "v2-icon-2")
+(def ^:svg-id v2-icon-3 "v2-icon-3")
+(def ^:svg-id v2-icon-4 "v2-icon-4")
+
+(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
+
+(mf/defc raw-svg*
+  {::mf/props :obj}
+  [{:keys [asset] :rest props}]
+  [:> "svg" props
+   [:use {:href (dm/str "#asset-" asset)}]])

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { RawSvg } = Components;
+const { StoryWrapper, IconGrid } = Components.storybook;
+const { svgs } = Components.meta;
+
+export default {
+  title: "Foundations/RawSvg",
+  component: Components.RawSvg,
+};
+
+const assetList = Object.entries(svgs)
+  .map(([_, value]) => value)
+  .sort();
+
+export const AllAssets = {
+  render: () => (
+    <StoryWrapper theme="default">
+      <h1>All assets</h1>
+      <p>Hover on a asset to see its id.</p>
+
+      <IconGrid size="200">
+        {assetList.map(x => (
+          <div key={x} title={x}>
+            <RawSvg asset={x} style={{maxWidth: "100%"}} />
+          </div>
+        ))}
+      </IconGrid>
+    </StoryWrapper>
+  ),
+  parameters: {
+    backgrounds: { default: "debug" }
+  }
+}
+
+export const Default = {
+  render: () => (
+    <StoryWrapper theme="default">
+      <RawSvg asset="brand-gitlab" width="200" />
+    </StoryWrapper>
+  ),
+}

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

@@ -6,7 +6,9 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.ds.storybook
-  (:require-macros [app.main.style :as stl])
+  (:require-macros
+   [app.common.data.macros :as dm]
+   [app.main.style :as stl])
   (:require
    [rumext.v2 :as mf]))
 
@@ -22,5 +24,6 @@
 
 (mf/defc icon-grid*
   {::mf/props :obj}
-  [{:keys [children]}]
+  [{:keys [children size]}]
-  [:article {:class (stl/css :icon-grid)} children])
+  [:article {:class (stl/css :icon-grid)
+             :style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children])

frontend/src/app/main/ui/ds/storybook.scss

@@ -7,7 +7,11 @@
 
 .icon-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, 16px);
+  grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px));
   gap: 1rem;
   color: var(--color-foreground-primary);
+
+  & > * {
+    max-width: 100%;
+  }
 }