feat(alert): component with icon (#295)

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@material-ui/core": "^4.11.0",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/pickers": "^3.2.10",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
@@ -47,8 +48,8 @@
     "prettier": "^2.2.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-beautiful-dnd-test-utils": "^3.2.1",
+    "react-dom": "^17.0.1",
     "react-scripts": "^4.0.1",
     "semantic-release": "^17.3.0",
     "style-loader": "^2.0.0",

src/alert.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import useComponent from './use-component';
+import Component from './component';
+import MuiAlert from '@material-ui/lab/Alert';
+
+export default function Alert(props) {
+  const { severity, content } = useComponent(props.component, [
+    'severity',
+    'content',
+  ]);
+  return (
+    <MuiAlert severity={severity}>
+      {content && <Component component={content} />}
+    </MuiAlert>
+  );
+}

src/components.js

@@ -1,5 +1,6 @@
 // NOTE: this file should only contain the component registrations
 
+import Alert from './alert';
 import ButtonField from './fields/button-field';
 import BooleanField from './fields/boolean-field';
 import Card from './card';
@@ -13,6 +14,7 @@ import Fragment from './fragment';
 import Grid from './grid';
 import GridItem from './grid-item';
 import CollectionField from './fields/collection-field';
+import Container from './container';
 import ListField from './fields/list-field';
 import ReCAPTCHAField from './fields/re-captcha-field';
 import SelectField from './fields/select-field';
@@ -23,6 +25,7 @@ import TextField from './fields/text-field';
 import URLField from './fields/url-field';
 
 const components = {
+  Alert,
   ButtonField,
   BooleanField,
   Card,
@@ -38,6 +41,7 @@ const components = {
   Grid,
   GridItem,
   CollectionField,
+  Container,
   IdField: TextField,
   IntegerField: TextField,
   ListField,

src/container.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import useComponent from './use-component';
+import Component from './component';
+
+export default function Container(props) {
+  const { content } = useComponent(props.component, ['content']);
+  if (content) {
+    return <Component component={content} />;
+  } else {
+    return null;
+  }
+}

yarn.lock

@@ -1747,6 +1747,17 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/lab@^4.0.0-alpha.60":
+  version "4.0.0-alpha.60"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
+  integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/pickers@^3.2.10":
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"