enhance portfolio and components

Author: sprocketc

package-lock.json

@@ -117,6 +117,7 @@
     "style-to-object": "1.0.8",
     "svg-path-bbox": "2.1.0",
     "svgpath": "2.6.0",
+    "tailwind-merge": "2.5.4",
     "tailwindcss": "3.4.14"
   },
   "dependencies": {

package.json

@@ -8,7 +8,10 @@
   [:div.toolbar.bg-primary
    [ui/icon-button "download" {:title "download"
                                :on-click #(js/alert "Downloaded")}]
+   [ui/icon-button "folder" {:title "open"
+                             :on-click #(js/alert "Opened")}]
    [ui/icon-button "save" {:title "save"
+                           :disabled true
                            :on-click #(js/alert "Saved")}]])
 
 (defscene radio-icon-buttons

portfolio/src/components/button_scenes.cljs

@@ -167,3 +167,8 @@
      ^{:key icon-name}
      [:div {:title icon-name}
       [ui/icon icon-name]])])
+
+(defscene colored
+  :title "Colored icon"
+  [:div.flex.p-3
+   [ui/icon "download" {:class "text-accent"}]])

portfolio/src/components/icon_scenes.cljs

@@ -0,0 +1,31 @@
+(ns components.slider-scenes
+  (:require
+   [portfolio.reagent-18 :refer-macros [defscene]]
+   [renderer.ui :as ui]))
+
+(defscene slider
+  :title "Deafult slider"
+  :param (atom [25])
+  [store]
+  [:div.toolbar.bg-primary.flex.gap-2
+   [:div.w-64
+    [ui/slider {:min 0
+                :max 50
+                :step 1
+                :default-value @store
+                :on-value-change (fn [v] (reset! store v))}]]
+   [:div (first @store)]])
+
+(defscene slider-disabled
+  :title "Disabled slider"
+  :param (atom [25])
+  [store]
+  [:div.toolbar.bg-primary.flex.gap-2
+   [:div.w-64
+    [ui/slider {:min 0
+                :max 50
+                :step 1
+                :disabled true
+                :default-value @store
+                :on-value-change (fn [v] (reset! store v))}]]
+   [:div (first @store)]])

portfolio/src/components/slider_scenes.cljs

@@ -4,8 +4,33 @@
    [renderer.ui :as ui]))
 
 (defscene switch
-  :title "Switch"
-  [:div.toolbar.bg-primary
-   [ui/switch {:id "default-switch"
-               :label "Switch label"
-               :default-checked? true}]])
+  :title "Default switch"
+  :param (atom true)
+  [store]
+  [:div.toolbar.bg-primary.flex.gap-2
+   [ui/switch "Switch label" {:id "default-switch"
+                              :default-checked @store
+                              :on-checked-change (fn [v] (reset! store v))}]
+   (str "Checked: " @store)])
+
+(defscene switch-disabled
+  :title "Disabled switch"
+  :param (atom true)
+  [store]
+  [:div.toolbar.bg-primary.flex.gap-2
+   [ui/switch "Switch label" {:id "disabled-switch"
+                              :disabled true
+                              :default-checked @store
+                              :on-checked-change (fn [v] (reset! store v))}]
+   (str "Checked: " @store)])
+
+(defscene switch-custom
+  :title "Custom color switch"
+  :param (atom true)
+  [store]
+  [:div.toolbar.bg-primary.flex.gap-2
+   [ui/switch "Switch label" {:id "disabled-switch"
+                              :class "data-[state=checked]:bg-white"
+                              :default-checked @store
+                              :on-checked-change (fn [v] (reset! store v))}]
+   (str "Checked: " @store)])

portfolio/src/components/switch_scenes.cljs

@@ -1,6 +1,7 @@
 (ns portfolio
   (:require [components.button-scenes]
             [components.icon-scenes]
+            [components.slider-scenes]
             [components.switch-scenes]
             [portfolio.ui :as ui]))
 

portfolio/src/portfolio.cljs

@@ -70,14 +70,14 @@
         guide-snap? @(rf/subscribe [::timeline.s/guide-snap?])]
     [:div.grow
      [ui/switch
+      "Grid snap"
       {:id "grid-snap"
-       :label "Grid snap"
-       :default-checked? grid-snap?
+       :default-checked grid-snap?
        :on-checked-change #(rf/dispatch [::timeline.e/set-grid-snap %])}]
      [ui/switch
+      "Guide snap"
       {:id "guide-snap"
-       :label "Guide snap"
-       :default-checked? guide-snap?
+       :default-checked guide-snap?
        :on-checked-change #(rf/dispatch [::timeline.e/set-guide-snap %])}]]))
 
 (defn toolbar

src/renderer/timeline/views.cljs

@@ -8,17 +8,23 @@
    ["@radix-ui/react-slider" :as Slider]
    ["@radix-ui/react-switch" :as Switch]
    ["react-svg" :refer [ReactSVG]]
+   ["tailwind-merge" :refer [twMerge]]
    [malli.experimental :as mx]
    [re-frame.core :as rf]
    [renderer.app.subs :as-alias app.s]
    [renderer.utils.hiccup :refer [Props]]
    [renderer.utils.keyboard :as keyb]))
 
+(mx/defn merge-with-class
+  [classes props :- Props]
+  (merge {:class (twMerge classes (:class props))}
+         (dissoc props :class)))
+
 (mx/defn icon
   [icon-name :- string?, props :- Props]
   [:> ReactSVG
-   (merge props {:class ["icon" (:class props)]
-                 :src (str "icons/" icon-name ".svg")})])
+   (merge (merge-with-class "icon" props)
+          {:src (str "icons/" icon-name ".svg")})])
 
 (mx/defn icon-button
   [icon-name :- string?, props :- Props]
@@ -32,22 +38,19 @@
    {:class "animate-spin"}])
 
 (defn switch
-  [{:keys [id label default-checked? on-checked-change]}]
+  [label props]
   [:span.inline-flex.items-center
-   [:label.h-auto.bg-transparent {:for id} label]
+   [:label.h-auto.bg-transparent {:for (when (:id props) (:id props))} label]
    [:> Switch/Root
-    {:class "overlay relative rounded-full w-10 h-6 data-[state=checked]:bg-accent"
-     :id id
-     :default-checked default-checked?
-     :on-checked-change on-checked-change}
+    (merge-with-class "overlay relative rounded-full w-10 h-6 data-[state=checked]:bg-accent data-[disabled]:opacity-50" props)
     [:> Switch/Thumb
      {:class "block bg-primary rounded-full shadow-sm w-5 h-5 will-change-transform
               transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]"}]]])
 
 (mx/defn slider
   [props :- Props]
   [:> Slider/Root
-   (merge {:class "relative flex items-center select-none w-full touch-none h-full"} props)
+   (merge-with-class "relative flex items-center select-none w-full touch-none h-full" props)
    [:> Slider/Track {:class "relative h-1 bg-secondary flex-1"}
     [:> Slider/Range {:class "absolute h-full overlay"}]]
    [:> Slider/Thumb {:class "slider-thumb"}]])
@@ -73,14 +76,14 @@
            (into [:span.inline-flex.text-muted {:class "gap-1.5"}])))))
 
 (mx/defn radio-icon-button
-  [icon-name :- string?, active :- boolean?, & {:keys [class] :as props} :- Props]
+  [icon-name :- string?, active :- boolean?, props :- Props]
   [:button.icon-button.radio-icon-button
-   (assoc props :class [class (when active "selected")])
+   (merge-with-class (when active "selected") props)
    [renderer.ui/icon icon-name]])
 
 (defn context-menu-item
-  [{:keys [label action checked? disabled?] :as attrs}]
-  (case (:type attrs)
+  [{:keys [label action checked? disabled?] :as props}]
+  (case (:type props)
     :separator
     [:> ContextMenu/Separator {:class "menu-separator"}]
 
@@ -106,8 +109,8 @@
       [shortcuts action]]]))
 
 (defn dropdown-menu-item
-  [{:keys [label action checked?] :as attrs}]
-  (case (:type attrs)
+  [{:keys [label action checked?] :as props}]
+  (case (:type props)
     :separator
     [:> DropdownMenu/Separator {:class "menu-separator"}]
 

src/renderer/ui.cljs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js,cljs}"],
+  content: ["./src/**/*.{html,js,cljs}", "./portfolio/src/**/*.{html,js,cljs}"
+  ],
   theme: {
     extend: {
       fontSize: {