App breaks when updating the smooth ui dependencies

[FabianMk]

Could you please tell me how to setup the smooth-ui theme using the latest dependencies?

I am doing the setup lesson 05-smooth-ui using the following:

:dependencies [[cider/cider-nrepl "0.18.0"] [proto-repl "0.3.1"] [binaryage/devtools "1.0.0"] [reagent "0.10.0"] [re-frame "0.12.0"] [day8.re-frame/re-frame-10x "0.6.0"] [bidi "2.1.6"] [kibu/pushy "0.3.8"] [com.andrewmcveigh/cljs-time "0.5.2"]]

and in package.json: "dependencies": { "@smooth-ui/core-sc": "^11.1.5", "create-react-class": "^15.6.3", "highlight.js": "9.15.10", "react": "^16.13.0", "react-dom": "^16.13.0", "reakit": "^1.0.0-beta.16", "styled-components": "^5.0.1", "styled-icons": "^10.2.1" },

I get TypeError: Cannot convert object to primitive value in app.theme.js The error goes away if I replace theme with {} in theme.cljs The theme colors are ignored unless, I but them around a colors key: {:colors {:black ....

The theme borderRadius seems to be ignored even if I put them around a radii key. If the keys are ignored I can't setup the theme for the app following the smooth-ui docs.

Thanks for your help in advance. I understand your course works with older dependencies. I would prefer to immediately apply what I learned on my own projects.

FYI when upgrading to reagent 10. There is a warning since render moved to reagent.dom. This can be fixed easily by changing the require to reagent.dom in core.cljs

[jacekschae]

Hi there, Thanks for your comments. I looked at the changes in smooth-ui v11 and it looks like the whole library has been turn upside down. Some components are just missing -- Grid, Row, Col ...

I would recommend to follow the course with the version set in the package.json and shadow-cljs.edn. This way you can understand what is going on and then experiment. If you follow the course and understand how things with re-frame you won't have any problems with switching your ui-library.

If I could recommend something -- don't use styled components. Go with basic html elements and use classes. I can highly recommend tailwind css.

The only reason I chose styled components was that I didn't have to type out class names and remove a lot of verbosity from the course. The initial write-up of the course was using html elements and semantic-ui. I have to say I regret that a bit since with basic html elements you can swap classes, at least to some degreee, and most of the structure is the same. With something like styled components you will be chasing to updated libraries instead of focusing on solving real problems.

Hope this is not too disappointing.

[FabianMk]

Thanks for your answer. I'm not sure about tailwind as it is just an other dependency. Would you prefer tailwind over semantic-ui?

Any plans for an updated version of your example code in a branch using your initial write up? I wanted to follow the course by using the knowledge on my own projects, which would now be in html/css like in the reagent course. Its harder to follow along, if I need to adapt all the smooth-ui components.

Keep up the great work.

[jacekschae]

Yeah. Currently I would recommend tailwind -- keep in mind this is more of a utility framework than components framework.

Are there any components from SmootUI 10 that you are missing, therefore you decided to use 11?

[FabianMk]

Okay. I prefer to use the latest dependencies with new projects so that I don't need to rewrite it later. I might just do your course with smoothUI 10 and use raw css or tailwind for my own projects. If your initial write up would help, I would be glad to use the code as reference.

[jacekschae]

@FabianMk could we close this one?

[FabianMk]

Yes On 5. Jul 2020, 11:08 +0200, Jacek Schæ notifications@github.com, wrote:

@FabianMk could we close this one? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.