Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-14 02:58:39 -05:00
Code Issues Activity

🎉 Add inline SVG and npm cli tools

Browse source
This commit is contained in:
alonso.torres 2023-11-27 12:27:01 +01:00 • committed by Alonso Torres
parent ebd6cdfe29
commit 87d176fa2f
7 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

10
frontend/gulpfile.js
View file

@ -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( gulp.task(
"template:render", "template:render",
templatePipeline({ templatePipeline({
@ -305,6 +314,7 @@ gulp.task(
"svg:sprite:icons", "svg:sprite:icons",
"svg:sprite:cursors", "svg:sprite:cursors",
"template:main", "template:main",
"template:storybook",
"template:render", "template:render",
"template:rasterizer", "template:rasterizer",
), ),

6
frontend/package.json
View file

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

2
frontend/resources/templates/preview-body.mustache Normal file
View file

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

3
frontend/src/app/main/ui/components/buttons/simple_button.cljs
View file

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

13
frontend/src/app/main/ui/components/design_system.cljs
View file

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

2
frontend/src/app/main/ui/icons.clj
View file

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