Skip to content

Commit

Permalink
[error-modal] Add more args
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Jul 22, 2024
1 parent 0f483a2 commit cc4863b
Show file tree
Hide file tree
Showing 12 changed files with 224 additions and 111 deletions.
2 changes: 1 addition & 1 deletion src/re_com/box.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,4 +541,4 @@
:style style
:attr attr
:src src
:debug-as debug-as))))
:debug-as debug-as))))
105 changes: 80 additions & 25 deletions src/re_com/error_modal.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,42 @@
[re-com.box :as box]
[re-com.modal-panel :as mp]
[re-com.theme :as theme]
[re-com.theme.blue-modern :as blue-modern]
[re-com.buttons :as button]
[re-com.text :as text]
[re-com.util :as u :refer [deref-or-value px]]))

(swap! theme/registry update :main vector blue-modern/theme)

(defn close-button [props]
(let [hover? (r/atom nil)]
[:div {:on-mouse-enter (partial reset! hover? true)
:on-mouse-leave (partial reset! hover? false)
:style {:padding "12px 7px 7px 7px"}}
[u/x-button (merge props {:hover? hover? :stroke-width "1.2px"})]]))

(defn error-modal
[& {:keys [severity title
what-happened what-happened-label
implications implications-label
what-to-do what-to-do-label
what-happened what-happened-title
implications implications-title
what-to-do what-to-do-title
details details-title
error error-title
action instructions
proceedable?
undone?
backdrop-on-click on-close closeable?
theme
header footer heading]
:or {title "Sorry, you've hit a bug"
what-happened-label "What Happened?"
implications-label "Implications"
what-to-do-label "What Should I Do?"
what-happened-title "What Happened?"
implications-title "Implications"
what-to-do-title "What Should I Do?"
details-title "Low-level Details (for developers):"
severity :error
closeable? true}
:as args}]
(let [themed (fn [part & [props]]
(let [themed (fn [part props]
(theme/apply props
{:part part
:state {:severity severity}}
Expand All @@ -35,7 +51,11 @@
arrow-side-length (* 2 arrow-midpoint)
arrow-points (str arrow-midpoint "," arrow-midpoint " "
arrow-side-length "," 0 " "
"0,0")]
"0,0")
error (if (string? error)
(fn [props] [:div props error]) error)
details (if (string? details)
(fn [props] [:div props details]) details)]
[mp/modal-panel
(themed ::modal
{:backdrop-on-click backdrop-on-click
Expand All @@ -48,23 +68,58 @@
(themed ::title-wrapper
{:src (at)
:children
[[text/title (themed ::title {:level :level2 :label title})]
(when closeable? [u/x-button {:on-click on-close}])]})]
[:svg (themed ::triangle {:style {:width (px arrow-side-length)
:height (px arrow-midpoint)
:transform (str "translateX(" (-> panel-padding (- arrow-midpoint) px) ")")}})
[[text/title (themed ::title {:label title})]
(when closeable? [close-button {:on-click on-close
:height "12px"
:width "12px"}])]})]
[:svg (themed ::triangle
{:style {:width (px arrow-side-length)
:height (px arrow-midpoint)
:transform (str "translateX("
(-> panel-padding (- arrow-midpoint) px) ")")}})
[:polygon {:points arrow-points}]]
[box/v-box
(themed ::body
{:children
[[u/part header args]
(when what-happened
[u/part heading (themed ::heading {:label what-happened-label :level :level2}) text/title])
[u/part what-happened args]
(when implications
[u/part heading (themed ::heading {:label implications-label :level :level2}) text/title])
[u/part implications args]
(when what-to-do
[u/part heading (themed ::heading {:label what-to-do-label :level :level2}) text/title])
[u/part what-to-do args]
[u/part footer args]]})]]})]})]))
{:gap [:<>
[box/gap :size "19px"]
[box/line]
[box/gap :size "7px"]]
:children
[(when header
[:<>
[box/gap :size "19px"]
[u/part header args]])
[:<>
(when action
[u/part heading
(themed ::sub-title-2 {:label action :level :level2})
text/title])
(when instructions
[text/p instructions])
(when what-happened
[:<>
[u/part heading
(themed ::sub-title-2 {:label what-happened-title :level :level3}) text/title]
[u/part what-happened args]])

(when implications
[:<>
[u/part heading
(themed ::sub-title {:label implications-title :level :level3}) text/title]
[u/part implications args]])

(when what-to-do
[:<>
[u/part heading (themed ::sub-title {:label what-to-do-title :level :level3}) text/title]
[u/part what-to-do args]])]

(when (or details error)
[:<>
[u/part heading
(themed ::sub-title {:label details-title :level :level3}) text/title]
[u/part details args]

[u/part error (themed ::error args)]])

(when footer
[u/part footer args])]})]]})]})]))
74 changes: 42 additions & 32 deletions src/re_com/text.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
(ns re-com.text
(:require-macros
[re-com.core :refer [handler-fn at reflect-current-component]]
[re-com.validate :refer [validate-args-macro]])
(:require
[re-com.config :refer [include-args-desc?]]
[re-com.debug :refer [->attr]]
[re-com.box :refer [v-box box line flex-child-style]]
[re-com.util :refer [deep-merge]]
[re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup?]]))
(ns re-com.text
(:require-macros
[re-com.core :refer [handler-fn at reflect-current-component]]
[re-com.validate :refer [validate-args-macro]])
(:require
[re-com.config :refer [include-args-desc?]]
[re-com.debug :refer [->attr]]
[re-com.box :refer [v-box box line flex-child-style]]
[re-com.theme :as theme]
[re-com.util :refer [deep-merge]]
[re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup?]]))

