floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dogfood sidebar as app shell with multi-page nav and target switcher

Browse Source 
Restructures all three dev targets (hiccup, replicant, squint) to use
the sidebar component as the actual app shell. The sidebar navigates
between three pages:

- Components — all UI component demos
- Icons — categorized gallery with all 50+ icons and size variants
- Sidebar — embedded sidebar example with dashboard layout

The sidebar includes a Targets section that links between all three dev
servers, with ports derived dynamically from the current port so they
stay correct when using a custom base port (bb dev-all 5000).

Port scheme: replicant=base+1, squint=base+2, hiccup=base+3.
This commit is contained in:
Florian Schroedl
2026-03-05 13:14:07 +01:00
parent c857954845
commit cd49da661d
5 changed files with 574 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev/squint/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/theme.css" />
<style>
body { padding: 2rem; }
html, body { margin: 0; padding: 0; }
</style>
</head>
<body>

276
dev/squint/src/dev/squint.cljs
View File

@@ -18,6 +18,12 @@
[ui.sidebar :as sidebar]
[ui.icon :as icon]))
;; ── State ───────────────────────────────────────────────────────────
(def !page (atom "components"))
;; ── Helpers ─────────────────────────────────────────────────────────
(defn toggle-theme! [_e]
(let [el (.-documentElement js/document)
current (.. el -dataset -theme)]
@@ -30,7 +36,14 @@
"border-bottom" "var(--border-0)" "padding-bottom" "0.5rem"}} title]
(into [:div {:style {"display" "flex" "flex-direction" "column" "gap" "1rem"}}] children)])
;; ── Button ──────────────────────────────────────────────────────────
(defn page-header [title subtitle]
[:div {:style {"margin-bottom" "2rem"}}
[:h2 {:style {"margin" "0 0 0.25rem" "color" "var(--fg-0)"}} title]
(when subtitle
[:p {:style {"margin" "0" "color" "var(--fg-2)" "font-size" "var(--font-sm)"}} subtitle])])
;; ── Component Demos ─────────────────────────────────────────────────
(def button-variants ["primary" "secondary" "ghost" "danger"])
(def button-sizes ["sm" "md" "lg"])
@@ -54,7 +67,6 @@
(button/button {:variant "link"} "Link button")
(button/button {:variant "link" :href "https://example.com"} "Link with href")])))
;; ── Alert ───────────────────────────────────────────────────────────
(defn alert-demo []
(section "Alert"
(alert/alert {:variant "success" :title "Success!"} "Your changes have been saved.")
@@ -63,7 +75,6 @@
(alert/alert {:variant "info" :title "Info"} "This is an informational alert.")
(alert/alert {:title "Neutral"} "A neutral alert with no variant.")))
;; ── Badge ───────────────────────────────────────────────────────────
(defn badge-demo []
(section "Badge"
(into [:div {:style {"display" "flex" "gap" "0.5rem" "flex-wrap" "wrap" "align-items" "center"}}]
@@ -74,7 +85,6 @@
(badge/badge {:variant "warning"} "Warning")
(badge/badge {:variant "danger"} "Danger")])))
;; ── Card ────────────────────────────────────────────────────────────
(defn card-demo []
(section "Card"
(card/card {}
@@ -84,7 +94,6 @@
(button/button {:variant "secondary" :size "sm"} "Cancel")
(button/button {:variant "primary" :size "sm"} "Save")))))
;; ── Accordion ───────────────────────────────────────────────────────
(defn accordion-demo []
(section "Accordion"
[:div {:class "accordion-group"}
@@ -92,7 +101,6 @@
(accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
(accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")]))
;; ── Table ───────────────────────────────────────────────────────────
(defn table-demo []
(section "Table"
(table/table {:headers ["Name" "Email" "Role" "Status"]
@@ -100,7 +108,6 @@
["Bob Smith" "bob@example.com" "Editor" "Active"]
["Carol White" "carol@example.com" "Viewer" "Pending"]]})))
;; ── Dialog ──────────────────────────────────────────────────────────
(defn dialog-demo []
(section "Dialog"
[:p {:style {"color" "var(--fg-2)" "font-size" "var(--font-sm)"}} "Click button to open dialog."]
@@ -120,7 +127,6 @@
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog")))}
"Confirm")))))
;; ── Spinner ─────────────────────────────────────────────────────────
(defn spinner-demo []
(section "Spinner"
[:div {:style {"display" "flex" "gap" "1.5rem" "align-items" "center"}}
@@ -128,7 +134,6 @@
(spinner/spinner {})
(spinner/spinner {:size "lg"})]))
;; ── Skeleton ────────────────────────────────────────────────────────
(defn skeleton-demo []
(section "Skeleton"
[:div {:style {"max-width" "400px"}}
@@ -141,7 +146,6 @@
(skeleton/skeleton {:variant "line"})
(skeleton/skeleton {:variant "line"})]]]))
;; ── Progress ────────────────────────────────────────────────────────
(defn progress-demo []
(section "Progress"
(progress/progress {:value 25})
@@ -149,7 +153,6 @@
(progress/progress {:value 75 :variant "warning"})
(progress/progress {:value 90 :variant "danger"})))
;; ── Switch ──────────────────────────────────────────────────────────
(defn switch-demo []
(section "Switch"
[:div {:style {"display" "flex" "flex-direction" "column" "gap" "0.75rem"}}
@@ -158,7 +161,6 @@
(switch/switch-toggle {:label "Disabled off" :disabled true})
(switch/switch-toggle {:label "Disabled on" :checked true :disabled true})]))
;; ── Tooltip ─────────────────────────────────────────────────────────
(defn tooltip-demo []
(section "Tooltip"
[:div {:style {"display" "flex" "gap" "1.5rem" "padding-top" "2rem"}}
@@ -169,7 +171,6 @@
(tooltip/tooltip {:text "View profile"}
[:a {:href "#" :style {"color" "var(--accent)"}} "Profile"])]))
;; ── Breadcrumb ──────────────────────────────────────────────────────
(defn breadcrumb-demo []
(section "Breadcrumb"
(breadcrumb/breadcrumb
@@ -178,13 +179,11 @@
{:label "Oat Docs" :href "#"}
{:label "Components"}]})))
;; ── Pagination ──────────────────────────────────────────────────────
(defn pagination-demo []
(section "Pagination"
(pagination/pagination {:current 3 :total 5
:on-click (fn [p] (js/console.log (str "Page: " p)))})))
;; ── Form ────────────────────────────────────────────────────────
(defn form-demo []
(section "Form"
[:form {:style {"max-width" "480px"}}
@@ -218,88 +217,22 @@
(form/form-field {:label "Volume"}
(form/form-range {:min 0 :max 100 :value 50}))
(button/button {:variant "primary" :attrs {:type "submit"}} "Submit")]
;; Input group
[:div {:style {"max-width" "480px" "margin-top" "1.5rem"}}
[:h4 {:style {"margin-bottom" "0.75rem"}} "Input group"]
(form/form-group {}
(form/form-group-addon {} "https://")
(form/form-input {:placeholder "subdomain"})
(button/button {:variant "primary" :size "sm"} "Go"))]
;; Validation error
[:div {:style {"max-width" "480px" "margin-top" "1.5rem"}}
[:h4 {:style {"margin-bottom" "0.75rem"}} "Validation error"]
(form/form-field {:label "Email" :error "Please enter a valid email address."}
(form/form-input {:type "email" :error true :value "invalid-email"}))]))
;; ── Icon ─────────────────────────────────────────────────────────
(defn icon-demo []
(section "Icon"
(into [:div {:style {"display" "flex" "gap" "1.5rem" "flex-wrap" "wrap" "align-items" "center"}}]
(map (fn [n]
[:div {:style {"display" "flex" "flex-direction" "column" "align-items" "center" "gap" "0.25rem"}}
(icon/icon {:icon-name n})
[:span {:style {"font-size" "var(--font-xs)" "color" "var(--fg-2)"}} n]])
["home" "search" "settings" "user" "mail" "bell" "calendar" "star"
"file" "folder" "code" "terminal" "globe" "shield" "zap" "heart"
"plus" "minus" "check" "edit" "trash" "download" "upload" "copy"
"eye" "lock" "bookmark" "inbox" "database" "map-pin"]))
[:div {:style {"display" "flex" "gap" "1rem" "align-items" "center" "margin-top" "0.5rem"}}
[:span {:style {"font-size" "var(--font-xs)" "color" "var(--fg-2)"}} "Sizes:"]
(icon/icon {:icon-name "star" :size "sm"})
(icon/icon {:icon-name "star"})
(icon/icon {:icon-name "star" :size "lg"})
(icon/icon {:icon-name "star" :size "xl"})]))
;; ── Pages ───────────────────────────────────────────────────────────
;; ── Sidebar ─────────────────────────────────────────────────────────
(defn sidebar-demo []
(section "Sidebar"
(sidebar/sidebar-layout {}
(sidebar/sidebar {}
(sidebar/sidebar-header {}
(sidebar/sidebar-brand {:title "Acme Inc." :subtitle "Enterprise" :icon "A"})
(sidebar/sidebar-search {:placeholder "Search..."}))
(sidebar/sidebar-content {}
(sidebar/sidebar-group {:label "Getting Started"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#" :icon-name "download"} "Installation")
(sidebar/sidebar-menu-item {:href "#" :icon-name "folder" :active true} "Project Structure")))
(sidebar/sidebar-group {:label "Building"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#" :icon-name "globe"} "Routing")
(sidebar/sidebar-menu-item {:href "#" :icon-name "database" :badge "New"} "Data Fetching")
(sidebar/sidebar-menu-item {:href "#" :icon-name "layers"} "Rendering")
(sidebar/sidebar-menu-item {:href "#" :icon-name "zap"} "Caching")
(sidebar/sidebar-menu-item {:href "#" :icon-name "eye"} "Styling")))
(sidebar/sidebar-group {:label "API Reference"}
(sidebar/sidebar-collapsible {:title "Components" :open true}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#"} "Button")
(sidebar/sidebar-menu-item {:href "#"} "Card")
(sidebar/sidebar-menu-item {:href "#"} "Dialog")))
(sidebar/sidebar-collapsible {:title "Functions"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#"} "fetch")
(sidebar/sidebar-menu-item {:href "#"} "redirect")))))
(sidebar/sidebar-footer {}
(sidebar/sidebar-user {:user-name "Alice Johnson" :email "alice@example.com"})))
(sidebar/sidebar-layout-main {}
[:div {:style {"padding" "2rem"}}
[:h2 {:style {"margin" "0 0 1rem" "color" "var(--fg-0)"}} "Dashboard"]
[:div {:style {"display" "grid" "grid-template-columns" "repeat(3, 1fr)" "gap" "1rem"}}
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]]
[:div {:style {"margin-top" "1rem" "min-height" "200px" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]]))))
;; ── App ─────────────────────────────────────────────────────────────
(defn app []
[:div {:style {"max-width" "800px" "margin" "0 auto"}}
[:div {:style {"display" "flex" "justify-content" "space-between" "align-items" "center" "margin-bottom" "2rem"}}
[:h2 {:style {"margin" "0" "color" "var(--fg-0)"}} "Squint (Eucalypt)"]
[:button {:on-click toggle-theme!
:style {"padding" "0.5rem 1rem" "cursor" "pointer" "border-radius" "var(--radius-md)"
"border" "var(--border-0)" "background" "var(--bg-1)" "color" "var(--fg-0)"}}
"Toggle Dark Mode"]]
(defn components-page []
[:div
(page-header "Components" "All UI components at a glance.")
(button-demo)
(alert-demo)
(badge-demo)
@@ -314,14 +247,177 @@
(tooltip-demo)
(breadcrumb-demo)
(pagination-demo)
(form-demo)
(icon-demo)
(sidebar-demo)])
(form-demo)])
(def icon-categories
[["Navigation"
["home" "menu" "x"
"chevron-down" "chevron-up" "chevron-left" "chevron-right"
"arrow-down" "arrow-up" "arrow-left" "arrow-right"
"external-link"]]
["Actions"
["search" "plus" "minus" "check" "edit" "trash"
"download" "upload" "copy" "filter" "link" "refresh"]]
["Objects"
["file" "folder" "image" "mail" "bell" "calendar" "clock"
"bookmark" "star" "heart" "inbox" "layers" "package"]]
["UI & System"
["settings" "user" "users" "log-out" "log-in" "eye" "eye-off"
"lock" "grid" "list" "layout-dashboard" "monitor" "moon" "sun"]]
["Status"
["alert-triangle" "alert-circle" "info" "circle-check" "circle-x"]]
["Dev & Technical"
["code" "terminal" "database" "globe" "shield" "zap" "book-open" "map-pin"]]])
(defn- icon-card [n]
[:div {:style {"display" "flex" "flex-direction" "column" "align-items" "center"
"gap" "var(--size-2)" "padding" "var(--size-3)"
"border-radius" "var(--radius-md)" "border" "var(--border-0)"}}
(icon/icon {:icon-name n})
[:span {:style {"font-size" "var(--font-xs)" "color" "var(--fg-2)"
"text-align" "center" "word-break" "break-all"}} n]])
(defn- icon-category-section [entry]
(let [cat-name (first entry)
icons (second entry)]
(section cat-name
(into [:div {:style {"display" "grid" "grid-template-columns" "repeat(auto-fill, minmax(5rem, 1fr))" "gap" "var(--size-4)"}}]
(map icon-card icons)))))
(defn icons-page []
[:div
(page-header "Icons" (str (count icon/icon-names) " icons based on Lucide. All render as inline SVG with stroke=\"currentColor\"."))
(section "Sizes"
(into [:div {:style {"display" "flex" "gap" "1.5rem" "align-items" "end"}}]
(map (fn [pair]
(let [s (first pair)
label (second pair)]
[:div {:style {"display" "flex" "flex-direction" "column" "align-items" "center" "gap" "var(--size-2)"}}
(icon/icon {:icon-name "star" :size s})
[:span {:style {"font-size" "var(--font-xs)" "color" "var(--fg-2)"}} label]]))
[["sm" "sm"] ["md" "md (default)"] ["lg" "lg"] ["xl" "xl"]])))
(into [:div] (map icon-category-section icon-categories))])
(defn sidebar-page []
[:div
(page-header "Sidebar" "A composable sidebar with brand, search, grouped navigation, collapsible sections, and user footer.")
(section "Example"
(sidebar/sidebar-layout {:attrs {:style "border: var(--border-0); border-radius: var(--radius-lg); overflow: hidden; height: 500px;"}}
(sidebar/sidebar {:attrs {:style "height: 100%; position: static;"}}
(sidebar/sidebar-header {}
(sidebar/sidebar-brand {:title "Acme Inc." :subtitle "Enterprise" :icon "A"})
(sidebar/sidebar-search {:placeholder "Search..."}))
(sidebar/sidebar-content {}
(sidebar/sidebar-group {:label "Getting Started"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#" :icon-name "download"} "Installation")
(sidebar/sidebar-menu-item {:href "#" :icon-name "folder" :active true} "Project Structure")))
(sidebar/sidebar-group {:label "Building"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#" :icon-name "globe"} "Routing")
(sidebar/sidebar-menu-item {:href "#" :icon-name "database" :badge "New"} "Data Fetching")
(sidebar/sidebar-menu-item {:href "#" :icon-name "layers"} "Rendering")
(sidebar/sidebar-menu-item {:href "#" :icon-name "zap"} "Caching")
(sidebar/sidebar-menu-item {:href "#" :icon-name "eye"} "Styling")))
(sidebar/sidebar-group {:label "API Reference"}
(sidebar/sidebar-collapsible {:title "Components" :open true}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#"} "Button")
(sidebar/sidebar-menu-item {:href "#"} "Card")
(sidebar/sidebar-menu-item {:href "#"} "Dialog")))
(sidebar/sidebar-collapsible {:title "Functions"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item {:href "#"} "fetch")
(sidebar/sidebar-menu-item {:href "#"} "redirect")))))
(sidebar/sidebar-footer {}
(sidebar/sidebar-user {:user-name "Alice Johnson" :email "alice@example.com"})))
(sidebar/sidebar-layout-main {}
[:div {:style {"padding" "2rem"}}
[:h3 {:style {"margin" "0 0 1rem" "color" "var(--fg-0)"}} "Dashboard"]
[:div {:style {"display" "grid" "grid-template-columns" "repeat(3, 1fr)" "gap" "1rem"}}
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]
[:div {:style {"aspect-ratio" "16/9" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]]
[:div {:style {"margin-top" "1rem" "min-height" "120px" "background" "var(--bg-1)" "border-radius" "var(--radius-lg)" "border" "var(--border-0)"}}]])))])
;; ── Navigation ──────────────────────────────────────────────────────
(def nav-items
[{:id "components" :label "Components" :icon-name "package"}
{:id "icons" :label "Icons" :icon-name "image"}
{:id "sidebar" :label "Sidebar" :icon-name "layout-dashboard"}])
(defn navigate! [page-id]
(fn [_e]
(reset! !page page-id)
(render!)))
;; ── App Shell ───────────────────────────────────────────────────────
(defn own-port []
(let [p (js/parseInt (.-port js/window.location) 10)]
(if (js/isNaN p) 3002 p)))
(defn make-targets []
(let [port (own-port)
base (- port 2)]
[{:label "Hiccup" :port (+ base 3)}
{:label "Replicant" :port (+ base 1)}
{:label "Squint" :port (+ base 2) :active true}]))
(defn app-sidebar [active-page]
(sidebar/sidebar {}
(sidebar/sidebar-header {}
(sidebar/sidebar-brand {:title "UI Framework" :subtitle "Squint" :icon "U"}))
(sidebar/sidebar-content {}
(sidebar/sidebar-group {:label "Pages"}
(into (sidebar/sidebar-menu {})
(map (fn [{:keys [id label icon-name]}]
(sidebar/sidebar-menu-item
{:icon-name icon-name :active (= id active-page)
:on-click (navigate! id)}
label))
nav-items)))
(sidebar/sidebar-separator)
(sidebar/sidebar-group {:label "Targets"}
(into (sidebar/sidebar-menu {})
(map (fn [{:keys [label port active]}]
(sidebar/sidebar-menu-item
{:href (str "http://localhost:" port)
:icon-name "monitor"
:active active}
label))
(make-targets))))
(sidebar/sidebar-separator)
(sidebar/sidebar-group {:label "Theme"}
(sidebar/sidebar-menu {}
(sidebar/sidebar-menu-item
{:icon-name "sun" :on-click toggle-theme!}
"Toggle Dark Mode"))))
(sidebar/sidebar-footer {}
(sidebar/sidebar-user {:user-name "Dev Mode" :email (str "squint · port " (own-port)) :avatar "sq"}))))
(defn app []
(let [active-page @!page]
(sidebar/sidebar-layout {}
(app-sidebar active-page)
(sidebar/sidebar-layout-main {}
[:div {:style {"padding" "2rem" "max-width" "960px"}}
(case active-page
"components" (components-page)
"icons" (icons-page)
"sidebar" (sidebar-page)
(components-page))]))))
;; ── Init ────────────────────────────────────────────────────────────
(defn render! []
(eu/render (app) (js/document.getElementById "app")))
(defn init! []
(eu/render (app) (js/document.getElementById "app")))
(render!))
(defn reload! []
(eu/render (app) (js/document.getElementById "app")))
(render!))
(init!)