integrating react-toolbox?

[younanjo]

Hi @coryhouse

There seems to be few possible ways to integrate themes (bootstrap/ Material UI) within this projects. I'm mostly interested in integrating react-toolbox with this project and was wondering if there's a example/fork or recommend approach one should take to go about this.

thanks

[coryhouse]

I haven't used react-toolbox, but here's a PR that supposedly added support. I didn't accept the PR because I was concerned about how complicated it made the webpack config.

https://github.com/coryhouse/react-slingshot/pull/55

[jason-henriksen]

This really sucks. I want to use slingshot, but I can't because I can't get any of the common UI component frameworks to work? I want to build a website, not mess with building my own completely non-reusable component library.

Honestly, I think this whole pile of stuff is vastly over-complicated, and I'm using a boiler plate so I don't have to care. But if I can't easily add UI components to that boilerplate, then what's the point?

I don't care between material-ui, react-toolkit, bootstrap or whatever. But ONE of them should be supported out of the box. It was lack of support for a UI toolkit that made me drop react-boilerplate and come over to try this project out in the first place. :(

[fayimora]

@jason-henriksen Sorry you're having issues with this. However, I've been able to integrate bootstrap and react-md fairly easily.

ONE of them should be supported out of the box.

Because it's as simple as yarn add bootstrap and then @import '/path/to/boootstrap', I dont think it should be included by default.

[jason-henriksen]

I think I'm going to have "Javascript Fatigue" tattooed on my forehead. This is the first I've heard of 'yarn', I just got finished spending half a day reading up on NPM!

Still, thank you for the tip about getting bootstrap started. I foolishly began with material-ui. Failed. Tried react-toolbox. Failed. I should have tried bootstrap before giving up I guess.

Maybe a page in the documentation stating that bootstrap is a preferred / supported UI toolkit would help? Or maybe just this comment will be enough.

Regardless, thanks for the tip. I ended up getting material-ui working with create-react-app, so I guess I"m going to work with that until I find something that is incompatible with.
(which will be Typescript by the look of it)

Anyway. Thanks again.

[nickytonline]

@jason-henriksen, you don't need to use yarn. We use it for our CI, but you can use yarn or npm.

[retorquere]

Bootstrap is however woefully incomplete as a UI framework. I feel @jason-henriksen's pain -- I've been trying without much progress cobbling together something that brings together auth0, a usable UI toolkit -- material-ui and react-toolbox, preferable, but I've tried and discarded about 10 or so over the past month -- with slingshot, but a month in and exactly nothing works. I've followed Corey's courses and they're great, but the build-your-own-toolkit approach that seems to be the way to go around React is exasperating.

[kwelch]

@retorquere Is there a specific thing you cannot get working with react-toolbox? I am using with a toolkit that i derived from slingshot. If you have a certain question or a repo to share I will do my best to help out.

[retorquere]

@kwelch you're a life-saver. Specifically I'm struggling to put together the routing from the samples from auth0 and either material-ui or react-toolbox with slingshot. The closest I got to working was the state of affairs after I finished Corey's "Building Applications with React and Redux in ES6" with auth0-lock added, but that's a loooong way away from slingshot.

[kwelch]

Here is my current webpack config for dev. I would focus mainly on the loaders part for react-toolbox.

https://gist.github.com/kwelch/ddc692376dde8d6a21abc4f40d11d4bf

You will see that I have 2 loaders for css|scss one that uses CSSModules and one that doesn't. This is to allow other css libraries like normalize.css and material-design-icons to be imported globally.

I define the cssModules Paths toward the top, you should only need it to include the src and the node_modules/react-toolbox directories.

Final item of use if the toolbox-loader this is for global theming, specifically I am using it for modifying the react-toolbox color scheme. Another option is the sass-loader option from the react-toolbox documentation, but the toolbox-loader worked better for this specific setup.

As for auth0, unfortunately I am not familiar with it. Hopefully the config above can at least get the UI framework concern off of your plate.

[retorquere]

(I'm fine continuing this here or on slack/gitter/what have you if this is deemed too chatty for an issue)

@kwelch after installing I've dropped your webpack config into slingshot, installed the additional immutability-helper/react-addons-css-transition-group/react-toolbox (natch)/case-sensitive-paths-webpack-plugin/react-dev-utils/webpack-validator, but now npm start -s says:

~/react-slingshot/node_modules/webpack/lib/webpack.js:27
    throw new Error("Invalid argument: options");
    ^

Error: Invalid argument: options
    at webpack (~/react-slingshot/node_modules/webpack/lib/webpack.js:27:9)
    at Object.<anonymous> (~/react-slingshot/tools/srcServer.js:14:17)
    at Module._compile (module.js:571:32)
    at loader (~/react-slingshot/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (~/react-slingshot/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Function.Module.runMain (module.js:605:10)
    at ~/react-slingshot/node_modules/babel-cli/lib/_babel-node.js:159:24
    at Object.<anonymous> (~/react-slingshot/node_modules/babel-cli/lib/_babel-node.js:160:7)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

BTW, for some reason after I run npm start -s, my console stops echoing the characters I type.

[kwelch]

I would not drop mine in place of yours I would bring other parts. The one I send exports a config factory, my current project is a mono-web app managed with Lerna. The main part is the css loaders.

Agreed on chattiness in the issue. Open for other venue, ideally somewhere with visibility in the event future dev needs this information.

[retorquere]

@kwelch I think I have the stock webpack mostly set up with what you mean now. We could continue on gitter or just as comments on your gist. I intend to publish either the instructions to get slingshot up to speed with all this or a fork which I will keep synced to slingshot -- not only for posterity, but also for my own sanity.

[kwelch]

Updated the gist and commented to you. @retorquere

[jason-henriksen]

For what it's worth, I've given up on material-ui and react-toolbox and had much better luck simply importing materialize-css and using styled-components to build the divs I want. It's not as "clean" as a pure react solution, but I'm getting a much more productive work environment for 99% the same end result.

[retorquere]

@jason-henriksen I wish I could get away with that; I am thoroughly fed up with getting these toolkits to work with React, but I need a date picker that will integrate well.

[retorquere]

@jason-henriksen except materializecss does have a datepicker... but not the sortable table I need. But I'm going to give materializecss a shot in any case.