Remove material dependencies from RecipeForm

recipes/package-lock.json

@@ -1225,6 +1225,11 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/layout-grid": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-5.1.0.tgz",
+      "integrity": "sha512-6TvPVZE+UGVfmzttbRp0K6SOUvFmYI5W8p966Vztg8dYK122ondRJqMmyFf0SS0CdbrbO+bSW7/S3YkpPNrvAg=="
+    },
     "@material/line-ripple": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.1.0.tgz",
@@ -1428,6 +1433,16 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/grid": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/grid/-/grid-6.0.14.tgz",
+      "integrity": "sha512-+Ba4GVYJaL/LS6fhm2vp5daJopb5iVO13U0k9n+zgIC3eXMGWBSM5pXZICGgrOF7uSKPBBmB4GGwRbZdTaJNDw==",
+      "requires": {
+        "@material/layout-grid": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/icon": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/@rmwc/icon/-/icon-6.0.14.tgz",

recipes/package.json

@@ -6,6 +6,7 @@
     "@rmwc/button": "^6.0.14",
     "@rmwc/dialog": "^6.1.0",
     "@rmwc/drawer": "^6.0.14",
+    "@rmwc/grid": "^6.0.14",
     "@rmwc/icon": "^6.0.14",
     "@rmwc/icon-button": "^6.0.14",
     "@rmwc/list": "^6.0.14",

recipes/src/components/RecipeForm/index.tsx

@@ -1,7 +1,11 @@
 import React, { useState, forwardRef } from 'react';
 
 import Recipe, { Ingredient, Suggestion, _ingredient, _subRecipe, DBRecipe, _recipe } from 'types/recipes';
-import { Grid, Row, Cell } from '@material/react-layout-grid';
+import {
+  Grid, 
+  GridCell as Cell, 
+  GridRow as Row
+} from '@rmwc/grid';
 import { Field, FieldArray, Formik, useField, Form, FieldArrayRenderProps, FormikValues } from 'formik';
 import { MeasuresTypes } from 'services/measurements';
 import { Input, Textarea, ControlledInput } from 'components/Input';
@@ -13,6 +17,7 @@ import TagInput from 'components/TagInput';
 import DurationPicker from 'components/DurationPicker';
 import Dialog from 'components/Dialog';
 
+import '@rmwc/grid/styles';
 import './styles.scss';
 
 type RecipeFormProps<T> = {
@@ -140,7 +145,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
           <Grid>
             <Form className='cbk-recipe-form' encType="multipart/form-data">
             <Row>
-              <Cell columns={2}>
+              <Cell span={2}>
                 <ImageUploader
                   initialValue={initialValues.image}
                   onChange={(image)=> {
@@ -148,7 +153,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
                   }}
                 />
               </Cell>
-              <Cell columns={10}>
+              <Cell span={10}>
                 <FormikInput name='name' label='name' />
                 <FormikTextarea name='summary' label='summary' />
               </Cell>
@@ -157,10 +162,10 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
             <h5>Author Information</h5>
             <section>
               <Row>
-                <Cell columns={3}>
+                <Cell span={3}>
                   <FormikInput name='author.name' label='name' required/>
                 </Cell>
-                <Cell columns={3}>
+                <Cell span={3}>
                   <FormikInput name='author.website' label='website' />
                 </Cell>
               </Row>
@@ -169,32 +174,32 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
             <h5>Recipe Information</h5>
             <section>
               <Row>
-                <Cell columns={2}>
+                <Cell span={2}>
                   <DurationPicker
                     initialValue={values.details.preparationTime}
                     onChange={(duration)=>{ setFieldValue('details.preparationTime', duration)}} 
                     label='preparation time'
                   />
                 </Cell>
-                <Cell columns={2}>
+                <Cell span={2}>
                   <DurationPicker
                     initialValue={values.details.cookingTime}
                     onChange={(duration)=>{ setFieldValue('details.cookingTime', duration)}} 
                     label='cooking time'
                   />
                 </Cell>
-                <Cell columns={2}>
+                <Cell span={2}>
                   <FormikInput name='details.servings' label='servings' type='number' />
                 </Cell>
-                <Cell columns={3}>
+                <Cell span={3}>
                   <FormikInput name='details.url' label='recipe url' />
                 </Cell>
-                <Cell columns={3}>
+                <Cell span={3}>
                   <FormikInput name='details.video' label='recipe video' />
                 </Cell>
               </Row>
               <Row>
-                <Cell columns={12}>
+                <Cell span={12}>
                   <TagInput
                     tags={values.tags}
                     label='tags'
@@ -203,7 +208,7 @@ const RecipeForm = <T extends Recipe|DBRecipe>({ initialValues, onSubmit, onCanc
                 </Cell>
               </Row>
               <Row>
-                <Cell columns={12}>
+                <Cell span={12}>
                   <TagInput
                     tags={values.course}
                     label='dish course'