Feature/mui v5

[bertearazvan]

This PR

Closes #269

This PR represents the migration of our library from Material-UI.4 to Mui.5.

The considerations taken during the development:

• For styling Mui.5 recommends Styled components, which is what I used as well. This means that styling should only be made through Styled components from now on. The "@mui/styles" offering "withStyles"/"makeStyles" is also available, however, deprecated. From my personal experience once I coded a few components using Styled, for me it was more efficient and I feel like I wrote less code. It also offers nice options with experimental_sx and custom props only for the styled component, without an "internal" state.
• The styled components follow the name structure Component.styled.ts, and are imported like import ComponentStyled from "./Component.styled.ts.
• I migrated all the theme and style specifications within it. I can see that componentProps is not existent as part of the theme anymore. Therefore, it is not included anymore in the given theme. Does anybody use those "componentProps" from the Material-UI.4 theme?
• The styling seems nicer, without $ when referencing a child class. For example, if before we would have &$checked now it would be & .Mui-checked. The difference between &.Class and & .Class is
  -- &.Class styles the component that it is attached to. For example, if the classes would be "Class1 Class", it would style the element that also "Class1" has.
  -- & .Class styles the children components with the given class. It can be used also like & span.
  -- & + .Class styles are the sibling elements of the given element with the provided class.
• sx prop exists on all(?) the MuI components and takes care of creating dynamic classes. It feels like a style prop, but enhanced. If applied to the component, we can use finst. backgroundColor: 'primary.main;. If this way of accessing the pallete values are not wrapped in a sort of sx, then it won't work. For example if we use a StyledComponent and want to use lightGrey.main within it, we need to leverage the experimental_sx from "@mui/system".

To be explored:

• Is it backwards compatible? Can projects under materialUI.4 use this theme? - no, it can't

Questions, considerations?

The package can be found under "@dhi/react-components-lab": "1.13.2-MUIv5.beta.0".

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[bertearazvan]

Discoveries:

• We are using emotion styled through @mui/material

We can style components like

  width: '100%',
  height: 6,
  borderRadius: 4,
});

or

import { styled } from '@mui/material';
import { experimental_sx as sx } from '@mui/system';

const ImgLegendStyled = styled('img')(
  sx({
    width: '100%',
    height: 6,
    borderRadius: 4,
    backgroundColor: 'primary.main',
  })
);

// in this case, if we want "sx" to pick the theme inside "styled", 
// we have to pass the theme instance it to the component in the "theme" prop like so:
 <ImgLegendStyled src={src} alt="legend-colorbar" theme={theme} />

we can style components directly with the sx prop which picks the theme from the context.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-glacier-08aae7903-270.westeurope.azurestaticapps.net