2000 stars! sweet! congratulations :)🍻

You guys are going to be famous.

kudos on the new docs

and the diagrams are great

i know this is isn't exactly the right place, but i have a question about the coding style behind re-com

the reagent components accept arguments as a keyword followed by a value, like

[component :label "First" :value "a"]

(fn
  [& {:keys [label on-click tooltip tooltip-position disabled? class style attr]
      :or   {class "btn-default"}
      :as   args}]

args is a map, of course, but as far as i know you can't apply a map to a reagent component that might be nested inside the parent component

@joshkh I think instead of using apply, you can use (into [child-component] (apply concat arg-map)) to get an "apply-like" result. the (apply concat ...)is to turn a map into a flat sequence.

I can't speak to why re-com chose that declaration style, but that's one way to workaround it at least

good point, thanks geoffs!

https://kishanov.github.io/re-frame-datatable/ - basic datatable component for re-frame

@kishanov: Looks awesome, I'll add it to the external resources page in the docs

I get the following error: #object[Error Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.] Here is what my code looks like:

(defn main-panel []
  (fn [] [ui/mui-theme-provider
         {:mui-theme (ui/get-mui-theme
                      {:palette {:text-color (ui/color :green600)}
                       :app-bar {:color (ui/color :red700)}})}
         [:div
          [ui/app-bar {:title "Title"
                       :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]]])) 

@dhruv1: What do you get when you run (main-panel) from the REPL?

[#object[cljs_react_material_ui$core$mui_theme_provider "function cljs_react_material_ui$core$mui_theme_provider(var_args){
var args__45341__auto__ = [];
var len__45334__auto___56102 = arguments.length;
var i__45335__auto___56103 = (0);
while(true){
if((i__45335__auto___56103 < len__45334__auto___56102)){
args__45341__auto__.push((arguments[i__45335__auto___56103]));

var G__56104 = (i__45335__auto___56103 + (1));
i__45335__auto___56103 = G__56104;
continue;
} else {
}
break;
}

var argseq__45342__auto__ = ((((0) < args__45341__auto__.length))?(new cljs.core.IndexedSeq(args__45341__auto__.slice((0)),(0),null)):null);
return cljs_react_material_ui.core.mui_theme_provider.cljs$core$IFn$_invoke$arity$variadic(argseq__45342__auto__);
}"] {:mui-theme #js {:appBar #js {:color "red700", :textColor "#ffffff", :height 64, :titleFontWeight 400, :padding 24}, :avatar #js {:color "#ffffff", :backgroundColor "rgb(188, 188, 188)"}, :badge #js {:color "#ffffff", :textColor "#43a047", :primaryColor "#00bcd4", :primaryTextColor "#ffffff", :secondaryColor "#ff4081", :secondaryTextColor "#ffffff", :fontWeight 500}, :bottomNavigation #js {:backgroundColor "#ffffff", :unselectedColor "rgba(67, 160, 71, 0.54)", :selectedColor "#00bcd4", :height 56, :unselectedFontSize 12, :selectedFontSize 14}, :button #js {:height 36, :minWidth 88, :iconButtonSize 48}, :card #js {:titleColor "rgba(67, 160, 71, 0.87)", :subtitleColor "rgba(67, 160, 71, 0.54)", :fontWeight 500}, :cardMedia #js {:color "rgba(255, 255,  .... 

@shaun-mahood response from (main-panel)

@dhruv1: Ok - I might be wrong about this, but I think if you change your code to

(defn main-panel []
  [ui/mui-theme-provider
         {:mui-theme (ui/get-mui-theme
                      {:palette {:text-color (ui/color :green600)}
                       :app-bar {:color (ui/color :red700)}})}
         [:div
          [ui/app-bar {:title "Title"
                       :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]]]) 

@shaun-mahood I get the same error #object[Error Invariant Violation: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.]

@dhruv1: What do you get when you run that same function again (change the code and run (main-panel) again)?

Once that function returns valid hiccup, I think the rest of it should work as well.

@shaun-mahood

[#object[cljs_react_material_ui$core$mui_theme_provider "function cljs_react_material_ui$core$mui_theme_provider(var_args){
var args__45341__auto__ = [];
var len__45334__auto___56102 = arguments.length;
var i__45335__auto___56103 = (0);
while(true){
if((i__45335__auto___56103 < len__45334__auto___56102)){
args__45341__auto__.push((arguments[i__45335__auto___56103]));

var G__56104 = (i__45335__auto___56103 + (1));
i__45335__auto___56103 = G__56104;
continue;
} else {
}
break;
}

var argseq__45342__auto__ = ((((0) < args__45341__auto__.length))?(new cljs.core.IndexedSeq(args__45341__auto__.slice((0)),(0),null)):null);
return cljs_react_material_ui.core.mui_theme_provider.cljs$core$IFn$_invoke$arity$variadic(argseq__45342__auto__);
}"] {:mui-theme #js {:appBar #js {:color "#d32f2f", :textColor "#ffffff", :height 64, :titleFontWeight 400, :padding 24}, :avatar #js {:color "#ffffff", :backgroundColor "rgb(188, 188, 188)"}, :badge #js {:color "#ffffff", :textColor "#43a047", :primaryColor "#00bcd4", :primaryTextColor "#ffffff", :secondaryColor "#ff4081", :secondaryTextColor "#ffffff", :fontWeight 500}, :bottomNavigation #js {:backgroundColor "#ffffff", :unselectedColor "rgba(67, 160, 71, 0.54)", :selectedColor "#00bcd4", :height 56, :unselectedFontSize 12, :selectedFontSize 14}, :button #js {:height 36, :minWidth 88, :iconButtonSize 48}, :card #js {:titleColor "rgba(67, 160, 71, 0.87)", :subtitleColor "rgba(67, 160, 71, 0.54)", :fontWeight 500}, :cardMedia #js {:color "rgba(255, 255, 255, 0.87)", :overlayContentBackground "rgba(0, 0, 0, 0.54)", :titleColor "rgba(255, 255, 255, 0.87)", :subtitleColor "rgba(255, 255, 255, 0.54)"}, :cardText #js {:textColor "#43a047"}, :checkbox #js {:boxColor "#43a047", :checkedColor "#00bcd4", :requiredColor "#00bcd4", :disabledColor "rgba(0, 0, 0, 0.3)", :labelColor "#43a047", :labelDisabledCo … 

ah found the issue

(defn main-panel []
  [ui/mui-theme-provider
   {:mui-theme (ui/get-mui-theme
                {:palette {:text-color (ui/color :green600)}
                 :app-bar {:color (ui/color :red700)}})}
   (reagent/as-element [:div
                        [ui/app-bar {:title "Title"
                                     :icon-element-right (reagent/as-element [ui/icon-button (ic/action-play-for-work)])}]])]) 

I had to wrap the :div in reagent/as-element

Oh good 🙂

@shaun-mahood thank you! 🙂

what is the best way to explore my db in the browser while developing re-frame?

re-frame.db/app-db?

yes!

have you looked at re-frisk?

https://github.com/flexsurfer/re-frisk

re-frisk nails it, thank you!

:thumbsup:

@dhruv1 see FAQ #1 for detailed options