FairyPiggyDev 76c1b9afab
♻️ Migrate navigation-bullets to modern component syntax (#9265)
Step toward issue #9260 (incremental migration of legacy UI
components to the modern `*`-suffixed syntax, removing the per-render
JS-to-Clojure props conversion overhead).

Component
---------

`app.main.ui.releases.common/navigation-bullets` is a small (7-line)
self-contained presentational component used by every release-notes
modal to render the slide-progress dots. It already used standard
keyword destructuring (`[{:keys [slide navigate total]}]`), had no
`?`-suffixed props, no `unchecked-get`, no `obj/merge!`, no
`::mf/wrap-props false`, and (importantly) no `::mf/register`, so it
satisfies the migration pre-flight checks unchanged.

Changes
-------

- `releases/common.cljs` — definition renamed to `navigation-bullets*`.
  Body, props and metadata are otherwise unchanged.

- `releases/v1_4.cljs` … `v2_15.cljs` (29 files) — every existing call
  site `[:& c/navigation-bullets {…}]` becomes
  `[:> c/navigation-bullets* {…}]`. The `:slide`, `:navigate`, `:total`
  props are passed exactly as before. The `:as c` alias of the require
  is unchanged, so no require edits are needed.

No props were renamed (none ended in `?`); no helpers had to be
swapped for `mf/spread-props` / `mf/props` (callers pass plain literal
maps); no metadata had to be removed (none of the legacy options were
in use).

Github #9260

Signed-off-by: FairyPigDev <luislee3108@gmail.com>
2026-04-30 15:50:38 +02:00

116 lines
4.5 KiB
Clojure
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

;; 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.releases.v2-3
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.ui.releases.common :as c]
[rumext.v2 :as mf]))
;; TODO: Review all copies and alt text
(defmethod c/render-release-notes "2.3"
[{:keys [slide klass next finish navigate version]}]
(mf/html
(case slide
:start
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.3-slide-0.png"
:class (stl/css :start-image)
:border "0"
:alt "A graphic illustration with Penpot style"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"Whats new in Penpot?"]
[:div {:class (stl/css :version-tag)}
(dm/str "Version " version)]]
[:div {:class (stl/css :features-block)}
[:span {:class (stl/css :feature-title)}
"Penpot can now be extended by using Plugins!"]
[:p {:class (stl/css :feature-content)}
"The introduction of our brand new Plugin system allows you to access even richer ecosystem of capabilities."]
[:p {:class (stl/css :feature-content)}
"We are beyond excited about how this will further involve the Penpot community in building the best design and prototyping platform."]
[:p {:class (stl/css :feature-content)}
"Lets dive in!"]]
[:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn)
:on-click next} "Continue"]]]]]]
0
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.3-img-slide-1.gif"
:class (stl/css :start-image)
:border "0"
:alt "Build Plugins to enhance your workflow"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"Build Plugins and enhance your workflow"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"Penpot Plugins encourage developers to easily customize and expand the platform using standard web technologies like JavaScript, CSS, and HTML."]
[:p {:class (stl/css :feature-content)}
"Find everything you need in our full comprehensive documentation to start building your plugins now!"]]
[:div {:class (stl/css :navigation)}
[:> c/navigation-bullets*
{:slide slide
:navigate navigate
:total 2}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
1
[:div {:class (stl/css-case :modal-overlay true)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
[:img {:src "images/features/2.3-img-slide-2.gif"
:class (stl/css :start-image)
:border "0"
:alt "Plugins are safe and extremely easy to use"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
"Plugins are safe and extremely easy to use"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
"Penpot plugins are quite easy to install."]
[:p {:class (stl/css :feature-content)}
"Be sure to keep an eye on our evolving " [:a {:href "https://penpot.app/penpothub" :target "_blank"} "Penpot Hub"] " to pick the ones that are best suited to enhance your workflow."]
[:p {:class (stl/css :feature-content)}
"This is just the beginning of a myriad of possibilities. Lets build this community together ❤️."]]
[:div {:class (stl/css :navigation)}
[:> c/navigation-bullets*
{:slide slide
:navigate navigate
:total 2}]
[:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]])))