;; ------------------------------------------------------------------------------------
;; Component: label
Expand Down Expand Up @@ -83,37 +84,46 @@
{:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the title, not the wrapping div)"}
{:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the title, not the wrapping div)"]}
{:name :parts :required false :type "map" :validate-fn (parts? title-parts) :description "See Parts section below."}
{:name :theme :required false :type "map" :description "alpha"}
{:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]}
{:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}]))

(defn title
"A title with four preset levels"
[& {:keys [label level underline? margin-top margin-bottom class style attr parts src debug-as]
[& {:keys [label level underline? margin-top margin-bottom class style attr parts src debug-as theme]
:or {margin-top "0.6em" margin-bottom "0.3em"}
:as args}]
(or
(validate-args-macro title-args-desc args)
(let [preset-class (if (nil? level) "" (name level))]
(let [preset-class (if (nil? level) "" (name level))
this-theme (theme/defaults args)
themed (fn [part props]
(theme/apply props
{:part part}
this-theme))]
[v-box
:src src
:debug-as (or debug-as (reflect-current-component))
:class (str "rc-title-wrapper " preset-class " " (get-in parts [:wrapper :class]))
:style (get-in parts [:wrapper :style])
:attr (get-in parts [:wrapper :attr])
:children [[:span (merge {:class (str "display-flex rc-title " preset-class " " class)
:style (merge (flex-child-style "none")
{:margin-top margin-top}
{:line-height 1} ;; so that the margins are correct
(when-not underline? {:margin-bottom margin-bottom})
style)}
attr)
label]
(when underline? [line
:src (at)
:size "1px"
:class (str "rc-title-underline " (get-in parts [:underline :class]))
:style (merge {:margin-bottom margin-bottom} (get-in parts [:underline :style]))
:attr (get-in parts [:underline :attr])])]])))
(themed ::title-wrapper
{:src src
:debug-as (or debug-as (reflect-current-component))
:class (str "rc-title-wrapper " preset-class " " (get-in parts [:wrapper :class]))
:style (get-in parts [:wrapper :style])
:attr (get-in parts [:wrapper :attr])
:children [[:span
(themed ::title-label
(merge {:class (str "display-flex rc-title " preset-class " " class)
:style (merge (flex-child-style "none")
{:margin-top margin-top}
{:line-height 1} ;; so that the margins are correct
(when-not underline? {:margin-bottom margin-bottom})
style)}
attr))
label]
(when underline? [line
:src (at)
:size "1px"
:class (str "rc-title-underline " (get-in parts [:underline :class]))
:style (merge {:margin-bottom margin-bottom} (get-in parts [:underline :style]))
:attr (get-in parts [:underline :attr])])]})])))

