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

Revert "feat(calendar-events): add view toggle, source filters, detail dialog, error banner, loading indicator"

Browse Source 
This reverts commit d8e280df2a.
This commit is contained in:
Florian Schroedl
2026-03-29 11:20:55 +02:00
parent d8e280df2a
commit 7f1a679b74
7 changed files with 182 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
dev/hiccup/src/dev/hiccup.clj
View File

@@ -318,14 +318,14 @@
(form/form-input {:type :email :error true :value "invalid-email"}))]))
(def sample-calendar-events
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color :accent :tags ["work"] :source "Work"}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color :success :tags ["social"] :source "Personal"}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color :danger :tags ["ops" "urgent"] :source "Work"}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color :warning :tags ["design"] :source "Work"}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true :source "Work"}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color :accent :source "Work"}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color :success :source "Work"}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color :danger :tags ["social"] :source "Personal"}])
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color :accent}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color :success}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color :danger}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color :warning}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color :accent}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color :success}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color :danger}])
(defn calendar-demo []
(section "Calendar"
@@ -335,25 +335,12 @@
:selected-date "2026-03-29"})
(calendar/calendar {:year 2026 :month 4 :today-str "2026-03-29"})]
[:h5 "Full Calendar App"]
;; Error banner
(cal-events/error-banner {:message "Could not fetch events (demo)"})
;; Source toggles
(cal-events/source-toggles
{:sources [{:name "Work" :color :accent :active? true}
{:name "Personal" :color :success :active? true}
{:name "Inbox" :color :warning :active? false}]})
;; Event grid with view toggle in header
[:h5 "Event Grid"]
(cal-events/calendar-event-grid {:year 2026 :month 3 :today-str "2026-03-29"
:selected-date "2026-03-29"
:events sample-calendar-events
:header-actions (cal-events/view-toggle {:view :month})})
:events sample-calendar-events})
;; Ticker + Agenda
[:h5 "Agenda View"]
[:h5 "Day Ticker"]
(cal-events/ticker-strip {:days [{:date "2026-03-27" :day-num 27 :day-label "Fr"}
{:date "2026-03-28" :day-num 28 :day-label "Sa"}
{:date "2026-03-29" :day-num 29 :day-label "Su"}
@@ -365,19 +352,15 @@
:today-str "2026-03-29"
:selected "2026-03-29"
:events sample-calendar-events})
[:h5 "Agenda List"]
(cal-events/agenda-list {:days [{:date "2026-03-29" :label "Today"}
{:date "2026-03-30" :label "Tomorrow"}
{:date "2026-03-31" :label "Tue"}
{:date "2026-04-01" :label "Wed"}
{:date "2026-04-02" :label "Thu"}
{:date "2026-04-03" :label "Fri"}]
:events sample-calendar-events})
;; Event detail dialog (static demo)
[:h5 "Event Detail Dialog"]
(cal-events/event-detail-dialog
{:event {:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00"
:color :danger :tags ["ops" "urgent"] :source "Work"}})))
:events sample-calendar-events})))
;; ── Pages ───────────────────────────────────────────────────────────
@@ -430,9 +413,9 @@
(defn calendar-page []
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(calendar-demo)
(into [:div {:class "md-docs"}]
(markdown/markdown->hiccup (slurp "src/ui/calendar.md")))])
(markdown/markdown->hiccup (slurp "src/ui/calendar.md")))
(calendar-demo)])
(defn icons-page []
[:div

131
dev/replicant/src/dev/replicant.cljs
View File

@@ -280,80 +280,75 @@
(form/form-field {:label "Email" :error "Please enter a valid email address."}
(form/form-input {:type :email :error true :value "invalid-email"}))]))
(defonce !cal-state (atom {:year 2026 :month 3 :selected-date nil
:view :month :selected-event nil :error nil}))
(defonce !cal-state (atom {:year 2026 :month 3 :selected-date nil}))
(def sample-calendar-events
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color :accent :tags ["work"] :source "Work"}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color :success :tags ["social"] :source "Personal"}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color :danger :tags ["ops" "urgent"] :source "Work"}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color :warning :tags ["design"] :source "Work"}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true :source "Work"}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color :accent :source "Work"}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color :success :source "Work"}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color :danger :tags ["social"] :source "Personal"}])
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color :accent}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color :success}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color :danger}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color :warning}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color :accent}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color :success}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color :danger}])
(defn calendar-demo []
(let [{:keys [year month selected-date view selected-event error]} @!cal-state
today-str "2026-03-29"
prev-month! (fn [_] (let [[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)))
next-month! (fn [_] (let [[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)))]
(let [{:keys [year month selected-date]} @!cal-state
today-str "2026-03-29"]
(section "Calendar"
[:h5 "Date Picker"]
(calendar/calendar {:year year :month month
:today-str today-str
:selected-date selected-date
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))
:on-prev-month prev-month!
:on-next-month next-month!})
[:h5 "Date Picker (interactive)"]
[:div {:style {:display "flex" :gap "1.5rem" :flex-wrap "wrap"}}
(calendar/calendar {:year year :month month
:today-str today-str
:selected-date selected-date
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))
:on-prev-month (fn [_]
(let [[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)))
:on-next-month (fn [_]
(let [[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)))})]
(when selected-date
[:p {:style {:color "var(--fg-1)" :font-size "var(--font-sm)"}}
(str "Selected: " selected-date)])
[:h5 "Full Calendar App"]
(cal-events/error-banner {:message error
:on-dismiss (fn [_] (swap! !cal-state assoc :error nil))})
[:h5 "Event Grid"]
(cal-events/calendar-event-grid {:year year :month month
:today-str today-str
:selected-date selected-date
:events sample-calendar-events
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))
:on-prev-month (fn [_]
(let [[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)))
:on-next-month (fn [_]
(let [[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)))
:on-event-click (fn [evt] (js/console.log "Event clicked:" (:title evt)))})
(cal-events/source-toggles
{:sources [{:name "Work" :color :accent :active? true}
{:name "Personal" :color :success :active? true}]
:on-toggle (fn [s] (js/console.log "Toggle source:" s))})
[:h5 "Day Ticker"]
(cal-events/ticker-strip {:days [{:date "2026-03-27" :day-num 27 :day-label "Fr"}
{:date "2026-03-28" :day-num 28 :day-label "Sa"}
{:date "2026-03-29" :day-num 29 :day-label "Su"}
{:date "2026-03-30" :day-num 30 :day-label "Mo"}
{:date "2026-03-31" :day-num 31 :day-label "Tu"}
{:date "2026-04-01" :day-num 1 :day-label "We"}
{:date "2026-04-02" :day-num 2 :day-label "Th"}
{:date "2026-04-03" :day-num 3 :day-label "Fr"}]
:today-str today-str
:selected (or selected-date today-str)
:events sample-calendar-events
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))})
(if (= view :agenda)
[:div
(cal-events/ticker-strip {:days [{:date "2026-03-27" :day-num 27 :day-label "Fr"}
{:date "2026-03-28" :day-num 28 :day-label "Sa"}
{:date "2026-03-29" :day-num 29 :day-label "Su"}
{:date "2026-03-30" :day-num 30 :day-label "Mo"}
{:date "2026-03-31" :day-num 31 :day-label "Tu"}
{:date "2026-04-01" :day-num 1 :day-label "We"}
{:date "2026-04-02" :day-num 2 :day-label "Th"}
{:date "2026-04-03" :day-num 3 :day-label "Fr"}]
:today-str today-str
:selected (or selected-date today-str)
:events sample-calendar-events
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))})
(cal-events/agenda-list {:days [{:date "2026-03-29" :label "Today"}
{:date "2026-03-30" :label "Tomorrow"}
{:date "2026-03-31" :label "Tue"}
{:date "2026-04-01" :label "Wed"}
{:date "2026-04-02" :label "Thu"}
{:date "2026-04-03" :label "Fri"}]
:events sample-calendar-events
:on-event-click (fn [evt] (swap! !cal-state assoc :selected-event evt))})]
(cal-events/calendar-event-grid {:year year :month month
:today-str today-str
:selected-date selected-date
:events sample-calendar-events
:on-select (fn [d] (swap! !cal-state assoc :selected-date d))
:on-prev-month prev-month!
:on-next-month next-month!
:on-event-click (fn [evt] (swap! !cal-state assoc :selected-event evt))
:header-actions (cal-events/view-toggle
{:view view
:on-change (fn [v] (swap! !cal-state assoc :view v))})}))
(cal-events/event-detail-dialog {:event selected-event
:on-close (fn [_] (swap! !cal-state assoc :selected-event nil))}))))
[:h5 "Agenda List"]
(cal-events/agenda-list {:days [{:date "2026-03-29" :label "Today"}
{:date "2026-03-30" :label "Tomorrow"}
{:date "2026-03-31" :label "Tue"}
{:date "2026-04-01" :label "Wed"}
{:date "2026-04-02" :label "Thu"}
{:date "2026-04-03" :label "Fri"}]
:events sample-calendar-events
:on-event-click (fn [evt] (js/console.log "Agenda event:" (:title evt)))}))))
;; ── Pages ───────────────────────────────────────────────────────────
@@ -402,9 +397,9 @@
(defn calendar-page []
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(calendar-demo)
(into [:div {:class ["md-docs"]}]
(markdown/markdown->hiccup calendar-docs-md))])
(markdown/markdown->hiccup calendar-docs-md))
(calendar-demo)])
(defn icons-page []
[:div

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

@@ -297,99 +297,85 @@
(form/form-field {:label "Email" :error "Please enter a valid email address."}
(form/form-input {:type "email" :error true :value "invalid-email"}))]))
(def !cal-state (atom {:year 2026 :month 3 :selected-date nil
:view "month" :selected-event nil :error nil}))
(def !cal-state (atom {:year 2026 :month 3 :selected-date nil}))
(def sample-calendar-events
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color "accent" :tags ["work"] :source "Work"}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color "success" :tags ["social"] :source "Personal"}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color "danger" :tags ["ops" "urgent"] :source "Work"}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color "warning" :tags ["design"] :source "Work"}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true :source "Work"}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color "accent" :source "Work"}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color "success" :source "Work"}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color "danger" :tags ["social"] :source "Personal"}])
(defn- nav! [key val]
(fn [_] (swap! !cal-state assoc key val) (render!)))
(defn- prev-month! [_]
(let [{:keys [year month]} @!cal-state
[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))
(defn- next-month! [_]
(let [{:keys [year month]} @!cal-state
[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))
[{:title "Team standup" :date "2026-03-29" :time-start "09:00" :time-end "09:30" :color "accent"}
{:title "Lunch with Alex" :date "2026-03-29" :time-start "12:00" :time-end "13:00" :color "success"}
{:title "Deploy v2.0" :date "2026-03-29" :time-start "15:00" :color "danger"}
{:title "Design review" :date "2026-03-30" :time-start "10:00" :color "warning"}
{:title "All-day planning" :date "2026-03-31" :color nil :done? true}
{:title "Sprint retro" :date "2026-04-01" :time-start "14:00" :time-end "15:00" :color "accent"}
{:title "1:1 with manager" :date "2026-04-02" :time-start "11:00" :color "success"}
{:title "Release party" :date "2026-04-03" :time-start "17:00" :color "danger"}])
(defn calendar-demo []
(let [{:keys [year month selected-date view selected-event error]} @!cal-state
(let [{:keys [year month selected-date]} @!cal-state
today-str "2026-03-29"]
(section "Calendar"
[:h5 "Date Picker"]
(calendar/calendar {:year year :month month
:today-str today-str
:selected-date selected-date
:on-select (nav! :selected-date)
:on-prev-month prev-month!
:on-next-month next-month!})
[:h5 "Date Picker (interactive)"]
[:div {:style {"display" "flex" "gap" "1.5rem" "flex-wrap" "wrap"}}
(calendar/calendar {:year year :month month
:today-str today-str
:selected-date selected-date
:on-select (fn [d]
(swap! !cal-state assoc :selected-date d)
(render!))
:on-prev-month (fn [_]
(let [[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))
:on-next-month (fn [_]
(let [[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))})]
(when selected-date
[:p {:style {"color" "var(--fg-1)" "font-size" "var(--font-sm)"}}
(str "Selected: " selected-date)])
[:h5 "Full Calendar App"]
;; Error banner
(cal-events/error-banner {:message error
:on-dismiss (nav! :error nil)})
[:h5 "Event Grid"]
(cal-events/calendar-event-grid {:year year :month month
:today-str today-str
:selected-date selected-date
:events sample-calendar-events
:on-select (fn [d]
(swap! !cal-state assoc :selected-date d)
(render!))
:on-prev-month (fn [_]
(let [[ny nm] (calendar/prev-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))
:on-next-month (fn [_]
(let [[ny nm] (calendar/next-month year month)]
(swap! !cal-state assoc :year ny :month nm)
(render!)))
:on-event-click (fn [evt] (js/console.log "Event clicked:" (:title evt)))})
;; Source toggles
(cal-events/source-toggles
{:sources [{:name "Work" :color "accent" :active? true}
{:name "Personal" :color "success" :active? true}]
:on-toggle (fn [s] (js/console.log "Toggle source:" s))})
[:h5 "Day Ticker"]
(cal-events/ticker-strip {:days [{:date "2026-03-27" :day-num 27 :day-label "Fr"}
{:date "2026-03-28" :day-num 28 :day-label "Sa"}
{:date "2026-03-29" :day-num 29 :day-label "Su"}
{:date "2026-03-30" :day-num 30 :day-label "Mo"}
{:date "2026-03-31" :day-num 31 :day-label "Tu"}
{:date "2026-04-01" :day-num 1 :day-label "We"}
{:date "2026-04-02" :day-num 2 :day-label "Th"}
{:date "2026-04-03" :day-num 3 :day-label "Fr"}]
:today-str today-str
:selected (or selected-date today-str)
:events sample-calendar-events
:on-select (fn [d]
(swap! !cal-state assoc :selected-date d)
(render!))})
;; View toggle + event grid / agenda
(if (= view "agenda")
[:div
(cal-events/ticker-strip {:days [{:date "2026-03-27" :day-num 27 :day-label "Fr"}
{:date "2026-03-28" :day-num 28 :day-label "Sa"}
{:date "2026-03-29" :day-num 29 :day-label "Su"}
{:date "2026-03-30" :day-num 30 :day-label "Mo"}
{:date "2026-03-31" :day-num 31 :day-label "Tu"}
{:date "2026-04-01" :day-num 1 :day-label "We"}
{:date "2026-04-02" :day-num 2 :day-label "Th"}
{:date "2026-04-03" :day-num 3 :day-label "Fr"}]
:today-str today-str
:selected (or selected-date today-str)
:events sample-calendar-events
:on-select (nav! :selected-date)})
(cal-events/agenda-list {:days [{:date "2026-03-29" :label "Today"}
{:date "2026-03-30" :label "Tomorrow"}
{:date "2026-03-31" :label "Tue"}
{:date "2026-04-01" :label "Wed"}
{:date "2026-04-02" :label "Thu"}
{:date "2026-04-03" :label "Fri"}]
:events sample-calendar-events
:on-event-click (fn [evt]
(swap! !cal-state assoc :selected-event evt)
(render!))})]
(cal-events/calendar-event-grid {:year year :month month
:today-str today-str
:selected-date selected-date
:events sample-calendar-events
:on-select (nav! :selected-date)
:on-prev-month prev-month!
:on-next-month next-month!
:on-event-click (fn [evt]
(swap! !cal-state assoc :selected-event evt)
(render!))
:header-actions (cal-events/view-toggle
{:view view
:on-change (nav! :view)})}))
;; Event detail dialog
(cal-events/event-detail-dialog {:event selected-event
:on-close (fn [] (swap! !cal-state assoc :selected-event nil) (render!))}))))
[:h5 "Agenda List"]
(cal-events/agenda-list {:days [{:date "2026-03-29" :label "Today"}
{:date "2026-03-30" :label "Tomorrow"}
{:date "2026-03-31" :label "Tue"}
{:date "2026-04-01" :label "Wed"}
{:date "2026-04-02" :label "Thu"}
{:date "2026-04-03" :label "Fri"}]
:events sample-calendar-events
:on-event-click (fn [evt] (js/console.log "Agenda event:" (:title evt)))}))))
;; ── Pages ───────────────────────────────────────────────────────────
@@ -462,10 +448,10 @@
(load-calendar-docs!)
[:div
(page-header "Calendar" "Date picker, event grid, ticker strip, and agenda list.")
(calendar-demo)
(when-let [md @!calendar-docs]
(into [:div {:class "md-docs"}]
(markdown/markdown->hiccup md)))])
(markdown/markdown->hiccup md)))
(calendar-demo)])
(defn icons-page []
[:div