🎉 Add inline SVG and npm cli tools

.gitignore

@@ -59,3 +59,4 @@
 /web
 clj-profiler/
 node_modules
+frontend/.storybook/preview-body.html

frontend/gulpfile.js

@@ -281,6 +281,15 @@ gulp.task(
   }),
 );
 
+gulp.task(
+  "template:storybook",
+  templatePipeline({
+    name: "preview-body.html",
+    input: paths.resources + "templates/preview-body.mustache",
+    output: "./.storybook/",
+  }),
+);
+
 gulp.task(
   "template:render",
   templatePipeline({
@@ -305,6 +314,7 @@ gulp.task(
     "svg:sprite:icons",
     "svg:sprite:cursors",
     "template:main",
+    "template:storybook",
     "template:render",
     "template:rasterizer",
   ),

frontend/package.json

@@ -28,8 +28,9 @@
     "build:styles": "gulp build:styles",
     "build:assets": "gulp build:assets",
     "build:copy": "gulp build:copy",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook:compile": "gulp template:storybook && clojure -M:dev:shadow-cljs compile storybook",
+    "storybook:watch": "npm run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"storybook dev -p 6006\"",
+    "storybook:build": "npm run storybook:compile && storybook build"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.3",
@@ -41,6 +42,7 @@
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "autoprefixer": "^10.4.15",
+    "concurrently": "^8.2.2",
     "cypress": "^10.3.0",
     "cypress-file-upload": "^5.0.8",
     "gettext-parser": "^7.0.1",

frontend/resources/templates/preview-body.mustache

@@ -0,0 +1,2 @@
+{{>../public/images/sprites/symbol/icons.svg}}
+

frontend/src/app/main/ui/components/buttons/simple_button.cljs

@@ -1,11 +1,10 @@
 (ns app.main.ui.components.buttons.simple-button
   (:require-macros [app.main.style :as stl])
   (:require
-    [app.common.data.macros :as dm]
     [rumext.v2 :as mf]))
 
 (mf/defc simple-button
   {::mf/wrap-props false}
   [{:keys [on-click children]}]
-    [:button {:on-click on-click :class (dm/str (stl/css :button))} children])
+    [:button {:on-click on-click :class (stl/css :button)} children])
 

frontend/src/app/main/ui/components/design_system.cljs

@@ -7,11 +7,10 @@
 (mf/defc story-wrapper
   {::mf/wrap-props false}
   [{:keys [children]}]
-    [:.default children])
+  [:.default children])
 
-(def ^export default #js {
-  :icons #js {
-    :IconAddRefactor icons/add-refactor
-  }
-  :StoryWrapper story-wrapper
-  :SimpleButton sb/simple-button})
+(def ^export default #js
+  {:icons #js
+   {:IconAddRefactor icons/add-refactor}
+   :StoryWrapper story-wrapper
+   :SimpleButton sb/simple-button})

frontend/src/app/main/ui/icons.clj

@@ -9,7 +9,7 @@
 
 (defmacro icon-xref
   [id]
-  (let [href (str "/images/sprites/symbol/icons.svg#icon-" (name id))
+  (let [href (str "#icon-" (name id))
         class (str "icon-" (name id))]
     `(rumext.v2/html
       [:svg {:width 500 :height 500 :class ~class}