;; ------------------------------------------------------------------------------------
;; Component: p
Expand Down Expand Up @@ -153,4 +163,4 @@
[:span.rc-p m (into [:span] children)]))

;; Alias for backwards compatibility; p and p-span used to be different implementations.
(def p-span p)
(def p-span p)
39 changes: 24 additions & 15 deletions src/re_com/theme.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
(:require
[reagent.core :as r]
[re-com.theme.util :as tu]
[re-com.util :as u]
[re-com.theme.default :as theme.default]))

(def registry (r/atom {:base-variables theme.default/base-variables
Expand All @@ -14,38 +15,40 @@

(def named->vec
(memoize
(juxt :base-variables :main-variables :user-variables :base :main :user)))
(juxt :re-com/system :base-variables :main-variables :user-variables :base :main :user)))

(def global (r/reaction (flatten (named->vec @registry))))

(def merge-props tu/merge-props)

(def parts tu/parts)

(defn rf [[props ctx] theme]
(let [result (theme props ctx)]
(if (vector? result) result [result ctx])))

(defn merge [a {:keys [base main user main-variables user-variables base-variables] :as b}]
(defn merge [a {:re-com/keys [system] :keys [base main user main-variables user-variables base-variables] :as b}]
(cond-> a
system (update :re-com/system conj system)
base-variables (assoc :base-variables base-variables)
main-variables (assoc :main-variables main-variables)
user-variables (update :user-variables conj user-variables)
base (assoc :base base)
main (assoc :main main)
user (update :user conj user)))

(defn rf [[props ctx] theme]
(let [result (theme props ctx)]
(if (vector? result) result [result ctx])))

(defn apply
([props ctx themes]
(->>
(if-not (map? themes)
(update @registry :user conj themes)
(update @registry :usder conj themes)
(merge @registry themes))
named->vec
flatten
(remove nil?)
(reduce rf [props ctx])
first)))
first
(#(dissoc % :re-com/system)))))

(defn props [ctx themes]
(apply {} ctx themes))
Expand Down Expand Up @@ -74,10 +77,16 @@
(update :attr clojure.core/merge
(select-keys outer-props outer-attr-keys)))))))

(defn defaults [{:keys [theme-vars base-theme main-theme theme parts]} & themes]
(apply re-com.theme/merge
{:variables theme-vars
:base base-theme
:main main-theme
:user [theme (re-com.theme/parts parts)]}
themes))
(defn add-parts-path [path]
(fn parts-pather [props {:keys [part] :as ctx}]
[(update props :theme conj (add-parts-path (conj path part)))
(assoc ctx :parts-path (conj path part))]))

(defn defaults [{:re-com/keys [system] :keys [theme-vars base-theme main-theme theme parts]} & themes]
(re-com.theme/merge
{:re-com/system []
:variables theme-vars
:base base-theme
:main main-theme
:user [theme (re-com.theme/parts parts)]}
themes))
28 changes: 19 additions & 9 deletions src/re_com/theme/blue_modern.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
(ns re-com.theme.blue-modern
(:require
[re-com.theme :as theme]
[re-com.text :as text]
[re-com.dropdown :as dropdown]
[re-com.tree-select :as tree-select]))
[re-com.tree-select :as tree-select]
[re-com.error-modal :as-alias error-modal]))

(defn theme [attr {:keys [state part] $ :variables}]
(->> {}
(case part

::dropdown/anchor-wrapper
{:style {:height "25px"
:line-height "23px"}})
(theme/merge-props attr)))
(defn theme [props {:keys [state part part-path]
$ :variables
:as ctx}]
(->> (or
(case part-path
[:re-com.error-modal/sub-title-2
::text/title-label]
{:style {:color "red"}}
nil)
(case part
::dropdown/anchor-wrapper
{:style {:height "25px"
:line-height "23px"}}
nil)
{})
(theme/merge-props props)))
Loading

0 comments on commit cc4863b

Please sign in to comment.