Pick a React component library as our base UI toolkit

[humphd]

What would you like to be added:

Let's pick a well supported React component library, and use it as a base for building our designs. The ones I know, and would suggest:

• https://react-bootstrap.github.io/
• https://material-ui.com/

Microsoft's Fabric components https://developer.microsoft.com/en-us/fabric#/controls/web are neat too, but look a bit too "Office" for our needs.

There are a lot of unmaintained ones too, and I'd suggest we avoid.

Why would you like this to be added:

Initially we've been creating all of our own components, and it's a huge time sink. So many things have to be done to get these right, from styling to accessibility to UX. Let's not take on the work of creating everything from scratch when there are so many good frameworks we can use as a base.

NOTE: I'm not suggesting we don't do design work and create our own look-and-feel. Rather, I'd rather we began from an existing set of components, and customized those vs. vanilla HTML/CSS/JS.

For example, we currently need to create a search component. Here's how you can do it in Material-UI:

https://material-ui.com/components/text-fields/#customized-inputs

And in React Bootstrap:

https://react-bootstrap.github.io/components/forms/

Both allow you to specify things like colour and font, add buttons and icons, etc.

The cost to using one of these is that we have to learn a bit about how to use their components; but what we gain is that we don't have to implement 90% of what already exists.

Does anyone have a strong preference? I'm most familiar with Material-UI, but am happy to use React Bootstrap, too.

Once we pick one, we can start by porting our existing code over to use the framework's components, then extend.

[cindyorangis]

Looking at the Material UI docs and components, I think it's a solid pick for Telescope. I've used Bootstrap for so long that I can smell it from a mile away. Material UI looks beautiful and it has a lot of the components we will be using.

I wish I realized we already had Material UI in our tree before I implemented the Hero Banner. I'm embarrassed to say how long I spent on it. Implementing future components will definitely be less time consuming if we use Material UI.

[agarcia-caicedo]

I agree with @cindyledev, I'm good with using material ui

[humphd]

That's 3 votes for Material UI, and I think given that Miguel add it originally, we can say "4 votes."

[Silvyre]

5 votes; I like MUI (am currently using it in a different React project)

Oh, and I just noticed...

telescope/src/frontend/package.json

Lines 4 to 7 in 9dc8564

	"dependencies": {
	"@material-ui/core": "^4.8.3",
	"@material-ui/icons": "^4.5.1",
	"@material-ui/styles": "^4.8.2",

---

This might be useful: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/
e.g. https://github.com/mui-org/material-ui/tree/master/examples/gatsby
e.g. https://github.com/hupe1980/gatsby-theme-material-ui/tree/master/examples/simple

[humphd]

Picking up on another discussion related to this, a point for us to consider is how we want to do CSS if using MUI. You can do any CSS approach you want with MUI, but using their built-in styling has some advantages. For one, it's well supported by the MUI project, and all their docs and examples (which are extensive) use it.

If you haven't done this kind of CSS before, it takes a bit to get used to it. I've come to like it, personally, as I've used it on projects.

My vote would be: use MUI and MUI's CSS-in-JS styling, get rid of our CSS files. How do others feel?

[Silvyre]

My vote would be: use MUI and MUI's CSS-in-JS styling, get rid of our CSS files. How do others feel?

+1 vote for this!

[miggs125]

@humphd I agree with material-ui. Really easy to use.

[Grommers00]

@humphd I like Material-UI and think we should get rid of the .css files.

However, I do think the functions related to Material-UI should be stored in a separate file within the same folder of that component, to allow for a quick and easy way for someone to get to the CSS for that particular component.

This will also hopefully keep our components smaller in code and easier to locate the necessary CSS if we need to make changes.

[c3ho]

Closed via #735