[173] Migrate View, Form and FormContainer to MaterialUI

Bug: #173
Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>

doc/adrs/004_migrate_our_components_to_materialui.adoc

@@ -0,0 +1,106 @@
+= ADR-004 - Migrate our components to Material UI
+
+== Context
+
+We have started the project with our own custom made components.
+Is has helped us not get overwhelmed with frameworks and it has also been an opporunity for new members of our team to start working on simple tasks.
+We are now trying to create complex pieces of user interface and doing so all by ourselves is distracting us from the core issues that we are trying to tackle.
+
+MaterialUI is a great UI framework with a good community and tons of features.
+
+== Decision
+
+We have decided to move our user interface to an off the shelves user interface component library, MaterialUI.
+
+== Status
+
+Accepted.
+
+== Consequences
+
+While this may not be the perfect place to do so, we will list here some consequences of this migration such as the new patterns that we will use.
+
+=== Theme and style
+
+Sirius Components will use various components from MaterialUI but it will not define the theme to use.
+Applications based on top of Sirius Components will have to define a theme.
+Since Sirius Components will have to handle a large number of use cases, it may add some constraints on the required theme.
+Such constraints may even go as far as providing some core theme settings.
+
+=== CSS in JS
+
+In order to align our code with the best practices from the MaterialUI community, our CSS will move progressively from CSS modules to CSS in JS.
+Thanks to CSS in JS, we will be able to compute CSS dynamically from the theme.
+
+The theme will be responsible for the definition of colors, text styles, spacing, etc.
+As such, we will not define anymore in the CSS of Sirius Components rules regarding:
+
+- Text-related properties font, font size, weight, line height
+- Custom colors such as `rgb(x, y, z)` or `#ABCDEF`
+- Custom spacing such as `padding-top: 16px`
+
+To create our CSS, we will rely on the function `makeStyles`.
+
+```
+import { makeStyles } from '@material-ui/core/styles';
+
+const useFormStyles = makeStyles((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+}));
+
+export const Form = ({ children }) => {
+  const classes = useFormStyles();
+  return (
+    <form className={classes.form}>
+      {children}
+    </form>
+  );
+};
+```
+
+=== Text styling
+
+In order to display some text in the user interface, we will rely on the `<Typography/>` component.
+To specify the look of this text, we will use the `variant` property, we will always define a variant when using typography.
+In order to display some text, we will thus use something like this:
+
+```
+<Typography variant="h4">Hello World</Typography>
+```
+
+We will rely on standard variants of MaterialUI and only introduce custom ones if we are absolutely stuck.
+Such change would need to be properly documented since it would introduce a custom "design API" that our users would have to follow.
+
+=== Layout
+
+Most of our layout will continue to leverage custom usage of flexbox and grid on regular divs.
+Try not to create grids if you only have one column or one row since the grid layout has a greater performance impact than the flexbox layout.
+
+In order to fine tune some internal details of our layout, we will continue to rely mostly on `padding` (since `margin` is creating more issues in order to reuse some components).
+We will reuse the theme in order to compute sizes for the padding.
+
+```
+const useViewStyles = makeStyles((theme) => ({
+  main: {
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+  },
+}));
+
+export const View = ({ children }) => {
+  const classes = useViewStyles();
+
+  return (
+    <main className={classes.main}>
+      {children}
+    </main>
+  );
+};
+```
+
+== References
+
+- https://material-ui.com

frontend/src/core/banner/Banner.tsx

@@ -9,6 +9,9 @@
  *
  * Contributors:
  *     Obeo - initial API and implementation
+ *
+ * @deprecated use @material-ui/core/Snackbar instead
+ *
  *******************************************************************************/
 import { Text } from 'core/text/Text';
 import { Danger } from 'icons';

frontend/src/core/form/Form.tsx

@@ -10,25 +10,32 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
+import React from 'react';
 
-import styles from './Form.module.css';
+const useFormStyles = makeStyles((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    '& > *': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+}));
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  encType: PropTypes.string,
 };
-export const Form = ({ children, onSubmit, encType }) => {
-  const props = {
-    className: styles.form,
-    onSubmit,
-    encType: undefined,
-  };
-  if (encType) {
-    props.encType = encType;
-  }
-  return <form {...props}>{children}</form>;
+export const Form = ({ children, ...props }) => {
+  const classes = useFormStyles();
+  return (
+    <form {...props} className={classes.form}>
+      {children}
+    </form>
+  );
 };
 Form.propTypes = propTypes;

frontend/src/views/FormContainer.tsx

@@ -10,29 +10,49 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { Banner } from 'core/banner/Banner';
-import { Text } from 'core/text/Text';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './FormContainer.module.css';
+
+const useFormContainerStyles = makeStyles((theme) => ({
+  formContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: theme.spacing(8),
+  },
+  content: {
+    display: 'grid',
+    gridTemplateRows: '1fr',
+    gridTemplateColumns: '1fr',
+  },
+  titleContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBottom: theme.spacing(2),
+  },
+}));
 
 const propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string.isRequired,
-  banner: PropTypes.node,
   children: PropTypes.node.isRequired,
 };
+export const FormContainer = ({ title, subtitle, children }) => {
+  const classes = useFormContainerStyles();
 
-export const FormContainer = ({ title, subtitle, banner, children }) => {
-  let bannerContent = banner ? <Banner data-testid="banner" content={banner} /> : null;
   return (
-    <div className={styles.container}>
-      <div className={styles.titleContainer}>
-        <Text className={styles.title}>{title}</Text>
-        <Text className={styles.subtitle}>{subtitle}</Text>
+    <div className={classes.formContainer}>
+      <div className={classes.titleContainer}>
+        <Typography variant="h4" align="center" gutterBottom>
+          {title}
+        </Typography>
+        <Typography variant="h5" align="center" gutterBottom>
+          {subtitle}
+        </Typography>
       </div>
-      <div className={styles.bannerArea}>{bannerContent}</div>
-      <div className={styles.content}>{children}</div>
+      <Paper>{children}</Paper>
     </div>
   );
 };