diff --git a/.gitignore b/.gitignore index 2f64a77ec..b70c136c0 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,4 @@ /web clj-profiler/ node_modules +frontend/.storybook/preview-body.html diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 3e32c46ea..b94f72ee8 100644 --- a/frontend/gulpfile.js +++ b/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", ), diff --git a/frontend/package.json b/frontend/package.json index 0a1969235..62402f801 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/resources/templates/preview-body.mustache b/frontend/resources/templates/preview-body.mustache new file mode 100644 index 000000000..fc2683716 --- /dev/null +++ b/frontend/resources/templates/preview-body.mustache @@ -0,0 +1,2 @@ +{{>../public/images/sprites/symbol/icons.svg}} + diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.cljs b/frontend/src/app/main/ui/components/buttons/simple_button.cljs index 11d46d7f7..112971c6c 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.cljs +++ b/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]) diff --git a/frontend/src/app/main/ui/components/design_system.cljs b/frontend/src/app/main/ui/components/design_system.cljs index e0d7dd5b0..2fb9fab5c 100644 --- a/frontend/src/app/main/ui/components/design_system.cljs +++ b/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}) diff --git a/frontend/src/app/main/ui/icons.clj b/frontend/src/app/main/ui/icons.clj index 6fe462657..668ac50b7 100644 --- a/frontend/src/app/main/ui/icons.clj +++ b/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}